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

    @php
        $config = \App\Models\Configuracione::orderby('id', 'desc')->first();
    @endphp

    <div x-cloak x-show="menuG"
        class="bg-[radial-gradient(ellipse_at_bottom,_var(--tw-gradient-stops))] from-[{{ App\Models\Configuracione::Orderby('id', 'desc')->first()->color_menu }}] via-[{{ App\Models\Configuracione::Orderby('id', 'desc')->first()->color_menu }}] to-white w-[280px] drop-shadow-2xl rounded-xl fixed h-full"
        x-show="open" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-90"
        x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-300"
        x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-90">
        <div class="text-center py-2 ms:py-4 ms:mb-2">
            <div class="flex justify-center">
                <svg class=" w-14 sm:w-20" 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="#b221fd" data-original="#000000" class=""></path>
                </svg>
            </div>
            <div>
                <div class="font-medium text-base text-gray-800">{{ 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>
        </div>

        <div class="bg-white mx-5 m-auto rounded-xl shadow-lg  mb-5">
            <div class="space-y-1  border-b border-gray-100">
                <x-responsive-nav-link :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 mx-3">
                        <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>
                    {{ __('Inicio') }}
                </x-responsive-nav-link>
            </div>
            <div class="space-y-1 border-b border-gray-100">
                <x-responsive-nav-link :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 mx-3" 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>
                    {{ __('Clientes') }}
                </x-responsive-nav-link>
            </div>
            <div class="space-y-1 border-b border-gray-100">
                <x-responsive-nav-link :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 mx-3">
                        <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>
                    {{ __('Servicios') }}
                </x-responsive-nav-link>
            </div>
            <div class="space-y-1 border-b border-gray-100">
                <x-responsive-nav-link :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 mx-3" 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>
                    {{ __('Top distribuidores') }}
                </x-responsive-nav-link>
            </div>
            @if (!empty($config->catalogo))
                <div class="space-y-1 border-b border-gray-100">
                    <div
                        class="flex cursor-pointer block pl-3 pr-4 py-3 text-base font-medium text-[#000029] transition duration-150 ease-in-out rounded-none">
                        <a href="{{ asset($config->catalogo) }}" download="{{ basename($config->catalogo) }}"
                            class="flex items-center justify-between">
                            <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>

                            Descargar Catalogo
                        </a>
                    </div>
                </div>
            @endif
            @if (auth()->user()->rol->nombre != 'editor' && auth()->user()->rol->nombre != 'administrador')
                <div class="space-y-1">
                    <x-responsive-nav-link :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 mx-3">
                            <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>
                        {{ __('Reportes') }}
                    </x-responsive-nav-link>
                </div>
            @endif
        </div>



        @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

                        {{-- Links para super / administrador / editor --}}
                        @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')
                                    {{-- Solo 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="space-y-1 bg-[#FF5050] mx-4 m-auto rounded-xl  mt-2 sm:mt-5  ">
            <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();">
                    <h3 class="mx-4">
                        {{ __('Cerrar Sesión') }}
                    </h3>

                    <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 mx-3" 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 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>