@extends('layouts.panel-tamplate')

@section('extra-header')
    <div class="px-4 pb-2">
        <div class="relative flex items-center">
            <span class="material-symbols-outlined absolute left-3 text-slate-400">search</span>
            <input
                class="w-full pl-10 pr-4 py-3 bg-white dark:bg-slate-800 border-none rounded-xl shadow-sm focus:ring-2 focus:ring-primary text-sm placeholder:text-slate-400 dark:placeholder:text-slate-500"
                placeholder="Buscar por económico o placa..." type="text" />
        </div>
    </div>
    <div class="flex gap-2 p-4 overflow-x-auto no-scrollbar whitespace-nowrap">
        <button
            class="px-4 py-2 rounded-full bg-primary text-white text-xs font-semibold shadow-md shadow-primary/20">Todas</button>
        <button
            class="px-4 py-2 rounded-full bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-300 text-xs font-medium border border-slate-200 dark:border-slate-700">Activas</button>
        <button
            class="px-4 py-2 rounded-full bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-300 text-xs font-medium border border-slate-200 dark:border-slate-700">Inactivas</button>
        <button
            class="px-4 py-2 rounded-full bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-300 text-xs font-medium border border-slate-200 dark:border-slate-700">En
            servicio</button>
        <button
            class="px-4 py-2 rounded-full bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-300 text-xs font-medium border border-slate-200 dark:border-slate-700">Fuera
            de operación</button>
    </div>
@endsection

