{{-- Sidebar --}}
<nav id="sidebar" aria-label="Navegación Principal">

    {{-- Cabecera del Sidebar --}}
    <div class="content-header">
        {{-- Logo --}}
        <a class="fw-semibold text-dual" href="{{ route('dashboard') }}">
            <span class="smini-visible">
                <i class="fa fa-globe-americas text-primary"></i>
            </span>
            <span class="smini-hide fs-5 tracking-wider">{{ config('app.name', 'Cosmos') }}</span>
        </a>
        {{-- END Logo --}}

        {{-- Acciones Rápidas --}}
        <div class="d-flex align-items-center gap-1">
            {{-- Modo Oscuro/Claro --}}
            <div class="dropdown">
                <button type="button" class="btn btn-sm btn-alt-secondary" id="sidebar-dark-mode-dropdown"
                    data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Cambiar tema">
                    <i class="far fa-fw fa-moon" data-dark-mode-icon></i>
                </button>
                <div class="dropdown-menu dropdown-menu-end smini-hide border-0"
                    aria-labelledby="sidebar-dark-mode-dropdown">
                    <button type="button" class="dropdown-item d-flex align-items-center gap-2" data-toggle="layout"
                        data-action="dark_mode_off">
                        <i class="far fa-sun fa-fw opacity-50"></i>
                        <span class="fs-sm fw-medium">Claro</span>
                    </button>
                    <button type="button" class="dropdown-item d-flex align-items-center gap-2" data-toggle="layout"
                        data-action="dark_mode_on">
                        <i class="far fa-moon fa-fw opacity-50"></i>
                        <span class="fs-sm fw-medium">Oscuro</span>
                    </button>
                    <button type="button" class="dropdown-item d-flex align-items-center gap-2" data-toggle="layout"
                        data-action="dark_mode_system">
                        <i class="fa fa-desktop fa-fw opacity-50"></i>
                        <span class="fs-sm fw-medium">Sistema</span>
                    </button>
                </div>
            </div>
            {{-- END Modo Oscuro/Claro --}}

            {{-- Temas de Color --}}
            <div class="dropdown">
                <button type="button" class="btn btn-sm btn-alt-secondary" id="sidebar-themes-dropdown"
                    data-bs-auto-close="outside" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                    title="Colores">
                    <i class="fa fa-fw fa-palette"></i>
                </button>
                <div class="dropdown-menu dropdown-menu-end fs-sm smini-hide border-0"
                    aria-labelledby="sidebar-themes-dropdown">
                    <button class="dropdown-item d-flex align-items-center justify-content-between fw-medium"
                        data-toggle="theme" data-theme="default">
                        <span>Predeterminado</span><i class="fa fa-circle text-primary"></i>
                    </button>
                    <button class="dropdown-item d-flex align-items-center justify-content-between fw-medium"
                        data-toggle="theme" data-theme="{{ asset('assets/css/themes/amethyst.min.css') }}">
                        <span>Amatista</span><i class="fa fa-circle text-amethyst"></i>
                    </button>
                    <button class="dropdown-item d-flex align-items-center justify-content-between fw-medium"
                        data-toggle="theme" data-theme="{{ asset('assets/css/themes/city.min.css') }}">
                        <span>Ciudad</span><i class="fa fa-circle text-city"></i>
                    </button>
                    <button class="dropdown-item d-flex align-items-center justify-content-between fw-medium"
                        data-toggle="theme" data-theme="{{ asset('assets/css/themes/flat.min.css') }}">
                        <span>Plano</span><i class="fa fa-circle text-flat"></i>
                    </button>
                    <button class="dropdown-item d-flex align-items-center justify-content-between fw-medium"
                        data-toggle="theme" data-theme="{{ asset('assets/css/themes/modern.min.css') }}">
                        <span>Moderno</span><i class="fa fa-circle text-modern"></i>
                    </button>
                    <div class="dropdown-divider d-dark-none"></div>
                    <a class="dropdown-item fw-medium d-dark-none" data-toggle="layout"
                        data-action="sidebar_style_light" href="javascript:void(0)">
                        <i class="fa fa-paint-brush me-2"></i>Sidebar Claro
                    </a>
                    <a class="dropdown-item fw-medium d-dark-none" data-toggle="layout" data-action="sidebar_style_dark"
                        href="javascript:void(0)">
                        <i class="fa fa-paint-roller me-2"></i>Sidebar Oscuro
                    </a>
                    <div class="dropdown-divider d-dark-none"></div>
                    <a class="dropdown-item fw-medium d-dark-none" data-toggle="layout" data-action="header_style_light"
                        href="javascript:void(0)">
                        <i class="fa fa-arrow-up me-2"></i>Encabezado Claro
                    </a>
                    <a class="dropdown-item fw-medium d-dark-none" data-toggle="layout" data-action="header_style_dark"
                        href="javascript:void(0)">
                        <i class="fa fa-arrow-down me-2"></i>Encabezado Oscuro
                    </a>
                </div>
            </div>
            {{-- END Temas de Color --}}

            {{-- Cerrar Sidebar (móvil) --}}
            <a class="d-lg-none btn btn-sm btn-alt-secondary ms-1" data-toggle="layout" data-action="sidebar_close"
                href="javascript:void(0)" title="Cerrar menú">
                <i class="fa fa-fw fa-times"></i>
            </a>
        </div>
        {{-- END Acciones Rápidas --}}
    </div>
    {{-- END Cabecera del Sidebar --}}

    {{-- Scroll del Sidebar --}}
    <div class="js-sidebar-scroll">
        <div class="content-side">
            <ul class="nav-main">

                {{-- ==================== PRINCIPAL ==================== --}}
                <li class="nav-main-heading">Principal</li>

                {{-- Dashboard --}}
                <li class="nav-main-item">
                    <a class="nav-main-link {{ request()->routeIs('dashboard') ? 'active' : '' }}"
                        href="{{ route('dashboard') }}">
                        <i class="nav-main-link-icon si si-speedometer"></i>
                        <span class="nav-main-link-name">Dashboard</span>
                        @if (request()->routeIs('dashboard'))
                            <span class="nav-main-link-badge badge bg-primary">Actual</span>
                        @endif
                    </a>
                </li>
                {{-- ==================== PRINCIPAL ================== --}}
                <li class="nav-main-heading">Principal</li>
                {{-- Urbanizaciones --}}
                <li class="nav-main-item">
                    <a class="nav-main-link {{ request()->routeIs('urbanizaciones.*') ? 'active' : '' }}"
                        href="{{ route('urbanizaciones.index') }}">
                        <i class="nav-main-link-icon fa fa-city"></i>
                        <span class="nav-main-link-name">Urbanizaciones</span>
                        @if (request()->routeIs('urbanizaciones.*'))
                            <span class="nav-main-link-badge badge bg-primary">Actual</span>
                        @endif
                    </a>
                </li>
                {{-- Distritos --}}
                <li class="nav-main-item">
                    <a class="nav-main-link {{ request()->routeIs('distritos.*') ? 'active' : '' }}"
                        href="{{ route('distritos.index') }}">
                        <i class="nav-main-link-icon fa fa-map-marker-alt"></i>
                        <span class="nav-main-link-name">Distritos</span>
                        @if (request()->routeIs('distritos.*'))
                            <span class="nav-main-link-badge badge bg-primary">Actual</span>
                        @endif
                    </a>
                </li>
                {{-- Lotes --}}
                <li class="nav-main-item">
                    <a class="nav-main-link {{ request()->routeIs('lotes.*') ? 'active' : '' }}"
                        href="{{ route('lotes.index') }}">
                        <i class="nav-main-link-icon fa fa-th-large"></i>
                        <span class="nav-main-link-name">Lotes</span>
                        @if (request()->routeIs('lotes.*'))
                            <span class="nav-main-link-badge badge bg-primary">Actual</span>
                        @endif
                    </a>
                </li>
                {{-- Clientes --}}
                <li class="nav-main-item">
                    <a class="nav-main-link {{ request()->routeIs('clientes.*') ? 'active' : '' }}"
                        href="{{ route('clientes.index') }}">
                        <i class="nav-main-link-icon fa fa-users"></i>
                        <span class="nav-main-link-name">Clientes</span>
                        @if (request()->routeIs('clientes.*'))
                            <span class="nav-main-link-badge badge bg-primary">Actual</span>
                        @endif
                    </a>
                </li>
                {{-- Contratos --}}
                <li class="nav-main-item">
                    <a class="nav-main-link {{ request()->routeIs('contratos.*') ? 'active' : '' }}"
                        href="{{ route('contratos.index') }}">
                        <i class="nav-main-link-icon fa fa-file-contract"></i>
                        <span class="nav-main-link-name">Contratos</span>
                        @if (request()->routeIs('contratos.*'))
                            <span class="nav-main-link-badge badge bg-primary">Actual</span>
                        @endif
                    </a>
                </li>
                {{-- Devoluciones --}}
                <li class="nav-main-item">
                    <a class="nav-main-link {{ request()->routeIs('devoluciones.*') ? 'active' : '' }}"
                        href="{{ route('devoluciones.index') }}">
                        <i class="nav-main-link-icon fa fa-undo"></i>
                        <span class="nav-main-link-name">Devoluciones</span>
                        @if (request()->routeIs('devoluciones.*'))
                            <span class="nav-main-link-badge badge bg-primary">Actual</span>
                        @endif

                    </a>
                </li>
                {{-- Recibos --}}
                <li class="nav-main-item">
                    <a class="nav-main-link {{ request()->routeIs('recibos.*') ? 'active' : '' }}"
                        href="{{ route('recibos.index') }}">
                        <i class="nav-main-link-icon fa fa-receipt"></i>
                        <span class="nav-main-link-name">Recibos</span>
                        @if (request()->routeIs('recibos.*'))
                            <span class="nav-main-link-badge badge bg-primary">Actual</span>
                        @endif
                    </a>
                </li>
                {{-- Ajustes --}}
                <li class="nav-main-item">
                    <a class="nav-main-link {{ request()->routeIs('ajustes.*') ? 'active' : '' }}"
                        href="{{ route('ajustes.index') }}">
                        <i class="nav-main-link-icon fa fa-cogs"></i>
                        <span class="nav-main-link-name">Ajustes</span>
                        @if (request()->routeIs('ajustes.*'))
                            <span class="nav-main-link-badge badge bg-primary">Actual</span>
                        @endif
                    </a>
                </li>
                {{-- Extractos --}}
                <li class="nav-main-item">
                    <a class="nav-main-link {{ request()->routeIs('extractos.*') ? 'active' : '' }}"
                        href="{{ route('extractos.index') }}">
                        <i class="nav-main-link-icon fa fa-file-alt"></i>
                        <span class="nav-main-link-name">Extractos</span>
                        @if (request()->routeIs('extractos.*'))
                            <span class="nav-main-link-badge badge bg-primary">Actual</span>
                        @endif
                    </a>
                </li>
                {{-- Notificaciones --}}
                <li class="nav-main-item">
                    <a class="nav-main-link {{ request()->routeIs('notificaciones.*') ? 'active' : '' }}"
                        href="{{ route('notificaciones.index') }}">
                        <i class="nav-main-link-icon fa fa-bell"></i>
                        <span class="nav-main-link-name">Notificaciones</span>
                        @if (request()->routeIs('notificaciones.*'))
                            <span class="nav-main-link-badge badge bg-primary">Actual</span>
                        @endif
                    </a>
                </li>

                {{-- ==================== REPORTES ==================== --}}
                @if(session('tipo_usuario') == 1)
                <li class="nav-main-heading">Reportes</li>

                {{-- Reporte de Contratos --}}
                <li class="nav-main-item">
                    <a class="nav-main-link {{ request()->routeIs('reportes.contratos.*') ? 'active' : '' }}"
                        href="{{ route('reportes.contratos.form') }}">
                        <i class="nav-main-link-icon fa fa-file-pdf"></i>
                        <span class="nav-main-link-name">Reporte de Contratos</span>
                        @if (request()->routeIs('reportes.contratos.*'))
                            <span class="nav-main-link-badge badge bg-primary">Actual</span>
                        @endif
                    </a>
                </li>
                {{-- Reporte de Lotes por Estado --}}
                <li class="nav-main-item">
                    <a class="nav-main-link {{ request()->routeIs('reportes.lotes-por-estado.*') ? 'active' : '' }}"
                        href="{{ route('reportes.lotes-por-estado.form') }}">
                        <i class="nav-main-link-icon fa fa-file-pdf"></i>
                        <span class="nav-main-link-name">Lotes por Estado</span>
                        @if (request()->routeIs('reportes.lotes-por-estado.*'))
                            <span class="nav-main-link-badge badge bg-primary">Actual</span>
                        @endif
                    </a>
                </li>
                {{-- Reporte de Resumen de Situación --}}
                <li class="nav-main-item">
                    <a class="nav-main-link {{ request()->routeIs('reportes.resumen-situacion.*') ? 'active' : '' }}"
                        href="{{ route('reportes.resumen-situacion') }}">
                        <i class="nav-main-link-icon fa fa-file-pdf"></i>
                        <span class="nav-main-link-name">Resumen de Situación</span>
                        @if (request()->routeIs('reportes.resumen-situacion.*'))
                            <span class="nav-main-link-badge badge bg-primary">Actual</span>
                        @endif
                    </a>
                </li>
                {{-- Reporte de Orden de tramite --}}
                <li class="nav-main-item">
                    <a class="nav-main-link {{ request()->routeIs('reportes.orden-tramite.*') ? 'active' : '' }}"
                        href="{{ route('reportes.orden-tramite.form') }}">
                        <i class="nav-main-link-icon fa fa-file-pdf"></i>
                        <span class="nav-main-link-name">Orden de Trámite</span>
                        @if (request()->routeIs('reportes.orden-tramite.*'))
                            <span class="nav-main-link-badge badge bg-primary">Actual</span>
                        @endif
                    </a>
                </li>
                {{-- Reporte de Notas de Entrega --}}
                <li class="nav-main-item">
                    <a class="nav-main-link {{ request()->routeIs('reportes.notas-entrega.*') ? 'active' : '' }}"
                        href="{{ route('reportes.notas-entrega') }}">
                        <i class="nav-main-link-icon fa fa-file-pdf"></i>
                        <span class="nav-main-link-name">Notas de Entrega</span>
                        @if (request()->routeIs('reportes.notas-entrega.*'))
                            <span class="nav-main-link-badge badge bg-primary">Actual</span>
                        @endif
                    </a>
                </li>
                {{-- Reporte de Estado de Cuentas (Saldo por Cobrar) --}}
                <li class="nav-main-item">
                    <a class="nav-main-link {{ request()->routeIs('reportes.saldo-por-cobrar.*') ? 'active' : '' }}"
                        href="{{ route('reportes.saldo-por-cobrar.form') }}">
                        <i class="nav-main-link-icon fa fa-file-pdf"></i>
                        <span class="nav-main-link-name">Estado de Cuentas</span>
                        @if (request()->routeIs('reportes.saldo-por-cobrar.*'))
                            <span class="nav-main-link-badge badge bg-primary">Actual</span>
                        @endif
                    </a>
                </li>
                {{-- reporte de recibos anulados  --}}
                <li class="nav-main-item">
                    <a class="nav-main-link {{ request()->routeIs('reportes.recibos-anulados.*') ? 'active' : '' }}"
                        href="{{ route('reportes.recibos-anulados') }}">
                        <i class="nav-main-link-icon fa fa-file-pdf"></i>
                        <span class="nav-main-link-name">Recibos Anulados</span>
                        @if (request()->routeIs('reportes.recibos-anulados.*'))
                            <span class="nav-main-link-badge badge bg-primary">Actual</span>
                        @endif

                    </a>
                </li>
                {{-- Reporte de Seguimiento de Usuarios --}}
                <li class="nav-main-item">
                    <a class="nav-main-link {{ request()->routeIs('reportes.seguimiento.*') ? 'active' : '' }}"
                        href="{{ route('reportes.seguimiento.form') }}">
                        <i class="nav-main-link-icon fa fa-file-pdf"></i>
                        <span class="nav-main-link-name">Seguimiento de Usuarios</span>
                        @if (request()->routeIs('reportes.seguimiento.*'))
                            <span class="nav-main-link-badge badge bg-primary">Actual</span>
                        @endif
                    </a>
                </li>
                {{-- Reporte Diario de Caja --}}
                <li class="nav-main-item">
                    <a class="nav-main-link {{ request()->routeIs('reportes.reporte-diario.*') ? 'active' : '' }}"
                        href="{{ route('reportes.reporte-diario.form') }}">
                        <i class="nav-main-link-icon fa fa-file-pdf"></i>
                        <span class="nav-main-link-name">Reporte Diario de Caja</span>
                        @if (request()->routeIs('reportes.reporte-diario.*'))
                            <span class="nav-main-link-badge badge bg-primary">Actual</span>
                        @endif
                    </a>
                </li>
                {{-- Reporte de Estados de Lotes por Sector --}}
                <li class="nav-main-item">
                    <a class="nav-main-link {{ request()->routeIs('reportes.estados-sector.*') ? 'active' : '' }}"
                        href="{{ route('reportes.estados-sector') }}">
                        <i class="nav-main-link-icon fa fa-file-pdf"></i>
                        <span class="nav-main-link-name">Estados de Lotes por Sector</span>
                        @if (request()->routeIs('reportes.estados-sector.*'))
                            <span class="nav-main-link-badge badge bg-primary">Actual</span>
                        @endif

                    </a>
                </li>
                @endif

                {{-- =============== TRAMITES =============== --}}
                <li class="nav-main-heading">Trámites</li>
                {{-- Autorizaciones --}}
                <li class="nav-main-item">
                    <a class="nav-main-link {{ request()->routeIs('autorizaciones.*') ? 'active' : '' }}"
                        href="{{ route('autorizaciones.index') }}">
                        <i class="nav-main-link-icon fa fa-check"></i>
                        <span class="nav-main-link-name">Autorizaciones</span>
                        @if (request()->routeIs('autorizaciones.*'))
                            <span class="nav-main-link-badge badge bg-primary">Actual</span>
                        @endif
                    </a>
                </li>
                {{-- Notas de Entrega --}}
                <li class="nav-main-item">
                    <a class="nav-main-link {{ request()->routeIs('notas.*') ? 'active' : '' }}"
                        href="{{ route('notas.index') }}">
                        <i class="nav-main-link-icon fa fa-file-alt"></i>
                        <span class="nav-main-link-name">Notas de Entrega</span>
                        @if (request()->routeIs('notas.*'))
                            <span class="nav-main-link-badge badge bg-primary">Actual</span>
                        @endif
                    </a>
                </li>
                {{-- Trámites --}}
                <li class="nav-main-item">
                    <a class="nav-main-link {{ request()->routeIs('tramites.*') ? 'active' : '' }}"
                        href="{{ route('tramites.index') }}">
                        <i class="nav-main-link-icon fa fa-file-alt"></i>
                        <span class="nav-main-link-name">Trámites</span>
                        @if (request()->routeIs('tramites.*'))
                            <span class="nav-main-link-badge badge bg-primary">Actual</span>
                        @endif
                    </a>
                </li>
                {{-- Pagos de Trámites --}}
                <li class="nav-main-item">
                    <a class="nav-main-link {{ request()->routeIs('pagos-tramites.*') ? 'active' : '' }}"
                        href="{{ route('pagos-tramites.index') }}">
                        <i class="nav-main-link-icon fa fa-money-bill"></i>
                        <span class="nav-main-link-name">Pagos de Trámites</span>
                        @if (request()->routeIs('pagos-tramites.*'))
                            <span class="nav-main-link-badge badge bg-primary">Actual</span>
                        @endif
                    </a>
                </li>

                {{-- ==================== GESTIÓN ==================== --}}
                <li class="nav-main-heading">Gestión</li>

                {{-- Usuarios --}}
                <li class="nav-main-item">
                    <a class="nav-main-link {{ request()->routeIs('usuarios.*') ? 'active' : '' }}"
                        href="{{ route('usuarios.index') }}">
                        <i class="nav-main-link-icon fa fa-users-cog"></i>
                        <span class="nav-main-link-name">Usuarios</span>
                        @if (request()->routeIs('usuarios.*'))
                            <span class="nav-main-link-badge badge bg-primary">Actual</span>
                        @endif
                    </a>
                </li>

                {{-- cobradores-vendedores --}}
                <li class="nav-main-item">
                    <a class="nav-main-link {{ request()->routeIs('cobradores-vendedores.*') ? 'active' : '' }}"
                        href="{{ route('cobradores-vendedores.index') }}">
                        <i class="nav-main-link-icon fa fa-user-tie"></i>
                        <span class="nav-main-link-name">Cobradores y Vendedores</span>
                        @if (request()->routeIs('cobradores-vendedores.*'))
                            <span class="nav-main-link-badge badge bg-primary">Actual</span>
                        @endif
                    </a>
                </li>

                {{-- Seguimiento --}}
                <li class="nav-main-item">
                    <a class="nav-main-link {{ request()->routeIs('seguimiento.*') ? 'active' : '' }}"
                        href="{{ route('seguimiento.index') }}">
                        <i class="nav-main-link-icon fa fa-binoculars"></i>
                        <span class="nav-main-link-name">Seguimiento</span>
                        @if (request()->routeIs('seguimiento.*'))
                            <span class="nav-main-link-badge badge bg-primary">Actual</span>
                        @endif
                    </a>
                </li>
                {{-- Backup --}}
                <li class="nav-main-item">
                    <a class="nav-main-link {{ request()->routeIs('backup.*') ? 'active' : '' }}"
                        href="{{ route('backup.index') }}">
                        <i class="nav-main-link-icon fa fa-cloud-upload-alt"></i>
                        <span class="nav-main-link-name">Backup</span>
                        @if (request()->routeIs('backup.*'))
                            <span class="nav-main-link-badge badge bg-primary">Actual</span>
                        @endif

                    </a>
                </li>

                {{-- Separador antes de cerrar sesión --}}
                <li class="nav-main-item mt-3">
                    <hr class="my-2">
                </li>

                {{-- Cerrar Sesión --}}
                <li class="nav-main-item">
                    <form method="POST" action="{{ route('logout') }}" id="logout-form">
                        @csrf
                        <a class="nav-main-link text-danger" href="#"
                            onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                            <i class="nav-main-link-icon si si-logout"></i>
                            <span class="nav-main-link-name">Cerrar Sesión</span>
                        </a>
                    </form>
                </li>

                {{-- Versión del Sistema --}}
                <li class="nav-main-item mt-4">
                    <div class="text-center fs-xs text-muted opacity-50 smini-hide">
                        <i class="fa fa-code-branch"></i> v{{ config('app.version', '1.0.0') }}
                        <br>
                        <i class="fa fa-database"></i>
                        {{ session('ubicacion') === 'cosmos79' ? 'Cosmos 79' : 'Tarapacá' }}
                    </div>
                </li>

            </ul>
        </div>
    </div>
    {{-- END Scroll del Sidebar --}}

</nav>
{{-- END Sidebar --}}

{{-- Script para actualizar el badge de la base de datos dinámicamente --}}
@push('scripts')
    <script>
        // Función para actualizar el badge de la base de datos en el sidebar
        function updateSidebarDatabaseBadge(database) {
            const badge = document.getElementById('current-db-badge');
            if (badge) {
                badge.textContent = database === 'cosmos79' ? 'Cosmos 79' : 'Tarapacá';
            }
        }

        // Escuchar cambios en la selección de base de datos
        document.addEventListener('DOMContentLoaded', function() {
            const ubicacionSelect = document.getElementById('ubicacion');
            if (ubicacionSelect) {
                ubicacionSelect.addEventListener('change', function() {
                    updateSidebarDatabaseBadge(this.value);
                });
            }
        });
    </script>
@endpush