<!-- Layout a tab per la form stabili con Tailwind CSS -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow">
    <!-- Tab Navigation -->
    <div class="border-b border-gray-200 dark:border-gray-700">
        <nav class="-mb-px flex space-x-8 px-6" aria-label="Tabs">
            <button type="button" class="tab-btn border-indigo-500 text-indigo-600 whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm" 
                    data-tab="generale">
                <i class="fas fa-info-circle mr-2"></i>Dati Generali
            </button>
            <button type="button" class="tab-btn border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm" 
                    data-tab="indirizzo">
                <i class="fas fa-map-marker-alt mr-2"></i>Indirizzo
            </button>
            <button type="button" class="tab-btn border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm" 
                    data-tab="palazzine">
                <i class="fas fa-building mr-2"></i>Palazzine
            </button>
            <button type="button" class="tab-btn border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm" 
                    data-tab="catastali">
                <i class="fas fa-file-alt mr-2"></i>Dati Catastali
            </button>
            <button type="button" class="tab-btn border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm" 
                    data-tab="bancari">
                <i class="fas fa-university mr-2"></i>Dati Bancari
            </button>
            <button type="button" class="tab-btn border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm" 
                    data-tab="amministratore">
                <i class="fas fa-user-tie mr-2"></i>Amministratore
            </button>
            <button type="button" class="tab-btn border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm" 
                    data-tab="locali">
                <i class="fas fa-warehouse mr-2"></i>Locali di Servizio
            </button>
        </nav>
    </div>

    <!-- Tab Content -->
    <div class="px-6 py-6">
        
        <!-- Tab 1: Dati Generali -->
        <div id="tab-generale" class="tab-content">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="denominazione" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        <i class="fas fa-building mr-2"></i>Denominazione Stabile *
                    </label>
                    <input type="text" name="denominazione" id="denominazione" required
                           value="{{ old('denominazione', $stabile->denominazione ?? '') }}"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                           placeholder="Nome del condominio">
                    @error('denominazione')
                        <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="codice_stabile" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        <i class="fas fa-tag mr-2"></i>Codice Stabile Unico
                    </label>
                    <input type="text" name="codice_stabile" id="codice_stabile"
                           value="{{ old('codice_stabile', $stabile->codice_stabile ?? '') }}"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                           placeholder="Es. STB001 (per tutte le palazzine)">
                    <p class="text-xs text-gray-500 mt-1">Codice unico per identificare tutto il complesso</p>
                    @error('codice_stabile')
                        <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="codice_fiscale" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        <i class="fas fa-id-card mr-2"></i>Codice Fiscale Condominio
                    </label>
                    <input type="text" name="codice_fiscale" id="codice_fiscale"
                           value="{{ old('codice_fiscale', $stabile->codice_fiscale ?? '') }}"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                    @error('codice_fiscale')
                        <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="partita_iva" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        <i class="fas fa-receipt mr-2"></i>Partita IVA
                    </label>
                    <input type="text" name="partita_iva" id="partita_iva"
                           value="{{ old('partita_iva', $stabile->partita_iva ?? '') }}"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                    @error('partita_iva')
                        <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div class="mt-6">
                <label for="note" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    <i class="fas fa-sticky-note mr-2"></i>Note
                </label>
                <textarea name="note" id="note" rows="4"
                          class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                          placeholder="Note aggiuntive sul condominio">{{ old('note', $stabile->note ?? '') }}</textarea>
                @error('note')
                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <!-- Tab 2: Indirizzo -->
        <div id="tab-indirizzo" class="tab-content hidden">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="md:col-span-2">
                    <label for="indirizzo" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        <i class="fas fa-road mr-2"></i>Indirizzo *
                    </label>
                    <input type="text" name="indirizzo" id="indirizzo" required
                           value="{{ old('indirizzo', $stabile->indirizzo ?? '') }}"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                    @error('indirizzo')
                        <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="citta" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        <i class="fas fa-city mr-2"></i>Città *
                    </label>
                    <input type="text" name="citta" id="citta" required
                           value="{{ old('citta', $stabile->citta ?? '') }}"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                    @error('citta')
                        <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="cap" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        <i class="fas fa-mail-bulk mr-2"></i>CAP *
                    </label>
                    <input type="text" name="cap" id="cap" required
                           value="{{ old('cap', $stabile->cap ?? '') }}"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                    @error('cap')
                        <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="provincia" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        <i class="fas fa-flag mr-2"></i>Provincia
                    </label>
                    <input type="text" name="provincia" id="provincia" maxlength="2"
                           value="{{ old('provincia', $stabile->provincia ?? '') }}"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                           placeholder="Es. MI">
                    @error('provincia')
                        <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="regione" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        <i class="fas fa-map mr-2"></i>Regione
                    </label>
                    <input type="text" name="regione" id="regione"
                           value="{{ old('regione', $stabile->regione ?? '') }}"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                    @error('regione')
                        <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>
        </div>

        <!-- Tab 3: Palazzine -->
        <div id="tab-palazzine" class="tab-content hidden">
            <div class="mb-4">
                <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">
                    <i class="fas fa-building mr-2"></i>Gestione Multi-Palazzine
                </h4>
                <p class="text-sm text-gray-600 dark:text-gray-400">
                    Aggiungi le palazzine che compongono il complesso condominiale
                </p>
            </div>

            <div class="mb-4">
                <button type="button" id="add-palazzina" 
                        class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded transition-colors">
                    <i class="fas fa-plus mr-2"></i>Aggiungi Palazzina
                </button>
            </div>

            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700" id="palazzine-table">
                    <thead class="bg-gray-50 dark:bg-gray-700">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                Denominazione Palazzina
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                Codice
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                Piani
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                Unità per Piano
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                Azioni
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700" id="palazzine-tbody">
                        <!-- Le righe delle palazzine verranno aggiunte dinamicamente -->
                    </tbody>
                </table>
            </div>

            <input type="hidden" name="palazzine" id="palazzine-data" value="{{ old('palazzine', isset($stabile) ? json_encode($stabile->palazzine ?? []) : '[]') }}">
        </div>

        <!-- Tab 4: Dati Catastali -->
        <div id="tab-catastali" class="tab-content hidden">
            <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-700 rounded-lg p-4 mb-6">
                <h4 class="text-lg font-semibold text-yellow-800 dark:text-yellow-200 mb-2">
                    <i class="fas fa-file-alt mr-2"></i>Dati Catastali - Informazioni Chiave
                </h4>
                <p class="text-sm text-yellow-700 dark:text-yellow-300">
                    Questi dati sono fondamentali per l'identificazione catastale del condominio
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div>
                    <label for="sezione_catastale" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        <i class="fas fa-layer-group mr-2"></i>Sezione Catastale
                    </label>
                    <input type="text" name="sezione_catastale" id="sezione_catastale"
                           value="{{ old('sezione_catastale', $stabile->sezione_catastale ?? '') }}"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                    @error('sezione_catastale')
                        <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="foglio" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        <i class="fas fa-file mr-2"></i>Foglio
                    </label>
                    <input type="text" name="foglio" id="foglio"
                           value="{{ old('foglio', $stabile->foglio ?? '') }}"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                    @error('foglio')
                        <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="particella" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        <i class="fas fa-map-pin mr-2"></i>Particella
                    </label>
                    <input type="text" name="particella" id="particella"
                           value="{{ old('particella', $stabile->particella ?? '') }}"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                    @error('particella')
                        <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="subalterno" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        <i class="fas fa-hashtag mr-2"></i>Subalterno
                    </label>
                    <input type="text" name="subalterno" id="subalterno"
                           value="{{ old('subalterno', $stabile->subalterno ?? '') }}"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                    @error('subalterno')
                        <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="zona_censuaria" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        <i class="fas fa-globe mr-2"></i>Zona Censuaria
                    </label>
                    <input type="text" name="zona_censuaria" id="zona_censuaria"
                           value="{{ old('zona_censuaria', $stabile->zona_censuaria ?? '') }}"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                    @error('zona_censuaria')
                        <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="categoria_catastale" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        <i class="fas fa-tags mr-2"></i>Categoria Catastale
                    </label>
                    <input type="text" name="categoria_catastale" id="categoria_catastale"
                           value="{{ old('categoria_catastale', $stabile->categoria_catastale ?? '') }}"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                    @error('categoria_catastale')
                        <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>
        </div>

        <!-- Tab 5: Dati Bancari -->
        <div id="tab-bancari" class="tab-content hidden">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="banca_denominazione" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        <i class="fas fa-university mr-2"></i>Denominazione Banca
                    </label>
                    <input type="text" name="banca_denominazione" id="banca_denominazione"
                           value="{{ old('banca_denominazione', $stabile->banca_denominazione ?? '') }}"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                    @error('banca_denominazione')
                        <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="banca_iban" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        <i class="fas fa-credit-card mr-2"></i>IBAN
                    </label>
                    <input type="text" name="banca_iban" id="banca_iban"
                           value="{{ old('banca_iban', $stabile->banca_iban ?? '') }}"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                    @error('banca_iban')
                        <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="banca_intestazione" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        <i class="fas fa-signature mr-2"></i>Intestazione Conto
                    </label>
                    <input type="text" name="banca_intestazione" id="banca_intestazione"
                           value="{{ old('banca_intestazione', $stabile->banca_intestazione ?? '') }}"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                    @error('banca_intestazione')
                        <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="banca_swift" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        <i class="fas fa-code mr-2"></i>Codice SWIFT/BIC
                    </label>
                    <input type="text" name="banca_swift" id="banca_swift"
                           value="{{ old('banca_swift', $stabile->banca_swift ?? '') }}"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                    @error('banca_swift')
                        <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>
        </div>

        <!-- Tab 6: Amministratore -->
        <div id="tab-amministratore" class="tab-content hidden">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="amministratore_nome" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        <i class="fas fa-user mr-2"></i>Nome Amministratore
                    </label>
                    <input type="text" name="amministratore_nome" id="amministratore_nome"
                           value="{{ old('amministratore_nome', $stabile->amministratore_nome ?? '') }}"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                    @error('amministratore_nome')
                        <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="amministratore_email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        <i class="fas fa-envelope mr-2"></i>Email Amministratore
                    </label>
                    <input type="email" name="amministratore_email" id="amministratore_email"
                           value="{{ old('amministratore_email', $stabile->amministratore_email ?? '') }}"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                    @error('amministratore_email')
                        <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="amministratore_telefono" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        <i class="fas fa-phone mr-2"></i>Telefono Amministratore
                    </label>
                    <input type="text" name="amministratore_telefono" id="amministratore_telefono"
                           value="{{ old('amministratore_telefono', $stabile->amministratore_telefono ?? '') }}"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                    @error('amministratore_telefono')
                        <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="amministratore_codice_fiscale" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        <i class="fas fa-id-card mr-2"></i>Codice Fiscale Amministratore
                    </label>
                    <input type="text" name="amministratore_codice_fiscale" id="amministratore_codice_fiscale"
                           value="{{ old('amministratore_codice_fiscale', $stabile->amministratore_codice_fiscale ?? '') }}"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                    @error('amministratore_codice_fiscale')
                        <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>
        </div>

        <!-- Tab 7: Locali di Servizio -->
        <div id="tab-locali" class="tab-content hidden">
            <div class="mb-4">
                <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">
                    <i class="fas fa-warehouse mr-2"></i>Locali di Servizio e Comuni
                </h4>
                <p class="text-sm text-gray-600 dark:text-gray-400">
                    Aggiungi i locali comuni e di servizio del condominio
                </p>
            </div>

            <div class="mb-4">
                <button type="button" id="add-locale" 
                        class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded transition-colors">
                    <i class="fas fa-plus mr-2"></i>Aggiungi Locale
                </button>
            </div>

            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700" id="locali-table">
                    <thead class="bg-gray-50 dark:bg-gray-700">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                Tipo Locale
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                Descrizione
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                Piano
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                Superficie (mq)
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                Azioni
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700" id="locali-tbody">
                        <!-- Le righe dei locali verranno aggiunte dinamicamente -->
                    </tbody>
                </table>
            </div>

            <input type="hidden" name="locali_servizio" id="locali-data" value="{{ old('locali_servizio', isset($stabile) ? json_encode($stabile->locali_servizio ?? []) : '[]') }}">
        </div>

    </div>
