@extends('layouts.panel-template')

@section('main-content')
    <div class="p-8 flex flex-col gap-8">
        <!-- Global KPIs -->
        <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <!-- Total Budget -->
            <div class="bg-primary text-on-primary rounded-xl p-6 relative overflow-hidden shadow-lg bg-gradient-to-br from-primary to-primary-container"
                style="box-shadow: 0 12px 40px rgba(5, 29, 48, 0.15);">
                <div class="absolute top-0 right-0 p-4 opacity-20">
                    <span class="material-symbols-outlined text-[4rem]" data-icon="account_balance">account_balance</span>
                </div>
                <p class="font-label text-sm font-medium text-inverse-primary relative z-10 uppercase tracking-wider">
                    Presupuesto Total</p>
                <p class="font-headline text-[2.5rem] font-bold mt-2 relative z-10">$1,500,000</p>
                <div class="flex items-center gap-1 mt-4 text-emerald-400 relative z-10 font-label text-xs font-semibold">
                    <span class="material-symbols-outlined text-[1rem]" data-icon="trending_flat">trending_flat</span>
                    <span>0% Varianza Planificada</span>
                </div>
            </div>
            <!-- Accumulated Spend -->
            <div class="bg-surface-container-lowest rounded-xl p-6 border border-outline-variant/15 shadow-sm"
                style="box-shadow: 0 4px 20px rgba(5, 29, 48, 0.03);">
                <p class="font-label text-sm font-medium text-on-surface-variant uppercase tracking-wider">Gasto Acumulado
                </p>
                <p class="font-headline text-[2.5rem] font-bold text-on-surface mt-2">$850,000</p>
                <div class="mt-4 flex flex-col gap-2">
                    <div class="flex justify-between items-center font-label text-xs">
                        <span class="text-on-surface-variant">Progreso de ejecución</span>
                        <span class="text-on-surface font-bold">56.6%</span>
                    </div>
                    <div class="h-2 w-full bg-outline-variant/20 rounded-full overflow-hidden">
                        <div class="h-full bg-primary rounded-full" style="width: 56.6%"></div>
                    </div>
                </div>
            </div>
            <!-- Variance -->
            <div class="bg-surface-container-lowest rounded-xl p-6 border border-outline-variant/15 shadow-sm"
                style="box-shadow: 0 4px 20px rgba(5, 29, 48, 0.03);">
                <p class="font-label text-sm font-medium text-on-surface-variant uppercase tracking-wider">Varianza Global
                </p>
                <p class="font-headline text-[2.5rem] font-bold text-error mt-2">+$50,000</p>
                <div
                    class="flex items-center gap-1 mt-4 text-error font-label text-xs font-semibold bg-error-container/50 inline-flex px-2 py-1 rounded">
                    <span class="material-symbols-outlined text-[1rem]" data-icon="trending_up">trending_up</span>
                    <span>+5.8% sobre plan actual</span>
                </div>
            </div>
            <!-- Unit Status Mini-Cards -->
            <div class="flex flex-col gap-3">
                <div
                    class="bg-surface-container-lowest rounded-lg p-3 border border-outline-variant/15 flex items-center justify-between shadow-sm">
                    <div class="flex items-center gap-3">
                        <div class="w-2 h-8 bg-emerald-500 rounded-full"></div>
                        <div>
                            <p class="font-label text-xs text-on-surface-variant">Unidades en Presupuesto</p>
                            <p class="font-headline text-lg font-bold text-on-surface">15</p>
                        </div>
                    </div>
                    <span class="material-symbols-outlined text-outline-variant"
                        data-icon="check_circle">check_circle</span>
                </div>
                <div
                    class="bg-surface-container-lowest rounded-lg p-3 border border-outline-variant/15 flex items-center justify-between shadow-sm">
                    <div class="flex items-center gap-3">
                        <div class="w-2 h-8 bg-amber-500 rounded-full"></div>
                        <div>
                            <p class="font-label text-xs text-on-surface-variant">Unidades en Riesgo</p>
                            <p class="font-headline text-lg font-bold text-on-surface">4</p>
                        </div>
                    </div>
                    <span class="material-symbols-outlined text-outline-variant" data-icon="warning">warning</span>
                </div>
                <div
                    class="bg-surface-container-lowest rounded-lg p-3 border border-outline-variant/15 flex items-center justify-between shadow-sm">
                    <div class="flex items-center gap-3">
                        <div class="w-2 h-8 bg-error rounded-full"></div>
                        <div>
                            <p class="font-label text-xs text-on-surface-variant">Unidades Sobregiradas</p>
                            <p class="font-headline text-lg font-bold text-on-surface">2</p>
                        </div>
                    </div>
                    <span class="material-symbols-outlined text-outline-variant" data-icon="error">error</span>
                </div>
            </div>
        </section>
        <!-- Table Section -->
        <section
            class="bg-surface-container-lowest rounded-xl shadow-sm border border-outline-variant/15 overflow-hidden flex flex-col"
            style="box-shadow: 0 8px 32px rgba(5, 29, 48, 0.04);">
            <!-- Filters Bar -->
            <div
                class="p-4 border-b border-outline-variant/15 bg-surface-container-low/50 flex flex-wrap gap-3 items-center">
                <span class="material-symbols-outlined text-on-surface-variant mr-2"
                    data-icon="filter_list">filter_list</span>
                <button
                    class="flex h-9 items-center justify-between gap-x-2 rounded-lg bg-surface-container-lowest border border-outline-variant/30 px-3 min-w-[140px] hover:border-primary/50 transition-colors">
                    <span class="text-on-surface font-label text-sm">Proyecto: Todos</span>
                    <span class="material-symbols-outlined text-[1.25rem] text-outline"
                        data-icon="arrow_drop_down">arrow_drop_down</span>
                </button>
                <button
                    class="flex h-9 items-center justify-between gap-x-2 rounded-lg bg-surface-container-lowest border border-outline-variant/30 px-3 min-w-[140px] hover:border-primary/50 transition-colors">
                    <span class="text-on-surface font-label text-sm">Etapa: Todas</span>
                    <span class="material-symbols-outlined text-[1.25rem] text-outline"
                        data-icon="arrow_drop_down">arrow_drop_down</span>
                </button>
                <button
                    class="flex h-9 items-center justify-between gap-x-2 rounded-lg bg-surface-container-lowest border border-outline-variant/30 px-3 min-w-[140px] hover:border-primary/50 transition-colors">
                    <span class="text-on-surface font-label text-sm">Prototipo: Todos</span>
                    <span class="material-symbols-outlined text-[1.25rem] text-outline"
                        data-icon="arrow_drop_down">arrow_drop_down</span>
                </button>
                <button
                    class="flex h-9 items-center justify-between gap-x-2 rounded-lg bg-surface-container-lowest border border-outline-variant/30 px-3 min-w-[140px] hover:border-primary/50 transition-colors">
                    <span class="text-on-surface font-label text-sm">Estado: Todos</span>
                    <span class="material-symbols-outlined text-[1.25rem] text-outline"
                        data-icon="arrow_drop_down">arrow_drop_down</span>
                </button>
                <div class="flex-1"></div>
                <div class="relative">
                    <span
                        class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline text-[1.25rem]"
                        data-icon="search">search</span>
                    <input
                        class="h-9 pl-10 pr-4 rounded-lg bg-surface-container-lowest border border-outline-variant/30 text-sm font-label w-64 focus:border-primary focus:ring-1 focus:ring-primary focus:outline-none transition-all"
                        placeholder="Buscar unidad..." type="text" />
                </div>
            </div>
            <!-- Data Table -->
            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse">
                    <thead>
                        <tr
                            class="border-b border-outline-variant/15 text-on-surface-variant font-label text-xs uppercase tracking-wider">
                            <th class="p-4 font-semibold whitespace-nowrap">Unidad</th>
                            <th class="p-4 font-semibold whitespace-nowrap">Etapa / Proto</th>
                            <th class="p-4 font-semibold text-right whitespace-nowrap">Presupuesto Meta</th>
                            <th class="p-4 font-semibold text-right whitespace-nowrap">Gasto Acum.</th>
                            <th class="p-4 font-semibold text-center whitespace-nowrap">% Consumido</th>
                            <th class="p-4 font-semibold text-right whitespace-nowrap">Extras Aprob.</th>
                            <th class="p-4 font-semibold text-center whitespace-nowrap">Estado</th>
                            <th class="p-4 font-semibold text-center whitespace-nowrap">Acciones</th>
                        </tr>
                    </thead>
                    <tbody class="font-body text-sm divide-y divide-outline-variant/10">
                        <!-- Row 1: Healthy -->
                        <tr class="hover:bg-surface-container-low/50 transition-colors group">
                            <td class="p-4">
                                <div class="flex items-center gap-3">
                                    <div class="w-1.5 h-12 bg-emerald-500 rounded-full"></div>
                                    <div>
                                        <p class="font-headline font-bold text-on-surface">A-101</p>
                                        <p class="text-xs text-on-surface-variant">Lote Norte</p>
                                    </div>
                                </div>
                            </td>
                            <td class="p-4">
                                <p class="text-on-surface font-medium">Cimentación</p>
                                <p class="text-xs text-on-surface-variant">Alfa 3-Hab</p>
                            </td>
                            <td class="p-4 text-right font-medium text-on-surface">$120,000</td>
                            <td class="p-4 text-right font-medium text-on-surface">$45,000</td>
                            <td class="p-4">
                                <div class="flex flex-col items-center gap-1 w-24 mx-auto">
                                    <span class="text-xs font-semibold">37.5%</span>
                                    <div class="h-1.5 w-full bg-outline-variant/20 rounded-full overflow-hidden">
                                        <div class="h-full bg-emerald-500 rounded-full" style="width: 37.5%"></div>
                                    </div>
                                </div>
                            </td>
                            <td class="p-4 text-right text-on-surface-variant">$0</td>
                            <td class="p-4 text-center">
                                <span
                                    class="inline-flex items-center px-2 py-1 rounded text-xs font-semibold bg-emerald-100 text-emerald-800 border border-emerald-200">En
                                    Rango</span>
                            </td>
                            <td class="p-4 text-center">
                                <button
                                    class="text-outline hover:text-primary transition-colors p-1 rounded-full hover:bg-surface-container">
                                    <span class="material-symbols-outlined text-[1.25rem]"
                                        data-icon="more_vert">more_vert</span>
                                </button>
                            </td>
                        </tr>
                        <!-- Row 2: Warning -->
                        <tr class="hover:bg-surface-container-low/50 transition-colors group">
                            <td class="p-4">
                                <div class="flex items-center gap-3">
                                    <div class="w-1.5 h-12 bg-amber-500 rounded-full"></div>
                                    <div>
                                        <p class="font-headline font-bold text-on-surface">B-205</p>
                                        <p class="text-xs text-on-surface-variant">Lote Sur</p>
                                    </div>
                                </div>
                            </td>
                            <td class="p-4">
                                <p class="text-on-surface font-medium">Obra Gris</p>
                                <p class="text-xs text-on-surface-variant">Beta 2-Hab</p>
                            </td>
                            <td class="p-4 text-right font-medium text-on-surface">$95,000</td>
                            <td class="p-4 text-right font-medium text-on-surface">$88,000</td>
                            <td class="p-4">
                                <div class="flex flex-col items-center gap-1 w-24 mx-auto">
                                    <span class="text-xs font-semibold">92.6%</span>
                                    <div class="h-1.5 w-full bg-outline-variant/20 rounded-full overflow-hidden">
                                        <div class="h-full bg-amber-500 rounded-full" style="width: 92.6%"></div>
                                    </div>
                                </div>
                            </td>
                            <td class="p-4 text-right text-amber-600 font-medium">+$2,500</td>
                            <td class="p-4 text-center">
                                <span
                                    class="inline-flex items-center px-2 py-1 rounded text-xs font-semibold bg-amber-100 text-amber-800 border border-amber-200">En
                                    Riesgo</span>
                            </td>
                            <td class="p-4 text-center">
                                <button
                                    class="text-outline hover:text-primary transition-colors p-1 rounded-full hover:bg-surface-container">
                                    <span class="material-symbols-outlined text-[1.25rem]"
                                        data-icon="more_vert">more_vert</span>
                                </button>
                            </td>
                        </tr>
                        <!-- Row 3: Error -->
                        <tr class="hover:bg-surface-container-low/50 transition-colors group">
                            <td class="p-4">
                                <div class="flex items-center gap-3">
                                    <div class="w-1.5 h-12 bg-error rounded-full"></div>
                                    <div>
                                        <p class="font-headline font-bold text-on-surface">C-310</p>
                                        <p class="text-xs text-on-surface-variant">Lote Este</p>
                                    </div>
                                </div>
                            </td>
                            <td class="p-4">
                                <p class="text-on-surface font-medium">Acabados</p>
                                <p class="text-xs text-on-surface-variant">Alfa 3-Hab</p>
                            </td>
                            <td class="p-4 text-right font-medium text-on-surface">$130,000</td>
                            <td class="p-4 text-right font-bold text-error">$142,500</td>
                            <td class="p-4">
                                <div class="flex flex-col items-center gap-1 w-24 mx-auto">
                                    <span class="text-xs font-bold text-error">109.6%</span>
                                    <div class="h-1.5 w-full bg-outline-variant/20 rounded-full overflow-hidden">
                                        <div class="h-full bg-error rounded-full" style="width: 100%"></div>
                                    </div>
                                </div>
                            </td>
                            <td class="p-4 text-right text-error font-bold">+$12,500</td>
                            <td class="p-4 text-center">
                                <span
                                    class="inline-flex items-center px-2 py-1 rounded text-xs font-semibold bg-error-container text-on-error-container border border-error/30 gap-1">
                                    <span class="material-symbols-outlined text-[1rem]"
                                        data-icon="error_outline">error_outline</span>
                                    Sobregiro
                                </span>
                            </td>
                            <td class="p-4 text-center">
                                <button
                                    class="text-outline hover:text-primary transition-colors p-1 rounded-full hover:bg-surface-container">
                                    <span class="material-symbols-outlined text-[1.25rem]"
                                        data-icon="more_vert">more_vert</span>
                                </button>
                            </td>
                        </tr>
                        <!-- Row 4: Healthy -->
                        <tr class="hover:bg-surface-container-low/50 transition-colors group">
                            <td class="p-4">
                                <div class="flex items-center gap-3">
                                    <div class="w-1.5 h-12 bg-emerald-500 rounded-full"></div>
                                    <div>
                                        <p class="font-headline font-bold text-on-surface">A-102</p>
                                        <p class="text-xs text-on-surface-variant">Lote Norte</p>
                                    </div>
                                </div>
                            </td>
                            <td class="p-4">
                                <p class="text-on-surface font-medium">Cimentación</p>
                                <p class="text-xs text-on-surface-variant">Alfa 3-Hab</p>
                            </td>
                            <td class="p-4 text-right font-medium text-on-surface">$120,000</td>
                            <td class="p-4 text-right font-medium text-on-surface">$40,000</td>
                            <td class="p-4">
                                <div class="flex flex-col items-center gap-1 w-24 mx-auto">
                                    <span class="text-xs font-semibold">33.3%</span>
                                    <div class="h-1.5 w-full bg-outline-variant/20 rounded-full overflow-hidden">
                                        <div class="h-full bg-emerald-500 rounded-full" style="width: 33.3%"></div>
                                    </div>
                                </div>
                            </td>
                            <td class="p-4 text-right text-on-surface-variant">$0</td>
                            <td class="p-4 text-center">
                                <span
                                    class="inline-flex items-center px-2 py-1 rounded text-xs font-semibold bg-emerald-100 text-emerald-800 border border-emerald-200">En
                                    Rango</span>
                            </td>
                            <td class="p-4 text-center">
                                <button
                                    class="text-outline hover:text-primary transition-colors p-1 rounded-full hover:bg-surface-container">
                                    <span class="material-symbols-outlined text-[1.25rem]"
                                        data-icon="more_vert">more_vert</span>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!-- Pagination / Footer -->
            <div
                class="p-4 border-t border-outline-variant/15 flex justify-between items-center bg-surface-container-lowest">
                <p class="text-sm font-label text-on-surface-variant">Mostrando 4 de 15 unidades</p>
                <div class="flex gap-2">
                    <button
                        class="p-1 rounded text-outline hover:text-primary hover:bg-surface-container disabled:opacity-50"
                        disabled="">
                        <span class="material-symbols-outlined" data-icon="chevron_left">chevron_left</span>
                    </button>
                    <button class="p-1 rounded text-outline hover:text-primary hover:bg-surface-container">
                        <span class="material-symbols-outlined" data-icon="chevron_right">chevron_right</span>
                    </button>
                </div>
            </div>
        </section>
    </div>
@endsection