<div class="sm:hidden">
    @include('layouts.partials.header-mobile')
</div>

<div class="hidden sm:block">
    @include('layouts.partials.header-desktop')
</div>

<div
    class="fixed inset-x-0 bottom-0 top-14 sm:top-[72px] bg-black/40 z-40 lg:hidden"
    x-show="sidebarOpen"
    x-transition.opacity
    @click="sidebarOpen = false"
></div>

<aside
    id="app-sidebar"
    class="fixed left-0 top-14 sm:top-[72px] lg:top-0 h-[calc(100vh-56px)] sm:h-[calc(100vh-72px)] lg:h-screen w-[220px] sm:w-[260px] bg-[var(--dealer-nav-color)] border-r border-neutral-700 z-40 transform transition-transform duration-200 ease-out overflow-y-auto"
    :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'"
>
    <div class="px-1 py-4 space-y-2">
        @foreach(config('mtt_dashboard_menu', []) as $item)
            @include('layouts.partials.nav-item', ['item' => $item, 'depth' => 0, 'keyPath' => 'root'])
        @endforeach
    </div>
</aside>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const toggles = document.querySelectorAll('.nav-group-toggle');
        const sidebar = document.getElementById('app-sidebar');

        const getParts = (toggle) => {
            const container = toggle.closest('.nav-group-container');
            const children = container ? Array.from(container.children).find((el) => el.classList?.contains('nav-children')) : null;
            const divider = container ? Array.from(container.children).find((el) => el.classList?.contains('nav-group-divider')) : null;
            const chevron = toggle.querySelector('.nav-chevron');

            return { children, divider, chevron };
        };

        const setExpanded = (toggle, expanded) => {
            const { children, divider, chevron } = getParts(toggle);
            if (!children || !chevron) {
                return;
            }

            children.classList.toggle('hidden', !expanded);
            if (divider) {
                divider.classList.toggle('hidden', !expanded);
            }
            chevron.classList.toggle('rotate-180', expanded);
        };

        const scrollIntoViewIfNeeded = (element) => {
            if (!sidebar || !element) {
                return;
            }

            const sidebarRect = sidebar.getBoundingClientRect();
            const elementRect = element.getBoundingClientRect();

            // Scroll down if the element bottom is below the visible area.
            if (elementRect.bottom > sidebarRect.bottom) {
                const delta = elementRect.bottom - sidebarRect.bottom + 8;
                sidebar.scrollTop += delta;
            }

            // Scroll up if the element top is above the visible area.
            if (elementRect.top < sidebarRect.top) {
                const delta = sidebarRect.top - elementRect.top + 8;
                sidebar.scrollTop -= delta;
            }
        };

        const isExpanded = (toggle) => {
            const { children } = getParts(toggle);
            if (!children) {
                return false;
            }

            return !children.classList.contains('hidden');
        };

        const collapseDescendants = (toggle) => {
            const { children } = getParts(toggle);
            if (!children) {
                return;
            }

            const descendants = children.querySelectorAll('.nav-group-toggle');
            descendants.forEach((descendantToggle) => setExpanded(descendantToggle, false));
        };

        toggles.forEach((toggle) => {
            const forceOpen = toggle.dataset.forceOpen === '1';
            const { children, chevron } = getParts(toggle);
            if (!children || !chevron) {
                return;
            }

            setExpanded(toggle, forceOpen);
            if (forceOpen) {
                scrollIntoViewIfNeeded(children);
            }

            toggle.addEventListener('click', (event) => {
                event.preventDefault();
                const expanded = !isExpanded(toggle);
                setExpanded(toggle, expanded);

                if (expanded) {
                    const parentKey = toggle.dataset.navParentKey;
                    const depth = toggle.dataset.navDepth;

                    toggles.forEach((siblingToggle) => {
                        if (siblingToggle === toggle) {
                            return;
                        }

                        if (
                            siblingToggle.dataset.navParentKey === parentKey
                            && siblingToggle.dataset.navDepth === depth
                        ) {
                            setExpanded(siblingToggle, false);
                            collapseDescendants(siblingToggle);
                        }
                    });

                    scrollIntoViewIfNeeded(children);
                } else {
                    collapseDescendants(toggle);
                }
            });
        });
    });
</script>