@push('styles')
    <style>
        li>ul {
            transform: translatex(100%) scale(0);
            list-style-type: none;
        }

        li:hover>ul {
            transform: translatex(101%) scale(1)
        }

        li>button svg {
            transform: rotate(-90deg)
        }

        li:hover>button svg {
            transform: rotate(-270deg)
        }

        .group:hover .group-hover\:scale-100 {
            transform: scale(1)
        }

        .group:hover .group-hover\:-rotate-180 {
            transform: rotate(180deg)
        }

        .scale-0 {
            transform: scale(0)
        }

        .min-w-32 {
            min-width: 8rem
        }
    </style>
@endpush



@foreach ($menus as $menu)
    @if ($menu->childMenu->isEmpty())
        <div class="outline-none px-[10px] xl:px-8  focus:outline-none  py-1 bg-white rounded-sm flex items-center ">
            <a href="{{ url($menu->slug) }}"
                class=" menu-item block   font-semibold hover:border-b-2 hover:border-sky-500 focus:text-brandBlue list-none">{{ $menu->name }}</a>
        </div>
    @else
        <div class="group inline-block ">
            <button aria-haspopup="true" aria-controls="menu"
                class="outline-none px-[10px] xl:px-4  focus:outline-none bg-white rounded-sm flex items-center ">
                <span class=" font-semibold  flex-1 pr-2 list-none	">{{ $menu->name }}</span>
                <span>
                    <svg class="fill-current h-4 w-4 transform group-hover:-rotate-180 transition duration-150 ease-in-out"
                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                        <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
                    </svg>
                </span>
            </button>
            <ul id="menu" aria-hidden="true"
                class="flex flex-col space-y-6 bg-white border p-4 rounded-md transform scale-0 group-hover:scale-100 absolute transition duration-150 ease-in-out origin-top min-w-32 z-50  ">
                @foreach ($menu->childMenu as $subMenu)
                    @if ($subMenu->childMenu->isEmpty())
                        <li class="rounded-sm px-3 py-1 hover:bg-brandBlue-100 list-none	">
                            <a class=" menu-item list-none" href="{{ url($subMenu->slug) }}">{{ $subMenu->name }}</a>
                        </li>
                    @else
                        <li class="rounded-sm  relative px-3 py-1 hover:bg-brandBlue-100">
                            <button aria-haspopup="true" aria-controls="menu-lang"
                                class="w-full  text-left flex items-center outline-none focus:outline-none list-none	">
                                <span class=" pr-1  flex-1 list-none">{{ $subMenu->name }}</span>
                                <span class="mr-auto ">
                                    <svg class="fill-current h-4 w-4 transition duration-150 ease-in-out"
                                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                        <path
                                            d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
                                    </svg>
                                </span>
                            </button>
                            <ul id="menu-lang" aria-hidden="true"
                                class="flex  flex-col space-y-6 bg-white p-8 border rounded-sm absolute top-0 right-0 transition duration-150 ease-in-out origin-top-left min-w-32">
                                @foreach ($subMenu->childMenu as $menuChild)
                                    @if ($menuChild->childMenu->isEmpty())
                                        <li class="rounded-sm  px-3  hover:bg-brandBlue-100 list-none	">
                                            <a class=" menu-item list-none	"
                                                href="{{ url($menuChild->slug) }}">{{ $menuChild->name }}</a>
                                        </li>
                                    @else
                                        <li class="rounded-sm  relative px-3 py-1 hover:bg-brandBlue-100">
                                            <button aria-haspopup="true"
                                                class="w-full  text-left flex items-center outline-none focus:outline-none">
                                                <span class=" pr-1  flex-1 list-none	"><a
                                                        href="{{ url($menuChild->slug) }}">{{ $menuChild->name }}</a>
                                                </span>
                                                <span class=" mr-auto">
                                                    <svg class="fill-current h-4 w-4 transition duration-150 ease-in-out"
                                                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                        <path
                                                            d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
                                                    </svg>
                                                </span>
                                            </button>
                                            <ul id="menu-lang-python" aria-hidden="true"
                                                class="bg-white border rounded-sm absolute top-0 right-0 transition duration-150 ease-in-out origin-top-left min-w-48">
                                                @foreach ($menuChild->childMenu as $child)
                                                @endforeach
                                            </ul>
                                        </li>
                                    @endif
                                @endforeach
                            </ul>

                        </li>
                    @endif
                @endforeach
            </ul>
        </div>
    @endif
@endforeach

@push('scripts')
    <script>
        const menuItems = document.querySelectorAll('.menu-item');
        menuItems.forEach((menuItem) => {
            menuItem.removeEventListener('click', handleMenuItemClick);
        });

        menuItems.forEach((menuItem, index) => {
            menuItem.addEventListener('click', handleMenuItemClick);
        });

        function handleMenuItemClick(event) {
            const index = [...menuItems].indexOf(event.currentTarget);
            localStorage.setItem('activeMenuItemIndex', index);

            window.location.href = event.target.getAttribute('href');
        }

        window.addEventListener('load', setActiveMenuItem);

        function setActiveMenuItem() {
            const activeItemIndex = localStorage.getItem('activeMenuItemIndex');

            if (activeItemIndex !== null) {
                menuItems.forEach((item, index) => {
                    if (index === parseInt(activeItemIndex)) {
                        item.classList.add('border-b-2', 'border-sky-500', 'text-sky-500');
                    } else {
                        item.classList.remove('border-b-2', 'border-sky-500', 'text-sky-500');
                    }
                });
            }
        }
    </script>
@endpush