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

@php
    $page = $dashboardPage;
@endphp

@section('header-content')
    @include('dashboard.partials.header')
@endsection

@section('main-content')
    <div class="space-y-2 pb-5">
        <nav class="flex items-center gap-2 text-xs font-medium text-on-primary-container tracking-wide uppercase">
            @foreach ($page['breadcrumb'] as $crumb)
                <span class="{{ $loop->last ? 'text-primary font-bold' : '' }}">{{ $crumb }}</span>
                @unless ($loop->last)
                    <span class="material-symbols-outlined text-[12px]">chevron_right</span>
                @endunless
            @endforeach
        </nav>
        <div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
            <div>
                <h1 class="text-4xl font-extrabold text-on-surface tracking-tight">{{ $page['title'] }}</h1>
                <p class="text-on-surface-variant font-medium mt-1">{{ $page['subtitle'] }}</p>
            </div>
            <div class="flex flex-wrap items-center gap-3">
                @foreach ($page['filters'] as $filter)
                    <select
                        class="bg-surface-container-lowest border-outline-variant/20 rounded-full px-4 py-2 text-sm font-semibold shadow-sm focus:ring-primary/20">
                        @foreach ($filter['options'] as $option)
                            <option>{{ $option }}</option>
                        @endforeach
                    </select>
                @endforeach
                <button class="bg-primary text-on-primary px-6 py-2 rounded-full font-bold text-sm shadow-lg">
                    Aplicar Filtros
                </button>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 pb-5">
        @foreach ($page['kpis'] as $kpi)
            <div class="{{ $kpi['card_class'] }} p-6 rounded-full shadow-sm border border-outline-variant/10">
                <p
                    class="text-xs font-bold uppercase tracking-widest mb-1 {{ str_contains($kpi['card_class'], 'text-white') ? 'text-primary-fixed-dim' : 'text-on-surface-variant' }}">
                    {{ $kpi['label'] }}
                </p>
                <div class="flex items-baseline gap-2">
                    <span class="text-4xl font-bold font-manrope">{{ $kpi['value'] }}</span>
                    @if (isset($kpi['meta']))
                        <span
                            class="text-xs font-bold {{ $kpi['meta_class'] ?? 'text-slate-400' }}">{{ $kpi['meta'] }}</span>
                    @endif
                </div>
                @if (isset($kpi['progress_width']))
                    <div class="mt-4 w-full bg-white/10 h-2 rounded-full overflow-hidden">
                        <div class="bg-primary-fixed h-full rounded-full" style="width: {{ $kpi['progress_width'] }}">
                        </div>
                    </div>
                @endif
            </div>
        @endforeach
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 pb-5">
        <div class="lg:col-span-2 space-y-6">
            <div class="bg-surface-container-lowest rounded-full p-8 shadow-sm">
                <div class="flex justify-between items-center mb-8">
                    <h2 class="text-xl font-bold flex items-center gap-2">
                        <span class="material-symbols-outlined text-primary">timeline</span>
                        Avance de Obra Temporal
                    </h2>
                </div>
                <div class="h-64 flex items-end justify-between gap-4 px-4 border-b border-outline-variant/20 relative">
                    <div class="absolute inset-0 flex flex-col justify-between opacity-5 pointer-events-none">
                        <div class="border-t border-on-surface w-full"></div>
                        <div class="border-t border-on-surface w-full"></div>
                        <div class="border-t border-on-surface w-full"></div>
                        <div class="border-t border-on-surface w-full"></div>
                    </div>
                    @foreach ($page['timeline'] as $item)
                        <div class="group relative flex-1 flex flex-col justify-end items-center gap-1 h-full">
                            <div class="bg-secondary-container w-full rounded-t-lg"
                                style="height: {{ $item['projected'] }}"></div>
                            <div class="bg-primary w-full rounded-t-lg absolute bottom-0 opacity-80"
                                style="height: {{ $item['real'] }}"></div>
                            <span
                                class="text-[10px] font-bold text-on-surface-variant absolute -bottom-6">{{ $item['label'] }}</span>
                        </div>
                    @endforeach
                </div>
                <div class="mt-12 grid grid-cols-3 gap-4">
                    @foreach ($page['stages'] as $stage)
                        <div class="bg-surface-container-low p-4 rounded-xl">
                            <p class="text-[10px] font-bold text-on-surface-variant uppercase mb-1">{{ $stage['label'] }}
                            </p>
                            <div class="flex justify-between items-end">
                                <span class="text-lg font-bold">{{ $stage['value'] }}</span>
                                <span
                                    class="text-[10px] font-bold {{ $stage['status_class'] }}">{{ $stage['status'] }}</span>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="bg-surface-container-lowest rounded-full p-8 shadow-sm">
                <h2 class="text-xl font-bold flex items-center gap-2 mb-8">
                    <span class="material-symbols-outlined text-primary">payments</span>
                    Analisis Financiero
                </h2>
                <div class="space-y-6">
                    <div class="flex flex-col gap-2">
                        <div class="flex justify-between text-sm font-bold">
                            <span>Presupuesto Programado</span>
                            <span>{{ $page['financials']['programmed'] }}</span>
                        </div>
                        <div class="h-4 bg-outline-variant/10 rounded-full w-full">
                            <div class="bg-slate-300 h-full w-full rounded-full"></div>
                        </div>
                    </div>
                    <div class="flex flex-col gap-2">
                        <div class="flex justify-between text-sm font-bold">
                            <span>Garantia retenida</span>
                            <span class="text-primary">{{ $page['financials']['retention'] }}</span>
                        </div>
                        <div class="h-4 bg-outline-variant/10 rounded-full w-full">
                            <div class="bg-slate-300 h-full w-full rounded-full"></div>
                        </div>
                    </div>
                    <div class="flex flex-col gap-2">
                        <div class="flex justify-between text-sm font-bold">
                            <span>Gasto Real Ejecutado</span>
                            <span class="text-primary">{{ $page['financials']['real'] }}</span>
                        </div>
                        <div class="h-4 bg-outline-variant/10 rounded-full w-full relative">
                            <div class="bg-primary h-full rounded-full"
                                style="width: {{ $page['financials']['real_width'] }}"></div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-8">
                        <div class="border border-outline-variant/20 rounded-xl p-4">
                            <p class="text-[10px] font-bold text-on-surface-variant uppercase">Comprometido</p>
                            <p class="text-lg font-extrabold mt-1">{{ $page['financials']['committed'] }}</p>
                        </div>
                        <div class="border border-outline-variant/20 rounded-xl p-4">
                            <p class="text-[10px] font-bold text-on-surface-variant uppercase">Disponible</p>
                            <p class="text-lg font-extrabold mt-1">{{ $page['financials']['available'] }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="lg:col-span-1 space-y-8">
            <div class="bg-surface-container-lowest rounded-full p-8 shadow-sm">
                <h2 class="text-xl font-bold flex items-center gap-2 mb-6">
                    <span class="material-symbols-outlined text-primary">schedule</span>
                    Cronograma
                </h2>
                <div class="space-y-6">
                    <div class="relative pl-6 border-l-2 border-primary/20 space-y-8">
                        @foreach ($page['schedule'] as $item)
                            <div class="relative">
                                <div
                                    class="absolute -left-[31px] top-0 w-4 h-4 rounded-full {{ $item['dot_class'] }} border-4 border-white">
                                </div>
                                <p class="text-xs font-bold text-on-surface-variant">{{ $item['title'] }}</p>
                                <p class="text-sm font-bold">{{ $item['date'] }}</p>
                                <p class="text-[10px] font-bold {{ $item['status_class'] }}">{{ $item['status'] }}</p>
                            </div>
                        @endforeach
                    </div>
                    <div class="pt-4 border-t border-outline-variant/20">
                        <h3 class="text-xs font-bold uppercase tracking-widest text-on-surface-variant mb-3">Tabla de
                            Desviacion</h3>
                        <div class="space-y-2">
                            @foreach ($page['schedule_summary'] as $row)
                                <div class="flex justify-between text-xs py-1 {{ $row['row_class'] ?? '' }}">
                                    <span>{{ $row['label'] }}</span>
                                    <span class="font-bold">{{ $row['value'] }}</span>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-surface-container-lowest rounded-full p-8 shadow-sm">
                <h2 class="text-xl font-bold flex items-center gap-2 mb-6">
                    <span class="material-symbols-outlined text-primary">inventory_2</span>
                    Materiales Criticos
                </h2>
                <div class="space-y-4">
                    @foreach ($page['materials'] as $material)
                        <div class="p-3 bg-surface-container-low rounded-xl flex items-center justify-between">
                            <div class="flex items-center gap-3">
                                <div class="w-8 h-8 {{ $material['icon_wrap'] }} rounded flex items-center justify-center">
                                    <span class="material-symbols-outlined text-lg">{{ $material['icon'] }}</span>
                                </div>
                                <div>
                                    <p class="text-xs font-bold">{{ $material['name'] }}</p>
                                    <p class="text-[10px] text-on-surface-variant">{{ $material['stock'] }}</p>
                                </div>
                            </div>
                            <span class="text-[10px] font-bold text-slate-500">{{ $material['state'] }}</span>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
@endsection