<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
            {{ __('Struttura Fisica') }} - {{ $stabile->denominazione }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
            
            {{-- Breadcrumb --}}
            <nav class="flex" aria-label="Breadcrumb">
                <ol class="inline-flex items-center space-x-1 md:space-x-3">
                    <li class="inline-flex items-center">
                        <a href="{{ route('admin.stabili.index') }}" class="text-gray-700 hover:text-gray-900">
                            <i class="fas fa-building mr-2"></i>Stabili
                        </a>
                    </li>
                    <li>
                        <div class="flex items-center">
                            <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
                            <a href="{{ route('admin.stabili.show', $stabile) }}" class="text-gray-700 hover:text-gray-900">
                                {{ $stabile->denominazione }}
                            </a>
                        </div>
                    </li>
                    <li aria-current="page">
                        <div class="flex items-center">
                            <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
                            <span class="text-gray-500">Struttura Fisica</span>
                        </div>
                    </li>
                </ol>
            </nav>

            {{-- Panel Auto-Generazione --}}
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">Configurazione Automatica</h3>
                        <div class="flex space-x-2">
                            <button type="button" 
                                    onclick="document.getElementById('modal-auto-genera').classList.remove('hidden')"
                                    class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition-colors">
                                <i class="fas fa-magic mr-2"></i>Auto-Genera Struttura
                            </button>
                            <button type="button" 
                                    onclick="document.getElementById('modal-auto-unita').classList.remove('hidden')"
                                    class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded transition-colors">
                                <i class="fas fa-home mr-2"></i>Auto-Genera Unità
                            </button>
                        </div>
                    </div>
                    <p class="text-sm text-gray-600 dark:text-gray-400">
                        Utilizza gli strumenti di auto-generazione per creare rapidamente la struttura fisica del condominio 
                        (palazzine, scale, piani) e le relative unità immobiliari.
                    </p>
                </div>
            </div>

            {{-- Riepilogo Struttura --}}
            @if($strutture->count() > 0)
                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6">
                        <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">Riepilogo Struttura</h3>
                        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                            <div class="bg-blue-50 p-4 rounded-lg">
                                <div class="flex items-center">
                                    <i class="fas fa-building text-2xl text-blue-600"></i>
                                    <div class="ml-3">
                                        <p class="text-sm font-medium text-blue-600">Palazzine</p>
                                        <p class="text-2xl font-bold text-blue-900">
                                            {{ $strutture->has('palazzina') ? $strutture['palazzina']->count() : 0 }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="bg-green-50 p-4 rounded-lg">
                                <div class="flex items-center">
                                    <i class="fas fa-stairs text-2xl text-green-600"></i>
                                    <div class="ml-3">
                                        <p class="text-sm font-medium text-green-600">Scale</p>
                                        <p class="text-2xl font-bold text-green-900">
                                            {{ $strutture->has('scala') ? $strutture['scala']->count() : 0 }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="bg-purple-50 p-4 rounded-lg">
                                <div class="flex items-center">
                                    <i class="fas fa-layer-group text-2xl text-purple-600"></i>
                                    <div class="ml-3">
                                        <p class="text-sm font-medium text-purple-600">Piani</p>
                                        <p class="text-2xl font-bold text-purple-900">
                                            {{ $strutture->has('piano') ? $strutture['piano']->count() : 0 }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="bg-orange-50 p-4 rounded-lg">
                                <div class="flex items-center">
                                    <i class="fas fa-door-open text-2xl text-orange-600"></i>
                                    <div class="ml-3">
                                        <p class="text-sm font-medium text-orange-600">Locali Tecnici</p>
                                        <p class="text-2xl font-bold text-orange-900">
                                            {{ $strutture->has('locale') ? $strutture['locale']->count() : 0 }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Visualizzazione Struttura ad Albero --}}
                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6">
                        <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">Struttura Gerarchica</h3>
                        
                        @if($strutture->has('palazzina'))
                            @foreach($strutture['palazzina'] as $palazzina)
                                <div class="mb-6 border border-gray-200 rounded-lg p-4">
                                    {{-- Palazzina --}}
                                    <div class="flex items-center mb-3">
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium {{ $palazzina->tipo_badge }}">
                                            <i class="{{ $palazzina->tipo_icona }} mr-2"></i>
                                            {{ $palazzina->nome }} ({{ $palazzina->codice }})
                                        </span>
                                        @if($palazzina->descrizione)
                                            <span class="ml-3 text-sm text-gray-500">{{ $palazzina->descrizione }}</span>
                                        @endif
                                    </div>

                                    {{-- Scale di questa palazzina --}}
                                    @php 
                                        $scaleDelPalazzo = $strutture->has('scala') ? 
                                            $strutture['scala']->where('parent_id', $palazzina->id) : collect()
                                    @endphp
                                    
                                    @if($scaleDelPalazzo->count() > 0)
                                        <div class="ml-6 space-y-4">
                                            @foreach($scaleDelPalazzo as $scala)
                                                <div class="border-l-4 border-blue-200 pl-4">
                                                    {{-- Scala --}}
                                                    <div class="flex items-center mb-2">
                                                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium {{ $scala->tipo_badge }}">
                                                            <i class="{{ $scala->tipo_icona }} mr-1"></i>
                                                            {{ $scala->nome }} ({{ $scala->codice }})
                                                        </span>
                                                        @if($scala->descrizione)
                                                            <span class="ml-2 text-xs text-gray-500">{{ $scala->descrizione }}</span>
                                                        @endif
                                                    </div>

                                                    {{-- Piani di questa scala --}}
                                                    @php 
                                                        $pianiDellaScala = $strutture->has('piano') ? 
                                                            $strutture['piano']->where('parent_id', $scala->id) : collect()
                                                    @endphp
                                                    
                                                    @if($pianiDellaScala->count() > 0)
                                                        <div class="ml-4 grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2">
                                                            @foreach($pianiDellaScala->sortBy('codice') as $piano)
                                                                <div class="flex items-center">
                                                                    <span class="inline-flex items-center px-2 py-1 rounded text-xs {{ $piano->tipo_badge }}">
                                                                        <i class="{{ $piano->tipo_icona }} mr-1"></i>
                                                                        {{ $piano->nome }}
                                                                    </span>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    @endif
                                                </div>
                                            @endforeach
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                        @endif

                        {{-- Locali Tecnici (non gerarchici) --}}
                        @if($strutture->has('locale'))
                            <div class="mt-6 pt-6 border-t border-gray-200">
                                <h4 class="text-md font-medium text-gray-900 dark:text-gray-100 mb-3">Locali Tecnici</h4>
                                <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-3">
                                    @foreach($strutture['locale'] as $locale)
                                        <div class="flex items-center">
                                            <span class="inline-flex items-center px-2 py-1 rounded text-sm {{ $locale->tipo_badge }}">
                                                <i class="{{ $locale->tipo_icona }} mr-2"></i>
                                                {{ $locale->nome }}
                                            </span>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            @else
                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6 text-center">
                        <i class="fas fa-building text-6xl text-gray-300 mb-4"></i>
                        <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">Struttura fisica non configurata</h3>
                        <p class="text-gray-500 dark:text-gray-400 mb-6">
                            Utilizza l'auto-generazione per creare rapidamente la struttura del condominio
                        </p>
                        <button type="button" 
                                onclick="document.getElementById('modal-auto-genera').classList.remove('hidden')"
                                class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                            <i class="fas fa-magic mr-2"></i>Inizia Configurazione
                        </button>
                    </div>
                </div>
            @endif
        </div>
    </div>

    {{-- Modal Auto-Generazione Struttura --}}
    <div id="modal-auto-genera" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
        <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
            <div class="mt-3">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Auto-Generazione Struttura Fisica</h3>
                <form action="{{ route('admin.stabili.struttura.auto_genera', $stabile) }}" method="POST">
                    @csrf
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Numero Palazzine</label>
                            <input type="number" name="num_palazzine" required min="1" max="20" value="1"
                                   class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Scale per Palazzina</label>
                            <input type="number" name="num_scale_per_palazzina" required min="1" max="10" value="1"
                                   class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Piani per Scala</label>
                            <input type="number" name="num_piani_per_scala" required min="1" max="50" value="4"
                                   class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
                            <p class="text-xs text-gray-500 mt-1">Include automaticamente il piano terra (Piano 0)</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Unità per Piano</label>
                            <input type="number" name="num_unita_per_piano" required min="1" max="20" value="2"
                                   class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
                            <p class="text-xs text-gray-500 mt-1">Sarà utilizzato per l'auto-generazione unità</p>
                        </div>
                        <div class="flex items-center">
                            <input type="checkbox" name="pulisci_esistente" value="1" id="pulisci_esistente"
                                   class="h-4 w-4 text-blue-600 border-gray-300 rounded">
                            <label for="pulisci_esistente" class="ml-2 block text-sm text-gray-700">
                                Sostituisci struttura esistente
                            </label>
                        </div>
                    </div>
                    <div class="flex justify-end space-x-2 mt-6">
                        <button type="button" 
                                onclick="document.getElementById('modal-auto-genera').classList.add('hidden')"
                                class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded">
                            Annulla
                        </button>
                        <button type="submit" 
                                class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                            Genera Struttura
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Modal Auto-Generazione Unità --}}
    <div id="modal-auto-unita" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
        <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
            <div class="mt-3">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Auto-Generazione Unità Immobiliari</h3>
                <form action="{{ route('admin.stabili.unita.auto_genera', $stabile) }}" method="POST">
                    @csrf
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Template Nome Unità</label>
                            <input type="text" name="template_nome" required 
                                   value="Appartamento {piano} - Unità {numero}"
                                   class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
                            <p class="text-xs text-gray-500 mt-1">
                                Usa {piano}, {numero}, {codice} come placeholder
                            </p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Millesimi Default</label>
                            <input type="number" name="millesimi_default" required step="0.001" min="0" max="1000" value="10"
                                   class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
                            <p class="text-xs text-gray-500 mt-1">Millesimi per unità (verranno ricalcolati)</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Unità per Piano</label>
                            <input type="number" name="num_unita_per_piano" required min="1" max="20" value="2"
                                   class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
                        </div>
                    </div>
                    <div class="flex justify-end space-x-2 mt-6">
                        <button type="button" 
                                onclick="document.getElementById('modal-auto-unita').classList.add('hidden')"
                                class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded">
                            Annulla
                        </button>
                        <button type="submit" 
                                class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
                            Genera Unità
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</x-app-layout>
