<x-app-layout>
    <x-slot name="header">
        <div class="flex justify-between items-center">
            <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
                {{ __('Dashboard Stabile') }} - {{ $stabile->denominazione }}
            </h2>
            <div class="flex space-x-2">
                <a href="{{ route('admin.stabili.edit', $stabile) }}" 
                   class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition-colors">
                    <i class="fas fa-edit mr-2"></i>Modifica
                </a>
                <a href="{{ route('admin.stabili.index') }}" 
                   class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded transition-colors">
                    <i class="fas fa-arrow-left mr-2"></i>Lista
                </a>
            </div>
        </div>
    </x-slot>

    <div class="py-6">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            
            {{-- KPI Dashboard --}}
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 mb-6">
                {{-- Unità Immobiliari --}}
                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-4">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <i class="fas fa-home text-2xl text-blue-500"></i>
                            </div>
                            <div class="ml-3 w-0 flex-1">
                                <dl>
                                    <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Unità</dt>
                                    <dd class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ $kpi['totale_unita'] ?? 0 }}</dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Chiavi --}}
                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-4">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <i class="fas fa-key text-2xl text-yellow-500"></i>
                            </div>
                            <div class="ml-3 w-0 flex-1">
                                <dl>
                                    <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Chiavi</dt>
                                    <dd class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ $kpi['totale_chiavi'] ?? 0 }}</dd>
                                    <dd class="text-xs text-green-600">{{ $kpi['chiavi_disponibili'] ?? 0 }} disponibili</dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Fondi --}}
                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-4">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <i class="fas fa-piggy-bank text-2xl text-green-500"></i>
                            </div>
                            <div class="ml-3 w-0 flex-1">
                                <dl>
                                    <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Fondi</dt>
                                    <dd class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ $kpi['totale_fondi'] ?? 0 }}</dd>
                                    <dd class="text-xs text-green-600">€ {{ number_format($kpi['saldo_totale'] ?? 0, 0, ',', '.') }}</dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Contatori --}}
                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-4">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <i class="fas fa-tachometer-alt text-2xl text-purple-500"></i>
                            </div>
                            <div class="ml-3 w-0 flex-1">
                                <dl>
                                    <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Contatori</dt>
                                    <dd class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ $kpi['totale_contatori'] ?? 0 }}</dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Tabelle Millesimali --}}
                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-4">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <i class="fas fa-table text-2xl text-indigo-500"></i>
                            </div>
                            <div class="ml-3 w-0 flex-1">
                                <dl>
                                    <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Tabelle</dt>
                                    <dd class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ $kpi['totale_tabelle_millesimali'] ?? 0 }}</dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Tab Navigation --}}
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                <div class="border-b border-gray-200 dark:border-gray-700">
                    <nav class="-mb-px flex space-x-8 px-6">
                        <button class="tab-button active border-blue-500 text-blue-600 whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium" data-tab="panoramica">
                            <i class="fas fa-chart-line mr-2"></i>Panoramica
                        </button>
                        <button class="tab-button border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium" data-tab="millesimi">
                            <i class="fas fa-table mr-2"></i>Tabelle Millesimali
                        </button>
                        <button class="tab-button border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium" data-tab="contatori">
                            <i class="fas fa-tachometer-alt mr-2"></i>Contatori
                        </button>
                        <button class="tab-button border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium" data-tab="chiavi">
                            <i class="fas fa-key mr-2"></i>Chiavi
                        </button>
                        <button class="tab-button border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium" data-tab="fondi">
                            <i class="fas fa-piggy-bank mr-2"></i>Fondi
                        </button>
                        <button class="tab-button border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium" data-tab="import">
                            <i class="fas fa-download mr-2"></i>Import GESCON
                        </button>
                    </nav>
                </div>

                {{-- Tab Content --}}
                <div class="p-6">
                    {{-- Tab Panoramica --}}
                    <div id="tab-panoramica" class="tab-content">
                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                            {{-- Info Generali --}}
                            <div>
                                <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">
                                    <i class="fas fa-info-circle mr-2"></i>Informazioni Generali
                                </h3>
                                <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                                    <dl class="space-y-3">
                                        <div class="flex justify-between">
                                            <dt class="text-sm text-gray-600 dark:text-gray-400">Codice Stabile:</dt>
                                            <dd class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ $stabile->codice_stabile }}</dd>
                                        </div>
                                        <div class="flex justify-between">
                                            <dt class="text-sm text-gray-600 dark:text-gray-400">Codice Fiscale:</dt>
                                            <dd class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ $stabile->codice_fiscale ?? '-' }}</dd>
                                        </div>
                                        <div class="flex justify-between">
                                            <dt class="text-sm text-gray-600 dark:text-gray-400">Anno Costruzione:</dt>
                                            <dd class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ $stabile->anno_costruzione ?? '-' }}</dd>
                                        </div>
                                        <div class="flex justify-between">
                                            <dt class="text-sm text-gray-600 dark:text-gray-400">Superficie Totale:</dt>
                                            <dd class="text-sm font-medium text-gray-900 dark:text-gray-100">
                                                {{ $stabile->superficie_totale ? number_format($stabile->superficie_totale, 0, ',', '.') . ' m²' : '-' }}
                                            </dd>
                                        </div>
                                        <div class="flex justify-between">
                                            <dt class="text-sm text-gray-600 dark:text-gray-400">Stato:</dt>
                                            <dd>
                                                <span class="px-2 py-1 text-xs rounded-full 
                                                    {{ $stabile->stato === 'attivo' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                                    {{ ucfirst($stabile->stato) }}
                                                </span>
                                            </dd>
                                        </div>
                                    </dl>
                                </div>
                            </div>

                            {{-- Ubicazione --}}
                            <div>
                                <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">
                                    <i class="fas fa-map-marker-alt mr-2"></i>Ubicazione
                                </h3>
                                <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                                    <dl class="space-y-3">
                                        <div class="flex justify-between">
                                            <dt class="text-sm text-gray-600 dark:text-gray-400">Indirizzo:</dt>
                                            <dd class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ $stabile->indirizzo }}</dd>
                                        </div>
                                        <div class="flex justify-between">
                                            <dt class="text-sm text-gray-600 dark:text-gray-400">Città:</dt>
                                            <dd class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ $stabile->citta }}</dd>
                                        </div>
                                        <div class="flex justify-between">
                                            <dt class="text-sm text-gray-600 dark:text-gray-400">CAP:</dt>
                                            <dd class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ $stabile->cap }}</dd>
                                        </div>
                                        <div class="flex justify-between">
                                            <dt class="text-sm text-gray-600 dark:text-gray-400">Provincia:</dt>
                                            <dd class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ $stabile->provincia ?? '-' }}</dd>
                                        </div>
                                    </dl>
                                </div>
                            </div>
                        </div>

                        @if($stabile->note)
                        <div class="mt-6">
                            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">
                                <i class="fas fa-sticky-note mr-2"></i>Note
                            </h3>
                            <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                                <p class="text-sm text-gray-900 dark:text-gray-100">{{ $stabile->note }}</p>
                            </div>
                        </div>
                        @endif
                    </div>

                    {{-- Tab Tabelle Millesimali --}}
                    <div id="tab-millesimi" class="tab-content hidden">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">
                                <i class="fas fa-table mr-2"></i>Tabelle Millesimali
                            </h3>
                            <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded" 
                                    onclick="openModalTabella()">
                                <i class="fas fa-plus mr-2"></i>Nuova Tabella
                            </button>
                        </div>

                        <div class="bg-white dark:bg-gray-800 shadow overflow-hidden sm:rounded-md">
                            <ul class="divide-y divide-gray-200 dark:divide-gray-700">
                                @forelse($stabile->tabelleMillesimali ?? [] as $tabella)
                                <li class="px-6 py-4">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center">
                                            <div class="flex-shrink-0">
                                                <i class="fas fa-table text-lg text-indigo-500"></i>
                                            </div>
                                            <div class="ml-4">
                                                <div class="text-sm font-medium text-gray-900 dark:text-gray-100">
                                                    {{ $tabella->nome }}
                                                </div>
                                                <div class="text-sm text-gray-500 dark:text-gray-400">
                                                    {{ $tabella->descrizione ?? 'Nessuna descrizione' }}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="flex items-center space-x-2">
                                            <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">
                                                {{ $tabella->dettagliMillesimi->count() }} unità
                                            </span>
                                            <button class="text-blue-600 hover:text-blue-900" 
                                                    onclick="viewTabella({{ $tabella->id }})">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                            <button class="text-green-600 hover:text-green-900" 
                                                    onclick="editTabella({{ $tabella->id }})">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="text-red-600 hover:text-red-900" 
                                                    onclick="deleteTabella({{ $tabella->id }})">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                </li>
                                @empty
                                <li class="px-6 py-4 text-center text-gray-500 dark:text-gray-400">
                                    <i class="fas fa-table text-4xl mb-2"></i>
                                    <p>Nessuna tabella millesimale configurata</p>
                                    <p class="text-sm">Crea la prima tabella per iniziare</p>
                                </li>
                                @endforelse
                            </ul>
                        </div>
                    </div>

                    {{-- Tab Contatori --}}
                    <div id="tab-contatori" class="tab-content hidden">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">
                                <i class="fas fa-tachometer-alt mr-2"></i>Contatori e Letture
                            </h3>
                            <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded" 
                                    onclick="openModalContatore()">
                                <i class="fas fa-plus mr-2"></i>Nuovo Contatore
                            </button>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                            @forelse($stabile->contatori ?? [] as $contatore)
                            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                                <div class="p-4">
                                    <div class="flex items-center justify-between mb-3">
                                        <h4 class="text-lg font-medium text-gray-900 dark:text-gray-100">
                                            {{ $contatore->nome }}
                                        </h4>
                                        <span class="px-2 py-1 text-xs rounded-full 
                                            {{ $contatore->stato === 'attivo' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                            {{ ucfirst($contatore->stato) }}
                                        </span>
                                    </div>
                                    <div class="space-y-2">
                                        <div class="flex justify-between text-sm">
                                            <span class="text-gray-600 dark:text-gray-400">Tipo:</span>
                                            <span class="font-medium">{{ ucfirst($contatore->tipo) }}</span>
                                        </div>
                                        <div class="flex justify-between text-sm">
                                            <span class="text-gray-600 dark:text-gray-400">Ubicazione:</span>
                                            <span class="font-medium">{{ $contatore->ubicazione }}</span>
                                        </div>
                                        <div class="flex justify-between text-sm">
                                            <span class="text-gray-600 dark:text-gray-400">Ultima lettura:</span>
                                            <span class="font-medium">
                                                {{ $contatore->lettureContatore->first()?->valore ?? '-' }}
                                                {{ $contatore->unita_misura }}
                                            </span>
                                        </div>
                                    </div>
                                    <div class="mt-4 flex space-x-2">
                                        <button class="flex-1 bg-blue-500 hover:bg-blue-700 text-white text-xs py-1 px-2 rounded" 
                                                onclick="addLettura({{ $contatore->id }})">
                                            <i class="fas fa-plus mr-1"></i>Lettura
                                        </button>
                                        <button class="bg-gray-500 hover:bg-gray-700 text-white text-xs py-1 px-2 rounded" 
                                                onclick="viewContatore({{ $contatore->id }})">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        <button class="bg-green-500 hover:bg-green-700 text-white text-xs py-1 px-2 rounded" 
                                                onclick="editContatore({{ $contatore->id }})">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            @empty
                            <div class="col-span-full text-center text-gray-500 dark:text-gray-400 py-8">
                                <i class="fas fa-tachometer-alt text-4xl mb-2"></i>
                                <p>Nessun contatore configurato</p>
                                <p class="text-sm">Aggiungi il primo contatore per iniziare</p>
                            </div>
                            @endforelse
                        </div>
                    </div>

                    {{-- Tab Chiavi --}}
                    <div id="tab-chiavi" class="tab-content hidden">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">
                                <i class="fas fa-key mr-2"></i>Gestione Chiavi
                            </h3>
                            <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded" 
                                    onclick="openModalChiave()">
                                <i class="fas fa-plus mr-2"></i>Nuova Chiave
                            </button>
                        </div>

                        <div class="bg-white dark:bg-gray-800 shadow overflow-hidden sm:rounded-md">
                            <ul class="divide-y divide-gray-200 dark:divide-gray-700">
                                @forelse($stabile->chiavi ?? [] as $chiave)
                                <li class="px-6 py-4">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center">
                                            <div class="flex-shrink-0">
                                                <i class="fas fa-key text-lg 
                                                    {{ $chiave->stato === 'disponibile' ? 'text-green-500' : 
                                                       ($chiave->stato === 'in_uso' ? 'text-yellow-500' : 'text-red-500') }}"></i>
                                            </div>
                                            <div class="ml-4">
                                                <div class="text-sm font-medium text-gray-900 dark:text-gray-100">
                                                    {{ $chiave->codice }} - {{ $chiave->descrizione }}
                                                </div>
                                                <div class="text-sm text-gray-500 dark:text-gray-400">
                                                    Tipo: {{ ucfirst($chiave->tipo) }}
                                                    @if($chiave->zona)
                                                        | Zona: {{ $chiave->zona }}
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                        <div class="flex items-center space-x-2">
                                            <span class="px-2 py-1 text-xs rounded-full 
                                                {{ $chiave->stato === 'disponibile' ? 'bg-green-100 text-green-800' : 
                                                   ($chiave->stato === 'in_uso' ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800') }}">
                                                {{ ucfirst(str_replace('_', ' ', $chiave->stato)) }}
                                            </span>
                                            @if($chiave->stato === 'disponibile')
                                            <button class="text-blue-600 hover:text-blue-900" 
                                                    onclick="assegnaChiave({{ $chiave->id }})">
                                                <i class="fas fa-hand-paper"></i>
                                            </button>
                                            @elseif($chiave->stato === 'in_uso')
                                            <button class="text-orange-600 hover:text-orange-900" 
                                                    onclick="restituisciChiave({{ $chiave->id }})">
                                                <i class="fas fa-undo"></i>
                                            </button>
                                            @endif
                                            <button class="text-green-600 hover:text-green-900" 
                                                    onclick="editChiave({{ $chiave->id }})">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                        </div>
                                    </div>
                                </li>
                                @empty
                                <li class="px-6 py-4 text-center text-gray-500 dark:text-gray-400">
                                    <i class="fas fa-key text-4xl mb-2"></i>
                                    <p>Nessuna chiave registrata</p>
                                    <p class="text-sm">Aggiungi la prima chiave per iniziare</p>
                                </li>
                                @endforelse
                            </ul>
                        </div>
                    </div>

                    {{-- Tab Fondi --}}
                    <div id="tab-fondi" class="tab-content hidden">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">
                                <i class="fas fa-piggy-bank mr-2"></i>Fondi Condominiali
                            </h3>
                            <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded" 
                                    onclick="openModalFondo()">
                                <i class="fas fa-plus mr-2"></i>Nuovo Fondo
                            </button>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                            @forelse($stabile->fondiCondominiali ?? [] as $fondo)
                            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                                <div class="p-4">
                                    <div class="flex items-center justify-between mb-3">
                                        <h4 class="text-lg font-medium text-gray-900 dark:text-gray-100">
                                            {{ $fondo->nome }}
                                        </h4>
                                        <span class="px-2 py-1 text-xs rounded-full 
                                            {{ $fondo->stato === 'attivo' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                            {{ ucfirst($fondo->stato) }}
                                        </span>
                                    </div>
                                    <div class="space-y-2">
                                        <div class="flex justify-between text-sm">
                                            <span class="text-gray-600 dark:text-gray-400">Tipo:</span>
                                            <span class="font-medium">{{ ucfirst($fondo->tipo) }}</span>
                                        </div>
                                        <div class="flex justify-between text-sm">
                                            <span class="text-gray-600 dark:text-gray-400">Saldo:</span>
                                            <span class="font-medium {{ $fondo->saldo_attuale >= 0 ? 'text-green-600' : 'text-red-600' }}">
                                                € {{ number_format($fondo->saldo_attuale, 2, ',', '.') }}
                                            </span>
                                        </div>
                                        @if($fondo->obiettivo_saldo)
                                        <div class="flex justify-between text-sm">
                                            <span class="text-gray-600 dark:text-gray-400">Obiettivo:</span>
                                            <span class="font-medium">€ {{ number_format($fondo->obiettivo_saldo, 2, ',', '.') }}</span>
                                        </div>
                                        @endif
                                    </div>
                                    <div class="mt-4 flex space-x-2">
                                        <button class="flex-1 bg-blue-500 hover:bg-blue-700 text-white text-xs py-1 px-2 rounded" 
                                                onclick="viewMovimenti({{ $fondo->id }})">
                                            <i class="fas fa-list mr-1"></i>Movimenti
                                        </button>
                                        <button class="bg-green-500 hover:bg-green-700 text-white text-xs py-1 px-2 rounded" 
                                                onclick="editFondo({{ $fondo->id }})">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            @empty
                            <div class="col-span-full text-center text-gray-500 dark:text-gray-400 py-8">
                                <i class="fas fa-piggy-bank text-4xl mb-2"></i>
                                <p>Nessun fondo configurato</p>
                                <p class="text-sm">Crea il primo fondo per iniziare</p>
                            </div>
                            @endforelse
                        </div>
                    </div>

                    {{-- Tab Import GESCON --}}
                    <div id="tab-import" class="tab-content hidden">
                        <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">
                            <i class="fas fa-download mr-2"></i>Import da GESCON
                        </h3>

                        <div class="bg-yellow-50 dark:bg-yellow-900 border border-yellow-200 dark:border-yellow-700 rounded-lg p-4 mb-6">
                            <div class="flex">
                                <div class="flex-shrink-0">
                                    <i class="fas fa-exclamation-triangle text-yellow-400"></i>
                                </div>
                                <div class="ml-3">
                                    <h3 class="text-sm font-medium text-yellow-800 dark:text-yellow-200">
                                        Attenzione
                                    </h3>
                                    <div class="mt-2 text-sm text-yellow-700 dark:text-yellow-300">
                                        <p>L'importazione sovrascriverà i dati esistenti. Assicurati di aver fatto un backup.</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
                                <h4 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">
                                    <i class="fas fa-home mr-2"></i>Dati Stabile
                                </h4>
                                <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                                    Importa i dati base dello stabile dal database GESCON
                                </p>
                                <button class="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" 
                                        onclick="importStabile()">
                                    <i class="fas fa-download mr-2"></i>Importa Dati Stabile
                                </button>
                            </div>

                            <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
                                <h4 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">
                                    <i class="fas fa-table mr-2"></i>Tabelle Millesimali
                                </h4>
                                <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                                    Importa le tabelle millesimali esistenti
                                </p>
                                <button class="w-full bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded" 
                                        onclick="importMillesimi()">
                                    <i class="fas fa-download mr-2"></i>Importa Millesimi
                                </button>
                            </div>

                            <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
                                <h4 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">
                                    <i class="fas fa-users mr-2"></i>Unità e Soggetti
                                </h4>
                                <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                                    Importa unità immobiliari e anagrafica condòmini
                                </p>
                                <button class="w-full bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded" 
                                        onclick="importUnita()">
                                    <i class="fas fa-download mr-2"></i>Importa Unità
                                </button>
                            </div>

                            <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
                                <h4 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">
                                    <i class="fas fa-euro-sign mr-2"></i>Dati Finanziari
                                </h4>
                                <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                                    Importa movimenti e situazione debitoria
                                </p>
                                <button class="w-full bg-orange-500 hover:bg-orange-700 text-white font-bold py-2 px-4 rounded" 
                                        onclick="importFinanziari()">
                                    <i class="fas fa-download mr-2"></i>Importa Finanziari
                                </button>
                            </div>
                        </div>

                        <div id="import-progress" class="hidden mt-6">
                            <div class="bg-blue-50 dark:bg-blue-900 border border-blue-200 dark:border-blue-700 rounded-lg p-4">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0">
                                        <i class="fas fa-spinner fa-spin text-blue-400"></i>
                                    </div>
                                    <div class="ml-3">
                                        <h3 class="text-sm font-medium text-blue-800 dark:text-blue-200">
                                            Importazione in corso...
                                        </h3>
                                        <div class="mt-2 text-sm text-blue-700 dark:text-blue-300">
                                            <p id="import-status">Preparazione...</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                {{-- Strutture --}}
                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <i class="fas fa-building text-3xl text-purple-500"></i>
                            </div>
                            <div class="ml-5 w-0 flex-1">
                                <dl>
                                    <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Strutture</dt>
                                    <dd class="text-lg font-medium text-gray-900 dark:text-gray-100">
                                        @if(isset($kpi['strutture_fisiche']['palazzina']))
                                            {{ $kpi['strutture_fisiche']['palazzina'] }} palazzine
                                        @else
                                            Non configurate
                                        @endif
                                    </dd>
                                    <dd class="text-sm text-gray-500">
                                        @if(isset($kpi['strutture_fisiche']['scala']))
                                            {{ $kpi['strutture_fisiche']['scala'] }} scale
                                        @endif
                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Unità --}}
                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <i class="fas fa-home text-3xl text-orange-500"></i>
                            </div>
                            <div class="ml-5 w-0 flex-1">
                                <dl>
                                    <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Unità Immobiliari</dt>
                                    <dd class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ $stabile->numero_unita ?? 0 }}</dd>
                                    <dd class="text-sm text-gray-500">{{ $stabile->numero_piani ?? 0 }} piani</dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Menu Gestione Avanzata --}}
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">Gestione Avanzata Stabile</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                        
                        {{-- Gestione Chiavi --}}
                        <a href="{{ route('admin.stabili.chiavi.index', $stabile) }}" 
                           class="group relative bg-blue-50 dark:bg-blue-900/20 p-6 rounded-lg border border-blue-200 dark:border-blue-800 hover:bg-blue-100 dark:hover:bg-blue-900/40 transition-colors">
                            <div>
                                <span class="rounded-lg inline-flex p-3 bg-blue-500 text-white group-hover:bg-blue-600">
                                    <i class="fas fa-key text-xl"></i>
                                </span>
                            </div>
                            <div class="mt-8">
                                <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">Gestione Chiavi</h3>
                                <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
                                    Archivio chiavi con QR Code, tracking movimenti, tipologie
                                </p>
                            </div>
                        </a>

                        {{-- Fondi Condominiali --}}
                        <a href="{{ route('admin.stabili.fondi.index', $stabile) }}" 
                           class="group relative bg-green-50 dark:bg-green-900/20 p-6 rounded-lg border border-green-200 dark:border-green-800 hover:bg-green-100 dark:hover:bg-green-900/40 transition-colors">
                            <div>
                                <span class="rounded-lg inline-flex p-3 bg-green-500 text-white group-hover:bg-green-600">
                                    <i class="fas fa-piggy-bank text-xl"></i>
                                </span>
                            </div>
                            <div class="mt-8">
                                <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">Fondi Condominiali</h3>
                                <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
                                    Gestione fondi gerarchici, ordinario, riserva, specifici
                                </p>
                            </div>
                        </a>

                        {{-- Struttura Fisica --}}
                        <a href="{{ route('admin.stabili.struttura.index', $stabile) }}" 
                           class="group relative bg-purple-50 dark:bg-purple-900/20 p-6 rounded-lg border border-purple-200 dark:border-purple-800 hover:bg-purple-100 dark:hover:bg-purple-900/40 transition-colors">
                            <div>
                                <span class="rounded-lg inline-flex p-3 bg-purple-500 text-white group-hover:bg-purple-600">
                                    <i class="fas fa-building text-xl"></i>
                                </span>
                            </div>
                            <div class="mt-8">
                                <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">Struttura Fisica</h3>
                                <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
                                    Palazzine, scale, piani, auto-generazione unità
                                </p>
                            </div>
                        </a>

                        {{-- Gestione Classica --}}
                        <a href="{{ route('admin.stabili.edit', $stabile) }}" 
                           class="group relative bg-gray-50 dark:bg-gray-900/20 p-6 rounded-lg border border-gray-200 dark:border-gray-800 hover:bg-gray-100 dark:hover:bg-gray-900/40 transition-colors">
                            <div>
                                <span class="rounded-lg inline-flex p-3 bg-gray-500 text-white group-hover:bg-gray-600">
                                    <i class="fas fa-edit text-xl"></i>
                                </span>
                            </div>
                            <div class="mt-8">
                                <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">Modifica Stabile</h3>
                                <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
                                    Dati anagrafici, contatti, configurazione base
                                </p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium 
                                            {{ $stabile->stato === 'attivo' ? 'bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100' : 'bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100' }}">
                                            {{ ucfirst($stabile->stato) }}
                                        </span>
                                    </dd>
                                </div>
                            </dl>
                        </div>

                        <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
                            <h4 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-3">Indirizzo</h4>
                            <dl class="space-y-2">
                                <div>
                                    <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Indirizzo:</dt>
                                    <dd class="text-sm text-gray-900 dark:text-gray-100">{{ $stabile->indirizzo }}</dd>
                                </div>
                                <div>
                                    <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Città:</dt>
                                    <dd class="text-sm text-gray-900 dark:text-gray-100">{{ $stabile->citta }}</dd>
                                </div>
                                <div>
                                    <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">CAP:</dt>
                                    <dd class="text-sm text-gray-900 dark:text-gray-100">{{ $stabile->cap }}</dd>
                                </div>
                                <div>
                                    <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Provincia:</dt>
                                    <dd class="text-sm text-gray-900 dark:text-gray-100">{{ $stabile->provincia ?? '-' }}</dd>
                                </div>
                            </dl>
                        </div>
                    </div>

                    <!-- Note -->
                    @if($stabile->note)
                        <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg mb-6">
                            <h4 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-3">Note</h4>
                            <p class="text-sm text-gray-900 dark:text-gray-100">{{ $stabile->note }}</p>
                        </div>
                    @endif

                    <!-- Informazioni Sistema -->
                    <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
                        <h4 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-3">Informazioni Sistema</h4>
                        <dl class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <div>
                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Creato il:</dt>
                                <dd class="text-sm text-gray-900 dark:text-gray-100">{{ $stabile->created_at->format('d/m/Y H:i') }}</dd>
                            </div>
                            <div>
                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Ultimo aggiornamento:</dt>
                                <dd class="text-sm text-gray-900 dark:text-gray-100">{{ $stabile->updated_at->format('d/m/Y H:i') }}</dd>
                            </div>
                            @if($stabile->old_id)
                                <div>
                                    <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Old ID:</dt>
                                    <dd class="text-sm text-gray-900 dark:text-gray-100">{{ $stabile->old_id }}</dd>
                                </div>
                            @endif
                        </dl>
                    </div>

                </div>
            </div>

            {{-- Informazioni Stabile Classiche --}}
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">Informazioni Generali</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                        {{-- Dati Anagrafici --}}
                        <div>
                            <h4 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Dati Anagrafici</h4>
                            <dl class="space-y-2">
                                <div>
                                    <dt class="text-xs text-gray-400">ID Stabile:</dt>
                                    <dd class="text-sm text-gray-900 dark:text-gray-100">{{ $stabile->id }}</dd>
                                </div>
                                <div>
                                    <dt class="text-xs text-gray-400">Codice Fiscale:</dt>
                                    <dd class="text-sm text-gray-900 dark:text-gray-100">{{ $stabile->codice_fiscale ?? '-' }}</dd>
                                </div>
                                <div>
                                    <dt class="text-xs text-gray-400">CF Amministratore:</dt>
                                    <dd class="text-sm text-gray-900 dark:text-gray-100">{{ $stabile->cod_fisc_amministratore ?? '-' }}</dd>
                                </div>
                                <div>
                                    <dt class="text-xs text-gray-400">Stato:</dt>
                                    <dd class="text-sm">
                                        <span class="px-2 py-1 text-xs rounded-full 
                                            {{ $stabile->stato === 'attivo' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                            {{ ucfirst($stabile->stato) }}
                                        </span>
                                    </dd>
                                </div>
                            </dl>
                        </div>

                        {{-- Indirizzo --}}
                        <div>
                            <h4 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Ubicazione</h4>
                            <dl class="space-y-2">
                                <div>
                                    <dt class="text-xs text-gray-400">Indirizzo:</dt>
                                    <dd class="text-sm text-gray-900 dark:text-gray-100">{{ $stabile->indirizzo }}</dd>
                                </div>
                                <div>
                                    <dt class="text-xs text-gray-400">Città:</dt>
                                    <dd class="text-sm text-gray-900 dark:text-gray-100">{{ $stabile->citta }}</dd>
                                </div>
                                <div>
                                    <dt class="text-xs text-gray-400">CAP:</dt>
                                    <dd class="text-sm text-gray-900 dark:text-gray-100">{{ $stabile->cap }}</dd>
                                </div>
                                <div>
                                    <dt class="text-xs text-gray-400">Provincia:</dt>
                                    <dd class="text-sm text-gray-900 dark:text-gray-100">{{ $stabile->provincia ?? '-' }}</dd>
                                </div>
                            </dl>
                        </div>

                        {{-- Info Tecniche --}}
                        <div>
                            <h4 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Dati Tecnici</h4>
                            <dl class="space-y-2">
                                <div>
                                    <dt class="text-xs text-gray-400">Anno Costruzione:</dt>
                                    <dd class="text-sm text-gray-900 dark:text-gray-100">{{ $stabile->anno_costruzione ?? '-' }}</dd>
                                </div>
                                <div>
                                    <dt class="text-xs text-gray-400">Superficie Totale:</dt>
                                    <dd class="text-sm text-gray-900 dark:text-gray-100">
                                        {{ $stabile->superficie_totale ? number_format($stabile->superficie_totale, 0, ',', '.') . ' m²' : '-' }}
                                    </dd>
                                </div>
                                <div>
                                    <dt class="text-xs text-gray-400">Ascensori:</dt>
                                    <dd class="text-sm text-gray-900 dark:text-gray-100">{{ $stabile->numero_ascensori ?? 0 }}</dd>
                                </div>
                                <div>
                                    <dt class="text-xs text-gray-400">Garage/Box:</dt>
                                    <dd class="text-sm text-gray-900 dark:text-gray-100">{{ $stabile->numero_garage ?? 0 }}</dd>
                                </div>
                            </dl>
                        </div>
                    </div>

                    @if($stabile->note)
                        <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
                            <h4 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Note</h4>
                            <p class="text-sm text-gray-900 dark:text-gray-100">{{ $stabile->note }}</p>
                        </div>
                    @endif
                </div>
            </div>

            {{-- Azioni Rapide --}}
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6">
                    <div class="flex justify-between items-center">
                        <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">Azioni Rapide</h3>
                        <div class="space-x-2">
                            <a href="{{ route('admin.stabili.edit', $stabile) }}" 
                               class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition-colors">
                                <i class="fas fa-edit mr-2"></i>Modifica Stabile
                            </a>
                            <a href="{{ route('admin.stabili.index') }}" 
                               class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded transition-colors">
                                <i class="fas fa-arrow-left mr-2"></i>Torna alla Lista
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modali per CRUD operazioni --}}
    @include('admin.stabili.modals.tabella-millesimale')
    @include('admin.stabili.modals.contatore')
    @include('admin.stabili.modals.chiave')
    @include('admin.stabili.modals.fondo')

    {{-- Scripts per Tab e AJAX --}}
    <script>
        // Tab Management
        document.addEventListener('DOMContentLoaded', function() {
            const tabButtons = document.querySelectorAll('.tab-button');
            const tabContents = document.querySelectorAll('.tab-content');

            tabButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const tabId = this.getAttribute('data-tab');
                    
                    // Reset all tabs
                    tabButtons.forEach(btn => {
                        btn.classList.remove('active', 'border-blue-500', 'text-blue-600');
                        btn.classList.add('border-transparent', 'text-gray-500');
                    });
                    
                    tabContents.forEach(content => {
                        content.classList.add('hidden');
                    });
                    
                    // Activate selected tab
                    this.classList.add('active', 'border-blue-500', 'text-blue-600');
                    this.classList.remove('border-transparent', 'text-gray-500');
                    
                    document.getElementById('tab-' + tabId).classList.remove('hidden');
                });
            });
        });

        // Tabelle Millesimali
        function openModalTabella(id = null) {
            document.getElementById('modal-tabella').classList.remove('hidden');
            if (id) {
                fetch(`/admin/stabili/{{ $stabile->id }}/tabelle-millesimali/${id}`)
                    .then(response => response.json())
                    .then(data => {
                        document.getElementById('tabella_nome').value = data.nome;
                        document.getElementById('tabella_descrizione').value = data.descrizione || '';
                        document.getElementById('tabella_id').value = id;
                    });
            }
        }

        // Import GESCON
        function importStabile() {
            showImportProgress('Importazione dati stabile...');
            
            fetch(`/admin/stabili/{{ $stabile->id }}/import/stabile`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            })
            .then(response => response.json())
            .then(data => {
                hideImportProgress();
                if (data.success) {
                    alert('Importazione completata con successo!');
                    location.reload();
                } else {
                    alert('Errore durante l\'importazione: ' + data.message);
                }
            })
            .catch(error => {
                hideImportProgress();
                alert('Errore di connessione: ' + error.message);
            });
        }

        function showImportProgress(message) {
            document.getElementById('import-progress').classList.remove('hidden');
            document.getElementById('import-status').textContent = message;
        }

        function hideImportProgress() {
            document.getElementById('import-progress').classList.add('hidden');
        }

        // Generic close modal function
        function closeModal(modalId) {
            document.getElementById(modalId).classList.add('hidden');
        }
    </script>

    <style>
        .tab-button.active {
            border-color: #3B82F6;
            color: #2563EB;
        }
    </style>
</x-app-layout>