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

@section('main-content')
    <!-- Content Canvas -->

    <!-- Breadcrumb & Header -->
    <div class="mb-8">
        <nav class="flex text-[10px] uppercase tracking-widest font-bold text-slate-400 gap-2 mb-2">
            <span>Dashboard</span>
            <span class="material-symbols-outlined text-[12px]" data-icon="chevron_right">chevron_right</span>
            <span>Destajos</span>
            <span class="material-symbols-outlined text-[12px]" data-icon="chevron_right">chevron_right</span>
            <span>Contratos</span>
            <span class="material-symbols-outlined text-[12px]" data-icon="chevron_right">chevron_right</span>
            <span>CT-2023-084</span>
            <span class="material-symbols-outlined text-[12px]" data-icon="chevron_right">chevron_right</span>
            <span class="text-primary">Conceptos</span>
        </nav>
        <div class="flex flex-col md:flex-row md:items-end justify-between gap-6">
            <div>
                <h2 class="text-3xl font-headline font-bold text-primary tracking-tight">Conceptos / partidas del
                    contrato</h2>
                <p class="text-slate-500 mt-1">Consulta el desglose de actividades, montos y comportamiento por partida
                    de este contrato</p>
            </div>
            <div class="flex gap-3">
                <button
                    class="bg-surface-container-lowest border border-outline-variant/30 px-4 py-2 rounded-xl text-xs font-semibold flex items-center gap-2 hover:bg-slate-50 transition-colors shadow-sm">
                    <span class="material-symbols-outlined text-sm" data-icon="download">download</span> Exportar
                </button>
                <button
                    class="bg-primary text-white px-5 py-2 rounded-xl text-xs font-semibold flex items-center gap-2 shadow-lg shadow-primary/20 hover:scale-[1.02] active:scale-95 transition-all">
                    <span class="material-symbols-outlined text-sm" data-icon="add">add</span> Nueva Partida
                </button>
            </div>
        </div>
    </div>
    <!-- Context Info Bar -->
    <div
        class="grid grid-cols-1 lg:grid-cols-4 gap-4 mb-8 bg-primary text-white p-6 rounded-2xl shadow-xl overflow-hidden relative">
        <div class="absolute top-0 right-0 w-64 h-64 bg-white/5 rounded-full -mr-20 -mt-20 blur-3xl"></div>
        <div class="relative z-10 border-r border-white/10 pr-4">
            <p class="text-[10px] uppercase font-bold text-blue-200/60 mb-1">Folio Contrato</p>
            <p class="text-lg font-headline font-bold">CT-2023-084</p>
        </div>
        <div class="relative z-10 border-r border-white/10 pr-4">
            <p class="text-[10px] uppercase font-bold text-blue-200/60 mb-1">Contratista</p>
            <p class="text-lg font-headline font-bold truncate">Servicios Cimentación SA</p>
        </div>
        <div class="relative z-10 border-r border-white/10 pr-4">
            <p class="text-[10px] uppercase font-bold text-blue-200/60 mb-1">Proyecto / Etapa</p>
            <p class="text-lg font-headline font-bold">Residencial Altavista</p>
        </div>
        <div class="relative z-10">
            <p class="text-[10px] uppercase font-bold text-blue-200/60 mb-1">Monto Total Contratado</p>
            <p class="text-lg font-headline font-bold text-emerald-400">$425,000.00</p>
        </div>
    </div>
    <!-- KPI Grid -->
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-10">
        <div class="bg-surface-container-lowest p-5 rounded-2xl shadow-sm border border-slate-50">
            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-2">Total Conceptos</p>
            <p class="text-2xl font-headline font-bold text-primary">12</p>
        </div>
        <div class="bg-surface-container-lowest p-5 rounded-2xl shadow-sm border border-slate-50">
            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-2">Monto Total</p>
            <p class="text-2xl font-headline font-bold text-primary">$425k</p>
        </div>
        <div class="bg-surface-container-lowest p-5 rounded-2xl shadow-sm border border-slate-50">
            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-2">Generado</p>
            <p class="text-2xl font-headline font-bold text-primary">$361k</p>
            <div class="w-full bg-slate-100 h-1.5 rounded-full mt-3 overflow-hidden">
                <div class="bg-primary h-full w-[85%]"></div>
            </div>
        </div>
        <div class="bg-surface-container-lowest p-5 rounded-2xl shadow-sm border border-slate-50">
            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-2">Aprobado</p>
            <p class="text-2xl font-headline font-bold text-emerald-600">$340k</p>
            <p class="text-[10px] text-slate-400 mt-2">80% del total</p>
        </div>
        <div class="bg-surface-container-lowest p-5 rounded-2xl shadow-sm border border-slate-50">
            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-2">Pagado</p>
            <p class="text-2xl font-headline font-bold text-blue-600">$320k</p>
            <p class="text-[10px] text-slate-400 mt-2">75% del total</p>
        </div>
        <div class="bg-surface-container-lowest p-5 rounded-2xl shadow-sm border border-slate-50">
            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-2">Pendiente</p>
            <p class="text-2xl font-headline font-bold text-error">$105k</p>
            <div class="w-full bg-error/10 h-1.5 rounded-full mt-3 overflow-hidden">
                <div class="bg-error h-full w-[24.7%]"></div>
            </div>
        </div>
    </div>
    <!-- Dashboard Layout -->
    <div class="grid grid-cols-12 gap-8">
        <!-- Main Table Section -->
        <div class="col-span-12 xl:col-span-9 space-y-6">
            <!-- Filters & Search -->
            <div
                class="bg-surface-container-lowest p-4 rounded-2xl flex flex-wrap items-center justify-between gap-4 shadow-sm">
                <div class="flex gap-2">
                    <select
                        class="text-xs border-none bg-surface-container-low rounded-xl px-4 focus:ring-1 focus:ring-primary">
                        <option>Todos los Estatus</option>
                        <option>En Ejecución</option>
                        <option>Completado</option>
                        <option>Alerta</option>
                    </select>
                    <button
                        class="bg-error/10 text-error px-4 py-2 rounded-xl text-xs font-bold flex items-center gap-2 hover:bg-error/20 transition-colors">
                        <span class="material-symbols-outlined text-[16px]" data-icon="warning">warning</span> Partidas
                        con Alerta
                    </button>
                    <button
                        class="bg-tertiary-fixed/40 text-tertiary-container px-4 py-2 rounded-xl text-xs font-bold flex items-center gap-2 hover:bg-tertiary-fixed/60 transition-colors">
                        <span class="material-symbols-outlined text-[16px]" data-icon="difference">difference</span>
                        Diferencias
                    </button>
                </div>
                <div class="flex items-center gap-2">
                    <span class="text-[10px] text-slate-400 font-bold uppercase">Ordenar por:</span>
                    <select class="text-xs border-none bg-transparent font-semibold focus:ring-0 cursor-pointer">
                        <option>Monto (Mayor)</option>
                        <option>Ejecución (%)</option>
                        <option>Alfabetico</option>
                    </select>
                </div>
            </div>
            <!-- Concepts Table -->
            <div class="bg-surface-container-lowest rounded-3xl shadow-sm overflow-hidden border border-slate-50">
                <div class="overflow-x-auto custom-scrollbar">
                    <table class="w-full text-left border-collapse">
                        <thead>
                            <tr class="bg-surface-container-low/50">
                                <th class="px-6 py-4 text-[10px] font-bold text-slate-500 uppercase tracking-widest">
                                    Concepto</th>
                                <th
                                    class="px-6 py-4 text-[10px] font-bold text-slate-500 uppercase tracking-widest text-right">
                                    Contratado</th>
                                <th
                                    class="px-6 py-4 text-[10px] font-bold text-slate-500 uppercase tracking-widest text-right">
                                    Generado</th>
                                <th
                                    class="px-6 py-4 text-[10px] font-bold text-slate-500 uppercase tracking-widest text-right">
                                    Pendiente</th>
                                <th class="px-6 py-4 text-[10px] font-bold text-slate-500 uppercase tracking-widest">
                                    Progreso</th>
                                <th class="px-6 py-4 text-[10px] font-bold text-slate-500 uppercase tracking-widest">
                                    Estatus</th>
                                <th class="px-6 py-4 text-[10px] font-bold text-slate-500 uppercase tracking-widest">
                                </th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            <!-- Row 1 -->
                            <tr class="hover:bg-slate-50 transition-colors">
                                <td class="px-6 py-5">
                                    <p class="text-sm font-semibold text-primary">Excavación masiva</p>
                                    <p class="text-[10px] text-slate-400">Terracerías / Preliminares</p>
                                </td>
                                <td class="px-6 py-5 text-right font-semibold text-sm">$185,000</td>
                                <td class="px-6 py-5 text-right font-semibold text-sm text-primary">$170,000</td>
                                <td class="px-6 py-5 text-right font-semibold text-sm text-error">$15,000</td>
                                <td class="px-6 py-5 w-48">
                                    <div class="flex items-center gap-3">
                                        <div class="flex-1 bg-slate-100 h-2 rounded-full overflow-hidden">
                                            <div class="bg-emerald-500 h-full w-[91%]"></div>
                                        </div>
                                        <span class="text-[10px] font-bold text-slate-600">91%</span>
                                    </div>
                                </td>
                                <td class="px-6 py-5">
                                    <span
                                        class="px-2 py-1 rounded-md text-[10px] font-bold bg-emerald-100 text-emerald-700 uppercase tracking-tighter">Completado</span>
                                </td>
                                <td class="px-6 py-5 text-right">
                                    <button class="p-2 hover:bg-slate-200 rounded-lg transition-colors">
                                        <span class="material-symbols-outlined text-slate-400 text-lg"
                                            data-icon="more_vert">more_vert</span>
                                    </button>
                                </td>
                            </tr>
                            <!-- Row 2 -->
                            <tr class="hover:bg-slate-50 transition-colors">
                                <td class="px-6 py-5">
                                    <p class="text-sm font-semibold text-primary">Plantilla de concreto</p>
                                    <p class="text-[10px] text-slate-400">Cimentación / Concretos</p>
                                </td>
                                <td class="px-6 py-5 text-right font-semibold text-sm">$45,000</td>
                                <td class="px-6 py-5 text-right font-semibold text-sm text-primary">$32,000</td>
                                <td class="px-6 py-5 text-right font-semibold text-sm text-error">$13,000</td>
                                <td class="px-6 py-5 w-48">
                                    <div class="flex items-center gap-3">
                                        <div class="flex-1 bg-slate-100 h-2 rounded-full overflow-hidden">
                                            <div class="bg-amber-400 h-full w-[71%]"></div>
                                        </div>
                                        <span class="text-[10px] font-bold text-slate-600">71%</span>
                                    </div>
                                </td>
                                <td class="px-6 py-5">
                                    <span
                                        class="px-2 py-1 rounded-md text-[10px] font-bold bg-amber-100 text-amber-700 uppercase tracking-tighter">En
                                        Proceso</span>
                                </td>
                                <td class="px-6 py-5 text-right">
                                    <button class="p-2 hover:bg-slate-200 rounded-lg transition-colors">
                                        <span class="material-symbols-outlined text-slate-400 text-lg"
                                            data-icon="more_vert">more_vert</span>
                                    </button>
                                </td>
                            </tr>
                            <!-- Row 3 with alert -->
                            <tr class="hover:bg-slate-50 transition-colors bg-red-50/20">
                                <td class="px-6 py-5">
                                    <div class="flex items-center gap-2">
                                        <p class="text-sm font-semibold text-primary">Armado de acero</p>
                                        <span class="material-symbols-outlined text-error text-[16px]" data-icon="error"
                                            style="font-variation-settings: 'FILL' 1;">error</span>
                                    </div>
                                    <p class="text-[10px] text-slate-400">Estructura / Acero</p>
                                </td>
                                <td class="px-6 py-5 text-right font-semibold text-sm">$120,000</td>
                                <td class="px-6 py-5 text-right font-semibold text-sm text-primary">$135,000</td>
                                <td class="px-6 py-5 text-right font-semibold text-sm text-error">-$15,000</td>
                                <td class="px-6 py-5 w-48">
                                    <div class="flex items-center gap-3">
                                        <div class="flex-1 bg-slate-100 h-2 rounded-full overflow-hidden">
                                            <div class="bg-error h-full w-[100%]"></div>
                                        </div>
                                        <span class="text-[10px] font-bold text-error">112%</span>
                                    </div>
                                </td>
                                <td class="px-6 py-5">
                                    <span
                                        class="px-2 py-1 rounded-md text-[10px] font-bold bg-error/10 text-error uppercase tracking-tighter">Excedido</span>
                                </td>
                                <td class="px-6 py-5 text-right">
                                    <button class="p-2 hover:bg-slate-200 rounded-lg transition-colors">
                                        <span class="material-symbols-outlined text-slate-400 text-lg"
                                            data-icon="more_vert">more_vert</span>
                                    </button>
                                </td>
                            </tr>
                            <!-- Row 4 -->
                            <tr class="hover:bg-slate-50 transition-colors">
                                <td class="px-6 py-5">
                                    <p class="text-sm font-semibold text-primary">Relleno compactado</p>
                                    <p class="text-[10px] text-slate-400">Terracerías / Movimiento</p>
                                </td>
                                <td class="px-6 py-5 text-right font-semibold text-sm">$75,000</td>
                                <td class="px-6 py-5 text-right font-semibold text-sm text-primary">$24,000</td>
                                <td class="px-6 py-5 text-right font-semibold text-sm text-slate-400">$51,000</td>
                                <td class="px-6 py-5 w-48">
                                    <div class="flex items-center gap-3">
                                        <div class="flex-1 bg-slate-100 h-2 rounded-full overflow-hidden">
                                            <div class="bg-primary-container h-full w-[32%]"></div>
                                        </div>
                                        <span class="text-[10px] font-bold text-slate-600">32%</span>
                                    </div>
                                </td>
                                <td class="px-6 py-5">
                                    <span
                                        class="px-2 py-1 rounded-md text-[10px] font-bold bg-slate-100 text-slate-500 uppercase tracking-tighter">Iniciando</span>
                                </td>
                                <td class="px-6 py-5 text-right">
                                    <button class="p-2 hover:bg-slate-200 rounded-lg transition-colors">
                                        <span class="material-symbols-outlined text-slate-400 text-lg"
                                            data-icon="more_vert">more_vert</span>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="p-4 bg-slate-50 flex items-center justify-between border-t border-slate-100">
                    <p class="text-xs text-slate-500">Mostrando 4 de 12 conceptos</p>
                    <div class="flex gap-2">
                        <button
                            class="w-8 h-8 rounded-lg flex items-center justify-center hover:bg-slate-200 text-slate-400"><span
                                class="material-symbols-outlined text-sm"
                                data-icon="chevron_left">chevron_left</span></button>
                        <button
                            class="w-8 h-8 rounded-lg bg-primary text-white flex items-center justify-center text-[10px] font-bold">1</button>
                        <button
                            class="w-8 h-8 rounded-lg flex items-center justify-center hover:bg-slate-200 text-slate-500 text-[10px] font-bold">2</button>
                        <button
                            class="w-8 h-8 rounded-lg flex items-center justify-center hover:bg-slate-200 text-slate-500 text-[10px] font-bold">3</button>
                        <button
                            class="w-8 h-8 rounded-lg flex items-center justify-center hover:bg-slate-200 text-slate-400"><span
                                class="material-symbols-outlined text-sm"
                                data-icon="chevron_right">chevron_right</span></button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Sidebar Sections -->
        <div class="col-span-12 xl:col-span-3 space-y-6">
            <!-- Diferencias y Alertas -->
            <div class="bg-surface-container-lowest rounded-3xl shadow-sm border border-slate-50 overflow-hidden">
                <div class="p-5 border-b border-slate-50 flex items-center justify-between">
                    <h3 class="text-sm font-headline font-bold text-primary flex items-center gap-2">
                        <span class="material-symbols-outlined text-error text-sm"
                            data-icon="notification_important">notification_important</span>
                        Diferencias y Alertas
                    </h3>
                    <span class="bg-error text-white text-[9px] font-bold px-1.5 py-0.5 rounded-full">2</span>
                </div>
                <div class="p-5 space-y-4">
                    <div class="p-3 bg-red-50 rounded-2xl border border-red-100/50">
                        <div class="flex justify-between items-start mb-1">
                            <p class="text-[11px] font-bold text-error uppercase tracking-tight">Sobregiro detectado
                            </p>
                            <span class="text-[9px] text-red-400 font-bold">Crítico</span>
                        </div>
                        <p class="text-xs font-semibold text-primary mb-2">Armado de acero excedió el 112% del volumen
                            contratado.</p>
                        <button class="text-[10px] font-bold text-error flex items-center gap-1 hover:underline">
                            Verificar volúmenes <span class="material-symbols-outlined text-[12px]"
                                data-icon="arrow_right_alt">arrow_right_alt</span>
                        </button>
                    </div>
                    <div class="p-3 bg-amber-50 rounded-2xl border border-amber-100/50">
                        <div class="flex justify-between items-start mb-1">
                            <p class="text-[11px] font-bold text-amber-700 uppercase tracking-tight">Revisión pendiente
                            </p>
                            <span class="text-[9px] text-amber-500 font-bold">Pendiente</span>
                        </div>
                        <p class="text-xs font-semibold text-primary mb-2">Plantilla de concreto tiene 3 generadores
                            sin aprobar por supervisión.</p>
                        <button class="text-[10px] font-bold text-amber-700 flex items-center gap-1 hover:underline">
                            Ir a aprobación <span class="material-symbols-outlined text-[12px]"
                                data-icon="arrow_right_alt">arrow_right_alt</span>
                        </button>
                    </div>
                </div>
            </div>
            <!-- Resumen por Comportamiento -->
            <div class="bg-surface-container-lowest rounded-3xl shadow-sm border border-slate-50 overflow-hidden">
                <div class="p-5 border-b border-slate-50">
                    <h3 class="text-sm font-headline font-bold text-primary">Comportamiento por Costo</h3>
                </div>
                <div class="p-5 space-y-5">
                    <div>
                        <div class="flex justify-between text-[11px] mb-2">
                            <span class="font-semibold text-slate-500">Excavación masiva</span>
                            <span class="font-bold text-primary">$185k (43%)</span>
                        </div>
                        <div class="w-full bg-slate-100 h-2 rounded-full overflow-hidden">
                            <div class="bg-primary h-full w-[43%]"></div>
                        </div>
                    </div>
                    <div>
                        <div class="flex justify-between text-[11px] mb-2">
                            <span class="font-semibold text-slate-500">Armado de acero</span>
                            <span class="font-bold text-primary">$120k (28%)</span>
                        </div>
                        <div class="w-full bg-slate-100 h-2 rounded-full overflow-hidden">
                            <div class="bg-primary/70 h-full w-[28%]"></div>
                        </div>
                    </div>
                    <div>
                        <div class="flex justify-between text-[11px] mb-2">
                            <span class="font-semibold text-slate-500">Relleno compactado</span>
                            <span class="font-bold text-primary">$75k (17%)</span>
                        </div>
                        <div class="w-full bg-slate-100 h-2 rounded-full overflow-hidden">
                            <div class="bg-primary/40 h-full w-[17%]"></div>
                        </div>
                    </div>
                    <div>
                        <div class="flex justify-between text-[11px] mb-2">
                            <span class="font-semibold text-slate-500">Otros conceptos</span>
                            <span class="font-bold text-primary">$45k (12%)</span>
                        </div>
                        <div class="w-full bg-slate-100 h-2 rounded-full overflow-hidden">
                            <div class="bg-slate-200 h-full w-[12%]"></div>
                        </div>
                    </div>
                    <div class="pt-4 border-t border-slate-50 mt-4">
                        <img class="w-full h-32 object-cover rounded-xl grayscale opacity-30 hover:opacity-100 transition-opacity"
                            data-alt="a professional architectural dashboard chart showing financial distribution across different construction stages using navy and emerald colors with soft shadows"
                            src="https://lh3.googleusercontent.com/aida-public/AB6AXuDecOallNe9_U0EmBqAjzaJTB_Nlet83aZ7UaqZR0zEuIA_lDH8HNC6Ebw9zSDTSx9IfciJFAZBU7qzs5Zv0NMJ2JB9Lu4tZeh1RMZQKUBWRampPnK1i1EcSJD982OmeAk9Yi59ZugYZI5gq-HOkreAnnTQKRGSnBmV2ZEQtrcBTHd-895xuCGQf4G34Kc_00KQUykPLjFmuX1rUUizpHuLleOktzk6zVa8FoeDNOgNf3cyunCdzBz0bSJYBuX8XwWANnhacrfE3Gu3" />
                    </div>
                </div>
            </div>
            <!-- Contract Health -->
            <div class="bg-primary p-6 rounded-3xl shadow-xl text-white">
                <p class="text-[10px] font-bold uppercase tracking-widest text-blue-200/50 mb-4">Salud del Contrato</p>
                <div class="flex items-end gap-2 mb-4">
                    <span class="text-4xl font-headline font-bold">84%</span>
                    <span class="text-xs text-emerald-400 mb-1 flex items-center"><span
                            class="material-symbols-outlined text-[14px]" data-icon="trending_up">trending_up</span>
                        +2.4%</span>
                </div>
                <p class="text-[11px] text-slate-300 leading-relaxed mb-6">El avance financiero se mantiene un 5% por
                    encima del programado. Se recomienda revisar el sobregiro en acero.</p>
                <button
                    class="w-full bg-white/10 hover:bg-white/20 py-3 rounded-xl text-xs font-bold transition-colors">Generar
                    Reporte Ejecutivo</button>
            </div>
        </div>
    </div>
@endsection