{{-- menu lateral --}}
    @php
        $config = \App\Models\Configuracione::orderby('id', 'desc')->first();
        $bg = $config->color_barra ?? '#0000ff';
    @endphp

<aside x-cloak :class="openAside ? 'translate-x-0' : '-translate-x-full'" class="z-20 fixed inset-y-0 left-0 w-64 transform transition-transform duration-300 ease-in-out h-screen overflow-y-auto shadow-lg" style="background: {{ $bg }};">
    <div class="flex items-center justify-between px-4 py-3 text-white border-b border-white/20">
        <div>
            <x-application-logo />
        </div>

        <button @click="openAside = !openAside" class="p-2 rounded-md text-white hover:bg-blue-900 focus:outline-none cursor-pointer">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
            </svg>
        </button>
    </div>

    <div class="text-center py-4 ms:py-6">
        <div class="font-medium text-base text-white">{{ Auth::user()->name ?? ''}}</div>
        <div class="font-medium text-sm text-gray-500">{{ Auth::user()->email ?? ''}}</div>
        <div class="font-semibold text-sm text-gray-500 capitalize">{{ Auth::user()->rol->nombre ?? ''}}</div>
    </div>

    <!-- Items del menú -->
    <nav class="px-4 mt-2 space-y-2 pb-4">
        <a href="{{ route('dashboard') }}" class="flex items-center justify-start gap-2 py-2 px-3 rounded text-white {{ request()->routeIs('dashboard') ? 'bg-white/20' : 'hover:bg-white/10' }}">
            <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
            </svg>
            <span>Inicio</span>
        </a>
        <a href="{{ route('clientes') }}" class="flex items-center justify-start gap-2 py-2 px-3 rounded text-white {{ request()->routeIs('clientes') ? 'bg-white/20' : 'hover:bg-white/10' }}">
            <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" >
                <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
            </svg>
            <span>Clientes</span>
        </a>
        <a href="{{ route('servicios') }}" class="flex items-center justify-start gap-2 py-2 px-3 rounded text-white {{ request()->routeIs('servicios') ? 'bg-white/20' : 'hover:bg-white/10' }}">
            <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25" />
            </svg>
            <span>Servicios</span>
        </a>
        <a href="{{ route('top') }}" class="flex items-center justify-start gap-2 py-2 px-3 rounded text-white {{ request()->routeIs('top') ? 'bg-white/20' : 'hover:bg-white/10' }}">
            <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
            </svg>
            <span>Top distribuidores</span>
        </a>
        @if (!empty($config->catalogo))
            <a href="{{ asset($config->catalogo) }}" download="{{ basename($config->catalogo) }}" class="flex items-center justify-start gap-2 py-2 px-3 rounded text-white {{ request()->routeIs('top') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
                </svg>
                <span>Descargar Catalogo</span>
            </a>
        @endif
        @if (auth()->user()->rol->nombre != 'editor' && auth()->user()->rol->nombre != 'administrador')
            <a href="{{ route('reportes') }}" class="flex items-center justify-start gap-2 py-2 px-3 rounded text-white {{ request()->routeIs('reportes') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z" />
                </svg>
                <span>Reportes</span>
            </a>
        @endif

        @if ((auth()->user()->subvendedor && $config->subvendedor) || in_array(auth()->user()->rol->nombre, ['super', 'administrador', 'editor']))
            <div x-data="{ open: false }" class="space-y-1">
                <!-- Botón para admin -->
                <button @click="open = !open"
                    class="flex items-center justify-between w-full py-2 px-3 rounded text-white hover:bg-white/10 focus:outline-none">
                    <div class="flex items-center gap-2">

                        <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" />
                        </svg>

                        <span>
                            @if (in_array(auth()->user()->rol->nombre, ['super', 'administrador', 'editor']))
                                Admin
                            @else
                                Subvendedor
                            @endif
                        </span>
                    </div>
                    <svg :class="open ? 'rotate-180' : ''" class="w-4 h-4 transform transition-transform" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
                    </svg>
                </button>

                <!-- Submenú -->
                <div x-show="open" x-transition class="ml-6 space-y-1">
                    @if ($config->subvendedor && auth()->user()->subvendedor)
                        <a href="{{ route('roles') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white {{ request()->routeIs('roles') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                            <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
                            </svg>
                            <span>Gestión Roles</span>
                        </a>
                        <a href="{{ route('usuarios') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white {{ request()->routeIs('usuarios') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                            <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
                            </svg>
                            <span>Gestión Usuarios</span>
                        </a>
                        <a href="{{ route('logs-comisiones') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white {{ request()->routeIs('logs-comisiones') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                            <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
                            </svg>
                            <span>Log Comisiones</span>
                        </a>
                        @if (auth()->user()->rol->nombre != 'super')
                            <a href="{{ route('tarifas') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white {{ request()->routeIs('tarifas') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                                <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
                                </svg>
                                <span>Gestión Tarifas</span>
                            </a>
                        @endif
                    @endif

                    @if (in_array(auth()->user()->rol->nombre, ['super', 'administrador', 'editor']))
                        <a href="{{ route('planes') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white {{ request()->routeIs('planes') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                            <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
                            </svg>
                            <span>Gestión Planes</span>
                        </a>
                        <a href="{{ route('import') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white {{ request()->routeIs('import') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                            <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
                            </svg>
                            <span>Importar cuentas</span>
                        </a>
                        <a href="{{ route('usuarios') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white {{ request()->routeIs('usuarios') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                            <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
                            </svg>
                            <span>Gestión Usuarios</span>
                        </a>
                        @if (in_array(auth()->user()->rol->nombre, ['super', 'administrador']))
                            <a href="{{ route('pendientes') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white {{ request()->routeIs('pendientes') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                                <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
                                </svg>
                                <span>Gestión Pendientes</span>
                            </a>
                            <a href="{{ route('logGeneral') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white {{ request()->routeIs('logGeneral') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                                <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
                                </svg>
                                <span>Log general</span>
                            </a>
                            <a href="{{ route('logs') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white {{ request()->routeIs('logs') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                                <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
                                </svg>
                                <span>Log cuentas</span>
                            </a>

                            @if (auth()->user()->rol->nombre == 'super')
                                <a href="{{ route('tarifas') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white {{ request()->routeIs('tarifas') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                                    <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
                                    </svg>
                                    <span>Gestión</span>
                                </a>
                                <a href="{{ route('logHistorial') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white {{ request()->routeIs('logHistorial') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                                    <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
                                    </svg>
                                    <span>Utilidades</span>
                                </a>
                                <a href="{{ route('logsRecargas') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white {{ request()->routeIs('logsRecargas') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                                    <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
                                    </svg>
                                    <span>Log historial</span>
                                </a>
                                <a href="{{ route('promociones') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white {{ request()->routeIs('promociones') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                                    <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
                                    </svg>
                                    <span>Log recargas</span>
                                </a>
                                <a href="{{ route('servicio') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white {{ request()->routeIs('servicio') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                                    <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
                                    </svg>
                                    <span>Gestión Promociones</span>
                                </a>
                                <a href="{{ route('categoria') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white {{ request()->routeIs('categoria') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                                    <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
                                    </svg>
                                    <span>Gestión Servicios</span>
                                </a>
                                <a href="{{ route('utilidades') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white {{ request()->routeIs('utilidades') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                                    <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
                                    </svg>
                                    <span>Gestión Categorias</span>
                                </a>
                                <a href="{{ route('configuracion') }}" class="flex items-center gap-2 py-2 px-3 rounded text-white {{ request()->routeIs('configuracion') ? 'bg-white/20' : 'hover:bg-white/10' }}">
                                    <svg class="w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
                                    </svg>
                                    <span>Configuración</span>
                                </a>
                            @endif
                        @endif
                    @endif


                </div>
            </div>
        @endif

        <!-- Logout -->
        <form method="POST" action="{{ route('logout') }}">
            @csrf
            <button type="submit" class="w-full text-left py-2 px-3 rounded flex items-center justify-start gap-2 bg-red-600 text-white hover:bg-red-700">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none"
                    viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" class="w-6">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1
                            2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25
                            0 0 1-2.25-2.25V15m-3 0-3-3m0 0 3-3m-3 3H15" />
                </svg>
                <span>Cerrar sesión</span>
            </button>
        </form>
    </nav>

