<header class="app-header flex items-center px-4 gap-3.5">

    <!-- Sidenav Menu Toggle Button -->
    <button id="button-toggle-menu" class="nav-link p-2">
        <span class="sr-only">Menu Toggle Button</span>
        <span class="flex items-center justify-center">
            <i class="ri-menu-2-fill text-2xl"></i>
        </span>
    </button>

    <div class="w-1/5 hidden">
    <select name="year" class="form-select" id="">
        <option value="{{date('Y')}}">{{date('Y')}}</option>
        <option value="{{date('Y')-1}}">{{date('Y')-1}}</option>
    </select>
    </div>


    <!-- Language Dropdown Button -->
    <div class="relative ms-auto">
    </div>
    
    <!-- Profile Dropdown Button -->
    <div class="relative">
        <button data-fc-type="dropdown" data-fc-placement="bottom-end" type="button" class="nav-link flex items-center gap-2.5 px-3 ">
            {{-- <img src="{{asset('assets/images/users/avatar-1.jpg')}}" alt="user-image" class="rounded-full h-8"> --}}
            {{session('name')}}
        </button>

        <div class="fc-dropdown fc-dropdown-open:opacity-100 hidden opacity-0 w-44 z-50 transition-all duration-300 bg-white shadow-lg border rounded-lg py-2 border-gray-200 dark:border-gray-700 dark:bg-gray-800">
            <!-- item-->
            {{-- <h6 class="flex items-center py-2 px-3 text-xs text-gray-800 dark:text-gray-400">Hello ! &nbsp;{{session('name')}}</h6> --}}

            <!-- item-->
            <a href="{{url('logout')}}" class="flex items-center gap-2 py-1.5 px-4 text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300">
                <i class="ri-logout-box-line text-lg align-middle"></i>
                <span>Logout</span>
            </a>
        </div>
    </div>
</header>