{{--
    Dashboard Condomino - Layout Modulare
    Utilizza i componenti dashboard modulari per una gestione centralizzata
--}}

<x-layout.universal 
    pageTitle="Dashboard Condomino"
    showSidebar="true"
    showBreadcrumb="true">
<div class="space-y-6">
    
    <!-- Banner Benvenuto -->
    <x-dashboard.condomino.welcome-banner />

    <!-- Statistiche Principali -->
    <x-dashboard.condomino.stats :stats="$stats ?? []" />

    <!-- Azioni Rapide -->
    <x-dashboard.condomino.quick-actions />

    <!-- Layout a due colonne per contenuti aggiuntivi -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        
        <!-- Comunicazioni Recenti -->
        <x-dashboard.condomino.recent-communications />

        <!-- Rate in Scadenza -->
        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
            <div class="p-6">
                <div class="flex items-center justify-between mb-6">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Rate in Scadenza</h3>
                    <a href="{{ route('condomino.rate.index') }}" 
                       class="text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400">
                        Visualizza tutte
                    </a>
                </div>
                
                <div class="space-y-4">
                    {{-- Rate fittizie per ora, da sostituire con dati reali --}}
                    
                    <!-- Rata 1 -->
                    <div class="flex items-center justify-between p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
                        <div class="flex-1">
                            <p class="text-sm font-medium text-gray-900 dark:text-white">
                                Rata Marzo 2024
                            </p>
                            <p class="text-xs text-gray-500 dark:text-gray-400">
                                Scadenza: 31 Marzo 2024
                            </p>
                        </div>
                        <div class="flex-shrink-0 ml-4 text-right">
                            <p class="text-lg font-bold text-red-600 dark:text-red-400">
                                €450,00
                            </p>
                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                Scadenza vicina
                            </span>
                        </div>
                    </div>
                    
                    <!-- Rata 2 -->
                    <div class="flex items-center justify-between p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
                        <div class="flex-1">
                            <p class="text-sm font-medium text-gray-900 dark:text-white">
                                Rata Aprile 2024
                            </p>
                            <p class="text-xs text-gray-500 dark:text-gray-400">
                                Scadenza: 30 Aprile 2024
                            </p>
                        </div>
                        <div class="flex-shrink-0 ml-4 text-right">
                            <p class="text-lg font-bold text-yellow-600 dark:text-yellow-400">
                                €450,00
                            </p>
                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                In arrivo
                            </span>
                        </div>
                    </div>
                    
                    @if(false) {{-- Quando non ci sono rate in scadenza --}}
                    <div class="text-center py-8">
                        <div class="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i class="fas fa-check-circle text-green-400 text-2xl"></i>
                        </div>
                        <p class="text-gray-500 dark:text-gray-400">Nessuna rata in scadenza</p>
                        <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Tutte le rate sono in regola!</p>
                    </div>
                    @endif
                    
                </div>
            </div>
        </div>
        
    </div>

    <!-- Prossime Assemblee -->
    <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
        <div class="p-6">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Prossime Assemblee</h3>
                <a href="{{ route('condomino.assemblee.index') }}" 
                   class="text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400">
                    Visualizza tutte
                </a>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                {{-- Assemblee fittizie per ora, da sostituire con dati reali --}}
                
                <!-- Assemblea 1 -->
                <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
                    <div class="flex items-start justify-between">
                        <div class="flex-1">
                            <h4 class="text-sm font-medium text-gray-900 dark:text-white">
                                Assemblea Straordinaria
                            </h4>
                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                Lavori di ristrutturazione del tetto
                            </p>
                            <div class="flex items-center mt-3 text-xs text-gray-600 dark:text-gray-400">
                                <i class="fas fa-calendar mr-2"></i>
                                15 Marzo 2024 - 18:00
                            </div>
                            <div class="flex items-center mt-1 text-xs text-gray-600 dark:text-gray-400">
                                <i class="fas fa-map-marker-alt mr-2"></i>
                                Sala riunioni, Piano Terra
                            </div>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                            Confermata
                        </span>
                    </div>
                </div>
                
                <!-- Assemblea 2 -->
                <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
                    <div class="flex items-start justify-between">
                        <div class="flex-1">
                            <h4 class="text-sm font-medium text-gray-900 dark:text-white">
                                Assemblea Ordinaria
                            </h4>
                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                Approvazione bilancio 2024
                            </p>
                            <div class="flex items-center mt-3 text-xs text-gray-600 dark:text-gray-400">
                                <i class="fas fa-calendar mr-2"></i>
                                20 Aprile 2024 - 19:00
                            </div>
                            <div class="flex items-center mt-1 text-xs text-gray-600 dark:text-gray-400">
                                <i class="fas fa-map-marker-alt mr-2"></i>
                                Sala riunioni, Piano Terra
                            </div>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                            Programmata
                        </span>
                    </div>
                </div>
            </div>
            
            @if(false) {{-- Quando non ci sono assemblee --}}
            <div class="text-center py-8">
                <div class="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-calendar-times text-gray-400 text-2xl"></i>
                </div>
                <p class="text-gray-500 dark:text-gray-400">Nessuna assemblea programmata</p>
            </div>
            @endif
            
        </div>
    </div>
    
