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

@section('main-content')
    <div class="p-6 md:p-8 space-y-8 max-w-7xl mx-auto w-full">
        <!-- Header & Executive Welcome -->
        <section class="flex flex-col md:flex-row md:items-end justify-between gap-4">
            <div>
                <h2 class="font-headline text-3xl md:text-4xl font-bold tracking-tight text-on-surface">Panel de
                    Control Ejecutivo</h2>
                <p class="text-secondary font-medium mt-1">Resumen operacional de proyectos JYZAO - Q3 2023</p>
            </div>
            <div class="flex items-center gap-3">
                <button
                    class="bg-surface-container-lowest text-primary px-4 py-2.5 rounded-xl text-sm font-semibold flex items-center gap-2 shadow-sm border border-outline-variant/10 hover:bg-surface-container-low transition-all">
                    <span class="material-symbols-outlined text-lg">calendar_today</span>
                    Septiembre 2023
                </button>
                <button
                    class="bg-primary text-on-primary px-5 py-2.5 rounded-xl text-sm font-semibold shadow-lg shadow-primary/20 hover:opacity-90 transition-all flex items-center gap-2">
                    <span class="material-symbols-outlined text-lg">add_chart</span>
                    Exportar Reporte
                </button>
            </div>
        </section>
        <!-- KPI Bento Grid -->
        <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <!-- KPI 1: Obras Activas -->
            <livewire:tds::kpi-card title="Obras Activas" value="24" backgroundColor="bg-primary" icon="architecture"
                backgroundColorIcon="text-white" colorIcon="text-white" indicatorIcon="trending_up"
                indicatorLabel="+3 este mes" indicatorColor="text-tertiary-fixed" colorValue="text-white" />

            <livewire:tds::kpi-card title="Avance Global" value="72%" backgroundColor="bg-surface-container-lowest"
                icon="analytics" backgroundColorIcon="bg-secondary-container/30" colorIcon="text-secondary"
                colorValue="text-on-surface" progress="72%" />

            <!-- KPI 3: Viviendas Retrasadas -->
            <div
                class="bg-error-container/40 p-6 rounded-full shadow-sm border border-error-container flex flex-col justify-between min-h-[160px]">
                <div class="flex justify-between items-start">
                    <span class="text-on-error-container font-semibold text-sm">Viviendas Retrasadas</span>
                    <div class="w-10 h-10 rounded-full bg-error-container flex items-center justify-center text-error">
                        <span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">warning</span>
                    </div>
                </div>
                <div class="mt-auto">
                    <span class="font-headline text-5xl font-bold text-on-error-container">04</span>
                    <p class="text-xs text-on-error-container/70 font-medium mt-1">Acción inmediata requerida
                    </p>
                </div>
            </div>
            <!-- KPI 4: Empleados Activos -->
            <div
                class="bg-surface-container-lowest p-6 rounded-full shadow-sm border border-outline-variant/5 flex flex-col justify-between min-h-[160px]">
                <div class="flex justify-between items-start">
                    <span class="text-secondary font-semibold text-sm">Empleados Activos</span>
                    <div
                        class="w-10 h-10 rounded-full bg-surface-container-low flex items-center justify-center text-primary-fixed-dim">
                        <span class="material-symbols-outlined">engineering</span>
                    </div>
                </div>
                <div class="mt-auto">
                    <span class="font-headline text-5xl font-bold text-on-surface">118</span>
                    <div class="flex items-center gap-1 text-secondary text-xs mt-2 font-medium">
                        <span class="material-symbols-outlined text-sm">group</span>
                        <span>12 cuadrillas</span>
                    </div>
                </div>
            </div>
        </section>
        <!-- Alerts & Charts Section -->
        <section class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- Critical Budget Alerts -->
            <div class="lg:col-span-1 space-y-6">
                <div class="flex items-center justify-between">
                    <h3 class="font-headline text-xl font-bold text-on-surface">Alertas Críticas</h3>
                    <span class="text-xs bg-error text-on-primary px-2 py-1 rounded-lg font-bold">2
                        NUEVAS</span>
                </div>
                <div class="space-y-4">
                    <div
                        class="p-4 bg-white rounded-full border-l-4 border-error shadow-sm hover:translate-x-1 transition-transform">
                        <div class="flex gap-3">
                            <span class="material-symbols-outlined text-error">payments</span>
                            <div>
                                <h4 class="text-sm font-bold text-on-surface leading-tight">Exceso Presupuesto:
                                    Residencial Norte</h4>
                                <p class="text-xs text-on-surface-variant mt-1">Desviación del +15.4% en
                                    materiales estructurales.</p>
                            </div>
                        </div>
                    </div>
                    <div
                        class="p-4 bg-white rounded-full border-l-4 border-error shadow-sm hover:translate-x-1 transition-transform">
                        <div class="flex gap-3">
                            <span class="material-symbols-outlined text-error">schedule</span>
                            <div>
                                <h4 class="text-sm font-bold text-on-surface leading-tight">Paro Técnico:
                                    Edificio Onyx</h4>
                                <p class="text-xs text-on-surface-variant mt-1">Retraso en entrega de acero de
                                    refuerzo.</p>
                            </div>
                        </div>
                    </div>
                    <div
                        class="p-4 bg-white/50 rounded-full border-l-4 border-outline-variant shadow-sm grayscale opacity-75">
                        <div class="flex gap-3">
                            <span class="material-symbols-outlined text-outline">history</span>
                            <div>
                                <h4 class="text-sm font-bold text-on-surface leading-tight">Revisión
                                    Finalizada: Los Sauces</h4>
                                <p class="text-xs text-on-surface-variant mt-1">Aprobación de certificación de
                                    suelo obtenida.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <button
                    class="w-full py-3 text-secondary text-sm font-bold border border-secondary/20 rounded-xl hover:bg-secondary/5 transition-colors">
                    Ver historial de alertas
                </button>
            </div>
            <!-- Progress Chart -->
            <div
                class="lg:col-span-2 bg-surface-container-lowest p-8 rounded-full shadow-sm border border-outline-variant/5">
                <div class="flex items-center justify-between mb-8">
                    <div>
                        <h3 class="font-headline text-xl font-bold text-on-surface">Avance Mensual Consolidado
                        </h3>
                        <p class="text-xs text-secondary font-medium">Rendimiento operacional últimos 6 meses
                        </p>
                    </div>
                    <div class="flex gap-2">
                        <div
                            class="flex items-center gap-1.5 px-3 py-1.5 bg-surface-container-low rounded-lg text-[11px] font-bold text-primary">
                            <span class="w-2 h-2 rounded-full bg-primary"></span> PROYECTADO
                        </div>
                        <div
                            class="flex items-center gap-1.5 px-3 py-1.5 bg-surface-container-low rounded-lg text-[11px] font-bold text-secondary">
                            <span class="w-2 h-2 rounded-full bg-secondary"></span> REAL
                        </div>
                    </div>
                </div>
                <!-- Simplified Chart Simulation -->
                <div class="h-64 flex items-end justify-between gap-4 px-2">
                    <div class="flex-1 flex flex-col items-center gap-3">
                        <div class="w-full flex items-end gap-1 h-full">
                            <div class="bg-primary/10 w-1/2 h-[60%] rounded-t-lg"></div>
                            <div class="bg-secondary w-1/2 h-[55%] rounded-t-lg"></div>
                        </div>
                        <span class="text-[10px] font-bold text-on-surface-variant">MAR</span>
                    </div>
                    <div class="flex-1 flex flex-col items-center gap-3">
                        <div class="w-full flex items-end gap-1 h-full">
                            <div class="bg-primary/10 w-1/2 h-[75%] rounded-t-lg"></div>
                            <div class="bg-secondary w-1/2 h-[70%] rounded-t-lg"></div>
                        </div>
                        <span class="text-[10px] font-bold text-on-surface-variant">ABR</span>
                    </div>
                    <div class="flex-1 flex flex-col items-center gap-3">
                        <div class="w-full flex items-end gap-1 h-full">
                            <div class="bg-primary/10 w-1/2 h-[80%] rounded-t-lg"></div>
                            <div class="bg-secondary w-1/2 h-[85%] rounded-t-lg"></div>
                        </div>
                        <span class="text-[10px] font-bold text-on-surface-variant">MAY</span>
                    </div>
                    <div class="flex-1 flex flex-col items-center gap-3">
                        <div class="w-full flex items-end gap-1 h-full">
                            <div class="bg-primary/10 w-1/2 h-[70%] rounded-t-lg"></div>
                            <div class="bg-secondary w-1/2 h-[65%] rounded-t-lg"></div>
                        </div>
                        <span class="text-[10px] font-bold text-on-surface-variant">JUN</span>
                    </div>
                    <div class="flex-1 flex flex-col items-center gap-3">
                        <div class="w-full flex items-end gap-1 h-full">
                            <div class="bg-primary/10 w-1/2 h-[90%] rounded-t-lg"></div>
                            <div class="bg-secondary w-1/2 h-[92%] rounded-t-lg"></div>
                        </div>
                        <span class="text-[10px] font-bold text-on-surface-variant">JUL</span>
                    </div>
                    <div class="flex-1 flex flex-col items-center gap-3">
                        <div class="w-full flex items-end gap-1 h-full">
                            <div class="bg-primary/10 w-1/2 h-[85%] rounded-t-lg"></div>
                            <div class="bg-secondary w-1/2 h-[72%] rounded-t-lg"></div>
                        </div>
                        <span class="text-[10px] font-bold text-on-surface-variant">AGO</span>
                    </div>
                </div>
            </div>
        </section>
        <!-- Quick Access / Priority Projects -->
        <section class="space-y-6 pb-12">
            <div class="flex items-center justify-between">
                <h3 class="font-headline text-xl font-bold text-on-surface">Atención Requerida: Obras Críticas
                </h3>
                <a class="text-primary text-sm font-bold flex items-center gap-1 hover:underline" href="#">
                    Ver todas las obras
                    <span class="material-symbols-outlined text-sm">arrow_forward</span>
                </a>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- Project Card 1 -->
                <div class="bg-white rounded-full overflow-hidden shadow-sm border border-outline-variant/10 group">
                    <div class="relative h-40">
                        <img alt="Project Residencial Norte"
                            class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                            data-alt="construction site of a modern residential complex with cranes and concrete structures under a clear blue sky"
                            src="https://lh3.googleusercontent.com/aida-public/AB6AXuDs49RWkOrzUHXhFii8qYGgSyvTzzhyKtIjxD-uIVLhN6_q2pJJILBCe6YpMmRJPXCszv1-Sh5pwFcVTzXvOphtb8Pxzc-xUgHnuFnB0C9V24tzZEn_oZ7aaM74LQrvslsw0gZ87-zDMEbQqxVd2xCCGtdpiNllS_b-pn7LfM0hz7_6B-OQCqWnh1V0ArYmn4aYRJZefp23kGBfz8Cd-q2dk5kXmBEb3JcdYLNlbW-HdNLZBRZi-SDGQlmd2EgYJUbSkHxEx_1VJImr" />
                        <div class="absolute inset-0 bg-gradient-to-t from-primary/80 to-transparent"></div>
                        <div class="absolute bottom-4 left-4">
                            <span
                                class="px-2 py-1 bg-error text-on-error text-[10px] font-bold rounded-md uppercase">Presupuesto
                                Crítico</span>
                            <h4 class="text-white font-bold mt-1">Residencial Norte</h4>
                        </div>
                    </div>
                    <div class="p-5">
                        <div class="flex justify-between text-xs font-semibold text-secondary mb-2">
                            <span>Avance Físico</span>
                            <span>45%</span>
                        </div>
                        <div class="w-full h-1.5 bg-outline-variant/20 rounded-full mb-4">
                            <div class="bg-primary h-full rounded-full" style="width: 45%"></div>
                        </div>
                        <button
                            class="w-full py-2 bg-surface-container-low text-primary text-xs font-bold rounded-lg hover:bg-primary hover:text-on-primary transition-all">Detalles
                            Técnicos</button>
                    </div>
                </div>
                <!-- Project Card 2 -->
                <div class="bg-white rounded-full overflow-hidden shadow-sm border border-outline-variant/10 group">
                    <div class="relative h-40">
                        <img alt="Project Edificio Onyx"
                            class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                            data-alt="modern skyscraper architecture under construction with glass facade panels being installed during daytime"
                            src="https://lh3.googleusercontent.com/aida-public/AB6AXuAD3qbLDmWbsEQRBsMXWXJ2XtZcA1ltajVCZBHzLABCdDx5OOFW31cmq-86EQy1QHg5W4uW27f0N_O_tKFcaUfiXlz3LJe-zHto-pem5Q6UIUrWyMyBnKRHREh4FYjmTic7V8Yf9_hMzCnkdfmlPLiZqU3g8l5G9XZH1S9c5cyUEMEYcgHe9XkuiJGqMKpsVS1tGekV4k0xPmk8O7TXdApbYJaHrJrZOnrzrQSWO-O5IEZcSl2YaZTM6EJF6_TipvrYbxav0ijn0E3C" />
                        <div class="absolute inset-0 bg-gradient-to-t from-primary/80 to-transparent"></div>
                        <div class="absolute bottom-4 left-4">
                            <span
                                class="px-2 py-1 bg-tertiary-fixed text-on-tertiary-fixed text-[10px] font-bold rounded-md uppercase">Retraso
                                Suministros</span>
                            <h4 class="text-white font-bold mt-1">Edificio Onyx</h4>
                        </div>
                    </div>
                    <div class="p-5">
                        <div class="flex justify-between text-xs font-semibold text-secondary mb-2">
                            <span>Avance Físico</span>
                            <span>82%</span>
                        </div>
                        <div class="w-full h-1.5 bg-outline-variant/20 rounded-full mb-4">
                            <div class="bg-primary h-full rounded-full" style="width: 82%"></div>
                        </div>
                        <button
                            class="w-full py-2 bg-surface-container-low text-primary text-xs font-bold rounded-lg hover:bg-primary hover:text-on-primary transition-all">Detalles
                            Técnicos</button>
                    </div>
                </div>
                <!-- Project Card 3 -->
                <div class="bg-white rounded-full overflow-hidden shadow-sm border border-outline-variant/10 group">
                    <div class="relative h-40">
                        <img alt="Project Las Palmas Phase II"
                            class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                            data-alt="luxury villas architectural site with white walls and palm trees in a sunny coastal development"
                            src="https://lh3.googleusercontent.com/aida-public/AB6AXuB6X1U4vNExgdQ_eU5RLa4b6noDH5_Avj_lHTtHLyZG-NUDsPMtTzZV9UYhkO-08IzeX1iGrkYhhDR28xI2EEY-O80fxqYTgCNGCNmud3arlWbDxWUI84bjK_XSBpsbQijBOEWfjzsrojLVkcQ2gXynZ9IfwBgVU7yQ19VF5pEsdWt_9Kw1zW8mQSo4lqo-QQVXKb3diG9x2sTuy_tbzLbae5getWa9XAkp7q-gxNQfBsN_06IaSFmVixRgJxm0Cllr_5_OCF7eWdxC" />
                        <div class="absolute inset-0 bg-gradient-to-t from-primary/80 to-transparent"></div>
                        <div class="absolute bottom-4 left-4">
                            <span
                                class="px-2 py-1 bg-secondary text-on-secondary text-[10px] font-bold rounded-md uppercase">Revisión
                                de Obra</span>
                            <h4 class="text-white font-bold mt-1">Las Palmas Fase II</h4>
                        </div>
                    </div>
                    <div class="p-5">
                        <div class="flex justify-between text-xs font-semibold text-secondary mb-2">
                            <span>Avance Físico</span>
                            <span>12%</span>
                        </div>
                        <div class="w-full h-1.5 bg-outline-variant/20 rounded-full mb-4">
                            <div class="bg-primary h-full rounded-full" style="width: 12%"></div>
                        </div>
                        <button
                            class="w-full py-2 bg-surface-container-low text-primary text-xs font-bold rounded-lg hover:bg-primary hover:text-on-primary transition-all">Detalles
                            Técnicos</button>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection