@php
    $hasSubmenu = ($headerData['enableSubmenuRow'] ?? true) && filled(data_get($headerData, 'submenuMenus'));
@endphp

<div id="header-mobile-drawer" class="hidden fixed inset-0 md:hidden" style="z-index:250;">
    <div class="absolute inset-0 bg-black/50"></div>
    <div class="absolute left-0 top-0 h-full w-[300px] max-w-[86%] bg-white text-gray-900 shadow-2xl overflow-y-auto">
        {{-- Drawer Header --}}
        <div class="p-4 border-b border-gray-100 flex items-center justify-between">
            <span class="text-2xl font-bold italic text-gray-900">
                Cloth <span class="text-orange-500">Bd</span>
            </span>
            <button id="header-mobile-close" type="button" class="w-10 h-10 rounded-lg hover:bg-gray-100 transition-colors text-gray-500">
                <i class="fa fa-times text-lg"></i>
            </button>
        </div>

        {{-- Hotline --}}
        @if(($headerData['enableTopbar'] ?? true) && filled(data_get($headerData, 'settings.hotline_number')))
            <div class="px-4 py-3 border-b border-gray-100 flex items-center gap-2 text-sm">
                <i class="fa fa-phone text-orange-500 text-sm"></i>
                <span class="font-semibold text-gray-800">{{ data_get($headerData, 'settings.hotline_number') }}</span>
                <span class="text-gray-400 text-xs ml-auto">Hotline</span>
            </div>
        @endif

        {{-- Navigation Links --}}
        <nav class="mt-2 flex flex-col px-3">
            @foreach(data_get($headerData, 'primaryMenus', []) as $item)
                @php
                    $hasChildren = filled($item['children'] ?? null);
                @endphp
                <div class="border-b border-gray-50 last:border-b-0">
                    <a href="{{ $item['url'] }}" target="{{ $item['target'] ?? '_self' }}"
                       class="flex items-center justify-between py-3 px-3 rounded-lg font-medium text-gray-800 hover:bg-orange-50 hover:text-orange-600 transition-colors">
                        <span>
                            @if(filled($item['icon'] ?? null))
                                <i class="{{ $item['icon'] }} mr-2"></i>
                            @endif
                            {{ $item['title'] }}
                        </span>
                        @if($hasChildren)
                            <i class="fa fa-chevron-down text-[10px] text-gray-400"></i>
                        @endif
                    </a>
                    @if($hasChildren)
                        <div class="ml-4 pb-2 space-y-0.5">
                            @foreach($item['children'] as $child)
                                <a href="{{ $child['url'] }}" target="{{ $child['target'] ?? '_self' }}"
                                   class="block py-2 px-3 text-sm text-gray-500 hover:text-orange-500 rounded-md hover:bg-orange-50 transition-colors">
                                    {{ $child['title'] }}
                                </a>
                            @endforeach
                        </div>
                    @endif
                </div>
            @endforeach

            {{-- Submenu items --}}
            @if($hasSubmenu)
                <div class="mt-3 pt-3 border-t border-gray-100 px-3">
                    <p class="text-[10px] uppercase tracking-widest font-bold text-gray-400 mb-2">{{ data_get($headerData, 'activePrimary.title', 'More') }}</p>
                    @foreach(data_get($headerData, 'submenuMenus', []) as $item)
                        <a href="{{ $item['url'] }}" target="{{ $item['target'] ?? '_self' }}"
                           class="block py-2 text-sm text-gray-500 hover:text-orange-500 transition-colors">
                            {{ $item['title'] }}
                        </a>
                    @endforeach
                </div>
            @endif
        </nav>

        {{-- Bottom Actions --}}
        <div class="p-4 mt-4 border-t border-gray-100">
            <a href="{{ data_get($headerData, 'settings.order_track_url', url('/order-track')) }}" class="flex items-center gap-3 py-3 px-3 rounded-lg text-gray-700 hover:bg-orange-50 hover:text-orange-600 transition-colors font-medium">
                <i class="fa fa-truck-fast text-orange-500"></i>
                <span>{{ data_get($headerData, 'settings.order_track_label', 'Order Track') }}</span>
            </a>

            <div class="mt-3">
                @auth
                    <a href="{{ route('account.dashboard') }}" class="block rounded-lg bg-orange-500 hover:bg-orange-600 text-white px-4 py-3 font-bold text-center transition-colors shadow-sm">
                        My Account
                    </a>
                @else
                    <a href="{{ route('login') }}" class="block rounded-lg bg-orange-500 hover:bg-orange-600 text-white px-4 py-3 font-bold text-center transition-colors shadow-sm">
                        Login / Sign Up
                    </a>
                @endauth
            </div>
        </div>
    </div>
</div>