{{-- 
========================================
SIDEBAR NETGESCON CON SUBMENU E PERMESSI
========================================
--}}

@props([
    'stabileAttivo' => 'Condominio Milano Centro',
    'userRoles' => ['amministratore']
])

{{-- CSS per sidebar compatta --}}
<style>
.netgescon-sidebar {
    width: 280px;
    min-width: 280px;
    max-width: 280px;
    font-size: 0.875rem;
}

.netgescon-sidebar .nav-link {
    padding: 0.375rem 0.5rem !important;
    font-size: 0.8rem;
    border-radius: 6px;
    margin-bottom: 2px;
}

.netgescon-sidebar .nav-link:hover {
    background-color: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
}

.netgescon-sidebar .nav-link.active {
    background-color: #0d6efd;
    color: white;
}

.netgescon-sidebar .small {
    font-size: 0.75rem !important;
}

.card-sm .card-body {
    padding: 0.5rem !important;
}

.card-sm .card-title {
    font-size: 0.8rem !important;
    margin-bottom: 0.25rem !important;
}

.badge {
    font-size: 0.6rem !important;
    padding: 0.2rem 0.4rem !important;
}
</style>

<div class="netgescon-sidebar d-flex flex-column h-100 bg-light border-end" id="netgesconSidebar">
    
    {{-- Header Sidebar Essenziale --}}
    <div class="p-2 border-bottom bg-light">
        {{-- Logo NetGesCon --}}
        <div class="text-center mb-2">
            <i class="fas fa-building text-primary me-1"></i>
            <span class="text-primary fw-bold small">NETGESCON</span>
        </div>
        
        {{-- Data e Ora in tempo reale --}}
        <div class="text-center">
            <small class="text-muted" id="datetime-display">
                <i class="fas fa-clock me-1"></i>
                <span id="current-datetime">{{ date('d/m/Y H:i') }}</span>
            </small>
        </div>
    </div>

    {{-- Box Notizie --}}
    <div class="p-2 border-bottom">
        <div class="card card-sm bg-info text-white">
            <div class="card-body p-2">
                <h6 class="card-title mb-1 small">
                    <i class="fas fa-bell me-1"></i>Notizie
                </h6>
                <div class="small">
                    <div class="mb-1">• 3 tickets urgenti da risolvere</div>
                    <div class="mb-1">• Backup completato con successo</div>
                    <div>• Rate scadute: €1.240</div>
                </div>
            </div>
        </div>
    </div>

    {{-- Menu Navigation Compatto --}}
    <nav class="sidebar-nav flex-fill overflow-auto p-1" role="navigation">
        <ul class="nav nav-pills flex-column">
            
            {{-- Dashboard --}}
            @if(App\Helpers\MenuHelper::canUserAccessMenu('dashboard'))
            <li class="nav-item mb-1">
                <a class="nav-link d-flex align-items-center text-dark py-2 px-2" href="{{ route('dashboard') }}">
                    <i class="fas fa-tachometer-alt me-2 small"></i>
                    <span class="small">Dashboard</span>
                </a>
            </li>
            @endif

            {{-- Stabili --}}
            @if(App\Helpers\MenuHelper::canUserAccessMenu('stabili'))
            <li class="nav-item mb-1">
                <a class="nav-link d-flex align-items-center justify-content-between text-dark py-2 px-2" 
                   data-bs-toggle="collapse" href="#stabiliMenu" role="button">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-building me-2 small"></i>
                        <span class="small">Stabili</span>
                    </div>
                    <i class="fas fa-chevron-down small"></i>
                </a>
                <div class="collapse ms-2" id="stabiliMenu">
                    <ul class="nav nav-pills flex-column">
                        <li class="nav-item">
                            <a class="nav-link text-muted py-1 px-2" href="{{ route('admin.stabili.index') }}">
                                <i class="fas fa-list me-2 small"></i>
                                <span class="small">Lista Stabili</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-muted py-1 px-2" href="{{ route('admin.stabili.create') }}">
                                <i class="fas fa-plus me-2 small"></i>
                                <span class="small">Nuovo Stabile</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </li>
            @endif

            {{-- Condomini --}}
            @if(App\Helpers\MenuHelper::canUserAccessMenu('condomini'))
            <li class="nav-item mb-1">
                <a class="nav-link d-flex align-items-center justify-content-between text-dark py-2 px-2" 
                   data-bs-toggle="collapse" href="#condominiMenu" role="button">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-users me-2 small"></i>
                        <span class="small">Condomini</span>
                    </div>
                    <i class="fas fa-chevron-down small"></i>
                </a>
                <div class="collapse ms-2" id="condominiMenu">
                    <ul class="nav nav-pills flex-column">
                        <li class="nav-item">
                            <a class="nav-link text-muted py-1 px-2" href="{{ route('admin.condomini.index') }}">
                                <i class="fas fa-list me-2 small"></i>
                                <span class="small">Lista Condomini</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-muted py-1 px-2" href="{{ route('admin.condomini.create') }}">
                                <i class="fas fa-user-plus me-2 small"></i>
                                <span class="small">Nuovo Condomino</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </li>
            @endif

            {{-- Contabilità --}}
            @if(App\Helpers\MenuHelper::canUserAccessMenu('contabilita'))
            <li class="nav-item mb-1">
                <a class="nav-link d-flex align-items-center justify-content-between text-dark py-2 px-2" 
                   data-bs-toggle="collapse" href="#contabilitaMenu" role="button">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-calculator me-2 small"></i>
                        <span class="small">Contabilità</span>
                    </div>
                    <i class="fas fa-chevron-down small"></i>
                </a>
                <div class="collapse ms-2" id="contabilitaMenu">
                    <ul class="nav nav-pills flex-column">
                        <li class="nav-item">
                            <a class="nav-link text-muted py-1 px-2" href="{{ route('admin.contabilita.index') }}">
                                <i class="fas fa-chart-line me-2 small"></i>
                                <span class="small">Dashboard Contabile</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </li>
            @endif

            {{-- Assemblee --}}
            @if(App\Helpers\MenuHelper::canUserAccessMenu('assemblee'))
            <li class="nav-item mb-1">
                <a class="nav-link d-flex align-items-center text-dark py-2 px-2" href="{{ route('admin.assemblee.index') }}">
                    <i class="fas fa-users-cog me-2 small"></i>
                    <span class="small">Assemblee</span>
                </a>
            </li>
            @endif

            {{-- Risorse Economiche --}}
            @if(App\Helpers\MenuHelper::canUserAccessMenu('risorse-economiche'))
            <li class="nav-item mb-1">
                <a class="nav-link d-flex align-items-center text-dark py-2 px-2" href="{{ route('admin.risorse-economiche.index') }}">
                    <i class="fas fa-coins me-2 small"></i>
                    <span class="small">Risorse Economiche</span>
                </a>
            </li>
            @endif

            {{-- Affitti --}}
            @if(App\Helpers\MenuHelper::canUserAccessMenu('affitti'))
            <li class="nav-item mb-1">
                <a class="nav-link d-flex align-items-center text-dark py-2 px-2" href="{{ route('admin.affitti.index') }}">
                    <i class="fas fa-key me-2 small"></i>
                    <span class="small">Affitti</span>
                </a>
            </li>
            @endif

            {{-- Fiscale --}}
            @if(App\Helpers\MenuHelper::canUserAccessMenu('fiscale'))
            <li class="nav-item mb-1">
                <a class="nav-link d-flex align-items-center text-dark py-2 px-2" href="{{ route('admin.fiscale.index') }}">
                    <i class="fas fa-receipt me-2 small"></i>
                    <span class="small">Fiscale</span>
                </a>
            </li>
            @endif

            {{-- Comunicazioni --}}
            @if(App\Helpers\MenuHelper::canUserAccessMenu('comunicazioni'))
            <li class="nav-item mb-1">
                <a class="nav-link d-flex align-items-center text-dark py-2 px-2" href="{{ route('admin.comunicazioni.index') }}">
                    <i class="fas fa-envelope me-2 small"></i>
                    <span class="small">Comunicazioni</span>
                </a>
            </li>
            @endif

            {{-- Pratiche --}}
            @if(App\Helpers\MenuHelper::canUserAccessMenu('pratiche'))
            <li class="nav-item mb-1">
                <a class="nav-link d-flex align-items-center text-dark py-2 px-2" href="{{ route('admin.pratiche.index') }}">
                    <i class="fas fa-folder me-2 small"></i>
                    <span class="small">Pratiche</span>
                </a>
            </li>
            @endif

            {{-- Consumi --}}
            @if(App\Helpers\MenuHelper::canUserAccessMenu('consumi'))
            <li class="nav-item mb-1">
                <a class="nav-link d-flex align-items-center text-dark py-2 px-2" href="{{ route('admin.consumi.index') }}">
                    <i class="fas fa-bolt me-2 small"></i>
                    <span class="small">Consumi</span>
                </a>
            </li>
            @endif

            {{-- Tickets --}}
            @if(App\Helpers\MenuHelper::canUserAccessMenu('tickets'))
            <li class="nav-item mb-1">
                <a class="nav-link d-flex align-items-center text-dark py-2 px-2" href="{{ route('admin.tickets.index') }}">
                    <i class="fas fa-ticket-alt me-2 small"></i>
                    <span class="small">Tickets</span>
                    <span class="badge bg-danger ms-auto small">3</span>
                </a>
            </li>
            @endif

            {{-- Impostazioni (solo admin) --}}
            @if(App\Helpers\MenuHelper::canUserAccessMenu('impostazioni'))
            <li class="nav-item mb-1">
                <a class="nav-link d-flex align-items-center text-dark py-2 px-2" href="{{ route('admin.impostazioni.index') }}">
                    <i class="fas fa-cog me-2 small"></i>
                    <span class="small">Impostazioni</span>
                </a>
            </li>
            @endif

        </ul>
    </nav>

    {{-- Footer --}}
    @include('components.menu.sections.footer')
    
