@extends('layouts.dashboard.construction', ['section' => 'home'])

@section('main-header')
    <header
        class="fixed top-0 right-0 w-[calc(100%-16rem)] h-16 bg-white/80 backdrop-blur-md shadow-sm flex items-center justify-between px-8 z-40 transition-all duration-300">
        <div class="flex items-center gap-6">
            <div class="relative group">
                <button
                    class="flex items-center gap-2 font-['Manrope'] text-sm font-semibold text-slate-900 bg-slate-50 px-4 py-2 rounded-xl">
                    <span class="material-symbols-outlined text-base">location_city</span>
                    Residencial Valle Alto
                    <span class="material-symbols-outlined text-base">expand_more</span>
                </button>
            </div>
            <div class="h-6 w-[1px] bg-slate-200"></div>
            <div class="flex items-center gap-4">
                <span class="text-xs text-slate-500 font-medium">Status: <span class="text-green-600 font-bold">On
                        Track</span></span>
            </div>
        </div>
        <div class="flex items-center gap-4">
            <button class="p-2 text-slate-500 hover:text-slate-900 transition-all">
                <span class="material-symbols-outlined">notifications</span>
            </button>
            <button class="p-2 text-slate-500 hover:text-slate-900 transition-all">
                <span class="material-symbols-outlined">apps</span>
            </button>
            <div class="w-8 h-8 rounded-full overflow-hidden border-2 border-primary-fixed">
                <img alt="User avatar" class="w-full h-full object-cover"
                    data-alt="close-up portrait of a middle-aged executive man with a professional smile in a bright corporate office setting"
                    src="https://lh3.googleusercontent.com/aida-public/AB6AXuAOSRk5NZ8dW_KR9YhWXsm62LRlvRqLPviLE7aNBRWviVC7afPJnyD1fcXo6dQk0gtcljsTUJNIG5yQVlFt5efUHNaHztpoRExY5dUq1bCyrXv1aP1xRaAtAiSaRwMu-HOTZ1H-574hUgNEyRZfF6VtFzQF7L0YU7FrCpM5qHnV6j_reA58qSMX8As_WMfuyvqFxOKHQFVpYDcHSQMpbTl0-MhfCm3u26CvkhQwap2DHvcRkLwkqRHrW7IvUDJ-wjLHi6T1S3YRdH3e" />
            </div>
        </div>
    </header>
@endsection

