@if (!empty($page_init['contact']['work']) || !empty($page_init['setting']['header_desc']) || !empty($page_init['contact']['tel'][0]) || !empty($page_init['contact']['email'][0]))
    <div class="bg-med-primary text-white text-xs py-2 px-4 hidden xl:block">
        <div class="container mx-auto flex justify-between items-center">
            <div class="flex items-center space-x-2 w-1/3">
                @if (!empty($page_init['contact']['work']))
                    <i class="far fa-clock"></i>
                    <span>{{ $page_init['contact']['work'] }}</span>
                @endif
            </div>
            <div class="text-center w-1/3 font-medium">
                @if (!empty($page_init['setting']['header_desc']))
                    {{ $page_init['setting']['header_desc'] }}
                @endif
            </div>
            <div class="flex justify-end items-center space-x-4 w-1/3">
                @if (!empty($page_init['contact']['tel'][0]))
                    <a class="hover:text-med-secondary transition" href="tel:{{ $page_init['contact']['tel'][0] }}">
                        <i class="fas fa-phone-alt mr-1"></i>
                        {{ str_format($page_init['contact']['tel'][0], '-', [1, 3, 2, 4]) }}
                    </a>
                @endif
                @if (!empty($page_init['contact']['email'][0]))
                    <a class="hover:text-med-secondary transition" href="mailto:{{ $page_init['contact']['email'][0] }}">
                        <i class="fas fa-envelope mr-1"></i>
                    </a>
                @endif
                @php
                    $social = $page_init['contact']['social'] ?? [];
                    $icon = ['line', 'facebook', 'instagram', 'tiktok', 'youtube'];
                @endphp
                @foreach ($icon as $i)
                    @if (empty($social[$i]['url']))
                        @continue;
                    @endif

                    <a class="hover:text-med-secondary transition" href="{{ $social[$i]['url'] }}" target="_blank">
                        <i class="fa-brands fa-{{ $i }}"></i>
                    </a>
                @endforeach
            </div>
        </div>
    </div>
@endif

