@push('styles')
<style>

#sidebar-menu ul li ul.sub-menu:before {
    content: "";
    position: absolute;
    left: 100px;
    top: 10px;
    bottom: 10px;
    width: 0px !important;
}

#sidebar-menu ul li ul.sub-menu {
    margin-left: 10% !important;
} 

#sidebar-menu ul li ul.sub-menu li {
    padding: 10px;
}

.alto_a{ 
    height: 90px;
    display: flex;
    align-items: center;
}

.sub-menu li select{ 
    margin-top: 5px !important;
}

.button-logout{ 
    background-color: transparent !important;
    color: #fff !important;
    border: none !important;
}

#sidebar-menu ul li a{ 
    background-color: #fff  !important;

}

.button-closed{ 
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.div-menu{ 
    text-align: center !important;
}

.barra-lateral{
    position: fixed !important;
    top: 100px !important;
    left: 0px !important;
    width: 250px !important;
    height: 100vh !important;
    overflow-y: auto !important;
}

@media (max-width: 768px) {
    .vertical-menu{
        top: 50px !important;
    }
}

.cerrado{
    margin-top: 120px !important; 
    overflow-y: auto; 
    height: 80vh
}

.abierto{
    margin-top: 0 !important;
}

.hidden{
    display: none;
}

#sidebar-menu ul li a:hover{
    background-color: transparent !important;
    color: #ff5659 !important;
}


body[data-sidebar-size=sm] .vertical-menu #sidebar-menu ul li:hover a {
    background-color: transparent !important;
    color: #ff5659 !important;
}

a:hover svg{
    color: #ff5659 !important;
}
</style>
@endpush

<!-- ========== Left Sidebar Start ========== -->
<!-- <div class="vertical-menu" style="background-color: #2066C7 !important" > -->

