@extends('admin.layouts.netgescon')

@section('title', 'Dettagli Stabile')
@section('page-title', 'Dettagli Stabile')

@section('breadcrumb')
    <li class="text-gray-600">
        <a href="{{ route('admin.stabili.index') }}" class="hover:text-blue-600">
            <i class="fas fa-building mr-2"></i>
            Stabili
        </a>
    </li>
    <li class="text-gray-600">
        <i class="fas fa-chevron-right mx-2"></i>
        {{ Str::limit($stabile->denominazione, 40) }}
    </li>
@endsection

@push('styles')
<style>
    .palazzine-layout {
        align-items: stretch;
    }

    #palazzine-list button {
        font-family: var(--netgescon-font-family, 'Inter', system-ui, sans-serif);
        transition: background-color 0.2s ease, transform 0.2s ease;
    }

    #palazzine-list button:hover {
        transform: translateX(4px);
    }

    .palazzina-panel .palazzina-header {
        font-family: var(--netgescon-font-family, 'Inter', system-ui, sans-serif);
    }

    .palazzina-panel .unit-card {
        font-family: var(--netgescon-font-family, 'Inter', system-ui, sans-serif);
        border-radius: 0.75rem;
    }

    .palazzina-panel .unit-card:hover {
        box-shadow: var(--netgescon-shadow-md, 0 10px 15px -3px rgb(15 23 42 / 0.1));
    }
</style>
@endpush

