@extends('layouts.panel-template')

@section('header-content')
    <header
        class="fixed top-0 right-0 w-[calc(100%-16rem)] h-16 bg-white/80 backdrop-blur-md z-40 flex items-center justify-between px-8 border-b border-slate-100 shadow-sm">
        <div class="flex items-center gap-4">
            <div class="bg-surface-container-low px-4 py-2 rounded-xl flex items-center gap-2 cursor-pointer">
                <span class="material-symbols-outlined text-primary text-xl" data-icon="business">business</span>
                <span class="font-headline text-sm font-semibold text-slate-900">Project Selector: Edificio Reforma
                    250</span>
                <span class="material-symbols-outlined text-on-surface-variant text-sm"
                    data-icon="expand_more">expand_more</span>
            </div>
        </div>
        <div class="flex items-center gap-6">
            <div
                class="relative flex items-center bg-surface-container-low px-3 py-1.5 rounded-full border border-outline-variant/15">
                <span class="material-symbols-outlined text-outline text-lg" data-icon="search">search</span>
                <input class="bg-transparent border-none focus:ring-0 text-sm font-body w-48"
                    placeholder="Search piecework..." type="text" />
            </div>
            <div class="flex items-center gap-4">
                <button class="text-on-surface-variant hover:text-primary transition-all duration-300">
                    <span class="material-symbols-outlined" data-icon="notifications">notifications</span>
                </button>
                <button class="text-on-surface-variant hover:text-primary transition-all duration-300">
                    <span class="material-symbols-outlined" data-icon="apps">apps</span>
                </button>
                <div class="w-8 h-8 rounded-full bg-primary-fixed overflow-hidden border border-outline-variant/20">
                    <img alt="User avatar" class="w-full h-full object-cover"
                        data-alt="professional portrait of a construction project manager wearing a white hard hat and reflective vest in an office setting"
                        src="https://lh3.googleusercontent.com/aida-public/AB6AXuCqnubsx_hvj8WeK1OCWSSBT4l1f9vPbFd7UT7AkvSPTp8N7P97De9VfhzjiCGMMxwXOj_mR1fJZYpBSFZQzoEHuwYqmpn_vVoHMUvdVc-fTE8Vy_SuYA-J1jFqr-MMi2WnDqNJJNkaKC6LrpmWtnl6Ve0BMk8ToHKrkOMxGJSTqe1Eq1ngf7muAEQQSEFyATPT1U6Cb8l3JG9US6b8ojLoTiJQFyyL2_p3gKzPAmvj3SoV2nQnU1XXF25M88A2woTPSvFJenBLgWII" />
                </div>
            </div>
        </div>
    </header>
@endsection

