<nav class="offcanvas offcanvas-start" id="navbarNav" tabindex="-1" aria-labelledby="navbarNavLabel">
    <div class="offcanvas-header py-3">
        <h5 class="offcanvas-title" id="navbarNavLabel">Browse AsiaGolf</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body pt-0 pb-3">

        <!-- Navbar nav -->
        <div class="accordion" id="navigation">

            <!-- Categories collapse visible on screens < 992px wide (lg breakpoint) -->
            <x-navbar.categories />

            <!-- Rest of the menu -->
            <div class="accordion-item border-0 my-2">
                <a class="nav-link animate-underline animate-target d-inline fw-medium text-truncate p-0"
                    href="{{ route('home') }}">{{ __('navbar.home') }}</a>
            </div>

            <div class="accordion-item border-0">
                <div class="accordion-header" id="headingAccount">
                    <button type="button" class="accordion-button animate-underline fw-medium collapsed py-2"
                        data-bs-toggle="collapse" data-bs-target="#account" aria-expanded="false"
                        aria-controls="account">
                        <span class="d-block animate-target py-1">{{ __('navbar.account') }}</span>
                    </button>
                </div>
                <div class="accordion-collapse collapse" id="account" aria-labelledby="headingAccount"
                    data-bs-parent="#navigation">
                    <div class="accordion-body pb-3">

                        <div class="dropdown-menu show position-static d-flex flex-column gap-4 shadow-none p-4">
                            <div>
                                {{-- <div class="h6">Bakery &amp; bread</div> --}}
                                <ul class="nav flex-column gap-2 mt-n2">

                                    @if (auth()->check())
                                        <li><a class="dropdown-item"
                                                href="{{ route('orders') }}">{{ __('navbar.order_history') }}</a></li>
                                        <li><a class="dropdown-item"
                                                href="{{ route('profile') }}">{{ __('navbar.profile_settings') }}</a>
                                        </li>
                                        <li><a class="dropdown-item"
                                                href="{{ route('addresses') }}">{{ __('navbar.address_book') }}</a></li>
                                        <li><a class="dropdown-item"
                                                href="#">{{ __('navbar.payment_methods') }}</a></li>
                                        <li><a class="dropdown-item" href="#">{{ __('navbar.wishlist') }}</a></li>
                                        <li><a class="dropdown-item" href="#">{{ __('navbar.notifications') }}</a>
                                        </li>
                                        <li><a class="dropdown-item"
                                                href="#">{{ __('navbar.support_tickets') }}</a></li>
                                    @else
                                        <li><a class="dropdown-item"
                                                href="{{ route('login') }}">{{ __('navbar.sign_in') }}</a></li>
                                        <li><a class="dropdown-item"
                                                href="{{ route('register') }}">{{ __('navbar.sign_up') }}</a></li>
                                    @endif

                                </ul>

                            </div>

                        </div>

                    </div>
                </div>
            </div>
            <div class="accordion-item border-0">
                <div class="accordion-header" id="headingPages">
                    <button type="button" class="accordion-button animate-underline fw-medium collapsed py-2"
                        data-bs-toggle="collapse" data-bs-target="#pages" aria-expanded="false" aria-controls="pages">
                        <span class="d-block animate-target py-1">{{ __('navbar.contact') }}</span>
                    </button>
                </div>
                <div class="accordion-collapse collapse" id="pages" aria-labelledby="headingPages"
                    data-bs-parent="#navigation">
                    <div class="accordion-body pb-3">
                        <div class="dropdown-menu show position-static d-flex flex-column gap-4 shadow-none p-4">
                            <div>
                                {{-- <div class="h6">Bakery &amp; bread</div> --}}
                                <ul class="nav flex-column gap-2 mt-n2">

                                    <li><a class="dropdown-item"
                                            href="{{ route('contact') }}">{{ __('navbar.contact') }}</a></li>


                                    <li><a class="dropdown-item"
                                            href="{{ route('help') }}">{{ __('navbar.help') }}</a></li>

                                    <li><a class="dropdown-item"
                                            href="{{ route('terms-and-conditions') }}">{{ __('navbar.terms_conditions') }}</a></li>


                                </ul>

                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Account button visible on screens < 768px wide (md breakpoint) -->
    <div class="offcanvas-header flex-column align-items-start d-md-none">
        <a class="btn btn-lg btn-outline-secondary w-100 rounded-pill"
            href="{{ route('profile') }}">
            <i class="ci-user fs-lg ms-n1 me-2"></i>
            {{ __('navbar.account') }}
        </a>
    </div>
</nav>