</div>

{{-- CSS per sidebar --}}
@push('styles')
<style>
/* Sidebar moderna con gradiente */
.netgescon-sidebar {
    background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
    box-shadow: 2px 0 8px rgba(0,0,0,0.1);
}

/* Header sidebar con effetto */
.netgescon-sidebar .border-bottom {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    border-radius: 0 0 15px 15px;
    color: white !important;
    margin: -12px -12px 12px -12px;
    padding: 1rem !important;
}

.netgescon-sidebar .border-bottom * {
    color: white !important;
}

.netgescon-sidebar .bg-primary {
    background: rgba(255,255,255,0.2) !important;
    border: 1px solid rgba(255,255,255,0.3);
}

/* Sidebar scrollbar moderna */
.sidebar-nav {
    scrollbar-width: thin;
    scrollbar-color: #007bff #f8f9fa;
}

.sidebar-nav::-webkit-scrollbar {
    width: 4px;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: #007bff;
    border-radius: 2px;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: #0056b3;
}

/* Menu items moderni */
.nav-pills .nav-link {
    border-radius: 10px;
    margin: 3px 0;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
}

.nav-pills .nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.nav-pills .nav-link:hover::before {
    left: 100%;
}

.nav-pills .nav-link:hover {
    background-color: #e7f3ff;
    border-color: #007bff;
    transform: translateX(5px);
    color: #007bff;
    box-shadow: 0 4px 12px rgba(0,123,255,0.2);
}

.nav-pills .nav-link.active {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(0,123,255,0.4);
    transform: translateX(3px);
}

/* Submenu con indentazione */
.collapse .nav-link {
    background-color: rgba(0, 123, 255, 0.05);
    border-left: 3px solid transparent;
    margin-left: 15px;
    border-radius: 0 8px 8px 0;
}

.collapse .nav-link:hover {
    border-left-color: #007bff;
    background-color: rgba(0, 123, 255, 0.1);
}

/* Badge animati */
.badge {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
    100% { opacity: 1; transform: scale(1); }
}

/* Icone con colori */
.nav-link i {
    width: 20px;
    text-align: center;
    transition: transform 0.3s ease;
}

.nav-link:hover i {
    transform: scale(1.1);
}

/* Footer sidebar */
.netgescon-sidebar .border-top {
    background: rgba(0,0,0,0.05);
    margin: 0 -8px -8px -8px;
    padding: 0.75rem !important;
}

/* Responsive */
@media (max-width: 768px) {
    .netgescon-sidebar {
        box-shadow: none;
    }
}
</style>
@endpush

{{-- JavaScript per aggiornamento ora --}}
@push('scripts')
<script>
function updateDateTime() {
    const now = new Date();
    const formatted = now.toLocaleString('it-IT', {
        day: '2-digit',
        month: '2-digit', 
        year: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
    });
    document.getElementById('current-datetime').textContent = formatted;
}

// Aggiorna ogni minuto
setInterval(updateDateTime, 60000);
updateDateTime(); // Prima chiamata

// Accordion menu - chiudi altri quando uno si apre
document.addEventListener('DOMContentLoaded', function() {
    const toggles = document.querySelectorAll('[data-bs-toggle="collapse"]');
    
    toggles.forEach(toggle => {
        toggle.addEventListener('click', function() {
            const target = this.getAttribute('href');
            const otherCollapses = document.querySelectorAll('.collapse.show');
            
            // Chiudi tutti gli altri collapse aperti
            otherCollapses.forEach(collapse => {
                if ('#' + collapse.id !== target) {
                    const bsCollapse = new bootstrap.Collapse(collapse, {toggle: false});
                    bsCollapse.hide();
                }
            });
        });
    });
    
    // Animazione icone collapse
    document.addEventListener('shown.bs.collapse', function(e) {
        const trigger = document.querySelector(`[href="#${e.target.id}"]`);
        if (trigger) {
            const icon = trigger.querySelector('.fa-chevron-down');
            if (icon) icon.style.transform = 'rotate(180deg)';
        }
    });
    
    document.addEventListener('hidden.bs.collapse', function(e) {
        const trigger = document.querySelector(`[href="#${e.target.id}"]`);
        if (trigger) {
            const icon = trigger.querySelector('.fa-chevron-down');
            if (icon) icon.style.transform = 'rotate(0deg)';
        }
    });
});
</script>
@endpush