@props(['items' => []])

<nav x-data="{ activeMenu: null }">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between h-16">
            <div class="flex items-center">
                <!-- Desktop Menu -->
                <div class="hidden md:block">
                    <div class="ml-10 flex items-baseline space-x-4">
                        {{-- Sections Dropdown (Fixed) --}}
                        <div class="relative" x-data="{ open: false }" @click.away="open = false">
                            <button @click="open = !open"
                                    class="bg-red-600 text-white hover:bg-red-700 font-medium transition-all duration-200 flex items-center space-x-2 px-4 py-2 rounded-md">
                                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round"
                                          stroke-linejoin="round"
                                          stroke-width="2"
                                          d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                                </svg>
                                <span>Sản phẩm</span>
                                <svg class="h-4 w-4 transform transition-transform duration-200"
                                     :class="{ 'rotate-180': open }"
                                     xmlns="http://www.w3.org/2000/svg"
                                     viewBox="0 0 20 20"
                                     fill="currentColor">
                                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                                </svg>
                            </button>

                            <template x-if="open">
                                <div class="fixed inset-0 bg-black bg-opacity-25 z-40"
                                     @click="open = false"></div>
                            </template>

                            <div x-show="open"
                                 x-transition:enter="transition ease-out duration-200"
                                 x-transition:enter-start="opacity-0 -translate-y-2"
                                 x-transition:enter-end="opacity-100 translate-y-0"
                                 x-transition:leave="transition ease-in duration-150"
                                 x-transition:leave-start="opacity-100 translate-y-0"
                                 x-transition:leave-end="opacity-0 -translate-y-2"
                                 class="absolute left-0 mt-1 w-72 rounded-lg shadow-lg bg-white/95 backdrop-blur ring-1 ring-gray-200 focus:outline-none z-50"
                 style="max-height: calc(100vh - 100px); overflow-y: auto;">
                                <div class="py-2 grid gap-0.5">
                                    @foreach(\App\Models\Section::where('status', true)->orderBy('order_section')->get() as $section)
                                        <a href="{{ route('sections.show', $section->id) }}"
                                           class="flex items-center px-4 py-3 hover:bg-red-50 group transition-colors duration-200">
                                            @if($section->icon)
                                                <div class="w-8 h-8 rounded-lg bg-red-100 group-hover:bg-red-200 flex items-center justify-center transition-all duration-200 mr-3">
                                                    <img src="{{ asset('storage/' . $section->icon) }}"
                                                         alt="{{ $section->title }} icon"
                                                         class="w-5 h-5 group-hover:scale-110 transition-transform duration-200">
                                                </div>
                                            @endif
                                            <div class="flex items-center justify-between flex-grow">
                                <span class="text-gray-700 group-hover:text-red-600 transition-colors duration-200">
                                    {{ $section->title }}
                                </span>
                                <svg class="w-5 h-5 text-gray-400 group-hover:text-red-500 transform group-hover:translate-x-1 transition-all duration-200" 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>
                            </div>
                                        </a>
                                    @endforeach
                                </div>
                            </div>
                        </div>

                        @foreach($items as $item)
                            @if($item->children->isEmpty())
                                <a href="{{ $item->getUrl() }}"
                                   class="text-gray-700 hover:text-red-600 hover:bg-red-50 font-medium transition-all duration-200 px-3 py-2 rounded-md
                                          {{ $item->isActive() ? 'text-red-600 bg-red-50' : '' }}">
                                    <div class="flex items-center space-x-1">
                        <span>{{ $item->getName() }}</span>
                        @if($item->isActive())
                            <svg class="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd"
                                      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                                      clip-rule="evenodd"/>
                            </svg>
                        @endif
                    </div>
                                </a>
                            @else
                                <div class="relative" x-data="{ open: false }" @click.away="open = false">
                                    <button @click="open = !open; $dispatch('menu-clicked', '{{ $item->id }}')"
                                            class="text-gray-700 hover:text-gray-900 hover:bg-red-200/80 font-medium transition-all duration-200 flex items-center space-x-1 px-3 py-2 rounded-md
                                                   {{ ($item->isActive() || $item->hasActiveChild()) ? 'text-furniture' : '' }}">
                                        <span>{{ $item->getName() }}</span>
                                        <svg class="h-4 w-4 transform transition-transform duration-200"
                                             :class="{ 'rotate-180': open }"
                                             xmlns="http://www.w3.org/2000/svg"
                                             viewBox="0 0 20 20"
                                             fill="currentColor">
                                            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                                        </svg>
                                    </button>

                                    <template x-if="open">
                                        <div class="fixed inset-0 bg-black bg-opacity-25 z-40"
                                             @click="open = false"></div>
                                    </template>

                                    <div x-show="open"
                                         x-transition:enter="transition ease-out duration-200"
                                         x-transition:enter-start="opacity-0 -translate-y-2"
                                         x-transition:enter-end="opacity-100 translate-y-0"
                                         x-transition:leave="transition ease-in duration-150"
                                         x-transition:leave-start="opacity-100 translate-y-0"
                                         x-transition:leave-end="opacity-0 -translate-y-2"
                                         class="absolute left-0 mt-1 rounded-lg shadow-lg bg-white/95 backdrop-blur ring-1 ring-gray-200 focus:outline-none z-50"
                                         style="min-width: 200px;">
                                        <div class="py-2">
                                            @foreach($item->children->sortBy('order_section') as $child)
                                                <x-recursive-menu-item :item="$child" />
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            @endif
                        @endforeach
                    </div>
                </div>
            </div>

            <!-- Mobile Hamburger Button -->
            <div class="md:hidden">
                <button type="button"
                        data-drawer-target="drawer-navigation"
                        data-drawer-show="drawer-navigation"
                        aria-controls="drawer-navigation"
                        class="inline-flex items-center justify-center p-2 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-gray-400">
                    <span class="sr-only">Mở menu</span>
                    <svg class="block h-6 w-6" 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="M4 6h16M4 12h16M4 18h16" />
                    </svg>
                </button>
            </div>
        </div>
    </div>
</nav>

<!-- Mobile Drawer Menu Content -->
<div id="drawer-navigation" class="fixed top-0 left-0 z-50 h-screen p-4 overflow-y-auto transition-transform -translate-x-full w-80 bg-white" tabindex="-1" aria-labelledby="drawer-navigation-label">
    <h5 id="drawer-navigation-label" class="text-base font-semibold text-gray-500 uppercase">Menu</h5>
    <button type="button" data-drawer-hide="drawer-navigation" aria-controls="drawer-navigation" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 absolute top-2.5 right-2.5 flex items-center justify-center">
        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 12 12M13 1 1 13"/>
        </svg>
        <span class="sr-only">Đóng menu</span>
    </button>
    <div class="py-4 overflow-y-auto">
        <div class="space-y-2">
            <!-- Sections Dropdown for Mobile -->
            <div x-data="{ openSections: false }" class="border-b border-gray-200 pb-3 mb-3">
                <button @click="openSections = !openSections" class="flex items-center justify-between w-full px-2 py-2.5 text-base font-medium text-red-600 transition duration-200 rounded-lg group hover:bg-red-50">
                    <div class="flex items-center">
                        <svg class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round"
                                  stroke-linejoin="round"
                                  stroke-width="2"
                                  d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                        </svg>
                        <span>Sản phẩm</span>
                    </div>
                    <svg class="w-4 h-4 transition-transform" :class="{'rotate-180': openSections}" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
                    </svg>
                </button>
                <div x-show="openSections"
                     x-transition:enter="transition-all ease-in-out duration-300"
                     x-transition:enter-start="opacity-0 max-h-0"
                     x-transition:enter-end="opacity-100 max-h-96"
                     x-transition:leave="transition-all ease-in-out duration-300"
                     x-transition:leave-start="opacity-100 max-h-96"
                     x-transition:leave-end="opacity-0 max-h-0"
                     class="px-2 pt-2 overflow-hidden">
                    @foreach(\App\Models\Section::where('status', true)->orderBy('order_section')->get() as $section)
                    <a href="{{ route('sections.show', $section->id) }}" class="flex items-center p-2 pl-5 text-gray-700 rounded-lg hover:bg-red-50 group">
                        @if($section->icon)
                        <div class="w-7 h-7 rounded-lg bg-red-100 group-hover:bg-red-200 flex items-center justify-center transition-all duration-200 mr-3">
                            <img src="{{ asset('storage/' . $section->icon) }}"
                                 alt="{{ $section->title }} icon"
                                 class="w-4 h-4 group-hover:scale-110 transition-transform duration-200">
                        </div>
                        @endif
                        <span class="flex-1 text-sm group-hover:text-red-600 transition-colors duration-200">{{ $section->title }}</span>
                        <svg class="w-3.5 h-3.5 text-gray-400 group-hover:text-red-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 8 14">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6-6 6"/>
                        </svg>
                    </a>
                    @endforeach
                </div>
            </div>

            <!-- Main Menu Items for Mobile -->
            @foreach($items as $item)
                @if($item->children->isEmpty())
                    <a href="{{ $item->getUrl() }}"
                       class="flex items-center p-2 text-gray-700 rounded-lg hover:bg-red-50 group {{ $item->isActive() ? 'text-red-600 bg-red-50' : '' }}">
                        <span class="flex-1">{{ $item->getName() }}</span>
                        @if($item->isActive())
                            <svg class="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd"
                                      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                                      clip-rule="evenodd"/>
                            </svg>
                        @endif
                    </a>
                @else
                    <div x-data="{ open: false }">
                        <button @click="open = !open"
                                class="flex items-center justify-between w-full p-2 text-gray-700 rounded-lg hover:bg-red-50 group {{ ($item->isActive() || $item->hasActiveChild()) ? 'text-red-600' : '' }}">
                            <span>{{ $item->getName() }}</span>
                            <svg class="w-4 h-4 transition-transform" :class="{'rotate-180': open}" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
                            </svg>
                        </button>
                        <div x-show="open"
                             x-transition:enter="transition-all ease-in-out duration-300"
                             x-transition:enter-start="opacity-0 max-h-0"
                             x-transition:enter-end="opacity-100 max-h-96"
                             x-transition:leave="transition-all ease-in-out duration-300"
                             x-transition:leave-start="opacity-100 max-h-96"
                             x-transition:leave-end="opacity-0 max-h-0"
                             class="pl-4 mt-1 overflow-hidden">
                            @foreach($item->children->sortBy('order_section') as $child)
                                <x-recursive-menu-item :item="$child" :mobile="true" />
                            @endforeach
                        </div>
                    </div>
                @endif
            @endforeach
        </div>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.store('menu', {
            activeId: null
        })
    })
</script>
@endpush