<!-- Amazon-Style Navbar -->
<style>
    @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

    :root {
        --nv-primary: #E31019;
        --nv-secondary: #fcd514;
        --nv-dark2: #232f3e;
    }

    .nv-header { font-family: 'Plus Jakarta Sans', sans-serif; position: fixed; top: 0; left: 0; width: 100%; z-index: 1050; }

    /* ── DESKTOP TOP BAR ── */
    .nv-main-nav { background: var(--nv-primary); padding: 4px 0; }
    .nv-nav-flex { display: flex; align-items: center; gap: 20px; justify-content: space-between; }
    .nv-logo { flex: 0 0 auto; }
    .nv-logo img { height: 32px; width: auto; max-width: 120px; object-fit: contain; display: block; }
    .nv-deliver { flex: 0 0 auto; color: #fff; font-size: 12px; cursor: pointer; padding: 4px 10px; border: 1px solid transparent; border-radius: 3px; white-space: nowrap; background: none; }
    .nv-deliver:hover { border-color: #fff; }
    .nv-deliver small { display: block; font-size: 10px; opacity: .75; }
    .nv-deliver strong { font-size: 13px; font-weight: 700; }

    .nv-search-box { flex: 1; max-width: 600px; margin: 0 auto; }
    .nv-search-inner { display: flex; border-radius: 6px; overflow: hidden; height: 40px; background: #fff; border: 1px solid #ddd; }
    .nv-search-inner input { flex: 1; border: none; padding: 0 16px; font-size: 14px; color: #111; outline: none; }
    .nv-search-btn { background: var(--nv-secondary); border: none; padding: 0 20px; font-size: 18px; color: #333; cursor: pointer; }
    .nv-search-btn:hover { background: #f0c800; }

    .search_result { 
        position: absolute !important; top: 100% !important; left: 0 !important; width: 100% !important; z-index: 999999 !important; 
        background-color: #ffffff !important; box-shadow: 0 12px 50px rgba(0,0,0,0.3) !important; 
        border: 1px solid #ddd !important; border-top: none !important;
        border-radius: 0 0 6px 6px !important;
        max-height: 90vh !important; overflow-y: auto; display: none; 
        min-height: 500px !important;
    }
    .search_result .search_product ul { list-style: none; padding: 0; margin: 0; }
    .search_result .search_product li { display: flex; align-items: center; gap: 15px; padding: 12px 18px; border-bottom: 1px solid #f0f0f0; cursor: pointer; transition: background 0.2s; }
    .search_result .search_product li:hover { background: #f9f9f9; }
    .search_result .search_product a { text-decoration: none; color: inherit; display: block; }
    .search_result .search_img img { width: 55px; height: 55px; object-fit: contain; border: 1px solid #eee; border-radius: 4px; }
    .search_result .name { font-size: 15px; font-weight: 600; margin: 0; color: #111; line-height: 1.4; }
    .search_result .price { font-size: 14px; color: #B12704; margin: 4px 0 0; font-weight: 700; }
    .search_result .price del { font-size: 12px; color: #565959; margin-left: 8px; font-weight: 400; }

    .nv-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
    .nv-act-item { color: #fff; text-decoration: none; padding: 4px 10px; border: 1px solid transparent; border-radius: 3px; font-size: 13px; display: flex; flex-direction: column; line-height: 1.3; white-space: nowrap; background: none; cursor: pointer; }
    .nv-act-item:hover { border-color: #fff; color: #fff; }
    .nv-act-item small { font-size: 11px; font-weight: 400; opacity: .85; }
    .nv-act-item strong { font-size: 13px; font-weight: 700; }

    .nv-account-wrap { position: relative; }
    #navAccountMenu { display:none; position:absolute; top:calc(100% + 8px); right:0; background:#fff; min-width:200px; border-radius:8px; box-shadow:0 8px 25px rgba(0,0,0,0.15); border:1px solid #e7e7e7; z-index:9999; overflow:hidden; }

    /* ── SECONDARY NAV BAR ── */
    .nv-cat-bar { background: #fff; padding: 0; position: relative; border-bottom: 1px solid #e7e7e7; }
    .nv-cat-bar-inner { display: flex; align-items: center; overflow: visible; }

    .nv-all-cats-btn { display: flex; align-items: center; gap: 8px; color: #222; font-size: 13px; font-weight: 700; padding: 8px 14px; cursor: pointer; white-space: nowrap; border: 1px solid transparent; border-radius: 2px; background: none; flex-shrink: 0; }
    .nv-all-cats-btn:hover, .nv-all-cats-btn.open { border-color: #ccc; background: #f5f5f5; }

    .nv-mega-panel { display: none; position: absolute; top: 100%; left: 0; width: 860px; background: #fff; box-shadow: 0 8px 30px rgba(0,0,0,0.18); z-index: 9999; border-radius: 0 4px 4px 4px; }
    .nv-mega-panel.open { display: block; }
    .nv-mega-inner { overflow: hidden; border-radius: 0 4px 4px 4px; display: flex; min-height: 380px; }
    .nv-mega-left { width: 230px; background: #f8f8f8; border-right: 1px solid #e7e7e7; flex-shrink: 0; overflow-y: auto; }
    .nv-mega-right { flex: 1; padding: 20px; display: none; }
    .nv-mega-right.active { display: block; }
    .nv-mega-cat-item { display: flex; align-items: center; gap: 10px; padding: 11px 16px; color: #111; font-size: 13px; font-weight: 600; cursor: pointer; border-left: 3px solid transparent; transition: 0.15s; text-decoration: none; }
    .nv-mega-cat-item:hover, .nv-mega-cat-item.active { background: #fff; border-left-color: var(--nv-primary); color: var(--nv-primary); }
    .nv-mega-cat-item img { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
    .nv-mega-sub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .nv-mega-sub-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; color: #333; font-size: 13px; text-decoration: none; border-radius: 4px; border: 1px solid #f0f0f0; transition: 0.15s; }
    .nv-mega-sub-item:hover { background: #fdf2f2; color: var(--nv-primary); border-color: #fce4e4; }
    .nv-mega-sub-item img { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }

    .nv-offer-link { color: #444; font-size: 13px; font-weight: 600; padding: 8px 12px; text-decoration: none; border: 1px solid transparent; border-radius: 2px; white-space: nowrap; }
    .nv-offer-link:hover { border-color: #ccc; color: var(--nv-primary); }

    /* Category Dropdown in Navbar */
    .nv-cat-dropdown { position: relative; display: inline-block; }
    .nv-cat-dropdown-menu { 
        display: none; position: absolute; top: 100%; left: 0; background: #fff; 
        min-width: 200px; box-shadow: 0 8px 25px rgba(0,0,0,0.1); border: 1px solid #e7e7e7; 
        z-index: 9999; padding: 8px 0; border-radius: 0 0 6px 6px;
    }
    .nv-cat-dropdown:hover .nv-cat-dropdown-menu { display: block; }
    .nv-cat-dropdown-menu a { 
        display: block; padding: 8px 16px; color: #333; text-decoration: none; 
        font-size: 13px; font-weight: 500; transition: background 0.2s; 
    }
    .nv-cat-dropdown-menu a:hover { background: #fdf2f2; color: var(--nv-primary); }

    /* ── MOBILE TOP BAR ── */
    .nv-mobile-bar { display: none; align-items: center; gap: 8px; padding: 6px 12px; background: var(--nv-primary); }
    .nv-mob-hamburger { background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; padding: 4px; flex-shrink: 0; line-height: 1; }
    .nv-mob-logo img { height: 26px; width: auto; object-fit: contain; display: block; }
    .nv-mob-right { display: flex; align-items: center; gap: 2px; margin-left: auto; }
    .nv-mob-icon-btn { background: none; border: none; color: #fff; font-size: 16px; cursor: pointer; padding: 4px 6px; border-radius: 4px; text-decoration: none; display: flex; align-items: center; line-height: 1; }
    .nv-mob-icon-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }

    /* Location text in mobile bar */
    .nv-mob-loc-text { font-size: 10px; color: rgba(255,255,255,0.9); max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; margin-top: 1px; }

    /* Mobile search bar — hidden by default, shown on toggle */
    .nv-mobile-search { background: var(--nv-primary); padding: 0 12px 10px; display: none; }
    .nv-mobile-search.visible { display: block; }
    .nv-m-search-inner { display: flex; background: #fff; border-radius: 4px; overflow: hidden; height: 38px; position: relative; }
    .nv-m-search-inner input { flex: 1; border: none; padding: 0 12px; font-size: 14px; outline: none; }
    .nv-m-search-btn { background: var(--nv-secondary); border: none; padding: 0 14px; color: #333; cursor: pointer; }

    @media (min-width: 992px) {
        .nv-mobile-bar { display: none !important; }
        .nv-mobile-search { display: none !important; }
        .nv-main-nav { display: block !important; }
        .nv-cat-bar { display: block !important; }
    }
    @media (max-width: 991px) {
        .nv-mobile-bar { display: flex !important; }
        .nv-main-nav { display: none !important; }
        /* Show secondary navbar globally in mobile */
        .nv-cat-bar {
            display: none !important;
        }
        .nv-cat-bar-inner {
            display: flex;
            align-items: center;
            padding: 0 10px;
            gap: 5px;
        }
        .nv-all-cats-btn {
            display: none !important;
        }
        .nv-offer-link {
            padding: 8px 15px;
            font-size: 12px;
            font-weight: 700;
            border: 1px solid #eee;
            border-radius: 20px;
            margin-right: 8px;
            color: #111;
            background: #ffffff;
            display: inline-block;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        .nv-offer-link:active { background: #fdf2f2; color: var(--nv-primary); border-color: var(--nv-primary); }
    }
</style>

<style>
    @media (max-width: 991px) {
        #content { padding-top: 42px !important; }
    }
</style>

<header class="nv-header" id="nv-header">

    {{-- ── DESKTOP TOP BAR ── --}}
    <div class="nv-main-nav">
        <div class="container-fluid px-3 px-lg-4">
            <div class="nv-nav-flex">
                @php
                    $navLogo = $generalsetting?->white_logo;
                    if ($navLogo && !Str::startsWith($navLogo, ['http','https'])) {
                        $navLogo = ltrim(str_ireplace(['/public/','public/'], '', $navLogo), '/');
                    }
                @endphp
                <a href="{{ route('home') }}" class="nv-logo flex-shrink-0">
                    <img src="{{ asset($navLogo ?? 'public/logo.png') }}" alt="{{ $generalsetting?->name }}">
                </a>

                <button class="nv-deliver d-none d-lg-flex flex-column flex-shrink-0" id="delivery_location_trigger_desktop" title="Bangladesh">
                    <small>Deliver to</small>
                    <strong><i class="fa-solid fa-location-dot"></i> <span id="current_location_text_desktop">Bangladesh</span></strong>
                </button>

                <div class="nv-search-box">
                    <form action="{{ route('search') }}" method="GET" class="search-form" style="position:relative;">
                        <div class="nv-search-inner">
                            <input type="text" name="keyword" class="search_keyword" placeholder="Search for products, brands and more..." autocomplete="off">
                            <button type="submit" class="nv-search-btn"><i class="fa-solid fa-magnifying-glass"></i></button>
                        </div>
                        <div class="search_result"></div>
                    </form>
                </div>

                <div class="nv-actions ms-auto">
                    @auth('customer')
                    @php $navCustomer = Auth::guard('customer')->user(); @endphp
                    <div class="nv-account-wrap">
                        <button class="nv-act-item" id="navAccountBtn">
                            <small>Hello, {{ Str::limit($navCustomer->name, 10) }}</small>
                            <strong>Account <i class="fa-solid fa-caret-down" style="font-size:10px;"></i></strong>
                        </button>
                        <div id="navAccountMenu">
                            <div style="padding:12px 16px;background:#f8f8f8;border-bottom:1px solid #e7e7e7;">
                                <div style="font-weight:700;font-size:13px;color:#111;">{{ $navCustomer->name }}</div>
                                <div style="font-size:11px;color:#888;">{{ $navCustomer->phone }}</div>
                            </div>
                            <a href="{{ route('customer.account') }}" style="display:flex;align-items:center;gap:10px;padding:10px 16px;color:#111;text-decoration:none;font-size:13px;font-weight:600;" onmouseover="this.style.background='#f0f2f2'" onmouseout="this.style.background=''"><i class="fa-solid fa-gauge-high" style="width:14px;"></i> Dashboard</a>
                            <a href="{{ route('customer.orders') }}" style="display:flex;align-items:center;gap:10px;padding:10px 16px;color:#111;text-decoration:none;font-size:13px;font-weight:600;" onmouseover="this.style.background='#f0f2f2'" onmouseout="this.style.background=''"><i class="fa-solid fa-box-open" style="width:14px;"></i> My Orders</a>
                            <a href="{{ route('customer.profile_edit') }}" style="display:flex;align-items:center;gap:10px;padding:10px 16px;color:#111;text-decoration:none;font-size:13px;font-weight:600;" onmouseover="this.style.background='#f0f2f2'" onmouseout="this.style.background=''"><i class="fa-solid fa-user-pen" style="width:14px;"></i> Edit Profile</a>
                            <div style="border-top:1px solid #e7e7e7;padding:8px;">
                                <a href="{{ route('customer.logout') }}" onclick="event.preventDefault();document.getElementById('nav-logout-form').submit();" style="display:flex;align-items:center;gap:10px;padding:9px 10px;color:#E31019;text-decoration:none;font-size:13px;font-weight:700;border-radius:4px;" onmouseover="this.style.background='#fdf2f2'" onmouseout="this.style.background=''"><i class="fa-solid fa-right-from-bracket" style="width:14px;"></i> Sign Out</a>
                                <form id="nav-logout-form" action="{{ route('customer.logout') }}" method="POST" style="display:none;">@csrf</form>
                            </div>
                        </div>
                    </div>
                    @else
                    <a href="{{ route('customer.login') }}" class="nv-act-item">
                        <small>Hello, sign in</small>
                        <strong>Account <i class="fa-solid fa-caret-down" style="font-size:10px;"></i></strong>
                    </a>
                    @endauth
                    <a href="{{ route('customer.order_track') }}" class="nv-act-item d-none d-md-flex">
                        <small>Returns</small>
                        <strong>& Orders</strong>
                    </a>
                </div>
            </div>
        </div>
    </div>

    {{-- ── MOBILE TOP BAR ── --}}
    <div class="nv-mobile-bar" id="nv-mobile-bar">
        <button class="nv-mob-hamburger mobile-menu-toggle" aria-label="Menu">
            <i class="fa-solid fa-bars"></i>
        </button>

        <a href="{{ route('home') }}" class="nv-mob-logo flex-shrink-0">
            <img src="{{ asset($navLogo ?? 'public/logo.png') }}" alt="{{ $generalsetting?->name }}">
        </a>

        <div class="nv-mob-right">
            {{-- Location --}}
            <button class="nv-mob-icon-btn flex-column" id="delivery_location_trigger" style="align-items:flex-start;padding:4px 6px;" title="Delivery location">
                <span style="font-size:10px;opacity:.75;line-height:1;">Deliver to</span>
                <span style="display:flex;align-items:center;gap:3px;font-size:11px;font-weight:700;line-height:1.2;">
                    <i class="fa-solid fa-location-dot" style="font-size:10px;"></i>
                    <span id="current_location_text" class="nv-mob-loc-text">Bangladesh</span>
                </span>
            </button>

            {{-- Search toggle --}}
            <button class="nv-mob-icon-btn" id="nv-mob-search-toggle" aria-label="Search">
                <i class="fa-solid fa-magnifying-glass"></i>
            </button>

            {{-- Account --}}
            @auth('customer')
            <a href="{{ route('customer.account') }}" class="nv-mob-icon-btn" title="Account">
                <i class="fa-solid fa-user"></i>
            </a>
            @else
            <a href="{{ route('customer.login') }}" class="nv-mob-icon-btn" title="Sign in">
                <i class="fa-solid fa-user"></i>
            </a>
            @endauth
        </div>
    </div>

    {{-- ── MOBILE SEARCH BAR (hidden until toggle) ── --}}
    <div class="nv-mobile-search" id="nv-mobile-search">
        <form action="{{ route('search') }}" method="GET" class="search-form" style="position:relative;">
            <div class="nv-m-search-inner">
                <input type="text" name="keyword" class="search_keyword mob-search-input" placeholder="Search products..." autocomplete="off">
                <button type="submit" class="nv-m-search-btn"><i class="fa-solid fa-magnifying-glass"></i></button>
            </div>
            <div class="search_result"></div>
        </form>
    </div>

    {{-- ── SECONDARY NAV BAR (desktop) ── --}}
    <div class="nv-cat-bar" id="nv-cat-bar">
        <div class="container-fluid px-3 px-lg-4">
            <div class="nv-cat-bar-inner">

                <div style="position:relative;" id="nv-all-cats-wrap">
                    <button class="nv-all-cats-btn mobile-menu-toggle" id="nv-all-cats-btn">
                        <i class="fa-solid fa-bars"></i> All Categories
                    </button>

                    <div class="nv-mega-panel" id="nv-mega-panel">
                        <div class="nv-mega-inner">
                            <div class="nv-mega-left">
                                @foreach($menucategories as $cat)
                                @php
                                    $catImg = $cat->image;
                                    if ($catImg && !Str::startsWith($catImg, ['http','https'])) {
                                        $catImg = asset(ltrim(str_ireplace(['/public/','public/'], '', $catImg), '/'));
                                    }
                                    $catImg = $catImg ?: 'https://cdn-icons-png.flaticon.com/512/3081/3081840.png';
                                @endphp
                                <a href="{{ route('category', $cat->slug) }}"
                                   class="nv-mega-cat-item"
                                   data-cat="{{ $cat->id }}"
                                   onmouseenter="showMegaSub({{ $cat->id }})">
                                    <img src="{{ $catImg }}" alt="{{ $cat->name }}" onerror="this.onerror=null;this.src='https://cdn-icons-png.flaticon.com/512/3081/3081840.png'">
                                    {{ $cat->name }}
                                    @if($cat->subcategories->count()) <i class="fa-solid fa-chevron-right ms-auto" style="font-size:9px;color:#aaa;"></i> @endif
                                </a>
                                @endforeach
                            </div>
                            @foreach($menucategories as $cat)
                            <div class="nv-mega-right" id="mega-sub-{{ $cat->id }}">
                                @if($cat->subcategories->count())
                                <div class="nv-mega-sub-grid">
                                    @foreach($cat->subcategories as $sub)
                                    @php
                                        $subImg = $sub->image;
                                        if ($subImg && !Str::startsWith($subImg, ['http','https'])) {
                                            $subImg = asset(ltrim(str_ireplace(['/public/','public/'], '', $subImg), '/'));
                                        }
                                        $subImg = $subImg ?: 'https://cdn-icons-png.flaticon.com/512/3081/3081840.png';
                                    @endphp
                                    <a href="{{ route('subcategory', $sub->slug) }}" class="nv-mega-sub-item">
                                        <img src="{{ $subImg }}" alt="{{ $sub->subcategoryName }}" onerror="this.onerror=null;this.src='https://cdn-icons-png.flaticon.com/512/3081/3081840.png'">
                                        {{ $sub->subcategoryName }}
                                    </a>
                                    @endforeach
                                </div>
                                @else
                                <p style="color:#888;font-size:13px;padding:10px 0;">No subcategories</p>
                                @endif
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                @foreach($menucategories->take(8) as $cat)
                <div class="nv-cat-dropdown">
                    <a href="{{ route('category', $cat->slug) }}" class="nv-offer-link">
                        {{ $cat->name }} 
                        @if($cat->subcategories->count()) <i class="fa fa-chevron-down ms-1" style="font-size:8px; opacity:0.6;"></i> @endif
                    </a>
                    @if($cat->subcategories->count())
                    <div class="nv-cat-dropdown-menu">
                        @foreach($cat->subcategories as $sub)
                        <a href="{{ route('subcategory', $sub->slug) }}">{{ $sub->subcategoryName }}</a>
                        @endforeach
                    </div>
                    @endif
                </div>
                @endforeach

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

</header>

@push('script')
<script>
$(function() {
    // ── Desktop account dropdown ──
    $('#navAccountBtn').on('click', function(e) {
        e.stopPropagation();
        $('#navAccountMenu').toggle();
    });

    // ── Desktop All Categories ──
    $('#nv-all-cats-btn').on('click', function(e) {
        e.stopPropagation();
        $('#nv-mega-panel').toggleClass('open');
        $(this).toggleClass('open');
    });

    $(document).on('click', function(e) {
        if (!$(e.target).closest('.nv-account-wrap').length) $('#navAccountMenu').hide();
        if (!$(e.target).closest('#nv-all-cats-wrap').length) {
            $('#nv-mega-panel').removeClass('open');
            $('#nv-all-cats-btn').removeClass('open');
        }
    });

    // ── Mobile search toggle ──
    $('#nv-mob-search-toggle').on('click', function(e) {
        e.stopPropagation();
        var $s = $('#nv-mobile-search');
        $s.toggleClass('visible');
        if ($s.hasClass('visible')) {
            $s.find('.mob-search-input').focus();
        }
    });

    // ── Hide mobile search on scroll ──
    var lastScroll = 0;
    $(window).on('scroll', function() {
        var cur = $(this).scrollTop();
        if (cur > lastScroll && cur > 60) {
            // scrolling down — hide search
            $('#nv-mobile-search').removeClass('visible');
        }
        lastScroll = cur;
        // sticky shadow
        $('.nv-header').toggleClass('shadow', cur > 10);
    });

    // ── Optimized Live Search with Debounce ──
    let searchTimer;
    $('.search_keyword').on('input', function() {
        const $input = $(this);
        const $res = $input.closest('form').find('.search_result');
        const kw = $input.val().trim();

        clearTimeout(searchTimer);
        if (kw.length >= 2) {
            searchTimer = setTimeout(() => {
                $.ajax({
                    url: "{{ route('livesearch') }}",
                    type: "GET",
                    data: { keyword: kw },
                    success: function(data) {
                        if (data && data.length > 5) {
                            $res.html(data).css('display', 'block');
                        } else {
                            $res.hide();
                        }
                    },
                    error: function(err) {
                        console.error("Live search failed", err);
                    }
                });
            }, 200);
        } else {
            $res.hide();
        }
    });

    $(document).on('click', function(e) {
        if (!$(e.target).closest('.search-form, .nv-mobile-search').length) {
            $('.search_result').fadeOut(150);
        }
    });

    // ── Location initialization
    var saved = localStorage.getItem('loc_display');
    if(saved) {
        var short = saved.length > 14 ? saved.substring(0, 14) + '\u2026' : saved;
        $('#current_location_text_desktop').text(short);
        $('#current_location_text').text(short);
        $('#sidebar_location_text').text(saved);
        
        $('#delivery_location_trigger_desktop').attr('title', saved);
        $('#delivery_location_trigger').attr('title', saved);
        $('#delivery_location_trigger_sidebar').attr('title', saved);
    }

});

function showMegaSub(catId) {
    $('.nv-mega-right').removeClass('active');
    $('.nv-mega-cat-item').removeClass('active');
    $('#mega-sub-' + catId).addClass('active');
    $('[data-cat="' + catId + '"]').addClass('active');
}
</script>
@endpush
