@php
    $gestioniTab = request()->query('gestioni_tab', 'gestioni');
    $gestioniTab = in_array($gestioniTab, ['gestioni', 'periodi', 'straordinarie', 'archivio'], true) ? $gestioniTab : 'gestioni';
    $baseUrl = \App\Filament\Pages\Condomini\StabilePage::getUrl(panel: 'admin-filament');
    $mostraRiscaldamento = (bool) data_get($stabile->configurazione_avanzata, 'mostra_riscaldamento', false);
    $mesi = [
        1 => 'Gen', 2 => 'Feb', 3 => 'Mar', 4 => 'Apr', 5 => 'Mag', 6 => 'Giu',
        7 => 'Lug', 8 => 'Ago', 9 => 'Set', 10 => 'Ott', 11 => 'Nov', 12 => 'Dic',
    ];
    $gestioneSelezionata = $this->gestioneSelezionataId
        ? \App\Models\GestioneContabile::query()->find($this->gestioneSelezionataId)
        : ($this->gestioneOrdinariaId ? \App\Models\GestioneContabile::query()->find($this->gestioneOrdinariaId) : null);
    $gestioneTipo = $gestioneSelezionata?->tipo_gestione;
    $checklistItems = \App\Models\ChecklistFineAnnoItem::query()
        ->where('is_active', true)
        ->orderBy('sort_order')
        ->get();
    $straordinarie = \App\Models\GestioneContabile::query()
        ->where('stabile_id', $stabile->id)
        ->where('tipo_gestione', 'straordinaria')
        ->orderByDesc('anno_gestione')
        ->get();
    $straordId = request()->integer('straord_id') ?: ($straordinarie->first()?->id ?? null);
    $straord = $straordId ? $straordinarie->firstWhere('id', $straordId) : null;
    $straordTab = request()->query('straord_tab', 'operazioni');
    $straordTab = in_array($straordTab, ['operazioni', 'preventivo', 'rate', 'incassi', 'consuntivo'], true) ? $straordTab : 'operazioni';
    $legacyCode = $stabile->codice_stabile ?? null;
    $legacyYear = $straord?->anno_gestione;
    $legacyStraordNum = $straord?->numero_straordinaria;
    $legacyPreventivo = collect();
    $legacyVociMap = [];
    $tabellaMap = [];
    foreach (\App\Models\TabellaMillesimale::query()->where('stabile_id', $stabile->id)->get() as $t) {
        $keys = array_filter([
            strtoupper(trim((string) ($t->codice_tabella ?? ''))),
            strtoupper(trim((string) ($t->legacy_codice ?? ''))),
            strtoupper(trim((string) ($t->nome_tabella ?? ''))),
        ]);
        foreach ($keys as $key) {
            $tabellaMap[$key] = $t;
        }
    }
    if ($legacyCode && $legacyStraordNum && \Illuminate\Support\Facades\Schema::connection('gescon_import')->hasTable('prevent_straordinari')) {
        $q = \Illuminate\Support\Facades\DB::connection('gescon_import')
            ->table('prevent_straordinari')
            ->where('cod_stabile', $legacyCode)
            ->where('n_stra', $legacyStraordNum);
        if ($legacyYear && \Illuminate\Support\Facades\Schema::connection('gescon_import')->hasColumn('prevent_straordinari', 'legacy_year')) {
            $q->where('legacy_year', (string) $legacyYear);
        }
        $legacyPreventivo = $q->get();

        $codici = $legacyPreventivo->pluck('cod_spe')->filter()->unique()->values();
        if ($codici->isNotEmpty() && \Illuminate\Support\Facades\Schema::connection('gescon_import')->hasTable('voc_spe')) {
            $vq = \Illuminate\Support\Facades\DB::connection('gescon_import')
                ->table('voc_spe')
                ->where('cod_stabile', $legacyCode)
                ->whereIn('cod', $codici);
            if ($legacyYear && \Illuminate\Support\Facades\Schema::connection('gescon_import')->hasColumn('voc_spe', 'legacy_year')) {
                $vq->where('legacy_year', (string) $legacyYear);
            }
            $legacyVociMap = $vq->get()->keyBy('cod')->all();
        }
    }
@endphp