@section('main-content')
    <div
        class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-100 dark:border-slate-700 overflow-hidden">
        <div class="p-4 flex gap-4">
            <div class="w-24 h-24 rounded-lg bg-cover bg-center shrink-0"
                data-alt="Modern white sedan taxi vehicle front view"
                style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDpQ_apzq9sZjN4xRA74cLbGDDmBZR1xuuSj3PwQl-7UE2QiePhFWD17ErAyebq-7XGy7DYwgbgF-Jr_J9AhXuwCGxtFuULGSa8byAbUW-KfdgidhFQWfHAWv48EJ9Dh_aDdlbmKJZGu4wxCC6IrZm_m4HIwQgEJn9kVExPjLRjATwXM2U64hF5Q6TgfpA6pnj4mxp1vmyIS0MXvrnuucI0G0oHVKGnoSOuT2iGiKvYdB2cmLqqClM6QQYXIybWiHKyvaiTKWiypug')">
            </div>
            <div class="flex-1 min-w-0">
                <div class="flex justify-between items-start">
                    <h3 class="font-bold text-lg text-slate-900 dark:text-white truncate">Económico #1024</h3>
                    <span
                        class="px-2 py-1 rounded text-[10px] font-bold uppercase bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400">Activa</span>
                </div>
                <p class="text-xs text-slate-500 dark:text-slate-400 mt-0.5">Nissan Tsuru | <span
                        class="font-semibold">ABC-123-D</span></p>
                <div class="mt-3 flex items-center gap-2 text-xs text-slate-600 dark:text-slate-300">
                    <span class="material-symbols-outlined text-sm">person</span>
                    <span class="truncate">Juan Pérez</span>
                </div>
                <div class="mt-1 flex items-center gap-2 text-xs text-slate-600 dark:text-slate-300">
                    <span class="material-symbols-outlined text-sm">calendar_today</span>
                    <span>Próx. Servicio: 15 Oct 2023</span>
                </div>
            </div>
        </div>
        <div
            class="border-t border-slate-50 dark:border-slate-700 p-3 bg-slate-50/50 dark:bg-slate-800/50 flex justify-end gap-2">
            <button class="text-primary text-xs font-semibold px-4 py-2">Mantenimiento</button>
            <a href="{{ route('unit.details', ['id' => 1]) }}"
                class="bg-primary text-white text-xs font-bold px-4 py-2 rounded-lg">Detalles</a>
        </div>
    </div>
    <div
        class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-100 dark:border-slate-700 overflow-hidden">
        <div class="p-4 flex gap-4">
            <div class="w-24 h-24 rounded-lg bg-cover bg-center shrink-0" data-alt="Yellow taxi car side view on street"
                style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDe6jZW7k1Y0MDC6oPPvI1rwVChiWkCwRzB2unc6SdR1EZ_g_rMeXsvIRyAiwErbcKDtoAF1xhmGqKdpqicsc8tqpmaK1RSmlvTHVWaFf5Vr27EwKKRsVkfKfHnKJu6jQtq_8jC9jarobXa8ltq_tYO6pAh5TbaKDz6c8yl3HPc4ux1P6SXzr9wC20j3zH4z5Bfn6w3MmCxuBKcJQoMuNyOvkirOghLHbqkgK966rV7VEiEpZejYXeKmcN1V-F4R-S_Pemeq89bI7w')">
            </div>
            <div class="flex-1 min-w-0">
                <div class="flex justify-between items-start">
                    <h3 class="font-bold text-lg text-slate-900 dark:text-white truncate">Económico #0852</h3>
                    <span
                        class="px-2 py-1 rounded text-[10px] font-bold uppercase bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400">En
                        servicio</span>
                </div>
                <p class="text-xs text-slate-500 dark:text-slate-400 mt-0.5">Toyota Corolla | <span
                        class="font-semibold">XYZ-987-E</span></p>
                <div class="mt-3 flex items-center gap-2 text-xs text-slate-600 dark:text-slate-300">
                    <span class="material-symbols-outlined text-sm">person</span>
                    <span class="truncate">Roberto Gómez</span>
                </div>
                <div class="mt-1 flex items-center gap-2 text-xs text-slate-600 dark:text-slate-300">
                    <span class="material-symbols-outlined text-sm">calendar_today</span>
                    <span>Próx. Servicio: 22 Oct 2023</span>
                </div>
            </div>
        </div>
        <div
            class="border-t border-slate-50 dark:border-slate-700 p-3 bg-slate-50/50 dark:bg-slate-800/50 flex justify-end gap-2">
            <button class="text-primary text-xs font-semibold px-4 py-2">Mantenimiento</button>
            <button class="bg-primary text-white text-xs font-bold px-4 py-2 rounded-lg">Detalles</button>
        </div>
    </div>
    <div
        class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-100 dark:border-slate-700 overflow-hidden">
        <div class="p-4 flex gap-4">
            <div class="w-24 h-24 rounded-lg bg-cover bg-center shrink-0 grayscale opacity-60"
                data-alt="Parked silver car in a garage"
                style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBh22zbkBjaxcywTZgsHRDS82H4d5-QCs120gt8sYMSIiJoU5SxsOKqrzuEnsuQsQ-UI7jmee0pe4PbbqIws8HTMZDU1u6T7avJZm3B3EOOFy3pKtGkZtMpfOEENAkCqg3xv1HS-YrHNCxWmDwDBbpPqiXO4Lq96EmeGQ6NAJoQq7WEJ4cH1Lq3BYJdVVbmC-01mxRAEE7tL9QHk-NZKKuIpFOjfy9-zM7Su-Oq1opzCqSyrFiNzdYemT0RGv7a2SrQBFjMb9iafyc')">
            </div>
            <div class="flex-1 min-w-0">
                <div class="flex justify-between items-start">
                    <h3 class="font-bold text-lg text-slate-900 dark:text-white truncate">Económico #0412</h3>
                    <span
                        class="px-2 py-1 rounded text-[10px] font-bold uppercase bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400">Inactiva</span>
                </div>
                <p class="text-xs text-slate-500 dark:text-slate-400 mt-0.5">Chevrolet Aveo | <span
                        class="font-semibold">MEX-456-F</span></p>
                <div class="mt-3 flex items-center gap-2 text-xs text-slate-600 dark:text-slate-300">
                    <span class="material-symbols-outlined text-sm">person</span>
                    <span class="truncate">Sin chofer</span>
                </div>
                <div class="mt-1 flex items-center gap-2 text-xs text-red-500">
                    <span class="material-symbols-outlined text-sm">warning</span>
                    <span>Servicio vencido</span>
                </div>
            </div>
        </div>
        <div
            class="border-t border-slate-50 dark:border-slate-700 p-3 bg-slate-50/50 dark:bg-slate-800/50 flex justify-end gap-2">
            <button class="text-primary text-xs font-semibold px-4 py-2">Mantenimiento</button>
            <button class="bg-primary text-white text-xs font-bold px-4 py-2 rounded-lg">Detalles</button>
        </div>
    </div>

    <a href="{{ route('unit.create') }}"
        class="fixed bottom-24 right-6 w-14 h-14 bg-primary text-white rounded-full shadow-lg shadow-primary/40 flex items-center justify-center z-40">
        <span class="material-symbols-outlined text-3xl">add</span>
    </a>
@endsection