{{-- ==========================================================
    HI-TECH PATHSHALA
    MOBILE NAVIGATION
    Production Ready | Responsive | Accessible
========================================================== --}}

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

<aside
    class="ht-mobile-menu"
    id="mobileMenu"
    aria-label="Mobile navigation"
    aria-hidden="true">

    {{-- ==================================================
        MOBILE HEADER
    =================================================== --}}
    <div class="ht-mobile-menu__header">

        <a
            href="{{ url('/') }}"
            class="ht-mobile-menu__logo"
            aria-label="Hi-Tech Pathshala Home">

            <img
                src="{{ asset('assets/images/logo.jpg') }}"
                alt="Hi-Tech Pathshala"
                width="170"
                height="46"
                decoding="async">

        </a>


        <button
            type="button"
            id="mobileMenuClose"
            class="ht-mobile-menu__close"
            aria-label="Close navigation menu">

            <i
                class="bi bi-x-lg"
                aria-hidden="true">
            </i>

        </button>

    </div>


    {{-- ==================================================
        MOBILE SEARCH
    =================================================== --}}
    <div class="ht-mobile-menu__search">

        <x-header.search
            variant="mobile"
            placeholder="Search tests, courses, notes..." />

    </div>


    {{-- ==================================================
        MOBILE NAVIGATION
    =================================================== --}}
    <nav
        class="ht-mobile-menu__navigation"
        aria-label="Mobile primary navigation">

        {{-- ==================================================
            EXPLORE EXAMS
        =================================================== --}}
        <div
            class="ht-mobile-menu__explore"
            id="mobileExploreAccordion">

            @foreach($categories as $category)

                @php
                    $collapseId = 'mobile-explore-' . $category['slug'];
                @endphp

                <div class="ht-mobile-menu__category">

                    {{-- Category Toggle --}}
                    <button
                        type="button"
                        class="ht-mobile-menu__category-toggle collapsed"
                        data-bs-toggle="collapse"
                        data-bs-target="#{{ $collapseId }}"
                        aria-expanded="false"
                        aria-controls="{{ $collapseId }}">

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

                            {{ $category['name'] }}

                        </span>

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

                    </button>


                    {{-- Category Content --}}
                    <div
                        id="{{ $collapseId }}"
                        class="collapse"
                        data-bs-parent="#mobileExploreAccordion">

                        <div class="ht-mobile-menu__category-content">

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

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

                                    <div class="ht-mobile-menu__level">

                                        <h3 class="ht-mobile-menu__level-title">

                                            {{ $level['title'] }}

                                        </h3>


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

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

                                                <li>

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

                                                        <span
                                                            class="ht-mobile-menu__item-icon">

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

                                                        </span>


                                                        <span class="ht-mobile-menu__item-label">

                                                            {{ $item['title'] }}

                                                        </span>


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

                                                    </a>

                                                </li>

                                            @endforeach

                                        </ul>

                                    </div>

                                @endforeach


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

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

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

                                        <li>

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

                                                <span
                                                    class="ht-mobile-menu__item-icon">

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

                                                </span>


                                                <span class="ht-mobile-menu__item-label">

                                                    {{ $item['title'] }}

                                                </span>


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

                                            </a>

                                        </li>

                                    @endforeach

                                </ul>

                            @endif

                        </div>

                    </div>

                </div>

            @endforeach

        </div>


        {{-- ==================================================
            SECONDARY NAVIGATION
        =================================================== --}}
        <div class="ht-mobile-menu__secondary">

            {{-- Contact --}}
            <a
                href="/contact"
                class="ht-mobile-menu__link">

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

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

                </span>

                <span>
                    Contact Us
                </span>

            </a>


            {{-- Cart --}}
            <a
                href="#"
                class="ht-mobile-menu__link">

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

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

                </span>

                <span>
                    Cart
                </span>

            </a>

        </div>

    </nav>


    {{-- ==================================================
        AUTHENTICATION
    =================================================== --}}
    <div class="ht-mobile-menu__footer">

        @guest

            {{-- Sign In --}}
            <a
                href="#"
                class="ht-mobile-menu__auth-btn ht-mobile-menu__auth-btn--primary">

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

                <span>
                    Sign In
                </span>

            </a>


            {{-- Register --}}
            <a
                href="#"
                class="ht-mobile-menu__auth-btn ht-mobile-menu__auth-btn--outline">

                <i
                    class="bi bi-person-plus"
                    aria-hidden="true">
                </i>

                <span>
                    Create Account
                </span>

            </a>

        @else

            {{-- My Account --}}
            <a
                href="#"
                class="ht-mobile-menu__auth-btn ht-mobile-menu__auth-btn--primary">

                <i
                    class="bi bi-person-circle"
                    aria-hidden="true">
                </i>

                <span>
                    My Account
                </span>

            </a>

        @endguest

    </div>

</aside>