{{-- ==========================================================
    HI-TECH PATHSHALA
    EXPLORE MEGA MENU
    Desktop Navigation
    Production Ready | Accessible
========================================================== --}}

@php
    $categories = config('frontend.explore', []);
@endphp

<nav
    class="ht-mega-menu"
    id="exploreMegaMenu"
    aria-label="Explore Categories"
    aria-hidden="true">

    <div class="container">

        <div class="ht-mega-menu__wrapper">

            {{-- ==================================================
                LEFT: EXAM CATEGORIES
            =================================================== --}}
            <aside
                class="ht-mega-menu__sidebar ht-scrollbar"
                aria-label="Exam Categories">

                <div class="ht-mega-menu__sidebar-header">

                    <span class="ht-mega-menu__sidebar-label">
                        Explore Exams
                    </span>

                    <span class="ht-mega-menu__sidebar-description">
                        Choose your preparation category
                    </span>

                </div>


                <ul
                    class="ht-mega-menu__categories"
                    role="tablist"
                    aria-label="Exam categories">

                    @foreach($categories as $index => $category)

                        <li>

                            <button
                                type="button"
                                id="tab-{{ $category['slug'] }}"
                                class="ht-mega-menu__category {{ $index === 0 ? 'is-active' : '' }}"
                                role="tab"
                                aria-controls="panel-{{ $category['slug'] }}"
                                aria-selected="{{ $index === 0 ? 'true' : 'false' }}"
                                data-target="{{ $category['slug'] }}">

                                <span class="ht-mega-menu__category-name">

                                    {{ $category['name'] }}

                                </span>

                                <i
                                    class="bi bi-chevron-right"
                                    aria-hidden="true">
                                </i>

                            </button>

                        </li>

                    @endforeach

                </ul>

            </aside>


            {{-- ==================================================
                RIGHT: CATEGORY CONTENT
            =================================================== --}}
            <div
                class="ht-mega-menu__content ht-scrollbar">

                @foreach($categories as $index => $category)

                    <section
                        id="panel-{{ $category['slug'] }}"
                        class="ht-mega-menu__panel {{ $index === 0 ? 'is-active' : '' }}"
                        role="tabpanel"
                        aria-labelledby="tab-{{ $category['slug'] }}"
                        data-panel="{{ $category['slug'] }}"
                        {{ $index !== 0 ? 'hidden' : '' }}>

                        {{-- ==================================================
                            CATEGORY HEADER
                        =================================================== --}}
                        <div class="ht-mega-menu__panel-header">

                            <div>

                                <span class="ht-mega-menu__eyebrow">

                                    {{ $category['name'] }} Preparation

                                </span>

                                <h2 class="ht-mega-menu__title">

                                    {{ $category['name'] }} Resources

                                </h2>

                                <p class="ht-mega-menu__description">

                                    Choose the resources you need to prepare
                                    smarter and practice with confidence.

                                </p>

                            </div>

                        </div>


                        {{-- ==================================================
                            LEVEL-BASED CATEGORY
                        =================================================== --}}
                        @if(!empty($category['levels']))

                            <div class="ht-mega-menu__grid">

                                @foreach($category['levels'] as $level)

                                    <article class="ht-mega-menu__section">

                                        <h3 class="ht-mega-menu__heading">

                                            {{ $level['title'] }}

                                        </h3>


                                        <ul class="ht-mega-menu__list">

                                            @foreach($level['items'] as $item)

                                                <li>

                                                    <a
                                                        href="{{ route($item['route']) }}"
                                                        class="ht-mega-menu__link">

                                                        <span
                                                            class="ht-mega-menu__link-icon">

                                                            <i
                                                                class="bi {{ $item['icon'] }}"
                                                                aria-hidden="true">
                                                            </i>

                                                        </span>


                                                        <span
                                                            class="ht-mega-menu__link-content">

                                                            <strong>
                                                                {{ $item['title'] }}
                                                            </strong>

                                                            <small>
                                                                Explore
                                                                {{ $item['title'] }}
                                                            </small>

                                                        </span>

                                                    </a>

                                                </li>

                                            @endforeach

                                        </ul>

                                    </article>

                                @endforeach

                            </div>


                        {{-- ==================================================
                            CATEGORY WITHOUT LEVELS
                        =================================================== --}}
                        @elseif(!empty($category['items']))

                            <div class="ht-mega-menu__resources">

                                @foreach($category['items'] as $item)

                                    <a
                                        href="{{ route($item['route']) }}"
                                        class="ht-mega-menu__resource">

                                        <span
                                            class="ht-mega-menu__resource-icon">

                                            <i
                                                class="bi {{ $item['icon'] }}"
                                                aria-hidden="true">
                                            </i>

                                        </span>

                                        <span class="ht-mega-menu__resource-content">

                                            <strong>
                                                {{ $item['title'] }}
                                            </strong>

                                            <small>
                                                Explore {{ $item['title'] }}
                                            </small>

                                        </span>

                                        <i
                                            class="bi bi-arrow-up-right ms-auto"
                                            aria-hidden="true">
                                        </i>

                                    </a>

                                @endforeach

                            </div>

                        @endif

                    </section>

                @endforeach

            </div>

        </div>

    </div>

</nav>