<!-- CSS per font più piccolo e layout compatto -->
<style>
.compact-form {
    font-size: 0.875rem;
    line-height: 1.4;
}
.compact-form .form-control {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}
.compact-form .tab-content {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-top: none;
    padding: 1rem;
    min-height: 400px;
}
.compact-form .nav-tabs .nav-link {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
}
</style>

<div class="compact-form">
    <!-- Tab Navigation -->
    <ul class="nav nav-tabs" id="stabileFormTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="generale-tab" data-bs-toggle="tab" data-bs-target="#generale" type="button" role="tab">
                <i class="fas fa-info-circle me-1"></i>Dati Generali
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="indirizzo-tab" data-bs-toggle="tab" data-bs-target="#indirizzo" type="button" role="tab">
                <i class="fas fa-map-marker-alt me-1"></i>Indirizzo
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="palazzine-tab" data-bs-toggle="tab" data-bs-target="#palazzine" type="button" role="tab">
                <i class="fas fa-building me-1"></i>Palazzine
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="catastali-tab" data-bs-toggle="tab" data-bs-target="#catastali" type="button" role="tab">
                <i class="fas fa-file-alt me-1"></i>Dati Catastali
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="bancari-tab" data-bs-toggle="tab" data-bs-target="#bancari" type="button" role="tab">
                <i class="fas fa-university me-1"></i>Dati Bancari
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="amministratore-tab" data-bs-toggle="tab" data-bs-target="#amministratore" type="button" role="tab">
                <i class="fas fa-user-tie me-1"></i>Amministratore
            </button>
        </li>
    </ul>

    <!-- Tab Content -->
    <div class="tab-content" id="stabileFormTabsContent">
        
        <!-- TAB 1: DATI GENERALI -->
        <div class="tab-pane fade show active" id="generale" role="tabpanel">
            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="denominazione" class="form-label">Denominazione Stabile *</label>
                        <input type="text" class="form-control" id="denominazione" name="denominazione" 
                               value="{{ old('denominazione', $stabile->denominazione ?? '') }}" required>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="codice_stabile" class="form-label">Codice Stabile Unico</label>
                        <input type="text" class="form-control" id="codice_stabile" name="codice_stabile" 
                               value="{{ old('codice_stabile', $stabile->codice_stabile ?? '') }}" 
                               placeholder="Es. STB001 (per tutte le palazzine)">
                        <small class="text-muted">Codice unico per identificare tutto il complesso</small>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="codice_fiscale" class="form-label">Codice Fiscale Condominio</label>
                        <input type="text" class="form-control" id="codice_fiscale" name="codice_fiscale" 
                               value="{{ old('codice_fiscale', $stabile->codice_fiscale ?? '') }}">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="partita_iva" class="form-label">Partita IVA</label>
                        <input type="text" class="form-control" id="partita_iva" name="partita_iva" 
                               value="{{ old('partita_iva', $stabile->partita_iva ?? '') }}">
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="mb-3">
                        <label for="note" class="form-label">Note</label>
                        <textarea class="form-control" id="note" name="note" rows="3">{{ old('note', $stabile->note ?? '') }}</textarea>
                    </div>
                </div>
            </div>
        </div>

        <!-- TAB 2: INDIRIZZO -->
        <div class="tab-pane fade" id="indirizzo" role="tabpanel">
            <div class="row">
                <div class="col-md-8">
                    <div class="mb-3">
                        <label for="indirizzo" class="form-label">Indirizzo *</label>
                        <input type="text" class="form-control" id="indirizzo" name="indirizzo" 
                               value="{{ old('indirizzo', $stabile->indirizzo ?? '') }}" required>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="mb-3">
                        <label for="cap" class="form-label">CAP *</label>
                        <input type="text" class="form-control" id="cap" name="cap" 
                               value="{{ old('cap', $stabile->cap ?? '') }}" required>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="citta" class="form-label">Città *</label>
                        <input type="text" class="form-control" id="citta" name="citta" 
                               value="{{ old('citta', $stabile->citta ?? '') }}" required>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="provincia" class="form-label">Provincia *</label>
                        <input type="text" class="form-control" id="provincia" name="provincia" 
                               value="{{ old('provincia', $stabile->provincia ?? '') }}" required>
                    </div>
                </div>
            </div>
        </div>

        <!-- TAB 3: PALAZZINE (NUOVO) -->
        <div class="tab-pane fade" id="palazzine" role="tabpanel">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5>Gestione Palazzine</h5>
                <button type="button" class="btn btn-sm btn-primary" onclick="aggiungiPalazzina()">
                    <i class="fas fa-plus me-1"></i>Aggiungi Palazzina
                </button>
            </div>
            
            <div class="table-responsive">
                <table class="table table-sm table-bordered" id="tabellaPalazzine">
                    <thead class="table-light">
                        <tr>
                            <th style="width: 10%">Palazzina</th>
                            <th style="width: 30%">Indirizzo</th>
                            <th style="width: 15%">Scala</th>
                            <th style="width: 15%">Interni</th>
                            <th style="width: 15%">Piani</th>
                            <th style="width: 15%">Azioni</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Dati di esempio come richiesto -->
                        <tr>
                            <td><input type="text" class="form-control form-control-sm" name="palazzine[0][numero]" value="1"></td>
                            <td><input type="text" class="form-control form-control-sm" name="palazzine[0][indirizzo]" value="Via Germanico 85"></td>
                            <td><input type="text" class="form-control form-control-sm" name="palazzine[0][scala]" value="A"></td>
                            <td><input type="number" class="form-control form-control-sm" name="palazzine[0][interni]" value="8"></td>
                            <td><input type="number" class="form-control form-control-sm" name="palazzine[0][piani]" value="4"></td>
                            <td><button type="button" class="btn btn-sm btn-danger" onclick="rimuoviRiga(this)"><i class="fas fa-trash"></i></button></td>
                        </tr>
                        <tr>
                            <td><input type="text" class="form-control form-control-sm" name="palazzine[1][numero]" value="1"></td>
                            <td><input type="text" class="form-control form-control-sm" name="palazzine[1][indirizzo]" value="Via Germanico 85"></td>
                            <td><input type="text" class="form-control form-control-sm" name="palazzine[1][scala]" value="B"></td>
                            <td><input type="number" class="form-control form-control-sm" name="palazzine[1][interni]" value="6"></td>
                            <td><input type="number" class="form-control form-control-sm" name="palazzine[1][piani]" value="4"></td>
                            <td><button type="button" class="btn btn-sm btn-danger" onclick="rimuoviRiga(this)"><i class="fas fa-trash"></i></button></td>
                        </tr>
                        <tr>
                            <td><input type="text" class="form-control form-control-sm" name="palazzine[2][numero]" value="2"></td>
                            <td><input type="text" class="form-control form-control-sm" name="palazzine[2][indirizzo]" value="Via Catone 34"></td>
                            <td><input type="text" class="form-control form-control-sm" name="palazzine[2][scala]" value="A"></td>
                            <td><input type="number" class="form-control form-control-sm" name="palazzine[2][interni]" value="12"></td>
                            <td><input type="number" class="form-control form-control-sm" name="palazzine[2][piani]" value="4"></td>
                            <td><button type="button" class="btn btn-sm btn-danger" onclick="rimuoviRiga(this)"><i class="fas fa-trash"></i></button></td>
                        </tr>
                        <tr>
                            <td><input type="text" class="form-control form-control-sm" name="palazzine[3][numero]" value="2"></td>
                            <td><input type="text" class="form-control form-control-sm" name="palazzine[3][indirizzo]" value="Via Catone 34"></td>
                            <td><input type="text" class="form-control form-control-sm" name="palazzine[3][scala]" value="B"></td>
                            <td><input type="number" class="form-control form-control-sm" name="palazzine[3][interni]" value="12"></td>
                            <td><input type="number" class="form-control form-control-sm" name="palazzine[3][piani]" value="4"></td>
                            <td><button type="button" class="btn btn-sm btn-danger" onclick="rimuoviRiga(this)"><i class="fas fa-trash"></i></button></td>
                        </tr>
                        <tr>
                            <td><input type="text" class="form-control form-control-sm" name="palazzine[4][numero]" value="2"></td>
                            <td><input type="text" class="form-control form-control-sm" name="palazzine[4][indirizzo]" value="Via Catone 34"></td>
                            <td><input type="text" class="form-control form-control-sm" name="palazzine[4][scala]" value="C"></td>
                            <td><input type="number" class="form-control form-control-sm" name="palazzine[4][interni]" value="12"></td>
                            <td><input type="number" class="form-control form-control-sm" name="palazzine[4][piani]" value="4"></td>
                            <td><button type="button" class="btn btn-sm btn-danger" onclick="rimuoviRiga(this)"><i class="fas fa-trash"></i></button></td>
                        </tr>
                        <tr>
                            <td><input type="text" class="form-control form-control-sm" name="palazzine[5][numero]" value="3"></td>
                            <td><input type="text" class="form-control form-control-sm" name="palazzine[5][indirizzo]" value="Via Gracchi 32"></td>
                            <td><input type="text" class="form-control form-control-sm" name="palazzine[5][scala]" value="A"></td>
                            <td><input type="number" class="form-control form-control-sm" name="palazzine[5][interni]" value="10"></td>
                            <td><input type="number" class="form-control form-control-sm" name="palazzine[5][piani]" value="4"></td>
                            <td><button type="button" class="btn btn-sm btn-danger" onclick="rimuoviRiga(this)"><i class="fas fa-trash"></i></button></td>
                        </tr>
                        <tr>
                            <td><input type="text" class="form-control form-control-sm" name="palazzine[6][numero]" value="3"></td>
                            <td><input type="text" class="form-control form-control-sm" name="palazzine[6][indirizzo]" value="Via Gracchi 32"></td>
                            <td><input type="text" class="form-control form-control-sm" name="palazzine[6][scala]" value="B"></td>
                            <td><input type="number" class="form-control form-control-sm" name="palazzine[6][interni]" value="10"></td>
                            <td><input type="number" class="form-control form-control-sm" name="palazzine[6][piani]" value="4"></td>
                            <td><button type="button" class="btn btn-sm btn-danger" onclick="rimuoviRiga(this)"><i class="fas fa-trash"></i></button></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <!-- Sezione Locali di Servizio -->
            <div class="mt-4">
                <h6>Locali di Servizio</h6>
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="locali_servizio[]" value="cantina_1" id="cantina1">
                            <label class="form-check-label" for="cantina1">Cantina 1</label>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="locali_servizio[]" value="cantina_2" id="cantina2">
                            <label class="form-check-label" for="cantina2">Cantina 2</label>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="locali_servizio[]" value="appartamento_portiere" id="app_portiere">
                            <label class="form-check-label" for="app_portiere">Appartamento Portiere</label>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="locali_servizio[]" value="locale_contatori" id="loc_contatori">
                            <label class="form-check-label" for="loc_contatori">Locale Contatori</label>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="locali_servizio[]" value="locale_caldaia" id="loc_caldaia">
                            <label class="form-check-label" for="loc_caldaia">Locale Caldaia</label>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="locali_servizio[]" value="locale_biciclette" id="loc_bici">
                            <label class="form-check-label" for="loc_bici">Locale Biciclette</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- TAB 4: DATI CATASTALI -->
        <div class="tab-pane fade" id="catastali" role="tabpanel">
            <div class="alert alert-info">
                <i class="fas fa-info-circle me-2"></i>
                <strong>Dati Catastali in Evidenza</strong> - Informazioni per identificazione ufficiale
            </div>
            <div class="row">
                <div class="col-md-3">
                    <div class="mb-3">
                        <label for="foglio" class="form-label">Foglio</label>
                        <input type="text" class="form-control" id="foglio" name="foglio" 
                               value="{{ old('foglio', $stabile->foglio ?? '') }}">
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="mb-3">
                        <label for="mappale" class="form-label">Mappale/Particella</label>
                        <input type="text" class="form-control" id="mappale" name="mappale" 
                               value="{{ old('mappale', $stabile->mappale ?? '') }}">
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="mb-3">
                        <label for="subalterno" class="form-label">Subalterno</label>
                        <input type="text" class="form-control" id="subalterno" name="subalterno" 
                               value="{{ old('subalterno', $stabile->subalterno ?? '') }}">
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="mb-3">
                        <label for="categoria" class="form-label">Categoria</label>
                        <input type="text" class="form-control" id="categoria" name="categoria" 
                               value="{{ old('categoria', $stabile->categoria ?? '') }}">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="rendita_catastale" class="form-label">Rendita Catastale (€)</label>
                        <input type="number" step="0.01" class="form-control" id="rendita_catastale" name="rendita_catastale" 
                               value="{{ old('rendita_catastale', $stabile->rendita_catastale ?? '') }}">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="superficie_catastale" class="form-label">Superficie Catastale (mq)</label>
                        <input type="number" step="0.01" class="form-control" id="superficie_catastale" name="superficie_catastale" 
                               value="{{ old('superficie_catastale', $stabile->superficie_catastale ?? '') }}">
                    </div>
                </div>
            </div>
            
            <!-- Piani e Interni in evidenza -->
            <div class="alert alert-warning">
                <h6>Struttura Piani e Interni</h6>
                <div class="row">
                    <div class="col-md-3">
                        <strong>Piano 1:</strong> Interni 12
                    </div>
                    <div class="col-md-3">
                        <strong>Piano 2:</strong> Interni 34
                    </div>
                    <div class="col-md-3">
                        <strong>Piano 3:</strong> Interni 56
                    </div>
                    <div class="col-md-3">
                        <strong>Piano 4:</strong> Interni 78
                    </div>
                </div>
            </div>
        </div>

        <!-- TAB 5: DATI BANCARI (NUOVO) -->
        <div class="tab-pane fade" id="bancari" role="tabpanel">
            <div class="row">
                <div class="col-md-12">
                    <div class="mb-3">
                        <label for="iban_principale" class="form-label">IBAN Principale</label>
                        <input type="text" class="form-control" id="iban_principale" name="iban_principale" 
                               value="{{ old('iban_principale', $stabile->iban_principale ?? '') }}"
                               placeholder="IT60 X054 2811 1010 0000 0123 456">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="banca_principale" class="form-label">Banca Principale</label>
                        <input type="text" class="form-control" id="banca_principale" name="banca_principale" 
                               value="{{ old('banca_principale', $stabile->banca_principale ?? '') }}">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="filiale" class="form-label">Filiale</label>
                        <input type="text" class="form-control" id="filiale" name="filiale" 
                               value="{{ old('filiale', $stabile->filiale ?? '') }}">
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="mb-3">
                        <label for="iban_secondario" class="form-label">IBAN Secondario (opzionale)</label>
                        <input type="text" class="form-control" id="iban_secondario" name="iban_secondario" 
                               value="{{ old('iban_secondario', $stabile->iban_secondario ?? '') }}">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="banca_secondaria" class="form-label">Banca Secondaria</label>
                        <input type="text" class="form-control" id="banca_secondaria" name="banca_secondaria" 
                               value="{{ old('banca_secondaria', $stabile->banca_secondaria ?? '') }}">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="filiale_secondaria" class="form-label">Filiale Secondaria</label>
                        <input type="text" class="form-control" id="filiale_secondaria" name="filiale_secondaria" 
                               value="{{ old('filiale_secondaria', $stabile->filiale_secondaria ?? '') }}">
                    </div>
                </div>
            </div>
        </div>

        <!-- TAB 6: AMMINISTRATORE (SEMPLIFICATO) -->
        <div class="tab-pane fade" id="amministratore" role="tabpanel">
            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="amministratore_nome" class="form-label">Nome Amministratore</label>
                        <input type="text" class="form-control" id="amministratore_nome" name="amministratore_nome" 
                               value="{{ old('amministratore_nome', $stabile->amministratore_nome ?? '') }}">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="amministratore_email" class="form-label">Email Amministratore</label>
                        <input type="email" class="form-control" id="amministratore_email" name="amministratore_email" 
                               value="{{ old('amministratore_email', $stabile->amministratore_email ?? '') }}">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="data_nomina" class="form-label">Data Nomina</label>
                        <input type="date" class="form-control" id="data_nomina" name="data_nomina" 
                               value="{{ old('data_nomina', $stabile->data_nomina ?? '') }}">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="scadenza_mandato" class="form-label">Scadenza Mandato</label>
                        <input type="date" class="form-control" id="scadenza_mandato" name="scadenza_mandato" 
                               value="{{ old('scadenza_mandato', $stabile->scadenza_mandato ?? '') }}">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- JavaScript per gestione dinamica palazzine -->
