@extends('layouts.panel-tamplate')

@section('extra-header')
    <!-- Search Bar -->
    <div class="px-4 pb-4">
        <label class="flex flex-col w-full h-11">
            <div class="flex w-full flex-1 items-stretch rounded-xl bg-slate-200/50 dark:bg-slate-800/50 overflow-hidden">
                <div class="text-slate-500 flex items-center justify-center pl-4">
                    <span class="material-symbols-outlined text-[20px]">search</span>
                </div>
                <input
                    class="form-input flex w-full border-none bg-transparent focus:ring-0 text-slate-900 dark:text-slate-100 placeholder:text-slate-500 px-3 text-sm font-normal"
                    placeholder="Buscar por nombre o ID" value="" />
            </div>
        </label>
    </div>
    <!-- Tabs -->
    <div class="flex overflow-x-auto no-scrollbar px-4 gap-6 border-b border-slate-200 dark:border-slate-800">
        <a class="flex flex-col items-center justify-center border-b-2 border-primary text-primary pb-3 pt-2 shrink-0"
            href="#">
            <p class="text-xs font-bold uppercase tracking-wider">Todos</p>
        </a>
        <a class="flex flex-col items-center justify-center border-b-2 border-transparent text-slate-500 pb-3 pt-2 shrink-0"
            href="#">
            <p class="text-xs font-bold uppercase tracking-wider">Activos</p>
        </a>
        <a class="flex flex-col items-center justify-center border-b-2 border-transparent text-slate-500 pb-3 pt-2 shrink-0"
            href="#">
            <p class="text-xs font-bold uppercase tracking-wider">Inactivos</p>
        </a>
        <a class="flex flex-col items-center justify-center border-b-2 border-transparent text-slate-500 pb-3 pt-2 shrink-0"
            href="#">
            <p class="text-xs font-bold uppercase tracking-wider">Con adeudo</p>
        </a>
    </div>
@endsection

