@php
    $vehiculo = $vehiculo ?? null;
    $tipoDefault = $vehiculo->tipo_vehiculo->value ?? 'moto';
@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.">
    <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 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 cargarlos 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
                @if($vehiculo->soat_archivo ?? null)
                    <span class="tab-btn-dot" title="Documento cargado"></span>
                @endif
            </button>
            <button type="button" class="tab-btn" data-tab-target="tecnomecanica">
                Tecnomecánica
                @if($vehiculo->tecnomecanica_archivo ?? null)
                    <span class="tab-btn-dot" title="Documento cargado"></span>
                @endif
            </button>
        </div>

        <div class="tab-panel is-active" data-tab-panel="soat">
            <div class="field-grid">
                <x-form.input name="soat_numero" label="Número de SOAT" :default="$vehiculo->soat_numero ?? null" />
                <x-form.input name="soat_vencimiento" label="Fecha de vencimiento" type="date" :default="$vehiculo?->soat_vencimiento?->format('Y-m-d') ?? null" />
                <div class="field-span-2">
                    <x-form.file name="soat_archivo" label="Archivo del SOAT" hint="PDF, JPG o PNG, máximo 5MB." :current="$vehiculo->soat_archivo ?? null" />
                </div>
            </div>
        </div>

        <div class="tab-panel" data-tab-panel="tecnomecanica">
            <div class="field-grid">
                <x-form.input name="tecnomecanica_numero" label="Número de Tecnomecánica" :default="$vehiculo->tecnomecanica_numero ?? null" />
                <x-form.input name="tecnomecanica_vencimiento" label="Fecha de vencimiento" type="date" :default="$vehiculo?->tecnomecanica_vencimiento?->format('Y-m-d') ?? null" />
                <div class="field-span-2">
                    <x-form.file name="tecnomecanica_archivo" label="Archivo de Tecnomecánica" hint="PDF, JPG o PNG, máximo 5MB." :current="$vehiculo->tecnomecanica_archivo ?? null" />
                </div>
            </div>
        </div>
    </div>
</x-card>