@section('main-content')
    <!-- Content Area -->
    <div class="pt-24 px-8 space-y-8">
        <!-- Header Section -->
        <div class="flex justify-between items-end">
            <div class="space-y-1">
                <h2 class="font-headline text-2xl font-bold text-primary">Control de Destajos</h2>
                <p class="text-on-surface-variant text-sm">Control de costos de mano de obra</p>
            </div>
            <div class="flex gap-3">
                <div class="flex items-center bg-white border border-outline-variant/30 rounded-xl px-4 py-2.5 shadow-sm">
                    <span class="material-symbols-outlined text-primary mr-2"
                        data-icon="calendar_today">calendar_today</span>
                    <span class="text-sm font-semibold text-primary mr-2">Corte semanal:</span>
                    <select
                        class="bg-transparent border-none text-sm focus:ring-0 font-medium text-on-surface p-0 cursor-pointer">
                        <option>Semana 42 (Oct 16 - 22)</option>
                        <option>Semana 41 (Oct 09 - 15)</option>
                    </select>
                </div>
                <button
                    class="bg-gradient-to-br from-primary to-primary-container text-on-primary px-6 py-2.5 rounded-xl font-headline font-semibold flex items-center gap-2 shadow-lg hover:shadow-primary/20 transition-all">
                    <span class="material-symbols-outlined" data-icon="check_circle">check_circle</span>
                    Autorizar pagos
                </button>
            </div>
        </div>
        <!-- Bento Metrics -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
            <div class="bg-surface-container-lowest p-6 rounded-xl shadow-sm border border-outline-variant/10">
                <div class="flex justify-between items-start mb-4">
                    <span class="p-2 bg-primary-fixed text-primary rounded-lg material-symbols-outlined"
                        data-icon="payments">payments</span>
                    <span class="text-xs font-bold text-on-primary-container uppercase tracking-wider">Generated</span>
                </div>
                <div class="space-y-1">
                    <p class="text-2xl font-headline font-bold text-primary">$425,800.00</p>
                    <p class="text-xs text-on-surface-variant flex items-center gap-1">
                        <span class="text-error font-semibold flex items-center"><span
                                class="material-symbols-outlined text-xs" data-icon="arrow_upward">arrow_upward</span>
                            12%</span> vs last week
                    </p>
                </div>
            </div>
            <div class="bg-surface-container-lowest p-6 rounded-xl shadow-sm border border-outline-variant/10">
                <div class="flex justify-between items-start mb-4">
                    <span
                        class="p-2 bg-secondary-container text-on-secondary-container rounded-lg material-symbols-outlined"
                        data-icon="verified_user">verified_user</span>
                    <span class="text-xs font-bold text-on-primary-container uppercase tracking-wider">Validated</span>
                </div>
                <div class="space-y-1">
                    <p class="text-2xl font-headline font-bold text-primary">$382,150.00</p>
                    <div class="w-full bg-outline-variant/20 h-1.5 rounded-full mt-3">
                        <div class="bg-primary h-full rounded-full w-[85%]"></div>
                    </div>
                </div>
            </div>
            <div class="bg-surface-container-lowest p-6 rounded-xl shadow-sm border border-outline-variant/10">
                <div class="flex justify-between items-start mb-4">
                    <span class="p-2 bg-tertiary-fixed text-on-tertiary-fixed rounded-lg material-symbols-outlined"
                        data-icon="warning">warning</span>
                    <span class="text-xs font-bold text-on-primary-container uppercase tracking-wider">Alerts</span>
                </div>
                <div class="space-y-1">
                    <p class="text-2xl font-headline font-bold text-error">4 Overruns</p>
                    <p class="text-xs text-on-surface-variant">Exceeding contract caps</p>
                </div>
            </div>
            <div class="bg-primary text-on-primary p-6 rounded-xl shadow-xl relative overflow-hidden">
                <div class="relative z-10">
                    <p class="text-xs font-bold uppercase tracking-widest opacity-70 mb-2">Total Project Variance</p>
                    <p class="text-3xl font-headline font-extrabold">- 4.2%</p>
                    <div class="mt-4 flex gap-2">
                        <span class="px-2 py-0.5 rounded bg-white/20 text-[10px] font-bold">CONTROLLED</span>
                    </div>
                </div>
                <div class="absolute -right-4 -bottom-4 opacity-10">
                    <span class="material-symbols-outlined text-[100px]" data-icon="account_balance">account_balance</span>
                </div>
            </div>
        </div>
        <!-- Piecework Data Table -->
        <div class="bg-surface-container-lowest rounded-xl shadow-sm border border-outline-variant/10 overflow-hidden">
            <div class="p-6 border-b border-outline-variant/10 flex justify-between items-center">
                <h3 class="font-headline font-semibold text-primary">Summary Table</h3>
                <div class="flex gap-2">
                    <button
                        class="p-2 rounded-lg border border-outline-variant/20 text-on-surface-variant hover:bg-surface-container-low transition-colors">
                        <span class="material-symbols-outlined" data-icon="filter_list">filter_list</span>
                    </button>
                    <button
                        class="p-2 rounded-lg border border-outline-variant/20 text-on-surface-variant hover:bg-surface-container-low transition-colors">
                        <span class="material-symbols-outlined" data-icon="download">download</span>
                    </button>
                </div>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse">
                    <thead>
                        <tr class="bg-surface-container-low/50">
                            <th class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">
                                Unidad</th>
                            <th class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">
                                Contratista</th>
                            <th class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">
                                Actividad</th>
                            <th class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">
                                % Validado</th>
                            <th class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">
                                Monto Generado</th>
                            <th class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">Pagado
                            </th>
                            <th class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">Tope
                            </th>
                            <th class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">Estatus
                            </th>
                            <th class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">
                                Variación</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-outline-variant/10">
                        <!-- Row 1: Normal -->
                        <tr class="hover:bg-surface-container-low/30 transition-colors group">
                            <td class="px-6 py-4 font-semibold text-sm text-primary">Torre A - 402</td>
                            <td class="px-6 py-4 text-sm text-on-surface-variant">Construcciones Delta</td>
                            <td class="px-6 py-4 text-sm text-on-surface-variant">Drywall Installation</td>
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-3">
                                    <div class="w-16 bg-outline-variant/20 h-1.5 rounded-full">
                                        <div class="bg-primary h-full rounded-full w-[100%]"></div>
                                    </div>
                                    <span class="text-xs font-bold">100%</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 text-sm font-semibold text-primary">$12,450.00</td>
                            <td class="px-6 py-4 text-sm text-on-surface-variant">$10,000.00</td>
                            <td class="px-6 py-4 text-sm text-on-surface-variant">$15,000.00</td>
                            <td class="px-6 py-4">
                                <span
                                    class="px-2.5 py-1 rounded-full text-[10px] font-bold bg-secondary-container text-on-secondary-container">VALIDATED</span>
                            </td>
                            <td class="px-6 py-4 text-sm font-medium text-on-secondary-container">-$2,550.00</td>
                        </tr>
                        <!-- Row 2: Warning/Overrun -->
                        <tr class="hover:bg-surface-container-low/30 transition-colors group bg-error-container/5">
                            <td class="px-6 py-4 font-semibold text-sm text-primary">Torre B - Ground</td>
                            <td class="px-6 py-4 text-sm text-on-surface-variant">MuroTech SA</td>
                            <td class="px-6 py-4 text-sm text-on-surface-variant">Foundation Pouring</td>
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-3">
                                    <div class="w-16 bg-outline-variant/20 h-1.5 rounded-full">
                                        <div class="bg-error h-full rounded-full w-[95%]"></div>
                                    </div>
                                    <span class="text-xs font-bold text-error">95%</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 text-sm font-bold text-error">$88,200.00</td>
                            <td class="px-6 py-4 text-sm text-on-surface-variant">$45,000.00</td>
                            <td class="px-6 py-4 text-sm font-bold text-primary">$85,000.00</td>
                            <td class="px-6 py-4">
                                <span
                                    class="px-2.5 py-1 rounded-full text-[10px] font-bold bg-tertiary-fixed text-on-tertiary-fixed flex items-center w-fit gap-1">
                                    <span class="material-symbols-outlined text-[12px]" data-icon="report">report</span>
                                    OVERRUN
                                </span>
                            </td>
                            <td class="px-6 py-4 text-sm font-bold text-error">+$3,200.00</td>
                        </tr>
                        <!-- Row 3: Pending Review -->
                        <tr class="hover:bg-surface-container-low/30 transition-colors group">
                            <td class="px-6 py-4 font-semibold text-sm text-primary">Parking L1</td>
                            <td class="px-6 py-4 text-sm text-on-surface-variant">Luz &amp; Fuerza Inc</td>
                            <td class="px-6 py-4 text-sm text-on-surface-variant">Electrical Conduit</td>
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-3">
                                    <div class="w-16 bg-outline-variant/20 h-1.5 rounded-full">
                                        <div class="bg-outline h-full rounded-full w-[45%]"></div>
                                    </div>
                                    <span class="text-xs font-bold">45%</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 text-sm font-semibold text-primary">$5,600.00</td>
                            <td class="px-6 py-4 text-sm text-on-surface-variant">$0.00</td>
                            <td class="px-6 py-4 text-sm text-on-surface-variant">$12,000.00</td>
                            <td class="px-6 py-4">
                                <span
                                    class="px-2.5 py-1 rounded-full text-[10px] font-bold bg-surface-container text-on-surface-variant">PENDING
                                    REVIEW</span>
                            </td>
                            <td class="px-6 py-4 text-sm font-medium text-on-secondary-container">-$6,400.00</td>
                        </tr>
                        <!-- Row 4: Normal -->
                        <tr class="hover:bg-surface-container-low/30 transition-colors group">
                            <td class="px-6 py-4 font-semibold text-sm text-primary">Torre A - Roof</td>
                            <td class="px-6 py-4 text-sm text-on-surface-variant">WaterStop Solutions</td>
                            <td class="px-6 py-4 text-sm text-on-surface-variant">Waterproofing</td>
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-3">
                                    <div class="w-16 bg-outline-variant/20 h-1.5 rounded-full">
                                        <div class="bg-primary h-full rounded-full w-[70%]"></div>
                                    </div>
                                    <span class="text-xs font-bold">70%</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 text-sm font-semibold text-primary">$21,300.00</td>
                            <td class="px-6 py-4 text-sm text-on-surface-variant">$15,000.00</td>
                            <td class="px-6 py-4 text-sm text-on-surface-variant">$32,000.00</td>
                            <td class="px-6 py-4">
                                <span
                                    class="px-2.5 py-1 rounded-full text-[10px] font-bold bg-secondary-container text-on-secondary-container">VALIDATED</span>
                            </td>
                            <td class="px-6 py-4 text-sm font-medium text-on-secondary-container">-$10,700.00</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div
                class="p-4 bg-surface-container-low/30 border-t border-outline-variant/10 flex justify-between items-center px-8">
                <p class="text-xs text-on-surface-variant">Showing 4 of 28 contractors for Week 42</p>
                <div class="flex gap-2">
                    <button class="p-1 rounded bg-white border border-outline-variant/20 disabled:opacity-50"
                        disabled="">
                        <span class="material-symbols-outlined text-sm" data-icon="chevron_left">chevron_left</span>
                    </button>
                    <button class="p-1 rounded bg-white border border-outline-variant/20">
                        <span class="material-symbols-outlined text-sm" data-icon="chevron_right">chevron_right</span>
                    </button>
                </div>
            </div>
        </div>
        <!-- Financial Visualization & Alerts (Asymmetric Section) -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- Contractor Allocation (Glassmorphism inspired) -->
            <div class="lg:col-span-2 bg-white/60 backdrop-blur-xl p-6 rounded-2xl border border-white shadow-xl">
                <div class="flex justify-between items-center mb-6">
                    <h3 class="font-headline font-bold text-primary flex items-center gap-2">
                        <span class="material-symbols-outlined text-primary" data-icon="query_stats">query_stats</span>
                        Weekly Cost Distribution
                    </h3>
                    <div class="flex gap-4 text-xs font-bold text-on-surface-variant">
                        <span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-primary"></span>
                            Labor</span>
                        <span class="flex items-center gap-1"><span
                                class="w-2 h-2 rounded-full bg-secondary-container"></span> Overheads</span>
                    </div>
                </div>
                <div class="space-y-6">
                    <div class="space-y-2">
                        <div class="flex justify-between text-xs font-bold uppercase tracking-tighter">
                            <span>Structural Work</span>
                            <span>45% of total</span>
                        </div>
                        <div class="h-8 w-full bg-surface-container-low rounded-xl overflow-hidden flex">
                            <div class="bg-primary w-[45%] h-full"></div>
                            <div class="bg-primary-container w-[15%] h-full opacity-60"></div>
                        </div>
                    </div>
                    <div class="space-y-2">
                        <div class="flex justify-between text-xs font-bold uppercase tracking-tighter">
                            <span>Finishing &amp; MEP</span>
                            <span>32% of total</span>
                        </div>
                        <div class="h-8 w-full bg-surface-container-low rounded-xl overflow-hidden flex">
                            <div class="bg-secondary-container w-[32%] h-full"></div>
                            <div class="bg-on-secondary-container w-[8%] h-full opacity-40"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Active Alerts -->
            <div class="bg-error-container/20 p-6 rounded-2xl border border-error-container shadow-sm flex flex-col">
                <div class="flex items-center gap-2 text-error mb-4">
                    <span class="material-symbols-outlined" data-icon="report_problem">report_problem</span>
                    <h3 class="font-headline font-bold">Critical Alerts</h3>
                </div>
                <div class="flex-1 space-y-4">
                    <div class="bg-white p-3 rounded-xl shadow-sm border-l-4 border-error">
                        <p class="text-xs font-bold text-error uppercase mb-1">Budget Breach</p>
                        <p class="text-sm font-semibold text-primary">MuroTech SA - Foundation</p>
                        <p class="text-xs text-on-surface-variant mt-1">Exceeded contract cap by 3.8% ($3,200.00)</p>
                    </div>
                    <div class="bg-white p-3 rounded-xl shadow-sm border-l-4 border-tertiary">
                        <p class="text-xs font-bold text-on-tertiary-container uppercase mb-1">Progress Mismatch</p>
                        <p class="text-sm font-semibold text-primary">Drywall - Torre A</p>
                        <p class="text-xs text-on-surface-variant mt-1">Validated progress (100%) exceeds supervisor log
                            (92%).</p>
                    </div>
                </div>
                <button
                    class="mt-6 w-full py-2 bg-error text-on-error rounded-xl text-xs font-bold hover:bg-error/90 transition-colors">
                    Review Discrepancies
                </button>
            </div>
        </div>
    </div>
@endsection