@extends('layouts.dashboard.inface', ['section' => 'payments'])

@section('content')
    <div class="max-w-[1200px] mx-auto p-8">
        <!-- Page Heading -->
        <div class="flex flex-wrap justify-between items-end gap-4 mb-8">
            <div class="flex flex-col gap-2">
                <h1 class="text-[#111318] dark:text-white text-4xl font-black leading-tight tracking-tight">
                    Libro Mayor de Pagos</h1>
                <p class="text-[#616f89] dark:text-[#a0aec0] text-base font-normal">Gestión y seguimiento
                    detallado de los ingresos de la compañía</p>
            </div>
            <div class="flex gap-3">
                <button
                    class="flex items-center justify-center rounded-lg h-11 px-6 bg-white dark:bg-[#1a212e] border border-[#dbdfe6] dark:border-[#2d3748] text-[#111318] dark:text-white text-sm font-bold shadow-sm hover:bg-gray-50 transition-colors">
                    <span class="material-symbols-outlined mr-2 text-xl">download</span>
                    Exportar Reporte
                </button>
                <button
                    class="flex items-center justify-center rounded-lg h-11 px-6 bg-primary text-white text-sm font-bold shadow-md hover:bg-blue-700 transition-colors">
                    <span class="material-symbols-outlined mr-2 text-xl">add_circle</span>
                    Registrar Pago
                </button>
            </div>
        </div>
        <!-- Stats Overview -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
            <div class="bg-white dark:bg-[#1a212e] p-6 rounded-xl border border-[#dbdfe6] dark:border-[#2d3748] shadow-sm">
                <p class="text-[#616f89] dark:text-[#a0aec0] text-sm font-semibold mb-2 uppercase tracking-wider">
                    Total Cobrado Mes</p>
                <div class="flex items-end gap-2">
                    <p class="text-[#111318] dark:text-white text-3xl font-bold">$4,250,000.00 <span
                            class="text-sm font-normal text-[#616f89]">MXN</span></p>
                </div>
                <div class="mt-3 flex items-center text-[#07883b] text-sm font-bold">
                    <span class="material-symbols-outlined text-sm mr-1">trending_up</span>
                    +12.5% vs mes anterior
                </div>
            </div>
            <div class="bg-white dark:bg-[#1a212e] p-6 rounded-xl border border-[#dbdfe6] dark:border-[#2d3748] shadow-sm">
                <p class="text-[#616f89] dark:text-[#a0aec0] text-sm font-semibold mb-2 uppercase tracking-wider">
                    Pagos Vencidos</p>
                <div class="flex items-end gap-2">
                    <p class="text-[#111318] dark:text-white text-3xl font-bold">$125,400.00 <span
                            class="text-sm font-normal text-[#616f89]">MXN</span></p>
                </div>
                <div class="mt-3 flex items-center text-[#e73908] text-sm font-bold">
                    <span class="material-symbols-outlined text-sm mr-1">warning</span>
                    14 recibos pendientes
                </div>
            </div>
            <div class="bg-white dark:bg-[#1a212e] p-6 rounded-xl border border-[#dbdfe6] dark:border-[#2d3748] shadow-sm">
                <p class="text-[#616f89] dark:text-[#a0aec0] text-sm font-semibold mb-2 uppercase tracking-wider">
                    Próximos Cobros</p>
                <div class="flex items-end gap-2">
                    <p class="text-[#111318] dark:text-white text-3xl font-bold">$890,200.00 <span
                            class="text-sm font-normal text-[#616f89]">MXN</span></p>
                </div>
                <div class="mt-3 flex items-center text-primary text-sm font-bold">
                    <span class="material-symbols-outlined text-sm mr-1">schedule</span>
                    Programados para 7 días
                </div>
            </div>
        </div>
        <!-- Toolbar & Filters -->
        <div class="bg-white dark:bg-[#1a212e] p-4 rounded-t-xl border-x border-t border-[#dbdfe6] dark:border-[#2d3748]">
            <div class="flex flex-wrap items-center justify-between gap-4">
                <div class="flex items-center gap-3 flex-1 min-w-[300px]">
                    <div class="relative flex-1 max-w-sm">
                        <span
                            class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-[#616f89]">search</span>
                        <input
                            class="w-full pl-10 pr-4 py-2 bg-background-light dark:bg-gray-800 border-none rounded-lg text-sm focus:ring-2 focus:ring-primary/20"
                            placeholder="Buscar por cliente o propiedad..." type="text" />
                    </div>
                    <div class="flex gap-2">
                        <select
                            class="bg-background-light dark:bg-gray-800 border-none rounded-lg text-sm py-2 px-3 focus:ring-2 focus:ring-primary/20 text-[#111318] dark:text-white">
                            <option>Método: Todos</option>
                            <option>Transferencia</option>
                            <option>Efectivo</option>
                            <option>Tarjeta de Crédito</option>
                        </select>
                        <select
                            class="bg-background-light dark:bg-gray-800 border-none rounded-lg text-sm py-2 px-3 focus:ring-2 focus:ring-primary/20 text-[#111318] dark:text-white">
                            <option>Sucursal: Todas</option>
                            <option>CDMX Norte</option>
                            <option>Querétaro Centro</option>
                            <option>Cancún Playa</option>
                        </select>
                        <select
                            class="bg-background-light dark:bg-gray-800 border-none rounded-lg text-sm py-2 px-3 focus:ring-2 focus:ring-primary/20 text-[#111318] dark:text-white">
                            <option>Estatus: Todos</option>
                            <option>Aplicado</option>
                            <option>Pendiente</option>
                            <option>Vencido</option>
                        </select>
                    </div>
                </div>
                <div class="flex items-center gap-2">
                    <button class="p-2 text-[#616f89] hover:bg-gray-100 rounded-lg">
                        <span class="material-symbols-outlined">calendar_today</span>
                    </button>
                    <button
                        class="flex items-center gap-2 bg-primary text-white px-4 py-2 rounded-lg text-sm font-bold shadow-sm">
                        <span class="material-symbols-outlined text-sm">filter_list</span>
                        Aplicar Filtros
                    </button>
                </div>
            </div>
        </div>
        <!-- Data Table -->
        <div
            class="bg-white dark:bg-[#1a212e] border border-[#dbdfe6] dark:border-[#2d3748] rounded-b-xl overflow-hidden shadow-sm">
            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse">
                    <thead>
                        <tr class="bg-background-light dark:bg-gray-800/50 border-b border-[#dbdfe6] dark:border-[#2d3748]">
                            <th
                                class="px-6 py-4 text-xs font-bold text-[#616f89] dark:text-[#a0aec0] uppercase tracking-wider">
                                ID Recibo</th>
                            <th
                                class="px-6 py-4 text-xs font-bold text-[#616f89] dark:text-[#a0aec0] uppercase tracking-wider">
                                Cliente</th>
                            <th
                                class="px-6 py-4 text-xs font-bold text-[#616f89] dark:text-[#a0aec0] uppercase tracking-wider">
                                Propiedad</th>
                            <th
                                class="px-6 py-4 text-xs font-bold text-[#616f89] dark:text-[#a0aec0] uppercase tracking-wider">
                                Concepto</th>
                            <th
                                class="px-6 py-4 text-xs font-bold text-[#616f89] dark:text-[#a0aec0] uppercase tracking-wider">
                                Monto (MXN)</th>
                            <th
                                class="px-6 py-4 text-xs font-bold text-[#616f89] dark:text-[#a0aec0] uppercase tracking-wider">
                                Fecha</th>
                            <th
                                class="px-6 py-4 text-xs font-bold text-[#616f89] dark:text-[#a0aec0] uppercase tracking-wider">
                                Estatus</th>
                            <th
                                class="px-6 py-4 text-xs font-bold text-[#616f89] dark:text-[#a0aec0] uppercase tracking-wider text-right">
                                Acciones</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-[#dbdfe6] dark:divide-[#2d3748]">
                        <!-- Row 1 -->
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/30 transition-colors">
                            <td class="px-6 py-4 text-sm font-medium">#REC-9284</td>
                            <td class="px-6 py-4 text-sm">Alejandro Villarreal</td>
                            <td class="px-6 py-4 text-sm font-semibold">Lote #42 - Roble</td>
                            <td class="px-6 py-4 text-sm text-[#616f89]">Enganche</td>
                            <td class="px-6 py-4 text-sm font-bold">$450,000.00</td>
                            <td class="px-6 py-4 text-sm">12/10/2023</td>
                            <td class="px-6 py-4">
                                <span
                                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400">
                                    Aplicado
                                </span>
                            </td>
                            <td class="px-6 py-4 text-right">
                                <div class="flex justify-end gap-2">
                                    <button class="p-1.5 text-[#616f89] hover:bg-gray-100 rounded" title="Ver Recibo">
                                        <span class="material-symbols-outlined text-xl">visibility</span>
                                    </button>
                                    <button class="p-1.5 text-primary hover:bg-primary/10 rounded" title="Generar Factura">
                                        <span class="material-symbols-outlined text-xl">description</span>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        <!-- Row 2 -->
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/30 transition-colors">
                            <td class="px-6 py-4 text-sm font-medium">#REC-9285</td>
                            <td class="px-6 py-4 text-sm">Beatriz Mendoza</td>
                            <td class="px-6 py-4 text-sm font-semibold">Depto 304-B</td>
                            <td class="px-6 py-4 text-sm text-[#616f89]">Mensualidad 05/24</td>
                            <td class="px-6 py-4 text-sm font-bold">$18,450.00</td>
                            <td class="px-6 py-4 text-sm">15/10/2023</td>
                            <td class="px-6 py-4">
                                <span
                                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400">
                                    Pendiente
                                </span>
                            </td>
                            <td class="px-6 py-4 text-right">
                                <div class="flex justify-end gap-2">
                                    <button class="p-1.5 text-[#616f89] hover:bg-gray-100 rounded" title="Ver Recibo">
                                        <span class="material-symbols-outlined text-xl">visibility</span>
                                    </button>
                                    <button class="p-1.5 text-primary hover:bg-primary/10 rounded" title="Generar Factura">
                                        <span class="material-symbols-outlined text-xl">description</span>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        <!-- Row 3 -->
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/30 transition-colors">
                            <td class="px-6 py-4 text-sm font-medium">#REC-9280</td>
                            <td class="px-6 py-4 text-sm">Roberto Sánchez</td>
                            <td class="px-6 py-4 text-sm font-semibold">Lote #15 - Jacaranda</td>
                            <td class="px-6 py-4 text-sm text-[#616f89]">Anualidad 2023</td>
                            <td class="px-6 py-4 text-sm font-bold">$85,200.00</td>
                            <td class="px-6 py-4 text-sm text-[#e73908] font-medium">01/10/2023</td>
                            <td class="px-6 py-4">
                                <span
                                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400">
                                    Vencido
                                </span>
                            </td>
                            <td class="px-6 py-4 text-right">
                                <div class="flex justify-end gap-2">
                                    <button class="p-1.5 text-[#616f89] hover:bg-gray-100 rounded" title="Ver Recibo">
                                        <span class="material-symbols-outlined text-xl">visibility</span>
                                    </button>
                                    <button class="p-1.5 text-primary hover:bg-primary/10 rounded"
                                        title="Generar Factura">
                                        <span class="material-symbols-outlined text-xl">description</span>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        <!-- Row 4 -->
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/30 transition-colors">
                            <td class="px-6 py-4 text-sm font-medium">#REC-9286</td>
                            <td class="px-6 py-4 text-sm">Carlos Ruiz</td>
                            <td class="px-6 py-4 text-sm font-semibold">Oficina 12</td>
                            <td class="px-6 py-4 text-sm text-[#616f89]">Mensualidad 12/48</td>
                            <td class="px-6 py-4 text-sm font-bold">$12,300.00</td>
                            <td class="px-6 py-4 text-sm">18/10/2023</td>
                            <td class="px-6 py-4">
                                <span
                                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400">
                                    Aplicado
                                </span>
                            </td>
                            <td class="px-6 py-4 text-right">
                                <div class="flex justify-end gap-2">
                                    <button class="p-1.5 text-[#616f89] hover:bg-gray-100 rounded" title="Ver Recibo">
                                        <span class="material-symbols-outlined text-xl">visibility</span>
                                    </button>
                                    <button class="p-1.5 text-primary hover:bg-primary/10 rounded"
                                        title="Generar Factura">
                                        <span class="material-symbols-outlined text-xl">description</span>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!-- Pagination -->
            <div
                class="px-6 py-4 flex items-center justify-between border-t border-[#dbdfe6] dark:border-[#2d3748] bg-white dark:bg-[#1a212e]">
                <p class="text-sm text-[#616f89]">Mostrando 1-4 de 248 pagos</p>
                <div class="flex gap-2">
                    <button
                        class="px-4 py-2 border border-[#dbdfe6] dark:border-[#2d3748] rounded-lg text-sm hover:bg-gray-50 transition-colors">Anterior</button>
                    <button class="px-4 py-2 bg-primary text-white rounded-lg text-sm font-bold">1</button>
                    <button
                        class="px-4 py-2 border border-[#dbdfe6] dark:border-[#2d3748] rounded-lg text-sm hover:bg-gray-50 transition-colors">2</button>
                    <button
                        class="px-4 py-2 border border-[#dbdfe6] dark:border-[#2d3748] rounded-lg text-sm hover:bg-gray-50 transition-colors">3</button>
                    <button
                        class="px-4 py-2 border border-[#dbdfe6] dark:border-[#2d3748] rounded-lg text-sm hover:bg-gray-50 transition-colors">Siguiente</button>
                </div>
            </div>
        </div>
    </div>
@endsection