</div>

<!-- JavaScript per gestione tab e funzionalità dinamiche -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Gestione Tab
    const tabButtons = document.querySelectorAll('.tab-btn');
    const tabContents = document.querySelectorAll('.tab-content');

    tabButtons.forEach(button => {
        button.addEventListener('click', function() {
            const targetTab = this.getAttribute('data-tab');
            
            // Reset tutti i button
            tabButtons.forEach(btn => {
                btn.classList.remove('border-indigo-500', 'text-indigo-600');
                btn.classList.add('border-transparent', 'text-gray-500');
            });
            
            // Attiva button corrente
            this.classList.add('border-indigo-500', 'text-indigo-600');
            this.classList.remove('border-transparent', 'text-gray-500');
            
            // Nascondi tutti i contenuti
            tabContents.forEach(content => {
                content.classList.add('hidden');
            });
            
            // Mostra contenuto target
            document.getElementById('tab-' + targetTab).classList.remove('hidden');
        });
    });

    // Gestione Palazzine
    let palazzineData = [];
    try {
        palazzineData = JSON.parse(document.getElementById('palazzine-data').value || '[]');
    } catch(e) {
        palazzineData = [];
    }

    function renderPalazzine() {
        const tbody = document.getElementById('palazzine-tbody');
        tbody.innerHTML = '';

        palazzineData.forEach((palazzina, index) => {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                    <input type="text" value="${palazzina.denominazione || ''}" 
                           onchange="updatePalazzina(${index}, 'denominazione', this.value)"
                           class="w-full px-2 py-1 border border-gray-300 rounded">
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                    <input type="text" value="${palazzina.codice || ''}" 
                           onchange="updatePalazzina(${index}, 'codice', this.value)"
                           class="w-full px-2 py-1 border border-gray-300 rounded">
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                    <input type="number" value="${palazzina.piani || ''}" 
                           onchange="updatePalazzina(${index}, 'piani', this.value)"
                           class="w-full px-2 py-1 border border-gray-300 rounded">
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                    <input type="number" value="${palazzina.unita_per_piano || ''}" 
                           onchange="updatePalazzina(${index}, 'unita_per_piano', this.value)"
                           class="w-full px-2 py-1 border border-gray-300 rounded">
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                    <button type="button" onclick="removePalazzina(${index})" 
                            class="text-red-600 hover:text-red-900">
                        <i class="fas fa-trash"></i>
                    </button>
                </td>
            `;
            tbody.appendChild(row);
        });

        document.getElementById('palazzine-data').value = JSON.stringify(palazzineData);
    }

    window.updatePalazzina = function(index, field, value) {
        palazzineData[index][field] = value;
        document.getElementById('palazzine-data').value = JSON.stringify(palazzineData);
    };

    window.removePalazzina = function(index) {
        palazzineData.splice(index, 1);
        renderPalazzine();
    };

    document.getElementById('add-palazzina').addEventListener('click', function() {
        palazzineData.push({
            denominazione: '',
            codice: '',
            piani: '',
            unita_per_piano: ''
        });
        renderPalazzine();
    });

    // Gestione Locali di Servizio
    let localiData = [];
    try {
        localiData = JSON.parse(document.getElementById('locali-data').value || '[]');
    } catch(e) {
        localiData = [];
    }

    function renderLocali() {
        const tbody = document.getElementById('locali-tbody');
        tbody.innerHTML = '';

        localiData.forEach((locale, index) => {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                    <select onchange="updateLocale(${index}, 'tipo', this.value)"
                            class="w-full px-2 py-1 border border-gray-300 rounded">
                        <option value="">Seleziona tipo</option>
                        <option value="cantina" ${locale.tipo === 'cantina' ? 'selected' : ''}>Cantina</option>
                        <option value="garage" ${locale.tipo === 'garage' ? 'selected' : ''}>Garage</option>
                        <option value="posto_auto" ${locale.tipo === 'posto_auto' ? 'selected' : ''}>Posto Auto</option>
                        <option value="locale_tecnico" ${locale.tipo === 'locale_tecnico' ? 'selected' : ''}>Locale Tecnico</option>
                        <option value="portineria" ${locale.tipo === 'portineria' ? 'selected' : ''}>Portineria</option>
                        <option value="altro" ${locale.tipo === 'altro' ? 'selected' : ''}>Altro</option>
                    </select>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                    <input type="text" value="${locale.descrizione || ''}" 
                           onchange="updateLocale(${index}, 'descrizione', this.value)"
                           class="w-full px-2 py-1 border border-gray-300 rounded">
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                    <input type="text" value="${locale.piano || ''}" 
                           onchange="updateLocale(${index}, 'piano', this.value)"
                           class="w-full px-2 py-1 border border-gray-300 rounded">
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                    <input type="number" step="0.01" value="${locale.superficie || ''}" 
                           onchange="updateLocale(${index}, 'superficie', this.value)"
                           class="w-full px-2 py-1 border border-gray-300 rounded">
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                    <button type="button" onclick="removeLocale(${index})" 
                            class="text-red-600 hover:text-red-900">
                        <i class="fas fa-trash"></i>
                    </button>
                </td>
            `;
            tbody.appendChild(row);
        });

        document.getElementById('locali-data').value = JSON.stringify(localiData);
    }

    window.updateLocale = function(index, field, value) {
        localiData[index][field] = value;
        document.getElementById('locali-data').value = JSON.stringify(localiData);
    };

    window.removeLocale = function(index) {
        localiData.splice(index, 1);
        renderLocali();
    };

    document.getElementById('add-locale').addEventListener('click', function() {
        localiData.push({
            tipo: '',
            descrizione: '',
            piano: '',
            superficie: ''
        });
        renderLocali();
    });

    // Render iniziale
    renderPalazzine();
    renderLocali();

    // Auto-genera codice stabile
    const denominazioneField = document.getElementById('denominazione');
    if (denominazioneField) {
        denominazioneField.addEventListener('blur', function() {
            const codiceField = document.getElementById('codice_stabile');
            if (!codiceField.value && this.value) {
                let codice = this.value.toUpperCase()
                    .replace(/[^A-Z0-9]/g, '')
                    .substring(0, 6);
                
                if (codice.length < 3) {
                    codice = 'STB' + String(Date.now()).slice(-3);
                }
                
                codiceField.value = codice;
            }
        });
    }
});
</script>