<script>
let contatoreRighe = 7;

function aggiungiPalazzina() {
    const tbody = document.querySelector('#tabellaPalazzine tbody');
    const nuovaRiga = document.createElement('tr');
    
    nuovaRiga.innerHTML = `
        <td><input type="text" class="form-control form-control-sm" name="palazzine[${contatoreRighe}][numero]" value=""></td>
        <td><input type="text" class="form-control form-control-sm" name="palazzine[${contatoreRighe}][indirizzo]" value=""></td>
        <td><input type="text" class="form-control form-control-sm" name="palazzine[${contatoreRighe}][scala]" value=""></td>
        <td><input type="number" class="form-control form-control-sm" name="palazzine[${contatoreRighe}][interni]" value=""></td>
        <td><input type="number" class="form-control form-control-sm" name="palazzine[${contatoreRighe}][piani]" value=""></td>
        <td><button type="button" class="btn btn-sm btn-danger" onclick="rimuoviRiga(this)"><i class="fas fa-trash"></i></button></td>
    `;
    
    tbody.appendChild(nuovaRiga);
    contatoreRighe++;
}

function rimuoviRiga(button) {
    if (document.querySelectorAll('#tabellaPalazzine tbody tr').length > 1) {
        button.closest('tr').remove();
    } else {
        alert('Deve rimanere almeno una palazzina!');
    }
}
</script>