<div class="space-y-4">
    <div class="border-b border-gray-200 dark:border-gray-700">
        <nav class="-mb-px flex flex-wrap gap-2" aria-label="Sub tabs">
            <a
                href="{{ $baseUrl . '?tab=gestioni&gestioni_tab=gestioni' }}"
                class="px-3 py-2 text-sm font-medium rounded-t-lg border-b-2 {{ $gestioniTab === 'gestioni' ? 'border-primary-600 text-primary-600 dark:text-primary-400' : 'border-transparent text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100' }}"
            >
                Gestioni
            </a>
            <a
                href="{{ $baseUrl . '?tab=gestioni&gestioni_tab=periodi' }}"
                class="px-3 py-2 text-sm font-medium rounded-t-lg border-b-2 {{ $gestioniTab === 'periodi' ? 'border-primary-600 text-primary-600 dark:text-primary-400' : 'border-transparent text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100' }}"
            >
                Periodi emissione rate
            </a>
            <a
                href="{{ $baseUrl . '?tab=gestioni&gestioni_tab=straordinarie' }}"
                class="px-3 py-2 text-sm font-medium rounded-t-lg border-b-2 {{ $gestioniTab === 'straordinarie' ? 'border-primary-600 text-primary-600 dark:text-primary-400' : 'border-transparent text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100' }}"
            >
                Straordinarie
            </a>
            <a
                href="{{ $baseUrl . '?tab=gestioni&gestioni_tab=archivio' }}"
                class="px-3 py-2 text-sm font-medium rounded-t-lg border-b-2 {{ $gestioniTab === 'archivio' ? 'border-primary-600 text-primary-600 dark:text-primary-400' : 'border-transparent text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100' }}"
            >
                Archivio
            </a>
        </nav>
    </div>

    @if($gestioniTab === 'gestioni')
        <div class="text-sm text-gray-600 dark:text-gray-400">
            Elenco completo delle gestioni collegate allo stabile (aperte e chiuse), con sincronizzazione automatica degli anni ordinari dal legacy. La stessa anagrafica è disponibile anche in
            <a class="text-primary-600 hover:underline" href="{{ \App\Filament\Pages\Gescon\GestioniArchivio::getUrl(panel: 'admin-filament') }}" target="_blank" rel="noopener">GESCON → Gestioni</a>.
        </div>

        @livewire(\App\Filament\Pages\Condomini\Components\GestioniStabileTable::class, ['scope' => 'all'])
    @elseif($gestioniTab === 'periodi')
        <div class="space-y-4">
            <div class="rounded-lg border border-blue-200 bg-blue-50 p-4 text-sm text-blue-900 dark:border-blue-800/60 dark:bg-blue-900/20 dark:text-blue-100">
                Imposta periodo e rate direttamente sulla gestione selezionata.
            </div>

            @if($gestioneSelezionata)
                <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
                    <div class="text-xs text-gray-600 dark:text-gray-300">
                        Gestione selezionata: <strong>{{ $gestioneSelezionata->anno_gestione }}</strong>
                    </div>
                </div>
            @endif

            @if($gestioneSelezionata)
                <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
                    <h4 class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-3">Periodo gestione</h4>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <label class="text-xs text-gray-600 dark:text-gray-300">
                            Data inizio
                            <input type="date" wire:model.defer="gestioneDataInizio" class="mt-1 w-full rounded-md border-gray-300 dark:border-gray-700 dark:bg-gray-900" />
                        </label>
                        <label class="text-xs text-gray-600 dark:text-gray-300">
                            Data fine
                            <input type="date" wire:model.defer="gestioneDataFine" class="mt-1 w-full rounded-md border-gray-300 dark:border-gray-700 dark:bg-gray-900" />
                        </label>
                    </div>
                </div>
            @endif

            <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
                <h4 class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-3">Checklist fine anno</h4>
                <div class="space-y-2">
                    @forelse($checklistItems as $item)
                        <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-200">
                            <input type="checkbox" wire:model.defer="checklistFineAnnoState.{{ $item->id }}" class="rounded border-gray-300 text-primary-600 shadow-sm focus:ring-primary-500" />
                            <span>{{ $item->label }}</span>
                            @if($item->action_url)
                                <a class="text-primary-600 hover:underline text-xs" href="{{ $item->action_url }}" target="_blank" rel="noopener">Apri</a>
                            @endif
                        </label>
                    @empty
                        <div class="text-xs text-gray-500 dark:text-gray-400">Nessun elemento checklist attivo.</div>
                    @endforelse
                </div>
            </div>

            @if($gestioneSelezionata)
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
                    @if($gestioneTipo === 'ordinaria')
                        <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
                            <h4 class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-3">Rate ordinaria</h4>
                            <div class="grid grid-cols-3 gap-2">
                                @foreach($mesi as $value => $label)
                                    <label class="inline-flex items-center gap-2 text-xs text-gray-700 dark:text-gray-200">
                                        <input
                                            type="checkbox"
                                            value="{{ $value }}"
                                            wire:model.defer="gestioneMesi"
                                            class="rounded border-gray-300 text-primary-600 shadow-sm focus:ring-primary-500"
                                        />
                                        <span>{{ $label }}</span>
                                    </label>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    @if($gestioneTipo === 'riscaldamento')
                        <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
                            <h4 class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-3">Rate riscaldamento</h4>
                            <div class="grid grid-cols-3 gap-2">
                                @foreach($mesi as $value => $label)
                                    <label class="inline-flex items-center gap-2 text-xs text-gray-700 dark:text-gray-200">
                                        <input
                                            type="checkbox"
                                            value="{{ $value }}"
                                            wire:model.defer="gestioneMesi"
                                            class="rounded border-gray-300 text-primary-600 shadow-sm focus:ring-primary-500"
                                        />
                                        <span>{{ $label }}</span>
                                    </label>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    @if($gestioneTipo === 'straordinaria')
                        <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
                            <h4 class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-3">Rate straordinarie</h4>
                            <div class="grid grid-cols-3 gap-2">
                                @foreach($mesi as $value => $label)
                                    <label class="inline-flex items-center gap-2 text-xs text-gray-700 dark:text-gray-200">
                                        <input
                                            type="checkbox"
                                            value="{{ $value }}"
                                            wire:model.defer="gestioneMesi"
                                            class="rounded border-gray-300 text-primary-600 shadow-sm focus:ring-primary-500"
                                        />
                                        <span>{{ $label }}</span>
                                    </label>
                                @endforeach
                            </div>
                            <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
                                <label class="text-xs text-gray-600 dark:text-gray-300">
                                    Numero rate
                                    <input type="number" min="1" wire:model.defer="gestioneNumeroRate" class="mt-1 w-full rounded-md border-gray-300 dark:border-gray-700 dark:bg-gray-900" />
                                </label>
                                <label class="text-xs text-gray-600 dark:text-gray-300">
                                    Cadenza (es. mensile, bimestrale)
                                    <input type="text" wire:model.defer="gestioneCadenza" class="mt-1 w-full rounded-md border-gray-300 dark:border-gray-700 dark:bg-gray-900" />
                                </label>
                            </div>
                        </div>
                    @endif
                </div>
            @endif

            <div class="flex justify-end">
                <button
                    type="button"
                    wire:click="saveGestioneSelezionata"
                    wire:loading.attr="disabled"
                    class="fi-btn fi-btn-color-primary fi-btn-size-sm"
                >
                    <span class="fi-btn-label">Salva gestione</span>
                </button>
                <button
                    type="button"
                    wire:click="saveChecklistFineAnno"
                    wire:loading.attr="disabled"
                    class="fi-btn fi-btn-color-gray fi-btn-size-sm ml-2"
                >
                    <span class="fi-btn-label">Salva checklist</span>
                </button>
            </div>
        </div>
    @elseif($gestioniTab === 'straordinarie')
        <div class="space-y-4">
            <div class="text-sm text-gray-600 dark:text-gray-400">
                Elenco delle gestioni <strong>straordinarie</strong>. Seleziona una spesa per gestire preventivo, rate e consuntivo.
            </div>

            <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
                    <select class="w-full rounded-md border-gray-300 dark:border-gray-700 dark:bg-gray-900" onchange="window.location='{{ $baseUrl . '?tab=gestioni&gestioni_tab=straordinarie&straord_id=' }}' + this.value">
                        @foreach($straordinarie as $g)
                            <option value="{{ $g->id }}" @selected($straord && $g->id === $straord->id)>
                                {{ $g->anno_gestione }} · {{ $g->denominazione ?: 'Straordinaria #' . ($g->numero_straordinaria ?? $g->id) }}
                            </option>
                        @endforeach
                    </select>
                    @if($straord)
                        <div class="text-xs text-gray-600 dark:text-gray-300">
                            Periodo: {{ $straord->data_inizio?->format('d/m/Y') ?? '—' }} → {{ $straord->data_fine?->format('d/m/Y') ?? '—' }}
                        </div>
                    @endif
                </div>
            </div>

            @if($straord)
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
                    <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
                        <h4 class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">Rate da emettere</h4>
                        <div class="text-xs text-gray-600 dark:text-gray-300">
                            Mesi: {{ $straord->mesi_rate_straordinaria ? implode(', ', (array) $straord->mesi_rate_straordinaria) : '—' }}
                            @if(!empty($straord->piano_straordinario['numero_rate'] ?? null))
                                · Rate: {{ $straord->piano_straordinario['numero_rate'] }}
                            @endif
                            @if(!empty($straord->piano_straordinario['cadenza'] ?? null))
                                · Cadenza: {{ $straord->piano_straordinario['cadenza'] }}
                            @endif
                        </div>
                    </div>
                    <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
                        <h4 class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">Preventivo</h4>
                        <div class="text-xs text-gray-600 dark:text-gray-300">Da definire</div>
                    </div>
                    <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
                        <h4 class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">Consuntivo</h4>
                        <div class="text-xs text-gray-600 dark:text-gray-300">Da definire</div>
                    </div>
                </div>

                <div class="border-b border-gray-200 dark:border-gray-700">
                    <nav class="-mb-px flex flex-wrap gap-2" aria-label="Tabs">
                        @foreach(['operazioni' => 'Operazioni','preventivo' => 'Preventivo','rate' => 'Rate','incassi' => 'Incassi','consuntivo' => 'Consuntivo'] as $key => $label)
                            <a
                                href="{{ $baseUrl . '?tab=gestioni&gestioni_tab=straordinarie&straord_id=' . $straord->id . '&straord_tab=' . $key }}"
                                class="px-3 py-2 text-sm font-medium rounded-t-lg border-b-2 {{ $straordTab === $key ? 'border-primary-600 text-primary-600 dark:text-primary-400' : 'border-transparent text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100' }}"
                            >
                                {{ $label }}
                            </a>
                        @endforeach
                    </nav>
                </div>

                <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 text-sm text-gray-700 dark:text-gray-200">
                    @if($straordTab === 'operazioni')
                        Operazioni collegate (da integrare con fatture/registrazioni).
                    @elseif($straordTab === 'preventivo')
                        <div class="text-xs text-gray-500 dark:text-gray-400 mb-2">
                            Preventivo da legacy: prevent_straordinari + voc_spe
                        </div>
                        <div class="overflow-x-auto">
                            <table class="min-w-full text-xs">
                                <thead class="bg-gray-50 dark:bg-gray-900/40">
                                    <tr>
                                        <th class="px-2 py-1 text-left">Cod. voce</th>
                                        <th class="px-2 py-1 text-left">Voce spesa</th>
                                        <th class="px-2 py-1 text-left">Tabella</th>
                                        <th class="px-2 py-1 text-right">Importo €</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y">
                                    @forelse($legacyPreventivo as $row)
                                        @php
                                            $voce = $legacyVociMap[$row->cod_spe ?? ''] ?? null;
                                            $tabellaCode = strtoupper((string) ($voce->tabella ?? ''));
                                            $tabella = $tabellaMap[$tabellaCode] ?? null;
                                            $importo = $row->importo_euro ?? $row->importo ?? ($voce->preventivo_euro ?? null);
                                        @endphp
                                        <tr>
                                            <td class="px-2 py-1">{{ $row->cod_spe ?? '—' }}</td>
                                            <td class="px-2 py-1">{{ $voce->descriz ?? '—' }}</td>
                                            <td class="px-2 py-1">
                                                {{ $tabella?->codice_tabella ?? $voce->tabella ?? '—' }}
                                                @if($tabella?->denominazione)
                                                    <div class="text-[10px] text-gray-500">{{ $tabella->denominazione }}</div>
                                                @endif
                                                @if($tabella)
                                                    <a class="text-[10px] text-primary-600 hover:underline" href="{{ \App\Filament\Pages\Condomini\TabelleMillesimaliArchivio::getUrl(panel: 'admin-filament') }}" target="_blank" rel="noopener">Apri tabelle</a>
                                                @endif
                                            </td>
                                            <td class="px-2 py-1 text-right">{{ $importo !== null ? number_format((float)$importo, 2, ',', '.') : '—' }}</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="4" class="px-2 py-2 text-center text-gray-500">Nessun preventivo legacy trovato.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    @elseif($straordTab === 'rate')
                        Piano rate con scadenze e importi (da configurare).
                    @elseif($straordTab === 'incassi')
                        Incassi collegati alle rate (da integrare).
                    @else
                        <div class="text-xs text-gray-500 dark:text-gray-400 mb-2">
                            Consuntivo da legacy: voc_spe.consuntivo_euro
                        </div>
                        <div class="overflow-x-auto">
                            <table class="min-w-full text-xs">
                                <thead class="bg-gray-50 dark:bg-gray-900/40">
                                    <tr>
                                        <th class="px-2 py-1 text-left">Cod. voce</th>
                                        <th class="px-2 py-1 text-left">Voce spesa</th>
                                        <th class="px-2 py-1 text-left">Tabella</th>
                                        <th class="px-2 py-1 text-right">Consuntivo €</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y">
                                    @forelse($legacyPreventivo as $row)
                                        @php
                                            $voce = $legacyVociMap[$row->cod_spe ?? ''] ?? null;
                                            $tabellaCode = strtoupper((string) ($voce->tabella ?? ''));
                                            $tabella = $tabellaMap[$tabellaCode] ?? null;
                                            $cons = $voce->consuntivo_euro ?? null;
                                        @endphp
                                        <tr>
                                            <td class="px-2 py-1">{{ $row->cod_spe ?? '—' }}</td>
                                            <td class="px-2 py-1">{{ $voce->descriz ?? '—' }}</td>
                                            <td class="px-2 py-1">
                                                {{ $tabella?->codice_tabella ?? $voce->tabella ?? '—' }}
                                                @if($tabella?->denominazione)
                                                    <div class="text-[10px] text-gray-500">{{ $tabella->denominazione }}</div>
                                                @endif
                                                @if($tabella)
                                                    <a class="text-[10px] text-primary-600 hover:underline" href="{{ \App\Filament\Pages\Condomini\TabelleMillesimaliArchivio::getUrl(panel: 'admin-filament') }}" target="_blank" rel="noopener">Apri tabelle</a>
                                                @endif
                                            </td>
                                            <td class="px-2 py-1 text-right">{{ $cons !== null ? number_format((float)$cons, 2, ',', '.') : '—' }}</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="4" class="px-2 py-2 text-center text-gray-500">Nessun consuntivo legacy trovato.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>
            @else
                <div class="text-sm text-gray-500 dark:text-gray-400">Nessuna gestione straordinaria disponibile.</div>
            @endif
        </div>
    @else
        <div class="text-sm text-gray-600 dark:text-gray-400">
            Archivio delle gestioni <strong>chiuse</strong> o <strong>consolidate</strong>. Nessun dato viene eliminato.
        </div>

        @livewire(\App\Filament\Pages\Condomini\Components\GestioniStabileTable::class, ['scope' => 'archivio'])
    @endif
