@extends('admin.layouts.netgescon')

@section('title', 'Dettaglio Unità Immobiliare')

@section('content')
<div class="container mx-auto px-6 py-8">
    <!-- Header -->
    <div class="mb-8 flex items-center justify-between">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">
                <i class="fas fa-home mr-3 text-blue-600"></i>
                Unità {{ $unita->codice_unita }}
            </h1>
            <p class="text-gray-600 mt-2">
                <i class="fas fa-building mr-2"></i>
                {{ $unita->stabile->denominazione ?? 'Stabile ' . $unita->stabile->id }}
                @if($unita->palazzinaObj)
                    - Palazzina {{ $unita->palazzinaObj->codice_palazzina }}
                @endif
            </p>
        </div>
        <div class="flex space-x-3">
            <a href="{{ route('admin.unita-immobiliari.edit', $unita) }}" 
               class="netgescon-btn netgescon-btn-primary">
                <i class="fas fa-edit mr-2"></i>
                Modifica
            </a>
            @if($unita->palazzinaObj)
                <a href="{{ route('admin.palazzine.show', $unita->palazzinaObj) }}" 
                   class="netgescon-btn netgescon-btn-secondary">
                    <i class="fas fa-building mr-2"></i>
                    Palazzina
                </a>
            @endif
            <a href="{{ route('admin.stabili.show', $unita->stabile) }}" 
               class="netgescon-btn netgescon-btn-secondary">
                <i class="fas fa-arrow-left mr-2"></i>
                Stabile
            </a>
        </div>
    </div>

    <!-- Statistiche Overview -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <!-- Superficie Totale -->
        <div class="bg-blue-50 border border-blue-200 rounded-lg p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-blue-500 text-white">
                    <i class="fas fa-ruler-combined"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-blue-600">Superficie Totale</p>
                    <p class="text-2xl font-bold text-blue-900">{{ $statistiche['superficie_totale'] }} m²</p>
                </div>
            </div>
        </div>

        <!-- Millesimi -->
        <div class="bg-green-50 border border-green-200 rounded-lg p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-green-500 text-white">
                    <i class="fas fa-percentage"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-green-600">Millesimi</p>
                    <p class="text-2xl font-bold text-green-900">{{ $unita->millesimi_proprieta ?? 0 }}/1000</p>
                </div>
            </div>
        </div>

        <!-- Rapporto Percentuale -->
        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-yellow-500 text-white">
                    <i class="fas fa-chart-pie"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-yellow-600">Percentuale</p>
                    <p class="text-2xl font-bold text-yellow-900">{{ $statistiche['rapporto_millesimi'] }}%</p>
                </div>
            </div>
        </div>

        <!-- Valore Stimato -->
        <div class="bg-purple-50 border border-purple-200 rounded-lg p-6">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-purple-500 text-white">
                    <i class="fas fa-euro-sign"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-purple-600">Valore Stimato</p>
                    <p class="text-2xl font-bold text-purple-900">€{{ number_format($statistiche['valore_stimato'], 0, ',', '.') }}</p>
                </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="dati-generali" 
                        role="tab">
                    <i class="fas fa-info-circle mr-2"></i>
                    Dati Generali
                </button>
                <button class="netgescon-tab-btn" 
                        data-tab="posizione" 
                        role="tab">
                    <i class="fas fa-map-marker-alt mr-2"></i>
                    Posizione
                </button>
                <button class="netgescon-tab-btn" 
                        data-tab="caratteristiche" 
                        role="tab">
                    <i class="fas fa-list mr-2"></i>
                    Caratteristiche
                </button>
                <button class="netgescon-tab-btn" 
                        data-tab="unita-vicine" 
                        role="tab">
                    <i class="fas fa-users mr-2"></i>
                    Unità Vicine
                </button>
                <button class="netgescon-tab-btn" 
                        data-tab="economico" 
                        role="tab">
                    <i class="fas fa-calculator mr-2"></i>
                    Aspetti Economici
                </button>
            </nav>
        </div>

        <!-- Tab Content -->
        <div class="p-6">
            <!-- Tab Dati Generali -->
            <div id="dati-generali" class="netgescon-tab-content">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <!-- Identificazione -->
                    <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>
                            Identificazione
                        </h3>
                        <div class="space-y-3">
                            <div class="flex justify-between">
                                <span class="font-medium text-gray-700">Codice Unità:</span>
                                <span class="text-gray-900 font-mono">{{ $unita->codice_unita }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-medium text-gray-700">Tipo Unità:</span>
                                <span class="text-gray-900">{{ ucfirst(str_replace('_', ' ', $unita->tipo_unita ?? 'abitazione')) }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-medium text-gray-700">Utilizzo Attuale:</span>
                                <span class="text-gray-900">{{ ucfirst(str_replace('_', ' ', $unita->utilizzo_attuale ?? 'abitazione_principale')) }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-medium text-gray-700">Stato Occupazione:</span>
                                <span class="px-2 py-1 rounded-full text-xs font-medium 
                                    @if($unita->stato_occupazione === 'occupata_proprietario') bg-green-100 text-green-800
                                    @elseif($unita->stato_occupazione === 'libera') bg-blue-100 text-blue-800
                                    @elseif($unita->stato_occupazione === 'in_vendita') bg-yellow-100 text-yellow-800
                                    @else bg-gray-100 text-gray-800 @endif">
                                    {{ ucfirst(str_replace('_', ' ', $unita->stato_occupazione ?? 'libera')) }}
                                </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-green-600"></i>
                            Superfici
                        </h3>
                        <div class="space-y-3">
                            <div class="flex justify-between">
                                <span class="font-medium text-gray-700">Superficie Commerciale:</span>
                                <span class="text-gray-900">{{ $unita->superficie_commerciale ?? '-' }} m²</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-medium text-gray-700">Superficie Accessori:</span>
                                <span class="text-gray-900">{{ $unita->superficie_accessori ?? '-' }} m²</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-medium text-gray-700">Superficie Scoperta:</span>
                                <span class="text-gray-900">{{ $unita->superficie_scoperta ?? '-' }} m²</span>
                            </div>
                            <div class="flex justify-between border-t pt-2">
                                <span class="font-bold text-gray-900">Superficie Totale:</span>
                                <span class="font-bold text-gray-900">{{ $statistiche['superficie_totale'] }} m²</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tab Posizione -->
            <div id="posizione" class="netgescon-tab-content hidden">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <!-- Posizione Fisica -->
                    <div class="space-y-6">
                        <h3 class="text-lg font-semibold text-gray-900 border-b pb-2">
                            <i class="fas fa-map-marker-alt mr-2 text-blue-600"></i>
                            Posizione Fisica
                        </h3>
                        <div class="space-y-3">
                            <div class="flex justify-between">
                                <span class="font-medium text-gray-700">Palazzina:</span>
                                <span class="text-gray-900 font-mono">{{ $unita->palazzina }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-medium text-gray-700">Scala:</span>
                                <span class="text-gray-900 font-mono">{{ $unita->scala }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-medium text-gray-700">Piano:</span>
                                <span class="text-gray-900 font-mono">{{ $unita->piano }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-medium text-gray-700">Interno:</span>
                                <span class="text-gray-900 font-mono">{{ $unita->interno }}</span>
                            </div>
                        </div>
                    </div>

                    <!-- Dati Catastali -->
                    <div class="space-y-6">
                        <h3 class="text-lg font-semibold text-gray-900 border-b pb-2">
                            <i class="fas fa-map mr-2 text-green-600"></i>
                            Dati Catastali
                        </h3>
                        <div class="space-y-3">
                            <div class="flex justify-between">
                                <span class="font-medium text-gray-700">Foglio:</span>
                                <span class="text-gray-900">{{ $unita->foglio ?? '-' }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-medium text-gray-700">Particella:</span>
                                <span class="text-gray-900">{{ $unita->particella ?? '-' }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-medium text-gray-700">Subalterno:</span>
                                <span class="text-gray-900">{{ $unita->subalterno ?? '-' }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-medium text-gray-700">Categoria:</span>
                                <span class="text-gray-900">{{ $unita->categoria_catastale ?? '-' }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tab Caratteristiche -->
            <div id="caratteristiche" class="netgescon-tab-content hidden">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <!-- Caratteristiche Fisiche -->
                    <div class="space-y-6">
                        <h3 class="text-lg font-semibold text-gray-900 border-b pb-2">
                            <i class="fas fa-home mr-2 text-purple-600"></i>
                            Caratteristiche Fisiche
                        </h3>
                        <div class="space-y-3">
                            <div class="flex justify-between">
                                <span class="font-medium text-gray-700">Numero Vani:</span>
                                <span class="text-gray-900">{{ $unita->numero_vani ?? '-' }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-medium text-gray-700">Numero Bagni:</span>
                                <span class="text-gray-900">{{ $unita->numero_bagni ?? '-' }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-medium text-gray-700">Ha Balconi:</span>
                                <span class="text-gray-900">{{ $unita->ha_balconi ? 'Sì' : 'No' }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-medium text-gray-700">Ha Terrazzo:</span>
                                <span class="text-gray-900">{{ $unita->ha_terrazzo ? 'Sì' : 'No' }}</span>
                            </div>
                        </div>
                    </div>

                    <!-- Autorizzazioni -->
                    <div class="space-y-6">
                        <h3 class="text-lg font-semibold text-gray-900 border-b pb-2">
                            <i class="fas fa-certificate mr-2 text-orange-600"></i>
                            Autorizzazioni
                        </h3>
                        <div class="space-y-3">
                            <div class="flex justify-between">
                                <span class="font-medium text-gray-700">CIN:</span>
                                <span class="text-gray-900">{{ $unita->cin ?? '-' }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-medium text-gray-700">Licenza Commerciale:</span>
                                <span class="text-gray-900">{{ $unita->licenza_commerciale ?? '-' }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-medium text-gray-700">Autorizzazione Professionale:</span>
                                <span class="text-gray-900">{{ $unita->autorizzazione_professionale ?? '-' }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tab Unità Vicine -->
            <div id="unita-vicine" class="netgescon-tab-content hidden">
                <div class="space-y-6">
                    <h3 class="text-lg font-semibold text-gray-900 border-b pb-2 mb-6">
                        <i class="fas fa-users mr-2 text-blue-600"></i>
                        Unità Vicine (per gestione problemi tecnici)
                    </h3>

                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <!-- Unità Sovrastante -->
                        <div class="bg-blue-50 border border-blue-200 rounded-lg p-6">
                            <h4 class="font-medium text-blue-800 mb-4 flex items-center">
                                <i class="fas fa-arrow-up mr-2"></i>
                                Unità Sovrastante
                            </h4>
                            @if($unita_vicine['sovrastante'])
                                <div class="space-y-2">
                                    <p class="font-mono text-sm">{{ $unita_vicine['sovrastante']->codice_unita }}</p>
                                    <p class="text-xs text-blue-600">Piano {{ $unita_vicine['sovrastante']->piano }}</p>
                                    <a href="{{ route('admin.unita-immobiliari.show', $unita_vicine['sovrastante']) }}" 
                                       class="inline-flex items-center text-xs text-blue-600 hover:text-blue-800">
                                        <i class="fas fa-eye mr-1"></i>Visualizza
                                    </a>
                                </div>
                            @else
                                <p class="text-sm text-gray-500">Nessuna unità sovrastante</p>
                            @endif
                        </div>

                        <!-- Unità Sottostante -->
                        <div class="bg-green-50 border border-green-200 rounded-lg p-6">
                            <h4 class="font-medium text-green-800 mb-4 flex items-center">
                                <i class="fas fa-arrow-down mr-2"></i>
                                Unità Sottostante
                            </h4>
                            @if($unita_vicine['sottostante'])
                                <div class="space-y-2">
                                    <p class="font-mono text-sm">{{ $unita_vicine['sottostante']->codice_unita }}</p>
                                    <p class="text-xs text-green-600">Piano {{ $unita_vicine['sottostante']->piano }}</p>
                                    <a href="{{ route('admin.unita-immobiliari.show', $unita_vicine['sottostante']) }}" 
                                       class="inline-flex items-center text-xs text-green-600 hover:text-green-800">
                                        <i class="fas fa-eye mr-1"></i>Visualizza
                                    </a>
                                </div>
                            @else
                                <p class="text-sm text-gray-500">Nessuna unità sottostante</p>
                            @endif
                        </div>

                        <!-- Unità Laterali -->
                        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-6">
                            <h4 class="font-medium text-yellow-800 mb-4 flex items-center">
                                <i class="fas fa-arrows-alt-h mr-2"></i>
                                Unità Laterali
                            </h4>
                            @if($unita_vicine['laterali']->count() > 0)
                                <div class="space-y-3">
                                    @foreach($unita_vicine['laterali'] as $laterale)
                                        <div class="border-b border-yellow-200 pb-2 last:border-b-0">
                                            <p class="font-mono text-sm">{{ $laterale->codice_unita }}</p>
                                            <p class="text-xs text-yellow-600">Interno {{ $laterale->interno }}</p>
                                            <a href="{{ route('admin.unita-immobiliari.show', $laterale) }}" 
                                               class="inline-flex items-center text-xs text-yellow-600 hover:text-yellow-800">
                                                <i class="fas fa-eye mr-1"></i>Visualizza
                                            </a>
                                        </div>
                                    @endforeach
                                </div>
                            @else
                                <p class="text-sm text-gray-500">Nessuna unità laterale</p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tab Economico -->
            <div id="economico" class="netgescon-tab-content hidden">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <!-- Millesimi -->
                    <div class="space-y-6">
                        <h3 class="text-lg font-semibold text-gray-900 border-b pb-2">
                            <i class="fas fa-percentage mr-2 text-blue-600"></i>
                            Millesimi di Proprietà
                        </h3>
                        <div class="space-y-3">
                            <div class="flex justify-between">
                                <span class="font-medium text-gray-700">Millesimi Proprietà:</span>
                                <span class="text-gray-900 font-mono">{{ $unita->millesimi_proprieta ?? 0 }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-medium text-gray-700">Percentuale:</span>
                                <span class="text-gray-900">{{ $statistiche['rapporto_millesimi'] }}%</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-medium text-gray-700">Millesimi Riscaldamento:</span>
                                <span class="text-gray-900">{{ $unita->millesimi_riscaldamento ?? '-' }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-medium text-gray-700">Millesimi Ascensore:</span>
                                <span class="text-gray-900">{{ $unita->millesimi_ascensore ?? '-' }}</span>
                            </div>
                        </div>
                    </div>

                    <!-- Valutazioni -->
                    <div class="space-y-6">
                        <h3 class="text-lg font-semibold text-gray-900 border-b pb-2">
                            <i class="fas fa-euro-sign mr-2 text-green-600"></i>
                            Valutazioni Economiche
                        </h3>
                        <div class="space-y-3">
                            <div class="flex justify-between">
                                <span class="font-medium text-gray-700">Valore Commerciale:</span>
                                <span class="text-gray-900">€{{ number_format($unita->valore_commerciale_stimato ?? 0, 0, ',', '.') }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-medium text-gray-700">Valore al m²:</span>
                                <span class="text-gray-900">
                                    @if($unita->superficie_commerciale && $unita->valore_commerciale_stimato)
                                        €{{ number_format($unita->valore_commerciale_stimato / $unita->superficie_commerciale, 0, ',', '.') }}/m²
                                    @else
                                        -
                                    @endif
                                </span>
                            </div>
                            <div class="flex justify-between">
                                <span class="font-medium text-gray-700">Rendita Catastale:</span>
                                <span class="text-gray-900">€{{ number_format($unita->rendita_catastale ?? 0, 2, ',', '.') }}</span>
                            </div>
                        </div>
                    </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