@include('layouts.partials/offcanvas2')

    <x-grocery.delivery-options />

    @include('layouts.partials/menu-offcanvas')


    <header class="navbar navbar-expand-lg sticky-top d-block bg-body z-10 py-1 py-lg-0 py-xl-1 px-0">
        <div class="container justify-content-start py-2 py-lg-3">

            <!-- Offcanvas menu toggler (Hamburger) -->
            <button type="button" class="navbar-toggler d-block flex-shrink-0 me-3 me-sm-4" data-bs-toggle="offcanvas"
                data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <!-- Navbar brand (Logo) -->
            <a class="navbar-brand fs-2 p-0 pe-lg-2 pe-xxl-0 me-0 me-sm-3 me-md-4 me-xxl-5" href="/">
                <img src="{{ asset('logo/logo-colored.png') }}" alt="Logo" class="d-none d-lg-block" style="height:42px !important;width: auto !important;max-width: none !important;" />
                <img src="{{ asset('logo/logo-app.png') }}" alt="Logo" class="d-lg-none" style="height:42px !important;width: auto !important;max-width: none !important;" />
            
            </a>

            <!-- Categories dropdown visible on screens > 991px wide (lg breakpoint) -->
            <x-grocery.header-category-dropdown />

            <!-- Search bar visible on screens > 768px wide (md breakpoint) -->
            <div class="position-relative w-100 d-none d-md-block me-3 me-xl-4">
                <form action="{{ route('product.index') }}" method="GET" id="header-search-form">
                    <input type="search" 
                           class="form-control form-control-lg rounded-pill" 
                           name="search"
                           placeholder="Search for products" 
                           aria-label="Search"
                           value="{{ request('search') }}">
                    <button type="submit"
                            class="btn btn-icon btn-ghost fs-lg btn-secondary text-bo border-0 position-absolute top-0 end-0 rounded-circle mt-1 me-1"
                            aria-label="Search button">
                        <i class="ci-search"></i>
                    </button>
                </form>
            </div>

            <!-- Delivery options toggle visible on screens > 1200px wide (xl breakpoint) -->
            {{-- <div class="nav me-4 me-xxl-5 d-none d-xl-block">
                <a class="nav-link flex-column align-items-start animate-underline p-0" href="#deliveryOptions"
                    data-bs-toggle="offcanvas" aria-controls="deliveryOptions">
                    <div class="h6 fs-sm mb-0">Delivery</div>
                    <div class="d-flex align-items-center fs-sm fw-normal text-body">
                        <span class="animate-target text-nowrap">Set your address</span>
                        <i class="ci-chevron-down fs-base ms-1"></i>
                    </div>
                </a>
            </div> --}}


            <div class="nav me-4 me-xxl-5 d-none d-xl-block">
                <a class="nav-link flex-column align-items-start animate-underline p-0" href="{{ route('addresses') }}">
                    <div class="h6 fs-sm mb-0">Delivery</div>
                    <div class="d-flex align-items-center fs-sm fw-normal text-body">
                        <span class="animate-target text-nowrap">{{ auth()->user()->primary_address->label ?? 'Set your address' }}</span>
                        <i class="ci-chevron-down fs-base ms-1"></i>
                    </div>
                </a>
            </div>

            <!-- Button group -->
            <div class="d-flex align-items-center gap-md-1 gap-lg-2 ms-auto">

                <!-- Theme switcher (light/dark/auto) -->
                <div class="dropdown">
                    <button type="button"
                        class="theme-switcher btn btn-icon btn-outline-secondary fs-lg border-0 rounded-circle animate-scale"
                        data-bs-toggle="dropdown" aria-expanded="false" aria-label="Toggle theme (light)">
                        <span class="theme-icon-active d-flex animate-target">
                            <i class="ci-sun"></i>
                        </span>
                    </button>
                    <ul class="dropdown-menu" style="--cz-dropdown-min-width: 9rem">
                        <li>
                            <button type="button" class="dropdown-item active" data-bs-theme-value="light"
                                aria-pressed="true">
                                <span class="theme-icon d-flex fs-base me-2">
                                    <i class="ci-sun"></i>
                                </span>
                                <span class="theme-label">Light</span>
                                <i class="item-active-indicator ci-check ms-auto"></i>
                            </button>
                        </li>
                        <li>
                            <button type="button" class="dropdown-item" data-bs-theme-value="dark"
                                aria-pressed="false">
                                <span class="theme-icon d-flex fs-base me-2">
                                    <i class="ci-moon"></i>
                                </span>
                                <span class="theme-label">Dark</span>
                                <i class="item-active-indicator ci-check ms-auto"></i>
                            </button>
                        </li>
                        <li>
                            <button type="button" class="dropdown-item" data-bs-theme-value="auto"
                                aria-pressed="false">
                                <span class="theme-icon d-flex fs-base me-2">
                                    <i class="ci-auto"></i>
                                </span>
                                <span class="theme-label">Auto</span>
                                <i class="item-active-indicator ci-check ms-auto"></i>
                            </button>
                        </li>
                    </ul>
                </div>

                <!-- Search toggle button visible on screens < 768px wide (md breakpoint) -->
                <button type="button"
                    class="btn btn-icon fs-xl btn-outline-secondary border-0 rounded-circle animate-shake d-md-none"
                    data-bs-toggle="collapse" data-bs-target="#searchBar" aria-controls="searchBar"
                    aria-label="Toggle search bar">
                    <i class="ci-search animate-target"></i>
                </button>

                <!-- Delivery options button visible on screens < 1200px wide (xl breakpoint) -->
                <button type="button"
                    class="btn btn-icon fs-lg btn-outline-secondary border-0 rounded-circle animate-scale d-xl-none"
                    data-bs-toggle="offcanvas" data-bs-target="#deliveryOptions" aria-controls="deliveryOptions"
                    aria-label="Toggle delivery options offcanvas">
                    <i class="ci-map-pin animate-target"></i>
                </button>

                <!-- Account button visible on screens > 768px wide (md breakpoint) -->
                <a class="btn btn-icon fs-lg btn-outline-secondary border-0 rounded-circle animate-shake d-none d-md-inline-flex"
                    href="{{ auth()->check() ? route('profile') : route('login') }}">
                    <i class="ci-user animate-target"></i>
                    <span class="visually-hidden">{{ __('header.account') }}</span>
                </a>




                <!-- Cart button -->
                {{-- <button type="button"
                    class="btn btn-icon fs-xl btn-outline-secondary position-relative border-0 rounded-circle animate-scale"
                    data-bs-toggle="offcanvas" data-bs-target="#shoppingCart" aria-controls="shoppingCart"
                    aria-label="Shopping cart">
                    <span class="position-absolute top-0 start-100 badge fs-xs text-bg-primary rounded-pill ms-n3 z-2"
                        style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em">8</span>
                    <i class="ci-shopping-cart animate-target"></i>
                </button> --}}

                <a type="button" href="{{ route('cart.index') }}"
                    class="btn btn-icon btn-lg fs-xl btn-outline-secondary position-relative border-0 rounded-circle animate-scale"
                    aria-label="Shopping cart">
                    @if (auth()->check() && \App\Repositories\Member\Cart\MemberCartRepository::getCount() > 0)
                        <span
                            class="position-absolute top-0 start-100 badge fs-xs text-bg-primary rounded-pill mt-1 ms-n4 z-2 cart-count"
                            style="--cz-badge-padding-y: .25em; --cz-badge-padding-x: .42em">{{ auth()->check() ? \App\Repositories\Member\Cart\MemberCartRepository::getCount() : 0 }}</span>
                    @endif
                    <i class="ci-shopping-cart animate-target me-1"></i>
                </a>

            </div>
        </div>

        <!-- Search collapse available on screens < 768px wide (md breakpoint) -->
        <div class="collapse d-md-none" id="searchBar">
            <div class="container pt-2 pb-3">
                <div class="position-relative">
                    <form action="{{ route('product.index') }}" method="GET" id="mobile-search-form">
                        <i class="ci-search position-absolute top-50 translate-middle-y d-flex fs-lg ms-3"></i>
                        <input type="search" 
                               class="form-control form-icon-start rounded-pill"
                               name="search"
                               placeholder="Search for products" 
                               data-autofocus="collapse"
                               value="{{ request('search') }}">
                    </form>
                </div>
            </div>
        </div>
    </header>

    <x-grocery.top-header />

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Handle desktop search form submission
            const desktopSearchForm = document.getElementById('header-search-form');
            if (desktopSearchForm) {
                desktopSearchForm.addEventListener('submit', function(e) {
                    const searchInput = this.querySelector('input[name="search"]');
                    if (!searchInput.value.trim()) {
                        e.preventDefault();
                        searchInput.focus();
                        return false;
                    }
                });
            }

            // Handle mobile search form submission
            const mobileSearchForm = document.getElementById('mobile-search-form');
            if (mobileSearchForm) {
                mobileSearchForm.addEventListener('submit', function(e) {
                    const searchInput = this.querySelector('input[name="search"]');
                    if (!searchInput.value.trim()) {
                        e.preventDefault();
                        searchInput.focus();
                        return false;
                    }
                });
            }

            // Add search suggestions functionality (optional enhancement)
            const searchInputs = document.querySelectorAll('input[name="search"]');
            searchInputs.forEach(input => {
                input.addEventListener('input', function(e) {
                    const searchTerm = e.target.value.trim();
                    if (searchTerm.length >= 2) {
                        // You can implement AJAX search suggestions here
                        // For now, just log the search term
                        console.log('Searching for:', searchTerm);
                    }
                });
            });
        });
    </script>