<nav class="bg-white shadow-md sticky top-0 z-50">
    <div class="mx-auto xl:container">
        <div class="flex justify-between items-center h-20 relative px-4 sm:px-6 xl:px-0">
            <div class="flex items-center gap-7 xl:hidden z-50">
                <button class="text-gray-600 hover:text-med-primary focus:outline-none" id="mobile-menu-btn">
                    <i class="fas fa-bars text-2xl"></i>
                </button>
                @if (!empty($page_init['contact']['social']['line']['url']))
                    <a class="flex items-center text-[#00B900] hover:text-[#029702] transition" href="{{ $page_init['contact']['social']['line']['url'] }}" title="{{ $page_init['contact']['social']['line']['name'] ?? '' }}" target="_blank" rel="noopener">
                        <i class="fa-brands fa-line text-xl"></i>
                    </a>
                @endif
            </div>
            <div class="flex-none flex items-center z-50 bg-white h-full absolute left-1/2 transform -translate-x-1/2 xl:relative xl:left-auto xl:transform-none xl:mr-0">
                @if (!empty($page_init['setting']['logo']['header']))
                    <a class="flex items-center" href="{{ $page_init['link_index'] }}">
                        <img class="h-[2.5rem] md:h-[3.5rem]" src="{{ $page_init['setting']['logo']['header'] }}" alt="Logo">
                    </a>
                @endif
            </div>
            @if (!empty($page_init['contact']['social']['line']['url']))
                <div class="hidden xl:flex items-center border-l border-gray-600 pl-4">
                    <a class="flex items-center gap-2 text-[#00B900] hover:text-[#029702] transition" href="{{ $page_init['contact']['social']['line']['url'] }}" title="{{ $page_init['contact']['social']['line']['name'] ?? '' }}" target="_blank" rel="noopener">
                        <i class="fa-brands fa-line text-xl"></i>
                        <span class="text-sm font-medium">{{ $page_init['contact']['social']['line']['name'] ?? '' }}</span>
                    </a>
                </div>
            @endif
            <div class="w-[4.5rem] xl:hidden" aria-hidden="true"></div>
            <div class="absolute top-20 left-0 w-full bg-white shadow-lg xl:shadow-none xl:bg-transparent xl:static xl:flex-1 xl:flex xl:items-center xl:justify-between flex-col xl:flex-row border-t xl:border-none border-gray-100 transition-all duration-500 ease-in-out z-40 overflow-hidden max-h-0 opacity-0 invisible p-0 xl:max-h-full xl:opacity-100 xl:visible xl:overflow-visible xl:p-0" id="main-menu">
                <div class="xl:hidden mb-4 relative p-4 pb-0 xl:p-0">
                    <form action="{{ mwz_route('frontend.search') }}" method="get">
                        <input class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:border-med-primary text-sm" name="q" type="text" placeholder="{{ __('frontend::lang.label.search') }}">
                    </form>
                    <div class="absolute left-7 top-6 xl:top-2.5 text-gray-400">
                        <i class="fas fa-search"></i>
                    </div>
                </div>
                <div class="flex flex-col xl:flex-row xl:space-x-6 xl:flex-1 xl:justify-center w-full xl:w-auto">
                    @if (!empty($page_init['menu_header'][0]))
                        @foreach ($page_init['menu_header'] as $item)
                            @php
                                $add_class = 'text-gray-600 hover:text-med-primary border-transparent hover:border-med-primary  xl:hover:border-med-primary transition';
                                if ($page_init['highlight_menu'] && $item['uid'] == $page_init['meta']['uid']) {
                                    $add_class = 'text-med-primary border-med-primary bg-med-gray xl:bg-transparent rounded xl:rounded-none';
                                }
                            @endphp

                            @if ($item['id'] == 5 && !auth()->guard('member')->check())
                                <a class="block xl:inline-block py-2 xl:py-1 px-4 xl:px-0 font-medium border-l-4 xl:border-l-0 xl:border-b-2 {{ $add_class }}" href="javascript:void(0)" onclick="openLoginModal('{{ mwz_route('frontend.login') . '?redirect=' . urlencode($item['url']) }}')">
                                @else
                                    <a class="block xl:inline-block py-2 xl:py-1 px-4 xl:px-0 font-medium border-l-4 xl:border-l-0 xl:border-b-2 {{ $add_class }}" href="{{ $item['url'] ?? 'javascript:void(0)' }}">
                            @endif
                            {{ $item['name'] ?? '' }}
                            </a>
                        @endforeach
                    @endif
                </div>
                <div class="flex flex-col xl:flex-row xl:items-center xl:justify-end gap-4 xl:gap-5 mt-4 xl:mt-0 pt-4 xl:pt-0 border-t xl:border-none border-gray-100 xl:ml-auto px-4 xl:px-0 pb-4 xl:pb-0 xl:w-auto xl:flex-none">
                    <a class="hidden xl:block text-gray-500 hover:text-med-primary transition" href="{{ mwz_route('frontend.search') }}">
                        <i class="fas fa-search text-xl"></i>
                    </a>
                    <div class="flex items-center justify-between xl:justify-start xl:border-l xl:border-r border-gray-300 px-0 xl:px-3 mx-0 xl:mx-2 text-sm">
                        <span class="xl:hidden text-gray-600 font-medium">{{ __('frontend::lang.label.language') }}</span>
                        <div class="flex items-center">
                            @foreach ($page_init['lang_switch'] ?? [] as $k => $v)
                                @php
                                    $add_class = 'text-gray-400 hover:text-med-primary';
                                    if ($k == $page_init['lang']) {
                                        $add_class = 'text-med-primary hover:underline';
                                    }
                                @endphp
                                <a class="focus:outline-none {{ $add_class }}" href="{{ $v ?? 'javascript:void(0)' }}">
                                    {{ __('frontend::lang.lang.' . $k) }}
                                </a>
                                @if (!$loop->last)
                                    <span class="mx-1 text-gray-400">/</span>
                                @endif
                            @endforeach
                        </div>
                    </div>
                    @if (Auth::guard('member')->check())
                        <div class="hidden xl:block relative group z-50">
                            <button class="text-gray-500 hover:text-med-primary transition flex items-center">
                                <i class="far fa-user-circle text-2xl"></i>
                            </button>
                            <div class="absolute right-0 top-full pt-2 w-64 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform origin-top-right z-50">
                                <div class="bg-white rounded-xl shadow-xl border border-gray-100 overflow-hidden">
                                    <nav class="py-2">
                                        @foreach ($page_init['menu_profile'] as $item)
                                            @if ($item['name'] != 'logout')
                                                @php
                                                    $chk_str = str_contains($page_init['menu_profile_route'], $item['name']);
                                                @endphp
                                                <a class="flex items-center px-4 py-2.5 text-sm font-medium {{ $chk_str ? 'bg-med-primary text-white' : 'text-med-dark hover:bg-gray-50 hover:text-med-primary' }} transition-all" href="{{ $item['url'] ?? 'javascript:void(0)' }}">
                                                    <i class="{{ $item['icon'] ?? '' }} w-5 text-center mr-3 {{ $chk_str ? '' : 'text-gray-400' }}"></i>
                                                    {{ $item['label'] ?? '' }}
                                                </a>
                                            @else
                                                <div class="border-t border-gray-200 my-2"></div>
                                                <a class="flex items-center px-4 py-2.5 text-sm font-medium text-red-600 hover:bg-red-50 transition-all" href="{{ $item['url'] ?? 'javascript:void(0)' }}">
                                                    <i class="{{ $item['icon'] ?? '' }} w-5 text-center mr-3"></i>
                                                    {{ $item['label'] ?? '' }}
                                                </a>
                                            @endif
                                        @endforeach
                                    </nav>
                                </div>
                            </div>
                        </div>
                        <livewire:frontend::section.cart />
                    @else
                        <div class="hidden xl:flex xl:items-center gap-3 xl:gap-2 w-full xl:w-auto">
                            <a class="text-center text-sm text-gray-600 hover:text-med-primary font-medium py-2 xl:py-0 border border-med-primary xl:border-none rounded-lg xl:rounded-none" href="{{ mwz_route('frontend.login') }}">
                                {{ __('frontend::lang.label.login') }}
                            </a>
                            <a class="text-center text-sm bg-med-primary text-white px-4 py-2 rounded-lg xl:rounded-full hover:bg-med-dark transition shadow-sm" href="{{ mwz_route('frontend.register') }}">
                                {{ __('frontend::lang.label.register') }}
                            </a>
                        </div>
                    @endif
                </div>
            </div>
            <div class="flex items-center gap-4 xl:gap-5 xl:hidden z-50">
                @if (Auth::guard('member')->check())
                    <div class="relative group z-50">
                        <button class="text-gray-500 hover:text-med-primary transition" id="mobile-profile-btn">
                            <i class="far fa-user-circle text-2xl"></i>
                        </button>
                        <div class="absolute right-0 top-full mt-2 w-64 bg-white rounded-xl shadow-xl border border-gray-100 overflow-hidden opacity-0 invisible transition-all duration-300 transform origin-top-right z-50" id="mobile-profile-dropdown">
                            <nav class="py-2">
                                @foreach ($page_init['menu_profile'] as $item)
                                    @if ($item['name'] != 'logout')
                                        @php
                                            $chk_str = str_contains($page_init['menu_profile_route'], $item['name']);
                                        @endphp
                                        <a class="flex items-center px-4 py-2.5 text-sm font-medium {{ $chk_str ? 'bg-med-primary text-white' : 'text-med-dark hover:bg-gray-50 hover:text-med-primary' }} transition-all" href="{{ $item['url'] ?? 'javascript:void(0)' }}">
                                            <i class="{{ $item['icon'] ?? '' }} w-5 text-center mr-3 {{ $chk_str ? '' : 'text-gray-400' }}"></i>
                                            {{ $item['label'] ?? '' }}
                                        </a>
                                    @else
                                        <div class="border-t border-gray-200 my-2"></div>
                                        <a class="flex items-center px-4 py-2.5 text-sm font-medium text-red-600 hover:bg-red-50 transition-all" href="{{ $item['url'] ?? 'javascript:void(0)' }}">
                                            <i class="{{ $item['icon'] ?? '' }} w-5 text-center mr-3"></i>
                                            {{ $item['label'] ?? '' }}
                                        </a>
                                    @endif
                                @endforeach
                            </nav>
                        </div>
                    </div>
                    <a class="cart-trigger text-gray-500 hover:text-med-primary transition relative" href="{{ mwz_route('frontend.checkout_step01') }}">
                        <i class="fas fa-shopping-cart text-xl"></i>
                        <span class="cart-count absolute -top-2 -right-2 bg-red-500 text-white text-[10px] font-bold px-1.5 py-0.5 rounded-full transition-transform duration-200 transform">{{ $page_init['cart_item_count'] ?? 0 }}</span>
                    </a>
                @else
                    <a class="text-gray-500 hover:text-med-primary transition" href="{{ mwz_route('frontend.login') }}">
                        <i class="fas fa-right-to-bracket text-2xl"></i>
                    </a>
                @endif
            </div>
        </div>
    </div>
</nav>