{{--
    Dashboard Generica - Layout Modulare
    Dashboard di fallback per ruoli senza dashboard specifica
--}}

<x-layout.universal pageTitle="Dashboard" showBreadcrumb="true" showSidebar="true">

{{-- CSS per la dashboard --}}
@push('styles')
<style>
.dashboard-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    height: 100%;
}

.dashboard-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.dashboard-card .card-body {
    padding: 1rem;
}

.dashboard-card .card-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.widget-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
}

.widget-stats {
    font-size: 2rem;
    font-weight: bold;
    line-height: 1;
}

.quick-action-btn {
    height: 100px;
    border: 2px dashed #dee2e6;
    border-radius: 12px;
    transition: all 0.3s ease;
    padding: 0.75rem;
}

.quick-action-btn:hover {
    border-color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    transform: translateY(-2px);
}

.stats-card {
    height: 120px;
    min-height: 120px;
}

.stats-card .card-body {
    padding: 1rem;
    display: flex;
    align-items: center;
}

.stats-card h3 {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
}

.stats-card h6 {
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.stats-card small {
    font-size: 0.75rem;
    opacity: 0.8;
}

.list-group-item {
    border: none;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding: 0.75rem 1rem;
}

.list-group-item:last-child {
    border-bottom: none;
}

.list-group-item h6 {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.list-group-item small {
    font-size: 0.75rem;
}

.row.g-2 > * {
    padding-right: 0.25rem;
    padding-left: 0.25rem;
}

@media (max-width: 768px) {
    .stats-card {
        height: auto;
        min-height: 100px;
    }
    
    .quick-action-btn {
        height: 80px;
        margin-bottom: 0.5rem;
    }
    
    .dashboard-card .card-body {
        padding: 0.75rem;
    }
}
</style>
@endpush
</style>
@endpush

<div class="container-fluid">
    
    <!-- Header Dashboard - Ottimizzato -->
    <div class="row mb-3">
        <div class="col-12">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <h1 class="h4 mb-1 text-primary">
                        <i class="fas fa-tachometer-alt me-2"></i>Dashboard Amministratore
                    </h1>
                    <p class="text-muted mb-0 small">
                        @auth
                            Benvenuto, <strong>{{ Auth::user()->name }}</strong> nel pannello di gestione condominiale
                        @endauth
                    </p>
                </div>
                <div class="text-muted text-end small">
                    <i class="fas fa-clock me-1"></i>{{ date('d/m/Y H:i') }}
                </div>
            </div>
        </div>
    </div>

    <!-- Alert Notifiche -->
    <div class="row mb-4">
        <div class="col-md-6">
            <x-widgets.alert-box 
                type="danger" 
                title="Tickets Urgenti!" 
                message="1 ticket richiede attenzione immediata"
                action-text="Visualizza Urgenti"
                action-url="#"
                dismissible="true"
            />
        </div>
        <div class="col-md-6">
            <x-widgets.alert-box 
                type="info" 
                title="Notifiche Sistema" 
                message="Sistema di backup completato con successo"
                action-text="Visualizza Log"
                action-url="#"
                dismissible="true"
            />
        </div>
    </div>

    <!-- Stats Cards - Cliccabili per navigazione -->
    <div class="row mb-4" id="stats-cards">
        @if(App\Helpers\MenuHelper::canUserAccessMenu('stabili'))
        <div class="col-md-3 mb-3">
            <div class="card bg-primary text-white stats-card dashboard-card clickable-card" 
                 data-section="stabili" style="cursor: pointer;">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h6 class="card-title mb-1 small">
                                <i class="fas fa-building me-2"></i>Stabili Totali
                            </h6>
                            <h3 class="mb-0">{{ \App\Models\Stabile::count() ?? 0 }}</h3>
                            <small class="opacity-75">Stabili gestiti</small>
                        </div>
                        <div class="ms-3">
                            <i class="fas fa-arrow-right"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif
        
        @if(App\Helpers\MenuHelper::canUserAccessMenu('condomini'))
        <div class="col-md-3 mb-3">
            <div class="card bg-success text-white stats-card dashboard-card clickable-card" 
                 data-section="condomini" style="cursor: pointer;">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h6 class="card-title mb-1 small">
                                <i class="fas fa-users me-2"></i>Condomini
                            </h6>
                            <h3 class="mb-0">0</h3>
                            <small class="opacity-75">Condomini registrati</small>
                        </div>
                        <div class="ms-3">
                            <i class="fas fa-arrow-right"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif
        
        @if(App\Helpers\MenuHelper::canUserAccessMenu('tickets'))
        <div class="col-md-3 mb-3">
            <div class="card bg-warning text-white stats-card dashboard-card clickable-card" 
                 data-section="tickets" style="cursor: pointer;">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h6 class="card-title mb-1 small">
                                <i class="fas fa-ticket-simple me-2"></i>Tickets Aperti
                            </h6>
                            <h3 class="mb-0">3</h3>
                            <small class="opacity-75">Richieste in corso</small>
                        </div>
                        <div class="ms-3">
                            <i class="fas fa-arrow-right"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif
        
        @if(App\Helpers\MenuHelper::canUserAccessMenu('contabilita'))
        <div class="col-md-3 mb-3">
            <div class="card bg-info text-white stats-card dashboard-card clickable-card" 
                 data-section="contabilita" style="cursor: pointer;">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h6 class="card-title mb-1 small">
                                <i class="fas fa-calculator me-2"></i>Contabilità
                            </h6>
                            <h3 class="mb-0">0</h3>
                            <small class="opacity-75">Bilanci attivi</small>
                        </div>
                        <div class="ms-3">
                            <i class="fas fa-arrow-right"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif
    </div>
            <div class="card bg-info text-white stats-card dashboard-card">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h6 class="card-title mb-1">
                                <i class="fas fa-euro-sign me-2"></i>Rate Scadute
                            </h6>
                            <h3 class="mb-0">€ 1.240</h3>
                            <small class="opacity-75">Da incassare</small>
                        </div>
                        <div class="ms-3">
                            <i class="fas fa-arrow-right"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif
    </div>

    <!-- Quick Actions -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card dashboard-card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-bolt text-warning me-2"></i>Azioni Rapide
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row g-2">
                        @if(App\Helpers\MenuHelper::canUserAccessMenu('condomini'))
                        <div class="col-md-2 col-6">
                            <button class="btn btn-outline-primary w-100 quick-action-btn">
                                <i class="fas fa-plus-circle mb-2"></i>
                                <small>Nuovo Condomino</small>
                            </button>
                        </div>
                        @endif
                        
                        @if(App\Helpers\MenuHelper::canUserAccessMenu('contabilita'))
                        <div class="col-md-2 col-6">
                            <button class="btn btn-outline-success w-100 quick-action-btn">
                                <i class="fas fa-receipt mb-2"></i>
                                <small>Emetti Rate</small>
                            </button>
                        </div>
                        @endif
                        
                        @if(App\Helpers\MenuHelper::canUserAccessMenu('comunicazioni'))
                        <div class="col-md-2 col-6">
                            <button class="btn btn-outline-info w-100 quick-action-btn">
                                <i class="fas fa-envelope mb-2"></i>
                                <small>Invia Email</small>
                            </button>
                        </div>
                        @endif
                        
                        @if(App\Helpers\MenuHelper::canUserAccessMenu('contabilita'))
                        <div class="col-md-2 col-6">
                            <button class="btn btn-outline-warning w-100 quick-action-btn">
                                <i class="fas fa-chart-bar mb-2"></i>
                                <small>Report</small>
                            </button>
                        </div>
                        @endif
                        
                        @if(App\Helpers\MenuHelper::canUserAccessMenu('impostazioni'))
                        <div class="col-md-2 col-6">
                            <button class="btn btn-outline-secondary w-100 quick-action-btn">
                                <i class="fas fa-database mb-2"></i>
                                <small>Backup</small>
                            </button>
                        </div>
                        @endif
                        
                        @if(App\Helpers\MenuHelper::canUserAccessMenu('tickets'))
                        <div class="col-md-2 col-6">
                            <button class="btn btn-outline-danger w-100 quick-action-btn">
                                <i class="fas fa-exclamation-triangle mb-2"></i>
                                <small>Urgenze</small>
                            </button>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Notifiche Recenti -->
    <div class="row">
        <div class="col-md-6 mb-4">
            <div class="card dashboard-card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-bell text-info me-2"></i>Notifiche Recenti
                    </h5>
                </div>
                <div class="card-body">
                    <div class="list-group list-group-flush">
                        <div class="list-group-item d-flex align-items-center">
                            <i class="fas fa-exclamation-circle text-danger me-3"></i>
                            <div>
                                <h6 class="mb-1">Ticket Urgente #1234</h6>
                                <small class="text-muted">Ascensore bloccato - Stabile A</small>
                            </div>
                            <small class="text-muted ms-auto">2 min fa</small>
                        </div>
                        <div class="list-group-item d-flex align-items-center">
                            <i class="fas fa-euro-sign text-warning me-3"></i>
                            <div>
                                <h6 class="mb-1">Rata in scadenza</h6>
                                <small class="text-muted">Condomino Rossi - €450</small>
                            </div>
                            <small class="text-muted ms-auto">1 ora fa</small>
                        </div>
                        <div class="list-group-item d-flex align-items-center">
                            <i class="fas fa-check-circle text-success me-3"></i>
                            <div>
                                <h6 class="mb-1">Backup completato</h6>
                                <small class="text-muted">Database salvato con successo</small>
                            </div>
                            <small class="text-muted ms-auto">3 ore fa</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-6 mb-4">
            <div class="card dashboard-card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-calendar-alt text-primary me-2"></i>Prossimi Appuntamenti
                    </h5>
                </div>
                <div class="card-body">
                    <div class="list-group list-group-flush">
                        <div class="list-group-item d-flex align-items-center">
                            <i class="fas fa-users text-primary me-3"></i>
                            <div>
                                <h6 class="mb-1">Assemblea Condominio A</h6>
                                <small class="text-muted">Sala riunioni - Via Roma 123</small>
                            </div>
                            <small class="text-muted ms-auto">Domani 15:00</small>
                        </div>
                        <div class="list-group-item d-flex align-items-center">
                            <i class="fas fa-tools text-info me-3"></i>
                            <div>
                                <h6 class="mb-1">Manutenzione Ascensore</h6>
                                <small class="text-muted">Tecnico XYZ - Stabile B</small>
                            </div>
                            <small class="text-muted ms-auto">Ven 10:00</small>
                        </div>
                        <div class="list-group-item d-flex align-items-center">
                            <i class="fas fa-envelope text-success me-3"></i>
                            <div>
                                <h6 class="mb-1">Invio comunicazione rate</h6>
                                <small class="text-muted">Tutti i condomini</small>
                            </div>
                            <small class="text-muted ms-auto">Lun 09:00</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Area Contenuto Dinamico -->
    <div class="row" id="dynamic-content-area" style="display: none;">
        <div class="col-12">
            <div class="card dashboard-card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0" id="dynamic-content-title">
                        <i class="fas fa-home me-2"></i>Contenuto Sezione
                    </h5>
                    <button type="button" class="btn btn-sm btn-outline-secondary" id="back-to-dashboard">
                        <i class="fas fa-arrow-left me-2"></i>Torna alla Dashboard
                    </button>
                </div>
                <div class="card-body" id="dynamic-content-body">
                    <!-- Il contenuto verrà caricato qui dinamicamente -->
                </div>
            </div>
        </div>
    </div>

</div>

@push('scripts')
<script>
$(document).ready(function() {
    // Gestione click su cards statistiche
    $('.clickable-card').on('click', function() {
        const section = $(this).data('section');
        loadSection(section);
    });

    // Gestione pulsante "Torna alla Dashboard"
    $('#back-to-dashboard').on('click', function() {
        showDashboard();
    });

    // Funzione per caricare una sezione
    function loadSection(section) {
        $('#dynamic-content-area').show();
        $('.container-fluid').children().not('#dynamic-content-area').hide();
        
        // Aggiorna il titolo
        let title = '';
        let icon = '';
        switch(section) {
            case 'stabili':
                title = 'Gestione Stabili';
                icon = 'fas fa-building';
                loadStabiliContent();
                break;
            case 'condomini':
                title = 'Gestione Condomini';
                icon = 'fas fa-users';
                loadCondominiContent();
                break;
            case 'tickets':
                title = 'Gestione Tickets';
                icon = 'fas fa-ticket-simple';
                loadTicketsContent();
                break;
            case 'contabilita':
                title = 'Gestione Contabilità';
                icon = 'fas fa-calculator';
                loadContabilitaContent();
                break;
        }
        
        $('#dynamic-content-title').html(`<i class="${icon} me-2"></i>${title}`);
    }

    // Funzione per tornare alla dashboard
    function showDashboard() {
        $('#dynamic-content-area').hide();
        $('.container-fluid').children().not('#dynamic-content-area').show();
    }

    // Funzioni per caricare contenuti specifici
    function loadStabiliContent() {
        const content = `
            <div class="row mb-3">
                <div class="col-md-6">
                    <h6 class="text-muted">Panoramica Stabili</h6>
                </div>
                <div class="col-md-6 text-end">
                    <button type="button" class="btn btn-primary btn-sm" onclick="showCreateStabileForm()">
                        <i class="fas fa-plus me-2"></i>Nuovo Stabile
                    </button>
                </div>
            </div>
            
            <div class="row">
                <div class="col-12">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Denominazione</th>
                                    <th>Codice</th>
                                    <th>Indirizzo</th>
                                    <th>Condomini</th>
                                    <th>Azioni</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td colspan="5" class="text-center text-muted">
                                        <i class="fas fa-building fa-2x mb-2"></i><br>
                                        Nessuno stabile ancora registrato.<br>
                                        <button type="button" class="btn btn-primary btn-sm mt-2" onclick="showCreateStabileForm()">
                                            Crea il primo stabile
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        `;
        $('#dynamic-content-body').html(content);
    }

    function loadCondominiContent() {
        const content = `
            <div class="row mb-3">
                <div class="col-md-6">
                    <h6 class="text-muted">Panoramica Condomini</h6>
                </div>
                <div class="col-md-6 text-end">
                    <button type="button" class="btn btn-success btn-sm">
                        <i class="fas fa-plus me-2"></i>Nuovo Condomino
                    </button>
                </div>
            </div>
            
            <div class="alert alert-info">
                <i class="fas fa-info-circle me-2"></i>
                Sezione Condomini in sviluppo. Per ora gestisci i condomini tramite la sezione Stabili.
            </div>
        `;
        $('#dynamic-content-body').html(content);
    }

    function loadTicketsContent() {
        const content = `
            <div class="row mb-3">
                <div class="col-md-6">
                    <h6 class="text-muted">Tickets e Richieste</h6>
                </div>
                <div class="col-md-6 text-end">
                    <button type="button" class="btn btn-warning btn-sm">
                        <i class="fas fa-plus me-2"></i>Nuovo Ticket
                    </button>
                </div>
            </div>
            
            <div class="alert alert-warning">
                <i class="fas fa-exclamation-triangle me-2"></i>
                3 tickets urgenti richiedono attenzione immediata.
            </div>
        `;
        $('#dynamic-content-body').html(content);
    }

    function loadContabilitaContent() {
        const content = `
            <div class="row mb-3">
                <div class="col-md-6">
                    <h6 class="text-muted">Gestione Contabilità</h6>
                </div>
                <div class="col-md-6 text-end">
                    <button type="button" class="btn btn-info btn-sm">
                        <i class="fas fa-plus me-2"></i>Nuovo Bilancio
                    </button>
                </div>
            </div>
            
            <div class="alert alert-info">
                <i class="fas fa-calculator me-2"></i>
                Sezione Contabilità in sviluppo.
            </div>
        `;
        $('#dynamic-content-body').html(content);
    }

    // Funzioni globali per navigazione unificata
    window.loadDashboardSection = function(section) {
        loadSection(section);
    };
    
    // Funzione globale per mostrare form creazione stabile
    window.showCreateStabileForm = function() {
        // Aggiorna il titolo
        $('#dynamic-content-title').html('<i class="fas fa-plus me-2"></i>Nuovo Stabile');
        
        // Carica il form di creazione stabile via AJAX
        $.get('{{ route("admin.stabili.create.form") }}', function(data) {
            $('#dynamic-content-body').html(data);
            
            // Mostra l'area dinamica
            $('#dynamic-content-area').show();
            $('.container-fluid').children().not('#dynamic-content-area').hide();
            
            // Reinizializza gli script del form se necessario
            if (typeof initializeStabileForm === 'function') {
                initializeStabileForm();
            }
        }).fail(function() {
            $('#dynamic-content-body').html(`
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    Errore nel caricamento del form. <a href="{{ route('admin.stabili.create') }}" target="_blank">Apri in nuova finestra</a>
                </div>
            `);
        });
    };
});
</script>
@endpush

</x-layout.universal>