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

@php
    $page = $dashboardPage;
@endphp

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

@section('main-content')
    <div class="mb-8">
        <nav class="flex items-center gap-2 text-xs font-medium text-on-primary-container/60 mb-2 uppercase tracking-widest">
            @foreach ($page['breadcrumb'] as $crumb)
                <span class="{{ $loop->last ? 'text-on-surface' : '' }}">{{ $crumb }}</span>
                @unless ($loop->last)
                    <span class="material-symbols-outlined text-xs">chevron_right</span>
                @endunless
            @endforeach
        </nav>
        <h2 class="text-3xl font-headline font-bold text-on-surface">{{ $page['title'] }}</h2>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        @foreach ($page['kpis'] as $kpi)
            <div class="{{ $kpi['card_class'] }} p-6 rounded-full shadow-sm">
                <div class="flex justify-between items-start mb-4">
                    <span
                        class="text-sm font-medium {{ str_contains($kpi['card_class'], 'text-white') ? 'text-white/70' : 'text-on-surface-variant' }}">{{ $kpi['label'] }}</span>
                </div>
                <div class="text-3xl font-headline font-bold">{{ $kpi['value'] }}</div>
                <div
                    class="mt-4 text-xs font-semibold {{ str_contains($kpi['card_class'], 'text-white') ? 'text-tertiary-fixed' : 'text-on-surface-variant' }}">
                    {{ $kpi['meta'] }}
                </div>
                @if ($kpi['progress_width'])
                    <div class="mt-4 flex items-center gap-2">
                        <div class="flex-1 h-1.5 bg-outline-variant/20 rounded-full overflow-hidden">
                            <div class="h-full bg-primary rounded-full" style="width: {{ $kpi['progress_width'] }}"></div>
                        </div>
                        <span class="text-xs font-bold text-on-surface">{{ trim($kpi['progress_width'], '%') }}%</span>
                    </div>
                @endif
            </div>
        @endforeach
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
        <div class="lg:col-span-2 bg-surface-container-lowest p-8 rounded-full shadow-sm">
            <div class="flex justify-between items-center mb-10">
                <div>
                    <h3 class="text-lg font-headline font-bold text-on-surface">Desviacion presupuestal por obra</h3>
                    <p class="text-sm text-on-surface-variant">Comparacion entre inversion planeada y real</p>
                </div>
            </div>
            <div class="flex items-end justify-between h-64 px-4">
                @foreach ($page['deviation'] as $bar)
                    <div class="flex flex-col items-center gap-2 w-16">
                        <div class="w-full flex justify-center items-end gap-1 h-48">
                            <div class="w-4 bg-outline-variant/20 rounded-t-lg"
                                style="height: {{ $bar['planned_height'] }}"></div>
                            <div class="w-4 bg-primary rounded-t-lg" style="height: {{ $bar['real_height'] }}"></div>
                        </div>
                        <span
                            class="text-[10px] font-bold uppercase tracking-tighter text-on-surface-variant">{{ $bar['label'] }}</span>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="flex flex-col gap-4">
            <h3 class="text-lg font-headline font-bold text-on-surface px-2">Riesgos de sobrepresupuesto</h3>
            @foreach ($page['risks'] as $risk)
                <div class="{{ $risk['card_class'] }} p-5 rounded-full">
                    <h4 class="font-bold text-sm mb-1 text-on-surface">{{ $risk['title'] }}</h4>
                    <p class="text-xs text-on-surface-variant mb-4">{{ $risk['description'] }}</p>
                    <div class="flex items-center gap-3">
                        <div class="flex-1 h-2 bg-black/5 rounded-full overflow-hidden">
                            <div class="h-full {{ $risk['bar_class'] }} rounded-full" style="width: {{ $risk['width'] }}">
                            </div>
                        </div>
                        <span class="text-xs font-bold {{ $risk['value_class'] }}">{{ $risk['value'] }}</span>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <div class="bg-surface-container-lowest rounded-full shadow-sm overflow-hidden">
        <div class="px-8 py-6 flex justify-between items-center border-b border-outline-variant/10">
            <h3 class="text-lg font-headline font-bold text-on-surface">Flujo de efectivo reciente</h3>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-left">
                <thead>
                    <tr class="bg-surface-container-low/50">
                        <th class="px-8 py-4 text-[10px] font-bold uppercase tracking-widest text-on-surface-variant">
                            Referencia</th>
                        <th class="px-8 py-4 text-[10px] font-bold uppercase tracking-widest text-on-surface-variant">
                            Entidad</th>
                        <th class="px-8 py-4 text-[10px] font-bold uppercase tracking-widest text-on-surface-variant">
                            Categoria</th>
                        <th
                            class="px-8 py-4 text-[10px] font-bold uppercase tracking-widest text-on-surface-variant text-right">
                            Presupuesto</th>
                        <th
                            class="px-8 py-4 text-[10px] font-bold uppercase tracking-widest text-on-surface-variant text-right">
                            Pagado</th>
                        <th
                            class="px-8 py-4 text-[10px] font-bold uppercase tracking-widest text-on-surface-variant text-right">
                            Pendiente</th>
                        <th
                            class="px-8 py-4 text-[10px] font-bold uppercase tracking-widest text-on-surface-variant text-right">
                            Retención</th>
                        <th
                            class="px-8 py-4 text-[10px] font-bold uppercase tracking-widest text-on-surface-variant text-center">
                            Estado</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-outline-variant/10">
                    @foreach ($page['cashflow'] as $row)
                        <tr class="hover:bg-surface-container-low transition-colors group">
                            <td class="px-8 py-5">
                                <span class="text-xs font-bold text-on-surface">{{ $row['reference'] }}</span>
                                <p class="text-[10px] text-on-surface-variant">{{ $row['date'] }}</p>
                            </td>
                            <td class="px-8 py-5"><span
                                    class="text-xs font-medium text-on-surface">{{ $row['entity'] }}</span></td>
                            <td class="px-8 py-5">
                                <span
                                    class="px-2 py-1 text-[10px] font-bold rounded-lg {{ $row['category_class'] }}">{{ $row['category'] }}</span>
                            </td>
                            <td class="px-8 py-5 text-right"><span
                                    class="text-xs font-bold text-on-surface">{{ $row['budget'] }}</span></td>
                            <td class="px-8 py-5 text-right"><span
                                    class="text-xs font-bold text-on-surface">{{ $row['amount'] }}</span></td>
                            <td class="px-8 py-5 text-right"><span
                                    class="text-xs font-bold text-on-surface">{{ $row['pending'] }}</span></td>
                            <td class="px-8 py-5 text-right"><span
                                    class="text-xs font-bold text-on-surface">{{ $row['retention'] }}</span></td>
                            <td class="px-8 py-5 text-center">
                                <span
                                    class="flex justify-center items-center gap-1.5 text-[10px] font-bold {{ $row['status_class'] }}">
                                    @if ($row['status_icon'] === 'dot')
                                        <span class="w-1.5 h-1.5 rounded-full bg-primary animate-pulse"></span>
                                    @else
                                        <span class="material-symbols-outlined text-xs">{{ $row['status_icon'] }}</span>
                                    @endif
                                    {{ $row['status'] }}
                                </span>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="px-8 py-4 bg-surface-container-low/20 text-center">
            <button
                class="text-[10px] font-bold uppercase tracking-widest text-on-surface-variant hover:text-primary transition-colors">
                {{ $page['footer'] }}
            </button>
        </div>
    </div>
@endsection