@section('main-content')
    <div class="p-8 max-w-[1600px] mx-auto">
        <!-- Dashboard Header & Filters -->
        <div class="flex flex-col md:flex-row md:items-end justify-between mb-8 gap-4">
            <div>
                <h2 class="font-headline text-3xl font-bold text-on-surface">Executive Overview</h2>
                <p class="text-on-surface-variant mt-1">Real-time construction and sales performance data.</p>
            </div>
            <div class="flex flex-wrap items-center gap-3">
                <div class="flex flex-col gap-1">
                    <label class="text-[10px] font-bold uppercase text-slate-400 px-1">Project</label>
                    <select
                        class="bg-white border-0 ring-1 ring-outline-variant/30 text-sm font-medium rounded-xl focus:ring-primary px-4 py-2 pr-10">
                        <option>All Projects</option>
                        <option>Residencial Valle Alto</option>
                        <option>Torre Lomas</option>
                    </select>
                </div>
                <div class="flex flex-col gap-1">
                    <label class="text-[10px] font-bold uppercase text-slate-400 px-1">Stage</label>
                    <select
                        class="bg-white border-0 ring-1 ring-outline-variant/30 text-sm font-medium rounded-xl focus:ring-primary px-4 py-2 pr-10">
                        <option>Foundation</option>
                        <option>Structural</option>
                        <option>Finishes</option>
                    </select>
                </div>
                <div class="flex flex-col gap-1">
                    <label class="text-[10px] font-bold uppercase text-slate-400 px-1">Timeframe</label>
                    <button
                        class="bg-white border-0 ring-1 ring-outline-variant/30 text-sm font-medium rounded-xl px-4 py-2 flex items-center gap-2">
                        Week 42, 2023
                        <span class="material-symbols-outlined text-sm">calendar_today</span>
                    </button>
                </div>
            </div>
        </div>
        <!-- Bento Grid - KPIs -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <!-- Main Progress -->
            <div
                class="lg:col-span-2 bg-primary-gradient rounded-full p-8 text-white flex flex-col justify-between shadow-xl relative overflow-hidden">
                <div class="relative z-10">
                    <p class="text-primary-fixed/70 text-sm font-semibold uppercase tracking-wider">General Progress</p>
                    <div class="flex items-baseline gap-2 mt-2">
                        <span class="text-5xl font-bold font-headline">74.2%</span>
                        <span class="text-green-400 text-sm flex items-center gap-1 font-bold">
                            <span class="material-symbols-outlined text-sm">trending_up</span>
                            +2.4%
                        </span>
                    </div>
                </div>
                <div class="mt-8 relative z-10">
                    <div class="flex justify-between text-xs mb-2 font-medium">
                        <span>Current Phase: Interior Finishes</span>
                        <span>Target: 78.0%</span>
                    </div>
                    <div class="w-full h-3 bg-white/10 rounded-full overflow-hidden">
                        <div class="h-full bg-surface-container-highest rounded-full" style="width: 74.2%"></div>
                    </div>
                </div>
                <!-- Decorative background glow -->
                <div class="absolute -top-24 -right-24 w-64 h-64 bg-primary-container rounded-full blur-3xl opacity-50">
                </div>
            </div>
            <!-- Active vs Finished -->
            <div
                class="bg-surface-container-lowest p-6 rounded-xl shadow-sm flex flex-col justify-between ring-1 ring-outline-variant/15">
                <div>
                    <div class="flex justify-between items-start mb-4">
                        <div class="p-2 bg-secondary-container text-on-secondary-container rounded-lg">
                            <span class="material-symbols-outlined">home_work</span>
                        </div>
                        <div class="flex gap-1">
                            <span class="w-3 h-3 rounded-full bg-green-500"></span>
                        </div>
                    </div>
                    <p class="text-on-surface-variant text-sm font-medium">House Inventory</p>
                    <div class="flex items-end gap-4 mt-2">
                        <div>
                            <p class="text-3xl font-bold text-on-surface font-headline">48</p>
                            <p class="text-[10px] text-slate-500 font-bold uppercase">Active</p>
                        </div>
                        <div class="h-8 w-[1px] bg-slate-200 mb-1"></div>
                        <div>
                            <p class="text-3xl font-bold text-on-surface font-headline">112</p>
                            <p class="text-[10px] text-slate-500 font-bold uppercase">Finished</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Delayed Houses -->
            <div
                class="bg-surface-container-lowest p-6 rounded-xl shadow-sm flex flex-col justify-between ring-1 ring-outline-variant/15">
                <div>
                    <div class="flex justify-between items-start mb-4">
                        <div class="p-2 bg-error-container text-on-error-container rounded-lg">
                            <span class="material-symbols-outlined">schedule</span>
                        </div>
                        <div class="flex gap-1">
                            <span class="w-3 h-3 rounded-full bg-error animate-pulse"></span>
                        </div>
                    </div>
                    <p class="text-on-surface-variant text-sm font-medium">Delayed Tasks</p>
                    <div class="flex items-baseline gap-2 mt-2">
                        <span class="text-3xl font-bold text-on-surface font-headline">12</span>
                        <span class="text-error text-xs font-bold font-body">Critical risk</span>
                    </div>
                    <p class="text-[10px] text-slate-500 mt-2">Mainly electrical supply chain issues</p>
                </div>
            </div>
        </div>
        <!-- Budget & Sales Row -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
            <!-- Spend vs Budget -->
            <div class="lg:col-span-2 bg-surface-container-lowest p-8 rounded-xl shadow-sm ring-1 ring-outline-variant/15">
                <div class="flex items-center justify-between mb-10">
                    <h3 class="font-headline text-lg font-bold">Cumulative Spend vs. Budget</h3>
                    <div class="flex items-center gap-4">
                        <div class="flex items-center gap-2">
                            <div class="w-3 h-3 rounded-full bg-primary"></div>
                            <span class="text-xs font-medium text-slate-500">Budget</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <div class="w-3 h-3 rounded-full bg-secondary-fixed-dim"></div>
                            <span class="text-xs font-medium text-slate-500">Actual</span>
                        </div>
                    </div>
                </div>
                <div class="relative h-64 w-full flex items-end justify-between gap-4">
                    <!-- Simplified Graphic Bars for visualization -->
                    <div class="flex-1 flex flex-col justify-end items-center gap-2 group">
                        <div class="w-full flex items-end gap-1 px-1 h-full">
                            <div class="bg-primary/10 w-1/2 h-[40%] rounded-t-lg transition-all group-hover:bg-primary/20">
                            </div>
                            <div class="bg-primary w-1/2 h-[38%] rounded-t-lg transition-all"></div>
                        </div>
                        <span class="text-[10px] font-bold text-slate-400">MAY</span>
                    </div>
                    <div class="flex-1 flex flex-col justify-end items-center gap-2 group">
                        <div class="w-full flex items-end gap-1 px-1 h-full">
                            <div class="bg-primary/10 w-1/2 h-[55%] rounded-t-lg transition-all group-hover:bg-primary/20">
                            </div>
                            <div class="bg-primary w-1/2 h-[52%] rounded-t-lg transition-all"></div>
                        </div>
                        <span class="text-[10px] font-bold text-slate-400">JUN</span>
                    </div>
                    <div class="flex-1 flex flex-col justify-end items-center gap-2 group">
                        <div class="w-full flex items-end gap-1 px-1 h-full">
                            <div class="bg-primary/10 w-1/2 h-[70%] rounded-t-lg transition-all group-hover:bg-primary/20">
                            </div>
                            <div class="bg-primary w-1/2 h-[68%] rounded-t-lg transition-all"></div>
                        </div>
                        <span class="text-[10px] font-bold text-slate-400">JUL</span>
                    </div>
                    <div class="flex-1 flex flex-col justify-end items-center gap-2 group">
                        <div class="w-full flex items-end gap-1 px-1 h-full">
                            <div class="bg-primary/10 w-1/2 h-[85%] rounded-t-lg transition-all group-hover:bg-primary/20">
                            </div>
                            <div class="bg-primary w-1/2 h-[82%] rounded-t-lg transition-all"></div>
                        </div>
                        <span class="text-[10px] font-bold text-slate-400">AUG</span>
                    </div>
                    <div class="flex-1 flex flex-col justify-end items-center gap-2 group">
                        <div class="w-full flex items-end gap-1 px-1 h-full">
                            <div class="bg-primary/10 w-1/2 h-[95%] rounded-t-lg transition-all group-hover:bg-primary/20">
                            </div>
                            <div class="bg-secondary-fixed-dim w-1/2 h-[98%] rounded-t-lg transition-all"></div>
                        </div>
                        <span class="text-[10px] font-bold text-slate-400">SEP</span>
                    </div>
                    <!-- Current Focus -->
                    <div class="flex-1 flex flex-col justify-end items-center gap-2 group">
                        <div class="w-full flex items-end gap-1 px-1 h-full">
                            <div class="bg-primary/20 w-1/2 h-[100%] rounded-t-lg transition-all"></div>
                            <div class="bg-error w-1/2 h-[105%] rounded-t-lg shadow-lg shadow-error/20 ring-4 ring-white">
                            </div>
                        </div>
                        <span class="text-[10px] font-bold text-on-surface">OCT</span>
                    </div>
                </div>
            </div>
            <!-- Sales Pipeline -->
            <div class="bg-surface-container-lowest p-8 rounded-xl shadow-sm ring-1 ring-outline-variant/15 flex flex-col">
                <h3 class="font-headline text-lg font-bold mb-6">Sales Pipeline</h3>
                <div class="space-y-6 flex-1">
                    <div>
                        <div class="flex justify-between items-end mb-2">
                            <span class="text-xs font-bold text-slate-500 uppercase tracking-tight">Paid Sales</span>
                            <span class="text-sm font-bold text-on-surface">$12.4M</span>
                        </div>
                        <div class="w-full h-2 bg-slate-100 rounded-full">
                            <div class="h-full bg-green-500 rounded-full" style="width: 85%"></div>
                        </div>
                    </div>
                    <div>
                        <div class="flex justify-between items-end mb-2">
                            <span class="text-xs font-bold text-slate-500 uppercase tracking-tight">Signed Sales</span>
                            <span class="text-sm font-bold text-on-surface">$4.2M</span>
                        </div>
                        <div class="w-full h-2 bg-slate-100 rounded-full">
                            <div class="h-full bg-secondary-fixed-dim rounded-full" style="width: 60%"></div>
                        </div>
                    </div>
                    <div>
                        <div class="flex justify-between items-end mb-2">
                            <span class="text-xs font-bold text-slate-500 uppercase tracking-tight">In Process</span>
                            <span class="text-sm font-bold text-on-surface">$2.1M</span>
                        </div>
                        <div class="w-full h-2 bg-slate-100 rounded-full">
                            <div class="h-full bg-primary-fixed-dim rounded-full" style="width: 30%"></div>
                        </div>
                    </div>
                </div>
                <div class="mt-8 pt-6 border-t border-slate-100">
                    <div class="flex justify-between items-center">
                        <span class="text-sm font-medium text-slate-500">Goal for Q4</span>
                        <span class="text-sm font-bold text-on-surface">82% Reached</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- Bottom Row: Alerts & Trends -->
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
            <!-- Critical Alerts -->
            <div
                class="lg:col-span-4 bg-surface-container-lowest rounded-xl shadow-sm ring-1 ring-outline-variant/15 overflow-hidden">
                <div class="p-6 border-b border-slate-100 flex items-center justify-between">
                    <h3 class="font-headline text-lg font-bold flex items-center gap-2">
                        Critical Alerts
                        <span
                            class="inline-flex items-center justify-center w-5 h-5 bg-error text-white text-[10px] font-bold rounded-full">3</span>
                    </h3>
                    <button class="text-xs font-bold text-primary hover:underline">Clear all</button>
                </div>
                <div class="divide-y divide-slate-50">
                    <div class="p-5 hover:bg-slate-50 transition-colors cursor-pointer group">
                        <div class="flex gap-4">
                            <div
                                class="flex-shrink-0 w-10 h-10 rounded-full bg-error/10 text-error flex items-center justify-center">
                                <span class="material-symbols-outlined">priority_high</span>
                            </div>
                            <div class="flex-1">
                                <p class="text-sm font-bold text-on-surface mb-1">Budget Overrun - Zone A</p>
                                <p class="text-xs text-on-surface-variant leading-relaxed line-clamp-2">Electrical
                                    materials cost +12% above projected ceiling. Immediate approval required.</p>
                                <span class="text-[10px] font-medium text-slate-400 mt-2 block">2 hours ago</span>
                            </div>
                        </div>
                    </div>
                    <div class="p-5 hover:bg-slate-50 transition-colors cursor-pointer group">
                        <div class="flex gap-4">
                            <div
                                class="flex-shrink-0 w-10 h-10 rounded-full bg-tertiary-fixed text-on-tertiary-fixed flex items-center justify-center">
                                <span class="material-symbols-outlined">warning</span>
                            </div>
                            <div class="flex-1">
                                <p class="text-sm font-bold text-on-surface mb-1">Permit Expiration</p>
                                <p class="text-xs text-on-surface-variant leading-relaxed">Environmental compliance
                                    certificate expires in 14 days.</p>
                                <span class="text-[10px] font-medium text-slate-400 mt-2 block">5 hours ago</span>
                            </div>
                        </div>
                    </div>
                    <div class="p-5 hover:bg-slate-50 transition-colors cursor-pointer group">
                        <div class="flex gap-4">
                            <div
                                class="flex-shrink-0 w-10 h-10 rounded-full bg-error/10 text-error flex items-center justify-center">
                                <span class="material-symbols-outlined">error_outline</span>
                            </div>
                            <div class="flex-1">
                                <p class="text-sm font-bold text-on-surface mb-1">Payment Overdue</p>
                                <p class="text-xs text-on-surface-variant leading-relaxed">Contractor #092 (Structural)
                                    awaiting payment for Stage 2 completion.</p>
                                <span class="text-[10px] font-medium text-slate-400 mt-2 block">Yesterday</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Sales Trends Chart Section -->
            <div class="lg:col-span-8 bg-surface-container-lowest p-8 rounded-xl shadow-sm ring-1 ring-outline-variant/15">
                <div class="flex items-center justify-between mb-8">
                    <div>
                        <h3 class="font-headline text-lg font-bold">Monthly Sales Trends</h3>
                        <p class="text-xs text-slate-500 mt-1">Comparing 2023 performance against projected targets.</p>
                    </div>
                    <div class="flex items-center bg-slate-50 p-1 rounded-lg">
                        <button
                            class="px-3 py-1 text-xs font-bold text-on-surface bg-white shadow-sm rounded-md">Units</button>
                        <button class="px-3 py-1 text-xs font-bold text-slate-500">Revenue</button>
                    </div>
                </div>
                <div class="h-64 flex items-end gap-1 relative pt-10">
                    <!-- Grid Lines -->
                    <div class="absolute inset-x-0 top-10 border-t border-slate-50 h-0"></div>
                    <div class="absolute inset-x-0 top-1/2 border-t border-slate-50 h-0"></div>
                    <div class="absolute inset-x-0 bottom-0 border-t border-slate-100 h-0"></div>
                    <!-- Visual representation of trend lines -->
                    <div class="flex-1 h-full flex items-end justify-center relative px-2">
                        <div class="w-full bg-primary/40 rounded-t-lg h-[40%]"></div>
                        <div
                            class="absolute bottom-[40%] w-3 h-3 bg-primary border-4 border-white rounded-full shadow-md z-10">
                        </div>
                    </div>
                    <div class="flex-1 h-full flex items-end justify-center relative px-2">
                        <div class="w-full bg-primary/40 rounded-t-lg h-[55%]"></div>
                        <div
                            class="absolute bottom-[55%] w-3 h-3 bg-primary border-4 border-white rounded-full shadow-md z-10">
                        </div>
                    </div>
                    <div class="flex-1 h-full flex items-end justify-center relative px-2">
                        <div class="w-full bg-primary/40 rounded-t-lg h-[45%]"></div>
                        <div
                            class="absolute bottom-[45%] w-3 h-3 bg-primary border-4 border-white rounded-full shadow-md z-10">
                        </div>
                    </div>
                    <div class="flex-1 h-full flex items-end justify-center relative px-2">
                        <div class="w-full bg-primary/40 rounded-t-lg h-[70%]"></div>
                        <div
                            class="absolute bottom-[70%] w-3 h-3 bg-primary border-4 border-white rounded-full shadow-md z-10">
                        </div>
                    </div>
                    <div class="flex-1 h-full flex items-end justify-center relative px-2">
                        <div class="w-full bg-primary/40 rounded-t-lg h-[85%]"></div>
                        <div
                            class="absolute bottom-[85%] w-3 h-3 bg-primary border-4 border-white rounded-full shadow-md z-10">
                        </div>
                    </div>
                    <div class="flex-1 h-full flex items-end justify-center relative px-2">
                        <div class="w-full bg-primary rounded-t-lg h-[92%] shadow-2xl shadow-primary/20"></div>
                        <div
                            class="absolute bottom-[92%] w-3 h-3 bg-primary border-4 border-white rounded-full shadow-md z-10">
                        </div>
                    </div>
                    <div class="flex-1 h-full flex items-end justify-center relative px-2 opacity-50">
                        <div class="w-full border-2 border-dashed border-primary/40 rounded-t-lg h-[95%] bg-transparent">
                        </div>
                    </div>
                </div>
                <div class="flex justify-between px-2 mt-4">
                    <span class="text-[10px] font-bold text-slate-400">MAY</span>
                    <span class="text-[10px] font-bold text-slate-400">JUN</span>
                    <span class="text-[10px] font-bold text-slate-400">JUL</span>
                    <span class="text-[10px] font-bold text-slate-400">AUG</span>
                    <span class="text-[10px] font-bold text-slate-400">SEP</span>
                    <span class="text-[10px] font-bold text-on-surface">OCT</span>
                    <span class="text-[10px] font-bold text-slate-400 uppercase italic">Forecast</span>
                </div>
            </div>
        </div>
    </div>
@endsection