@php
    $headerLogos = [];
    if (!empty($page_init['setting']['logo']['gallery']) && is_array($page_init['setting']['logo']['gallery'])) {
        $headerLogos = $page_init['setting']['logo']['gallery'];
    } elseif (!empty($page_init['setting']['logo']['header'])) {
        $headerLogos = [$page_init['setting']['logo']['header']];
    }
@endphp
<header>
    <div class="container">
        <div class="items-center justify-between hidden lg:flex pb-[1rem]">
            <div class="wl">
                <div class="language">
                    <p class="full-url {{ empty($page_init['lang']) || $page_init['lang'] == 'th' ? 'active' : '' }}">
                        TH<a href="{{ $page_init['lang_switch']['th'] }}"></a>
                    </p>
                    <p class="full-url {{ $page_init['lang'] == 'en' ? 'active' : '' }}">EN
                        <a href="{{ $page_init['lang_switch']['en'] }}"></a>
                    </p>
                </div>
            </div>
            <div class="wc ass">
                <div class="logo-wrapper full-url">
                    @foreach ($headerLogos as $headerLogo)
                        @if (!empty($headerLogo) && CheckFileInServer($headerLogo))
                            <img src="{{ $headerLogo }}" />
                        @endif
                    @endforeach
                    @if (!empty($headerLogos))
                        <a href="{{ mwz_route('frontend.index') }}"></a>
                    @endif
                </div>
            </div>
            <div class="wr header-actions">
                <div class="butn butn-2nd text-whiten btn-login-ssnp full-url">
                    <span class="btn-login-ssnp__label">@lang('frontend::lang.login_us')</span>
                    <span class="btn-login-ssnp__divider"></span>
                    <span class="btn-login-ssnp__brand">
                        <span>SSNP</span>
                        <span>ONLINE</span>
                    </span>
                    <a href="{{ !empty($page_init['setting']['login_url']) ? $page_init['setting']['login_url'] : '#' }}"
                        target="_blank" rel="noopener"></a>
                </div>
                <div class="butn butn-2nd text-whiten full-url whitespace-nowrap">@lang('frontend::lang.register_us')
                    <a href="{{ !empty($page_init['register']) ? $page_init['register'] : '#' }}"></a>
                </div>
            </div>
        </div>
    </div>
    <div class="bg-linear-gold hr1 hidden lg:block"></div>
    <div class="container">
        <div x-data="{ open: false }"
            class="flex flex-col max-w-screen-xl lg:px-4 mx-auto lg:items-center lg:justify-between lg:flex-row lg:px-6 lg:px-8">
            <div class="py-2 flex flex-row items-center  justify-between lg:hidden">
                <div class="wc">
                    <div class="logo-wrapper full-url">
                        @foreach ($headerLogos as $headerLogo)
                            @if (!empty($headerLogo) && CheckFileInServer($headerLogo))
                                <img  style="width:70px; height:70px;"  src="{{ $headerLogo }}" />
                            @endif
                        @endforeach
                        @if (!empty($headerLogos))
                            <a href="{{ mwz_route('frontend.index') }}"></a>
                        @endif
                    </div>
                </div>
                <div class="wc">
                    <div class="language">
                        <p
                            class="full-url {{ empty($page_init['lang']) || $page_init['lang'] == 'th' ? 'active' : '' }}">
                            TH<a href="{{ $page_init['lang_switch']['th'] }}"></a>
                        </p>
                        <p class="full-url {{ $page_init['lang'] == 'en' ? 'active' : '' }}">EN
                            <a href="{{ $page_init['lang_switch']['en'] }}"></a>
                        </p>
                    </div><button class="rounded-lg focus:outline-none focus:shadow-outline" @click="open = !open">
                        <svg fill="#fff" viewBox="0 0 20 20" class="w-6 h-6">
                            <path x-show="!open" fill-rule="evenodd"
                                d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z"
                                clip-rule="evenodd"></path>
                            <path x-show="open" fill-rule="evenodd"
                                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                                clip-rule="evenodd"></path>
                        </svg>
                    </button>
                </div>
            </div>
            <nav :class="{ 'flex': open, 'hidden': !open }"
                class="text-base-xl flex-col flex-grow pb-[1rem] lg:py-2 hidden lg:flex lg:justify-between lg:flex-row">
                @if (!empty($page_init['menu']['header']))
                    @foreach ($page_init['menu']['header'] as $item)
                        @if (!empty($item['sub']))
                            <div {{-- @click.away="open = false"  --}} @mouseover="open = true" @mouseleave="open = false"
                                class="relative" x-data="{ open: false }">
                                <button type="button"
                                    class="text-whiten hover:text-2nd py-2 pr-1 whitespace-nowrap text-uppercase"
                                    @click="open = !open" aria-haspopup="true" :aria-expanded="open.toString()">
                                    {{ !empty($item['name']) ? $item['name'] : '' }}
                                    {{-- <svg style="padding: 0 5px; width: 30px; height: 20px;" fill="currentColor" viewBox="0 0 20 20" :class="{ 'rotate-180': open, 'rotate-0': !open }" class="inline w-4 h-4 transition-transform duration-200 transform lg:-mt-1">
                                    <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"></path>
                                </svg> --}}
                                </button>
                                <div x-show="open" x-transition:enter="transition ease-out duration-100"
                                    x-transition:enter-start="transform opacity-0 scale-95"
                                    x-transition:enter-end="transform opacity-100 scale-100"
                                    x-transition:leave="transition ease-in duration-75"
                                    x-transition:leave-start="transform opacity-100 scale-100"
                                    x-transition:leave-end="transform opacity-0 scale-95"
                                    class="absolute right-0 w-full mt-2 origin-top-right rounded-md shadow-lg lg:w-58 z-10">
                                    <div
                                        class="px-2 py-2 bg-white rounded-md shadow dark-mode:bg-gray-800 text-uppercase">
                                        @foreach ($item['sub'] as $sub)
                                            <a class="block px-2 py-2 mt-2 font-light bg-transparent rounded-lg"
                                                href="{{ !empty($sub['url']) ? $sub['url'] : '#' }}">{{ !empty($sub['name']) ? $sub['name'] : '' }}</a>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        @else
                            @if (!empty($item['is_open_account']) && !empty($item['status']) && $item['status'] == 2)
                                @php
                                    $buttonColor = '';
                                    if (!empty($item['button_color']) && preg_match('/^#([A-Fa-f0-9]{3}|[A-Fa-f0-9]{6})$/', $item['button_color'])) {
                                        $buttonColor = $item['button_color'];
                                    }
                                @endphp
                                <a class="nav-btn-account whitespace-nowrap text-uppercase hidden lg:inline-flex"
                                    @if ($buttonColor !== '') style="background-color: {{ $buttonColor }}; border-color: {{ $buttonColor }}; color: #fff;" @endif
                                    href="{{ !empty($item['url']) ? $item['url'] : '#' }}">{{ !empty($item['name']) ? $item['name'] : '' }}</a>
                            @else
                                <a class="text-whiten hover:text-2nd py-2 lg:px-[1rem] whitespace-nowrap text-uppercase"
                                    href="{{ !empty($item['url']) ? $item['url'] : '#' }}">{{ !empty($item['name']) ? $item['name'] : '' }}</a>
                            @endif
                        @endif
                    @endforeach
                @endif
                <div class="wr header-actions header-actions--mobile mt-2">
                    @if (!empty($page_init['menu']['header']))
                        @foreach ($page_init['menu']['header'] as $item)
                            @if (empty($item['sub']) && !empty($item['is_open_account']) && !empty($item['status']) && $item['status'] == 2)
                                @php
                                    $buttonColor = '';
                                    if (!empty($item['button_color']) && preg_match('/^#([A-Fa-f0-9]{3}|[A-Fa-f0-9]{6})$/', $item['button_color'])) {
                                        $buttonColor = $item['button_color'];
                                    }
                                @endphp
                                <a class="nav-btn-account whitespace-nowrap text-uppercase"
                                    @if ($buttonColor !== '') style="background-color: {{ $buttonColor }}; border-color: {{ $buttonColor }}; color: #fff;" @endif
                                    href="{{ !empty($item['url']) ? $item['url'] : '#' }}">{{ !empty($item['name']) ? $item['name'] : '' }}</a>
                            @endif
                        @endforeach
                    @endif
                    <div class="butn butn-2nd text-whiten btn-login-ssnp full-url">
                        <span class="btn-login-ssnp__label">@lang('frontend::lang.login_us')</span>
                        <span class="btn-login-ssnp__divider"></span>
                        <span class="btn-login-ssnp__brand">
                            <span>SSNP</span>
                            <span>ONLINE</span>
                        </span>
                        <a href="{{ !empty($page_init['setting']['login_url']) ? $page_init['setting']['login_url'] : '#' }}"
                            target="_blank" rel="noopener"></a>
                    </div>
                    <div class="butn butn-2nd text-whiten full-url whitespace-nowrap">@lang('frontend::lang.register_us')
                        <a href="{{ !empty($page_init['register']) ? $page_init['register'] : '#' }}"></a>
                    </div>
                </div>
            </nav>
        </div>
    </div>
</header>
{{-- @dump($page_init['menu']['header']) --}}