@php($user = auth()->user())

<header class="sm-main-header sticky-top bg-white border-bottom shadow-sm">
    <div class="container py-3">
        {{-- Phones and tablets: logo and the three buttons on top, search on its own row. Desktop: one row, search in the middle. --}}
        <div class="sm-header-row">
            <a class="sm-logo" href="{{ route('storefront.home') }}">
                <i class="bi bi-bag-check-fill" aria-hidden="true"></i>
                <span class="sm-logo-name">{{ $brand }}</span>
                <small class="sm-logo-tag">(Online Shopping)</small>
            </a>

            {{-- Products by name or SKU. While typing, the script lists matching products from the suggest route; the form itself opens the full results. --}}
            <form id="saruarSearchForm" class="sm-header-search position-relative" role="search" action="{{ route('storefront.search') }}" data-suggest-url="{{ route('storefront.search.suggest') }}" data-min-length="{{ \App\Http\Controllers\Storefront\HomeController::SUGGEST_MIN_LENGTH }}">
                <div class="input-group">
                    <input id="saruarSearchInput" name="q" class="form-control" type="search" value="{{ request()->routeIs('storefront.search') ? request('q') : '' }}" placeholder="Search products or SKU" maxlength="100" required autocomplete="off" aria-label="Search products or SKU" aria-controls="saruarSearchDropdown" aria-expanded="false">
                    <button class="btn sm-btn-primary" type="submit" aria-label="Search"><i class="bi bi-search" aria-hidden="true"></i></button>
                </div>
                <div id="saruarSearchDropdown" class="sm-search-results" hidden>
                    <ul id="saruarSearchList" class="list-unstyled mb-0"></ul>
                    <p id="saruarNoProductMatch" class="text-body-secondary p-3 mb-0" hidden>No matching products found</p>
                </div>
                <span id="saruarSearchStatus" class="visually-hidden" role="status"></span>
            </form>

            <nav class="sm-header-actions" aria-label="Track order, wishlist, cart and account">
                <a class="sm-header-link" href="{{ route('storefront.track-order') }}">
                    <i class="bi bi-truck" aria-hidden="true"></i>
                    <span class="sm-header-label">Track Order</span>
                </a>
                <a class="sm-header-link" href="{{ route('storefront.wishlist') }}">
                    <i class="bi bi-heart" aria-hidden="true"></i>
                    <span class="sm-header-label">Wishlist</span>
                </a>
                <a class="sm-header-link" href="#saruarCartDrawer" role="button" data-bs-toggle="offcanvas" aria-controls="saruarCartDrawer">
                    <span class="sm-nav-icon">
                        <i class="bi bi-cart3" aria-hidden="true"></i>
                        <span class="badge rounded-pill bg-danger saruar-cart-count">{{ $cartCount }}</span>
                    </span>
                    <span class="sm-header-label">Cart</span>
                </a>
                <div class="dropdown">
                    <button class="sm-header-link sm-account-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
                        <i class="bi bi-person-circle" aria-hidden="true"></i>
                        <span class="sm-header-label">Account <i class="bi bi-chevron-down sm-account-caret" aria-hidden="true"></i></span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end sm-account-menu">
                        @guest
                            <li><a class="dropdown-item" href="{{ route('login') }}"><i class="bi bi-box-arrow-in-right" aria-hidden="true"></i> Sign in</a></li>
                            <li><a class="dropdown-item" href="{{ route('register') }}"><i class="bi bi-person-plus" aria-hidden="true"></i> Sign Up</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="{{ route('storefront.track-order') }}"><i class="bi bi-truck" aria-hidden="true"></i> Track Order</a></li>
                        @else
                            <li><span class="dropdown-item-text sm-account-hello">Hi, {{ Str::before($user->name, ' ') }}</span></li>
                            <li><a class="dropdown-item" href="{{ $accountUrl }}"><i class="bi bi-person" aria-hidden="true"></i> My Account</a></li>
                            @if ($user->hasAdminAccess())
                                <li><a class="dropdown-item" href="{{ route('admin.dashboard') }}"><i class="bi bi-speedometer2" aria-hidden="true"></i> Admin Dashboard</a></li>
                            @else
                                <li><a class="dropdown-item" href="{{ route('account.orders') }}"><i class="bi bi-bag" aria-hidden="true"></i> My Orders</a></li>
                            @endif
                            <li><a class="dropdown-item" href="{{ $user->hasAdminAccess() ? route('storefront.track-order') : route('account.track-order') }}"><i class="bi bi-truck" aria-hidden="true"></i> Track Order</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                <form method="POST" action="{{ route('logout') }}">
                                    @csrf
                                    <button class="dropdown-item" type="submit"><i class="bi bi-box-arrow-right" aria-hidden="true"></i> Logout</button>
                                </form>
                            </li>
                        @endguest
                    </ul>
                </div>
            </nav>
        </div>
    </div>
</header>