@php
    $vehiculo = $vehiculo ?? null;
    $tipoDefault = $vehiculo->tipo_vehiculo->value ?? 'moto';
    $origenDefault = old('origen_compra', ($vehiculo->cliente_id ?? null) ? 'cliente' : 'proveedor');
@endphp

<x-card title="Clasificación" icon="tag" hint="Elige el tipo de vehículo y la empresa a la que pertenece.">
    <div class="type-switch" role="radiogroup" aria-label="Tipo de vehículo">
        <label class="type-option">
            <input type="radio" name="tipo_vehiculo" value="moto" data-label="Motocicleta"
                {{ old('tipo_vehiculo', $tipoDefault) === 'moto' ? 'checked' : '' }}>
            <span class="type-option-card">
                <x-icon name="motorbike" />
                <span>
                    <span class="type-option-title">Motocicleta</span><br>
                    <span class="type-option-desc">Moto de dos ruedas</span>
                </span>
            </span>
        </label>

        <label class="type-option">
            <input type="radio" name="tipo_vehiculo" value="carro" data-label="Carro"
                {{ old('tipo_vehiculo', $tipoDefault) === 'carro' ? 'checked' : '' }}>
            <span class="type-option-card">
                <x-icon name="car" />
                <span>
                    <span class="type-option-title">Carro</span><br>
                    <span class="type-option-desc">Vehículo de cuatro ruedas</span>
                </span>
            </span>
        </label>
    </div>
    @error('tipo_vehiculo')
        <p class="field-error">{{ $message }}</p>
    @enderror

    <x-form.select
        name="empresa_id"
        label="Empresa"
        :options="$empresas->pluck('nombre', 'id')"
        placeholder="Selecciona una empresa"
        :default="$vehiculo->empresa_id ?? null"
        required
    />
</x-card>

<x-card title="Datos del Vehículo" icon="clipboard" hint="Información técnica e identificación del vehículo.">
    <div class="field-grid-3">
        <x-form.input name="marca" label="Marca" required :default="$vehiculo->marca ?? null" />
        <x-form.input name="linea" label="Línea" required :default="$vehiculo->linea ?? null" />
        <x-form.input name="modelo" label="Modelo" required hint="Ej. 2024" :default="$vehiculo->modelo ?? null" />
        <x-form.input name="color" label="Color" required :default="$vehiculo->color ?? null" />
        <x-form.input name="cilindraje" label="Cilindraje" hint="Ej. 125cc" :default="$vehiculo->cilindraje ?? null" />
        <x-form.input name="placa" label="Placa" required uppercase :default="$vehiculo->placa ?? null" />
        <x-form.input name="matricula" label="Matrícula" uppercase :default="$vehiculo->matricula ?? null" />
        <x-form.input name="chasis" label="# Chasis" uppercase :default="$vehiculo->chasis ?? null" />
        <x-form.input name="moto" label="Moto (# Motor)" uppercase :default="$vehiculo->moto ?? null" />
        <x-form.input name="manifiesto" label="Manifiesto" uppercase :default="$vehiculo->manifiesto ?? null" />
    </div>
</x-card>

<x-card title="Proveedor y Compra" icon="users" hint="A quién se le compró el vehículo y a qué precio.">
    <div class="type-switch" role="radiogroup" aria-label="Origen de la compra">
        <label class="type-option">
            <input type="radio" name="origen_compra" value="proveedor" data-origen-toggle
                {{ $origenDefault === 'proveedor' ? 'checked' : '' }}>
            <span class="type-option-card">
                <x-icon name="users" />
                <span>
                    <span class="type-option-title">Proveedor</span><br>
                    <span class="type-option-desc">Comprado a un proveedor/distribuidor</span>
                </span>
            </span>
        </label>

        <label class="type-option">
            <input type="radio" name="origen_compra" value="cliente" data-origen-toggle
                {{ $origenDefault === 'cliente' ? 'checked' : '' }}>
            <span class="type-option-card">
                <x-icon name="user-badge" />
                <span>
                    <span class="type-option-title">Cliente</span><br>
                    <span class="type-option-desc">Comprado directamente a una persona</span>
                </span>
            </span>
        </label>
    </div>
    @error('origen_compra')
        <p class="field-error">{{ $message }}</p>
    @enderror

    <div data-origen-panel="proveedor" {{ $origenDefault !== 'proveedor' ? 'hidden' : '' }}>
        <x-form.select
            name="proveedor_id"
            label="Proveedor"
            :options="$proveedores->pluck('nombre', 'id')"
            placeholder="Selecciona un proveedor"
            :default="$vehiculo->proveedor_id ?? null"
            required
        />
        <p class="field-hint field-hint-tight">
            ¿No está en la lista?
            <a href="{{ route('proveedores.create') }}" class="field-hint-link">Crea un proveedor nuevo</a>.
        </p>
    </div>

    <div data-origen-panel="cliente" {{ $origenDefault !== 'cliente' ? 'hidden' : '' }}>
        <div class="field-grid">
            <x-form.input name="cliente_nombre" label="Nombre Completo" required placeholder="Nombre del cliente" :default="old('cliente_nombre', $vehiculo->cliente->nombre ?? null)" />
            <x-form.input name="cliente_cc" label="C.C." required placeholder="Número de cédula" :default="old('cliente_cc', $vehiculo->cliente->cc ?? null)" />
            <x-form.input name="cliente_telefono" label="Teléfono" placeholder="Ej: 3001234567" :default="old('cliente_telefono', $vehiculo->cliente->telefono ?? null)" />
            <x-form.input name="cliente_email" label="Email" type="email" placeholder="Ej: cliente@email.com" :default="old('cliente_email', $vehiculo->cliente->email ?? null)" />
            <div class="field-span-2">
                <x-form.input name="cliente_direccion" label="Dirección" placeholder="Dirección del cliente" :default="old('cliente_direccion', $vehiculo->cliente->direccion ?? null)" />
            </div>
        </div>
        <p class="field-hint field-hint-tight">
            Si ya existe un cliente con esa cédula, se usa tal como está guardado.
        </p>
    </div>

    <div class="field-grid">
        <x-form.input
            name="fecha_compra"
            label="Fecha de Compra"
            type="date"
            required
            :default="$vehiculo?->fecha_compra?->format('Y-m-d') ?? now()->format('Y-m-d')"
            :max="now()->format('Y-m-d')"
        />
        <x-form.currency name="precio_compra" label="Precio de Compra" required :default="$vehiculo->precio_compra ?? null" />
    </div>
