@extends('layouts.panel-template', ['section' => 'pieceworks'])

@section('main-content')
    <header class="mb-8">
        <nav aria-label="Breadcrumb" class="flex mb-4 text-xs font-medium text-slate-500 uppercase tracking-wider">
            <ol class="flex items-center space-x-2">
                <li>Dashboard</li>
                <li><span class="material-symbols-outlined text-[14px]">chevron_right</span></li>
                <li>Destajos</li>
                <li><span class="material-symbols-outlined text-[14px]">chevron_right</span></li>
                <li class="text-primary font-bold">Historial de pagos</li>
            </ol>
        </nav>
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
            <div>
                <h1 class="text-3xl font-manrope font-bold text-primary tracking-tight">Historial de pagos</h1>
                <p class="text-secondary mt-1">Consulta el registro histórico de pagos realizados a contratistas y su
                    trazabilidad financiera.</p>
            </div>
            <div class="flex flex-wrap gap-3">
                <button
                    class="px-4 py-2 border border-outline-variant text-primary font-semibold rounded-full hover:bg-slate-100 transition-colors flex items-center gap-2 text-sm">
                    <span class="material-symbols-outlined text-[18px]">download</span>
                    Exportar
                </button>
                <button
                    class="px-4 py-2 border border-outline-variant text-primary font-semibold rounded-full hover:bg-slate-100 transition-colors flex items-center gap-2 text-sm">
                    Ver garantías
                </button>
                <button
                    class="px-6 py-2 bg-gradient-to-br from-primary to-primary-container text-white font-bold rounded-full shadow-lg hover:shadow-xl transition-all flex items-center gap-2 text-sm">
                    <span class="material-symbols-outlined text-[18px]">add</span>
                    Registrar pago
                </button>
            </div>
        </div>
    </header>
    <!-- KPI Row -->
    <section class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-4 mb-8">
        <div
            class="bg-surface-container-lowest p-4 rounded-2xl shadow-sm border border-transparent hover:border-primary-fixed transition-all">
            <p class="text-[10px] font-bold text-secondary uppercase tracking-tight mb-1">Total Pagos</p>
            <p class="text-xl font-manrope font-bold text-primary">1,240</p>
        </div>
        <div class="bg-primary text-white p-4 rounded-2xl shadow-md lg:col-span-2">
            <p class="text-[10px] font-bold opacity-70 uppercase tracking-tight mb-1">Monto Total Pagado</p>
            <p class="text-2xl font-manrope font-bold">$24.8M</p>
            <div class="flex items-center gap-1 text-[10px] mt-1 text-emerald-400 font-bold">
                <span class="material-symbols-outlined text-[12px]">trending_up</span> +12% vs m.a.
            </div>
        </div>
        <div class="bg-surface-container-lowest p-4 rounded-2xl shadow-sm border border-transparent">
            <p class="text-[10px] font-bold text-secondary uppercase tracking-tight mb-1">Contratistas</p>
            <p class="text-xl font-manrope font-bold text-primary">48</p>
        </div>
        <div class="bg-surface-container-lowest p-4 rounded-2xl shadow-sm border border-transparent">
            <p class="text-[10px] font-bold text-secondary uppercase tracking-tight mb-1">Contratos</p>
            <p class="text-xl font-manrope font-bold text-primary">124</p>
        </div>
        <div class="bg-surface-container-lowest p-4 rounded-2xl shadow-sm border border-transparent">
            <p class="text-[10px] font-bold text-secondary uppercase tracking-tight mb-1">Promedio</p>
            <p class="text-xl font-manrope font-bold text-primary">$20k</p>
        </div>
        <div class="bg-tertiary-fixed p-4 rounded-2xl shadow-sm border border-transparent">
            <p class="text-[10px] font-bold text-on-tertiary-fixed-variant uppercase tracking-tight mb-1">Retenido</p>
            <p class="text-xl font-manrope font-bold text-on-tertiary-fixed-variant">$1.2M</p>
        </div>
        <div class="bg-surface-container-lowest p-4 rounded-2xl shadow-sm border border-transparent">
            <p class="text-[10px] font-bold text-error uppercase tracking-tight mb-1">Incidencias</p>
            <div class="flex items-baseline gap-1">
                <p class="text-xl font-manrope font-bold text-error">5</p>
                <span class="text-[10px] text-error opacity-60">Críticas</span>
            </div>
        </div>
    </section>
    <!-- Filters Bar -->
    <section class="bg-white p-4 rounded-2xl mb-8 flex flex-wrap items-center gap-4 border border-outline-variant/10">
        <div class="flex-1 min-w-[200px] relative">
            <span
                class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">filter_list</span>
            <input
                class="w-full pl-10 pr-4 py-2 bg-slate-50 border-none rounded-xl text-sm focus:ring-2 focus:ring-primary/20"
                placeholder="Filtrar por folio, contratista o contrato..." type="text" />
        </div>
        <select class="bg-slate-50 border-none rounded-xl text-sm py-2 px-4 focus:ring-2 focus:ring-primary/20">
            <option>Etapa: Todas</option>
            <option>Cimentación</option>
            <option>Estructura</option>
            <option>Acabados</option>
        </select>
        <select class="bg-slate-50 border-none rounded-xl text-sm py-2 px-4 focus:ring-2 focus:ring-primary/20">
            <option>Rango: Último año</option>
            <option>Último mes</option>
            <option>Personalizado</option>
        </select>
        <select class="bg-slate-50 border-none rounded-xl text-sm py-2 px-4 focus:ring-2 focus:ring-primary/20">
            <option>Estatus: Histórico</option>
            <option>Pagado</option>
            <option>Ajustado</option>
            <option>En Disputa</option>
        </select>
        <button class="bg-primary-fixed text-primary px-4 py-2 rounded-xl text-sm font-bold flex items-center gap-2">
            <span class="material-symbols-outlined text-[18px]">tune</span>
            Filtros avanzados
        </button>
    </section>
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
        <!-- Left Column: Financial Summary & Table -->
        <div class="lg:col-span-8 flex flex-col gap-8">
            <!-- Financial Hero Block -->
            <div
                class="bg-gradient-to-br from-primary-container to-slate-900 rounded-3xl p-6 text-white flex flex-col md:flex-row justify-between items-center relative overflow-hidden shadow-xl">
                <div class="z-10">
                    <p class="text-sm font-bold opacity-60 uppercase tracking-widest mb-1">Resumen de Periodo (Mes actual)
                    </p>
                    <h2 class="text-4xl font-manrope font-extrabold mb-2">$1.2M <span
                            class="text-lg font-normal opacity-60">MXN Pagados</span></h2>
                    <div class="flex gap-6 mt-4">
                        <div>
                            <p class="text-[10px] font-bold opacity-40">OPERACIONES</p>
                            <p class="text-lg font-bold">45 pagos realizados</p>
                        </div>
                        <div class="h-10 w-[1px] bg-white/10"></div>
                        <div>
                            <p class="text-[10px] font-bold opacity-40">TENDENCIA</p>
                            <div class="flex items-center gap-2">
                                <p class="text-lg font-bold text-emerald-400">+5.2%</p>
                                <div class="w-16 h-8 flex items-end gap-1">
                                    <div class="w-2 bg-emerald-400/20 h-[40%] rounded-t-sm"></div>
                                    <div class="w-2 bg-emerald-400/40 h-[60%] rounded-t-sm"></div>
                                    <div class="w-2 bg-emerald-400/60 h-[50%] rounded-t-sm"></div>
                                    <div class="w-2 bg-emerald-400 h-[80%] rounded-t-sm"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="hidden md:block absolute right-[-40px] bottom-[-20px] opacity-10">
                    <span class="material-symbols-outlined text-[240px]"
                        style="font-variation-settings: 'FILL' 1;">account_balance_wallet</span>
                </div>
            </div>
            <!-- Main History Ledger -->
            <div class="bg-surface-container-lowest rounded-3xl shadow-sm overflow-hidden">
                <div class="p-6 border-b border-slate-50 flex justify-between items-center">
                    <h3 class="text-lg font-manrope font-bold text-primary">Libro Mayor de Pagos</h3>
                    <span class="text-xs text-slate-400">Mostrando 15 de 1,240 registros</span>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full text-left border-collapse">
                        <thead>
                            <tr class="bg-slate-50/50">
                                <th class="px-6 py-4 text-[10px] font-extrabold text-slate-500 uppercase tracking-widest">
                                    Pago (Folio)</th>
                                <th class="px-6 py-4 text-[10px] font-extrabold text-slate-500 uppercase tracking-widest">
                                    Contratista</th>
                                <th class="px-6 py-4 text-[10px] font-extrabold text-slate-500 uppercase tracking-widest">
                                    Etapa</th>
                                <th class="px-6 py-4 text-[10px] font-extrabold text-slate-500 uppercase tracking-widest">
                                    Bruto</th>
                                <th
                                    class="px-6 py-4 text-[10px] font-extrabold text-slate-500 uppercase tracking-widest text-right">
                                    Neto</th>
                                <th class="px-6 py-4 text-[10px] font-extrabold text-slate-500 uppercase tracking-widest">
                                    Estatus</th>
                                <th class="px-6 py-4"></th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-50">
                            <tr class="hover:bg-slate-50/80 transition-colors group">
                                <td class="px-6 py-4">
                                    <p class="text-sm font-bold text-primary">#P-2024-089</p>
                                    <p class="text-[10px] text-secondary">12 Oct, 2023</p>
                                </td>
                                <td class="px-6 py-4">
                                    <p class="text-sm font-semibold text-primary">Constructora Velázquez S.A.</p>
                                    <p class="text-[10px] text-secondary">CT-2023-014</p>
                                </td>
                                <td class="px-6 py-4">
                                    <span
                                        class="px-2 py-1 bg-surface-container text-primary-container rounded-md text-[10px] font-bold">Cimentación</span>
                                </td>
                                <td class="px-6 py-4 text-sm text-secondary">$145,000</td>
                                <td class="px-6 py-4 text-sm font-bold text-primary text-right">$124,500</td>
                                <td class="px-6 py-4">
                                    <span
                                        class="flex items-center gap-1.5 text-[10px] font-bold text-emerald-600 bg-emerald-50 px-2 py-1 rounded-full w-fit">
                                        <span class="w-1.5 h-1.5 rounded-full bg-emerald-600"></span>
                                        Pagado
                                    </span>
                                </td>
                                <td class="px-6 py-4 text-right">
                                    <button
                                        class="p-2 opacity-0 group-hover:opacity-100 text-slate-400 hover:text-primary transition-all">
                                        <span class="material-symbols-outlined">visibility</span>
                                    </button>
                                </td>
                            </tr>
                            <tr class="hover:bg-slate-50/80 transition-colors group bg-slate-50/20">
                                <td class="px-6 py-4">
                                    <p class="text-sm font-bold text-primary">#P-2024-088</p>
                                    <p class="text-[10px] text-secondary">11 Oct, 2023</p>
                                </td>
                                <td class="px-6 py-4">
                                    <p class="text-sm font-semibold text-primary">Instalaciones Eléctricas Ruiz</p>
                                    <p class="text-[10px] text-secondary">CT-2023-009</p>
                                </td>
                                <td class="px-6 py-4">
                                    <span
                                        class="px-2 py-1 bg-surface-container text-primary-container rounded-md text-[10px] font-bold">Electricidad</span>
                                </td>
                                <td class="px-6 py-4 text-sm text-secondary">$89,200</td>
                                <td class="px-6 py-4 text-sm font-bold text-primary text-right">$87,100</td>
                                <td class="px-6 py-4">
                                    <span
                                        class="flex items-center gap-1.5 text-[10px] font-bold text-amber-600 bg-amber-50 px-2 py-1 rounded-full w-fit">
                                        <span class="w-1.5 h-1.5 rounded-full bg-amber-600"></span>
                                        Ajustado
                                    </span>
                                </td>
                                <td class="px-6 py-4 text-right">
                                    <button
                                        class="p-2 opacity-0 group-hover:opacity-100 text-slate-400 hover:text-primary transition-all">
                                        <span class="material-symbols-outlined">visibility</span>
                                    </button>
                                </td>
                            </tr>
                            <tr class="hover:bg-slate-50/80 transition-colors group">
                                <td class="px-6 py-4">
                                    <p class="text-sm font-bold text-primary">#P-2024-087</p>
                                    <p class="text-[10px] text-secondary">10 Oct, 2023</p>
                                </td>
                                <td class="px-6 py-4">
                                    <p class="text-sm font-semibold text-primary">Herrería y Forja Aranda</p>
                                    <p class="text-[10px] text-secondary">CT-2023-022</p>
                                </td>
                                <td class="px-6 py-4">
                                    <span
                                        class="px-2 py-1 bg-surface-container text-primary-container rounded-md text-[10px] font-bold">Acabados</span>
                                </td>
                                <td class="px-6 py-4 text-sm text-secondary">$42,000</td>
                                <td class="px-6 py-4 text-sm font-bold text-primary text-right">$42,000</td>
                                <td class="px-6 py-4">
                                    <span
                                        class="flex items-center gap-1.5 text-[10px] font-bold text-emerald-600 bg-emerald-50 px-2 py-1 rounded-full w-fit">
                                        <span class="w-1.5 h-1.5 rounded-full bg-emerald-600"></span>
                                        Pagado
                                    </span>
                                </td>
                                <td class="px-6 py-4 text-right">
                                    <button
                                        class="p-2 opacity-0 group-hover:opacity-100 text-slate-400 hover:text-primary transition-all">
                                        <span class="material-symbols-outlined">visibility</span>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="p-6 bg-slate-50/30 flex justify-center border-t border-slate-100">
                    <button class="text-sm font-bold text-primary hover:underline">Cargar más registros</button>
                </div>
            </div>
        </div>
        <!-- Right Column: Detail Panels -->
        <div class="lg:col-span-4 flex flex-col gap-6">
            <!-- Financial Breakdown Panel -->
            <div class="bg-white rounded-3xl p-6 shadow-sm border border-outline-variant/10">
                <h4 class="text-md font-manrope font-bold text-primary mb-4 flex items-center gap-2">
                    <span class="material-symbols-outlined text-[20px] text-primary">receipt_long</span>
                    Desglose de Pago Seleccionado
                </h4>
                <div class="p-4 bg-slate-50 rounded-2xl space-y-3 font-body">
                    <div class="flex justify-between text-sm">
                        <span class="text-secondary">Monto Bruto</span>
                        <span class="font-semibold">$145,000.00</span>
                    </div>
                    <div class="flex justify-between text-sm text-error">
                        <span class="flex items-center gap-1">
                            <span class="material-symbols-outlined text-[14px]">remove_circle</span>
                            Retenciones (5%)
                        </span>
                        <span class="font-semibold">-$7,250.00</span>
                    </div>
                    <div class="flex justify-between text-sm text-error">
                        <span class="flex items-center gap-1">
                            <span class="material-symbols-outlined text-[14px]">remove_circle</span>
                            Fondo de Garantía
                        </span>
                        <span class="font-semibold">-$13,250.00</span>
                    </div>
                    <div class="flex justify-between text-sm text-emerald-600">
                        <span class="flex items-center gap-1">
                            <span class="material-symbols-outlined text-[14px]">add_circle</span>
                            Extras autorizados
                        </span>
                        <span class="font-semibold">+$0.00</span>
                    </div>
                    <div class="pt-3 border-t border-slate-200 mt-2">
                        <div class="flex justify-between items-center">
                            <span class="font-manrope font-bold text-primary">Neto a Pagar</span>
                            <span class="text-xl font-manrope font-extrabold text-primary">$124,500.00</span>
                        </div>
                    </div>
                </div>
                <div class="mt-4 flex gap-2">
                    <button
                        class="flex-1 py-2 text-[11px] font-bold border border-outline-variant rounded-xl text-primary">VER
                        COMPROBANTE</button>
                    <button
                        class="flex-1 py-2 text-[11px] font-bold border border-outline-variant rounded-xl text-primary">DESCARGAR
                        PDF</button>
                </div>
            </div>
            <!-- Temporal Trends Chart -->
            <div class="bg-white rounded-3xl p-6 shadow-sm border border-outline-variant/10">
                <div class="flex justify-between items-center mb-4">
                    <h4 class="text-md font-manrope font-bold text-primary">Flujo de Pagos (6M)</h4>
                    <span class="text-[10px] font-bold text-emerald-500">+18% Tendencia</span>
                </div>
                <div class="h-40 flex items-end justify-between gap-1 px-2">
                    <div class="w-full flex flex-col items-center gap-2">
                        <div class="w-full bg-slate-100 rounded-t-lg h-[40%] group relative">
                            <div
                                class="absolute -top-6 left-1/2 -translate-x-1/2 bg-primary text-white text-[9px] px-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">
                                $2.1M</div>
                        </div>
                        <span class="text-[9px] font-bold text-secondary">MAY</span>
                    </div>
                    <div class="w-full flex flex-col items-center gap-2">
                        <div class="w-full bg-slate-100 rounded-t-lg h-[60%] group relative"></div>
                        <span class="text-[9px] font-bold text-secondary">JUN</span>
                    </div>
                    <div class="w-full flex flex-col items-center gap-2">
                        <div class="w-full bg-slate-100 rounded-t-lg h-[55%] group relative"></div>
                        <span class="text-[9px] font-bold text-secondary">JUL</span>
                    </div>
                    <div class="w-full flex flex-col items-center gap-2">
                        <div class="w-full bg-slate-100 rounded-t-lg h-[80%] group relative"></div>
                        <span class="text-[9px] font-bold text-secondary">AGO</span>
                    </div>
                    <div class="w-full flex flex-col items-center gap-2">
                        <div class="w-full bg-primary-container rounded-t-lg h-[95%] group relative shadow-lg"></div>
                        <span class="text-[9px] font-bold text-primary">SEP</span>
                    </div>
                    <div class="w-full flex flex-col items-center gap-2">
                        <div
                            class="w-full bg-slate-100 rounded-t-lg h-[70%] group relative border-2 border-dashed border-primary/20">
                        </div>
                        <span class="text-[9px] font-bold text-secondary">OCT</span>
                    </div>
                </div>
            </div>
            <!-- Events/Log Panel -->
            <div class="bg-white rounded-3xl p-6 shadow-sm border border-outline-variant/10">
                <h4 class="text-md font-manrope font-bold text-primary mb-4 flex items-center gap-2">
                    <span class="material-symbols-outlined text-[20px] text-amber-500">history</span>
                    Incidencias y Ajustes
                </h4>
                <div class="space-y-4">
                    <div class="flex gap-3">
                        <div class="w-1.5 h-1.5 rounded-full bg-amber-500 mt-1.5 shrink-0"></div>
                        <div>
                            <p class="text-xs font-bold text-primary">Ajuste Manual Aplicado</p>
                            <p class="text-[10px] text-secondary">Folio #P-2024-088. Se descontaron $2,100 por retraso en
                                entrega de materiales específicos.</p>
                            <p class="text-[9px] font-bold text-slate-400 mt-1 uppercase">HACE 2 DÍAS</p>
                        </div>
                    </div>
                    <div class="flex gap-3">
                        <div class="w-1.5 h-1.5 rounded-full bg-emerald-500 mt-1.5 shrink-0"></div>
                        <div>
                            <p class="text-xs font-bold text-primary">Pago Liberado</p>
                            <p class="text-[10px] text-secondary">Folio #P-2024-087. Autorizado por Ing. Carlos Marín tras
                                validación de estimación.</p>
                            <p class="text-[9px] font-bold text-slate-400 mt-1 uppercase">HACE 3 DÍAS</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Historical Comparatives -->
            <div class="bg-white rounded-3xl p-6 shadow-sm border border-outline-variant/10">
                <h4 class="text-md font-manrope font-bold text-primary mb-4">Top Contratistas (Monto)</h4>
                <div class="space-y-4">
                    <div class="space-y-1">
                        <div class="flex justify-between text-[10px] font-bold">
                            <span class="text-primary">VELÁZQUEZ S.A.</span>
                            <span class="text-secondary">$8.4M</span>
                        </div>
                        <div class="w-full bg-slate-100 h-1.5 rounded-full overflow-hidden">
                            <div class="bg-primary h-full w-[85%]"></div>
                        </div>
                    </div>
                    <div class="space-y-1">
                        <div class="flex justify-between text-[10px] font-bold">
                            <span class="text-primary">CONCRETO ÁRTICO</span>
                            <span class="text-secondary">$6.2M</span>
                        </div>
                        <div class="w-full bg-slate-100 h-1.5 rounded-full overflow-hidden">
                            <div class="bg-primary h-full w-[65%]"></div>
                        </div>
                    </div>
                    <div class="space-y-1">
                        <div class="flex justify-between text-[10px] font-bold">
                            <span class="text-primary">MAQUINARIA SUR</span>
                            <span class="text-secondary">$3.9M</span>
                        </div>
                        <div class="w-full bg-slate-100 h-1.5 rounded-full overflow-hidden">
                            <div class="bg-primary h-full w-[40%]"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection