@extends('layouts.panel-tamplate')

@section('header-content')
    <div class="flex items-center gap-4">
        <button onclick="history.back()"
            class="text-slate-500 hover:bg-slate-100 transition-colors p-2 rounded-full active:scale-95 duration-200">
            <span class="material-symbols-outlined" data-icon="arrow_back">arrow_back</span>
        </button>
        <h1 class="font-['Inter'] text-[20px] font-bold tracking-tight text-[#248aeb]">Registro de Unidad</h1>
    </div>
@endsection

@section('main-content')
    <!-- Section 1: INFORMACIÓN DE LA UNIDAD -->
    <section class="bg-surface p-6 rounded-xl shadow-sm space-y-4">
        <div class="flex items-center gap-2 mb-2">
            <span class="material-symbols-outlined text-primary text-xl" data-icon="local_taxi">local_taxi</span>
            <h2 class="text-xs font-bold tracking-wider text-secondary uppercase">Información de la Unidad</h2>
        </div>
        <div class="grid grid-cols-2 gap-4">
            <div class="col-span-1">
                <label class="block text-[11px] font-semibold text-on-surface-variant uppercase mb-1 ml-1">Número
                    Económico</label>
                <input
                    class="w-full bg-surface-container-lowest border-none ring-1 ring-outline-variant focus:ring-2 focus:ring-primary rounded-lg px-4 py-3 text-sm transition-all outline-none"
                    placeholder="TX-1024" type="text" />
            </div>
            <div class="col-span-1">
                <label class="block text-[11px] font-semibold text-on-surface-variant uppercase mb-1 ml-1">Placas</label>
                <input
                    class="w-full bg-surface-container-lowest border-none ring-1 ring-outline-variant focus:ring-2 focus:ring-primary rounded-lg px-4 py-3 text-sm transition-all outline-none"
                    placeholder="ABC-123-D" type="text" />
            </div>
        </div>
        <div>
            <label class="block text-[11px] font-semibold text-on-surface-variant uppercase mb-1 ml-1">Marca y
                Modelo</label>
            <input
                class="w-full bg-surface-container-lowest border-none ring-1 ring-outline-variant focus:ring-2 focus:ring-primary rounded-lg px-4 py-3 text-sm transition-all outline-none"
                placeholder="Nissan Versa 2023" type="text" />
        </div>
        <div>
            <label class="block text-[11px] font-semibold text-on-surface-variant uppercase mb-1 ml-1">Año del
                Vehículo</label>
            <input
                class="w-full bg-surface-container-lowest border-none ring-1 ring-outline-variant focus:ring-2 focus:ring-primary rounded-lg px-4 py-3 text-sm transition-all outline-none"
                placeholder="2023" type="number" />
        </div>
    </section>
    <!-- Section 2: DETALLES TÉCNICOS -->
    <section class="bg-surface p-6 rounded-xl shadow-sm space-y-4">
        <div class="flex items-center gap-2 mb-2">
            <span class="material-symbols-outlined text-primary text-xl"
                data-icon="settings_suggest">settings_suggest</span>
            <h2 class="text-xs font-bold tracking-wider text-secondary uppercase">Detalles Técnicos</h2>
        </div>
        <div>
            <label class="block text-[11px] font-semibold text-on-surface-variant uppercase mb-1 ml-1">Tipo de
                Combustible</label>
            <select
                class="w-full bg-surface-container-lowest border-none ring-1 ring-outline-variant focus:ring-2 focus:ring-primary rounded-lg px-4 py-3 text-sm transition-all outline-none appearance-none">
                <option>Gasolina</option>
                <option>Gas LP</option>
                <option>Híbrido</option>
                <option>Eléctrico</option>
            </select>
        </div>
        <div>
            <label class="block text-[11px] font-semibold text-on-surface-variant uppercase mb-1 ml-1">Número de
                Serie (VIN)</label>
            <input
                class="w-full bg-surface-container-lowest border-none ring-1 ring-outline-variant focus:ring-2 focus:ring-primary rounded-lg px-4 py-3 text-sm transition-all outline-none"
                placeholder="1HD1KRE12..." type="text" />
        </div>
    </section>
    <!-- Section 3: CONFIGURACIÓN DE MANTENIMIENTO -->
    <section class="bg-surface p-6 rounded-xl shadow-sm space-y-4">
        <div class="flex items-center gap-2 mb-2">
            <span class="material-symbols-outlined text-primary text-xl" data-icon="build">build</span>
            <h2 class="text-xs font-bold tracking-wider text-secondary uppercase">Mantenimiento</h2>
        </div>
        <div>
            <label class="block text-[11px] font-semibold text-on-surface-variant uppercase mb-1 ml-1">Último
                Servicio</label>
            <div class="relative">
                <input
                    class="w-full bg-surface-container-lowest border-none ring-1 ring-outline-variant focus:ring-2 focus:ring-primary rounded-lg px-4 py-3 text-sm transition-all outline-none"
                    type="date" />
            </div>
        </div>
        <div class="grid grid-cols-2 gap-4">
            <div class="col-span-1">
                <label class="block text-[11px] font-semibold text-on-surface-variant uppercase mb-1 ml-1">Kilometraje
                    Actual</label>
                <input
                    class="w-full bg-surface-container-lowest border-none ring-1 ring-outline-variant focus:ring-2 focus:ring-primary rounded-lg px-4 py-3 text-sm transition-all outline-none"
                    placeholder="45000" type="number" />
            </div>
            <div class="col-span-1">
                <label
                    class="block text-[11px] font-semibold text-on-surface-variant uppercase mb-1 ml-1">Frecuencia</label>
                <select
                    class="w-full bg-surface-container-lowest border-none ring-1 ring-outline-variant focus:ring-2 focus:ring-primary rounded-lg px-4 py-3 text-sm transition-all outline-none appearance-none">
                    <option>Cada 5,000 km</option>
                    <option>Cada 10,000 km</option>
                </select>
            </div>
        </div>
    </section>
    <!-- Section 4: ESTATUS INICIAL -->
    <section class="bg-surface p-6 rounded-xl shadow-sm space-y-4">
        <div class="flex items-center gap-2 mb-2">
            <span class="material-symbols-outlined text-primary text-xl" data-icon="dynamic_feed">dynamic_feed</span>
            <h2 class="text-xs font-bold tracking-wider text-secondary uppercase">Estatus Inicial</h2>
        </div>
        <div class="flex gap-2">
            <label class="flex-1 cursor-pointer">
                <input checked="" class="hidden peer" name="status" type="radio" value="activa" />
                <div
                    class="text-center p-3 rounded-lg border border-outline-variant peer-checked:border-primary peer-checked:bg-primary-container/30 peer-checked:text-primary transition-all">
                    <span class="text-[10px] font-bold block uppercase">Activa</span>
                </div>
            </label>
            <label class="flex-1 cursor-pointer">
                <input class="hidden peer" name="status" type="radio" value="inactiva" />
                <div
                    class="text-center p-3 rounded-lg border border-outline-variant peer-checked:border-secondary peer-checked:bg-secondary-container peer-checked:text-secondary transition-all">
                    <span class="text-[10px] font-bold block uppercase">Inactiva</span>
                </div>
            </label>
            <label class="flex-1 cursor-pointer">
                <input class="hidden peer" name="status" type="radio" value="taller" />
                <div
                    class="text-center p-3 rounded-lg border border-outline-variant peer-checked:border-error peer-checked:bg-error-container peer-checked:text-error transition-all">
                    <span class="text-[10px] font-bold block uppercase">En Taller</span>
                </div>
            </label>
        </div>
    </section>
    <!-- Primary Action -->
    <div class="pt-4">
        <button
            class="w-full bg-primary text-on-primary font-bold py-4 rounded-xl shadow-lg shadow-primary/30 active:scale-[0.98] transition-all flex items-center justify-center gap-2">
            <span class="material-symbols-outlined" data-icon="save">save</span>
            Guardar Unidad
        </button>
    </div>
@endsection