@extends('layouts.panel-tamplate')

@section('main-content')
    <div class="flex gap-3 p-4 overflow-x-auto no-scrollbar">
        <button
            class="flex h-9 shrink-0 items-center justify-center gap-x-2 rounded-lg bg-primary text-white px-4 transition-colors">
            <p class="text-sm font-medium leading-normal">Hoy</p>
            <span class="material-symbols-outlined text-sm">keyboard_arrow_down</span>
        </button>
        <button
            class="flex h-9 shrink-0 items-center justify-center gap-x-2 rounded-lg bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 px-4">
            <p class="text-sm font-medium leading-normal">Semana</p>
            <span class="material-symbols-outlined text-sm">keyboard_arrow_down</span>
        </button>
        <button
            class="flex h-9 shrink-0 items-center justify-center gap-x-2 rounded-lg bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 px-4">
            <p class="text-sm font-medium leading-normal">Mes</p>
            <span class="material-symbols-outlined text-sm">keyboard_arrow_down</span>
        </button>
        <button
            class="flex h-9 shrink-0 items-center justify-center gap-x-2 rounded-lg bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 px-4">
            <p class="text-sm font-medium leading-normal">Rango</p>
            <span class="material-symbols-outlined text-sm">calendar_today</span>
        </button>
    </div>
    <div class="px-4 py-2 space-y-4">
        <div class="grid grid-cols-2 gap-4">
            <div
                class="flex flex-col gap-2 rounded-xl p-4 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 shadow-sm">
                <p class="text-slate-500 dark:text-slate-400 text-xs font-medium uppercase tracking-wider">Cobranza
                    Acumulada</p>
                <p class="text-2xl font-bold leading-tight">$45,200</p>
                <div class="flex items-center gap-1 text-emerald-600 dark:text-emerald-400 text-xs font-semibold">
                    <span class="material-symbols-outlined text-sm">trending_up</span>
                    <span>+12.4%</span>
                </div>
            </div>
            <div
                class="flex flex-col gap-2 rounded-xl p-4 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 shadow-sm">
                <p class="text-slate-500 dark:text-slate-400 text-xs font-medium uppercase tracking-wider">Adeudo Total</p>
                <p class="text-2xl font-bold leading-tight text-red-500">$12,850</p>
                <div class="flex items-center gap-1 text-red-500 text-xs font-semibold">
                    <span class="material-symbols-outlined text-sm">trending_up</span>
                    <span>-5.2%</span>
                </div>
            </div>
        </div>
        <div
            class="flex flex-col gap-4 rounded-xl p-5 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 shadow-sm">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-slate-500 dark:text-slate-400 text-sm font-medium">Ingresos por Mes</p>
                    <p class="text-3xl font-bold tracking-tight text-primary">$158,400</p>
                </div>
                <span class="material-symbols-outlined text-slate-400">insights</span>
            </div>
            <div class="grid grid-cols-6 gap-2 items-end h-32 mt-4 px-2">
                <div class="relative group h-full flex flex-col justify-end items-center gap-2">
                    <div class="bg-primary/20 rounded-t-md w-full" style="height: 30%;"></div>
                    <span class="text-[10px] font-bold text-slate-400">ENE</span>
                </div>
                <div class="relative group h-full flex flex-col justify-end items-center gap-2">
                    <div class="bg-primary/40 rounded-t-md w-full" style="height: 50%;"></div>
                    <span class="text-[10px] font-bold text-slate-400">FEB</span>
                </div>
                <div class="relative group h-full flex flex-col justify-end items-center gap-2">
                    <div class="bg-primary/20 rounded-t-md w-full" style="height: 40%;"></div>
                    <span class="text-[10px] font-bold text-slate-400">MAR</span>
                </div>
                <div class="relative group h-full flex flex-col justify-end items-center gap-2">
                    <div class="bg-primary/60 rounded-t-md w-full" style="height: 75%;"></div>
                    <span class="text-[10px] font-bold text-slate-400">ABR</span>
                </div>
                <div class="relative group h-full flex flex-col justify-end items-center gap-2">
                    <div class="bg-primary/30 rounded-t-md w-full" style="height: 45%;"></div>
                    <span class="text-[10px] font-bold text-slate-400">MAY</span>
                </div>
                <div class="relative group h-full flex flex-col justify-end items-center gap-2">
                    <div class="bg-primary rounded-t-md w-full" style="height: 90%;"></div>
                    <span class="text-[10px] font-bold text-slate-400">JUN</span>
                </div>
            </div>
        </div>
        <div
            class="rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 overflow-hidden shadow-sm">
            <div class="p-4 border-b border-slate-100 dark:border-slate-700 flex justify-between items-center">
                <h3 class="font-bold text-sm">Choferes con Mayor Adeudo</h3>
                <span class="text-xs font-semibold text-primary">Ver todos</span>
            </div>
            <div class="divide-y divide-slate-100 dark:divide-slate-700">
                <div class="flex items-center gap-3 p-4">
                    <div class="size-10 rounded-full bg-slate-100 dark:bg-slate-700 overflow-hidden">
                        <img class="w-full h-full object-cover" data-alt="Avatar de chofer masculino profesional"
                            src="https://lh3.googleusercontent.com/aida-public/AB6AXuCere-PHq7Mgcx1O5wX1wBbSqrm0qoLdHgETK2wtUzAfi9dNY-aZqodIfHeA7JniLmjkRQqANb34YxKhZMlWMDqZz_iMuIn_Q9UiSr0WgR2E2SkMFzmxnRpSpoeH_cQMsatSrYof1Fin6eYKp6uoWwgGdaeKnzcQXFF_Q4vbEdU9jcbBUku3X2FGgcObCK21A5GKE7NzeUQU-K4D3WgzS6VaQTfFHmagZvNWW-3UoAPCpqgr-I_hsCb1hL9W5O9ZCOClEq3dXVDzZU" />
                    </div>
                    <div class="flex-1">
                        <p class="text-sm font-semibold">Roberto Martínez</p>
                        <p class="text-xs text-slate-500">Unidad #402</p>
                    </div>
                    <p class="text-sm font-bold text-red-500">$2,450</p>
                </div>
                <div class="flex items-center gap-3 p-4">
                    <div class="size-10 rounded-full bg-slate-100 dark:bg-slate-700 overflow-hidden">
                        <img class="w-full h-full object-cover" data-alt="Avatar de chofer masculino con uniforme"
                            src="https://lh3.googleusercontent.com/aida-public/AB6AXuCcmVkA6GjOFWPCSJyXvG4F3ygat5HX6KdBV9GU51dpvVXUp7Hnf0rhe-IQcEv2IgETDC0_9-mpKyn8UYQTPmNfl5MovCS_mdTHSsYEIOqVkTaGnc0FpeM_fvNg2uzKjUSoqkaTl_L0QdoCj0PKIGswcbjCrnECt1yCPzd0lu2dPj7SnQaBhyTOWI0rpm_ufPfmCHVRpQ9nxQndgjj2gYEumjKe_VlQIOlv0fnHfAAl9uxs6vB7XokwKsiS3p8gu350aNmc_MPWR7s" />
                    </div>
                    <div class="flex-1">
                        <p class="text-sm font-semibold">Juan Carlos Peña</p>
                        <p class="text-xs text-slate-500">Unidad #115</p>
                    </div>
                    <p class="text-sm font-bold text-red-500">$1,890</p>
                </div>
                <div class="flex items-center gap-3 p-4">
                    <div class="size-10 rounded-full bg-slate-100 dark:bg-slate-700 overflow-hidden">
                        <img class="w-full h-full object-cover" data-alt="Avatar de chofer profesional joven"
                            src="https://lh3.googleusercontent.com/aida-public/AB6AXuAbaw-FEom6OmJ3TosSNRiy9QCCUUUIeGtbXuXyp975s-EVG3kgKNhew9iw9e6-VJ9YIk2Y9eQvsWmRimjdMKyUSbcVdGyzdgT9Tk0OAh2aX1jkqfWvomsZrVzf8O-mvmMH6kfgjutkUNrMoAD7x_rntzKfjJn6ojIC5JxYEB7VaUsVqoAIBH14kKDbOMsI94N4QiRbFLJKtgkCeOXb-nY0qkIYFlQ7OckFyQ-dNWO7aUya-NdEyRlebd4aKR3qi6hurFEssKfDAyA" />
                    </div>
                    <div class="flex-1">
                        <p class="text-sm font-semibold">Luis Alberto Sosa</p>
                        <p class="text-xs text-slate-500">Unidad #284</p>
                    </div>
                    <p class="text-sm font-bold text-red-500">$1,200</p>
                </div>
            </div>
        </div>
        <div class="grid grid-cols-2 gap-4">
            <div class="rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-4 shadow-sm">
                <div class="flex items-center gap-2 mb-2">
                    <span class="material-symbols-outlined text-amber-500">car_crash</span>
                    <h3 class="text-xs font-bold uppercase text-slate-500 tracking-wide">Inactivas</h3>
                </div>
                <p class="text-2xl font-bold">04</p>
                <p class="text-[10px] text-slate-400 mt-1">Unidades fuera de servicio</p>
            </div>
            <div class="rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-4 shadow-sm">
                <div class="flex items-center gap-2 mb-2">
                    <span class="material-symbols-outlined text-primary">build</span>
                    <h3 class="text-xs font-bold uppercase text-slate-500 tracking-wide">Mant. Pendientes</h3>
                </div>
                <p class="text-2xl font-bold">12</p>
                <p class="text-[10px] text-slate-400 mt-1">Próximas 48 horas</p>
            </div>
        </div>
        <button
            class="w-full flex items-center justify-center gap-2 rounded-xl bg-primary text-white py-4 font-bold shadow-lg shadow-primary/20 hover:opacity-90 active:scale-[0.98] transition-all">
            <span class="material-symbols-outlined">file_download</span>
            Exportar Reporte Completo
        </button>
    </div>
@endsection