@extends('admin.layouts.netgescon')

@section('title', 'Dettaglio Palazzina')

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-start">
                <div>
                    <h1 class="h2 mb-2">
                        <i class="fas fa-building me-3 text-primary"></i>
                        {{ $palazzina->denominazione ?? 'Palazzina ' . $palazzina->codice_palazzina }}
                    </h1>
                    <p class="text-muted">
                        <i class="fas fa-map-marker-alt me-2"></i>
                        {{ $palazzina->indirizzo ?? $palazzina->stabile?->indirizzo ?? 'Indirizzo non disponibile' }}
                    </p>
                </div>
                <div class="d-flex gap-2">
                        <a href="{{ route('admin.palazzine.edit', $palazzina) }}" 
                       class="btn btn-netgescon-primary">
                        <i class="fas fa-edit me-2"></i>
                        Modifica
                    </a>
                    @if($palazzina->stabile)
                    <a href="{{ route('admin.stabili.show', $palazzina->stabile->id) }}" 
                       class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left me-2"></i>
                        Torna allo Stabile
                    </a>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Statistiche Overview -->
    <div class="row g-4 mb-4">
        <!-- Unità Teoriche -->
        <div class="col-xl-3 col-lg-6">
            <div class="card card-netgescon bg-primary bg-opacity-10 border-primary">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-primary text-white rounded-circle p-3">
                                <i class="fas fa-calculator"></i>
                            </div>
                        </div>
                        <div class="ms-3">
                            <p class="small text-primary mb-1">Unità Teoriche</p>
                            <h4 class="mb-0 text-primary">{{ $statistiche['unita_teoriche'] }}</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Unità Effettive -->
        <div class="col-xl-3 col-lg-6">
            <div class="card card-netgescon bg-success bg-opacity-10 border-success">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-success text-white rounded-circle p-3">
                                <i class="fas fa-home"></i>
                            </div>
                        </div>
                        <div class="ms-3">
                            <p class="small text-success mb-1">Unità Effettive</p>
                            <h4 class="mb-0 text-success">{{ $statistiche['totale_unita_effettive'] }}</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Unità Occupate -->
        <div class="col-xl-3 col-lg-6">
            <div class="card card-netgescon bg-warning bg-opacity-10 border-warning">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-warning text-white rounded-circle p-3">
                                <i class="fas fa-users"></i>
                            </div>
                        </div>
                        <div class="ms-3">
                            <p class="small text-warning mb-1">Occupate</p>
                            <h4 class="mb-0 text-warning">{{ $statistiche['unita_occupate'] }}</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Unità Libere -->
        <div class="col-xl-3 col-lg-6">
            <div class="card card-netgescon bg-info bg-opacity-10 border-info">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-info text-white rounded-circle p-3">
                                <i class="fas fa-key"></i>
                            </div>
                        </div>
                        <div class="ms-3">
                            <p class="small text-info mb-1">Libere</p>
                            <h4 class="mb-0 text-info">{{ $statistiche['unita_libere'] }}</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabs Container -->
    <div class="bg-white rounded-lg shadow-sm border">
        <!-- Tab Navigation -->
        <div class="border-b border-gray-200 px-6 pt-6">
            <nav class="-mb-px flex space-x-8" aria-label="Tabs" role="tablist">
                <button class="netgescon-tab-btn active" 
                        data-tab="informazioni-generali" 
                        role="tab">
                    <i class="fas fa-info-circle mr-2"></i>
                    Informazioni Generali
                </button>
                <button class="netgescon-tab-btn" 
                        data-tab="caratteristiche-tecniche" 
                        role="tab">
                    <i class="fas fa-tools mr-2"></i>
                    Caratteristiche Tecniche
                </button>
                <button class="netgescon-tab-btn" 
                        data-tab="scale-appartamenti" 
                        role="tab">
                    <i class="fas fa-building mr-2"></i>
                    Scale e Appartamenti
                </button>
                <button class="netgescon-tab-btn" 
                        data-tab="locali-condominiali" 
                        role="tab">
                    <i class="fas fa-warehouse mr-2"></i>
                    Locali Condominiali
                </button>
                <button class="netgescon-tab-btn" 
                        data-tab="spazi-comuni" 
                        role="tab">
                    <i class="fas fa-users mr-2"></i>
                    Spazi Comuni
                </button>
            </nav>
        </div>

        <!-- Tab Content -->
        <div class="p-6">
            <!-- Tab Informazioni Generali -->
            <div id="informazioni-generali" class="netgescon-tab-content">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <!-- Dati Identificativi -->
                    <div class="space-y-6">
                        <h3 class="text-lg font-semibold text-gray-900 border-b pb-2">
                            <i class="fas fa-id-card mr-2 text-blue-600"></i>
                            Dati Identificativi
                        </h3>
                        <div class="space-y-3">
                            <div class="flex justify-between">
                                <span class="font-medium text-gray-700">Codice Palazzina:</span>
                                <span class="text-gray-900">{{ $palazzina->codice_palazzina }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-medium text-gray-700">Denominazione:</span>
                                <span class="text-gray-900">{{ $palazzina->denominazione ?? '-' }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-medium text-gray-700">Tipo:</span>
                                <span class="text-gray-900">{{ ucfirst($palazzina->tipo ?? 'principale') }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-medium text-gray-700">Anno Costruzione:</span>
                                <span class="text-gray-900">{{ $palazzina->anno_costruzione ?? '-' }}</span>
                            </div>
                        </div>
                    </div>

                    <!-- Struttura Fisica -->
                    <div class="space-y-6">
                        <h3 class="text-lg font-semibold text-gray-900 border-b pb-2">
                            <i class="fas fa-building mr-2 text-green-600"></i>
                            Struttura Fisica
                        </h3>
                        <div class="space-y-3">
                            <div class="flex justify-between">
                                <span class="font-medium text-gray-700">Numero Scale:</span>
                                <span class="text-gray-900">{{ $palazzina->numero_scale ?? '-' }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-medium text-gray-700">Piani Fuori Terra:</span>
                                <span class="text-gray-900">{{ $palazzina->numero_piani_fuori_terra ?? '-' }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-medium text-gray-700">Piani Interrati:</span>
                                <span class="text-gray-900">{{ $palazzina->numero_piani_interrati ?? '-' }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-medium text-gray-700">Appartamenti per Piano:</span>
                                <span class="text-gray-900">{{ $palazzina->appartamenti_per_piano ?? '-' }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                @if($palazzina->note)
                <div class="mt-8">
                    <h3 class="text-lg font-semibold text-gray-900 border-b pb-2 mb-4">
                        <i class="fas fa-sticky-note mr-2 text-yellow-600"></i>
                        Note
                    </h3>
                    <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                        <p class="text-gray-800">{{ $palazzina->note }}</p>
                    </div>
                </div>
                @endif
            </div>

            <!-- Tab Caratteristiche Tecniche -->
            <div id="caratteristiche-tecniche" class="netgescon-tab-content hidden">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <!-- Impianti -->
                    <div class="space-y-6">
                        <h3 class="text-lg font-semibold text-gray-900 border-b pb-2">
                            <i class="fas fa-cogs mr-2 text-purple-600"></i>
                            Impianti e Servizi
                        </h3>
                        <div class="space-y-3">
                            <div class="flex items-center justify-between">
                                <span class="font-medium text-gray-700">Ascensore:</span>
                                <span class="flex items-center">
                                    @if($palazzina->ha_ascensore)
                                        <i class="fas fa-check-circle text-green-500 mr-2"></i>
                                        <span class="text-green-600">Sì ({{ $palazzina->numero_ascensori ?? 1 }})</span>
                                    @else
                                        <i class="fas fa-times-circle text-red-500 mr-2"></i>
                                        <span class="text-red-600">No</span>
                                    @endif
                                </span>
                            </div>
                            <div class="flex items-center justify-between">
                                <span class="font-medium text-gray-700">Videocitofono:</span>
                                <span class="flex items-center">
                                    @if($palazzina->ha_videocitofono)
                                        <i class="fas fa-check-circle text-green-500 mr-2"></i>
                                        <span class="text-green-600">Sì</span>
                                    @else
                                        <i class="fas fa-times-circle text-red-500 mr-2"></i>
                                        <span class="text-red-600">No</span>
                                    @endif
                                </span>
                            </div>
                            <div class="flex items-center justify-between">
                                <span class="font-medium text-gray-700">Accessibile Disabili:</span>
                                <span class="flex items-center">
                                    @if($palazzina->accessibile_disabili)
                                        <i class="fas fa-check-circle text-green-500 mr-2"></i>
                                        <span class="text-green-600">Sì</span>
                                    @else
                                        <i class="fas fa-times-circle text-red-500 mr-2"></i>
                                        <span class="text-red-600">No</span>
                                    @endif
                                </span>
                            </div>
                        </div>
                    </div>

                    <!-- Superfici -->
                    <div class="space-y-6">
                        <h3 class="text-lg font-semibold text-gray-900 border-b pb-2">
                            <i class="fas fa-ruler-combined mr-2 text-orange-600"></i>
                            Superfici
                        </h3>
                        <div class="space-y-3">
                            <div class="flex justify-between">
                                <span class="font-medium text-gray-700">Superficie Totale:</span>
                                <span class="text-gray-900">{{ $palazzina->superficie_totale ? $palazzina->superficie_totale . ' m²' : '-' }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-medium text-gray-700">Spazi Comuni:</span>
                                <span class="text-gray-900">{{ $statistiche['superficie_spazi_comuni'] ? $statistiche['superficie_spazi_comuni'] . ' m²' : '-' }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tab Scale e Appartamenti -->
            <div id="scale-appartamenti" class="netgescon-tab-content hidden">
                <div class="space-y-6">
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg font-semibold text-gray-900">
                            <i class="fas fa-building mr-2 text-blue-600"></i>
                            Scale, Palazzine e Appartamenti
                        </h3>
                    </div>
                    
                    <!-- Sub-Tab Navigation per Scale e Appartamenti -->
                    <div class="border-b border-gray-200">
                        <nav class="-mb-px flex space-x-8" aria-label="Sub Tabs" role="tablist">
                            <button class="netgescon-subtab-btn active" 
                                    data-subtab="unita-immobiliari-view" 
                                    role="tab">
                                <i class="fas fa-home mr-2"></i>
                                Unità Immobiliari
                            </button>
                            <button class="netgescon-subtab-btn" 
                                    data-subtab="scale-appartamenti-view" 
                                    role="tab">
                                <i class="fas fa-stairs mr-2"></i>
                                Scale e Appartamenti
                            </button>
                        </nav>
                    </div>

                    <!-- Sub-Tab Content -->
                    <div class="mt-6">
                        <!-- Sub-Tab Unità Immobiliari -->
                        <div id="unita-immobiliari-view" class="netgescon-subtab-content">
                            <div class="space-y-4">
                                <div class="flex items-center justify-between">
                                    <h4 class="text-md font-semibold text-gray-800">
                                        <i class="fas fa-list mr-2 text-green-600"></i>
                                        Vista Unità Immobiliari per Palazzina e Piani
                                    </h4>
                                    <button onclick="aggiungiUnitaImmobiliare()" class="netgescon-btn netgescon-btn-primary">
                                        <i class="fas fa-plus mr-2"></i>
                                        Nuova Unità
                                    </button>
                                </div>
                                
                                @include('admin.stabili.tabs.unita-immobiliari', [
                                    'stabile' => $palazzina->stabile, 
                                    'palazzina_filter' => $palazzina->id, 
                                    'tipo_filter' => 'appartamenti',
                                    'vista_tipo' => 'palazzina_piani'
                                ])
                            </div>
                        </div>

                        <!-- Sub-Tab Scale e Appartamenti -->
                        <div id="scale-appartamenti-view" class="netgescon-subtab-content hidden">
                            <div class="space-y-4">
                                <div class="flex items-center justify-between">
                                    <h4 class="text-md font-semibold text-gray-800">
                                        <i class="fas fa-building mr-2 text-blue-600"></i>
                                        Vista Scale della Palazzina e Appartamenti
                                    </h4>
                                    <button onclick="aggiungiScala()" class="netgescon-btn netgescon-btn-primary">
                                        <i class="fas fa-plus mr-2"></i>
                                        Nuova Scala
                                    </button>
                                </div>
                                
                                <!-- Vista Scale della Palazzina -->
                                <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
                                    @forelse($palazzina->scale ?? [] as $scala)
                                    <div class="bg-white rounded-lg shadow-md border border-gray-200 p-6">
                                        <div class="flex items-center justify-between mb-4">
                                            <h5 class="text-lg font-semibold text-gray-900">
                                                <i class="fas fa-stairs mr-2 text-blue-600"></i>
                                                Scala {{ $scala->denominazione ?? $scala->numero ?? 'N/A' }}
                                            </h5>
                                            <div class="flex space-x-2">
                                                <button onclick="editScala({{ $scala->id }})" 
                                                        class="text-blue-600 hover:text-blue-800">
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                                <button onclick="deleteScala({{ $scala->id }})" 
                                                        class="text-red-600 hover:text-red-800">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </div>
                                        </div>
                                        
                                        <div class="grid grid-cols-2 gap-4 text-sm">
                                            <div>
                                                <span class="text-gray-500">Piani:</span>
                                                <span class="font-medium">{{ $scala->numero_piani ?? 'N/A' }}</span>
                                            </div>
                                            <div>
                                                <span class="text-gray-500">Appartamenti:</span>
                                                <span class="font-medium">{{ $scala->appartamenti->count() ?? 0 }}</span>
                                            </div>
                                        </div>
                                        
                                        <!-- Lista Appartamenti per questa Scala -->
                                        @if($scala->appartamenti && $scala->appartamenti->count() > 0)
                                        <div class="mt-4">
                                            <h6 class="text-sm font-medium text-gray-700 mb-2">Appartamenti:</h6>
                                            <div class="space-y-2">
                                                @foreach($scala->appartamenti->sortBy('piano') as $appartamento)
                                                <div class="flex items-center justify-between p-2 bg-gray-50 rounded">
                                                    <div class="flex items-center space-x-2">
                                                        <i class="fas fa-door-open text-green-600"></i>
                                                        <span class="text-sm font-medium">
                                                            {{ $appartamento->denominazione ?? 'App. N/A' }}
                                                        </span>
                                                        <span class="text-xs text-gray-500">
                                                            Piano {{ $appartamento->piano ?? 'N/A' }}
                                                        </span>
                                                    </div>
                                                    <div class="flex space-x-1">
                                                        <button onclick="editAppartamento({{ $appartamento->id }})" 
                                                                class="text-blue-600 hover:text-blue-800 text-xs">
                                                            <i class="fas fa-edit"></i>
                                                        </button>
                                                        <button onclick="viewAppartamento({{ $appartamento->id }})" 
                                                                class="text-green-600 hover:text-green-800 text-xs">
                                                            <i class="fas fa-eye"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                                @endforeach
                                            </div>
                                        </div>
                                        @else
                                        <div class="mt-4 text-center text-gray-500 text-sm">
                                            <i class="fas fa-home-alt text-gray-400 mb-2"></i>
                                            <p>Nessun appartamento assegnato</p>
                                        </div>
                                        @endif
                                    </div>
                                    @empty
                                    <div class="col-span-full text-center py-12">
                                        <i class="fas fa-stairs text-gray-400 text-4xl mb-4"></i>
                                        <h4 class="text-lg font-medium text-gray-600 mb-2">Nessuna Scala Configurata</h4>
                                        <p class="text-gray-500 mb-4">Inizia aggiungendo la prima scala per questa palazzina</p>
                                        <button onclick="aggiungiScala()" class="netgescon-btn netgescon-btn-primary">
                                            <i class="fas fa-plus mr-2"></i>
                                            Aggiungi Prima Scala
                                        </button>
                                    </div>
                                    @endforelse
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tab Locali Condominiali -->
            <div id="locali-condominiali" class="netgescon-tab-content hidden">
                <div class="space-y-6">
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg font-semibold text-gray-900">
                            <i class="fas fa-warehouse mr-2 text-purple-600"></i>
                            Locali Condominiali
                        </h3>
                        <button onclick="openLocaleModal()" class="netgescon-btn netgescon-btn-primary">
                            <i class="fas fa-plus mr-2"></i>
                            Nuovo Locale
                        </button>
                    </div>

                    <!-- Filtri Locali -->
                    <div class="bg-gray-50 rounded-lg p-4">
                        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Tipo Locale</label>
                                <select id="filtro-tipo-locale" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500">
                                    <option value="">Tutti i tipi</option>
                                    <option value="cantina">Cantina</option>
                                    <option value="soffitta">Soffitta</option>
                                    <option value="terrazza">Terrazza</option>
                                    <option value="locale_tecnico">Locale Tecnico</option>
                                    <option value="posto_auto">Posto Auto</option>
                                    <option value="fontana">Fontana</option>
                                    <option value="altro">Altro</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Stato Locazione</label>
                                <select id="filtro-stato-locazione" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500">
                                    <option value="">Tutti</option>
                                    <option value="libero">Libero</option>
                                    <option value="affittato">Affittato</option>
                                    <option value="non_affittabile">Non Affittabile</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Gestione Chiavi</label>
                                <select id="filtro-chiavi" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500">
                                    <option value="">Tutte</option>
                                    <option value="amministratore">Amministratore</option>
                                    <option value="portiere">Portiere</option>
                                    <option value="condomino">Condomino</option>
                                </select>
                            </div>
                            <div class="flex items-end">
                                <button onclick="applicaFiltriLocali()" class="w-full netgescon-btn netgescon-btn-secondary">
                                    <i class="fas fa-filter mr-2"></i>
                                    Filtra
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Lista Locali Condominiali -->
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6" id="locali-container">
                        <!-- Placeholder per i locali - saranno caricati via AJAX -->
                        <div class="col-span-2 text-center py-12">
                            <div class="text-gray-500">
                                <i class="fas fa-warehouse text-4xl mb-4 opacity-50"></i>
                                <p class="text-lg font-medium">Caricamento locali condominiali...</p>
                            </div>
                        </div>
                    </div>

                    <!-- Statistiche Locali -->
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mt-8">
                        <div class="bg-green-50 border border-green-200 rounded-lg p-4">
                            <div class="flex items-center">
                                <i class="fas fa-check-circle text-green-600 text-xl mr-3"></i>
                                <div>
                                    <h4 class="font-medium text-green-800">Liberi</h4>
                                    <p class="text-2xl font-bold text-green-600" id="stat-liberi">-</p>
                                </div>
                            </div>
                        </div>
                        <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                            <div class="flex items-center">
                                <i class="fas fa-handshake text-blue-600 text-xl mr-3"></i>
                                <div>
                                    <h4 class="font-medium text-blue-800">Affittati</h4>
                                    <p class="text-2xl font-bold text-blue-600" id="stat-affittati">-</p>
                                </div>
                            </div>
                        </div>
                        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                            <div class="flex items-center">
                                <i class="fas fa-euro-sign text-yellow-600 text-xl mr-3"></i>
                                <div>
                                    <h4 class="font-medium text-yellow-800">Rendita Mensile</h4>
                                    <p class="text-2xl font-bold text-yellow-600" id="stat-rendita">€0</p>
                                </div>
                            </div>
                        </div>
                        <div class="bg-purple-50 border border-purple-200 rounded-lg p-4">
                            <div class="flex items-center">
                                <i class="fas fa-key text-purple-600 text-xl mr-3"></i>
                                <div>
                                    <h4 class="font-medium text-purple-800">Chiavi Gestite</h4>
                                    <p class="text-2xl font-bold text-purple-600" id="stat-chiavi">-</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tab Spazi Comuni -->
            <div id="spazi-comuni" class="netgescon-tab-content hidden">
                <div class="space-y-6">
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg font-semibold text-gray-900">
                            <i class="fas fa-users mr-2 text-blue-600"></i>
                            Spazi e Servizi Comuni
                        </h3>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                        @if($palazzina->ha_giardino_comune)
                        <div class="bg-green-50 border border-green-200 rounded-lg p-4">
                            <div class="flex items-center">
                                <i class="fas fa-tree text-green-600 text-xl mr-3"></i>
                                <div>
                                    <h4 class="font-medium text-green-800">Giardino Comune</h4>
                                    <p class="text-sm text-green-600">{{ $palazzina->mq_giardino_comune ?? '-' }} m²</p>
                                </div>
                            </div>
                        </div>
                        @endif

                        @if($palazzina->posti_auto_coperti > 0)
                        <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                            <div class="flex items-center">
                                <i class="fas fa-car text-blue-600 text-xl mr-3"></i>
                                <div>
                                    <h4 class="font-medium text-blue-800">Posti Auto Coperti</h4>
                                    <p class="text-sm text-blue-600">{{ $palazzina->posti_auto_coperti }} posti</p>
                                </div>
                            </div>
                        </div>
                        @endif

                        @if($palazzina->ha_locale_caldaia)
                        <div class="bg-orange-50 border border-orange-200 rounded-lg p-4">
                            <div class="flex items-center">
                                <i class="fas fa-fire text-orange-600 text-xl mr-3"></i>
                                <div>
                                    <h4 class="font-medium text-orange-800">Locale Caldaia</h4>
                                    <p class="text-sm text-orange-600">Presente</p>
                                </div>
                            </div>
                        </div>
                        @endif

                        @if($palazzina->ha_locale_contatori)
                        <div class="bg-purple-50 border border-purple-200 rounded-lg p-4">
                            <div class="flex items-center">
                                <i class="fas fa-tachometer-alt text-purple-600 text-xl mr-3"></i>
                                <div>
                                    <h4 class="font-medium text-purple-800">Locale Contatori</h4>
                                    <p class="text-sm text-purple-600">Presente</p>
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Gestione Locale Condominiale -->
<div id="localeModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
    <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-2/3 lg:w-1/2 shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-medium text-gray-900" id="locale-modal-title">Nuovo Locale Condominiale</h3>
                <button onclick="closeLocaleModal()" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <form id="localeForm" method="POST">
                @csrf
                <div class="space-y-4">
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Tipo Locale</label>
                            <select name="tipo_locale" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
                                <option value="">Seleziona tipo...</option>
                                <option value="cantina">Cantina</option>
                                <option value="soffitta">Soffitta</option>
                                <option value="terrazza">Terrazza</option>
                                <option value="locale_tecnico">Locale Tecnico</option>
                                <option value="posto_auto">Posto Auto</option>
                                <option value="fontana">Fontana</option>
                                <option value="altro">Altro</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Identificativo</label>
                            <input type="text" name="identificativo" required placeholder="es. C01, P15, T2..." 
                                   class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
                        </div>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Descrizione</label>
                        <input type="text" name="descrizione" 
                               placeholder="es. Cantina piano seminterrato, Posto auto coperto..."
                               class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
                    </div>
                    
                    <div class="grid grid-cols-3 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Superficie (m²)</label>
                            <input type="number" name="superficie" step="0.01" min="0"
                                   class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Piano</label>
                            <input type="text" name="piano" placeholder="S1, T, P..."
                                   class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Numero Chiavi</label>
                            <input type="number" name="numero_chiavi" min="0" value="0"
                                   class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
                        </div>
                    </div>
                    
                    <!-- Sezione Locazione -->
                    <div class="border-t pt-4">
                        <h4 class="font-medium text-gray-900 mb-3">Gestione Locazione</h4>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700">Stato</label>
                                <select name="stato_locazione" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
                                    <option value="libero">Libero</option>
                                    <option value="affittato">Affittato</option>
                                    <option value="non_affittabile">Non Affittabile</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700">Canone Mensile (€)</label>
                                <input type="number" name="canone_mensile" step="0.01" min="0"
                                       class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
                            </div>
                        </div>
                        
                        <div class="grid grid-cols-2 gap-4 mt-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700">Data Inizio Locazione</label>
                                <input type="date" name="data_inizio_locazione"
                                       class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700">Data Fine Locazione</label>
                                <input type="date" name="data_fine_locazione"
                                       class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
                            </div>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mt-4">Locatario</label>
                            <input type="text" name="locatario" placeholder="Nome e cognome del locatario"
                                   class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
                        </div>
                    </div>
                    
                    <!-- Sezione Gestione Chiavi -->
                    <div class="border-t pt-4">
                        <h4 class="font-medium text-gray-900 mb-3">Gestione Chiavi</h4>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700">Responsabile Chiavi</label>
                                <select name="responsabile_chiavi" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
                                    <option value="amministratore">Amministratore</option>
                                    <option value="portiere">Portiere</option>
                                    <option value="condomino">Condomino Referente</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700">Note Chiavi</label>
                                <input type="text" name="note_chiavi" placeholder="es. Doppione presso..."
                                       class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
                            </div>
                        </div>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Note Generali</label>
                        <textarea name="note" rows="3" 
                                  class="mt-1 block w-full border-gray-300 rounded-md shadow-sm"></textarea>
                    </div>
                </div>
                
                <div class="flex justify-end space-x-2 mt-6">
                    <button type="button" onclick="closeLocaleModal()" 
                            class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300">
                        Annulla
                    </button>
                    <button type="submit" 
                            class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-md hover:bg-purple-700">
                        Salva Locale
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<style>
/* Stili per i sub-tab */
.netgescon-subtab-btn {
    @apply whitespace-nowrap border-b-2 border-transparent py-4 px-1 text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 transition-colors duration-200;
}

.netgescon-subtab-btn.active {
    @apply border-blue-500 text-blue-600;
}

.netgescon-subtab-content {
    @apply block;
}

.netgescon-subtab-content.hidden {
    @apply hidden;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize tabs
    const tabButtons = document.querySelectorAll('.netgescon-tab-btn');
    const tabContents = document.querySelectorAll('.netgescon-tab-content');

    tabButtons.forEach(button => {
        button.addEventListener('click', function() {
            const targetTab = this.getAttribute('data-tab');
            
            // Remove active class from all buttons and contents
            tabButtons.forEach(btn => btn.classList.remove('active'));
            tabContents.forEach(content => content.classList.add('hidden'));
            
            // Add active class to clicked button and show corresponding content
            this.classList.add('active');
            document.getElementById(targetTab).classList.remove('hidden');
            
            // Se stiamo aprendo il tab locali condominiali, carica i dati
            if (targetTab === 'locali-condominiali') {
                caricaLocaliCondominiali();
            }
        });
    });

    // Initialize sub-tabs
    const subtabButtons = document.querySelectorAll('.netgescon-subtab-btn');
    const subtabContents = document.querySelectorAll('.netgescon-subtab-content');

    subtabButtons.forEach(button => {
        button.addEventListener('click', function() {
            const targetSubtab = this.getAttribute('data-subtab');
            
            // Remove active class from all subtab buttons and contents
            subtabButtons.forEach(btn => btn.classList.remove('active'));
            subtabContents.forEach(content => content.classList.add('hidden'));
            
            // Add active class to clicked button and show corresponding content
            this.classList.add('active');
            document.getElementById(targetSubtab).classList.remove('hidden');
        });
    });
});

// Funzioni per la gestione dei locali condominiali
function openLocaleModal(localeId = null) {
    const modal = document.getElementById('localeModal');
    const title = document.getElementById('locale-modal-title');
    const form = document.getElementById('localeForm');
    
    if (localeId) {
        title.textContent = 'Modifica Locale Condominiale';
        form.action = `/admin/palazzine/{{ $palazzina->id }}/locali/${localeId}`;
        // Carica i dati del locale
        caricaDatiLocale(localeId);
    } else {
        title.textContent = 'Nuovo Locale Condominiale';
        form.action = `/admin/palazzine/{{ $palazzina->id }}/locali`;
        form.reset();
    }
    
    modal.classList.remove('hidden');
}

function closeLocaleModal() {
    document.getElementById('localeModal').classList.add('hidden');
}

function caricaLocaliCondominiali() {
    const container = document.getElementById('locali-container');
    
    // Mostra loading
    container.innerHTML = `
        <div class="col-span-2 text-center py-12">
            <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-500 mx-auto mb-4"></div>
            <p class="text-gray-500">Caricamento locali...</p>
        </div>
    `;
    
    fetch(`/admin/palazzine/{{ $palazzina->id }}/locali-condominiali`)
        .then(response => response.json())
        .then(data => {
            if (data.locali && data.locali.length > 0) {
                let html = '';
                data.locali.forEach(locale => {
                    html += generaCardLocale(locale);
                });
                container.innerHTML = html;
                
                // Aggiorna statistiche
                aggiornaStatisticheLocali(data.statistiche);
            } else {
                container.innerHTML = `
                    <div class="col-span-2 text-center py-12">
                        <div class="text-gray-500">
                            <i class="fas fa-warehouse text-4xl mb-4 opacity-50"></i>
                            <p class="text-lg font-medium">Nessun locale condominiale</p>
                            <p class="text-sm mt-2">Aggiungi il primo locale per iniziare</p>
                        </div>
                    </div>
                `;
            }
        })
        .catch(error => {
            console.error('Errore nel caricamento dei locali:', error);
            container.innerHTML = `
                <div class="col-span-2 text-center py-12">
                    <div class="text-red-500">
                        <i class="fas fa-exclamation-triangle text-4xl mb-4 opacity-50"></i>
                        <p class="text-lg font-medium">Errore nel caricamento</p>
                    </div>
                </div>
            `;
        });
}

function generaCardLocale(locale) {
    const tipoIcons = {
        'cantina': 'fas fa-archive',
        'soffitta': 'fas fa-warehouse',
        'terrazza': 'fas fa-tree',
        'locale_tecnico': 'fas fa-tools',
        'posto_auto': 'fas fa-car',
        'fontana': 'fas fa-fountain',
        'altro': 'fas fa-cube'
    };
    
    const statoColors = {
        'libero': 'green',
        'affittato': 'blue',
        'non_affittabile': 'gray'
    };
    
    const icon = tipoIcons[locale.tipo_locale] || 'fas fa-cube';
    const color = statoColors[locale.stato_locazione] || 'gray';
    
    return `
        <div class="bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
            <div class="flex items-start justify-between mb-3">
                <div class="flex items-center">
                    <i class="${icon} text-${color}-600 text-xl mr-3"></i>
                    <div>
                        <h4 class="font-medium text-gray-900">${locale.identificativo}</h4>
                        <p class="text-sm text-gray-500 capitalize">${locale.tipo_locale.replace('_', ' ')}</p>
                    </div>
                </div>
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-${color}-100 text-${color}-800 capitalize">
                    ${locale.stato_locazione.replace('_', ' ')}
                </span>
            </div>
            
            <p class="text-sm text-gray-600 mb-3">${locale.descrizione || 'Nessuna descrizione'}</p>
            
            <div class="grid grid-cols-2 gap-2 text-xs text-gray-500 mb-3">
                <div><i class="fas fa-ruler-combined mr-1"></i>${locale.superficie || '-'} m²</div>
                <div><i class="fas fa-layer-group mr-1"></i>Piano ${locale.piano || '-'}</div>
                <div><i class="fas fa-key mr-1"></i>${locale.numero_chiavi || 0} chiavi</div>
                <div><i class="fas fa-euro-sign mr-1"></i>€${locale.canone_mensile || '0'}/mese</div>
            </div>
            
            ${locale.locatario ? `
                <div class="text-xs text-gray-600 mb-3">
                    <i class="fas fa-user mr-1"></i>
                    Locatario: ${locale.locatario}
                </div>
            ` : ''}
            
            <div class="text-xs text-gray-500 mb-3">
                <i class="fas fa-user-cog mr-1"></i>
                Chiavi: ${locale.responsabile_chiavi || 'Non specificato'}
            </div>
            
            <div class="flex justify-end space-x-2">
                <button onclick="openLocaleModal(${locale.id})" class="text-blue-600 hover:text-blue-800 text-sm">
                    <i class="fas fa-edit mr-1"></i>Modifica
                </button>
                <button onclick="eliminaLocale(${locale.id})" class="text-red-600 hover:text-red-800 text-sm">
                    <i class="fas fa-trash mr-1"></i>Elimina
                </button>
            </div>
        </div>
    `;
}

function aggiornaStatisticheLocali(stats) {
    if (stats) {
        document.getElementById('stat-liberi').textContent = stats.liberi || 0;
        document.getElementById('stat-affittati').textContent = stats.affittati || 0;
        document.getElementById('stat-rendita').textContent = '€' + (stats.rendita_mensile || 0);
        document.getElementById('stat-chiavi').textContent = stats.totale_chiavi || 0;
    }
}

function applicaFiltriLocali() {
    // Implementa il filtro dei locali
    caricaLocaliCondominiali();
}

function eliminaLocale(localeId) {
    if (confirm('Sei sicuro di voler eliminare questo locale?')) {
        fetch(`/admin/palazzine/{{ $palazzina->id }}/locali/${localeId}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                caricaLocaliCondominiali();
            } else {
                alert('Errore nell\'eliminazione del locale');
            }
        })
        .catch(error => {
            console.error('Errore:', error);
            alert('Errore nell\'eliminazione del locale');
        });
    }
}

// Funzioni per gestione Unità Immobiliari e Scale
function aggiungiUnitaImmobiliare() {
    // TODO: Implementare modal per aggiungere unità immobiliare
    alert('Funzione in sviluppo: Aggiungi Unità Immobiliare');
}

function aggiungiScala() {
    // TODO: Implementare modal per aggiungere scala
    alert('Funzione in sviluppo: Aggiungi Scala');
}

function editScala(scalaId) {
    // TODO: Implementare modal per modificare scala
    alert('Funzione in sviluppo: Modifica Scala ' + scalaId);
}

function deleteScala(scalaId) {
    if (confirm('Sei sicuro di voler eliminare questa scala e tutti i suoi appartamenti?')) {
        // TODO: Implementare eliminazione scala
        alert('Funzione in sviluppo: Elimina Scala ' + scalaId);
    }
}

function editAppartamento(appartamentoId) {
    // TODO: Implementare modal per modificare appartamento
    alert('Funzione in sviluppo: Modifica Appartamento ' + appartamentoId);
}

function viewAppartamento(appartamentoId) {
    // TODO: Implementare vista dettagli appartamento
    alert('Funzione in sviluppo: Visualizza Appartamento ' + appartamentoId);
}

// Chiudi modal cliccando fuori
document.addEventListener('click', function(event) {
    const modal = document.getElementById('localeModal');
    if (event.target === modal) {
        closeLocaleModal();
    }
});
</script>
@endpush
@endsection