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

@section('header-content')
    <header
        class="fixed top-0 right-0 left-0 z-40 bg-white/80 dark:bg-slate-900/80 backdrop-blur-md flex justify-between items-center h-16 px-8 ml-64 border-b border-slate-200/50 shadow-sm">
        <div class="flex flex-col">
            <nav class="flex items-center gap-2 text-[0.6875rem] text-slate-500 font-medium">
                <span>Dashboard</span>
                <span class="material-symbols-outlined text-[10px]" data-icon="chevron_right">chevron_right</span>
                <span>Destajos</span>

            </nav>
        </div>

    </header>
@endsection


@section('main-content')
    <!-- Header Section -->
    <div class="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-5">
        <div class="space-y-1">
            <div class="flex items-center space-x-3">
                <h1 class="text-3xl font-extrabold font-headline text-primary tracking-tight">Detalle de contrato de
                    destajo</h1>
                <span
                    class="px-3 py-1 bg-primary-fixed text-primary text-xs font-bold rounded-full border border-primary/10 uppercase tracking-widest">En
                    ejecución</span>
            </div>
            <p class="text-on-secondary-container font-medium max-w-2xl">Consulta el estado financiero, operativo y
                documental de este contrato.</p>
        </div>
        <div class="flex flex-wrap gap-2">
            <button
                class="px-4 py-2.5 text-sm font-semibold text-primary hover:bg-surface-container-high rounded-xl transition-all duration-200 border border-outline-variant/30">Editar
                contrato</button>
            <button
                class="px-5 py-2.5 text-sm font-bold bg-gradient-to-br from-primary to-primary-container text-on-primary rounded-xl shadow-lg hover:opacity-90 transition-all flex items-center">
                <span class="material-symbols-outlined text-sm mr-2" style="font-variation-settings: 'FILL' 1;">add</span>
                Nueva revisión
            </button>
        </div>
    </div>
    <!-- Bento Grid Layout -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
        <!-- Hero Card (Span 8) -->
        <div
            class="lg:col-span-8 bg-surface-container-lowest rounded-xl shadow-[0_12px_40px_rgba(5,29,48,0.06)] overflow-hidden">
            <div
                class="p-6 border-b border-outline-variant/10 flex justify-between items-center bg-gradient-to-r from-surface-container-low to-transparent">
                <div class="flex items-center space-x-3">
                    <span
                        class="material-symbols-outlined text-primary-fixed-dim bg-primary p-2 rounded-lg">description</span>
                    <span class="text-sm font-bold text-primary">Código CT-2023-084</span>
                </div>
                <div class="text-right">
                    <span
                        class="text-[10px] text-on-surface-variant font-bold uppercase tracking-wider block">Responsable</span>
                    <span class="text-sm font-semibold text-primary">Ing. Roberto Martínez</span>
                </div>
            </div>
            <div class="p-8 grid grid-cols-1 md:grid-cols-2 gap-8">
                <div class="space-y-6">
                    <div>
                        <label
                            class="text-[10px] font-bold text-on-surface-variant uppercase tracking-widest block mb-1">Paquete
                            de obra</label>
                        <p class="text-lg font-bold text-primary">Excavación Masiva Lote B</p>
                    </div>
                    <div class="flex items-center gap-4">
                        <div class="w-12 h-12 rounded-xl bg-surface-container overflow-hidden">
                            <img class="w-full h-full object-cover"
                                data-alt="professional contractor company logo icon with blue and white minimalist geometric shapes"
                                src="https://lh3.googleusercontent.com/aida-public/AB6AXuByNuGJGNN76bATB3jPVOvCL-g5j4k0iMN8Fbb9PumdA8TiO-7cJjq8E-PhFRf1bepswXydAYu06HL9jIucBJclDu2ifDzNpbJ0FW_Qvihv7oXBqDbO4haKHJOALP2h_xXgmA5BKelqEm6N5kg7G57zpYmXZ043GEwr5p0BLXt19XWAtIv3vPyyoh3smEjT0gOJkbDnKydSeNcPMBA9B6LCoWzcbvcD4I-yMNmijsti12ThPUkI71Uk0GzgoduFzipafC2T8t_0-ZTg" />
                        </div>
                        <div>
                            <label
                                class="text-[10px] font-bold text-on-surface-variant uppercase tracking-widest block">Contratista</label>
                            <p class="text-sm font-bold text-primary">Servicios Cimentación SA</p>
                            <a class="text-xs font-semibold text-secondary flex items-center hover:underline"
                                href="#">Ver contratista <span
                                    class="material-symbols-outlined text-xs ml-1">open_in_new</span></a>
                        </div>
                    </div>
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <div class="p-4 bg-surface-container-low rounded-xl">
                        <label
                            class="text-[10px] font-bold text-on-surface-variant uppercase tracking-widest block mb-1">Etapa</label>
                        <p class="text-xs font-bold text-primary">Residencial Altavista - Fase 1</p>
                    </div>
                    <div class="p-4 bg-surface-container-low rounded-xl">
                        <label
                            class="text-[10px] font-bold text-on-surface-variant uppercase tracking-widest block mb-1">Especialidad</label>
                        <p class="text-xs font-bold text-primary">Cimentación</p>
                    </div>
                    <div class="p-4 bg-surface-container-low rounded-xl">
                        <label
                            class="text-[10px] font-bold text-on-surface-variant uppercase tracking-widest block mb-1">Inicio</label>
                        <p class="text-xs font-bold text-primary">12 Oct 2023</p>
                    </div>
                    <div class="p-4 bg-surface-container-low rounded-xl">
                        <label
                            class="text-[10px] font-bold text-on-surface-variant uppercase tracking-widest block mb-1">Fin
                            Estimado</label>
                        <p class="text-xs font-bold text-primary text-secondary">15 Dec 2023</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- Financial KPIs (Span 4) -->
        <div class="lg:col-span-4 space-y-4">
            <div class="bg-primary p-6 rounded-xl shadow-lg relative overflow-hidden group">
                <div class="absolute -right-4 -bottom-4 opacity-10 group-hover:scale-110 transition-transform duration-500">
                    <span class="material-symbols-outlined text-[120px]">account_balance_wallet</span>
                </div>
                <label class="text-[10px] font-bold text-primary-fixed-dim uppercase tracking-widest block mb-1">Monto
                    Contratado Total</label>
                <p class="text-4xl font-extrabold text-on-primary font-headline">$425,000</p>
                <div class="mt-4 h-1.5 w-full bg-white/20 rounded-full overflow-hidden">
                    <div class="h-full bg-primary-fixed-dim rounded-full" style="width: 85%"></div>
                </div>
                <p class="mt-2 text-[10px] font-medium text-primary-fixed-dim">85% Ejecutado financieramente</p>
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div class="bg-surface-container-lowest p-4 rounded-xl shadow-sm border border-outline-variant/5">
                    <label
                        class="text-[9px] font-bold text-on-surface-variant uppercase tracking-widest block mb-1">Pagado</label>
                    <p class="text-lg font-bold text-primary">$320,000</p>
                </div>
                <div class="bg-surface-container-lowest p-4 rounded-xl shadow-sm border border-outline-variant/5">
                    <label class="text-[9px] font-bold text-error uppercase tracking-widest block mb-1">Pendiente</label>
                    <p class="text-lg font-bold text-error">$105,000</p>
                </div>
                <div class="bg-surface-container-lowest p-4 rounded-xl shadow-sm border border-outline-variant/5">
                    <label
                        class="text-[9px] font-bold text-on-surface-variant uppercase tracking-widest block mb-1">Retenido</label>
                    <p class="text-lg font-bold text-secondary">$21,250</p>
                </div>
                <div class="bg-surface-container-lowest p-4 rounded-xl shadow-sm border border-outline-variant/5">
                    <label
                        class="text-[9px] font-bold text-on-surface-variant uppercase tracking-widest block mb-1">Extras</label>
                    <p class="text-lg font-bold text-primary">$5,000</p>
                </div>
            </div>
        </div>
        <!-- Financial Progress Chart Placeholder (Span 8) -->
        <div class="lg:col-span-8 bg-surface-container-lowest rounded-xl p-8 shadow-[0_12px_40px_rgba(5,29,48,0.06)]">
            <div class="flex items-center justify-between mb-8">
                <h3 class="text-lg font-bold text-primary">Progreso de Contrato</h3>
                <div class="flex items-center space-x-4">
                    <div class="flex items-center text-[10px] font-bold text-on-surface-variant uppercase tracking-widest">
                        <span class="w-3 h-3 bg-primary rounded-sm mr-2"></span> Contratado
                    </div>
                    <div class="flex items-center text-[10px] font-bold text-on-surface-variant uppercase tracking-widest">
                        <span class="w-3 h-3 bg-secondary rounded-sm mr-2"></span> Generado
                    </div>
                    <div class="flex items-center text-[10px] font-bold text-on-surface-variant uppercase tracking-widest">
                        <span class="w-3 h-3 bg-primary-fixed rounded-sm mr-2"></span> Pagado
                    </div>
                </div>
            </div>
            <div class="space-y-10 py-4">
                <div class="relative pt-1">
                    <div class="flex mb-2 items-center justify-between">
                        <div><span class="text-[10px] font-bold inline-block text-primary uppercase">Monto Generado
                                ($361,250)</span></div>
                        <div class="text-right"><span class="text-xs font-bold inline-block text-primary">85%</span>
                        </div>
                    </div>
                    <div class="overflow-hidden h-3 mb-4 text-xs flex rounded-full bg-surface-container-low">
                        <div class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-primary transition-all duration-500"
                            style="width:85%"></div>
                    </div>
                </div>
                <div class="relative pt-1">
                    <div class="flex mb-2 items-center justify-between">
                        <div><span class="text-[10px] font-bold inline-block text-secondary uppercase">Monto Aprobado
                                ($340,000)</span></div>
                        <div class="text-right"><span class="text-xs font-bold inline-block text-secondary">80%</span>
                        </div>
                    </div>
                    <div class="overflow-hidden h-3 mb-4 text-xs flex rounded-full bg-surface-container-low">
                        <div class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-secondary transition-all duration-500"
                            style="width:80%"></div>
                    </div>
                </div>
                <div class="relative pt-1">
                    <div class="flex mb-2 items-center justify-between">
                        <div><span class="text-[10px] font-bold inline-block text-primary-container uppercase">Monto
                                Pagado ($320,000)</span></div>
                        <div class="text-right"><span
                                class="text-xs font-bold inline-block text-primary-container">75%</span></div>
                    </div>
                    <div class="overflow-hidden h-3 mb-4 text-xs flex rounded-full bg-surface-container-low">
                        <div class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-primary-fixed-dim transition-all duration-500"
                            style="width:75%"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Retentions & Side Info (Span 4) -->
        <div class="lg:col-span-4 space-y-6">
            <div class="bg-tertiary-fixed p-6 rounded-xl border border-on-tertiary-fixed/5">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-sm font-bold text-on-tertiary-fixed uppercase tracking-wider">Retenciones y
                        Garantías</h3>
                    <span class="material-symbols-outlined text-on-tertiary-fixed-variant">verified_user</span>
                </div>
                <div class="space-y-4">
                    <div class="flex justify-between items-end">
                        <div>
                            <p class="text-2xl font-extrabold text-on-tertiary-fixed">$21,250</p>
                            <p class="text-[10px] font-bold text-on-tertiary-fixed-variant uppercase">Fondo de Garantía
                                (5%)</p>
                        </div>
                        <div class="text-right">
                            <p class="text-sm font-bold text-on-tertiary-fixed">Balance: $21,250</p>
                            <p class="text-[10px] font-medium text-on-tertiary-fixed-variant">Cero descuentos</p>
                        </div>
                    </div>
                    <button
                        class="w-full py-2 bg-on-tertiary-fixed/10 hover:bg-on-tertiary-fixed/20 border border-on-tertiary-fixed/20 rounded-lg text-xs font-bold text-on-tertiary-fixed transition-colors">Ver
                        Detalles de Retención</button>
                </div>
            </div>
            <div class="bg-surface-container-low p-6 rounded-xl border border-outline-variant/10">
                <h3 class="text-sm font-bold text-primary uppercase tracking-wider mb-4">Acciones Rápidas</h3>
                <div class="grid grid-cols-1 gap-2">
                    <a class="flex items-center justify-between p-3 bg-white hover:bg-primary hover:text-white rounded-xl transition-all group"
                        href="#">
                        <span class="text-xs font-bold uppercase tracking-tight">Ver Contratista</span>
                        <span class="material-symbols-outlined text-sm">chevron_right</span>
                    </a>
                    <a class="flex items-center justify-between p-3 bg-white hover:bg-primary hover:text-white rounded-xl transition-all group"
                        href="#">
                        <span class="text-xs font-bold uppercase tracking-tight">Ver Revisiones</span>
                        <span class="material-symbols-outlined text-sm">chevron_right</span>
                    </a>
                    <a class="flex items-center justify-between p-3 bg-white hover:bg-primary hover:text-white rounded-xl transition-all group"
                        href="#">
                        <span class="text-xs font-bold uppercase tracking-tight">Historial de Pagos</span>
                        <span class="material-symbols-outlined text-sm">chevron_right</span>
                    </a>
                    <a class="flex items-center justify-between p-3 bg-white hover:bg-primary hover:text-white rounded-xl transition-all group"
                        href="{{ route('pieceworks.concepts', ['id' => 1]) }}">
                        <span class="text-xs font-bold uppercase tracking-tight">Conceptos</span>
                        <span class="material-symbols-outlined text-sm">chevron_right</span>
                    </a>
                </div>
            </div>
        </div>
        <!-- Reviews Table (Span 8) -->
        <div
            class="lg:col-span-8 bg-surface-container-lowest rounded-xl shadow-[0_12px_40px_rgba(5,29,48,0.06)] overflow-hidden">
            <div class="p-6 border-b border-outline-variant/10 flex justify-between items-center">
                <h3 class="text-lg font-bold text-primary">Revisiones y Estimaciones</h3>
                <button class="text-sm font-bold text-secondary hover:text-primary transition-colors">Descargar
                    Reporte</button>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-left">
                    <thead class="bg-surface-container-low">
                        <tr>
                            <th class="px-6 py-4 text-[10px] font-bold text-on-surface-variant uppercase tracking-widest">
                                Folio</th>
                            <th class="px-6 py-4 text-[10px] font-bold text-on-surface-variant uppercase tracking-widest">
                                Periodo</th>
                            <th class="px-6 py-4 text-[10px] font-bold text-on-surface-variant uppercase tracking-widest">
                                Generado</th>
                            <th class="px-6 py-4 text-[10px] font-bold text-on-surface-variant uppercase tracking-widest">
                                Aprobado</th>
                            <th class="px-6 py-4 text-[10px] font-bold text-on-surface-variant uppercase tracking-widest">
                                Estatus</th>
                            <th class="px-6 py-4 text-[10px] font-bold text-on-surface-variant uppercase tracking-widest">
                                Fecha</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-outline-variant/10">
                        <tr class="hover:bg-surface-container-low transition-colors group">
                            <td class="px-6 py-4 text-sm font-bold text-primary">EST-01</td>
                            <td class="px-6 py-4 text-xs text-on-surface-variant font-medium">12 Oct - 31 Oct</td>
                            <td class="px-6 py-4 text-sm font-bold text-primary">$320,000</td>
                            <td class="px-6 py-4 text-sm font-bold text-secondary">$320,000</td>
                            <td class="px-6 py-4">
                                <span
                                    class="px-2 py-0.5 bg-green-100 text-green-700 text-[10px] font-bold rounded-full uppercase tracking-tighter">Aprobada</span>
                            </td>
                            <td class="px-6 py-4 text-xs font-medium text-on-surface-variant">02 Nov 2023</td>
                        </tr>
                        <tr class="hover:bg-surface-container-low transition-colors">
                            <td class="px-6 py-4 text-sm font-bold text-primary">EST-02</td>
                            <td class="px-6 py-4 text-xs text-on-surface-variant font-medium">01 Nov - 15 Nov</td>
                            <td class="px-6 py-4 text-sm font-bold text-primary">$41,250</td>
                            <td class="px-6 py-4 text-sm font-bold text-secondary">$20,000</td>
                            <td class="px-6 py-4">
                                <span
                                    class="px-2 py-0.5 bg-yellow-100 text-yellow-700 text-[10px] font-bold rounded-full uppercase tracking-tighter">Pendiente</span>
                            </td>
                            <td class="px-6 py-4 text-xs font-medium text-on-surface-variant">--</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- Extras & Feed (Span 4) -->
        <div class="lg:col-span-4 space-y-6">
            <!-- Extras Card -->
            <div class="bg-surface-container-lowest rounded-xl shadow-sm border border-outline-variant/10 overflow-hidden">
                <div
                    class="p-4 bg-surface-container-low flex items-center justify-between border-b border-outline-variant/10">
                    <h3 class="text-[10px] font-bold text-primary uppercase tracking-widest">Extras e Incidencias</h3>
                    <span class="px-2 py-0.5 bg-error-container text-error text-[10px] font-bold rounded uppercase">Alerta
                        (1)</span>
                </div>
                <div class="p-4 space-y-4">
                    <div class="flex gap-3">
                        <span
                            class="material-symbols-outlined text-primary bg-primary-fixed/30 p-2 rounded-lg text-lg">add_circle</span>
                        <div>
                            <p class="text-xs font-bold text-primary">Extra #1: Excavación en roca</p>
                            <p class="text-[10px] text-on-surface-variant font-medium">+ $5,000 (Aprobado)</p>
                        </div>
                    </div>
                    <div class="flex gap-3">
                        <span
                            class="material-symbols-outlined text-error bg-error-container/30 p-2 rounded-lg text-lg">warning</span>
                        <div>
                            <p class="text-xs font-bold text-error">Incidencia #1: Retraso lluvia</p>
                            <p class="text-[10px] text-on-surface-variant font-medium">48 hrs de impacto estimadas</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Activity Feed -->
            <div class="space-y-4">
                <h3 class="text-[10px] font-bold text-primary uppercase tracking-widest pl-2">Actividad Reciente</h3>
                <div class="space-y-6 pl-4 border-l-2 border-outline-variant/20 ml-2">
                    <div class="relative">
                        <div
                            class="absolute -left-[22px] top-0 w-4 h-4 bg-primary rounded-full border-4 border-background">
                        </div>
                        <p class="text-xs font-bold text-primary leading-none">Pago aplicado</p>
                        <p class="text-[10px] text-on-surface-variant font-medium mt-1">Se aplicó pago de $320,000
                            correspondiente a EST-01</p>
                        <p class="text-[9px] text-outline mt-1 uppercase font-bold">Hace 2 horas</p>
                    </div>
                    <div class="relative">
                        <div
                            class="absolute -left-[22px] top-0 w-4 h-4 bg-secondary rounded-full border-4 border-background">
                        </div>
                        <p class="text-xs font-bold text-primary leading-none">Estimación aprobada</p>
                        <p class="text-[10px] text-on-surface-variant font-medium mt-1">La revisión EST-01 fue aprobada
                            por Ing. Martínez</p>
                        <p class="text-[9px] text-outline mt-1 uppercase font-bold">Ayer</p>
                    </div>
                    <div class="relative">
                        <div
                            class="absolute -left-[22px] top-0 w-4 h-4 bg-outline-variant rounded-full border-4 border-background">
                        </div>
                        <p class="text-xs font-bold text-primary leading-none">Contrato creado</p>
                        <p class="text-[10px] text-on-surface-variant font-medium mt-1">Apertura de contrato
                            CT-2023-084 en sistema</p>
                        <p class="text-[9px] text-outline mt-1 uppercase font-bold">12 Oct 2023</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection