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

@section('extra-styles')
    <style type="text/tailwindcss">
        body {
            font-family: 'Inter', sans-serif;
        }

        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
        }

        .custom-scrollbar::-webkit-scrollbar-track {
            background: transparent;
        }

        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #e2e8f0;
            border-radius: 10px;
        }

        .dark .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #334155;
        }

        .sticky-banner {
            position: sticky;
            top: 0;
            z-index: 50;
        }
    </style>
@endsection

@section('content')
    <div class="flex-1 overflow-auto bg-background-light dark:bg-background-dark p-6">
        <x-alert-late-payment></x-alert-late-payment>
        <div class="mx-auto max-w-[1400px] grid grid-cols-1 lg:grid-cols-12 gap-6">
            <div class="lg:col-span-4 space-y-6">
                <div
                    class="bg-white dark:bg-[#1e232e] rounded-xl border border-[#e5e7eb] dark:border-[#2a3140] shadow-sm overflow-hidden">
                    <div
                        class="p-5 border-b border-gray-100 dark:border-gray-800 flex justify-between items-center bg-gray-50/50 dark:bg-gray-800/30">
                        <h3 class="font-bold text-gray-900 dark:text-white flex items-center gap-2">
                            <span class="material-symbols-outlined text-primary text-[20px]">info</span>
                            Información General
                        </h3>
                        <button class="text-primary text-xs font-semibold hover:underline">Editar</button>
                    </div>
                    <div class="p-5 space-y-5">
                        <div>
                            <label class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Comprador</label>
                            <div class="mt-2 flex items-center gap-3">
                                <div
                                    class="h-10 w-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary font-bold">
                                    MG</div>
                                <div>
                                    <p class="text-sm font-semibold text-gray-900 dark:text-white">Maria
                                        González</p>
                                    <p class="text-xs text-gray-500">maria.g@email.com • +52 55 1234 5678</p>
                                </div>
                            </div>
                        </div>
                        <div>
                            <label class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Propiedad</label>
                            <div
                                class="mt-2 p-3 rounded-lg border border-gray-100 dark:border-gray-800 flex items-center gap-3">
                                <span class="material-symbols-outlined text-gray-400">apartment</span>
                                <div>
                                    <p class="text-sm font-semibold text-primary">Depto 402 - Torre Altus</p>
                                    <p class="text-xs text-gray-500">Col. Polanco, Ciudad de México</p>
                                </div>
                            </div>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Agente</label>
                                <div class="mt-1 flex items-center gap-2">
                                    <div class="h-5 w-5 rounded-full bg-cover"
                                        style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCiREGN1ST3V8oezReDT8rPWmFsO-VpQnFvFP69p-s9lKrDSjy0-7GjhQuc90GllkfzOCdVlYp15lXPvI0fh0Xt6mPIYb1GMytV5ZHLwQgxWEoDoKgKArPB98eimcyVUPLcHtjq0_JvAiAWfMHUl-vIh8jhfLsNGJer08A_-Jtbn2Q5j48gYrlj_8ZhebdBqlqfGG5kG-ONB0kbBaybm86fmYeo4Q72sr-OrdL-hLXcbhX65-CJu2b0MY3yRJXESFKTypwM9VFAvzI");'>
                                    </div>
                                    <span class="text-xs font-medium text-gray-700 dark:text-gray-300">Carlos
                                        Ruiz</span>
                                </div>
                            </div>
                            <div>
                                <label class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Fecha
                                    Venta</label>
                                <p class="mt-1 text-xs font-medium text-gray-700 dark:text-gray-300">12 Oct 2023
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="bg-primary/5 dark:bg-primary/10 p-5">
                        <label class="text-[10px] font-bold text-primary uppercase tracking-widest">Monto Total
                            de Operación</label>
                        <div class="mt-1 flex items-baseline justify-between">
                            <span class="text-2xl font-bold text-gray-900 dark:text-white">$4,500,000.00</span>
                            <span class="text-xs text-gray-500 font-medium">MXN</span>
                        </div>
                        <div class="mt-4 h-2 w-full bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
                            <div class="h-full bg-primary rounded-full" style="width: 28%"></div>
                        </div>
                        <p class="mt-2 text-[11px] text-gray-500">Cobrado: <span
                                class="font-bold text-gray-700 dark:text-gray-300">$1,250,000.00 (28%)</span>
                        </p>
                    </div>
                    <div class="p-4 rounded-xl bg-red-50 dark:bg-red-900/10 border border-red-100 dark:border-red-900/30">
                        <label class="text-[10px] font-bold text-red-600 dark:text-red-400 uppercase tracking-widest">Monto
                            en Atraso (2 mensualidades)</label>
                        <div class="mt-1 flex items-baseline justify-between">
                            <span class="text-2xl font-black text-red-600 dark:text-red-500">$500,000.00</span>
                            <span class="material-symbols-outlined text-red-600 text-sm">error</span>
                        </div>
                        <div class="mt-3 h-2 w-full bg-red-200 dark:bg-red-900/30 rounded-full overflow-hidden">
                            <div class="h-full bg-red-600 rounded-full" style="width: 100%"></div>
                        </div>
                    </div>
                </div>
                <div class="bg-white dark:bg-[#1e232e] rounded-xl border border-dashed border-primary/40 p-5 shadow-sm">
                    <h4 class="text-sm font-bold text-gray-900 dark:text-white mb-4">Confirmar Nuevo Pago</h4>
                    <div class="space-y-4">
                        <div class="grid grid-cols-2 gap-3">
                            <div class="space-y-1.5">
                                <label class="text-xs font-medium text-gray-500">Monto (MXN)</label>
                                <input
                                    class="w-full h-9 rounded-lg border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-sm focus:ring-primary"
                                    placeholder="0.00" type="text" />
                            </div>
                            <div class="space-y-1.5">
                                <label class="text-xs font-medium text-gray-500">Fecha</label>
                                <input
                                    class="w-full h-9 rounded-lg border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-sm focus:ring-primary"
                                    type="date" />
                            </div>
                        </div>
                        <div class="space-y-1.5">
                            <label class="text-xs font-medium text-gray-500">Método de Pago</label>
                            <select
                                class="w-full h-9 rounded-lg border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-sm focus:ring-primary">
                                <option>Transferencia SPEI</option>
                                <option>Depósito Bancario</option>
                                <option>Cheque</option>
                                <option>Efectivo</option>
                            </select>
                        </div>
                        <button
                            class="w-full h-10 bg-primary hover:bg-blue-600 text-white text-sm font-bold rounded-lg transition-colors flex items-center justify-center gap-2">
                            <span class="material-symbols-outlined text-[18px]">check_circle</span>
                            Registrar Pago
                        </button>
                    </div>
                </div>
            </div>
            <div class="lg:col-span-8">
                <div
                    class="bg-white dark:bg-[#1e232e] rounded-xl border border-[#e5e7eb] dark:border-[#2a3140] shadow-sm flex flex-col h-full min-h-[600px]">
                    <div class="p-6 border-b border-gray-100 dark:border-gray-800 flex justify-between items-center">
                        <div>
                            <h3 class="text-lg font-bold text-gray-900 dark:text-white">Historial de Pagos</h3>
                            <p class="text-xs text-gray-500 mt-1">Bitácora detallada de ingresos vinculados a
                                esta venta</p>
                        </div>
                        <div class="flex gap-2">
                            <button
                                class="flex items-center gap-2 px-4 py-2 text-sm font-semibold text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">
                                <span class="material-symbols-outlined text-[18px]">download</span>
                                Exportar
                            </button>
                        </div>
                    </div>
                    <div class="flex-1 overflow-auto custom-scrollbar">
                        <table class="w-full text-left text-sm">
                            <thead class="bg-gray-50/50 dark:bg-gray-800/50 sticky top-0 z-10">
                                <tr>
                                    <th class="px-6 py-4 text-xs font-bold text-gray-400 uppercase tracking-widest">
                                        ID</th>
                                    <th class="px-6 py-4 text-xs font-bold text-gray-400 uppercase tracking-widest">
                                        Fecha</th>
                                    <th class="px-6 py-4 text-xs font-bold text-gray-400 uppercase tracking-widest">
                                        Concepto</th>
                                    <th class="px-6 py-4 text-xs font-bold text-gray-400 uppercase tracking-widest">
                                        Método</th>
                                    <th
                                        class="px-6 py-4 text-xs font-bold text-gray-400 uppercase tracking-widest text-right">
                                        Monto</th>
                                    <th
                                        class="px-6 py-4 text-xs font-bold text-gray-400 uppercase tracking-widest text-center">
                                        Estatus</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                                <x-payment-cell-item id="#PAY-005" date="15 Ene 2026" concept="Pago Mensual 04"
                                    conceptNotes="ATRASADO (33 DIAS)" paymentMethod="" amount="$250,000.00"
                                    status="PENDIENTE" lated="{{ true }}"></x-payment-cell-item>

                                <x-payment-cell-item id="#PAY-004" date="15 DIC 2025" concept="Pago Mensual 03"
                                    conceptNotes="ATRASADO (3 DIAS)" paymentMethod="" amount="$250,000.00"
                                    status="PENDIENTE" lated="{{ true }}"></x-payment-cell-item>


                                <tr class="hover:bg-gray-50/50 dark:hover:bg-gray-800/30">
                                    <td class="px-6 py-4 font-mono text-xs text-gray-500">#PAY-003</td>
                                    <td class="px-6 py-4 text-gray-900 dark:text-white whitespace-nowrap">15
                                        Oct 2023</td>
                                    <td class="px-6 py-4">
                                        <div class="text-sm font-medium">Pago Mensual 01</div>
                                        <div class="text-[10px] text-gray-400 uppercase">Parcialidad 1/24</div>
                                    </td>
                                    <td class="px-6 py-4">
                                        <div class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400">
                                            <span class="material-symbols-outlined text-[16px]">account_balance</span>
                                            SPEI
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 text-right font-bold text-gray-900 dark:text-white tabular-nums">
                                        $250,000.00</td>
                                    <td class="px-6 py-4 text-center">
                                        <span
                                            class="inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-[10px] font-bold text-green-700 dark:bg-green-900/30 dark:text-green-400 border border-green-200 dark:border-green-900 uppercase">Confirmado</span>
                                    </td>
                                </tr>
                                <tr class="hover:bg-gray-50/50 dark:hover:bg-gray-800/30">
                                    <td class="px-6 py-4 font-mono text-xs text-gray-500">#PAY-002</td>
                                    <td class="px-6 py-4 text-gray-900 dark:text-white whitespace-nowrap">12
                                        Oct 2023</td>
                                    <td class="px-6 py-4">
                                        <div class="text-sm font-medium">Enganche Complementario</div>
                                        <div class="text-[10px] text-gray-400 uppercase">Abono Inicial</div>
                                    </td>
                                    <td class="px-6 py-4">
                                        <div class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400">
                                            <span class="material-symbols-outlined text-[16px]">account_balance</span>
                                            SPEI
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 text-right font-bold text-gray-900 dark:text-white tabular-nums">
                                        $650,000.00</td>
                                    <td class="px-6 py-4 text-center">
                                        <span
                                            class="inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-[10px] font-bold text-green-700 dark:bg-green-900/30 dark:text-green-400 border border-green-200 dark:border-green-900 uppercase">Confirmado</span>
                                    </td>
                                </tr>
                                <tr class="hover:bg-gray-50/50 dark:hover:bg-gray-800/30">
                                    <td class="px-6 py-4 font-mono text-xs text-gray-500">#PAY-001</td>
                                    <td class="px-6 py-4 text-gray-900 dark:text-white whitespace-nowrap">05
                                        Oct 2023</td>
                                    <td class="px-6 py-4">
                                        <div class="text-sm font-medium">Apartado de Unidad</div>
                                        <div class="text-[10px] text-gray-400 uppercase">Reserva</div>
                                    </td>
                                    <td class="px-6 py-4">
                                        <div class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400">
                                            <span class="material-symbols-outlined text-[16px]">credit_card</span>
                                            TC - Terminal
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 text-right font-bold text-gray-900 dark:text-white tabular-nums">
                                        $100,000.00</td>
                                    <td class="px-6 py-4 text-center">
                                        <span
                                            class="inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-[10px] font-bold text-green-700 dark:bg-green-900/30 dark:text-green-400 border border-green-200 dark:border-green-900 uppercase">Confirmado</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="p-6 bg-gray-50 dark:bg-gray-800/50 border-t border-gray-100 dark:border-gray-800">
                        <div class="flex flex-wrap gap-8 justify-end">
                            <div class="text-right">
                                <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Total
                                    Pagado</p>
                                <p class="text-xl font-bold text-gray-900 dark:text-white">$1,250,000.00</p>
                            </div>
                            <div class="text-right">
                                <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Saldo
                                    Pendiente</p>
                                <p class="text-xl font-bold text-red-500">$3,250,000.00</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection