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

@section('content')
    <div class="flex-1 overflow-auto bg-background-light dark:bg-background-dark pb-24">
        <div
            class="sticky-banner bg-white dark:bg-[#1e232e] border-b border-gray-200 dark:border-gray-800 px-6 py-4 flex items-center justify-between shadow-sm">
            <div class="flex items-center gap-4">
                <div class="p-2.5 bg-blue-50 dark:bg-blue-900/20 text-blue-600 rounded-xl">
                    <span class="material-symbols-outlined text-[28px]">pause_circle</span>
                </div>
                <div>
                    <div class="flex items-center gap-2">
                        <span
                            class="px-2 py-0.5 rounded bg-blue-100 text-blue-700 text-[10px] font-black uppercase tracking-wider">Pausa
                            Justificada</span>
                        <h3 class="text-base font-bold text-gray-900 dark:text-white">Diferimiento de pagos solicitado</h3>
                    </div>
                    <p class="text-sm text-gray-500 font-medium">El cliente solicitó diferir pagos sin intereses por causas
                        justificables.</p>
                </div>
            </div>
            <div class="flex gap-8">
                <div class="text-right">
                    <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Meses diferidos</p>
                    <p class="text-lg font-black text-gray-900 dark:text-white">2 Meses</p>
                </div>
                <div class="text-right">
                    <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Nueva Fecha Término</p>
                    <p class="text-lg font-black text-gray-900 dark:text-white">15 Mar 2026</p>
                </div>
                <div class="text-right">
                    <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Intereses Mora</p>
                    <p class="text-lg font-black text-green-600">$0.00 (Exento)</p>
                </div>
                <button
                    class="ml-4 px-6 py-2.5 bg-primary text-white text-sm font-bold rounded-lg shadow-sm hover:bg-blue-700 transition-colors">
                    Reprogramar Calendario
                </button>
            </div>
        </div>
        <div class="p-6">
            <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 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]">account_circle</span>
                                Información General
                            </h3>
                        </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-blue-100 text-blue-600 flex items-center justify-center font-bold border border-blue-200">
                                        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>
                    </div>
                    <div
                        class="bg-white dark:bg-[#1e232e] rounded-xl border border-[#e5e7eb] dark:border-[#2a3140] shadow-sm overflow-hidden">
                        <div
                            class="p-4 border-b border-gray-100 dark:border-gray-800 bg-gray-50/50 dark:bg-gray-800/30 flex justify-between items-center">
                            <h3 class="font-bold text-xs text-gray-900 dark:text-white uppercase tracking-widest">Bitácora
                                de Eventos</h3>
                            <span class="material-symbols-outlined text-gray-400 text-sm">history</span>
                        </div>
                        <div class="p-4 space-y-4">
                            <div class="relative pl-6 pb-4 border-l-2 border-gray-100 dark:border-gray-800">
                                <div
                                    class="absolute -left-[9px] top-0 h-4 w-4 rounded-full bg-blue-500 border-4 border-white dark:border-[#1e232e]">
                                </div>
                                <p class="text-[11px] font-bold text-gray-900 dark:text-white">Simulación Iniciada</p>
                                <p class="text-[10px] text-gray-500 mt-0.5">Por: Carlos Admin • 30/01/2024 14:22</p>
                                <p class="text-[10px] text-gray-400 mt-1 italic">Configurando pausa de 2 meses por
                                    emergencia de salud.</p>
                            </div>
                            <div class="relative pl-6 border-l-2 border-gray-100 dark:border-gray-800">
                                <div class="absolute -left-[9px] top-0 h-4 w-4 rounded-full bg-gray-200 dark:bg-gray-700">
                                </div>
                                <p class="text-[11px] font-bold text-gray-500">Mora Crítica Detectada</p>
                                <p class="text-[10px] text-gray-500 mt-0.5">Sistema Automático • 15/01/2024</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="lg:col-span-8 space-y-6">
                    <div
                        class="bg-white dark:bg-[#1e232e] rounded-xl border-2 border-primary/30 dark:border-primary/20 shadow-xl overflow-hidden">
                        <div class="p-5 border-b border-primary/10 bg-primary/5 flex justify-between items-center">
                            <div class="flex items-center gap-3">
                                <span class="material-symbols-outlined text-primary">edit_calendar</span>
                                <h3 class="text-lg font-bold text-gray-900 dark:text-white">Solicitud de Pausa /
                                    Justificación</h3>
                            </div>
                            <span
                                class="text-xs font-semibold text-primary px-2 py-1 bg-white rounded border border-primary/20">PASO
                                1: CONFIGURAR</span>
                        </div>
                        <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="space-y-4">
                                <div>
                                    <label class="text-xs font-bold text-gray-500 uppercase mb-1.5 block">Motivo del
                                        Diferimiento</label>
                                    <select
                                        class="w-full h-11 rounded-lg border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-sm focus:ring-primary">
                                        <option>Emergencia Médica / Salud</option>
                                        <option>Pérdida de Empleo</option>
                                        <option>Desastre Natural</option>
                                        <option>Otro (Justificado)</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="text-xs font-bold text-gray-500 uppercase mb-1.5 block">Descripción y
                                        Evidencia</label>
                                    <textarea
                                        class="w-full rounded-lg border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-sm focus:ring-primary h-24"
                                        placeholder="Detalle el motivo de la solicitud..."></textarea>
                                </div>
                                <div
                                    class="border-2 border-dashed border-gray-200 dark:border-gray-700 rounded-lg p-4 flex flex-col items-center justify-center bg-gray-50/50">
                                    <span class="material-symbols-outlined text-gray-400">upload_file</span>
                                    <p class="text-xs text-gray-500 mt-2 text-center font-medium">Adjuntar comprobante
                                        (PDF/JPG)<br /><span class="text-[10px] text-gray-400">Máx 5MB</span></p>
                                </div>
                            </div>
                            <div class="space-y-4">
                                <div class="p-4 bg-gray-50 dark:bg-gray-800 rounded-xl space-y-4">
                                    <div>
                                        <label class="text-xs font-bold text-gray-500 uppercase mb-2 block">Meses a diferir
                                            (N)</label>
                                        <div class="flex items-center gap-3">
                                            <button
                                                class="h-10 w-10 rounded-lg border border-gray-200 flex items-center justify-center hover:bg-white">-</button>
                                            <input
                                                class="w-20 h-10 text-center font-bold text-lg rounded-lg border-gray-200"
                                                type="number" value="2" />
                                            <button
                                                class="h-10 w-10 rounded-lg border border-gray-200 flex items-center justify-center hover:bg-white">+</button>
                                        </div>
                                    </div>
                                    <div>
                                        <label class="text-xs font-bold text-gray-500 uppercase mb-1.5 block">Mes de
                                            inicio</label>
                                        <select class="w-full h-10 rounded-lg border-gray-200 text-sm">
                                            <option>Desde Pago Mensual 03 (Dic 2023)</option>
                                            <option>Desde Pago Mensual 04 (Ene 2024)</option>
                                        </select>
                                    </div>
                                    <div class="pt-2">
                                        <label class="flex items-center gap-3 cursor-pointer">
                                            <input checked=""
                                                class="w-5 h-5 rounded text-primary focus:ring-primary border-gray-300"
                                                type="checkbox" />
                                            <div>
                                                <span class="text-sm font-bold text-gray-700 dark:text-gray-300">Exentar
                                                    intereses de mora</span>
                                                <p class="text-[10px] text-gray-500 leading-tight">No se aplicarán cargos
                                                    extras por el retraso actual.</p>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                                <div
                                    class="p-3 bg-blue-50 dark:bg-blue-900/10 rounded-lg flex items-start gap-3 border border-blue-100 dark:border-blue-900/30">
                                    <span class="material-symbols-outlined text-blue-600 text-[20px]">info</span>
                                    <p class="text-[11px] text-blue-700 dark:text-blue-400 font-medium">
                                        Al simular, el sistema recalculará todas las fechas de vencimiento posteriores
                                        moviéndolas <span class="font-bold underline">2 meses</span> hacia adelante. Esto
                                        extenderá el plazo total de 31 a 33 meses.
                                    </p>
                                </div>
                                <button
                                    class="w-full h-12 bg-primary hover:bg-blue-700 text-white font-bold rounded-lg shadow-lg shadow-primary/20 transition-all flex items-center justify-center gap-2 active:scale-95">
                                    <span class="material-symbols-outlined">sync</span>
                                    Simular Reprogramación
                                </button>
                            </div>
                        </div>
                    </div>
                    <div
                        class="bg-white dark:bg-[#1e232e] rounded-xl border border-[#e5e7eb] dark:border-[#2a3140] shadow-sm flex flex-col overflow-hidden">
                        <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">Comparativa de Calendario</h3>
                                <p class="text-xs text-gray-500 mt-1">Simulación del impacto en las fechas de pago</p>
                            </div>
                            <div class="flex p-1 bg-gray-100 dark:bg-gray-800 rounded-lg">
                                <button
                                    class="px-3 py-1.5 text-xs font-bold bg-white dark:bg-gray-700 rounded-md shadow-sm">Tabla</button>
                                <button class="px-3 py-1.5 text-xs font-bold text-gray-500">Timeline</button>
                            </div>
                        </div>
                        <div
                            class="grid grid-cols-1 xl:grid-cols-2 divide-y xl:divide-y-0 xl:divide-x divide-gray-100 dark:divide-gray-800">
                            <div class="flex flex-col">
                                <div
                                    class="px-6 py-3 bg-gray-50/50 dark:bg-gray-800/20 border-b border-gray-100 dark:border-gray-800">
                                    <span class="text-[10px] font-black text-gray-400 uppercase tracking-widest">Calendario
                                        Actual (Sin cambios)</span>
                                </div>
                                <table class="w-full text-left text-sm">
                                    <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                                        <tr class="opacity-50">
                                            <td class="px-6 py-3 text-xs font-bold text-gray-400">15 Nov 2023</td>
                                            <td class="px-6 py-3 text-xs font-medium">Pago 02</td>
                                            <td class="px-6 py-3 text-right font-bold">$250k</td>
                                        </tr>
                                        <tr class="bg-red-50/50">
                                            <td class="px-6 py-3 text-xs font-bold text-red-600">15 Dic 2023</td>
                                            <td class="px-6 py-3 text-xs font-medium">Pago 03</td>
                                            <td class="px-6 py-3 text-right font-bold text-red-600">$250k</td>
                                        </tr>
                                        <tr class="bg-red-50/50">
                                            <td class="px-6 py-3 text-xs font-bold text-red-600">15 Ene 2024</td>
                                            <td class="px-6 py-3 text-xs font-medium">Pago 04</td>
                                            <td class="px-6 py-3 text-right font-bold text-red-600">$250k</td>
                                        </tr>
                                        <tr>
                                            <td class="px-6 py-3 text-xs font-bold text-gray-600">15 Feb 2024</td>
                                            <td class="px-6 py-3 text-xs font-medium">Pago 05</td>
                                            <td class="px-6 py-3 text-right font-bold">$250k</td>
                                        </tr>
                                        <tr class="bg-gray-50/50 italic">
                                            <td class="px-6 py-3 text-xs font-bold text-gray-400">...</td>
                                            <td class="px-6 py-3 text-xs font-medium">...</td>
                                            <td class="px-6 py-3 text-right font-bold text-gray-400">...</td>
                                        </tr>
                                        <tr class="border-t-2 border-gray-200">
                                            <td class="px-6 py-3 text-xs font-bold text-gray-900">15 Abr 2026</td>
                                            <td class="px-6 py-3 text-xs font-medium">Pago 31 (Fin)</td>
                                            <td class="px-6 py-3 text-right font-bold">$250k</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="flex flex-col">
                                <div
                                    class="px-6 py-3 bg-blue-50/30 dark:bg-blue-900/10 border-b border-gray-100 dark:border-gray-800 flex justify-between">
                                    <span class="text-[10px] font-black text-blue-600 uppercase tracking-widest">Calendario
                                        Propuesto (+2 Meses)</span>
                                    <span class="text-[10px] font-bold text-green-600 uppercase">Sin Intereses Mora</span>
                                </div>
                                <table class="w-full text-left text-sm">
                                    <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                                        <tr class="opacity-50">
                                            <td class="px-6 py-3 text-xs font-bold text-gray-400">15 Nov 2023</td>
                                            <td class="px-6 py-3 text-xs font-medium">Pago 02</td>
                                            <td class="px-6 py-3 text-right font-bold">$250k</td>
                                        </tr>
                                        <tr class="bg-blue-50 dark:bg-blue-900/20">
                                            <td class="px-6 py-3">
                                                <div
                                                    class="text-xs font-black text-blue-600 italic line-through opacity-40">
                                                    15 Dic 2023</div>
                                                <div class="text-xs font-black text-blue-700">15 Feb 2024</div>
                                            </td>
                                            <td class="px-6 py-3">
                                                <div class="text-xs font-medium">Pago 03</div>
                                                <span
                                                    class="inline-block px-1.5 py-0.5 bg-blue-100 text-blue-700 text-[8px] font-black rounded uppercase">Diferido</span>
                                            </td>
                                            <td class="px-6 py-3 text-right font-bold text-blue-700">$250k</td>
                                        </tr>
                                        <tr class="bg-blue-50 dark:bg-blue-900/20">
                                            <td class="px-6 py-3">
                                                <div
                                                    class="text-xs font-black text-blue-600 italic line-through opacity-40">
                                                    15 Ene 2024</div>
                                                <div class="text-xs font-black text-blue-700">15 Mar 2024</div>
                                            </td>
                                            <td class="px-6 py-3">
                                                <div class="text-xs font-medium">Pago 04</div>
                                                <span
                                                    class="inline-block px-1.5 py-0.5 bg-blue-100 text-blue-700 text-[8px] font-black rounded uppercase">Diferido</span>
                                            </td>
                                            <td class="px-6 py-3 text-right font-bold text-blue-700">$250k</td>
                                        </tr>
                                        <tr>
                                            <td class="px-6 py-3">
                                                <div
                                                    class="text-xs font-black text-gray-400 italic line-through opacity-40">
                                                    15 Feb 2024</div>
                                                <div class="text-xs font-bold text-gray-700">15 Abr 2024</div>
                                            </td>
                                            <td class="px-6 py-3 text-xs font-medium">Pago 05</td>
                                            <td class="px-6 py-3 text-right font-bold">$250k</td>
                                        </tr>
                                        <tr class="bg-gray-50/50 italic text-gray-400">
                                            <td class="px-6 py-3 text-xs font-bold">...</td>
                                            <td class="px-6 py-3 text-xs font-medium">...</td>
                                            <td class="px-6 py-3 text-right font-bold">...</td>
                                        </tr>
                                        <tr class="border-t-2 border-primary">
                                            <td class="px-6 py-3 text-xs font-black text-primary">15 Jun 2026</td>
                                            <td class="px-6 py-3">
                                                <div class="text-xs font-bold">Pago 31 (Fin)</div>
                                                <span
                                                    class="inline-block px-1.5 py-0.5 bg-primary text-white text-[8px] font-black rounded uppercase">Nuevo
                                                    Término</span>
                                            </td>
                                            <td class="px-6 py-3 text-right font-bold">$250k</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="p-6 bg-gray-50 dark:bg-gray-800/50 border-t border-gray-100 dark:border-gray-800">
                            <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
                                <div>
                                    <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Plazo Original
                                    </p>
                                    <p class="text-lg font-black text-gray-900 dark:text-white">31 Meses</p>
                                </div>
                                <div class="border-l border-gray-200 pl-4">
                                    <p class="text-[10px] font-bold text-blue-500 uppercase tracking-widest">Plazo Nuevo
                                    </p>
                                    <p class="text-lg font-black text-blue-600">33 Meses (+2)</p>
                                </div>
                                <div class="border-l border-gray-200 pl-4">
                                    <p class="text-[10px] font-bold text-green-500 uppercase tracking-widest">Intereses
                                        Condenados</p>
                                    <p class="text-lg font-black text-green-600">$12,500.00</p>
                                </div>
                                <div class="border-l border-gray-200 pl-4">
                                    <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Pagos
                                        Diferidos</p>
                                    <p class="text-lg font-black text-gray-900 dark:text-white">2 Pagos</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div
        class="fixed bottom-0 right-0 bg-white dark:bg-[#1e232e] border-t border-gray-200 dark:border-gray-800 p-4 shadow-[0_-4px_20px_rgba(0,0,0,0.05)] z-50">
        <div class="max-w-[1400px] mx-auto flex flex-col md:flex-row items-center justify-between gap-4">
            <div class="flex items-center gap-6">
                <div class="flex items-center gap-3">
                    <input class="w-5 h-5 rounded text-primary focus:ring-primary border-gray-300" id="auth-confirm"
                        type="checkbox" />
                    <label class="text-xs font-bold text-gray-700 dark:text-gray-300" for="auth-confirm">Confirmo que este
                        ajuste fue autorizado</label>
                </div>
                <div class="flex items-center gap-2">
                    <span class="text-xs text-gray-500 font-medium">Autorizado por:</span>
                    <select class="h-8 rounded border-gray-200 text-xs font-bold">
                        <option>Admin Gerente (Carlos A.)</option>
                        <option>Director Comercial</option>
                    </select>
                </div>
                <input class="h-8 w-32 rounded border-gray-200 text-xs placeholder:font-normal"
                    placeholder="Folio (Opcional)" type="text" />
            </div>
            <div class="flex items-center gap-3">
                <button
                    class="px-5 py-2.5 bg-white border border-gray-200 text-gray-600 text-sm font-bold rounded-lg hover:bg-gray-50">
                    Cancelar
                </button>
                <button
                    class="px-5 py-2.5 bg-indigo-50 text-indigo-700 border border-indigo-100 text-sm font-bold rounded-lg hover:bg-indigo-100 flex items-center gap-2">
                    <span class="material-symbols-outlined text-[20px]">picture_as_pdf</span>
                    Generar Convenio PDF
                </button>
                <button
                    class="px-8 py-2.5 bg-primary text-white text-sm font-black rounded-lg shadow-lg shadow-primary/30 hover:bg-blue-700 active:scale-95 transition-all">
                    Aplicar Reprogramación
                </button>
            </div>
        </div>
    </div>
@endsection