<aside class="main-sidebar {{ config('adminlte.classes_sidebar', 'sidebar-dark-primary elevation-4') }}"
       @if(config('adminlte.sidebar_bg_img'))
           style="background: url('{{ asset(config('adminlte.sidebar_bg_img')) }}') no-repeat center center; background-size: cover;"
       @endif>

    {{-- Sidebar brand logo --}}
    @if(config('adminlte.logo_img_xl'))
        @include('adminlte::partials.common.brand-logo-xl')
    @else
        @include('adminlte::partials.common.brand-logo-xs')
    @endif

    {{-- Sidebar menu --}}
    <div class="sidebar custom-sidebar">
       
    

        <nav class="pt-2">
            <ul class="nav nav-pills nav-sidebar flex-column {{ config('adminlte.classes_sidebar_nav', '') }} modern-sidebar"
                data-widget="treeview" role="menu"
                @if(config('adminlte.sidebar_nav_animation_speed') != 300)
                    data-animation-speed="{{ config('adminlte.sidebar_nav_animation_speed') }}"
                @endif
                @if(!config('adminlte.sidebar_nav_accordion'))
                    data-accordion="false"
                @endif>
                
                {{-- Configured sidebar links --}}
                @each('adminlte::partials.sidebar.menu-item', $adminlte->menu('sidebar'), 'item')
            </ul>
        </nav>
    </div>

    {{-- Estilos personalizados para Sidebar Moderno --}}
    <style>
        :root {
            --sidebar-bg-light: rgba(240, 240, 240, 0.95);
            --sidebar-bg-dark: rgba(40, 40, 40, 0.95);
            --text-light: #222;
            --text-dark: #f0f0f0;
            --hover-light: rgba(255, 0, 255, 0.2);
            --hover-dark: rgba(150, 50, 255, 0.3);
            --active-light: rgba(14, 108, 185, 0.5);
            --active-dark: rgba(100, 70, 255, 0.6);
        }

        /* Estilos base del sidebar */
        .custom-sidebar {
            backdrop-filter: blur(10px);
            border-radius: 10px;
            padding: 10px;
            max-height: 100vh;
            overflow-y: auto;
            box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.15);
            transition: all 0.3s ease;
        }

        /* Modo claro (default) */
        .custom-sidebar {
            background: var(--sidebar-bg-light);
        }

        .modern-sidebar .nav-item a {
            color: var(--text-light);
        }

        .modern-sidebar .nav-item a:hover {
            background: var(--hover-light);
        }

        .modern-sidebar .nav-item a.active {
            background: var(--active-light) !important;
        }

        /* Modo oscuro */
        .dark-mode .custom-sidebar {
            background: var(--sidebar-bg-dark);
        }

        .dark-mode .modern-sidebar .nav-item a {
            color: var(--text-dark);
        }

        .dark-mode .modern-sidebar .nav-item a:hover {
            background: var(--hover-dark);
        }

        .dark-mode .modern-sidebar .nav-item a.active {
            background: var(--active-dark) !important;
        }

        /* Estilos del toggle switch */
        .theme-switcher {
            margin: 10px 0;
        }

        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
        }

        input:checked + .slider {
            background-color: #2196F3;
        }

        input:checked + .slider:before {
            transform: translateX(26px);
        }

        .slider.round {
            border-radius: 34px;
        }

        .slider.round:before {
            border-radius: 50%;
        }

        .labels {
            position: absolute;
            top: 8px;
            left: 0;
            width: 100%;
            height: 100%;
            font-size: 12px;
            font-family: sans-serif;
            transition: all 0.4s ease-in-out;
        }

        .labels:after {
            content: attr(data-off);
            position: absolute;
            right: 5px;
            color: #fff;
            opacity: 1;
            transition: all 0.4s ease-in-out;
        }

        .labels:before {
            content: attr(data-on);
            position: absolute;
            left: 5px;
            color: #fff;
            opacity: 0;
            transition: all 0.4s ease-in-out;
        }

        input:checked + .slider .labels:after {
            opacity: 0;
        }

        input:checked + .slider .labels:before {
            opacity: 1;
        }

        /* Resto de tus estilos... */
        .modern-sidebar .nav-item {
            transition: all 0.3s ease-in-out;
            border-radius: 8px;
            margin: 5px 0;
        }

        .modern-sidebar .nav-item a {
            font-weight: bold;
            padding: 10px 15px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: background 0.3s, transform 0.2s, color 0.3s;
        }

        .modern-sidebar .nav-item a:hover {
            color: #fff;
            transform: translateX(5px);
        }

        .modern-sidebar .nav-item a.active {
            color: #fff !important;
        }

        .modern-sidebar .nav-icon {
            font-size: 18px;
            transition: transform 0.2s;
        }

        .modern-sidebar .nav-item a:hover .nav-icon,
        .modern-sidebar .nav-item a.active .nav-icon {
            transform: rotate(10deg);
            color: #fff;
        }

        .brand-link {
            border-bottom: none !important;
            padding-bottom: 0 !important;
            margin-bottom: 0 !important;
        }
    </style>
</aside>

<script>
    // Función para cambiar entre modos
    document.addEventListener('DOMContentLoaded', function() {
        const themeToggle = document.getElementById('theme-toggle');
        const body = document.body;
        
        // Verificar preferencia guardada
        if (localStorage.getItem('theme') === 'dark') {
            body.classList.add('dark-mode');
            themeToggle.checked = true;
        }
        
        // Escuchar cambios en el toggle
        themeToggle.addEventListener('change', function() {
            if (this.checked) {
                body.classList.add('dark-mode');
                localStorage.setItem('theme', 'dark');
            } else {
                body.classList.remove('dark-mode');
                localStorage.setItem('theme', 'light');
            }
        });
    });
</script>