@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 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-[14px]">chevron_right</span>
                @endunless
            @endforeach
        </nav>
        <div class="flex items-end justify-between">
            <div>
                <h2 class="font-headline text-3xl font-bold text-on-surface tracking-tight">{{ $page['title'] }}</h2>
                <p class="text-on-surface-variant font-body">{{ $page['subtitle'] }}</p>
            </div>
            <div class="flex gap-3">
                @foreach ($page['actions'] as $action)
                    <button
                        class="{{ $action['style'] === 'primary' ? 'flex items-center gap-2 px-4 py-2 primary-gradient text-white rounded-full font-semibold text-sm shadow-lg shadow-primary/20' : 'flex items-center gap-2 px-4 py-2 bg-surface-container-lowest text-primary border border-outline-variant/20 rounded-full font-semibold text-sm transition-all hover:bg-surface-container-low' }}">
                        <span class="material-symbols-outlined text-[18px]">{{ $action['style'] === 'primary' ? 'add' : 'download' }}</span>
                        {{ $action['label'] }}
                    </button>
                @endforeach
            </div>
        </div>
    </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 flex flex-col justify-between h-40 relative overflow-hidden">
                <div class="flex justify-between items-start">
                    <span class="material-symbols-outlined p-2 rounded-xl {{ $kpi['icon_wrap'] }}">{{ $kpi['icon'] }}</span>
                    <span class="text-xs font-bold px-2 py-1 rounded-lg {{ $kpi['badge_class'] }}">{{ $kpi['badge'] }}</span>
                </div>
                <div>
                    <div class="flex justify-between items-end mb-1">
                        <span class="block font-headline text-4xl font-bold">{{ $kpi['value'] }}</span>
                    </div>
                    <span class="text-xs font-medium uppercase tracking-tighter {{ str_contains($kpi['card_class'], 'text-white') ? 'text-white/70' : 'text-on-surface-variant' }}">
                        {{ $kpi['label'] }}
                    </span>
                    <p class="text-xs mt-1 {{ str_contains($kpi['card_class'], 'text-white') ? 'text-white/70' : 'text-on-surface-variant' }}">
                        {{ $kpi['meta'] }}
                    </p>
                </div>
            </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-8">
                <h3 class="font-headline text-xl font-bold">Avance por proceso</h3>
                <div class="flex gap-4">
                    <div class="flex items-center gap-2 text-xs font-medium">
                        <span class="w-3 h-3 rounded-full bg-primary"></span> Completado
                    </div>
                    <div class="flex items-center gap-2 text-xs font-medium">
                        <span class="w-3 h-3 rounded-full bg-outline-variant"></span> Pendiente
                    </div>
                </div>
            </div>
            <div class="space-y-8">
                @foreach ($page['processes'] as $process)
                    <div class="relative">
                        <div class="flex justify-between mb-2">
                            <span class="text-sm font-semibold uppercase tracking-wide">{{ $process['label'] }}</span>
                            <span class="text-sm font-bold">{{ $process['value'] }}</span>
                        </div>
                        <div class="w-full bg-surface-container-low h-4 rounded-full overflow-hidden">
                            <div class="bg-primary h-full rounded-full" style="width: {{ $process['width'] }}"></div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="bg-primary rounded-full p-8 text-white relative overflow-hidden flex flex-col">
            <h3 class="font-headline text-xl font-bold mb-2">Tendencias mensuales</h3>
            <p class="text-on-primary-container text-xs mb-8">Ritmo de cierres y frentes concluidos por mes</p>
            <div class="flex-grow flex items-end justify-between gap-2 h-32 mb-6">
                @foreach ($page['trends'] as $trend)
                    <div class="w-full rounded-t-lg relative group {{ $trend['class'] }}" style="height: {{ $trend['height'] }}">
                        <div
                            class="absolute -top-6 left-1/2 -translate-x-1/2 text-[10px] font-bold opacity-0 group-hover:opacity-100 transition-opacity">
                            {{ $trend['value'] }}
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="flex justify-between text-[10px] font-bold uppercase tracking-widest text-on-primary-container">
                @foreach ($page['trends'] as $trend)
                    <span>{{ $trend['label'] }}</span>
                @endforeach
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 xl:grid-cols-12 gap-6">
        <div class="xl:col-span-4 bg-surface-container-low p-8 rounded-full border border-outline-variant/10">
            <h3 class="font-headline text-xl font-bold mb-6">Resumen financiero</h3>
            <div class="space-y-6">
                <div class="p-4 bg-surface-container-lowest rounded-xl">
                    <p class="text-xs font-bold text-on-surface-variant uppercase mb-2">Presupuesto total</p>
                    <div class="text-2xl font-bold font-headline">{{ $page['finance']['total'] }}</div>
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <div class="p-4 bg-primary-fixed rounded-xl">
                        <span class="block text-[10px] font-bold uppercase mb-1 opacity-70">Ejercido</span>
                        <span class="block font-bold text-lg">{{ $page['finance']['spent'] }}</span>
                    </div>
                    <div class="p-4 bg-white rounded-xl">
                        <span class="block text-[10px] font-bold uppercase mb-1 opacity-70">Restante</span>
                        <span class="block font-bold text-lg">{{ $page['finance']['remaining'] }}</span>
                    </div>
                </div>
                <div class="pt-4">
                    <div class="flex justify-between items-center mb-2">
                        <span class="text-sm font-semibold">Ejecucion presupuestal</span>
                        <span class="text-sm font-bold">{{ $page['finance']['execution'] }}</span>
                    </div>
                    <div class="w-full bg-outline-variant/20 h-2 rounded-full">
                        <div class="bg-primary h-2 rounded-full" style="width: {{ $page['finance']['execution'] }}"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="xl:col-span-8 bg-surface-container-lowest p-8 rounded-full shadow-sm overflow-hidden">
            <div class="flex justify-between items-center mb-8">
                <div>
                    <h3 class="font-headline text-xl font-bold">Incidencias prioritarias</h3>
                    <p class="text-xs text-on-surface-variant">Desviaciones activas que requieren seguimiento operativo</p>
                </div>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-left">
                    <thead>
                        <tr class="text-xs font-bold uppercase tracking-wider text-on-surface-variant border-b border-outline-variant/10">
                            <th class="pb-4 px-2">Unidad / Frente</th>
                            <th class="pb-4 px-2">Motivo</th>
                            <th class="pb-4 px-2">Responsable</th>
                            <th class="pb-4 px-2 text-right">Desviacion</th>
                            <th class="pb-4 px-2">Estado</th>
                        </tr>
                    </thead>
                    <tbody class="text-sm divide-y divide-outline-variant/5">
                        @foreach ($page['issues'] as $issue)
                            <tr class="hover:bg-surface-container-low transition-colors group">
                                <td class="py-4 px-2 font-bold">{{ $issue['home'] }}</td>
                                <td class="py-4 px-2 text-on-surface-variant font-medium">{{ $issue['reason'] }}</td>
                                <td class="py-4 px-2">{{ $issue['owner'] }}</td>
                                <td class="py-4 px-2 text-right font-bold text-error">{{ $issue['delay'] }}</td>
                                <td class="py-4 px-2 text-right">
                                    <span class="px-2 py-1 rounded-md text-[10px] font-bold uppercase {{ $issue['status_class'] }}">
                                        {{ $issue['status'] }}
                                    </span>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection