@section('navbar_sidebar_toggle')
<!-- The navbar_sidebar_toggle is entirely empty since the logo handles it now on both Mobile and Desktop -->
@endsection

@push('modals')
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasMenu" aria-labelledby="offcanvasMenuLabel" style="width: 280px; @if(session('theme')=='dark') background-color: var(--bs-dark); color: white; @endif">
  <div class="offcanvas-header border-bottom">
    <h5 class="offcanvas-title" id="offcanvasMenuLabel" style="display: flex; align-items: center; gap: 10px;">
        <img src="{{ asset('img/logo_nav.png') }}" alt="" style="height: 30px;"> SanpaNet
    </h5>
    <button type="button" class="btn-close @if(session('theme')=='dark') btn-close-white @endif" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <!-- Main Home Link inside Sidebar -->
    <ul class="navbar-nav mb-3 px-2">
        <li class="nav-item">
            <a class="nav-link rounded px-3 py-2 fw-bold text-primary bg-primary bg-opacity-10 d-flex align-items-center gap-2" href="{{ route('/') }}">
                <i class="bi bi-house-door-fill fs-5"></i>
                <span>Inicio / Dashboard</span>
            </a>
        </li>
        <li class="nav-item mt-2">
            <a class="nav-link rounded px-3 py-2 fw-bold text-info bg-info bg-opacity-10 d-flex align-items-center gap-2" href="{{ route('MonitorDashboard') }}">
                <i class="bi bi-activity fs-5"></i>
                <span>Monitor de Procesos</span>
            </a>
        </li>
    </ul>

    <h6 class="text-uppercase text-muted small fw-bold mb-3 px-2 mt-2">Gestión y Módulos</h6>
    <ul class="navbar-nav justify-content-end flex-grow-1 px-2">
        @if(session('modulos_habilitados'))
            @foreach (session('modulos_habilitados') as $module)
                @if ($module['id_sector'] != 1)
                    <li class="nav-item mb-2" style="font-size: 1.05rem;">
                        <a class="nav-link rounded px-3 py-2
                            @if(session('theme')=='dark') text-white @else text-dark @endif
                            @if(session('modulo_activo') == $module['nombre'] ) active bg-primary text-white shadow-sm fw-medium @else @if(session('theme')=='dark') bg-dark @else bg-light @endif @endif" 
                            href="{{ route($module['route']) }}" style="display: flex; align-items: center; gap: 12px; transition: all 0.2s;">
                            <i class="bi bi-grid-1x2 @if(session('modulo_activo') == $module['nombre'] ) text-white @else text-primary @endif fs-5"></i>
                            <span>{{ $module['nombre'] }}</span>
                        </a>
                    </li>
                @endif
            @endforeach
        @endif
    </ul>
  </div>
</div>

<style>
/* Add hover effect for links */
#offcanvasMenu .nav-link:hover {
    filter: brightness(0.95);
    transform: translateX(3px);
}
@if(session('theme')=='dark')
#offcanvasMenu .nav-link:hover {
    background-color: rgba(255,255,255,0.05) !important;
}
@endif
</style>
@endpush