@php

    $showarray = Config::get('theme.var');
    //($showarray['demoMode']) ? ($showarray['navColor'] == 'default') ? 'navbar-light' : ($showarray['navColor'] == 'inverted') ? 'navbar-dark' : ($showarray['navColor'] == 'vibrant') ? 'navbar-dark navbar-vibrant' : '' : ''
@endphp
<nav class="navbar navbar-vertical fixed-start navbar-expand-md navbar-dark" id="sidebar">
    <div class="container-fluid">

        <!-- Toggler -->
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarCollapse"
            aria-controls="sidebarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- Brand -->
        <a class="navbar-brand" href="/">
            <img src="/img/logos/LogoBatClaro.png" class="navbar-brand-img mx-auto" alt="...">
        </a>

        <!-- User (xs) -->
        <div class="navbar-user d-md-none">

            <!-- Dropdown -->
            <div class="dropdown">

                <!-- Toggle -->
                <a href="#" id="sidebarIcon" class="dropdown-toggle" role="button" data-bs-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
                    <div class="avatar avatar-sm avatar-online">
                        @if (Laravel\Jetstream\Jetstream::managesProfilePhotos())
                            <img src="{{ Auth::user()->profile_photo_url }}" alt="{{ Auth::user()->name }}"
                                class="avatar-img rounded-circle">
                        @endif
                    </div>
                </a>

                <!-- Menu -->
                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="sidebarIcon">
                    <!-- Account Management -->
                    <x-jet-responsive-nav-link href="{{ route('profile.show') }}" :active="request()->routeIs('profile.show')"
                        class="dropdown-item">
                        {{ __('Perfil') }}
                    </x-jet-responsive-nav-link>

                    @if (Laravel\Jetstream\Jetstream::hasApiFeatures())
                        <hr class="dropdown-divider">
                        <x-jet-responsive-nav-link href="{{ route('api-tokens.index') }}" :active="request()->routeIs('api-tokens.index')"
                            class="dropdown-item">
                            {{ __('API Tokens') }}
                        </x-jet-responsive-nav-link>
                    @endif
                    <hr class="dropdown-divider">
                    <!-- Authentication -->
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <x-jet-responsive-nav-link href="{{ route('logout') }}"
                            onclick="event.preventDefault();
                    this.closest('form').submit();"
                            class="dropdown-item">
                            {{ __('Desconectar') }}
                        </x-jet-responsive-nav-link>
                    </form>
                </div>
            </div>
        </div>

        <!-- Collapse -->
        <div class="collapse navbar-collapse" id="sidebarCollapse">

            <!-- Navigation -->
            {{-- Inicio --}}
            <ul class="navbar-nav">
                <li class="nav-item">
                    <x-jet-responsive-nav-link class="nav-link" href="/" :active="request()->routeIs('dashboard')">
                        <span class="fe fe-home"></span>Inicio
                    </x-jet-responsive-nav-link>
                </li>
            </ul>
            <!-- Divider -->
            <hr class="navbar-divider my-3">
            <!-- Heading -->
            <ul class="navbar-nav">

                {{-- Menu Autos --}}
                <li class="nav-item">
                    <a class="nav-link" href="#auto" data-bs-toggle="collapse" role="button"
                        aria-expanded="{{ Route::is('reportes-auto.*') ? 'true' : 'false' }}" aria-controls="auto"
                        :active="Route::is('reportes-auto.*')">
                        <span class="fe fe-truck"></span>
                        Reportes Autos
                    </a>
                    <div class="{{ Route::is('reportes-auto.*') ? 'collapse show' : 'collapse' }}" id="auto">
                        <ul class="nav nav-sm flex-column">
                            <li class="nav-item">
                                <x-jet-responsive-nav-link href="{{ route('reportes-auto.index') }}" class="nav-link"
                                    :active="Route::is('reportes-auto.index')">
                                    Autos
                                </x-jet-responsive-nav-link>
                                <x-jet-responsive-nav-link href="{{ route('reportes-auto.entrada') }}" class="nav-link"
                                    :active="Route::is('reportes-auto.entrada')">
                                    Ingresos
                                </x-jet-responsive-nav-link>

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

                {{-- Menu Peatones   --}}
                <li class="nav-item">
                    <a class="nav-link" href="#peaton" data-bs-toggle="collapse" role="button"
                        aria-expanded="{{ Route::is('reportes-peaton.*') ? 'true' : 'false' }}" aria-controls="auto"
                        :active="Route::is('reportes-peaton.*')">
                        <span class="fe fe-users"></span>
                        Reportes Peatones
                    </a>
                    <div class="{{ Route::is('reportes-peaton.*') ? 'collapse show' : 'collapse' }}" id="peaton">
                        <ul class="nav nav-sm flex-column">
                            <li class="nav-item">
                                <x-jet-responsive-nav-link href="{{ route('reportes-peaton.index') }}" class="nav-link"
                                    :active="request()->routeIs('reportes-peaton.index')">
                                    Peatones
                                </x-jet-responsive-nav-link>
                                <x-jet-responsive-nav-link href="{{ route('reportes-peaton.entrada') }}"
                                    class="nav-link" :active="request()->routeIs('reportes-peaton.entrada')">
                                    Ingresos
                                </x-jet-responsive-nav-link>
                            </li>
                        </ul>
                    </div>
                </li>

                {{-- Menu Tags --}}
                <li class="nav-item">
                    <a class="nav-link" href="#tag" data-bs-toggle="collapse" role="button"
                        aria-expanded="{{ Route::is('reportes-tag.*') ? 'true' : 'false' }}"
                        :active="request()->routeIs('tag.*')">
                        <span class="fe fe-credit-card"></span>
                        Reportes Tags
                    </a>
                    <div class="{{ Route::is('reportes-tag.*') ? 'collapse show' : 'collapse' }}" id="tag">
                        <ul class="nav nav-sm flex-column">
                            <li class="nav-item">
                                <x-jet-responsive-nav-link href="{{ route('reportes-tag.index') }}" class="nav-link"
                                    :active="request()->routeIs('reportes-tag.index')">
                                    Tags
                                </x-jet-responsive-nav-link>
                                <x-jet-responsive-nav-link href="{{ route('reportes-tag.entrada') }}" class="nav-link"
                                    :active="request()->routeIs('reportes-tag.entrada')">
                                    Ingresos
                                </x-jet-responsive-nav-link>
                            </li>
                        </ul>
                    </div>
                </li>

                {{-- Menu Eventos --}}
                <li class="nav-item">
                    <a class="nav-link" href="#evento" data-bs-toggle="collapse" role="button"
                        aria-expanded="{{ Route::is('reportes-evento.*') ? 'true' : 'false' }}"
                        :active="request()->routeIs('evento.*')">
                        <span class="fe fe-bell "></span>
                        Reportes Eventos
                    </a>
                    <div class="{{ Route::is('reportes-evento.*') ? 'collapse show' : 'collapse' }}" id="evento">
                        <ul class="nav nav-sm flex-column">
                            <li class="nav-item">
                                <x-jet-responsive-nav-link href="{{ route('reportes-evento.index') }}"
                                    class="nav-link" :active="request()->routeIs('reportes-evento.index')">
                                    Eventos
                                </x-jet-responsive-nav-link>
                            </li>
                        </ul>
                    </div>
                </li>

                {{-- Menu Logs --}}
                <li class="nav-item">
                    <a class="nav-link" href="#log" data-bs-toggle="collapse" role="button"
                        aria-expanded="{{ Route::is('reportes-log.*') ? 'true' : 'false' }}" aria-controls="log"
                        :active="request()-> routeIs('log.*')">
                        <span class="fe fe-file-text"></span>
                        Reportes Logs
                    </a>
                    <div class="collapse {{ Route::is('log.*') ? 'show' : '' }}" id="log">
                        <ul class="nav nav-sm flex-column">
                            <li class="nav-item">
                                <x-jet-responsive-nav-link href="{{ route('reportes-log.index') }}" class="nav-link"
                                    :active="request()->routeIs('reportes-log.index')">
                                    Logs de eventos
                                </x-jet-responsive-nav-link>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>

            @if (auth()->user()->can('usuarios'))
                <hr class="navbar-divider my-3">
                <h6 class="navbar-heading">Administración</h6>
                <ul class="navbar-nav">
                    <li class="nav-item">
                        @if (Route::is('users.*'))
                            <a class="nav-link" href="#users" data-bs-toggle="collapse" role="button"
                                aria-expanded="true" aria-controls="users" :active="request() - > routeIs('users.*')">
                            @else
                                <a class="nav-link" href="#users" data-bs-toggle="collapse" role="button"
                                    aria-expanded="false" aria-controls="users"
                                    :active="request() - > routeIs('users.*')">
                        @endif
                        <span class="fe fe-user"></span>
                        Usuarios
                        </a>
                        @if (Route::is('users.*'))
                            <div class="collapse show" id="users">
                            @else
                                <div class="collapse" id="users">
                        @endif
                        <ul class="nav nav-sm flex-column">
                            <li class="nav-item">
                                <x-jet-responsive-nav-link href="{{ route('users.index') }}" class="nav-link"
                                    :active="request()->routeIs('users.index')">
                                    Administración
                                </x-jet-responsive-nav-link>
                            </li>
                        </ul>
                    </li>
                </ul>
        </div>

        @endif

        <!-- Push content down -->
        <div class="mt-auto"></div>

        @if ($showarray['demoMode'])
            <!-- Customize -->
            <div class="mb-4" id="popoverDemo" title="Make Dashkit Your Own!"
                data-bs-content="Switch the demo to Dark Mode or adjust the navigation layout, icons, and colors!">
                <a class="btn w-100 btn-primary" data-bs-toggle="offcanvas" href="#offcanvasDemo"
                    aria-controls="offcanvasDemo">
                    <i class="fe fe-sliders me-2"></i> Customize
                </a>
            </div>
        @endif

        @if ($showarray['navPosition'] == 'sidenav')
            <!-- User (md) -->
            <div class="navbar-user d-none d-md-flex" id="sidebarUser">

                <!-- Icon -->
                <!--<a class="navbar-user-link" data-bs-toggle="offcanvas" href="#sidebarOffcanvasActivity" aria-controls="sidebarOffcanvasActivity">
            <span class="icon">
              <i class="fe fe-bell"></i>
            </span>
          </a>-->

                <!-- Dropup -->
                <div class="dropup">

                    <!-- Toggle -->
                    <a href="#" id="sidebarIconCopy" class="dropdown-toggle" role="button"
                        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <div class="avatar avatar-sm avatar-online">
                            @if (Laravel\Jetstream\Jetstream::managesProfilePhotos())
                                <img src="{{ Auth::user()->profile_photo_url }}" alt="{{ Auth::user()->name }}"
                                    class="avatar-img rounded-circle">
                            @else
                                <img src="/assets/img/avatars/profiles/avatar-1.jpg" alt="Domiti profile"
                                    class="avatar-img rounded-circle">
                            @endif
                        </div>
                    </a>

                    <!-- Menu -->
                    <div class="dropdown-menu" aria-labelledby="sidebarIconCopy">
                        <x-jet-responsive-nav-link href="{{ route('profile.show') }}" :active="request()->routeIs('profile.show')"
                            class="dropdown-item">Perfil</x-jet-responsive-nav-link>
                        <!--<a href="/account-general.html" class="dropdown-item">Settings</a>-->

                        @if (Laravel\Jetstream\Jetstream::hasApiFeatures())
                            <hr class="dropdown-divider">

                            <x-jet-responsive-nav-link href="{{ route('api-tokens.index') }}" class="dropdown-item"
                                :active="request()->routeIs('api-tokens.index')">
                                {{ __('API Tokens') }}
                            </x-jet-responsive-nav-link>
                        @endif

                        <hr class="dropdown-divider">

                        <form method="POST" action="{{ route('logout') }}">
                            @csrf

                            <x-jet-responsive-nav-link href="{{ route('logout') }}" class="dropdown-item"
                                onclick="event.preventDefault();
                            this.closest('form').submit();">
                                {{ __('Desconectar') }}
                            </x-jet-responsive-nav-link>
                        </form>
                    </div>
                </div>
            </div>
        @endif
    </div> <!-- / .navbar-collapse -->
</nav>