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

@php
    $secondaryCards = [
        ['wrapper' => 'group', 'accent' => 'bg-primary', 'text' => 'text-primary'],
        ['wrapper' => 'group', 'accent' => 'bg-primary', 'text' => 'text-primary'],
        ['wrapper' => '', 'accent' => 'bg-error', 'text' => 'text-error'],
        ['wrapper' => '', 'accent' => 'bg-primary', 'text' => 'text-primary'],
    ];
@endphp

@section('header-content')
    <header
        class="fixed top-0 right-0 left-0 z-40 bg-white/80 dark:bg-slate-900/80 backdrop-blur-md flex justify-between items-center h-16 px-8 ml-64 border-b border-slate-200/50 shadow-sm">
        <div class="flex flex-col">
            <nav class="flex items-center gap-2 text-[0.6875rem] text-slate-500 font-medium">
                <span>Dashboard</span>
                <span class="material-symbols-outlined text-[10px]" data-icon="chevron_right">chevron_right</span>
                <span>Presupuesto</span>

            </nav>
        </div>

    </header>
@endsection


@section('main-content')
    <header class="mb-8">

        <div class="flex justify-between items-end">
            <div>
                <h2 class="text-3xl font-headline font-extrabold text-primary tracking-tight">Panel general de presupuesto
                </h2>
                <p class="text-on-surface-variant mt-1">{{ $project['name'] }} ·
                    {{ $project['houses'] }} viviendas · {{ $project['model'] }}</p>
            </div>
            <div class="flex gap-3">
                <button
                    class="px-5 py-2.5 bg-surface-container-lowest border border-outline-variant/30 text-primary font-semibold rounded-xl flex items-center gap-2 hover:bg-surface-container transition-colors shadow-sm">
                    <span class="material-symbols-outlined text-[20px]">download</span>
                    <span>Exportar PDF</span>
                </button>
                <button
                    class="px-6 py-2.5 bg-gradient-to-br from-primary to-primary-container text-on-primary font-semibold rounded-xl shadow-md hover:opacity-90 transition-opacity flex items-center gap-2">
                    <span class="material-symbols-outlined text-[20px]">add</span>
                    <span>Nuevo Ajuste</span>
                </button>
            </div>
        </div>
    </header>

    <div class="grid grid-cols-12 gap-6 mb-8">
        <div
            class="col-span-12 lg:col-span-8 bg-gradient-to-br from-primary to-primary-container p-8 rounded-xl relative overflow-hidden group shadow-2xl">
            <div class="relative z-10">
                <div class="flex justify-between items-start mb-10">
                    <div>
                        <span class="text-on-primary/60 text-xs font-bold uppercase tracking-widest mb-1 block">
                            {{ $budget['hero']['label'] }}
                        </span>
                        <h3 class="text-5xl font-headline font-bold text-on-primary">{{ $budget['hero']['amount'] }}<span
                                class="text-xl font-normal opacity-70 ml-1">MXN</span></h3>
                    </div>
                    <div class="bg-white/10 backdrop-blur-md p-4 rounded-xl border border-white/10">
                        <span class="text-on-primary/60 text-xs font-bold uppercase block mb-1">
                            {{ $budget['hero']['chip_label'] }}
                        </span>
                        <div class="flex items-baseline gap-2">
                            <span class="text-3xl font-headline font-bold text-on-primary">
                                {{ $budget['hero']['chip_value'] }}
                            </span>
                            <span class="material-symbols-outlined text-green-400 text-[18px]">trending_up</span>
                        </div>
                    </div>
                </div>
                <div class="grid grid-cols-3 gap-8">
                    @foreach ($budget['hero']['sections'] as $section)
                        <div>
                            <span class="text-on-primary/50 text-xs font-semibold block mb-2">{{ $section['label'] }}</span>
                            <span class="text-2xl font-headline font-bold text-on-primary">{{ $section['amount'] }}</span>
                            <div class="w-full h-1 bg-white/10 rounded-full mt-3 overflow-hidden">
                                <div class="{{ $section['bar_class'] }} h-full" style="width: {{ $section['width'] }}">
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
            <div
                class="absolute right-[-50px] bottom-[-50px] opacity-10 group-hover:scale-110 transition-transform duration-700">
                <span class="material-symbols-outlined text-[300px]"
                    style="font-variation-settings: 'wght' 100;">architecture</span>
            </div>
        </div>
        <div
            class="col-span-12 lg:col-span-4 bg-error-container p-6 rounded-xl border border-error/10 flex flex-col justify-between shadow-sm">
            <div>
                <div class="flex items-center gap-3 mb-6">
                    <div class="w-10 h-10 bg-error rounded-xl flex items-center justify-center shadow-lg shadow-error/20">
                        <span class="material-symbols-outlined text-white"
                            style="font-variation-settings: 'FILL' 1;">warning</span>
                    </div>
                    <h4 class="font-headline font-bold text-on-error-container text-lg">Rubros y alertas</h4>
                </div>
                <div class="space-y-4">
                    @foreach ($budget['risk']['items'] as $item)
                        <div class="flex items-center justify-between p-3 bg-white/40 rounded-xl">
                            <div class="flex items-center gap-3">
                                <span class="material-symbols-outlined text-error">
                                    {{ $loop->first ? 'priority_high' : 'trending_up' }}
                                </span>
                                <span class="text-sm font-semibold text-on-error-container">{{ $item['label'] }}</span>
                            </div>
                            <span class="text-xl font-headline font-bold text-error">{{ $item['value'] }}</span>
                        </div>
                    @endforeach
                </div>
            </div>
            <button
                class="w-full mt-6 py-3 bg-white text-error font-bold rounded-xl border border-error/10 hover:bg-error/5 transition-colors flex items-center justify-center gap-2">
                <span>Revisar Integracion</span>
                <span class="material-symbols-outlined text-[18px]">arrow_forward</span>
            </button>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        @foreach ($budget['secondary'] as $index => $item)
            <div class="bg-surface-container-lowest p-5 rounded-xl shadow-sm hover:shadow-md transition-shadow">
                <span
                    class="text-[10px] font-bold text-outline uppercase tracking-widest block mb-2">{{ $item['label'] }}</span>
                <div class="flex justify-between items-end">
                    <span
                        class="text-2xl font-headline font-bold {{ $secondaryCards[$index]['text'] }}">{{ $item['amount'] }}</span>
                    <span class="text-xs font-semibold text-secondary mb-1">{{ $item['meta'] }}</span>
                </div>
                @if (isset($item['width']))
                    <div class="h-1.5 w-full bg-surface-container rounded-full mt-4">
                        <div class="h-full {{ $secondaryCards[$index]['accent'] }} rounded-full"
                            style="width: {{ $item['width'] }}"></div>
                    </div>
                @else
                    <div
                        class="flex items-center gap-1 mt-4 text-[11px] {{ $index === 2 ? 'text-on-surface-variant' : 'text-green-600' }}">
                        <span class="material-symbols-outlined text-[14px]">{{ $index === 2 ? 'info' : 'verified' }}</span>
                        <span>{{ $item['note'] }}</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-6 rounded-xl shadow-sm">
            <div class="flex justify-between items-center mb-8">
                <div>
                    <h4 class="font-headline font-bold text-primary">{{ $budget['chart']['title'] }}</h4>
                    <p class="text-xs text-on-surface-variant">{{ $budget['chart']['subtitle'] }}</p>
                </div>
                <div class="flex gap-4">
                    @foreach ($budget['chart']['legend'] as $legend)
                        <div class="flex items-center gap-2">
                            <span class="w-3 h-3 {{ $legend['color_class'] }} rounded-full"></span>
                            <span class="text-[10px] font-bold text-outline uppercase">{{ $legend['label'] }}</span>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="h-64 flex items-end justify-between gap-4 px-4">
                @foreach ($budget['chart']['bars'] as $bar)
                    <div class="flex-1 flex flex-col items-center gap-2 group">
                        <div class="w-full flex items-end gap-1 h-full">
                            <div class="flex-1 bg-primary-fixed rounded-t-lg" style="height: {{ $bar['left_height'] }}">
                            </div>
                            <div class="flex-1 bg-primary rounded-t-lg" style="height: {{ $bar['right_height'] }}"></div>
                        </div>
                        <span class="text-[10px] font-semibold text-outline">{{ $bar['label'] }}</span>
                    </div>
                @endforeach
            </div>
        </div>
        <div class="bg-surface-container-highest p-6 rounded-xl shadow-sm border border-primary/5 flex flex-col">
            <div class="flex items-center gap-3 mb-6">
                <span class="material-symbols-outlined text-primary">query_stats</span>
                <h4 class="font-headline font-bold text-primary">{{ $budget['projection']['title'] }}</h4>
            </div>
            <div class="space-y-6 flex-1">
                <div>
                    <div class="flex justify-between mb-2">
                        <span class="text-xs font-semibold text-on-surface-variant">
                            {{ $budget['projection']['progress_label'] }}
                        </span>
                        <span class="text-xs font-bold text-primary">{{ $budget['projection']['progress_value'] }}</span>
                    </div>
                    <div class="w-full h-2 bg-white rounded-full">
                        <div class="h-full bg-tertiary-fixed-dim rounded-full"
                            style="width: {{ $budget['projection']['progress_width'] }}"></div>
                    </div>
                </div>
                <div class="p-4 bg-white/60 rounded-xl border border-white/40">
                    <span class="text-[10px] font-bold text-outline uppercase block mb-1">
                        {{ $budget['projection']['card_label'] }}
                    </span>
                    <span
                        class="text-xl font-headline font-bold text-primary">{{ $budget['projection']['card_amount'] }}</span>
                    <div class="mt-3 flex items-center gap-2 text-xs text-on-surface-variant">
                        <span class="material-symbols-outlined text-[14px]">calendar_month</span>
                        <span>{{ $budget['projection']['card_meta'] }}</span>
                    </div>
                </div>
            </div>
            <button
                class="w-full mt-6 py-3 bg-primary text-on-primary font-semibold rounded-xl text-sm hover:opacity-95 transition-opacity">
                {{ $budget['projection']['button_label'] }}
            </button>
        </div>
    </div>

    <div class="grid grid-cols-1 xl:grid-cols-3 gap-8">
        <div
            class="xl:col-span-2 bg-surface-container-lowest rounded-xl shadow-sm overflow-hidden border border-outline-variant/10">
            <div class="p-6 border-b border-outline-variant/10 flex justify-between items-center">
                <h4 class="font-headline font-bold text-primary">Desglose por rubro principal</h4>
                <button class="text-xs font-bold text-primary flex items-center gap-1">
                    <span>Filtrar</span>
                    <span class="material-symbols-outlined text-[16px]">filter_list</span>
                </button>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-left">
                    <thead>
                        <tr class="bg-surface-container-low/50">
                            <th class="px-6 py-4 text-[11px] font-bold text-outline uppercase tracking-wider">Rubro</th>
                            <th class="px-6 py-4 text-[11px] font-bold text-outline uppercase tracking-wider">Presupuesto
                            </th>
                            <th class="px-6 py-4 text-[11px] font-bold text-outline uppercase tracking-wider">Participacion
                            </th>
                            <th class="px-6 py-4 text-[11px] font-bold text-outline uppercase tracking-wider">Status</th>
                            <th class="px-6 py-4 text-[11px] font-bold text-outline uppercase tracking-wider">Accion</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-outline-variant/10">
                        @foreach ($budget['breakdown'] as $row)
                            <tr class="hover:bg-surface-container-low/30 transition-colors cursor-pointer group">
                                <td class="px-6 py-5">
                                    <div class="flex items-center gap-3">
                                        <div class="w-2 h-8 {{ $row['line_class'] }} rounded-full"></div>
                                        <div>
                                            <span class="block text-sm font-bold text-primary">{{ $row['name'] }}</span>
                                            <span class="block text-[10px] text-outline">{{ $row['family'] }}</span>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-5">
                                    <span class="text-sm font-semibold text-primary">{{ $row['amount'] }}</span>
                                </td>
                                <td class="px-6 py-5">
                                    <div class="w-32">
                                        <div class="flex justify-between mb-1">
                                            <span
                                                class="text-[10px] font-bold {{ $row['metric_class'] }}">{{ $row['metric'] }}</span>
                                        </div>
                                        <div class="h-1.5 w-full bg-surface-container rounded-full">
                                            <div class="h-full {{ $row['bar_class'] }} rounded-full"
                                                style="width: {{ $row['width'] }}"></div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-5">
                                    <span class="px-2 py-1 {{ $row['status_class'] }} text-[10px] font-bold rounded-full">
                                        {{ $row['status_label'] }}
                                    </span>
                                </td>
                                <td class="px-6 py-5">
                                    <span
                                        class="material-symbols-outlined text-outline group-hover:text-primary transition-colors">arrow_forward_ios</span>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        <div
            class="bg-surface-container-lowest rounded-xl shadow-sm border border-outline-variant/10 overflow-hidden flex flex-col">
            <div class="p-6 border-b border-outline-variant/10">
                <h4 class="font-headline font-bold text-primary">Rubros prioritarios</h4>
                <p class="text-xs text-on-surface-variant">Partidas con mayor peso dentro del presupuesto base</p>
            </div>
            <div class="p-4 space-y-4 flex-1">
                @foreach ($budget['highlights'] as $item)
                    <div class="p-4 rounded-xl border-l-4 {{ $item['border_class'] }}">
                        <div class="flex justify-between items-start mb-1">
                            <span class="text-xs font-bold text-primary">{{ $item['title'] }}</span>
                            <span class="text-xs font-extrabold {{ $item['value_class'] }}">{{ $item['value'] }}</span>
                        </div>
                        <p class="text-[10px] text-on-surface-variant mb-3">{{ $item['description'] }}</p>
                        <div class="flex justify-between items-center">
                            <span class="text-[10px] font-semibold text-secondary uppercase">{{ $item['meta'] }}</span>
                            <button class="text-[10px] font-bold text-primary underline">Ver detalle</button>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="p-4 bg-surface-container-low/50">
                <button
                    class="w-full py-3 text-sm font-bold text-primary border border-primary/20 rounded-xl hover:bg-white transition-colors">
                    Auditoria Completa de Rubros
                </button>
            </div>
        </div>
    </div>
@endsection