@php
    // The server decides which item matches the page; the script only swaps it while a drawer is open.
    $activeItem = match (true) {
        request()->routeIs('storefront.home') => 'home',
        request()->routeIs('storefront.category.show') => 'categories',
        request()->routeIs('storefront.cart', 'storefront.checkout', 'storefront.checkout.*') => 'cart',
        request()->routeIs('login', 'register', 'account', 'account.*', 'auth.two-factor.challenge') => 'account',
        default => null,
    };
@endphp

<nav class="saruar-mobile-bottom-nav fixed-bottom d-lg-none" aria-label="Mobile Navigation">
    <ul class="list-unstyled d-flex mb-0 sm-mobile-bar">
        <li class="saruar-mobile-item">
            <a href="{{ route('storefront.home') }}" @class(['sm-mobile-link', 'active' => $activeItem === 'home']) @if ($activeItem === 'home') aria-current="page" data-route-active @endif>
                <i class="bi bi-house-door-fill" aria-hidden="true"></i>
                <span>Home</span>
            </a>
        </li>
        <li class="saruar-mobile-item">
            <button type="button" @class(['sm-mobile-link', 'active' => $activeItem === 'categories']) data-bs-toggle="offcanvas" data-bs-target="#mobileCategoriesDrawer" aria-controls="mobileCategoriesDrawer" @if ($activeItem === 'categories') aria-current="page" data-route-active @endif>
                <i class="bi bi-grid-fill" aria-hidden="true"></i>
                <span>Categories</span>
            </button>
        </li>
        <li class="saruar-mobile-item">
            <a href="#saruarCartDrawer" @class(['sm-mobile-link sm-mobile-center', 'active' => $activeItem === 'cart']) role="button" data-bs-toggle="offcanvas" aria-controls="saruarCartDrawer" @if ($activeItem === 'cart') aria-current="page" data-route-active @endif>
                <span class="sm-nav-fab">
                    <i class="bi bi-cart3" aria-hidden="true"></i>
                    <span class="badge rounded-pill bg-danger saruar-cart-count">{{ $cartCount }}</span>
                </span>
                <span>Cart</span>
            </a>
        </li>
        <li class="saruar-mobile-item">
            <a href="#saruarChatDrawer" class="sm-mobile-link" role="button" data-bs-toggle="offcanvas" aria-controls="saruarChatDrawer">
                <i class="bi bi-chat-dots-fill" aria-hidden="true"></i>
                <span>Message</span>
            </a>
        </li>
        <li class="saruar-mobile-item">
            <a href="{{ $accountUrl }}" @class(['sm-mobile-link', 'active' => $activeItem === 'account']) @if ($activeItem === 'account') aria-current="page" data-route-active @endif>
                <i class="bi bi-person-circle" aria-hidden="true"></i>
                <span>Account</span>
            </a>
        </li>
    </ul>
</nav>

<div class="offcanvas offcanvas-bottom sm-categories-sheet" tabindex="-1" id="mobileCategoriesDrawer" aria-labelledby="mobileCategoriesDrawerLabel">
    <div class="offcanvas-header border-bottom">
        <h2 class="offcanvas-title h5" id="mobileCategoriesDrawerLabel">All Categories</h2>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body p-0">
        @if ($allCategories)
            <ul class="list-group list-group-flush">
                @foreach ($allCategories as $category)
                    <li class="list-group-item p-0">
                        <a href="{{ route('storefront.category.show', $category['slug']) }}" class="sm-drawer-link">
                            <i class="bi {{ $category['icon_class'] }}" aria-hidden="true"></i>
                            <span>{{ $category['name'] }}</span>
                        </a>
                    </li>
                @endforeach
            </ul>
        @else
            <p class="text-body-secondary p-3 mb-0">Categories are not available right now.</p>
        @endif
    </div>
</div>

<div class="offcanvas offcanvas-end" tabindex="-1" id="saruarChatDrawer" aria-labelledby="saruarChatDrawerLabel">
    <div class="offcanvas-header border-bottom">
        <h2 class="offcanvas-title h5" id="saruarChatDrawerLabel">{{ $brand }} Live Support</h2>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <ul class="list-unstyled sm-support-list mb-0">
            <li><i class="bi bi-clock" aria-hidden="true"></i> {{ $support['hours'] }}</li>
            <li><i class="bi bi-telephone" aria-hidden="true"></i> <a href="tel:{{ $support['phone'] }}">{{ $support['phone'] }}</a></li>
            <li><i class="bi bi-envelope" aria-hidden="true"></i> <a href="mailto:{{ $support['email'] }}">{{ $support['email'] }}</a></li>
        </ul>
    </div>
</div>

<div class="offcanvas offcanvas-end sm-cart-drawer" tabindex="-1" id="saruarCartDrawer" aria-labelledby="saruarCartDrawerLabel" @if (session('openCartDrawer') || old('drawer')) data-saruar-open @endif>
    <div class="offcanvas-header">
        <h2 class="offcanvas-title" id="saruarCartDrawerLabel">Cart</h2>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        @include('components.storefront.cart-drawer')
    </div>
</div>