<!-- Sidebar backdrop (mobile only) -->
<div class="fixed inset-0 bg-slate-900 bg-opacity-80 z-40 lg:hidden transition-opacity duration-200"
    :class="sidebarOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'" aria-hidden="true" x-cloak></div>

<!-- Sidebar -->
<div id="sidebar"
    class="flex flex-col absolute z-40 left-0 top-0 lg:static lg:left-auto lg:top-auto lg:translate-x-0 h-screen overflow-y-auto w-64 shrink-0 bg-green-900 transition-transform duration-200 ease-in-out"
    :class="sidebarOpen ? 'translate-x-0' : '-translate-x-64'">

    <!-- Sidebar header -->
    <div class="flex justify-between items-center h-16 px-4 sm:px-6 mb-4 mt-2">
        <!-- Logo -->
        <a class="flex items-center gap-2.5 group" href="{{ route('dashboard') }}">
            <div
                class="flex items-center justify-center w-8 h-8 rounded-lg bg-gradient-to-br from-emerald-400 to-green-600 shadow-md shadow-green-900/50 group-hover:shadow-emerald-500/30 transition-all duration-300">
                <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
                </svg>
            </div>
            <span class="text-white font-extrabold text-2xl tracking-tight">
                SISSER <span
                    class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-teal-200">v2</span>
            </span>
        </a>

        <!-- Close button (Mobile) -->
        <button class="lg:hidden text-green-300 hover:text-white transition-colors"
            @click.stop="sidebarOpen = !sidebarOpen" aria-controls="sidebar" :aria-expanded="sidebarOpen">
            <span class="sr-only">Cerrar</span>
            <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.7 18.7l1.4-1.4L7.8 13H20v-2H7.8l4.3-4.3-1.4-1.4L4 12z" />
            </svg>
        </button>
    </div>

    <!-- Links -->
    <div class="space-y-8 px-4 sm:px-6 pt-2">

        <!-- ── Selector de Módulo ──────────────────────────────────────── -->
        <div class="mb-2">
            <div class="flex items-center mb-3">
                <h3 class="text-xs uppercase text-green-300/70 font-bold tracking-wider">Módulo Activo</h3>
                <div class="ml-3 flex-grow h-px bg-green-800/60"></div>
            </div>
            <div class="flex gap-2">
                {{-- Botón Tecnología --}}
                <form method="POST" action="{{ route('modulo.cambiar') }}" class="flex-1">
                    @csrf
                    <input type="hidden" name="modulo" value="tecnologia">
                    <button type="submit"
                        class="w-full px-3 py-2 rounded-lg text-xs font-bold tracking-wide transition-all duration-200
                            {{ ($moduloActivo ?? 'tecnologia') === 'tecnologia'
                                ? 'bg-emerald-600 text-white shadow-md shadow-emerald-900/50 ring-1 ring-emerald-400/30'
                                : 'bg-green-800/40 text-green-300/60 hover:bg-green-800/60 hover:text-green-200' }}">
                        <div class="flex items-center justify-center gap-1.5">
                            <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                            </svg>
                            TEC
                        </div>
                    </button>
                </form>
                {{-- Botón Mantenimiento --}}
                <form method="POST" action="{{ route('modulo.cambiar') }}" class="flex-1">
                    @csrf
                    <input type="hidden" name="modulo" value="mantenimiento">
                    <button type="submit"
                        class="w-full px-3 py-2 rounded-lg text-xs font-bold tracking-wide transition-all duration-200
                            {{ ($moduloActivo ?? 'tecnologia') === 'mantenimiento'
                                ? 'bg-amber-600 text-white shadow-md shadow-amber-900/50 ring-1 ring-amber-400/30'
                                : 'bg-green-800/40 text-green-300/60 hover:bg-green-800/60 hover:text-green-200' }}">
                        <div class="flex items-center justify-center gap-1.5">
                            <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                            </svg>
                            MANT
                        </div>
                    </button>
                </form>
            </div>
        </div>
        <!-- Pages group -->
        <div>
            <div class="flex items-center mb-4 mt-2">
                <h3 class="text-xs uppercase text-green-300/70 font-bold tracking-wider">Menú Principal</h3>
                <div class="ml-3 flex-grow h-px bg-green-800/60"></div>
            </div>
            <ul class="space-y-1.5">
                <!-- Dashboard -->
                <li
                    class="rounded-lg transition-colors duration-200 @if(request()->routeIs('dashboard')) bg-green-800/60 shadow-inner @else hover:bg-green-800/40 @endif">
                    <a class="block py-2.5 px-3 text-green-100 hover:text-white transition duration-150"
                        href="{{ route('dashboard') }}">
                        <div class="flex items-center">
                            <svg class="w-5 h-5 shrink-0 text-emerald-400 opacity-80" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                            </svg>
                            <span class="text-sm font-medium ml-3">Inicio</span>
                        </div>
                    </a>
                </li>

                <!-- Solicitudes Menu -->
                <li class="rounded-lg transition-colors duration-200 @if(request()->is('solicitudes*') || request()->is('asignaciones*') || request()->is('ejecuciones*') || request()->is('conformaciones*')) bg-green-800/60 shadow-inner @else hover:bg-green-800/40 @endif"
                    x-data="{ expanded: {{ (request()->is('solicitudes*') || request()->is('asignaciones*') || request()->is('ejecuciones*') || request()->is('conformaciones*')) ? 'true' : 'false' }} }">
                    <a class="block py-2.5 px-3 text-green-100 hover:text-white transition duration-150" href="#0"
                        @click.prevent="expanded = !expanded">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <svg class="w-5 h-5 shrink-0 text-emerald-400 opacity-80" fill="none"
                                    viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                                </svg>
                                <span class="text-sm font-medium ml-3">Gestión de Solicitudes</span>
                            </div>
                            <!-- Icon -->
                            <div class="flex shrink-0 ml-2">
                                <svg class="w-4 h-4 shrink-0 fill-current text-green-400/70 transition-transform duration-200"
                                    :class="expanded ? 'rotate-180' : 'rotate-0'" viewBox="0 0 12 12">
                                    <path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
                                </svg>
                            </div>
                        </div>
                    </a>

                    <!-- Sub-menu -->
                    <div x-show="expanded" class="mt-1" x-collapse>
                        <ul class="pl-11 pr-3 pb-2 space-y-1.5">
                            <li>
                                <a class="block text-sm transition duration-150 relative @if(request()->routeIs('solicitudes.index')) text-emerald-300 font-semibold before:absolute before:-left-3 before:top-1/2 before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:bg-emerald-400 before:rounded-full @else text-green-300/80 hover:text-white @endif"
                                    href="{{ route('solicitudes.index') }}">Mis Solicitudes</a>
                            </li>
                            @if(auth()->check() && auth()->user()->canReceiveTickets() && auth()->user()->canOperateInCurrentModule())
                                <li>
                                    <a class="block text-sm transition duration-150 relative @if(request()->routeIs('asignaciones.index')) text-emerald-300 font-semibold before:absolute before:-left-3 before:top-1/2 before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:bg-emerald-400 before:rounded-full @else text-green-300/80 hover:text-white @endif"
                                        href="{{ route('asignaciones.index') }}">Recepción de Solicitud</a>
                                </li>
                            @endif
                            @if(auth()->check() && auth()->user()->canBeAssignedTickets() && auth()->user()->canOperateInCurrentModule())
                                <li>
                                    <a class="block text-sm transition duration-150 relative @if(request()->routeIs('ejecuciones.*')) text-emerald-300 font-semibold before:absolute before:-left-3 before:top-1/2 before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:bg-emerald-400 before:rounded-full @else text-green-300/80 hover:text-white @endif"
                                        href="{{ route('ejecuciones.index') }}">Ejecución del Servicio</a>
                                </li>
                            @endif
                            <li>
                                <a class="block text-sm transition duration-150 relative @if(request()->routeIs('conformaciones.*')) text-emerald-300 font-semibold before:absolute before:-left-3 before:top-1/2 before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:bg-emerald-400 before:rounded-full @else text-green-300/80 hover:text-white @endif"
                                    href="{{ route('conformaciones.index') }}">Conformación de Servicio</a>
                            </li>
                        </ul>
                    </div>
                </li>

                <!-- Administración Menu -->
                @if(auth()->check() && auth()->user()->isAdmin())
                    <li class="rounded-lg transition-colors duration-200 @if(request()->is('admin*')) bg-green-800/60 shadow-inner @else hover:bg-green-800/40 @endif"
                        x-data="{ expanded: {{ request()->is('admin*') ? 'true' : 'false' }} }">
                        <a class="block py-2.5 px-3 text-green-100 hover:text-white transition duration-150" href="#0"
                            @click.prevent="expanded = !expanded">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <svg class="w-5 h-5 shrink-0 text-emerald-400 opacity-80" fill="none"
                                        viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                    </svg>
                                    <span class="text-sm font-medium ml-3">Administración</span>
                                </div>
                                <!-- Icon -->
                                <div class="flex shrink-0 ml-2">
                                    <svg class="w-4 h-4 shrink-0 fill-current text-green-400/70 transition-transform duration-200"
                                        :class="expanded ? 'rotate-180' : 'rotate-0'" viewBox="0 0 12 12">
                                        <path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
                                    </svg>
                                </div>
                            </div>
                        </a>

                        <!-- Sub-menu -->
                        <div x-show="expanded" class="mt-1" x-collapse>
                            <ul class="pl-11 pr-3 pb-2 space-y-1.5">
                                <li>
                                    <a class="block text-sm transition duration-150 relative @if(request()->routeIs('admin.departamentos.*')) text-emerald-300 font-semibold before:absolute before:-left-3 before:top-1/2 before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:bg-emerald-400 before:rounded-full @else text-green-300/80 hover:text-white @endif"
                                        href="{{ route('admin.departamentos.index') }}">Departamentos</a>
                                </li>
                                <li>
                                    <a class="block text-sm transition duration-150 relative @if(request()->routeIs('admin.area_trabajos.*')) text-emerald-300 font-semibold before:absolute before:-left-3 before:top-1/2 before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:bg-emerald-400 before:rounded-full @else text-green-300/80 hover:text-white @endif"
                                        href="{{ route('admin.area_trabajos.index') }}">Áreas de Trabajo</a>
                                </li>
                                <li>
                                    <a class="block text-sm transition duration-150 relative @if(request()->routeIs('admin.users.*')) text-emerald-300 font-semibold before:absolute before:-left-3 before:top-1/2 before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:bg-emerald-400 before:rounded-full @else text-green-300/80 hover:text-white @endif"
                                        href="{{ route('admin.users.index') }}">Cuentas de Usuario</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                @endif

                <!-- Reportes Menu -->
                @if(auth()->check() && auth()->user()->canManageTickets() && auth()->user()->canOperateInCurrentModule())
                    <li
                        class="rounded-lg transition-colors duration-200 @if(request()->routeIs('reportes.*')) bg-green-800/60 shadow-inner @else hover:bg-green-800/40 @endif">
                        <a class="block py-2.5 px-3 text-green-100 hover:text-white transition duration-150"
                            href="{{ route('reportes.index') }}">
                            <div class="flex items-center">
                                <svg class="w-5 h-5 shrink-0 text-emerald-400 opacity-80" fill="none" viewBox="0 0 24 24"
                                    stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                                </svg>
                                <span
                                    class="text-sm font-medium ml-3 @if(request()->routeIs('reportes.*')) text-emerald-300 font-semibold @endif">Consultas
                                    y Reportes</span>
                            </div>
                        </a>
                    </li>
                @endif

            </ul>
        </div>
    </div>
</div>