<div class="vertical-menu" style="z-index: 10">
    <!-- LOGO -->
    <!-- <div class="navbar-brand-box alto_a" style="margin-left: 0 !important; margin-top:20px; background-color: #2066C7 !important"> -->
    @if($closed == false)
    <div class="navbar-brand-box alto_a" style="margin-left: 0 !important; margin-top: 10px">
        <a class="logo logo-dark" href="{{url('/dashboard')}}">
                <img class="alto_a" src="{{ URL::asset('build/images/delarosa.png') }}" alt="" style=" width:40px !important; margin-left: 95px">
        </a>

        <a class="logo logo-light" href="{{url('/dashboard')}}">
                <img src="{{ URL::asset('build/images/delarosa.png') }}" alt="" style=" width:50px !important; margin-left: 30px">
        </a>
    </div>

    <button wire:click="wrapSidebar()" type="button" class="btn btn-sm px-3 font-size-24 header-item waves-effect vertical-menu-btn" >
    <i class="bx bx-menu" ></i>
    </button>
    @else 
     
        <div class="div-menu" style="text-align: center;">
            <button wire:click="wrapSidebar()" type="button" class="btn btn-lg button-closed font-size-26 header-item waves-effect" >
            <i class="bx bx-menu" ></i>
            </button>
        </div>
    @endif


    <div data-simplebar class=" {{$closed != false ? 'sidebar-menu-scroll cerrado' : 'sidebar-menu-scroll abierto'}}" style="overflow-y: auto; height: 90vh">

        <!--- Sidemenu -->
        <div id="sidebar-menu" >
            <!-- Left Menu Start -->
            <ul class="metismenu list-unstyled" id="side-menu">
                <li class="menu-title" data-key="t-menu">Menú</li>
                    <li>
                        <a href="{{url('/dashboard')}}" aria-expanded="false" style="{{ $dashboardActive == true ? 'background-color: #e3c9a8 !important; color: #ff5659 !important' : 'background-color: transparent;' }}">
                            <i class="bx bx-home-alt icon nav-icon"></i>
                            <span class="menu-item" data-key="t-dashboard">Dashboard</span>
                        </a>
                    </li>
                    @can('visualizar perfiles')
                    <li>
                        <a href="{{url('/profiles')}} " style="{{ $perfilesActive == true ? 'background-color: #e3c9a8!important; color: #ff5659 !important' : 'background-color: transparent;' }}">
                            <i class="bx bx-id-card icon nav-icon "></i>
                            <span class="menu-item" data-key="t-perfiles">Perfiles</span>
                        </a>
                    </li>
                    @endcan
                    @can('visualizar usuarios')
                    <li>
                        <a href="{{url('/users')}}" style="{{ $usuariosActive == true ? 'background-color: #e3c9a8!important; color: #ff5659 !important'  : 'background-color: transparent;' }}">
                            <i class="bx bx-user icon nav-icon"></i>
                            <span class="menu-item" data-key="t-usuarios">Usuarios</span>
                        </a>
                    </li>
                    @endcan 
                    @can('visualizar clientes')
                    <li style="{{$closed == false ? '' : 'padding-left: 8px'}} ">
                        <a href="{{url('/empresas')}}" style="{{ $empresasActive == true ? 'background-color: #e3c9a8!important; color: #ff5659 !important' : 'background-color: transparent;' }}">
                            <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor">
                                <path d="M21.6 11.22L17 7.52V5a1.91 1.91 0 0 0-1.81-2H3.79A1.91 1.91 0 0 0 2 5v10a2 2 0 0 0 1.2 1.88 3 3 0 1 0 5.6.12h6.36a3 3 0 1 0 5.64 0h.2a1 1 0 0 0 1-1v-4a1 1 0 0 0-.4-.78zM20 12.48V15h-3v-4.92zM7 18a1 1 0 1 1-1-1 1 1 0 0 1 1 1zm5-3H4V5h11v10zm7 3a1 1 0 1 1-1-1 1 1 0 0 1 1 1z"></path>
                            </svg>
                            <span class="menu-item" data-key="t-usuarios">Clientes</span>
                        </a>
                    </li>
                    @endcan

  
                    @php
                        $registros = 
                            Auth::user()->can('registrar cartones masivas') || Auth::user()->can('registrar ventas masivas');
                    @endphp

                    @if($registros)
                        <li>
                            <a id="cambio-registros" href="{{url('/carga-masiva/ventas')}}" style="{{ $registrosActive == true ? 'background-color: #e3c9a8!important; color: #ff5659 !important' : 'background-color: transparent;' }}">
                                <i class="bx bx-folder-plus icon nav-icon"></i>
                                <span class="menu-item" >Registros</span>
                            </a>
                        </li>
                    @endif



                    @can('visualizar reportes')
                    <!-- <li>
                        <a href="{{url('/ver-reportes')}}" style="{{ $reportesActive == true ? 'background-color: #e3c9a8!important; color: #ff5659 !important' : 'background-color: transparent;' }}">
                            <i class="bx bx-bar-chart-alt-2 icon nav-icon"></i>
                            <span class="menu-item" data-key="t-usuarios">Reportes</span>
                        </a>
                    </li> -->
                    @endcan
                    
                <!-- <li class="menu-title" data-key="t-menu">Cerrar Sesión</li> -->
                <li style="{{$closed == false ? 'position: absolute; bottom: 0; width: 100%; left: 0;' : 'padding-left: 8px'}} ">
                    <!-- <form id="logout" method="POST" action="{{ route('logout') }}"> -->
                     <!-- @csrf -->
                        <!-- <a href="javascript: void(0);" onclick="document.getElementById('logout').submit(); return false;"> -->
                        <a href="javascript: void(0);" onclick="logout(); return false;">
                            <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
                                <path d="M7 6a1 1 0 0 0 0-2H5a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h2a1 1 0 0 0 0-2H6V6z"></path>
                                <path d="M20.82 11.42l-2.82-4a1 1 0 0 0-1.39-.24 1 1 0 0 0-.24 1.4L18.09 11H10a1 1 0 0 0 0 2h8l-1.8 2.4a1 1 0 0 0 .2 1.4 1 1 0 0 0 .6.2 1 1 0 0 0 .8-.4l3-4a1 1 0 0 0 .02-1.18z"></path>
                            </svg>                        
                            <!-- <i class="bx bx-log-out-circle icon nav-icon"></i> -->
                            <span class="menu-item" data-key="t-logout">Cerrar Sesión</span>
                        </a>
                    <!-- </form> -->
                </li>
            </ul>
        </div>
        <!-- Sidebar -->

    </div>
</div>
<!-- Left Sidebar End -->


@section('scripts')
<script
  src="https://code.jquery.com/jquery-3.7.1.min.js"
  integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
  crossorigin="anonymous"></script>


        <script>
            function logout() {
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = '{{ route('logout') }}';
                form.style.display = 'none';

                const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                const csrfInput = document.createElement('input');
                csrfInput.type = 'hidden';
                csrfInput.name = '_token';
                csrfInput.value = csrfToken;

                form.appendChild(csrfInput);

                document.body.appendChild(form);

                form.submit();
            }
        </script>

        <script>
            const body = document.body;

            document.addEventListener('readystatechange', function () {
                document.addEventListener('set-tema', function (data) {
                    body.setAttribute('data-bs-theme', data.detail.tema);
                    console.log(body);
                    });

            });


            document.addEventListener('cambiar-tema', function (data) {
                    console.log(data.detail);
                    body.setAttribute('data-bs-theme', data.detail.tema);
                    console.log( body);
                });
    
                

        </script>

@endsection