</x-card>

<x-card title="Documentos" icon="file" hint="Opcional: puedes completarlos ahora o más adelante desde Editar.">
    <div data-tabs>
        <div class="tabs-nav" role="tablist">
            <button type="button" class="tab-btn is-active" data-tab-target="soat">SOAT</button>
            <button type="button" class="tab-btn" data-tab-target="tecnomecanica">Tecnomecánica</button>
        </div>

        @php($soatUsaEstado = old('soat_usa_estado', ($vehiculo->soat_estado ?? null) ? '1' : null))
        @php($tecnoUsaEstado = old('tecnomecanica_usa_estado', ($vehiculo->tecnomecanica_estado ?? null) ? '1' : null))

        <div class="tab-panel is-active" data-tab-panel="soat">
            <label class="checkbox-field">
                <input type="checkbox" name="soat_usa_estado" value="1" data-doc-checkbox="soat" {{ $soatUsaEstado ? 'checked' : '' }}>
                <span>No tengo la fecha de vencimiento, usar estado (Nueva / No aplica)</span>
            </label>

            <div class="field-grid">
                <x-form.input name="soat_numero" label="Número de SOAT" :default="$vehiculo->soat_numero ?? null" />

                <div>
                    <div data-doc-fecha-wrap="soat" {{ $soatUsaEstado ? 'hidden' : '' }}>
                        <x-form.input name="soat_vencimiento" label="Fecha de vencimiento" type="date" :default="$vehiculo?->soat_vencimiento?->format('Y-m-d') ?? null" />
                    </div>
                    <div data-doc-estado-wrap="soat" {{ $soatUsaEstado ? '' : 'hidden' }}>
                        <x-form.select
                            name="soat_estado"
                            label="Estado del SOAT"
                            placeholder="Selecciona una opción"
                            :options="['nueva' => 'Nueva', 'no_aplica' => 'No aplica']"
                            :default="$vehiculo->soat_estado?->value ?? null"
                        />
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-panel" data-tab-panel="tecnomecanica">
            <label class="checkbox-field">
                <input type="checkbox" name="tecnomecanica_usa_estado" value="1" data-doc-checkbox="tecnomecanica" {{ $tecnoUsaEstado ? 'checked' : '' }}>
                <span>No tengo la fecha de vencimiento, usar estado (Nueva / No aplica)</span>
            </label>

            <div class="field-grid">
                <x-form.input name="tecnomecanica_numero" label="Número de Tecnomecánica" :default="$vehiculo->tecnomecanica_numero ?? null" />

                <div>
                    <div data-doc-fecha-wrap="tecnomecanica" {{ $tecnoUsaEstado ? 'hidden' : '' }}>
                        <x-form.input name="tecnomecanica_vencimiento" label="Fecha de vencimiento" type="date" :default="$vehiculo?->tecnomecanica_vencimiento?->format('Y-m-d') ?? null" />
                    </div>
                    <div data-doc-estado-wrap="tecnomecanica" {{ $tecnoUsaEstado ? '' : 'hidden' }}>
                        <x-form.select
                            name="tecnomecanica_estado"
                            label="Estado de la Tecnomecánica"
                            placeholder="Selecciona una opción"
                            :options="['nueva' => 'Nueva', 'no_aplica' => 'No aplica']"
                            :default="$vehiculo->tecnomecanica_estado?->value ?? null"
                        />
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-card>