</div>

{{--
LEGACY/DEMO UI (disabilitata): mantenuta solo per riferimento.
--}}

{{--
<!-- Tab Gestioni - CRUD inline per stabile -->
<div class="rounded-2xl border bg-white p-4">
    <div class="space-y-6">
    <div class="flex justify-between items-center">
        <h3 class="text-lg font-semibold text-gray-900">Gestioni Contabili</h3>
        <button class="netgescon-btn netgescon-btn-primary" onclick="document.getElementById('form-nuova-gestione').classList.toggle('hidden')">
            <div class="space-y-4">
                <div class="text-sm text-gray-600 dark:text-gray-400">
                    Mostra solo le gestioni <strong>aperte</strong> (non chiuse/consolidate). La stessa anagrafica è disponibile anche in
                    <a class="text-primary-600 hover:underline" href="{{ \App\Filament\Pages\Gescon\GestioniArchivio::getUrl(panel: 'admin-filament') }}" target="_blank" rel="noopener">GESCON → Gestioni</a>.
                </div>

                @livewire(\App\Filament\Pages\Condomini\Components\GestioniStabileTable::class)
            </div>
                                    <div class="flex items-center justify-between">
                                        <div class="text-sm">
                                            <span class="text-gray-600">Budget:</span>
                                            <span class="font-medium text-gray-900">€{{ number_format($gestione['budget'], 2) }}</span>
                                        </div>
                                        <div class="text-sm">
                                            <span class="text-gray-600">Speso:</span>
                                            <span class="font-medium text-red-600">€{{ number_format($gestione['speso'], 2) }}</span>
                                        </div>
                                    </div>
                                    <div class="mt-2">
                                        @php 
                                            $percentuale = ($gestione['speso'] / $gestione['budget']) * 100;
                                        @endphp
                                        <div class="w-full bg-gray-200 rounded-full h-2">
                                            <div class="bg-{{ $percentuale > 80 ? 'red' : ($percentuale > 60 ? 'yellow' : 'green') }}-500 h-2 rounded-full" 
                                                 style="width: {{ min($percentuale, 100) }}%"></div>
                                        </div>
                                        <div class="text-xs text-gray-500 mt-1">
                                            {{ number_format($percentuale, 1) }}% utilizzato
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <!-- Gestioni Chiuse -->
                    <div class="bg-gray-50 rounded-lg border border-gray-200">
                        <div class="px-4 py-3 border-b border-gray-200">
                            <h4 class="font-semibold text-gray-900 flex items-center">
                                <i class="fas fa-archive text-gray-600 mr-2"></i>
                                Gestioni Chiuse
                            </h4>
                        </div>
                        <div class="p-4 space-y-3">
                            @php
                                $gestioniChiuse = [
                                    [
                                        'nome' => 'Gestione Ordinaria 2024',
                                        'tipo' => 'ordinaria',
                                        'data_chiusura' => '2024-12-31',
                                        'budget' => '14500.00',
                                        'speso' => '14200.00',
                                        'residuo' => '300.00'
                                    ],
                                    [
                                        'nome' => 'Rifacimento Tetto',
                                        'tipo' => 'straordinaria',
                                        'data_chiusura' => '2024-11-30',
                                        'budget' => '25000.00',
                                        'speso' => '24800.00',
                                        'residuo' => '200.00'
                                    ]
                                ];
                            @endphp
                            
                            @foreach($gestioniChiuse as $gestione)
                                <div class="bg-white rounded-lg p-3 border border-gray-100">
                                    <div class="flex items-center justify-between mb-2">
                                        <h5 class="font-semibold text-gray-700">{{ $gestione['nome'] }}</h5>
                                        <span class="px-2 py-1 text-xs bg-gray-100 text-gray-600 rounded-full">
                                            Chiusa
                                        </span>
                                    </div>
                                    <div class="text-sm text-gray-500 mb-2">
                                        Chiusa il {{ date('d/m/Y', strtotime($gestione['data_chiusura'])) }}
                                    </div>
                                    <div class="grid grid-cols-3 gap-2 text-xs">
                                        <div class="text-center">
                                            <div class="text-gray-500">Budget</div>
                                            <div class="font-medium">€{{ number_format($gestione['budget'], 0) }}</div>
                                        </div>
                                        <div class="text-center">
                                            <div class="text-gray-500">Speso</div>
                                            <div class="font-medium text-red-600">€{{ number_format($gestione['speso'], 0) }}</div>
                                        </div>
                                        <div class="text-center">
                                            <div class="text-gray-500">Residuo</div>
                                            <div class="font-medium text-green-600">€{{ number_format($gestione['residuo'], 0) }}</div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sub-Tab 2: Spese Preventivate -->
            <div id="spese-preventivate" class="gestioni-sub-content hidden">
                <div class="bg-blue-50 rounded-lg p-6">
                    <div class="text-center">
                        <i class="fas fa-calculator text-blue-600 text-4xl mb-4"></i>
                        <h4 class="text-lg font-semibold text-blue-900 mb-2">Spese Preventivate</h4>
                        <p class="text-blue-700">Riepilogo delle spese previste per le gestioni attive</p>
                    </div>
                    
                    <!-- Tabella preventivi -->
                    <div class="mt-6 bg-white rounded-lg border">
                        <table class="w-full">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-4 py-3 text-left text-sm font-medium text-gray-900">Gestione</th>
                                    <th class="px-4 py-3 text-left text-sm font-medium text-gray-900">Categoria</th>
                                    <th class="px-4 py-3 text-right text-sm font-medium text-gray-900">Importo</th>
                                    <th class="px-4 py-3 text-right text-sm font-medium text-gray-900">Utilizzato</th>
                                    <th class="px-4 py-3 text-right text-sm font-medium text-gray-900">Residuo</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y">
                                <tr>
                                    <td class="px-4 py-3 text-sm font-medium">Ordinaria 2025</td>
                                    <td class="px-4 py-3 text-sm text-gray-600">Pulizie</td>
                                    <td class="px-4 py-3 text-sm text-right">€3.600,00</td>
                                    <td class="px-4 py-3 text-sm text-right text-red-600">€1.800,00</td>
                                    <td class="px-4 py-3 text-sm text-right text-green-600">€1.800,00</td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-3 text-sm font-medium">Ordinaria 2025</td>
                                    <td class="px-4 py-3 text-sm text-gray-600">Amministrazione</td>
                                    <td class="px-4 py-3 text-sm text-right">€4.800,00</td>
                                    <td class="px-4 py-3 text-sm text-right text-red-600">€2.400,00</td>
                                    <td class="px-4 py-3 text-sm text-right text-green-600">€2.400,00</td>
                                </tr>
                                <tr>
                                    <td class="px-4 py-3 text-sm font-medium">Riscaldamento</td>
                                    <td class="px-4 py-3 text-sm text-gray-600">Combustibile</td>
                                    <td class="px-4 py-3 text-sm text-right">€8.000,00</td>
                                    <td class="px-4 py-3 text-sm text-right text-red-600">€6.200,00</td>
                                    <td class="px-4 py-3 text-sm text-right text-green-600">€1.800,00</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Sub-Tab 3: Spese Effettuate -->
            <div id="spese-effettuate" class="gestioni-sub-content hidden">
                <div class="bg-red-50 rounded-lg p-6">
                    <div class="text-center">
                        <i class="fas fa-receipt text-red-600 text-4xl mb-4"></i>
                        <h4 class="text-lg font-semibold text-red-900 mb-2">Spese Effettuate</h4>
                        <p class="text-red-700">Storico delle spese sostenute</p>
                    </div>
                    
                    <!-- Lista spese recenti -->
                    <div class="mt-6 space-y-3">
                        @php
                            $speseRecenti = [
                                ['data' => '2025-07-25', 'descrizione' => 'Pulizia scale luglio', 'importo' => '300.00', 'gestione' => 'Ordinaria'],
                                ['data' => '2025-07-20', 'descrizione' => 'Manutenzione ascensore', 'importo' => '850.00', 'gestione' => 'Straordinaria'],
                                ['data' => '2025-07-15', 'descrizione' => 'Bolletta gas riscaldamento', 'importo' => '1200.00', 'gestione' => 'Riscaldamento'],
                                ['data' => '2025-07-10', 'descrizione' => 'Amministratore luglio', 'importo' => '400.00', 'gestione' => 'Ordinaria']
                            ];
                        @endphp
                        
                        @foreach($speseRecenti as $spesa)
                            <div class="bg-white rounded-lg p-4 border border-red-100">
                                <div class="flex items-center justify-between">
                                    <div class="flex-1">
                                        <div class="font-semibold text-gray-900">{{ $spesa['descrizione'] }}</div>
                                        <div class="text-sm text-gray-600">
                                            {{ date('d/m/Y', strtotime($spesa['data'])) }} • {{ $spesa['gestione'] }}
                                        </div>
                                    </div>
                                    <div class="text-lg font-bold text-red-600">
                                        €{{ number_format($spesa['importo'], 2) }}
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <!-- Sub-Tab 4: Mastrini di Spesa -->
            <div id="mastrini-spesa" class="gestioni-sub-content hidden">
                <div class="bg-purple-50 rounded-lg p-6">
                    <div class="text-center">
                        <i class="fas fa-book text-purple-600 text-4xl mb-4"></i>
                        <h4 class="text-lg font-semibold text-purple-900 mb-2">Mastrini di Spesa</h4>
                        <p class="text-purple-700">Registri dettagliati per categoria di spesa</p>
                    </div>
                    
                    <!-- Grid mastrini -->
                    <div class="mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                        @php
                            $mastrini = [
                                ['nome' => 'Pulizie', 'movimenti' => 24, 'totale' => '3600.00', 'colore' => 'blue'],
                                ['nome' => 'Amministrazione', 'movimenti' => 12, 'totale' => '4800.00', 'colore' => 'green'],
                                ['nome' => 'Ascensore', 'movimenti' => 8, 'totale' => '2400.00', 'colore' => 'yellow'],
                                ['nome' => 'Riscaldamento', 'movimenti' => 15, 'totale' => '9200.00', 'colore' => 'red'],
                                ['nome' => 'Manutenzioni', 'movimenti' => 18, 'totale' => '5800.00', 'colore' => 'purple'],
                                ['nome' => 'Utenze', 'movimenti' => 36, 'totale' => '2900.00', 'colore' => 'indigo']
                            ];
                        @endphp
                        
                        @foreach($mastrini as $mastrino)
                            <div class="bg-white rounded-lg p-4 border border-{{ $mastrino['colore'] }}-200 hover:shadow-md transition-shadow cursor-pointer">
                                <div class="flex items-center justify-between mb-3">
                                    <h5 class="font-semibold text-gray-900">{{ $mastrino['nome'] }}</h5>
                                    <i class="fas fa-book text-{{ $mastrino['colore'] }}-600"></i>
                                </div>
                                <div class="space-y-2">
                                    <div class="flex justify-between text-sm">
                                        <span class="text-gray-600">Movimenti:</span>
                                        <span class="font-medium">{{ $mastrino['movimenti'] }}</span>
                                    </div>
                                    <div class="flex justify-between text-sm">
                                        <span class="text-gray-600">Totale:</span>
                                        <span class="font-bold text-{{ $mastrino['colore'] }}-600">€{{ number_format($mastrino['totale'], 2) }}</span>
                                    </div>
                                </div>
                                <div class="mt-3 pt-3 border-t border-gray-100">
                                    <button class="w-full text-sm text-{{ $mastrino['colore'] }}-600 hover:text-{{ $mastrino['colore'] }}-800 font-medium">
                                        Apri Mastrino →
                                    </button>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

        </div>
    </div>
    </div>
</div>

<style>
    .gestioni-sub-tab {
        color: #6b7280;
        border-bottom: 2px solid transparent;
    }
    
    .gestioni-sub-tab:hover {
        color: #374151;
        border-bottom-color: #d1d5db;
    }
    
    .gestioni-sub-tab.active {
        color: #2563eb;
        border-bottom-color: #3b82f6;
    }
    
    .gestioni-sub-content {
        display: none;
    }
    
    .gestioni-sub-content:first-child {
        display: block;
    }
</style>

<script>
function switchGestioniTab(tabName) {
    // Rimuovi active da tutti i tab
    document.querySelectorAll('.gestioni-sub-tab').forEach(tab => {
        tab.classList.remove('active');
    });
    
    // Nascondi tutti i contenuti
    document.querySelectorAll('.gestioni-sub-content').forEach(content => {
        content.classList.add('hidden');
    });
    
    // Attiva tab selezionato
    document.querySelector(`[data-subtab="${tabName}"]`).classList.add('active');
    document.getElementById(tabName).classList.remove('hidden');
}
</script>
<script>
// Toggle UI tra mesi (ordinaria/riscaldamento) e piano (straordinaria)
function toggleSezioniPianificazione() {
    const tipo = document.getElementById('tipo_gestione_select').value;
    const mesi = document.getElementById('sezione_mesi_rate');
    const stra = document.getElementById('sezione_straordinaria');
    if (tipo === 'straordinaria') {
        mesi.classList.add('hidden');
        stra.classList.remove('hidden');
    } else {
        stra.classList.add('hidden');
        mesi.classList.remove('hidden');
    }
}
document.addEventListener('DOMContentLoaded', toggleSezioniPianificazione);
</script>

    <!-- Layout Two-Column: Lista Gestioni SX, Dettagli DX -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        
        <!-- COLONNA SINISTRA: Lista Gestioni -->
        <div class="bg-white rounded-lg shadow-sm border">
            <div class="px-4 py-3 border-b bg-gray-50 rounded-t-lg">
                <h4 class="text-lg font-semibold text-gray-900 flex items-center">
                    <i class="fas fa-cogs text-blue-600 mr-2"></i>
                    Gestioni Disponibili
                </h4>
            </div>
            <div class="p-4">
                @php
                    // Dati di esempio per le gestioni
                    $gestioni = [
                        [
                            'id' => 1,
                            'nome' => 'Gestione Ordinaria',
                            'descrizione' => 'Amministrazione condominiale ordinaria',
                            'data_inizio' => '2024-01-01',
                            'data_fine' => null,
                            'stato' => 'attiva',
                            'tipo' => 'ordinaria',
                            'voci_associate' => 15
                        ],
                        [
                            'id' => 2,
                            'nome' => 'Gestione Straordinaria',
                            'descrizione' => 'Lavori di manutenzione straordinaria',
                            'data_inizio' => '2024-03-15',
                            'data_fine' => '2024-12-31',
                            'stato' => 'attiva',
                            'tipo' => 'straordinaria',
                            'voci_associate' => 8
                        ],
                        [
                            'id' => 3,
                            'nome' => 'Gestione Riscaldamento',
                            'descrizione' => 'Gestione separata per il riscaldamento',
                            'data_inizio' => '2024-01-01',
                            'data_fine' => null,
                            'stato' => 'attiva',
                            'tipo' => 'separata',
                            'voci_associate' => 5
                        ]
                    ];
                @endphp
                
                <div class="space-y-3">
                    @foreach($gestioni as $gestione)
                        <div class="gestione-item border rounded-lg p-3 hover:bg-blue-50 cursor-pointer transition-colors
                                    {{ $loop->first ? 'bg-blue-50 border-blue-300' : '' }}" 
                             data-gestione-id="{{ $gestione['id'] }}"
                             onclick="caricaDettagliGestione({{ $gestione['id'] }})">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center space-x-3">
                                    <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                                        <i class="fas fa-{{ $gestione['tipo'] === 'ordinaria' ? 'cog' : ($gestione['tipo'] === 'straordinaria' ? 'tools' : 'fire') }} text-blue-600"></i>
                                    </div>
                                    <div>
                                        <h5 class="font-semibold text-gray-900">{{ $gestione['nome'] }}</h5>
                                        <p class="text-sm text-gray-600">{{ $gestione['voci_associate'] }} voci millesimali</p>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <span class="px-2 py-1 text-xs bg-green-100 text-green-800 rounded-full">
                                        {{ ucfirst($gestione['stato']) }}
                                    </span>
                                    <p class="text-xs text-gray-500 mt-1">
                                        {{ $gestione['tipo'] }}
                                    </p>
                                </div>
                            </div>
                            
                            @if($gestione['descrizione'])
                                <div class="mt-2 text-sm text-gray-600">
                                    {{ $gestione['descrizione'] }}
                                </div>
                            @endif
                            
                            <div class="mt-2 flex items-center text-xs text-gray-500">
                                <i class="fas fa-calendar mr-1"></i>
                                Dal {{ date('d/m/Y', strtotime($gestione['data_inizio'])) }}
                                @if($gestione['data_fine'])
                                    al {{ date('d/m/Y', strtotime($gestione['data_fine'])) }}
                                @else
                                    (in corso)
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
                
                <!-- Se non ci sono gestioni -->
                @if(count($gestioni) === 0)
                    <div class="text-center py-8">
                        <i class="fas fa-cogs text-gray-400 text-4xl mb-4"></i>
                        <p class="text-gray-600">Nessuna gestione configurata</p>
                        <button class="mt-4 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
                            <i class="fas fa-plus mr-2"></i>Crea Prima Gestione
                        </button>
                    </div>
                @endif
            </div>
        </div>

        <!-- COLONNA DESTRA: Dettagli Gestione Selezionata -->
        <div class="bg-white rounded-lg shadow-sm border">
            <div class="px-4 py-3 border-b bg-gray-50 rounded-t-lg">
                <h4 class="text-lg font-semibold text-gray-900 flex items-center">
                    <i class="fas fa-info-circle text-green-600 mr-2"></i>
                    Dettagli Gestione
                </h4>
            </div>
            <div class="p-4">
                <div id="gestione-dettagli">
                    <!-- Dettagli gestione selezionata (prima gestione di default) -->
                    <div class="space-y-4">
                        <div class="flex items-start space-x-3">
                            <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                                <i class="fas fa-cog text-blue-600 text-xl"></i>
                            </div>
                            <div class="flex-1">
                                <h5 class="text-lg font-semibold text-gray-900">Gestione Ordinaria</h5>
                                <p class="text-gray-600">Amministrazione condominiale ordinaria</p>
                            </div>
                        </div>

                        <!-- Informazioni di base -->
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Stato</label>
                                <span class="px-2 py-1 text-xs bg-green-100 text-green-800 rounded-full">Attiva</span>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Tipo</label>
                                <span class="text-gray-900">Ordinaria</span>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Data Inizio</label>
                                <span class="text-gray-900">01/01/2024</span>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Data Fine</label>
                                <span class="text-gray-900">In corso</span>
                            </div>
                        </div>

                        <!-- Statistiche -->
                        <div class="border-t pt-4">
                            <h6 class="font-semibold text-gray-900 mb-3">Statistiche</h6>
                            <div class="grid grid-cols-2 gap-4">
                                <div class="text-center p-3 bg-blue-50 rounded-lg">
                                    <div class="text-2xl font-bold text-blue-900">15</div>
                                    <div class="text-sm text-blue-600">Voci Millesimali</div>
                                </div>
                                <div class="text-center p-3 bg-green-50 rounded-lg">
                                    <div class="text-2xl font-bold text-green-900">€12.450</div>
                                    <div class="text-sm text-green-600">Budget Totale</div>
                                </div>
                            </div>
                        </div>

                        <!-- Voci Millesimali Associate -->
                        <div class="border-t pt-4">
                            <h6 class="font-semibold text-gray-900 mb-3">Voci Millesimali Associate</h6>
                            <div class="space-y-2">
                                @php
                                    $voci = [
                                        'Spese Generali' => '1000.00',
                                        'Pulizie Scale' => '150.00',
                                        'Illuminazione' => '80.00',
                                        'Ascensore' => '300.00',
                                        'Portierato' => '250.00'
                                    ];
                                @endphp
                                @foreach($voci as $voce => $importo)
                                    <div class="flex items-center justify-between text-sm py-2 border-b border-gray-100 last:border-0">
                                        <span class="text-gray-700">{{ $voce }}</span>
                                        <span class="font-medium text-gray-900">€{{ $importo }}</span>
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <!-- Azioni -->
                        <div class="border-t pt-4 flex space-x-3">
                            <button class="flex-1 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 text-sm">
                                <i class="fas fa-edit mr-2"></i>Modifica
                            </button>
                            <button class="flex-1 bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 text-sm">
                                <i class="fas fa-plus mr-2"></i>Aggiungi Voce
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Funzione per caricare dettagli gestione selezionata
function caricaDettagliGestione(gestioneId) {
    // Rimuovi selezione precedente
    document.querySelectorAll('.gestione-item').forEach(item => {
        item.classList.remove('bg-blue-50', 'border-blue-300');
    });
    
    // Evidenzia gestione selezionata
    document.querySelector(`[data-gestione-id="${gestioneId}"]`).classList.add('bg-blue-50', 'border-blue-300');
    
    // Qui potresti fare una chiamata AJAX per caricare i dettagli
    console.log(`Caricamento dettagli gestione ${gestioneId}`);
    
    // Per ora aggiorniamo solo il contenuto statico
    // In futuro: fetch dei dettagli via AJAX
}
</script>

--}}