@extends('layouts.panel-tamplate')

@section('main-content')
    <!-- KPI Section -->
    <section>
        <div class="px-4 flex items-center justify-between mb-3">
            <h3 class="text-lg font-bold tracking-tight">Indicadores Operativos</h3>
            <span class="text-xs font-medium text-primary">Ver detalle</span>
        </div>
        <div class="flex overflow-x-auto hide-scrollbar gap-3 px-4">
            <!-- Unidades Activas -->
            <div
                class="flex flex-col min-w-[140px] bg-white dark:bg-slate-800 p-4 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm">
                <span class="material-symbols-outlined text-green-500 mb-2">check_circle</span>
                <p class="text-slate-500 dark:text-slate-400 text-xs font-medium uppercase tracking-wider">
                    Activas</p>
                <p class="text-2xl font-bold mt-1">42</p>
            </div>
            <!-- Unidades Inactivas -->
            <div
                class="flex flex-col min-w-[140px] bg-white dark:bg-slate-800 p-4 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm">
                <span class="material-symbols-outlined text-red-500 mb-2">pause_circle</span>
                <p class="text-slate-500 dark:text-slate-400 text-xs font-medium uppercase tracking-wider">
                    Inactivas</p>
                <p class="text-2xl font-bold mt-1">8</p>
            </div>
            <!-- Trabajando Hoy -->
            <div
                class="flex flex-col min-w-[140px] bg-white dark:bg-slate-800 p-4 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm">
                <span class="material-symbols-outlined text-primary mb-2">engineering</span>
                <p class="text-slate-500 dark:text-slate-400 text-xs font-medium uppercase tracking-wider">En
                    Ruta</p>
                <p class="text-2xl font-bold mt-1">35</p>
            </div>
            <!-- Adeudo -->
            <div
                class="flex flex-col min-w-[140px] bg-white dark:bg-slate-800 p-4 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm">
                <span class="material-symbols-outlined text-orange-500 mb-2">warning</span>
                <p class="text-slate-500 dark:text-slate-400 text-xs font-medium uppercase tracking-wider">Con
                    Adeudo</p>
                <p class="text-2xl font-bold mt-1">12</p>
            </div>
            <!-- Pendiente -->
            <div
                class="flex flex-col min-w-[140px] bg-white dark:bg-slate-800 p-4 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm">
                <span class="material-symbols-outlined text-slate-400 mb-2">payments</span>
                <p class="text-slate-500 dark:text-slate-400 text-xs font-medium uppercase tracking-wider">
                    Pendiente</p>
                <p class="text-2xl font-bold mt-1 text-orange-600">$15k</p>
            </div>
            <!-- Ingreso -->
            <div
                class="flex flex-col min-w-[140px] bg-white dark:bg-slate-800 p-4 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm">
                <span class="material-symbols-outlined text-primary mb-2">trending_up</span>
                <p class="text-slate-500 dark:text-slate-400 text-xs font-medium uppercase tracking-wider">
                    Ingreso Mes</p>
                <p class="text-2xl font-bold mt-1 text-primary">$124k</p>
            </div>
        </div>
    </section>
    <!-- Acciones Rápidas -->
    <section class="px-4">
        <h3 class="text-lg font-bold tracking-tight mb-3">Acciones rápidas</h3>
        <div class="grid grid-cols-2 gap-3">
            <button class="flex flex-col items-center justify-center gap-2 p-4 bg-primary text-white rounded-xl shadow-md">
                <span class="material-symbols-outlined">add_card</span>
                <span class="text-sm font-semibold">Registrar pago</span>
            </button>
            <button
                class="flex flex-col items-center justify-center gap-2 p-4 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl">
                <span class="material-symbols-outlined text-primary">local_taxi</span>
                <span class="text-sm font-semibold">Agregar unidad</span>
            </button>
            <button
                class="flex flex-col items-center justify-center gap-2 p-4 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl">
                <span class="material-symbols-outlined text-primary">person_add</span>
                <span class="text-sm font-semibold">Agregar chofer</span>
            </button>
            <button
                class="flex flex-col items-center justify-center gap-2 p-4 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl">
                <span class="material-symbols-outlined text-orange-500">request_quote</span>
                <span class="text-sm font-semibold">Ver adeudos</span>
            </button>
            <button
                class="col-span-2 flex items-center justify-center gap-2 p-4 bg-slate-800 dark:bg-slate-700 text-white rounded-xl">
                <span class="material-symbols-outlined">build</span>
                <span class="text-sm font-semibold">Registrar mantenimiento</span>
            </button>
        </div>
    </section>
    <!-- Resumen del día / Gráfico Conceptual -->
    <section class="px-4">
        <div class="bg-white dark:bg-slate-800 p-5 rounded-xl border border-slate-200 dark:border-slate-700">
            <h3 class="font-bold mb-4">Resumen del día</h3>
            <div class="flex items-end gap-2 h-32 mb-4">
                <div class="flex-1 bg-primary/20 rounded-t h-1/2"></div>
                <div class="flex-1 bg-primary/20 rounded-t h-2/3"></div>
                <div class="flex-1 bg-primary/20 rounded-t h-3/4"></div>
                <div class="flex-1 bg-primary rounded-t h-full"></div>
                <div class="flex-1 bg-primary/20 rounded-t h-1/3"></div>
                <div class="flex-1 bg-primary/20 rounded-t h-1/2"></div>
            </div>
            <div class="flex justify-between text-xs text-slate-500">
                <span>L</span><span>M</span><span>M</span><span
                    class="font-bold text-primary">J</span><span>V</span><span>S</span>
            </div>
        </div>
    </section>
    <!-- Últimos Pagos -->
    <section class="px-4">
        <div class="flex items-center justify-between mb-3">
            <h3 class="text-lg font-bold tracking-tight">Últimos pagos</h3>
            <button class="text-sm font-medium text-primary">Ver todos</button>
        </div>
        <div class="flex flex-col gap-2">
            <div
                class="flex items-center justify-between p-3 bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700">
                <div class="flex items-center gap-3">
                    <div class="size-10 bg-green-100 text-green-600 rounded-full flex items-center justify-center">
                        <span class="material-symbols-outlined text-[20px]">payments</span>
                    </div>
                    <div>
                        <p class="text-sm font-bold">Roberto Méndez</p>
                        <p class="text-xs text-slate-500">Unidad #204 - Hace 10m</p>
                    </div>
                </div>
                <p class="text-sm font-bold text-green-600">+$450.00</p>
            </div>
            <div
                class="flex items-center justify-between p-3 bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700">
                <div class="flex items-center gap-3">
                    <div class="size-10 bg-green-100 text-green-600 rounded-full flex items-center justify-center">
                        <span class="material-symbols-outlined text-[20px]">payments</span>
                    </div>
                    <div>
                        <p class="text-sm font-bold">Juan Carlos P.</p>
                        <p class="text-xs text-slate-500">Unidad #088 - Hace 2h</p>
                    </div>
                </div>
                <p class="text-sm font-bold text-green-600">+$1,200.00</p>
            </div>
        </div>
    </section>
    <!-- Alertas de Mantenimiento -->
    <section class="px-4">
        <h3 class="text-lg font-bold tracking-tight mb-3">Alertas de mantenimiento</h3>
        <div class="p-4 bg-orange-50 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800 rounded-xl">
            <div class="flex items-start gap-3">
                <span class="material-symbols-outlined text-orange-600">report_problem</span>
                <div>
                    <p class="text-sm font-bold text-orange-800 dark:text-orange-200">Próximo cambio de aceite
                    </p>
                    <p class="text-xs text-orange-700 dark:text-orange-300 mt-1">Unidades #042 y #115 requieren
                        atención inmediata por kilometraje.</p>
                </div>
            </div>
        </div>
    </section>
@endsection