@php use Illuminate\Support\Str; @endphp

<!-- Styles -->
<style>
    /* Top Header */
    #upperNav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: #F5FEF3;
        z-index: 50;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    #upperNav.hidden {
        transform: translateY(-100%);
        opacity: 0;
    }

    /* Lower Navigation */
    #lowerNav {
        position: fixed;
        left: 0;
        right: 0;
        background: #007300;
        z-index: 45;
        transition: top 0.3s ease;
    }

    #lowerNavLogo,
    #mobileNavLogo {
        display: block;
        opacity: 1;
    }

    @media (max-width: 1023px) {
        #upperNav {
            display: none !important;
        }
    }

    /* Mobile menu backdrop */
    .navbar-backdrop {
        background: rgba(245, 254, 243, 0.25);
    }
</style>

<header id="header" class="relative z-50 bg-[#F5FEF3] shadow-md">

    <!-- Top Header -->
    <nav id="upperNav" class="w-full px-10 py-2 lg:block border-b border-gray-200">
        <div class="container mx-auto flex justify-around items-center">
            <div class="flex justify-start">
                <a href="/"><img src="{{ asset('assets/images/Emblem_of_Nepal.svg.png') }}"
                        class="h-20 object-contain" alt="Government Logo"></a>
            </div>
            <div class="items-center text-center">
                <div class="flex flex-row justify-around gap-6 items-center">
                    <div><img src="{{ $settings->kvda_logo ? asset($settings->kvda_logo) : '' }}"
                            class="h-16 object-contain" alt="KVDA Logo"></div>
                    <div class="text-base flex flex-col text-left">
                        <h1 class="font-bold text-[18px] text-red-500">{{ __('header.kvda') }}</h1>
                        <h2 class="text-gray-800 text-base font-medium">{{ __('header.project_title') }}</h2>
                        <h1 class="font-bold text-[18px] text-primary">{{ __('header.urban_eba_project') }}</h1>
                    </div>
                </div>
            </div>
            <div class="flex justify-end gap-4">
                <a href="https://www.unep.org/"><img src="{{ $settings->un_logo ? asset($settings->un_logo) : '' }}"
                        class="h-24 object-contain" alt="GEF"></a>
                <a href="https://www.thegef.org/"><img src="{{ $settings->gef_logo ? asset($settings->gef_logo) : '' }}"
                        class="h-24 object-contain" alt="UNEP"></a>
            </div>
        </div>
    </nav>

    <!-- Lower Nav -->
    <nav id="lowerNav" class="px-4 pr-8 flex justify-between items-center shadow-lg">


        <!-- Desktop Menu -->
        <div class="hidden lg:flex justify-center items-center flex-grow py-2">
            <ul class="flex space-x-2">
                <li>
                    <a href="{{ url('/') }}" class="py-3 flex items-center text-white hover:bg-primary rounded-sm">
                        <!-- Heroicons Home SVG --> <svg fill="#fff" class="h-5 w-5 mr-1" viewBox="0 0 32 32"
                            version="1.1" xmlns="http://www.w3.org/2000/svg">
                            <g id="SVGRepo_bgCarrier" stroke="currentColor" stroke-width="1"></g>
                            <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                            <g id="SVGRepo_iconCarrier">
                                <title>home</title>
                                <path
                                    d="M0 14.016l2.016 1.984h4v14.016q0 0.832 0.576 1.408t1.408 0.576h4v-8q0-0.832 0.576-1.408t1.44-0.576h4q0.8 0 1.408 0.576t0.576 1.408v8h4q0.832 0 1.408-0.576t0.608-1.408v-14.016h4l1.984-1.984-16-14.016zM12 14.016q0-1.664 1.184-2.848t2.816-1.152 2.816 1.152 1.184 2.848-1.184 2.816-2.816 1.184-2.816-1.184-1.184-2.816z">
                                </path>
                            </g>
                        </svg> </a>
                </li>
                @foreach ($navMenus->sortBy('display_order') as $menu)
                    @php
                        $menuLink =
                            $menu->external_link && Str::startsWith($menu->external_link, ['http://', 'https://'])
                                ? $menu->external_link
                                : url($menu->slug);

                        $hasChildren = $menu->children->isNotEmpty();
                        $label = app()->getLocale() === 'np' ? $menu->name_np : $menu->name_en;
                    @endphp

                    <li class="relative" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">

                        {{-- No Children --}}
                        @if (!$hasChildren)
                            <a href="{{ $menuLink }}"
                                class="flex items-center px-4 py-2 text-white rounded-sm hover:text-[#e7e011] transition-all font-semibold">
                                {{ $label }}
                            </a>
                        @else
                            {{-- Has Children --}}
                            <button type="button"
                                class="px-4 py-2 text-white rounded-sm hover:text-[#e7e011] font-semibold"
                                :aria-expanded="open.toString()">
                                {{ $label }}
                            </button>

                            <ul x-show="open" x-transition
                                class="absolute left-0 mt-2 w-48 bg-white rounded shadow-lg z-20">

                                @foreach ($menu->children->sortBy('display_order') as $child)
                                    @php
                                        $childLink =
                                            $child->external_link &&
                                            Str::startsWith($child->external_link, ['http://', 'https://'])
                                                ? $child->external_link
                                                : url($child->slug);

                                        $childHasKids = $child->children->isNotEmpty();
                                        $childLabel = app()->getLocale() === 'np' ? $child->name_np : $child->name_en;
                                    @endphp

                                    <li class="relative" x-data="{ openSub: false }" @mouseenter="openSub = true"
                                        @mouseleave="openSub = false">

                                        <a href="{{ $childHasKids ? '#' : $childLink }}"
                                            class="flex justify-between items-center w-full px-4 py-2 text-gray-700 font-semibold hover:bg-green-600 hover:text-[#e7e011] transition rounded-sm">
                                            {{ $childLabel }}

                                            @if ($childHasKids)
                                                <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor"
                                                    viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        stroke-width="2" d="M9 5l7 7-7 7" />
                                                </svg>
                                            @endif
                                        </a>

                                        {{-- Level 3 --}}
                                        @if ($childHasKids)
                                            <ul x-show="openSub" x-transition
                                                class="absolute left-full top-0 ml-1 w-48 bg-white rounded shadow-lg z-30">

                                                @foreach ($child->children->sortBy('display_order') as $sub)
                                                    @php
                                                        $subLink =
                                                            $sub->external_link &&
                                                            Str::startsWith($sub->external_link, [
                                                                'http://',
                                                                'https://',
                                                            ])
                                                                ? $sub->external_link
                                                                : url($sub->slug);

                                                        $subLabel =
                                                            app()->getLocale() === 'np' ? $sub->name_np : $sub->name_en;
                                                    @endphp

                                                    <li>
                                                        <a href="{{ $subLink }}"
                                                            class="block px-4 py-2 text-gray-700 hover:bg-[#007300] hover:text-[#e7e011] rounded-sm transition">
                                                            {{ $subLabel }}
                                                        </a>
                                                    </li>
                                                @endforeach

                                            </ul>
                                        @endif

                                    </li>
                                @endforeach

                            </ul>
                        @endif

                    </li>
                @endforeach
            </ul>

            <div class="flex justify-around gap-1 text-white font-semibold mx-6">
                <a href="{{ route('locale', 'en') }}" class="mx-2 hover:text-red-500">EN</a>
                <p class="text-gray-300">|</p>
                <a href="{{ route('locale', 'np') }}" class="mx-2 hover:text-red-500">NP</a>
            </div>
        </div>

        <!-- Mobile Toggle & Top Header -->
        <header class="lg:hidden w-full fixed top-0 left-0 z-50 shadow-md bg-white -mb-[200pc]">
            <div class="container mx-auto flex flex-col">

                <!-- Top Row: Logo & Burger -->
                <div class="w-full flex justify-between items-center py-1 px-2">
                    <!-- Logo -->
                    <div class="flex flex-wrap"><a href="/" class="flex-shrink-0">
                            <img src="{{ asset('assets/images/logo (2).png') }}" class="h-16 sm:h-20 object-contain"
                                alt="KVDA Logo">
                        </a>
                        <a href="/" class="flex-shrink-0">
                            <img src="{{ asset('assets/images/Emblem_of_Nepal.svg.png') }}"
                                class="h-16 sm:h-20 object-contain" alt="KVDA Logo">
                        </a>
                    </div>
                    <div class="flex items-center text-sm sm:text-base text-gray-700 font-semibold">
                        <h2 class="text-red-500 text-xm font-bold px-4 ">KVDA-UEbA</h2>
                        <a href="{{ route('locale', 'en') }}" class="hover:text-red-500">EN</a>
                        <span class="text-gray-300">|</span>
                        <a href="{{ route('locale', 'np') }}" class="hover:text-red-500">NP</a>
                    </div>
                    <!-- Mobile Burger -->
                    <button id="burger" class="flex items-center text-primary p-2 cursor-pointer md:hidden">
                        <svg class="h-6 w-6 fill-current" viewBox="0 0 20 20">
                            <title>{{ __('header.mobile_menu') }}</title>
                            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
                        </svg>
                    </button>
                </div>

                <!-- Middle Row: Project Info -->
                <div id="projectInfo" class="flex flex-col items-center text-center px-4">
                    <h1 class="font-bold text-red-500 text-base">{{ __('header.kvda') }}</h1>
                    <h2 class="font-bold text-primary text-sm sm:text-lg">{{ __('header.project_title') }}</h2>
                </div>

            </div>
        </header>



    </nav>

    <!-- Mobile Menu -->
    <div id="mobile-menu" class="hidden fixed inset-0 z-50" x-data="{ openMenus: {} }">
        <div class="navbar-backdrop fixed inset-0"></div>
        <nav class="fixed top-0 right-0 bottom-0 flex flex-col w-5/6 max-w-sm py-6 px-6 bg-[#F5FEF3] overflow-y-auto">
            <div class="flex items-center mb-8">
                <a href="{{ url('/') }}" class="mr-auto text-lg font-bold">
                    <img id="mobileNavLogo" src="{{ asset('assets/images/KVDA-logo.jpeg') }}" class="w-24"
                        alt="{{ __('header.logo_alt') }}" />
                </a>
                <button id="close-menu" class="text-gray-400 hover:text-[#e7e011]">
                    <svg class="h-6 w-6 cursor-pointer" xmlns="http://www.w3.org/2000/svg" fill="none"
                        viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>

            <ul>
                <li>
                    <a href="{{ url('/') }}"
                        class="py-3 px-3 flex items-center text-sm text-gray-700 hover:bg-primary rounded-sm">
                        <!-- Heroicons Home SVG --> <svg fill="[#007300]" class="h-5 w-5 mr-1" viewBox="0 0 32 32"
                            version="1.1" xmlns="http://www.w3.org/2000/svg">
                            <g id="SVGRepo_bgCarrier" stroke="currentColor" stroke-width="1"></g>
                            <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                            <g id="SVGRepo_iconCarrier">
                                <title>home</title>
                                <path
                                    d="M0 14.016l2.016 1.984h4v14.016q0 0.832 0.576 1.408t1.408 0.576h4v-8q0-0.832 0.576-1.408t1.44-0.576h4q0.8 0 1.408 0.576t0.576 1.408v8h4q0.832 0 1.408-0.576t0.608-1.408v-14.016h4l1.984-1.984-16-14.016zM12 14.016q0-1.664 1.184-2.848t2.816-1.152 2.816 1.152 1.184 2.848-1.184 2.816-2.816 1.184-2.816-1.184-1.184-2.816z">
                                </path>
                            </g>
                        </svg> <span class="px-3">Home</span></a>
                </li>
                @foreach ($navMenus as $menu)
                    @php
                        $menuLink =
                            $menu->external_link && Str::startsWith($menu->external_link, ['http://', 'https://'])
                                ? $menu->external_link
                                : url($menu->slug);
                    @endphp
                    <li class="mb-1" x-data="{ open: false }">
                        @if ($menu->children->isEmpty())
                            <a href="{{ $menuLink }}"
                                class="block p-4 text-sm font-semibold text-gray-700 rounded hover:bg-[#007300] hover:text-[#e7e011]">
                                {{ app()->getLocale() == 'np' ? $menu->name_np : $menu->name_en }}
                            </a>
                        @else
                            <button @click="open = !open"
                                class="flex items-center justify-between w-full p-4 text-sm font-semibold text-gray-700 rounded hover:bg-[#007300] hover:text-[#e7e011]">
                                <span>{{ app()->getLocale() == 'np' ? $menu->name_np : $menu->name_en }}</span>
                                <svg class="w-4 h-4 transition-transform" :class="{ 'rotate-90': open }"
                                    fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M9 5l7 7-7 7" />
                                </svg>
                            </button>
                            <ul x-show="open" x-transition class="ml-4 border-l border-gray-200">
                                @foreach ($menu->children as $child)
                                    @php
                                        $childLink =
                                            $child->external_link &&
                                            Str::startsWith($child->external_link, ['http://', 'https://'])
                                                ? $child->external_link
                                                : url($child->slug);
                                    @endphp
                                    <li class="pt-1" x-data="{ openChild: false }">
                                        @if ($child->children->isEmpty())
                                            <a href="{{ $childLink }}"
                                                class="block p-3 pl-4 text-sm text-gray-700 rounded hover:bg-[#007300] hover:text-[#e7e011]">
                                                {{ app()->getLocale() == 'np' ? $child->name_np : $child->name_en }}
                                            </a>
                                        @else
                                            <button @click="openChild = !openChild"
                                                class="flex items-center justify-between w-full p-3 pl-4 text-sm text-gray-700 rounded hover:bg-[#007300] hover:text-[#e7e011]">
                                                <span>{{ app()->getLocale() == 'np' ? $child->name_np : $child->name_en }}</span>
                                                <svg class="w-4 h-4 transition-transform"
                                                    :class="{ 'rotate-90': openChild }" fill="none"
                                                    stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        stroke-width="2" d="M9 5l7 7-7 7" />
                                                </svg>
                                            </button>
                                            <ul x-show="openChild" x-transition class="ml-4 border-l border-gray-200">
                                                @foreach ($child->children as $sub)
                                                    @php
                                                        $subLink =
                                                            $sub->external_link &&
                                                            Str::startsWith($sub->external_link, [
                                                                'http://',
                                                                'https://',
                                                            ])
                                                                ? $sub->external_link
                                                                : url($sub->slug);
                                                    @endphp
                                                    <li>
                                                        <a href="{{ $subLink }}"
                                                            class="block p-3 pl-6 text-sm text-gray-600 rounded hover:bg-[#007300] hover:text-[#e7e011]">
                                                            {{ app()->getLocale() == 'np' ? $sub->name_np : $sub->name_en }}
                                                        </a>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        @endif
                                    </li>
                                @endforeach
                            </ul>
                        @endif
                    </li>
                @endforeach
            </ul>

            <div class="mt-auto flex justify-end pt-4">
                <img src="{{ asset('assets/images/KVDA-logo.jpeg') }}" class="h-10" alt="Logo" />
            </div>
        </nav>
    </div>
