@php
    $generalSetting = App\Models\GeneralSetting::first();
    $pages = App\Models\Page::whereNotIn('id', [4, 5, 6, 7, 8])->get();
    $home_page=App\Models\Page::where('id','4')->first();
    $how_work_page=App\Models\Page::where('id','6')->first();
    $contact_page=App\Models\Page::where('id','5')->first();
    $registration_page=App\Models\Page::where('id','7')->first();
    $languages = App\Models\Language::get();

if (!Session::has('locale')) {
    $selected_language = App\Models\Language::where('default_language', '1')->first();
    Session::put('locale', $selected_language->code);
    Session::put('locale_name', $selected_language->name);
    Session::put('locale_image', $selected_language ? $selected_language->image : 'default.png');
    App::setLocale($selected_language->code);
    $lang = App::getLocale();
}
@endphp




        <!-- ===header-section=== -->
        <header class="active_header main_header py-[22px] lg:py-[30px]"
        data-active-header>
        <!-- ==navigation-logo-and-menu== -->
        <div class="small_container flex items-center justify-between">
            <!-- =logo= -->
            <a href="{{ url('/')}}"><picture><img
                src="{{ asset('admin/Image/AppSettings/Logo/' . $generalSetting->	system_logo) }}"
                alt="logo"
                class="max-w-[152px] xl:max-w-[177.174px]"></picture></a>
            <!-- =main-navigation-menu= -->
            <ul class="hidden lg:flex gap-4 xl:gap-5 items-center">
                @if ($home_page->show_header == '1')
                    <li><a href="{{ url('/')}}" class="text-base lg:text-sm font-bold duration-300 relative hover:text-red-color after:absolute after:w-0 after:h-[1.5px] after:bg-red-color after:left-0 after:-bottom-1 after:duration-300 hover:after:w-full">{{ translate('HOME') }}</a></li>
                @endif
                @if($how_work_page->show_header == '1')
                    <li><a href="{{ route('how-work')}}" class="text-base lg:text-sm font-bold duration-300 relative hover:text-red-color after:absolute after:w-0 after:h-[1.5px] after:bg-red-color after:left-0 after:-bottom-1 after:duration-300 hover:after:w-full">{{ translate('HOW IT WORKS') }}</a></li>
                @endif
                    <li><a href="{{ route('blog')}}" class="text-base lg:text-sm font-bold duration-300 relative hover:text-red-color after:absolute after:w-0 after:h-[1.5px] after:bg-red-color after:left-0 after:-bottom-1 after:duration-300 hover:after:w-full">{{ translate('BLOGS') }}</a></li>
                @if($contact_page->show_header == '1')
                    <li><a href="{{ route('contact')}}" class="text-base lg:text-sm font-bold duration-300 relative hover:text-red-color after:absolute after:w-0 after:h-[1.5px] after:bg-red-color after:left-0 after:-bottom-1 after:duration-300 hover:after:w-full">{{ translate('CONTACT') }}</a></li>
                @endif
                @if($registration_page->show_header == '1')
                    @guest
                        <li><a href="{{ route('profile-create') }}" class="text-base lg:text-sm font-bold duration-300 relative hover:text-red-color after:absolute after:w-0 after:h-[1.5px] after:bg-red-color after:left-0 after:-bottom-1 after:duration-300 hover:after:w-full">{{ translate('REGISTRATION') }}</a></li>
                    @endguest
                @endif
                @foreach ($pages as $page)
                    @if ($page->show_header)
                        <li><a href="{{ url('page/' . $page->slug) }}" class="text-base lg:text-sm font-bold duration-300 relative hover:text-red-color after:absolute after:w-0 after:h-[1.5px] after:bg-red-color after:left-0 after:-bottom-1 after:duration-300 hover:after:w-full">{{$page->title}}</a></li>
                    @endif
                @endforeach
                {{-- <li><a href="#" class="text-base lg:text-sm font-bold duration-300 relative hover:text-red-color after:absolute after:w-0 after:h-[1.5px] after:bg-red-color after:left-0 after:-bottom-1 after:duration-300 hover:after:w-full">MIJN
                        PROFIEL</a></li>
                <li><button class="py-2.5 px-9 rounded-[5px] bg-blue-color text-white text-sm font-semibold duration-300 hover:bg-red-color xl:py-[15px] whitespace-nowrap">Logout</button></li> --}}

                <li><a href="{{ route('login') }}"
                        class="py-2.5 px-9 rounded-[5px] bg-blue-color text-white text-sm font-semibold duration-300 hover:bg-red-color xl:py-[15px] whitespace-nowrap">
                    @auth
                        {{ Auth::user()->name }} <!-- Display user's name if logged in -->
                    @else
                        {{ translate('Log In') }} <!-- Display "Inloggen" if not logged in -->
                    @endauth</a>
                </li>




                <!-- =navigation-close-button= -->
                <button class="top-5 right-5 absolute duration-300 hover:rotate-90 w-8 h-8 lg:hidden" data-other-close-button="">
                    <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g clip-path="url(#clip0_291_1732)">
                            <path d="M30.5002 9.51686C29.8502 8.86686 28.8002 8.86686 28.1502 9.51686L20.0002 17.6502L11.8502 9.5002C11.2002 8.8502 10.1502 8.8502 9.5002 9.5002C8.8502 10.1502 8.8502 11.2002 9.5002 11.8502L17.6502 20.0002L9.5002 28.1502C8.8502 28.8002 8.8502 29.8502 9.5002 30.5002C10.1502 31.1502 11.2002 31.1502 11.8502 30.5002L20.0002 22.3502L28.1502 30.5002C28.8002 31.1502 29.8502 31.1502 30.5002 30.5002C31.1502 29.8502 31.1502 28.8002 30.5002 28.1502L22.3502 20.0002L30.5002 11.8502C31.1335 11.2169 31.1335 10.1502 30.5002 9.51686Z" fill="#323232"></path>
                        </g>
                        <defs>
                            <clipPath id="clip0_291_1732">
                                <rect width="40" height="40" fill="white"></rect>
                            </clipPath>
                        </defs>
                    </svg>
                </button>
            </ul>
            <!-- =menu-open-button= -->
            <button
                class="w-5 h-3 lg:w-[30px] lg:h-[18px] lg:hidden text-black"
                data-navigation-open-button>
                <svg viewBox="0 0 22 14" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path d="M21 1H9M21 7H1" stroke="#011026"
                        stroke-width="2" stroke-miterlimit="10"
                        stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M21 13H9" stroke="#011026" stroke-width="2"
                        stroke-miterlimit="10" stroke-linecap="round"
                        stroke-linejoin="round" />
                </svg>
            </button>
        </div>
    </header>

        <!-- =small-device-main-navigation-menu= -->
        <ul class="main_navigation_menu" data-navigation-menu>
            @if ($home_page->show_header == '1')
            <li><a href="{{ url('/')}}">{{ translate('HOME') }}</a></li>
            @endif
            @if($how_work_page->show_header == '1')
            <li><a href="{{ route('how-work')}}">{{ translate('HOW IT WORKS') }}</a></li>
            @endif
            <li><a href="{{ route('blog')}}">{{ translate('BLOGS') }}</a></li>
            @if($contact_page->show_header == '1')
            <li><a href="{{ route('contact')}}">CONTACT</a></li>
            @endif
            @if($registration_page->show_header == '1')
            @guest
            <li><a href="{{ route('profile-create')}}"
            class="text-base lg:text-sm font-bold duration-300 relative hover:text-red-color after:absolute after:w-0 after:h-[1.5px] after:bg-red-color after:left-0 after:-bottom-1 after:duration-300 hover:after:w-full">REGISTRATION</a></li>
            @endguest

            @endif
            @foreach ($pages as $page)
            @if ($page->show_header)
            <li><a href="{{ url('page/' . $page->slug) }}"
                class="text-base lg:text-sm font-bold duration-300 relative hover:text-red-color after:absolute after:w-0 after:h-[1.5px] after:bg-red-color after:left-0 after:-bottom-1 after:duration-300 hover:after:w-full">{{$page->title}}</a></li>
                @endif
                @endforeach


                <li><a href="{{ route('login') }}">
                    <button  class="py-2.5 px-9 rounded-[5px] bg-blue-color text-white text-sm font-semibold duration-300 hover:bg-red-color xl:py-[15px] whitespace-nowrap">
                        @auth
                        {{ Auth::user()->name }} 
                        @else
                            {{ translate('Log In') }} 
                        @endauth    
                    
                    </button></li>

                <div class="relative inline-block text-left">
                    <!-- Dropdown Toggle -->
                    <button
                        id="flagsDropdown"
                        type="button"
                        class="bg-transparent p-[14px] rounded-[5px] border-[1px] border-[#e2e2e2] w-1/2 text-[#6c6c6c] text-sm text-black font-medium bg-white outline-none focus:outline-none"

                        {{-- class="inline-flex items-center w-full px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" --}}
                        onclick="toggleDropdown()"
                        aria-expanded="false">
                        <div class="flex items-center gap-3">
                            <img
                                src="{{ asset('admin/assets/images/' . session('locale_image', 'default.png')) }}"
                                alt="Current Language"
                                class="w-5 h-5 rounded-full">
                            <span>{{ session('locale_name', 'English') }}</span>
                            <svg
                                class="w-5 h-5 ml-auto text-gray-500"
                                xmlns="http://www.w3.org/2000/svg"
                                fill="none"
                                viewBox="0 0 24 24"
                                stroke="currentColor"
                                aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                            </svg>
                        </div>

                    </button>

                    <!-- Dropdown Menu -->
                    <div
                        id="dropdownMenu"
                        class="hidden absolute left-0 z-10 mt-2 w-1/2 bg-white border border-gray-200 rounded-lg shadow-lg">
                        <ul class="py-1">
                            @foreach($languages as $language)
                            <li>
                                <a
                                    href="{{ route('admin.set.language', $language->code) }}"
                                    class="flex items-center gap-3 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900">
                                    <img
                                        src="{{ asset('admin/assets/images/' . $language->image) }}"
                                        alt="{{ $language->name }}"
                                        class="w-5 h-5 rounded-full">
                                    <span>{{ $language->name }}</span>
                                </a>
                            </li>
                            @endforeach
                        </ul>
                    </div>
                </div>


          
          
            <button
                class="top-5 right-5 absolute duration-300 hover:rotate-90 w-8 h-8 lg:hidden"
                data-navigation-close-button>
                <svg viewBox="0 0 40 40" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_291_1732)">
                        <path
                            d="M30.5002 9.51686C29.8502 8.86686 28.8002 8.86686 28.1502 9.51686L20.0002 17.6502L11.8502 9.5002C11.2002 8.8502 10.1502 8.8502 9.5002 9.5002C8.8502 10.1502 8.8502 11.2002 9.5002 11.8502L17.6502 20.0002L9.5002 28.1502C8.8502 28.8002 8.8502 29.8502 9.5002 30.5002C10.1502 31.1502 11.2002 31.1502 11.8502 30.5002L20.0002 22.3502L28.1502 30.5002C28.8002 31.1502 29.8502 31.1502 30.5002 30.5002C31.1502 29.8502 31.1502 28.8002 30.5002 28.1502L22.3502 20.0002L30.5002 11.8502C31.1335 11.2169 31.1335 10.1502 30.5002 9.51686Z"
                            fill="#323232" />
                    </g>
                    <defs>
                        <clippath id="clip0_291_1732">
                            <rect width="40" height="40" fill="white" />
                        </clippath>
                    </defs>
                </svg>
            </button>
        </ul>
        <!-- ==modal-overlay== -->
        <div class="modal_overlay" data-modal-overlay></div>
        <script>
            function toggleDropdown() {
                const dropdown = document.getElementById("dropdownMenu");
                dropdown.classList.toggle("hidden");
            }
            // Close dropdown if clicked outside
            window.addEventListener("click", function(e) {
                const flagsDropdown = document.getElementById("flagsDropdown");
                const dropdownMenu = document.getElementById("dropdownMenu");
                if (!flagsDropdown.contains(e.target)) {
                    dropdownMenu.classList.add("hidden");
                }
            });
        </script>