{{--
    Dashboard Moderna NetGesCon
    Layout pulito con stats, alerts e azioni rapide
--}}

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

<div class="container-fluid">
    
    <!-- Header Dashboard -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <h1 class="h3 mb-1">
                        <i class="fas fa-tachometer-alt text-primary me-2"></i>
                        Dashboard Amministratore
                    </h1>
                    <p class="text-muted mb-0">Benvenuto nel pannello di gestione condominiale</p>
                </div>
                <div class="text-muted">
                    @auth
                        Benvenuto, <strong>{{ Auth::user()->name }}</strong><br>
                        <small>{{ date('d/m/Y H:i') }}</small>
                    @endauth
                </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 -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card bg-primary text-white">
                <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-building me-2"></i>Stabili Totali
                            </h6>
                            <h3 class="mb-0">12</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>
        
        <div class="col-md-3">
            <div class="card bg-success text-white">
                <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-users me-2"></i>Condomini
                            </h6>
                            <h3 class="mb-0">248</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>
        
        <div class="col-md-3">
            <div class="card bg-warning text-white">
                <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-ticket-simple me-2"></i>Tickets Aperti
                            </h6>
                            <h3 class="mb-0">7</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>
        
        <div class="col-md-3">
            <div class="card bg-info text-white">
                <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>
    </div>

    <!-- Quick Actions -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="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">
                        <div class="col-md-2">
                            <button class="btn btn-outline-primary w-100 d-flex flex-column align-items-center py-3">
                                <i class="fas fa-plus-circle mb-2"></i>
                                <small>Nuovo Condomino</small>
                            </button>
                        </div>
                        <div class="col-md-2">
                            <button class="btn btn-outline-success w-100 d-flex flex-column align-items-center py-3">
                                <i class="fas fa-receipt mb-2"></i>
                                <small>Emetti Rate</small>
                            </button>
                        </div>
                        <div class="col-md-2">
                            <button class="btn btn-outline-info w-100 d-flex flex-column align-items-center py-3">
                                <i class="fas fa-envelope mb-2"></i>
                                <small>Invia Email</small>
                            </button>
                        </div>
                        <div class="col-md-2">
                            <button class="btn btn-outline-warning w-100 d-flex flex-column align-items-center py-3">
                                <i class="fas fa-chart-bar mb-2"></i>
                                <small>Report</small>
                            </button>
                        </div>
                        <div class="col-md-2">
                            <button class="btn btn-outline-secondary w-100 d-flex flex-column align-items-center py-3">
                                <i class="fas fa-database mb-2"></i>
                                <small>Backup</small>
                            </button>
                        </div>
                        <div class="col-md-2">
                            <button class="btn btn-outline-danger w-100 d-flex flex-column align-items-center py-3">
                                <i class="fas fa-exclamation-triangle mb-2"></i>
                                <small>Urgenze</small>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

</x-layout.universal>