<div class="horizontal-menu">
    <nav class="navbar top-navbar">
        <div class="container">
            <div class="navbar-content">

                <a href="#" class="navbar-brand d-none d-lg-flex">
                    Noble<span>UI</span>
                </a>

                <!-- Logo-mini for small screen devices (mobile/tablet) -->
                <div class="logo-mini-wrapper">
                    <img src="{{ asset('assets/images/logo-mini-light.png') }}" class="logo-mini logo-mini-light" alt="logo">
                    <img src="{{ asset('assets/images/logo-mini-dark.png') }}" class="logo-mini logo-mini-dark" alt="logo">
                </div>

                <ul class="navbar-nav">
                    <li class="theme-switcher-wrapper nav-item">
                        <input type="checkbox" value="" id="theme-switcher">
                        <label for="theme-switcher">
                            <div class="box">
                                <div class="ball"></div>
                                <div class="icons">
                                    <i class="feather icon-sun"></i>
                                    <i class="feather icon-moon"></i>
                                </div>
                            </div>
                        </label>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="profileDropdown" role="button"
                            data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <img class="w-30px h-30px ms-1 rounded-circle" src="{{ asset('assets/images/avatar-8.png') }}" alt="profile">
                        </a>
                        <div class="dropdown-menu p-0" aria-labelledby="profileDropdown">
                            <div class="d-flex flex-column align-items-center border-bottom px-5 py-3">
                                <div class="mb-3">
                                    <img class="w-80px h-80px rounded-circle" src="{{ asset('assets/images/avatar-8.png') }}" alt="">
                                </div>
                                <div class="text-center">
                                    <p class="fs-16px fw-bolder">{{ Auth::user()->name }}</p>
                                    <p class="fs-12px text-secondary">{{ Auth::user()->email }}</p>
                                </div>
                            </div>
                            <ul class="list-unstyled p-1">
                                <li class="dropdown-item py-2">
                                    <a href="{{ route('logout') }}" class="text-body ms-0" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                                        <i class="me-2 icon-md" data-feather="log-out"></i>
                                        <span>Log Out</span>
                                    </a>
                                    <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                                        @csrf
                                    </form>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>

                <!-- navbar toggler for small devices -->
                <div data-toggle="horizontal-menu-toggle"
                    class="navbar-toggler navbar-toggler-right d-lg-none align-self-center">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>

            </div>
        </div>
    </nav>
    <nav class="bottom-navbar">
        <div class="container">
            <ul class="nav page-navigation">
                <li class="nav-item">
                    <a class="nav-link @if (Request::is('dashboard')) active @endif" href="{{ route('user.dashboard') }}">
                        <i class="link-icon" data-feather="box"></i>
                        <span class="menu-title">Dashboard</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link @if (Request::is('addiction')) active @endif" href="{{ route('user.addiction') }}">
                        <i class="link-icon" data-feather="search"></i>
                        <span class="menu-title">Addiction Test</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="{{ route('user.history') }}" class="nav-link @if (Request::is('history')) active @endif">
                    <i class="link-icon" data-feather="bar-chart-2"></i>
                    <span class="menu-title">History</span>
                </a>
                </li>
            </ul>
        </div>
    </nav>
</div>