</header>

<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<script>
    document.addEventListener("DOMContentLoaded", () => {
        const burger = document.getElementById("burger");
        const burgerContainer = document.getElementById("burger-container");
        const mobileMenu = document.getElementById("mobile-menu");
        const closeMenu = document.getElementById("close-menu");
        const backdrop = document.querySelector(".navbar-backdrop");
        const upperNav = document.getElementById("upperNav");
        const lowerNav = document.getElementById("lowerNav");
        let lastScroll = window.scrollY;
        let scrollingUpDistance = 0;
        const scrollUpTrigger = 200;

        // Mobile Menu Toggle
        burger?.addEventListener("click", () => {
            mobileMenu.classList.remove("hidden");
            burgerContainer.classList.add("hidden");
        });
        closeMenu?.addEventListener("click", () => {
            mobileMenu.classList.add("hidden");
            burgerContainer.classList.remove("hidden");
        });
        backdrop?.addEventListener("click", () => {
            mobileMenu.classList.add("hidden");
            burgerContainer.classList.remove("hidden");
        });

        // Adjust lower nav position based on upper nav
        const adjustLowerNav = () => {
            if (!upperNav.classList.contains('hidden')) {
                lowerNav.style.top = upperNav.offsetHeight + 'px';
            } else {
                lowerNav.style.top = '0px';
            }
        };

        // Scroll behavior
        window.addEventListener("scroll", () => {
            const currentScroll = window.scrollY;

            if (currentScroll > lastScroll) {
                upperNav.classList.add("hidden");
                scrollingUpDistance = 0;
            } else {
                scrollingUpDistance += (lastScroll - currentScroll);
                if (scrollingUpDistance >= scrollUpTrigger) {
                    upperNav.classList.remove("hidden");
                    scrollingUpDistance = 0;
                }
            }

            lastScroll = currentScroll;
            adjustLowerNav();
        });

        // Adjust on load & resize
        adjustLowerNav();
        window.addEventListener("resize", adjustLowerNav);


    });
</script>
<script>
    let lastScrollTop = 0;
    const projectInfo = document.getElementById('projectInfo');

    window.addEventListener('scroll', function() {
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

        if (scrollTop > lastScrollTop && scrollTop > 50) {
            // Scrolling down
            projectInfo.style.display = 'none';
        } else {
            // Scrolling up
            projectInfo.style.display = 'flex';
        }

        lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
    });
</script>