@extends('layouts.panel-tamplate')

@section('main-content')
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 p-4">
        <div class="bg-white dark:bg-slate-800 p-5 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm">
            <div class="flex items-center justify-between mb-2">
                <p class="text-sm font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">Cobrado
                    Hoy</p>
                <span
                    class="material-symbols-outlined text-green-500 bg-green-50 dark:bg-green-900/20 p-1 rounded">trending_up</span>
            </div>
            <p class="text-2xl font-bold leading-none">$4,500</p>
            <p class="text-xs font-semibold text-green-600 dark:text-green-400 mt-2 flex items-center">
                <span class="material-symbols-outlined text-[14px] mr-1">arrow_upward</span> +12.5% vs ayer
            </p>
        </div>
        <div class="bg-white dark:bg-slate-800 p-5 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm">
            <div class="flex items-center justify-between mb-2">
                <p class="text-sm font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">Pendiente
                    Total</p>
                <span
                    class="material-symbols-outlined text-amber-500 bg-amber-50 dark:bg-amber-900/20 p-1 rounded">account_balance_wallet</span>
            </div>
            <p class="text-2xl font-bold leading-none">$12,800</p>
            <p class="text-xs font-semibold text-slate-500 dark:text-slate-400 mt-2">Próximo corte: Mañana</p>
        </div>
        <div class="bg-white dark:bg-slate-800 p-5 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm">
            <div class="flex items-center justify-between mb-2">
                <p class="text-sm font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">Choferes
                    Atraso</p>
                <span class="material-symbols-outlined text-red-500 bg-red-50 dark:bg-red-900/20 p-1 rounded">warning</span>
            </div>
            <p class="text-2xl font-bold leading-none">8</p>
            <p class="text-xs font-semibold text-red-600 dark:text-red-400 mt-2 flex items-center">
                <span class="material-symbols-outlined text-[14px] mr-1">group</span> 2 críticos (&gt;3 días)
            </p>
        </div>
    </div>
    <!-- Tabs Navigation -->
    <div class="px-4">
        <div class="flex border-b border-slate-200 dark:border-slate-800">
            <button class="flex-1 py-4 text-sm font-bold border-b-2 border-primary text-primary transition-all">
                Pagos Recientes
            </button>
            <button
                class="flex-1 py-4 text-sm font-bold border-b-2 border-transparent text-slate-500 hover:text-slate-700 dark:hover:text-slate-300 transition-all">
                Adeudos Pendientes
            </button>
        </div>
    </div>
    <!-- Transactions List (Pagos View) -->
    <div class="p-4 space-y-3">
        <h3 class="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest px-1">Hoy, 24 May
        </h3>
        <!-- Transaction Item -->
        <div
            class="bg-white dark:bg-slate-800 p-4 rounded-lg border border-slate-100 dark:border-slate-700 flex items-center gap-4">
            <div class="size-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                <span class="material-symbols-outlined">person</span>
            </div>
            <div class="flex-1">
                <div class="flex justify-between items-start">
                    <p class="font-bold text-slate-900 dark:text-slate-100">Juan Pérez</p>
                    <p class="font-bold text-green-600 dark:text-green-400">+$650.00</p>
                </div>
                <div class="flex justify-between items-center mt-1">
                    <p class="text-xs text-slate-500 dark:text-slate-400">Unidad 104 • Efectivo</p>
                    <p class="text-xs text-slate-400 dark:text-slate-500">14:30 PM</p>
                </div>
            </div>
        </div>
        <!-- Transaction Item -->
        <div
            class="bg-white dark:bg-slate-800 p-4 rounded-lg border border-slate-100 dark:border-slate-700 flex items-center gap-4">
            <div class="size-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                <span class="material-symbols-outlined">person</span>
            </div>
            <div class="flex-1">
                <div class="flex justify-between items-start">
                    <p class="font-bold text-slate-900 dark:text-slate-100">Ricardo Gómez</p>
                    <p class="font-bold text-green-600 dark:text-green-400">+$1,200.00</p>
                </div>
                <div class="flex justify-between items-center mt-1">
                    <p class="text-xs text-slate-500 dark:text-slate-400">Unidad 215 • Transferencia</p>
                    <p class="text-xs text-slate-400 dark:text-slate-500">11:15 AM</p>
                </div>
            </div>
        </div>
        <h3 class="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest px-1 pt-4">Ayer,
            23 May</h3>
        <!-- Transaction Item -->
        <div
            class="bg-white dark:bg-slate-800 p-4 rounded-lg border border-slate-100 dark:border-slate-700 flex items-center gap-4 opacity-80">
            <div
                class="size-10 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center text-slate-500">
                <span class="material-symbols-outlined">person</span>
            </div>
            <div class="flex-1">
                <div class="flex justify-between items-start">
                    <p class="font-bold text-slate-900 dark:text-slate-100">Sofía Méndez</p>
                    <p class="font-bold text-green-600 dark:text-green-400">+$800.00</p>
                </div>
                <div class="flex justify-between items-center mt-1">
                    <p class="text-xs text-slate-500 dark:text-slate-400">Unidad 088 • Efectivo</p>
                    <p class="text-xs text-slate-400 dark:text-slate-500">18:45 PM</p>
                </div>
            </div>
        </div>
    </div>
    <!-- Adeudos View (Visual example for context, would toggle visibility) -->
    <div class="p-4 space-y-4">
        <h3 class="text-sm font-bold text-slate-700 dark:text-slate-300">Adeudos Críticos</h3>
        <div class="bg-white dark:bg-slate-800 p-4 rounded-xl border-l-4 border-red-500 shadow-sm">
            <div class="flex justify-between items-start mb-3">
                <div>
                    <p class="font-bold text-slate-900 dark:text-slate-100 text-lg">Mario Estrada</p>
                    <p class="text-sm text-slate-500">Unidad 402 • <span class="text-red-500 font-semibold">4 días
                            de atraso</span></p>
                </div>
                <span
                    class="bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400 px-2 py-1 rounded text-xs font-bold">-$2,400.00</span>
            </div>
            <div class="w-full bg-slate-100 dark:bg-slate-700 h-2 rounded-full mb-4 overflow-hidden">
                <div class="bg-primary h-full rounded-full" style="width: 30%;"></div>
            </div>
            <div class="flex justify-between items-center">
                <p class="text-xs text-slate-500">Pagado: $600 / Esperado: $3,000</p>
                <button
                    class="bg-primary text-white text-xs font-bold px-4 py-2 rounded-lg flex items-center gap-1 shadow-sm shadow-primary/30">
                    <span class="material-symbols-outlined text-[16px]">add_circle</span> Registrar Abono
                </button>
            </div>
        </div>
    </div>

    <a href="{{ route('billing.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