{{-- Header --}}
<div class="ls-topbar d-none d-md-block">
    <div class="container">
        <div class="d-flex justify-content-between align-items-center">
            <div class="d-flex align-items-center gap-3">
                <span><i class="bi bi-telephone me-1"></i> {{ \App\Models\Setting::get('site_phone', '01XXXXXXXXX') }}</span>
                <span><i class="bi bi-envelope me-1"></i> {{ \App\Models\Setting::get('site_email', 'info@livelihoodshopbd.com') }}</span>
            </div>
            <div class="d-flex align-items-center gap-3">
                <button class="dark-mode-toggle" @click="toggleDarkMode()" :title="darkMode ? 'লাইট মোড' : 'ডার্ক মোড'">
                    <i class="bi" :class="darkMode ? 'bi-sun-fill' : 'bi-moon-fill'"></i>
                </button>
            </div>
        </div>
    </div>
</div>

<div class="ls-header-main">
    <div class="container">
        <div class="row align-items-center gy-3">
            {{-- Logo --}}
            <div class="col-6 col-md-2">
                <a href="{{ route('home') }}" class="ls-logo text-decoration-none">
                    LIVELIHOOD<span class="text-primary">SHOP</span>
                </a>
            </div>

            {{-- Search --}}
            <div class="col-12 col-md-6 order-3 order-md-0">
                <div class="ls-search-form" x-data="{ searchOpen: false }" @click.outside="searchOpen = false">
                    <form action="{{ route('search') }}" method="GET">
                        <input type="text"
                               class="form-control"
                               name="q"
                               placeholder="পণ্য খুঁজুন..."
                               x-model="searchQuery"
                               @input.debounce.400ms="liveSearch(); searchOpen = true"
                               @focus="searchOpen = searchResults.length > 0"
                               autocomplete="off">
                        <button type="submit" class="btn-search">
                            <i class="bi bi-search"></i>
                        </button>
                    </form>

                    {{-- Live Search Results --}}
                    <div class="ls-search-results" :class="{ 'active': searchOpen && searchResults.length > 0 }">
                        <template x-for="item in searchResults" :key="item.id">
                            <a :href="'/product/' + item.slug" class="ls-search-item text-decoration-none">
                                <img :src="item.image || '/images/placeholder.png'" :alt="item.name">
                                <div>
                                    <div class="fw-medium" x-text="item.name" style="font-size:0.9rem"></div>
                                    <div class="text-primary fw-bold" x-text="'৳' + item.price"></div>
                                </div>
                            </a>
                        </template>
                        <div class="p-2 text-center" x-show="searchLoading">
                            <span class="loading-spinner"></span>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Header Icons --}}
            <div class="col-6 col-md-4 d-flex justify-content-end align-items-center gap-1">
                <a href="{{ route('wishlist.index') }}" class="ls-header-icon d-none d-md-flex">
                    <i class="bi bi-heart"></i>
                    <span>উইশলিস্ট</span>
                    <span class="badge bg-danger" data-wishlist-count>0</span>
                </a>

                <a href="{{ route('compare.index') }}" class="ls-header-icon d-none d-md-flex">
                    <i class="bi bi-arrow-left-right"></i>
                    <span>তুলনা</span>
                    <span class="badge bg-danger" data-compare-count>0</span>
                </a>

                <a href="{{ route('cart.index') }}" class="ls-header-icon">
                    <i class="bi bi-cart3"></i>
                    <span>কার্ট</span>
                    <span class="badge bg-danger" data-cart-count="{{ session('cart_count', 0) }}">{{ session('cart_count', 0) }}</span>
                </a>

                {{-- Account Dropdown --}}
                <div class="dropdown">
                    <a href="#" class="ls-header-icon" data-bs-toggle="dropdown">
                        <i class="bi bi-person"></i>
                        <span>অ্যাকাউন্ট</span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-end">
                        @auth
                            <li><a class="dropdown-item" href="{{ route('customer.dashboard') }}"><i class="bi bi-speedometer2 me-2"></i>ড্যাশবোর্ড</a></li>
                            <li><a class="dropdown-item" href="{{ route('customer.orders') }}"><i class="bi bi-bag me-2"></i>অর্ডার সমূহ</a></li>
                            <li><a class="dropdown-item" href="{{ route('customer.profile') }}"><i class="bi bi-person-gear me-2"></i>প্রোফাইল</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                <form action="{{ route('logout') }}" method="POST">
                                    @csrf
                                    <button type="submit" class="dropdown-item"><i class="bi bi-box-arrow-right me-2"></i>লগআউট</button>
                                </form>
                            </li>
                        @else
                            <li><a class="dropdown-item" href="{{ route('login') }}"><i class="bi bi-box-arrow-in-right me-2"></i>লগইন</a></li>
                            <li><a class="dropdown-item" href="{{ route('register') }}"><i class="bi bi-person-plus me-2"></i>রেজিস্টার</a></li>
                        @endauth
                    </ul>
                </div>

                {{-- Mobile sidebar toggle --}}
                <button class="btn d-md-none ms-1" type="button" data-bs-toggle="offcanvas" data-bs-target="#mobileMenu">
                    <i class="bi bi-list fs-4"></i>
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Navigation --}}
<nav class="ls-nav d-none d-md-block">
    <div class="container">
        <div class="d-flex align-items-center">
            {{-- Category Mega Menu --}}
            <div class="position-relative" x-data="{ megaOpen: false }" @click.outside="megaOpen = false">
                <button class="btn btn-primary rounded-pill px-4 py-2 fw-semibold"
                        @click="megaOpen = !megaOpen">
                    <i class="bi bi-grid-3x3-gap me-2"></i>সকল ক্যাটাগরি
                    <i class="bi bi-chevron-down ms-1" style="font-size:0.75rem"></i>
                </button>
                <div class="ls-mega-menu" x-show="megaOpen" x-transition style="min-width:600px">
                    <div class="row">
                        @php $categories = \App\Models\Category::where('is_active', true)->where('show_in_menu', true)->whereNull('parent_id')->with('children')->orderBy('sort_order')->take(12)->get(); @endphp
                        @foreach($categories as $cat)
                            <div class="col-md-4 mb-3">
                                <a href="{{ route('shop.category', $cat->slug) }}" class="fw-semibold text-dark d-block mb-1">
                                    @if($cat->icon)<i class="{{ $cat->icon }} me-1"></i>@endif
                                    {{ $cat->name }}
                                </a>
                                @foreach($cat->children->take(5) as $child)
                                    <a href="{{ route('shop.category', $child->slug) }}" class="d-block text-muted small py-1">{{ $child->name }}</a>
                                @endforeach
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

            {{-- Nav Links --}}
            <ul class="nav ms-3">
                <li class="nav-item"><a href="{{ route('home') }}" class="nav-link {{ request()->routeIs('home') ? 'text-primary fw-semibold' : '' }}">হোম</a></li>
                <li class="nav-item"><a href="{{ route('shop') }}" class="nav-link {{ request()->routeIs('shop*') ? 'text-primary fw-semibold' : '' }}">শপ</a></li>
                <li class="nav-item"><a href="{{ route('blog.index') }}" class="nav-link {{ request()->routeIs('blog*') ? 'text-primary fw-semibold' : '' }}">ব্লগ</a></li>
                <li class="nav-item"><a href="{{ route('page.show', 'about') }}" class="nav-link">আমাদের সম্পর্কে</a></li>
                <li class="nav-item"><a href="{{ route('page.show', 'contact') }}" class="nav-link">যোগাযোগ</a></li>
            </ul>
        </div>
    </div>
