@php
    $sitemapCats = $sitemapProductCategories ?? [];
    $productCatFirst = $sitemapCats[0] ?? null;
    $productCatsRest = array_slice($sitemapCats, 1);
@endphp
<div id="sitemap-modal" class="sitemap-modal" aria-hidden="true">
    <div class="sitemap-modal__backdrop" data-sitemap-close></div>
    <div class="sitemap-modal__panel" role="dialog" aria-modal="true" aria-labelledby="sitemap-page-title">
        <header class="sitemap-modal__header">
            <button type="button" class="sitemap-modal__close" id="sitemap-modal-close" aria-label="ปิด">
                <i class="icon-x"></i>
            </button>
        </header>
        <div class="sitemap-modal__body sitemap-simple">
            <h1 id="sitemap-page-title" class="sitemap-simple__title">@lang('frontend::text.sitemap_title')</h1>
            <hr class="sitemap-simple__rule">
            <div class="sitemap-simple__grid">
                <div class="sitemap-simple__col">
                    <p class="sitemap-simple__group">@lang('frontend::text.main_menu')</p>
                    <ul class="sitemap-simple__list">
                        @foreach ($page_init['menu'] as $chunk)
                            @if ($loop->index < 2)
                                <li><a href="{!! $chunk['url'] ?? '' !!}">{!! $chunk['name'] ?? '' !!}</a></li>
                            @endif
                        @endforeach
                    </ul>
                </div>
                {{-- @dump($page_init) --}}
                <div class="sitemap-simple__col">
                    <p class="sitemap-simple__group">@lang('frontend::text.service_and_content')</p>
                    <ul class="sitemap-simple__list">
                        @foreach ($page_init['menu'] as $item)
                            @if ($loop->index < 6 and $loop->index > 2 and !$loop->last and $item['id'] != 5)
                                <li><a href="{!! $item['url'] ?? '' !!}">{!! $item['name'] ?? '' !!}</a></li>
                            @endif
                        @endforeach
                    </ul>
                </div>
                <div class="sitemap-simple__col">
                    <p class="sitemap-simple__group">@lang('frontend::text.contact_and_policy')</p>
                    <ul class="sitemap-simple__list">
                        @foreach ($page_init['menu'] as $item)
                            @if ($loop->last)
                            <li><a href="{!! $item['url'] ?? '' !!}">{!! $item['name'] ?? '' !!}</a></li>
                            @endif
                        @endforeach
                        @foreach ($page_init['menu_footer'] as $item)
                            @if ($loop->index == 0 and !$loop->last)
                                <li><a href="{!! $item['url'] ?? '' !!}">{!! $item['name'] ?? '' !!}</a></li>
                            @endif
                        @endforeach
                    </ul>
                </div>
            </div>

            <hr class="sitemap-simple__rule sitemap-simple__rule--before-products">

            <div class="sitemap-simple__split">
                <h2 class="sitemap-simple__section">@lang('frontend::text.products')</h2>
                <div class="sitemap-simple__grid sitemap-simple__grid--products">
                    <div class="sitemap-simple__col">
                        <p class="sitemap-simple__group">@lang('frontend::text.buy_products')</p>
                        <ul class="sitemap-simple__list">
                            <li><a href="/products">@lang('frontend::text.view_products')</a></li>
                        </ul>
                    </div>
                    {{-- @if ($productCatFirst)
                        <div class="sitemap-simple__col">
                            <p class="sitemap-simple__group">{{ $productCatFirst['name'] }}</p>
                            <ul class="sitemap-simple__list">
                                <li>
                                    <a href="/product-category/{{ $productCatFirst['slug'] }}">ดูสินค้าในหมวดนี้</a>
                                </li>
                            </ul>
                        </div>
                    @endif
                    <div class="sitemap-simple__col">
                        @foreach ($productCatsRest as $category)
                            <p class="sitemap-simple__group">{{ $category['name'] }}</p>
                            <ul class="sitemap-simple__list">
                                <li>
                                    <a href="/product-category/{{ $category['slug'] }}">ดูสินค้าในหมวดนี้</a>
                                </li>
                            </ul>
                        @endforeach
                    </div> --}}
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    (function() {
        document.addEventListener('DOMContentLoaded', function() {
            var root = document.getElementById('sitemap-modal');
            if (!root) return;

            var openers = document.querySelectorAll('.js-open-sitemap-modal');
            var closeBtn = document.getElementById('sitemap-modal-close');
            var backdrops = root.querySelectorAll('[data-sitemap-close]');
            var openClass = 'sitemap-modal--open';

            function openModal() {
                root.classList.add(openClass);
                root.setAttribute('aria-hidden', 'false');
                document.body.classList.add('sitemap-modal-open');
                if (closeBtn) closeBtn.focus();
            }

            function closeModal() {
                root.classList.remove(openClass);
                root.setAttribute('aria-hidden', 'true');
                document.body.classList.remove('sitemap-modal-open');
            }

            openers.forEach(function(el) {
                el.addEventListener('click', function(e) {
                    e.preventDefault();
                    openModal();
                });
            });

            if (closeBtn) {
                closeBtn.addEventListener('click', closeModal);
            }

            backdrops.forEach(function(el) {
                el.addEventListener('click', closeModal);
            });

            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape' && root.classList.contains(openClass)) {
                    closeModal();
                }
            });
        });
    })();
</script>