{{-- 
========================================
STATISTICHE FOOTER
========================================
Componente per mostrare statistiche sistema nel footer.
Solo per amministratori e super-admin.

Autore: NetGesCon Development Team
Data: 2024
========================================
--}}

@php
// Recupera statistiche di base (sostituire con logica reale)
$stats = [
    'users_online' => 12, // TODO: Implementare conteggio utenti online
    'total_stabili' => \App\Models\Stabile::count(),
    'tickets_aperti' => 5, // TODO: Implementare conteggio ticket aperti  
    'system_uptime' => '99.9%' // TODO: Implementare uptime reale
];
@endphp

<div class="footer-stats">
    <div class="row g-2">
        
        {{-- Utenti Online --}}
        <div class="col-6">
            <div class="stat-item">
                <div class="stat-icon text-success">
                    <i class="fas fa-users"></i>
                </div>
                <div class="stat-value fw-bold">{{ $stats['users_online'] }}</div>
                <div class="stat-label small text-muted">Online</div>
            </div>
        </div>
        
        {{-- Stabili Totali --}}
        <div class="col-6">
            <div class="stat-item">
                <div class="stat-icon text-primary">
                    <i class="fas fa-building"></i>
                </div>
                <div class="stat-value fw-bold">{{ $stats['total_stabili'] }}</div>
                <div class="stat-label small text-muted">Stabili</div>
            </div>
        </div>
        
        {{-- Tickets Aperti --}}
        <div class="col-6">
            <div class="stat-item">
                <div class="stat-icon text-warning">
                    <i class="fas fa-ticket-alt"></i>
                </div>
                <div class="stat-value fw-bold">{{ $stats['tickets_aperti'] }}</div>
                <div class="stat-label small text-muted">Tickets</div>
            </div>
        </div>
        
        {{-- Uptime Sistema --}}
        <div class="col-6">
            <div class="stat-item">
                <div class="stat-icon text-info">
                    <i class="fas fa-server"></i>
                </div>
                <div class="stat-value fw-bold small">{{ $stats['system_uptime'] }}</div>
                <div class="stat-label small text-muted">Uptime</div>
            </div>
        </div>
        
    </div>
</div>

{{-- CSS per statistiche --}}
@push('styles')
<style>
.footer-stats .stat-item {
    padding: 0.75rem 0.5rem;
    text-align: center;
    background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.05), rgba(var(--bs-info-rgb), 0.05));
    border-radius: 0.5rem;
    border: 1px solid rgba(var(--bs-primary-rgb), 0.1);
    transition: all 0.2s ease;
}

.footer-stats .stat-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.footer-stats .stat-icon {
    font-size: 1.2rem;
    margin-bottom: 0.25rem;
}

.footer-stats .stat-value {
    font-size: 1.1rem;
    line-height: 1;
    margin-bottom: 0.125rem;
}

.footer-stats .stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Tema scuro */
.dark .footer-stats .stat-item {
    background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.1), rgba(var(--bs-info-rgb), 0.1));
    border-color: rgba(var(--bs-primary-rgb), 0.2);
}

/* Responsive */
@media (max-width: 768px) {
    .footer-stats .stat-item {
        padding: 0.5rem;
    }
    
    .footer-stats .stat-icon {
        font-size: 1rem;
    }
    
    .footer-stats .stat-value {
        font-size: 1rem;
    }
    
    .footer-stats .stat-label {
        font-size: 0.65rem;
    }
}
</style>
@endpush

{{-- JavaScript per aggiornamento stats --}}
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Aggiorna statistiche ogni 30 secondi - Disabilitato (funzionalità in sviluppo)
    function updateFooterStats() {
        console.log('Footer stats API in sviluppo - funzionalità disabilitata');
        return; // Disabilita temporaneamente
    }
    
    // Prima chiamata dopo 5 secondi - Disabilitata
    // setTimeout(updateFooterStats, 5000);
    
    // Poi ogni 30 secondi - Disabilitato
    // setInterval(updateFooterStats, 30000);
    
    // Tooltip per le statistiche
    const statItems = document.querySelectorAll('.footer-stats .stat-item');
    statItems.forEach(item => {
        const label = item.querySelector('.stat-label').textContent;
        const value = item.querySelector('.stat-value').textContent;
        
        item.title = `${label}: ${value}`;
        
        // Aggiorna tooltip al cambio valore
        const observer = new MutationObserver(() => {
            const newValue = item.querySelector('.stat-value').textContent;
            item.title = `${label}: ${newValue}`;
        });
        
        observer.observe(item.querySelector('.stat-value'), {
            childList: true,
            characterData: true,
            subtree: true
        });
    });
});
</script>
@endpush