@props(['menu'])

@if($menu && $menu->menuItems->count())
    @foreach($menu->menuItems as $item)
        {{-- Desktop Menu --}}

        @if($item->children->count())
            <div x-data="{ open: false }" class="relative">

                <button
                    @click="open = !open"
                    class="flex items-center space-x-1 gap-3 text-gray-700 hover:text-blue-600 focus:outline-none"
                >
                    {{ $item->title }}

                    <svg class="w-4 h-4 transform transition"
                         :class="{ 'rotate-180': open }"
                         fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M19 9l-7 7-7-7" />
                    </svg>
                </button>

                {{-- Dropdown --}}
                <div
                    x-show="open"
                    @click.away="open = false"
                    x-transition
                    class="absolute mt-2 w-48 bg-white border rounded-md shadow-lg py-2 z-20 right-0"
                >
                    @foreach($item->children as $child)

                        @php
                            $currentSlug = request()->segment(1);
                            $parameters = $child->parameters;
                            $slug = null;
                            if(isset($parameters['slug'])){
                                $slug = $parameters['slug'];
                            }
                            $isActive = $currentSlug == $slug;
                        @endphp

                        <x-nav-link
                            class="w-full block px-4 py-2"
                            spa="true" href="{{\App\Helpers\MenuHelper::getUrl($child)}}"
                            active="{{ $isActive }}"
                        >
                            {{ $child->title }}
                        </x-nav-link>
                    @endforeach
                </div>
            </div>

        @else
            {{-- Normal link --}}
            @php
                $currentSlug = request()->segment(1);
                $parameters = $item->parameters;
                $slug = null;
                if(isset($parameters['slug'])){
                    $slug = $parameters['slug'];
                }
                $isActive = $currentSlug == $slug;
            @endphp
            <x-nav-link
                spa="true"
                href="{{ \App\Helpers\MenuHelper::getUrl($item) }}"
                active="{{ $isActive }}"
            >
                {{ $item->title }}
            </x-nav-link>
        @endif

    @endforeach
@endif