@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>
                    <a href="{{ route('admin.stabili.show', $palazzina->stabile) }}" 
                       class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left me-2"></i>
                        Torna allo Stabile
                    </a>
                </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="unita-immobiliari" 
                        role="tab">
                    <i class="fas fa-home mr-2"></i>
                    Unità Immobiliari
                </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 Unità Immobiliari -->
            <div id="unita-immobiliari" class="netgescon-tab-content hidden">
                @include('admin.stabili.tabs.unita-immobiliari', ['stabile' => $palazzina->stabile, 'palazzina_filter' => $palazzina->id])
            </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>

@push('scripts')
<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');
        });
    });
});
</script>
@endpush
@endsection