@php
    $headerData = $headerData ?? app(\App\Services\HeaderDataService::class)->data();
@endphp

{{-- Success Message --}}
@if(session('success'))
    <div id="success-alert" class="fixed top-24 right-5 bg-green-500 text-white px-6 py-4 rounded-xl shadow-2xl flex items-center gap-3 animate-bounce border-2 border-white" style="z-index:200;">
        <i class="fa fa-check-circle text-xl"></i>
        <span class="font-bold">{{ session('success') }}</span>
    </div>
    <script>setTimeout(() => document.getElementById('success-alert')?.remove(), 5000);</script>
@endif

<header id="site-header" class="fixed top-0 z-50 w-full bg-white shadow-sm">
    @include('partials.header.topbar')
    @include('partials.header.main')
    @include('partials.header.primary-nav')
    @include('partials.header.sub-nav')
</header>

@include('partials.header.mobile-drawer')

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const btn = document.getElementById('account-menu-btn');
        const dropdown = document.getElementById('account-dropdown');
        const openDrawer = document.getElementById('header-mobile-open');
        const closeDrawer = document.getElementById('header-mobile-close');
        const drawer = document.getElementById('header-mobile-drawer');
        const mobileSearchBtn = document.getElementById('header-mobile-search-toggle');
        const mobileSearchBar = document.getElementById('header-mobile-search-bar');
        const siteBody = document.querySelector('.site-body');

        // Scroll shrink header
        if (siteBody) {
            let ticking = false;
            window.addEventListener('scroll', function () {
                if (!ticking) {
                    requestAnimationFrame(function () {
                        if (window.scrollY > 80) {
                            siteBody.classList.add('is-header-compact');
                        } else {
                            siteBody.classList.remove('is-header-compact');
                        }
                        ticking = false;
                    });
                    ticking = true;
                }
            });
        }

        if (btn && dropdown) {
            btn.addEventListener('click', function (e) {
                e.stopPropagation();
                dropdown.classList.toggle('hidden');
            });

            document.addEventListener('click', function (e) {
                if (!btn.contains(e.target) && !dropdown.contains(e.target)) {
                    dropdown.classList.add('hidden');
                }
            });
        }

        if (openDrawer && drawer) {
            openDrawer.addEventListener('click', function () {
                drawer.classList.remove('hidden');
            });
        }

        if (closeDrawer && drawer) {
            closeDrawer.addEventListener('click', function () {
                drawer.classList.add('hidden');
            });
        }

        if (mobileSearchBtn && mobileSearchBar) {
            mobileSearchBtn.addEventListener('click', function () {
                mobileSearchBar.classList.toggle('hidden');
            });
        }

        // Desktop dropdown menus
        // Dropdowns are moved to document.body so they aren't clipped by overflow-x-auto on the nav
        var desktopNavLinks = document.querySelectorAll('.desktop-nav-link[data-has-children="1"]');
        var activeDropdown = null;
        var activeLink = null;
        var hideTimer = null;

        // Move all dropdown menus to body so they escape overflow clipping
        desktopNavLinks.forEach(function(link) {
            var dd = link.parentElement.querySelector('.desktop-dd-menu');
            if (dd) {
                link._dropdown = dd;
                document.body.appendChild(dd);
            }
        });

        function positionDropdown(dd, linkEl) {
            var rect = linkEl.getBoundingClientRect();
            dd.style.left = rect.left + 'px';
            dd.style.top = rect.bottom + 'px';
        }

        function showDrop(linkEl) {
            if (hideTimer) { clearTimeout(hideTimer); hideTimer = null; }
            if (activeDropdown) { activeDropdown.style.display = 'none'; }
            var dd = linkEl._dropdown;
            if (!dd) return;
            positionDropdown(dd, linkEl);
            dd.style.display = 'block';
            activeDropdown = dd;
            activeLink = linkEl;
        }

        function hideDrop(delay) {
            if (hideTimer) clearTimeout(hideTimer);
            hideTimer = setTimeout(function () {
                if (activeDropdown) { activeDropdown.style.display = 'none'; activeDropdown = null; activeLink = null; }
            }, delay || 200);
        }

        desktopNavLinks.forEach(function (link) {
            link.addEventListener('mouseenter', function () {
                showDrop(link);
            });
            link.addEventListener('mouseleave', function () {
                hideDrop(300);
            });
        });

        // Keep dropdown visible on hover
        document.addEventListener('mouseover', function (e) {
            var dd = e.target.closest('.desktop-dd-menu');
            if (dd && dd.style.display !== 'none') {
                if (hideTimer) { clearTimeout(hideTimer); hideTimer = null; }
            }
        });

        document.addEventListener('mouseout', function (e) {
            var dd = e.target.closest('.desktop-dd-menu');
            if (dd && dd.style.display !== 'none') {
                var related = e.relatedTarget;
                if (!related || !dd.contains(related)) {
                    hideDrop(300);
                }
            }
        });

        // Reposition dropdown on scroll/resize so it stays aligned
        window.addEventListener('scroll', function() {
            if (activeDropdown && activeLink) {
                positionDropdown(activeDropdown, activeLink);
            }
        }, true);
        window.addEventListener('resize', function() {
            if (activeDropdown && activeLink) {
                positionDropdown(activeDropdown, activeLink);
            }
        });
    });
</script>