@section('content')
<div class="space-y-6">
    <!-- Header con azioni -->
    <div class="flex justify-between items-center">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">{{ $stabile->denominazione }}</h1>
            <p class="text-gray-600 mt-1">
                <i class="fas fa-map-marker-alt mr-1"></i>
                {{ $stabile->indirizzo }}, {{ $stabile->citta }}
            </p>
        </div>
        <div class="flex space-x-3">
            @if(auth()->user()?->hasAnyRole(['super-admin','admin','amministratore','collaboratore']))
                <a href="{{ route('admin.filament.stabili.open', ['stabile' => $stabile->id]) }}"
                   class="netgescon-btn netgescon-btn-outline-primary">
                    <i class="fas fa-bolt mr-2"></i>
                    Apri in Filament
                </a>
            @endif
            <a href="{{ route('admin.stabili.edit', $stabile) }}" 
               class="netgescon-btn netgescon-btn-primary">
                <i class="fas fa-edit mr-2"></i>
                Modifica
            </a>
            <a href="{{ route('admin.stabili.index') }}" 
               class="netgescon-btn netgescon-btn-secondary">
                <i class="fas fa-arrow-left mr-2"></i>
                Torna alla Lista
            </a>
        </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" 
                        type="button" 
                        role="tab">
                    <i class="fas fa-info-circle mr-2"></i>
                    Dati Generali
                </button>
                <button class="netgescon-tab-btn" 
                        data-tab="palazzine" 
                        type="button" 
                        role="tab">
                    <i class="fas fa-building mr-2"></i>
                    Palazzine
                </button>
                <button class="netgescon-tab-btn" 
                        data-tab="dati-bancari" 
                        type="button" 
                        role="tab">
                    <i class="fas fa-university mr-2"></i>
                    Dati Finanziari
                </button>
                <button class="netgescon-tab-btn" 
                        data-tab="tabelle-millesimali" 
                        type="button" 
                        role="tab">
                    <i class="fas fa-table mr-2"></i>
                    Tabelle Millesimali
                </button>
                <button class="netgescon-tab-btn" 
                        data-tab="gestioni" 
                        type="button" 
                        role="tab">
                    <i class="fas fa-cogs mr-2"></i>
                    Gestioni
                </button>
                            <button class="netgescon-tab-btn" 
                                    data-tab="unita-immobiliari" 
                                    type="button" 
                                    role="tab">
                                <i class="fas fa-tools mr-2"></i>
                                Locali Tecnici
                            </button>
                            <button class="netgescon-tab-btn" 
                                    data-tab="gestione-documentale" 
                                    type="button" 
                                    role="tab">
                                <i class="fas fa-folder-open mr-2"></i>
                                Gestione Documentale
                            </button>
                </nav>
            </div>

            <!-- Tab Content -->
            <div class="px-6 pb-6">
                <!-- Tab Dati Generali -->
                <div id="dati-generali" class="netgescon-tab-content active">
                    @include('admin.stabili.tabs.dati-generali', ['stabile' => $stabile])
                </div>

                <!-- Palazzine (lazy) -->
                <div id="palazzine" class="netgescon-tab-content hidden" data-lazy="true"></div>
                <!-- Dati Finanziari (lazy) -->
                <div id="dati-bancari" class="netgescon-tab-content hidden" data-lazy="true"></div>
                <!-- Tabelle Millesimali (lazy) -->
                <div id="tabelle-millesimali" class="netgescon-tab-content hidden" data-lazy="true"></div>
                <!-- Gestioni (lazy) -->
                <div id="gestioni" class="netgescon-tab-content hidden" data-lazy="true"></div>
                <!-- Unità Immobiliari (lazy) -->
                <div id="unita-immobiliari" class="netgescon-tab-content hidden" data-lazy="true"></div>
                <!-- Gestione Documentale (lazy) -->
                <div id="gestione-documentale" class="netgescon-tab-content hidden" data-lazy="true"></div>
            </div>
        </div>
    </div>

    <!-- CSS per i tab -->
    <style>
        .netgescon-tab-btn {
            @apply px-4 py-2 text-sm font-medium text-gray-500 dark:text-gray-400 border-b-2 border-transparent hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 focus:outline-none focus:text-gray-700 dark:focus:text-gray-300 focus:border-gray-300 transition-colors duration-200;
        }
        
        .netgescon-tab-btn.active {
            @apply text-blue-600 dark:text-blue-400 border-blue-500 dark:border-blue-400;
        }
        
        .netgescon-tab-content {
            @apply hidden;
        }
        
        .netgescon-tab-content.active {
            @apply block;
        }
    </style>

    <!-- JavaScript per i tab -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const tabButtons = document.querySelectorAll('.netgescon-tab-btn');
            const tabContents = document.querySelectorAll('.netgescon-tab-content');
            
            const stabileId = {{ $stabile->id }};
            const loadedTabs = { 'dati-generali': true };

            function executeInlineScripts(container) {
                if (!container) {
                    return;
                }
                const scripts = container.querySelectorAll('script');
                scripts.forEach((script) => {
                    const newScript = document.createElement('script');
                    if (script.src) {
                        newScript.src = script.src;
                        newScript.async = false;
                    } else {
                        newScript.textContent = script.textContent;
                    }
                    document.body.appendChild(newScript);
                    document.body.removeChild(newScript);
                });
            }

            function fetchTab(tabKey) {
                if (loadedTabs[tabKey]) return; // Already loaded
                const container = document.getElementById(tabKey);
                if (!container) return;
                container.innerHTML = `<div class="py-8 text-center text-gray-500">
                    <i class='fas fa-circle-notch fa-spin text-2xl mb-3'></i><p>Caricamento...</p></div>`;
                fetch(`/admin/stabili/${stabileId}/tabs/${tabKey}` , { headers: { 'X-Requested-With':'XMLHttpRequest' }})
                    .then(r => r.json())
                    .then(data => {
                        if (data.success) {
                            container.innerHTML = data.html;
                            executeInlineScripts(container);
                            if (tabKey === 'palazzine' && typeof window.initialisePalazzineTab === 'function') {
                                window.initialisePalazzineTab();
                            }
                            loadedTabs[tabKey] = true;
                            // Se tab unita-immobiliari richiede fetch secondario, trigger
                            if (tabKey === 'unita-immobiliari') {
                                loadUnitaImmobiliari();
                            }
                        } else {
                            throw new Error(data.error || 'Errore generico');
                        }
                    })
                    .catch(err => {
                        console.error(err);
                        container.innerHTML = `<div class='p-6 text-center text-red-600'>
                            <i class="fas fa-triangle-exclamation text-2xl mb-2"></i>
                            <p>Errore caricamento tab: ${err.message}</p>
                            <button class='mt-3 netgescon-btn netgescon-btn-secondary' onclick="retryTab('${tabKey}')">Riprova</button>
                        </div>`;
                    });
            }

            window.retryTab = function(tabKey){ delete loadedTabs[tabKey]; fetchTab(tabKey); };

            tabButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const targetTab = this.dataset.tab;
                    
                    // Rimuovi classe active da tutti i bottoni
                    tabButtons.forEach(btn => btn.classList.remove('active'));
                    
                    // Nascondi tutti i contenuti dei tab
                    tabContents.forEach(content => {
                        content.classList.remove('active');
                        content.classList.add('hidden');
                    });
                    
                    // Aggiungi classe active al bottone cliccato
                    this.classList.add('active');
                    
                    // Mostra il contenuto del tab selezionato
                    const targetContent = document.getElementById(targetTab);
                    if (targetContent) {
                        targetContent.classList.add('active');
                        targetContent.classList.remove('hidden');
                    }
                    
                    // Carica contenuto dinamico per la tab Unità Immobiliari
                    // Lazy fetch if needed
                    fetchTab(targetTab);
                });
            });

            // Support deep-link: /admin/stabili/{id}?tab=tabelle-millesimali
            try {
                const params = new URLSearchParams(window.location.search);
                const requestedTab = params.get('tab');
                if (requestedTab) {
                    const targetExists = document.getElementById(requestedTab);
                    const btn = document.querySelector(`.netgescon-tab-btn[data-tab="${requestedTab}"]`);
                    if (targetExists && btn) {
                        btn.click();
                    }
                }
            } catch (e) {
                // no-op
            }
            
            // Funzione per caricare dinamicamente le Unità Immobiliari
            function loadUnitaImmobiliari() {
                const contentContainer = document.getElementById('unita-immobiliari');
                const stabileId = {{ $stabile->id }};
                
                // Mostra loading se non già caricato
                if (!contentContainer.dataset.loaded) {
                    fetch(`/admin/stabili/${stabileId}/unita-immobiliari`, {
                        method: 'GET',
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            contentContainer.innerHTML = data.html;
                            contentContainer.dataset.loaded = 'true';
                        } else {
                            contentContainer.innerHTML = `
                                <div class="text-center py-8">
                                    <div class="text-red-600">
                                        <i class="fas fa-exclamation-triangle text-2xl mb-2"></i>
                                        <p>Errore nel caricamento delle unità immobiliari</p>
                                    </div>
                                </div>
                            `;
                        }
                    })
                    .catch(error => {
                        console.error('Errore:', error);
                        contentContainer.innerHTML = `
                            <div class="text-center py-8">
                                <div class="text-red-600">
                                    <i class="fas fa-exclamation-triangle text-2xl mb-2"></i>
                                    <p>Errore di connessione</p>
                                </div>
                            </div>
                        `;
                    });
                }
            }
        });
    </script>
@endsection