{{-- Unità Immobiliari Tab Content --}}
<div class="space-y-6">
    {{-- Header con totali --}}
    <div class="flex justify-between items-center mb-6">
        <div class="flex items-center space-x-4">
            <h4 class="text-lg font-medium text-gray-900">
                Totale Unità: <span class="text-blue-600 font-bold">{{ $unitaImmobiliari->count() }}</span>
            </h4>
            @if($unitaImmobiliari->count() > 0)
                <div class="text-sm text-gray-600">
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                        <i class="fas fa-check-circle mr-1"></i>
                        Configurato
                    </span>
                </div>
            @endif
        </div>
        
        <div class="flex space-x-2">
            <button onclick="exportUnitaImmobiliari()" 
                    class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                <i class="fas fa-download mr-2"></i>
                Esporta
            </button>
            <a href="{{ route('admin.unita_immobiliari.create', ['stabile_id' => $stabile->id]) }}" 
               onclick="loadCreateUnitaForm(event, {{ $stabile->id }})"
               class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                <i class="fas fa-plus mr-2"></i>
                Nuova Unità
            </a>
        </div>
    </div>

    {{-- Lista/Tabella Unità Immobiliari --}}
    @if($unitaImmobiliari->count() > 0)
        <div class="bg-white shadow overflow-hidden sm:rounded-md">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Codice
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Ubicazione
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Proprietario
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Stato
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Superficie
                            </th>
                            <th scope="col" class="relative px-6 py-3">
                                <span class="sr-only">Azioni</span>
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @foreach($unitaImmobiliari as $unita)
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div class="flex-shrink-0 h-8 w-8">
                                            <div class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center">
                                                <i class="fas fa-home text-blue-600 text-sm"></i>
                                            </div>
                                        </div>
                                        <div class="ml-3">
                                            <div class="text-sm font-medium text-gray-900">
                                                {{ $unita->codice_interno ?? 'N/A' }}
                                            </div>
                                            @if($unita->codice_catastale)
                                                <div class="text-sm text-gray-500">
                                                    Cat: {{ $unita->codice_catastale }}
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-900">
                                        @if($unita->piano || $unita->appartamento)
                                            Piano {{ $unita->piano ?? '-' }}, App. {{ $unita->appartamento ?? '-' }}
                                        @else
                                            -
                                        @endif
                                    </div>
                                    @if($unita->note_ubicazione)
                                        <div class="text-sm text-gray-500">{{ $unita->note_ubicazione }}</div>
                                    @endif
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    @if($unita->anagrafica)
                                        <div class="text-sm text-gray-900">
                                            {{ $unita->anagrafica->cognome ?? '' }} {{ $unita->anagrafica->nome ?? '' }}
                                        </div>
                                        @if($unita->anagrafica->codice_fiscale)
                                            <div class="text-sm text-gray-500">
                                                CF: {{ $unita->anagrafica->codice_fiscale }}
                                            </div>
                                        @endif
                                    @else
                                        <span class="text-sm text-gray-500 italic">Non assegnato</span>
                                    @endif
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    @switch($unita->stato ?? 'attivo')
                                        @case('attivo')
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                                <i class="fas fa-check-circle mr-1"></i>
                                                Attivo
                                            </span>
                                            @break
                                        @case('venduto')
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                                <i class="fas fa-exchange-alt mr-1"></i>
                                                Venduto
                                            </span>
                                            @break
                                        @case('inattivo')
                                        @default
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                                                <i class="fas fa-pause-circle mr-1"></i>
                                                Inattivo
                                            </span>
                                    @endswitch
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                    @if($unita->superficie_commerciale)
                                        {{ number_format($unita->superficie_commerciale, 2) }} m²
                                    @else
                                        <span class="text-gray-500">-</span>
                                    @endif
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <div class="flex items-center justify-end space-x-2">
                                        <button onclick="viewUnitaDettagli({{ $unita->id }})" 
                                                class="text-blue-600 hover:text-blue-900" 
                                                title="Visualizza dettagli">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        <button onclick="editUnitaForm({{ $unita->id }})" 
                                                class="text-indigo-600 hover:text-indigo-900" 
                                                title="Modifica">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button onclick="deleteUnita({{ $unita->id }})" 
                                                class="text-red-600 hover:text-red-900" 
                                                title="Elimina">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    @else
        {{-- Stato vuoto --}}
        <div class="text-center py-12">
            <div class="mx-auto h-24 w-24 text-gray-400">
                <i class="fas fa-home text-6xl"></i>
            </div>
            <h3 class="mt-2 text-lg font-medium text-gray-900">Nessuna unità immobiliare</h3>
            <p class="mt-1 text-sm text-gray-500">
                Inizia aggiungendo la prima unità immobiliare a questo stabile.
            </p>
            <div class="mt-6">
                <a href="{{ route('admin.unita_immobiliari.create', ['stabile_id' => $stabile->id]) }}" 
                   onclick="loadCreateUnitaForm(event, {{ $stabile->id }})"
                   class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                    <i class="fas fa-plus mr-2"></i>
                    Aggiungi Unità Immobiliare
                </a>
            </div>
        </div>
    @endif
</div>

{{-- JavaScript per le azioni delle Unità Immobiliari --}}
<script>
function loadCreateUnitaForm(event, stabileId) {
    event.preventDefault();
    // Implementa il caricamento del form di creazione in un modal o tab
    console.log('Caricamento form creazione unità per stabile:', stabileId);
    // TODO: Implementare modal o navigazione interna
}

function viewUnitaDettagli(unitaId) {
    // Implementa la visualizzazione dettagli in un modal o tab
    console.log('Visualizzazione dettagli unità:', unitaId);
    // TODO: Implementare modal o navigazione interna
}

function editUnitaForm(unitaId) {
    // Implementa il caricamento del form di modifica
    console.log('Modifica unità:', unitaId);
    // TODO: Implementare modal o navigazione interna
}

function deleteUnita(unitaId) {
    if (confirm('Sei sicuro di voler eliminare questa unità immobiliare?')) {
        // Implementa la cancellazione via AJAX
        console.log('Eliminazione unità:', unitaId);
        // TODO: Implementare cancellazione AJAX
    }
}

function exportUnitaImmobiliari() {
    // Implementa l'esportazione
    console.log('Esportazione unità immobiliari');
    // TODO: Implementare esportazione
}
</script>