</nav>

{{-- Mobile Off-canvas Menu --}}
<div class="offcanvas offcanvas-start" tabindex="-1" id="mobileMenu">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title">মেনু</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">
        <ul class="list-unstyled">
            <li class="mb-2"><a href="{{ route('home') }}" class="text-dark d-block py-2"><i class="bi bi-house me-2"></i>হোম</a></li>
            <li class="mb-2"><a href="{{ route('shop') }}" class="text-dark d-block py-2"><i class="bi bi-shop me-2"></i>শপ</a></li>

            @if(isset($categories))
                <li class="mb-2">
                    <div class="fw-semibold py-2"><i class="bi bi-grid me-2"></i>ক্যাটাগরি</div>
                    <ul class="list-unstyled ms-4">
                        @foreach($categories as $cat)
                            <li><a href="{{ route('shop.category', $cat->slug) }}" class="text-muted d-block py-1">{{ $cat->name }}</a></li>
                        @endforeach
                    </ul>
                </li>
            @endif

            <li class="mb-2"><a href="{{ route('blog.index') }}" class="text-dark d-block py-2"><i class="bi bi-journal me-2"></i>ব্লগ</a></li>
            <li class="mb-2"><a href="{{ route('page.show', 'about') }}" class="text-dark d-block py-2"><i class="bi bi-info-circle me-2"></i>আমাদের সম্পর্কে</a></li>
            <li class="mb-2"><a href="{{ route('page.show', 'contact') }}" class="text-dark d-block py-2"><i class="bi bi-telephone me-2"></i>যোগাযোগ</a></li>
        </ul>

        <hr>

        @auth
            <a href="{{ route('customer.dashboard') }}" class="btn btn-outline-primary w-100 mb-2">আমার অ্যাকাউন্ট</a>
        @else
            <a href="{{ route('login') }}" class="btn btn-primary w-100 mb-2">লগইন</a>
            <a href="{{ route('register') }}" class="btn btn-outline-primary w-100">রেজিস্টার</a>
        @endauth
    </div>
</div>