@section('main-content')
    <!-- Driver Card 1 -->
    <div onclick="window.location='{{ route('driver.show', ['id' => 1]) }}'"
        class="bg-white dark:bg-slate-900 rounded-xl p-4 shadow-sm border border-slate-100 dark:border-slate-800 flex flex-col gap-3">
        <div class="flex justify-between items-start">
            <div class="flex gap-3">
                <div class="h-12 w-12 rounded-full overflow-hidden bg-slate-200 shrink-0">
                    <img class="h-full w-full object-cover" data-alt="Close up portrait of a male driver smiling"
                        src="https://lh3.googleusercontent.com/aida-public/AB6AXuCjkfd147B0OabkHkp-rxbS_CIGAhMEPWHeNBLYelUyZcsqcYx5bT_UTptVIhwvVk7ijAbYPbFEbKkYVKQJabdSRmdjlZZNZ9xnwGhiTFuHGaOKRAZg_sIXClAPHzVo6QmRN1Jxw1BxTq6KvltH0ZUn2-6Z38VyydcDGUucaD6OL0fuKQ2VW5UtCFWosIaMe0ENYXUxtLg6Wwe7aedGK6N13ZZnWRPE7x1b49GbBZnO9ofOpvULkDDAqza2vUKZfR7hwHzc7sfQwxk" />
                </div>
                <div class="flex flex-col">
                    <h3 class="font-bold text-slate-900 dark:text-slate-100">Juan Pérez</h3>
                    <span class="text-xs text-slate-500 font-medium">ID: #CHO-0842</span>
                </div>
            </div>
            <div
                class="bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 px-2.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-wide">
                Activo
            </div>
        </div>
        <div class="grid grid-cols-2 gap-y-2 py-2 border-y border-slate-50 dark:border-slate-800">
            <div class="flex flex-col">
                <span class="text-[10px] text-slate-400 uppercase font-bold tracking-tight">Unidad</span>
                <span class="text-sm font-medium">Unidad #1024</span>
            </div>
            <div class="flex flex-col">
                <span class="text-[10px] text-slate-400 uppercase font-bold tracking-tight">Pago</span>
                <span class="text-sm font-medium">Diario</span>
            </div>
        </div>
        <div class="flex items-center justify-between mt-1">
            <div class="flex flex-col">
                <span class="text-xs text-slate-500">Saldo pendiente</span>
                <span class="text-sm font-bold text-red-500">$2,400.00</span>
            </div>
            <button class="bg-primary/10 text-primary p-2.5 rounded-full flex items-center justify-center">
                <span class="material-symbols-outlined text-[20px]">call</span>
            </button>
        </div>
    </div>
    <!-- Driver Card 2 -->
    <div
        class="bg-white dark:bg-slate-900 rounded-xl p-4 shadow-sm border border-slate-100 dark:border-slate-800 flex flex-col gap-3">
        <div class="flex justify-between items-start">
            <div class="flex gap-3">
                <div class="h-12 w-12 rounded-full overflow-hidden bg-slate-200 shrink-0">
                    <img class="h-full w-full object-cover" data-alt="Portrait of a young male professional driver"
                        src="https://lh3.googleusercontent.com/aida-public/AB6AXuBldn201U0xc1OyV-FU7vf1Xdyt_AorfP1HBwvjce32ox1XG4nIv54Nm8yvOHcLHmpyB_YkjLFm_MRXTKgkhzy5HtmVBZu7Ul10aWhx3huUSC5zBukWLRd-qEnLVashqXyaF0f3qMblEu950sEY31dOsDxiaEv7-MfcdCsI-2K7NAcC_efR9H3rfXkQw4b8_QeLezYJqLXSArzXuhlZ50OUKx3I1SWhayW7bw9N4AQHldWsuvotSw-KSuyW7HqHX0meQBAAGIVn8ws" />
                </div>
                <div class="flex flex-col">
                    <h3 class="font-bold text-slate-900 dark:text-slate-100">Ricardo Gómez</h3>
                    <span class="text-xs text-slate-500 font-medium">ID: #CHO-0915</span>
                </div>
            </div>
            <div
                class="bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 px-2.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-wide">
                Activo
            </div>
        </div>
        <div class="grid grid-cols-2 gap-y-2 py-2 border-y border-slate-50 dark:border-slate-800">
            <div class="flex flex-col">
                <span class="text-[10px] text-slate-400 uppercase font-bold tracking-tight">Unidad</span>
                <span class="text-sm font-medium">Unidad #0856</span>
            </div>
            <div class="flex flex-col">
                <span class="text-[10px] text-slate-400 uppercase font-bold tracking-tight">Pago</span>
                <span class="text-sm font-medium">Semanal</span>
            </div>
        </div>
        <div class="flex items-center justify-between mt-1">
            <div class="flex flex-col">
                <span class="text-xs text-slate-500">Saldo pendiente</span>
                <span class="text-sm font-bold text-slate-400">$0.00</span>
            </div>
            <button class="bg-primary/10 text-primary p-2.5 rounded-full flex items-center justify-center">
                <span class="material-symbols-outlined text-[20px]">call</span>
            </button>
        </div>
    </div>
    <!-- Driver Card 3 -->
    <div
        class="bg-white dark:bg-slate-900 rounded-xl p-4 shadow-sm border border-slate-100 dark:border-slate-800 flex flex-col gap-3 opacity-80">
        <div class="flex justify-between items-start">
            <div class="flex gap-3">
                <div class="h-12 w-12 rounded-full overflow-hidden bg-slate-200 shrink-0">
                    <img class="h-full w-full object-cover grayscale" data-alt="Mature male driver profile photo"
                        src="https://lh3.googleusercontent.com/aida-public/AB6AXuARb-MHL7DcbT_mG02j_Q7mxd0hYwQV5W4jlZbRL_CG-t5G-varXarkH-X2IKMPy7wPcF0FcddDQ67ahbYtO8jMGAhZHGupgmyalZZZIy-jDMsly1E307Ohc6ameG9o5kCJLzLo7hmFl9du1tMuuwpU4qm4vPJ7YDET__ixZi4Xh8qxDSAKwcQU3Y8QpAuAyOwrGNbzj80w0BvOiDWthL0zRcPUfn_oOigpH8bBl4a99eDU0Nsx_VVyTLkFBbrWcz4f21L6VeVomVk" />
                </div>
                <div class="flex flex-col">
                    <h3 class="font-bold text-slate-900 dark:text-slate-100">Alberto Ruiz</h3>
                    <span class="text-xs text-slate-500 font-medium">ID: #CHO-0722</span>
                </div>
            </div>
            <div
                class="bg-slate-100 text-slate-500 dark:bg-slate-800 dark:text-slate-400 px-2.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-wide">
                Inactivo
            </div>
        </div>
        <div class="grid grid-cols-2 gap-y-2 py-2 border-y border-slate-50 dark:border-slate-800">
            <div class="flex flex-col">
                <span class="text-[10px] text-slate-400 uppercase font-bold tracking-tight">Unidad</span>
                <span class="text-sm font-medium italic">Sin asignar</span>
            </div>
            <div class="flex flex-col">
                <span class="text-[10px] text-slate-400 uppercase font-bold tracking-tight">Pago</span>
                <span class="text-sm font-medium">Diario</span>
            </div>
        </div>
        <div class="flex items-center justify-between mt-1">
            <div class="flex flex-col">
                <span class="text-xs text-slate-500">Saldo pendiente</span>
                <span class="text-sm font-bold text-red-500">$500.00</span>
            </div>
            <button class="bg-primary/10 text-primary p-2.5 rounded-full flex items-center justify-center">
                <span class="material-symbols-outlined text-[20px]">call</span>
            </button>
        </div>
    </div>

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