</aside>



{{-- <div class="sm:block h-full" x-data="{ menuG: false }">

        @if ((auth()->user()->subvendedor && $config->subvendedor) || in_array(auth()->user()->rol->nombre, ['super', 'administrador', 'editor']))
            <ul class="relative shadow-md block w-11/12  mx-auto select-none " x-data="{ selected: null }">
                <li class="flex align-center flex-col">
                    <h4 @click="selected !== 0 ? selected = 0 : selected = null" class="cursor-pointer px-5 py-3 bg-[#b221fd] text-white text-center inline-block hover:bg-[#7a02b8] hover:shadow rounded-lg">
                        @if (in_array(auth()->user()->rol->nombre, ['super', 'administrador', 'editor']))
                            Admin
                        @else
                            Subvendedor
                        @endif
                    </h4>
                    <p class="absolute bg-[#f2f4ff] rounded-md @if (auth()->user()->rol->nombre == 'editor') -top-[400%] @elseif (auth()->user()->rol->nombre == 'administrador') -top-[200%] @elseif (auth()->user()->rol->nombre == 'super') -top-[300%] @elseif (auth()->user()->subvendedor) -top-3 @else -top-[800%] @endif -right-[20%] sm:-right-[55%]" x-show="selected == 0">
                        @if ($config->subvendedor && auth()->user()->subvendedor)
                            <a class="block cursor-pointer text-center hover:bg-[#d1d3e1] border-b w-full px-3 py-1" href="{{ route('roles') }}">Gestión Roles</a>
                            <a class="block cursor-pointer text-center hover:bg-[#d1d3e1] border-b w-full px-3 py-1" href="{{ route('usuarios') }}">Gestión Usuarios</a>
                            <a class="block cursor-pointer text-center hover:bg-[#d1d3e1] border-b w-full px-3 py-1" href="{{ route('logs-comisiones') }}">Log Comisiones</a>
                            @if (auth()->user()->rol->nombre != 'super')
                                <a class="block cursor-pointer text-center hover:bg-[#d1d3e1] border-b w-full px-3 py-1" href="{{ route('tarifas') }}">Gestión Tarifas</a>
                            @endif
                        @endif

                        @if (in_array(auth()->user()->rol->nombre, ['super', 'administrador', 'editor']))
                            <a class="block cursor-pointer text-center hover:bg-[#d1d3e1] border-b w-full px-3 py-1" href="{{ route('planes') }}">Gestión Planes</a>
                            <a class="block cursor-pointer text-center hover:bg-[#d1d3e1] border-b w-full px-3 py-1" href="{{ route('import') }}">Importar cuentas</a>
                            <a class="block cursor-pointer text-center hover:bg-[#d1d3e1] border-b w-full px-3 py-1" href="{{ route('usuarios') }}">Gestión Usuarios</a>

                            @if (in_array(auth()->user()->rol->nombre, ['super', 'administrador']))
                                <a class="block cursor-pointer text-center hover:bg-[#d1d3e1] border-b w-full px-3 py-1" href="{{ route('pendientes') }}">Gestión Pendientes</a>
                                <a class="block cursor-pointer text-center hover:bg-[#d1d3e1] border-b w-full px-3 py-1" href="{{ route('logGeneral') }}">Log general</a>
                                <a class="block cursor-pointer text-center hover:bg-[#d1d3e1] border-b w-full px-3 py-1" href="{{ route('logs') }}">Log cuentas</a>

                                @if (auth()->user()->rol->nombre == 'super')
                                    <a class="block cursor-pointer text-center hover:bg-[#d1d3e1] border-b w-full px-3 py-1" href="{{ route('tarifas') }}">Gestión Tarifas</a>
                                    <a class="block cursor-pointer text-center hover:bg-[#d1d3e1] border-b w-full px-3 py-1" href="{{ route('logHistorial') }}">Log historial</a>
                                    <a class="block cursor-pointer text-center hover:bg-[#d1d3e1] border-b w-full px-3 py-1" href="{{ route('logsRecargas') }}">Log recargas</a>
                                    <a class="block cursor-pointer text-center hover:bg-[#d1d3e1] border-b w-full px-3 py-1" href="{{ route('promociones') }}">Gestión Promociones</a>
                                    <a class="block cursor-pointer text-center hover:bg-[#d1d3e1] border-b w-full px-3 py-1" href="{{ route('servicio') }}">Gestión Servicios</a>
                                    <a class="block cursor-pointer text-center hover:bg-[#d1d3e1] border-b w-full px-3 py-1" href="{{ route('categoria') }}">Gestión Categorias</a>
                                    <a class="block cursor-pointer text-center hover:bg-[#d1d3e1] border-b w-full px-3 py-1" href="{{ route('utilidades') }}">Utilidades</a>
                                    <a class="block cursor-pointer text-center hover:bg-[#d1d3e1] border-b w-full px-3 py-1" href="{{ route('configuracion') }}">Configuración</a>
                                @endif
                            @endif
                        @endif
                    </p>
                </li>
            </ul>
        @endif


        <div class="absolute top-4 right-2">
            <svg x-on:click="menuG=false,menuP=true" xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1"
                class="w-5 cursor-pointer" x="0" y="0" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512"
                xml:space="preserve">
                <path
                    d="M17.921,1.505a1.5,1.5,0,0,1-.44,1.06L9.809,10.237a2.5,2.5,0,0,0,0,3.536l7.662,7.662a1.5,1.5,0,0,1-2.121,2.121L7.688,15.9a5.506,5.506,0,0,1,0-7.779L15.36.444a1.5,1.5,0,0,1,2.561,1.061Z"
                    fill="#b221fd" data-original="#000000" />
            </svg>
        </div>
    </div>

    <div x-cloak x-show="!menuG" class="bg-[#f2f4ff] h-full shadow-lg rounded-xl  ">
        <div class=" m-auto rounded-2xl py-6">
            <div class="space-y-1">
                <svg x-on:click="menuG=true,menuP=false" class="w-7 cursor-pointer m-auto"
                    xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
                    xmlns:svgjs="http://svgjs.com/svgjs" x="0" y="0" viewBox="0 0 464.205 464.205"
                    style="enable-background:new 0 0 512 512" xml:space="preserve">
                    <g id="grip-solid-horizontal_1_">
                        <path
                            d="m435.192 406.18h-406.179c-16.024 0-29.013-12.99-29.013-29.013s12.989-29.013 29.013-29.013h406.18c16.023 0 29.013 12.99 29.013 29.013-.001 16.023-12.99 29.013-29.014 29.013z"
                            fill="#b221fd" data-original="#000000" class=""></path>
                        <path
                            d="m435.192 261.115h-406.179c-16.024 0-29.013-12.989-29.013-29.012s12.989-29.013 29.013-29.013h406.18c16.023 0 29.013 12.989 29.013 29.013s-12.99 29.012-29.014 29.012z"
                            fill="#b221fd" data-original="#000000" class=""></path>
                        <path
                            d="m435.192 116.051h-406.179c-16.024 0-29.013-12.989-29.013-29.013s12.989-29.013 29.013-29.013h406.18c16.023 0 29.013 12.989 29.013 29.013s-12.99 29.013-29.014 29.013z"
                            fill="#b221fd" data-original="#000000" class=""></path>
                    </g>
                </svg>
            </div>
        </div>

        <div class="bg-[#b221fd] m-auto mb-4 hover:bg-[#7a02b8]">
            <div class="space-y-1">
                <x-responsive-nav-link :href="route('perfil')">
                    <svg class="w-10 m-auto" xmlns="http://www.w3.org/2000/svg" version="1.1"
                        xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" x="0" y="0"
                        viewBox="0 0 55 55" style="enable-background:new 0 0 512 512" xml:space="preserve"
                        class="">
                        <path d="M55,27.5C55,12.337,42.663,0,27.5,0S0,12.337,0,27.5c0,8.009,3.444,15.228,8.926,20.258l-0.026,0.023l0.892,0.752
                                c0.058,0.049,0.121,0.089,0.179,0.137c0.474,0.393,0.965,0.766,1.465,1.127c0.162,0.117,0.324,0.234,0.489,0.348
                                c0.534,0.368,1.082,0.717,1.642,1.048c0.122,0.072,0.245,0.142,0.368,0.212c0.613,0.349,1.239,0.678,1.88,0.98
                                c0.047,0.022,0.095,0.042,0.142,0.064c2.089,0.971,4.319,1.684,6.651,2.105c0.061,0.011,0.122,0.022,0.184,0.033
                                c0.724,0.125,1.456,0.225,2.197,0.292c0.09,0.008,0.18,0.013,0.271,0.021C25.998,54.961,26.744,55,27.5,55
                                c0.749,0,1.488-0.039,2.222-0.098c0.093-0.008,0.186-0.013,0.279-0.021c0.735-0.067,1.461-0.164,2.178-0.287
                                c0.062-0.011,0.125-0.022,0.187-0.034c2.297-0.412,4.495-1.109,6.557-2.055c0.076-0.035,0.153-0.068,0.229-0.104
                                c0.617-0.29,1.22-0.603,1.811-0.936c0.147-0.083,0.293-0.167,0.439-0.253c0.538-0.317,1.067-0.648,1.581-1
                                c0.185-0.126,0.366-0.259,0.549-0.391c0.439-0.316,0.87-0.642,1.289-0.983c0.093-0.075,0.193-0.14,0.284-0.217l0.915-0.764
                                l-0.027-0.023C51.523,42.802,55,35.55,55,27.5z M2,27.5C2,13.439,13.439,2,27.5,2S53,13.439,53,27.5
                                c0,7.577-3.325,14.389-8.589,19.063c-0.294-0.203-0.59-0.385-0.893-0.537l-8.467-4.233c-0.76-0.38-1.232-1.144-1.232-1.993v-2.957
                                c0.196-0.242,0.403-0.516,0.617-0.817c1.096-1.548,1.975-3.27,2.616-5.123c1.267-0.602,2.085-1.864,2.085-3.289v-3.545
                                c0-0.867-0.318-1.708-0.887-2.369v-4.667c0.052-0.52,0.236-3.448-1.883-5.864C34.524,9.065,31.541,8,27.5,8
                                s-7.024,1.065-8.867,3.168c-2.119,2.416-1.935,5.346-1.883,5.864v4.667c-0.568,0.661-0.887,1.502-0.887,2.369v3.545
                                c0,1.101,0.494,2.128,1.34,2.821c0.81,3.173,2.477,5.575,3.093,6.389v2.894c0,0.816-0.445,1.566-1.162,1.958l-7.907,4.313
                                c-0.252,0.137-0.502,0.297-0.752,0.476C5.276,41.792,2,35.022,2,27.5z" fill="#ffffff"
                            data-original="#000000" class="">
                        </path>
                    </svg>
                </x-responsive-nav-link>
            </div>
        </div>


        <div class="bg-white  m-auto shadow-lg">
            <div class="space-y-1  border-b border-gray-100">
                <x-responsive-nav-link class="rounded-none" :href="route('dashboard')" :active="request()->routeIs('dashboard')">
                    <svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" class="w-5 m-auto">
                        <path
                            d="M23.121,9.069,15.536,1.483a5.008,5.008,0,0,0-7.072,0L.879,9.069A2.978,2.978,0,0,0,0,11.19v9.817a3,3,0,0,0,3,3H21a3,3,0,0,0,3-3V11.19A2.978,2.978,0,0,0,23.121,9.069ZM15,22.007H9V18.073a3,3,0,0,1,6,0Zm7-1a1,1,0,0,1-1,1H17V18.073a5,5,0,0,0-10,0v3.934H3a1,1,0,0,1-1-1V11.19a1.008,1.008,0,0,1,.293-.707L9.878,2.9a3.008,3.008,0,0,1,4.244,0l7.585,7.586A1.008,1.008,0,0,1,22,11.19Z" />
                    </svg>
                </x-responsive-nav-link>
            </div>
            <div class="space-y-1 border-b border-gray-100">
                <x-responsive-nav-link class="rounded-none" :href="route('clientes')" :active="request()->routeIs('clientes')">
                    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
                        xmlns:svgjs="http://svgjs.com/svgjs" class="w-5 m-auto" x="0" y="0" viewBox="0 0 512 512"
                        style="enable-background:new 0 0 512 512" xml:space="preserve">
                        <path
                            d="m437.019 74.98c-48.352-48.351-112.639-74.98-181.019-74.98s-132.667 26.629-181.02 74.98c-48.351 48.353-74.98 112.64-74.98 181.02s26.628 132.667 74.98 181.02c48.353 48.351 112.64 74.98 181.02 74.98s132.668-26.629 181.02-74.98c48.351-48.353 74.98-112.64 74.98-181.02s-26.629-132.667-74.981-181.02zm-319.202 359.724c19.683-59.009 75.183-99.437 138.183-99.437s118.501 40.43 138.182 99.438c-38.232 29.63-86.18 47.295-138.182 47.295s-99.951-17.665-138.183-47.296zm300.338-21.455c-26.927-64.621-90.521-107.982-162.155-107.982-71.635 0-135.228 43.36-162.156 107.981-39.49-40.711-63.844-96.185-63.844-157.248 0-124.617 101.383-226 226-226s226 101.383 226 226c0 61.063-24.354 116.538-63.845 157.249z"
                            data-original="#000000"></path>
                        <path
                            d="m256 80.334c-52.567 0-95.333 42.767-95.333 95.333s42.766 95.333 95.333 95.333 95.334-42.767 95.334-95.333-42.767-95.333-95.334-95.333zm0 160.666c-36.025 0-65.333-29.309-65.333-65.333s29.308-65.333 65.333-65.333 65.334 29.309 65.334 65.333-29.309 65.333-65.334 65.333z"
                            data-original="#000000"></path>
                    </svg>
                </x-responsive-nav-link>
            </div>
            <div class="space-y-1 border-b border-gray-100">
                <x-responsive-nav-link class="rounded-none" :href="route('servicios')" :active="request()->routeIs('servicios')">
                    <svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" class="w-5 m-auto">
                        <path
                            d="M21,6H18A6,6,0,0,0,6,6H3A3,3,0,0,0,0,9V19a5.006,5.006,0,0,0,5,5H19a5.006,5.006,0,0,0,5-5V9A3,3,0,0,0,21,6ZM12,2a4,4,0,0,1,4,4H8A4,4,0,0,1,12,2ZM22,19a3,3,0,0,1-3,3H5a3,3,0,0,1-3-3V9A1,1,0,0,1,3,8H6v2a1,1,0,0,0,2,0V8h8v2a1,1,0,0,0,2,0V8h3a1,1,0,0,1,1,1Z" />
                    </svg>
                </x-responsive-nav-link>
            </div>
            <div class="space-y-1 border-b border-gray-100">
                <x-responsive-nav-link class="rounded-none" :href="route('top')" :active="request()->routeIs('top')">
                    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
                        xmlns:svgjs="http://svgjs.com/svgjs" class="w-5 m-auto" x="0" y="0"
                        viewBox="0 0 511.98685 511" style="enable-background:new 0 0 512 512" xml:space="preserve">
                        <path
                            d="m114.59375 491.140625c-5.609375 0-11.179688-1.75-15.933594-5.1875-8.855468-6.417969-12.992187-17.449219-10.582031-28.09375l32.9375-145.089844-111.703125-97.960937c-8.210938-7.167969-11.347656-18.519532-7.976562-28.90625 3.371093-10.367188 12.542968-17.707032 23.402343-18.710938l147.796875-13.417968 58.433594-136.746094c4.308594-10.046875 14.121094-16.535156 25.023438-16.535156 10.902343 0 20.714843 6.488281 25.023437 16.511718l58.433594 136.769532 147.773437 13.417968c10.882813.980469 20.054688 8.34375 23.425782 18.710938 3.371093 10.367187.253906 21.738281-7.957032 28.90625l-111.703125 97.941406 32.9375 145.085938c2.414063 10.667968-1.726562 21.699218-10.578125 28.097656-8.832031 6.398437-20.609375 6.890625-29.910156 1.300781l-127.445312-76.160156-127.445313 76.203125c-4.308594 2.558594-9.109375 3.863281-13.953125 3.863281zm141.398438-112.875c4.84375 0 9.640624 1.300781 13.953124 3.859375l120.277344 71.9375-31.085937-136.941406c-2.21875-9.746094 1.089843-19.921875 8.621093-26.515625l105.472657-92.5-139.542969-12.671875c-10.046875-.917969-18.6875-7.234375-22.613281-16.492188l-55.082031-129.046875-55.148438 129.066407c-3.882812 9.195312-12.523438 15.511718-22.546875 16.429687l-139.5625 12.671875 105.46875 92.5c7.554687 6.613281 10.859375 16.769531 8.621094 26.539062l-31.0625 136.9375 120.277343-71.914062c4.308594-2.558594 9.109376-3.859375 13.953126-3.859375zm-84.585938-221.847656s0 .023437-.023438.042969zm169.128906-.0625.023438.042969c0-.023438 0-.023438-.023438-.042969zm0 0"
                            data-original="#000000" class=""></path>
                    </svg>
                </x-responsive-nav-link>
            </div>
            @if (!empty($config->catalogo))
                <div class="space-y-1 border-b border-gray-100">
                    <a href="{{ asset($config->catalogo) }}" download="{{ basename($config->catalogo) }}"
                        class="flex block pl-3 pr-4 py-3 text-base font-medium text-[#000029] transition duration-150 ease-in-out rounded-none">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                            stroke-width="1.5" stroke="currentColor" class="w-5 mx-3">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
                        </svg>
                    </a>
                </div>
            @endif

            @if (auth()->user()->rol->nombre != 'editor' && auth()->user()->rol->nombre != 'administrador')
                <div class="space-y-1">
                    <x-responsive-nav-link class="rounded-none" :href="route('reportes')" :active="request()->routeIs('reportes')">
                        <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1"
                            viewBox="0 0 24 24" class="w-5 m-auto">
                            <rect x="14" y="11" width="2" height="9" />
                            <rect x="6" y="11" width="2" height="9" />
                            <rect x="18" y="6" width="2" height="14" />
                            <rect x="10" y="6" width="2" height="14" />
                        </svg>
                    </x-responsive-nav-link>
                </div>
            @endif
        </div>

        <div class="space-y-1 bg-[#FF5050] hover:bg-[#ff3131] m-auto mt-8 mb-4">
            <form method="POST" action="{{ route('logout') }}">
                @csrf

                <a class="cursor-pointer text-white flex pl-3 pr-4 py-3 text-base font-medium transition duration-150 ease-in-out justify-between "
                    :href="route('logout')"
                    onclick="event.preventDefault();
                                            this.closest('form').submit();">
                    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
                        xmlns:svgjs="http://svgjs.com/svgjs" class="w-5 m-auto" x="0" y="0"
                        viewBox="0 0 447.674 447.674" style="enable-background:new 0 0 512 512" xml:space="preserve"
                        class="">
                        <path d="M182.725,379.151c-0.572-1.522-0.769-2.816-0.575-3.863c0.193-1.04-0.472-1.902-1.997-2.566
                                c-1.525-0.664-2.286-1.191-2.286-1.567c0-0.38-1.093-0.667-3.284-0.855c-2.19-0.191-3.283-0.288-3.283-0.288h-3.71h-3.14H82.224
                                c-12.562,0-23.317-4.469-32.264-13.421c-8.945-8.946-13.417-19.698-13.417-32.258V123.335c0-12.562,4.471-23.313,13.417-32.259
                                c8.947-8.947,19.702-13.422,32.264-13.422h91.361c2.475,0,4.421-0.614,5.852-1.854c1.425-1.237,2.375-3.094,2.853-5.568
                                c0.476-2.474,0.763-4.708,0.859-6.707c0.094-1.997,0.048-4.521-0.144-7.566c-0.189-3.044-0.284-4.947-0.284-5.712
                                c0-2.474-0.905-4.611-2.712-6.423c-1.809-1.804-3.949-2.709-6.423-2.709H82.224c-22.648,0-42.016,8.042-58.101,24.125
                                C8.042,81.323,0,100.688,0,123.338v200.994c0,22.648,8.042,42.018,24.123,58.095c16.085,16.091,35.453,24.133,58.101,24.133
                                h91.365c2.475,0,4.422-0.622,5.852-1.854c1.425-1.239,2.375-3.094,2.853-5.571c0.476-2.471,0.763-4.716,0.859-6.707
                                c0.094-1.999,0.048-4.518-0.144-7.563C182.818,381.817,182.725,379.915,182.725,379.151z"
                            fill="#ffffff" data-original="#000000" class="">
                        </path>
                        <path d="M442.249,210.989L286.935,55.67c-3.614-3.612-7.898-5.424-12.847-5.424c-4.949,0-9.233,1.812-12.851,5.424
                                c-3.617,3.617-5.424,7.904-5.424,12.85v82.226H127.907c-4.952,0-9.233,1.812-12.85,5.424c-3.617,3.617-5.424,7.901-5.424,12.85
                                v109.636c0,4.948,1.807,9.232,5.424,12.847c3.621,3.61,7.901,5.427,12.85,5.427h127.907v82.225c0,4.945,1.807,9.233,5.424,12.847
                                c3.617,3.617,7.901,5.428,12.851,5.428c4.948,0,9.232-1.811,12.847-5.428L442.249,236.69c3.617-3.62,5.425-7.898,5.425-12.848
                                C447.674,218.894,445.866,214.606,442.249,210.989z" fill="#ffffff"
                            data-original="#000000" class="">
                        </path>
                    </svg>
                </a>
            </form>
        </div>
    </div>
</div> --}}