</div>
@endsection
                            <div class="ml-5 w-0 flex-1">
                                <dl>
                                    <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Ticket Aperti</dt>
                                    <dd class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ $stats['ticket_aperti'] }}</dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <div class="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center">
                                    <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path>
                                    </svg>
                                </div>
                            </div>
                            <div class="ml-5 w-0 flex-1">
                                <dl>
                                    <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Rate Scadute</dt>
                                    <dd class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ $stats['rate_scadute'] }}</dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">
                                    <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 110 2h-3a1 1 0 01-1-1v-6a1 1 0 00-1-1H9a1 1 0 00-1 1v6a1 1 0 01-1 1H4a1 1 0 110-2V4zm3 1h2v2H7V5zm2 4H7v2h2V9zm2-4h2v2h-2V5zm2 4h-2v2h2V9z" clip-rule="evenodd"></path>
                                    </svg>
                                </div>
                            </div>
                            <div class="ml-5 w-0 flex-1">
                                <dl>
                                    <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Documenti</dt>
                                    <dd class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ $stats['documenti_disponibili'] }}</dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Azioni Rapide -->
            <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">Azioni Rapide</h3>
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                        <a href="{{ route('condomino.tickets.create') }}" 
                           class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded text-center transition duration-200">
                            Nuovo Ticket
                        </a>
                        <a href="{{ route('condomino.documenti.index') }}" 
                           class="bg-green-500 hover:bg-green-700 text-white font-bold py-3 px-4 rounded text-center transition duration-200">
                            Documenti
                        </a>
                        <a href="{{ route('condomino.unita.index') }}" 
                           class="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded text-center transition duration-200">
                            Le Mie Unità
                        </a>
                        <a href="{{ route('condomino.pagamenti.index') }}" 
                           class="bg-purple-500 hover:bg-purple-700 text-white font-bold py-3 px-4 rounded text-center transition duration-200">
                            Pagamenti
                        </a>
                    </div>
                </div>
            </div>

            <!-- Contenuto principale in due colonne -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                
                <!-- I Miei Ticket -->
                <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">I Miei Ticket</h3>
                            <a href="{{ route('condomino.tickets.index') }}" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">
                                Vedi tutti
                            </a>
                        </div>
                        
                        <div class="space-y-3">
                            @forelse($ticketRecenti as $ticket)
                                <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-3">
                                    <div class="flex justify-between items-start">
                                        <div class="flex-1">
                                            <h4 class="text-sm font-medium text-gray-900 dark:text-gray-100">
                                                <a href="{{ route('condomino.tickets.show', $ticket) }}" class="hover:text-blue-600">
                                                    {{ $ticket->titolo }}
                                                </a>
                                            </h4>
                                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                                {{ $ticket->stabile->denominazione }}
                                            </p>
                                        </div>
                                        <div class="flex flex-col items-end space-y-1">
                                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium 
                                                @switch($ticket->stato)
                                                    @case('Aperto') bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100 @break
                                                    @case('Preso in Carico') bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100 @break
                                                    @case('In Lavorazione') bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100 @break
                                                    @default bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100
                                                @endswitch">
                                                {{ $ticket->stato }}
                                            </span>
                                            <span class="text-xs text-gray-500 dark:text-gray-400">
                                                {{ $ticket->created_at->diffForHumans() }}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <p class="text-gray-500 dark:text-gray-400 text-center py-4">Nessun ticket aperto</p>
                            @endforelse
                        </div>
                    </div>
                </div>

                <!-- Ultimi Documenti -->
                <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">Ultimi Documenti</h3>
                            <a href="{{ route('condomino.documenti.index') }}" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">
                                Vedi tutti
                            </a>
                        </div>
                        
                        <div class="space-y-3">
                            @forelse($ultimiDocumenti as $documento)
                                <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-3">
                                    <div class="flex justify-between items-start">
                                        <div class="flex-1">
                                            <h4 class="text-sm font-medium text-gray-900 dark:text-gray-100">
                                                {{ $documento->nome_file }}
                                            </h4>
                                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                                {{ $documento->tipo_documento }} - {{ $documento->documentable->denominazione ?? 'N/A' }}
                                            </p>
                                        </div>
                                        <div class="flex flex-col items-end space-y-1">
                                            <span class="text-xs text-gray-500 dark:text-gray-400">
                                                {{ $documento->created_at->diffForHumans() }}
                                            </span>
                                            <a href="{{ route('condomino.documenti.download', $documento) }}" class="text-blue-600 hover:text-blue-900 text-xs">
                                                Download
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <p class="text-gray-500 dark:text-gray-400 text-center py-4">Nessun documento disponibile</p>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>

            <!-- Le Mie Unità -->
            <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">Le Mie Unità Immobiliari</h3>
                        <a href="{{ route('condomino.unita.index') }}" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">
                            Gestisci
                        </a>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                        @forelse($unitaImmobiliari as $unita)
                            <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
                                <h4 class="font-medium text-gray-900 dark:text-gray-100">
                                    {{ $unita->stabile->denominazione }}
                                </h4>
                                <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                                    {{ $unita->identificazione_completa }}
                                </p>
                                <div class="mt-3 flex justify-between items-center">
                                    <span class="text-xs text-gray-500 dark:text-gray-400">
                                        Millesimi: {{ $unita->millesimi_proprieta ?? 'N/A' }}
                                    </span>
                                    <a href="{{ route('condomino.unita.show', $unita) }}" 
                                       class="text-blue-600 hover:text-blue-900 text-sm">
                                        Dettagli
                                    </a>
                                </div>
                            </div>
                        @empty
                            <div class="col-span-full text-center py-8">
                                <p class="text-gray-500 dark:text-gray-400">Nessuna unità immobiliare associata</p>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Script per grafici (Chart.js) -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        // Implementeremo i grafici quando avremo i dati delle rate e pagamenti
    </script>
</x-layout.universal>