@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]">Detalles de unidad</h1>
    </div>
@endsection

@section('main-content')
    <div class="pb-24">
        <!-- Hero / Unit Info -->
        <div class="flex p-6 flex-col items-center bg-white dark:bg-slate-900 mb-2">
            <div class="flex gap-6 flex-col items-center w-full">
                <div class="bg-center bg-no-repeat aspect-square bg-cover rounded-xl min-h-32 w-32 ring-4 ring-primary/10"
                    data-alt="Modern white taxi car side view profile"
                    style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuBbT04LmxqdfBQK9bebOsWBusR4Xo3WFw0yEQoQB34ddcm9wgeqjDpIYE_Mzf6gwGJsG3p9An5_yJ46IM2lgyf9YYPet6yQ1UbQMPQI1ygprevRSA9NR_CixZa8QJK7Stim4P2r0hxHyPqctotCx122s9f3mr1c5HLeQxrxdlls5s5CUj-Jk0cRJYpxTd4ugf49U8iulJuDswf-rTGFHsNuoWl3XuBSzcgpyDAIiT83aIBX2fLpQQWd2RzOFFCf-yf4MugrvUyNWhc");'>
                </div>
                <div class="flex flex-col items-center justify-center text-center">
                    <h1 class="text-slate-900 dark:text-white text-2xl font-bold tracking-tight">Unidad TX-402</h1>
                    <p class="text-slate-500 dark:text-slate-400 text-base">Toyota Corolla 2022 • <span
                            class="font-mono font-medium">ABC-1234</span></p>
                </div>
            </div>
            <div class="mt-6 flex gap-3 w-full">
                <button
                    class="flex-1 flex cursor-pointer items-center justify-center rounded-lg h-10 px-4 bg-primary text-white text-sm font-bold transition-colors hover:bg-primary/90">
                    <span class="material-symbols-outlined text-sm mr-2">edit</span>
                    <span class="truncate">Editar unidad</span>
                </button>
                <button
                    class="flex-1 flex cursor-pointer items-center justify-center rounded-lg h-10 px-4 bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 text-sm font-bold">
                    <span class="material-symbols-outlined text-sm mr-2">settings</span>
                    <span class="truncate">Acciones</span>
                </button>
            </div>
        </div>
        <!-- Operational Status Section -->
        <div class="px-4 py-2">
            <div
                class="flex flex-col items-start justify-between gap-4 rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5 sm:flex-row sm:items-center">
                <div class="flex items-center gap-4">
                    <div
                        class="flex size-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/30 text-green-600">
                        <span class="material-symbols-outlined text-2xl">check_circle</span>
                    </div>
                    <div class="flex flex-col">
                        <p class="text-slate-900 dark:text-white text-sm font-bold">Estatus operativo</p>
                        <p class="text-green-600 dark:text-green-400 text-base font-semibold">Activo y en ruta</p>
                    </div>
                </div>
                <button
                    class="w-full sm:w-auto flex cursor-pointer items-center justify-center rounded-lg h-9 px-4 bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 text-sm font-medium">
                    <span class="truncate">Cambiar estatus</span>
                </button>
            </div>
        </div>
        <!-- General Info Section -->
        <div class="px-4 py-4">
            <h3 class="text-slate-900 dark:text-white text-lg font-bold mb-3 px-1">Información general</h3>
            <div class="grid grid-cols-2 gap-3">
                <div class="bg-white dark:bg-slate-900 p-4 rounded-xl border border-slate-200 dark:border-slate-800">
                    <p class="text-slate-500 dark:text-slate-400 text-xs font-medium uppercase tracking-wider">Kilometraje
                    </p>
                    <p class="text-slate-900 dark:text-white text-lg font-bold">42,500 km</p>
                </div>
                <div class="bg-white dark:bg-slate-900 p-4 rounded-xl border border-slate-200 dark:border-slate-800">
                    <p class="text-slate-500 dark:text-slate-400 text-xs font-medium uppercase tracking-wider">Combustible
                    </p>
                    <p class="text-slate-900 dark:text-white text-lg font-bold">75% (Eco)</p>
                </div>
                <div class="bg-white dark:bg-slate-900 p-4 rounded-xl border border-slate-200 dark:border-slate-800">
                    <p class="text-slate-500 dark:text-slate-400 text-xs font-medium uppercase tracking-wider">Seguro</p>
                    <p class="text-slate-900 dark:text-white text-sm font-bold">Vence 12/24</p>
                </div>
                <div class="bg-white dark:bg-slate-900 p-4 rounded-xl border border-slate-200 dark:border-slate-800">
                    <p class="text-slate-500 dark:text-slate-400 text-xs font-medium uppercase tracking-wider">Últ. Servicio
                    </p>
                    <p class="text-slate-900 dark:text-white text-sm font-bold">hace 15 días</p>
                </div>
            </div>
        </div>
        <!-- Assigned Driver -->
        <div class="px-4 py-4">
            <h3 class="text-slate-900 dark:text-white text-lg font-bold mb-3 px-1">Chofer asignado</h3>
            <div
                class="bg-white dark:bg-slate-900 p-4 rounded-xl border border-slate-200 dark:border-slate-800 flex items-center gap-4">
                <div class="size-14 rounded-full bg-slate-200 bg-cover" data-alt="Professional male driver profile portrait"
                    style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDGbYkcHNlPa06P5nxQX1V8DxwtwgoAQlqhh2SMCI9SuE-z-XOjy_B3ZkK6Ww_kBP6g-QSCegJ-fkTBs_bDRDAQH5_gZQplx3ExNN4oqH7D-S8Q9BXD8pg6UWFEXFupEHoIU_qYYhJjdNal5nk7SJdyTiMfEMnOZjyCZBN0D1b-SJlJHoaeX9pXl4I4YurA-Xq2cW90hWLOIYacbbHLtlkOkQtIL6lBeN5pLJYw3CHvqhRDeYoX1PC0oblRNeTb7p2T1OBM-27jjGw')">
                </div>
                <div class="flex-1">
                    <p class="text-slate-900 dark:text-white font-bold">Ricardo Martínez</p>
                    <p class="text-slate-500 dark:text-slate-400 text-sm">Turno Matutino • ID: 8823</p>
                </div>
                <div class="flex gap-2">
                    <button class="size-9 rounded-full bg-primary/10 text-primary flex items-center justify-center">
                        <span class="material-symbols-outlined text-xl">call</span>
                    </button>
                    <button
                        class="size-9 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 flex items-center justify-center">
                        <span class="material-symbols-outlined text-xl">person_search</span>
                    </button>
                </div>
            </div>
        </div>
        <!-- Tabs/Lists Section -->
        <div class="px-4 py-4 space-y-6">
            <!-- History: Assignments -->
            <div>
                <div class="flex items-center justify-between mb-3 px-1">
                    <h3 class="text-slate-900 dark:text-white text-lg font-bold">Historial de asignaciones</h3>
                    <button class="text-primary text-sm font-bold">Ver todo</button>
                </div>
                <div
                    class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 divide-y divide-slate-100 dark:divide-slate-800">
                    <div class="p-4 flex justify-between items-center">
                        <div>
                            <p class="text-slate-900 dark:text-white text-sm font-bold">Ricardo Martínez</p>
                            <p class="text-slate-500 dark:text-slate-400 text-xs">Desde: 15 Oct, 2023</p>
                        </div>
                        <span
                            class="px-2 py-1 bg-primary/10 text-primary text-[10px] font-bold rounded uppercase">Actual</span>
                    </div>
                    <div class="p-4 flex justify-between items-center">
                        <div>
                            <p class="text-slate-900 dark:text-white text-sm font-bold">Elena Gómez</p>
                            <p class="text-slate-500 dark:text-slate-400 text-xs">01 Sep - 14 Oct, 2023</p>
                        </div>
                        <span class="text-slate-400 text-xs">Finalizado</span>
                    </div>
                </div>
            </div>
            <!-- History: Payments -->
            <div>
                <div class="flex items-center justify-between mb-3 px-1">
                    <h3 class="text-slate-900 dark:text-white text-lg font-bold">Historial de pagos</h3>
                    <button class="text-primary text-sm font-bold">Ver pagos</button>
                </div>
                <div
                    class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 divide-y divide-slate-100 dark:divide-slate-800">
                    <div class="p-4 flex justify-between items-center">
                        <div class="flex items-center gap-3">
                            <div
                                class="size-10 rounded bg-green-100 dark:bg-green-900/30 text-green-600 flex items-center justify-center">
                                <span class="material-symbols-outlined text-xl">payments</span>
                            </div>
                            <div>
                                <p class="text-slate-900 dark:text-white text-sm font-bold">Liquidación Semanal</p>
                                <p class="text-slate-500 dark:text-slate-400 text-xs">22 Oct, 2023</p>
                            </div>
                        </div>
                        <p class="text-slate-900 dark:text-white font-bold">$1,250.00</p>
                    </div>
                    <div class="p-4 flex justify-between items-center">
                        <div class="flex items-center gap-3">
                            <div
                                class="size-10 rounded bg-green-100 dark:bg-green-900/30 text-green-600 flex items-center justify-center">
                                <span class="material-symbols-outlined text-xl">payments</span>
                            </div>
                            <div>
                                <p class="text-slate-900 dark:text-white text-sm font-bold">Liquidación Semanal</p>
                                <p class="text-slate-500 dark:text-slate-400 text-xs">15 Oct, 2023</p>
                            </div>
                        </div>
                        <p class="text-slate-900 dark:text-white font-bold">$1,250.00</p>
                    </div>
                </div>
            </div>
            <!-- History: Maintenance -->
            <div>
                <div class="flex items-center justify-between mb-3 px-1">
                    <h3 class="text-slate-900 dark:text-white text-lg font-bold">Historial de mantenimiento</h3>
                    <button class="flex items-center text-primary text-sm font-bold">
                        <span class="material-symbols-outlined text-base mr-1">add</span> Registrar
                    </button>
                </div>
                <div
                    class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 divide-y divide-slate-100 dark:divide-slate-800">
                    <div class="p-4 flex items-start gap-3">
                        <div
                            class="size-10 rounded bg-amber-100 dark:bg-amber-900/30 text-amber-600 flex items-center justify-center shrink-0">
                            <span class="material-symbols-outlined text-xl">build</span>
                        </div>
                        <div class="flex-1">
                            <div class="flex justify-between">
                                <p class="text-slate-900 dark:text-white text-sm font-bold">Cambio de Aceite</p>
                                <p class="text-slate-500 dark:text-slate-400 text-xs">10 Oct, 2023</p>
                            </div>
                            <p class="text-slate-500 dark:text-slate-400 text-xs mt-1">Filtros y lubricante sintético.
                                Próximo en 5,000 km.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection