@php
    if(session()->has('pincode_details')) {
        $pincode_details = session()->get('pincode_details');
        $pincode = isset($pincode_details['pincode']) ? $pincode_details['pincode'] : '';
        $city = isset($pincode_details['city']) ? $pincode_details['city'] : '';
    } else {
        $pincode = '';
        $city = '';
    }
    
    $currentLocation = session()->get('currentLocation');
    $currentPincode = isset($currentLocation['pincode']) ? $currentLocation['pincode'] : '';
    $currentCity = isset($currentLocation['city']) ? $currentLocation['city'] : '';
    $hasLocation = !empty($city) || !empty($pincode);

    // Optimized DB Queries: Run only if user is logged in
    $authUserId = Auth::check() ? Auth::user()->id : "";
    $authUserName = Auth::check() ? Auth::user()->name : "";
    $authUserImage = Auth::check() ? Auth::user()->avatar : "";
    
    $chekPartner = null;
    $userNotification = collect();
    $userNotificationCount = 0;

    if(Auth::check()) {
        $chekPartner = \App\Models\Affiliate::where('user_id', $authUserId)->first();
        
        $userNotification = App\Models\FirebaseNotification::where('is_read', 0)
            ->where('receiver_id', $authUserId)
            ->where('send_by', 'admin')
            ->latest()
            ->limit(5)
            ->get();
            
        // FIX: reuse the already-loaded collection instead of second DB query
        $userNotificationCount = $userNotification->count();
    }
@endphp

@if(get_setting('topbar_banner') != null)
<div class="position-relative top-banner removable-session z-1035 d-none" data-key="top-banner" data-value="removed">
    <a href="{{ get_setting('topbar_banner_link') }}" class="d-block text-reset">
        <img src="{{ uploaded_asset(get_setting('topbar_banner')) }}" class="w-100 mw-100 h-50px h-lg-auto img-fit">
    </a>
    <button class="btn text-white absolute-top-right set-session" data-key="top-banner" data-value="removed" data-toggle="remove-parent" data-parent=".top-banner">
        <i class="la la-close la-2x"></i>
    </button>
</div>
@endif

<input type="hidden" name="authUserId" id="authUserId" value="{{$authUserId}}">
<input type="hidden" name="authUserName" id="authUserName" value="{{$authUserName}}">
<input type="hidden" name="authUserImage" id="authUserImage" value="{{$authUserImage}}">
<input type="hidden" name="getpincode" class="pincode1" value="{{$currentPincode ?: $currentCity}}">
<div class="top-navbar bg-white border-bottom border-soft-secondary z-1035 h-35px h-sm-auto">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col">
                <ul class="list-inline d-flex justify-content-between justify-content-lg-start mb-0">
                    @if(get_setting('show_language_switcher') == 'on')
                    <li class="list-inline-item dropdown mr-3" id="lang-change">
                        @php
                            if(Session::has('locale')){
                                $locale = Session::get('locale', Config::get('app.locale'));
                            } else { $locale = 'en'; }
                        @endphp
                        <a href="javascript:void(0)" class="dropdown-toggle text-reset py-2" data-toggle="dropdown" data-display="static">
                            <img src="{{ static_asset('assets/img/placeholder.jpg') }}" data-src="{{ static_asset('assets/img/flags/'.$locale.'.png') }}" class="mr-2 lazyload" alt="{{ \App\Models\Language::where('code', $locale)->first()->name }}" height="11">
                            <span class="opacity-60">{{ \App\Models\Language::where('code', $locale)->first()->name }}</span>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-left">
                            @foreach (\App\Models\Language::where('status', 1)->get() as $key => $language)
                                <li>
                                    <a href="javascript:void(0)" data-flag="{{ $language->code }}" class="dropdown-item @if($locale == $language) active @endif">
                                        <img src="{{ static_asset('assets/img/placeholder.jpg') }}" data-src="{{ static_asset('assets/img/flags/'.$language->code.'.png') }}" class="mr-1 lazyload" alt="{{ $language->name }}" height="11">
                                        <span class="language">{{ $language->name }}</span>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </li>
                    @endif

                    @if(get_setting('show_currency_switcher') == 'on')
                    <li class="list-inline-item dropdown ml-auto ml-lg-0 mr-0" id="currency-change">
                        @php
                            if(Session::has('currency_code')){
                                $currency_code = Session::get('currency_code');
                            } else {
                                $currency_code = \App\Models\Currency::findOrFail(get_setting('system_default_currency'))->code;
                            }
                        @endphp
                        <a href="javascript:void(0)" class="dropdown-toggle text-reset py-2 opacity-60" data-toggle="dropdown" data-display="static">
                            {{ \App\Models\Currency::where('code', $currency_code)->first()->name }} {{ (\App\Models\Currency::where('code', $currency_code)->first()->symbol) }}
                        </a>
                        <ul class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
                            @foreach (\App\Models\Currency::where('status', 1)->get() as $key => $currency)
                                <li>
                                    <a class="dropdown-item @if($currency_code == $currency->code) active @endif" href="javascript:void(0)" data-currency="{{ $currency->code }}">{{ $currency->name }} ({{ $currency->symbol }})</a>
                                </li>
                            @endforeach
                        </ul>
                    </li>
                    @endif
                </ul>
            </div>

            <div class="col-8 text-right d-none d-lg-block">
                <ul class="list-inline mb-0 h-100 d-flex justify-content-end align-items-center">
                    @if (get_setting('helpline_number'))
                        <li class="list-inline-item mr-3 border-right border-left-0 pr-3 pl-0">
                            <a href="tel:{{ get_setting('helpline_number') }}" class="text-reset d-inline-block opacity-60 py-2">
                                <i class="la la-phone"></i>
                                <span>{{ translate('Help line')}}</span>
                                <span>{{ get_setting('helpline_number') }}</span>
                            </a>
                        </li>
                    @endif
                    @auth
                        @if(isAdmin())
                            <li class="list-inline-item mr-3 border-right border-left-0 pr-3 pl-0">
                                <a href="{{ route('admin.dashboard') }}" class="text-reset d-inline-block opacity-60 py-2">{{ translate('My Panel')}}</a>
                            </li>
                        @else
                            <li class="list-inline-item mr-3 border-right border-left-0 pr-3 pl-0 dropdown">
                                @include("partials.notifications_bell")
                            </li>

                            <li class="list-inline-item mr-3 border-right border-left-0 pr-3 pl-0">
                                @if (Auth::user()->user_type == 'seller')
                                    <a href="{{ route('seller.dashboard') }}" class="text-reset d-inline-block opacity-60 py-2">{{ translate('My Panel')}}</a>
                                @else
                                    <a href="{{ route('dashboard') }}" class="text-reset d-inline-block opacity-60 py-2">{{ translate('My Panel')}}</a>
                                @endif
                            </li>
                        @endif
                        <li class="list-inline-item mr-3 border-right border-left-0 pr-3 pl-0">
                            <a href="{{ route('logout') }}" class="text-reset d-inline-block opacity-60 py-2">{{ translate('Logout')}}</a>
                        </li>
                        @if(Auth::user()->user_type == 'customer')
                            @if(empty($chekPartner))
                                <li class="list-inline-item">
                                    <a href="{{ url('/affiliate') }}" class="text-reset d-inline-block opacity-60 py-2">{{ translate('Become a Business Partner')}}</a>
                                </li>
                            @endif
                        @endif
                    @else
                        <li class="list-inline-item mr-3 border-right border-left-0 pr-3 pl-0">
                            <a href="{{ route('shg.user.login') }}" class="text-reset d-inline-block opacity-60 py-2">{{ translate('SHG Member Portal')}}</a>
                        </li>
                        <li class="list-inline-item mr-3 border-right border-left-0 pr-3 pl-0">
                            <a href="{{ route('user.login') }}" class="text-reset d-inline-block opacity-60 py-2">{{ translate('Login')}}</a>
                        </li>
                        <li class="list-inline-item mr-3 border-right border-left-0 pr-3 pl-0">
                            <a href="{{ route('user.registration') }}" class="text-reset d-inline-block opacity-60 py-2">{{ translate('Registration')}}</a>
                        </li>
                        <li class="list-inline-item">
                            <a href="{{ url('/affiliate') }}" class="text-reset d-inline-block opacity-60 py-2">{{ translate('Become a Business Partner')}}</a>
                        </li>
                    @endauth
                </ul>
            </div>
        </div>
    </div>
</div>


<header class="@if(get_setting('header_stikcy') == 'on') sticky-top @endif z-1020 bg-white border-bottom shadow-sm">
    <style>
        .logo-bar-area { z-index: 1050 !important; }

        /* --- Custom Header Grid --- */
        .bm-header-container {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            padding: 6px; /* User change */
        }

        /* Mobile Layout */
        .bm-logo-box { 
            order: 1; 
            flex: 0 0 auto; 
            display: flex;
            align-items: center;
        }

        .bm-loc-box { 
            order: 2; 
            flex: 0 0 auto; 
            margin-left: auto; 
        }

        .bm-search-box {
            order: 3;
            flex: 0 0 100%;
            margin-top: 8px;
            z-index: 99999 !important;
            width: 100% !important;
        }
        
        .logo-bar-area { 
            z-index: 1060 !important; 
            background: #fff; 
            position: relative;
        }
        header.sticky-top {
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .bm-search-box .input-group,
        .bm-desktop-add-btn,
        .bm-loc-trigger {
          height: 45px !important;
          display: flex !important;
          align-items: center !important;
        }
        
        /* Desktop button - mobile lo hide avvali */
            .bm-loc-trigger.d-none {
              display: none !important;
            }
            
            @media (min-width: 992px) {
              .bm-loc-trigger.d-none {
                display: flex !important;
                height: 45px !important;
                align-items: center !important;
              }
            }
            
            /* Mobile button - desktop lo hide avvali */
            @media (min-width: 992px) {
              .bm-loc-trigger.d-lg-none {
                display: none !important;
              }
            }
            
            @media (max-width: 991px) {
              .bm-loc-trigger.d-lg-none {
                display: flex !important;
                padding: 2px 4px 3px 0px;
              }
            }

        .bm-action-box { display: none; }

        @media (min-width: 992px) {
            .bm-action-box { display: flex; align-items: center; }
        }

        /* --- Search Dropdown Styling (Mobile Default) --- */
        .bm-search-box .typed-search-box {
            position: static; /* User change: Mobile lo normal flow */
            width: 100%;
            background: #ffffff;
            z-index: 999999 !important;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
            margin-top: 5px;
            max-height: 60vh;
            overflow-y: auto;
        }

        .bm-search-box .typed-search-box.d-none { display: none !important; }
        .bm-search-box .typed-search-box:not(.d-none) { display: block !important; }

        /* Desktop Layout (992px+) */
        @media (min-width: 992px) {
            .bm-header-container { 
                flex-wrap: nowrap; 
                padding: 0; 
            }
            .bm-loc-box { 
                margin-left: 0; 
                margin-right: 20px; 
            }
            .bm-search-box { 
                order: 3; 
                flex: 1 1 auto; 
                margin-top: 0; 
                padding-left: 15px; 
            }
            .bm-action-box { 
                order: 4; 
                display: flex; 
                align-items: center; 
                margin-left: 15px; 
            }

            /* User change: Desktop lo matrame absolute dropdown */
            .bm-search-box .typed-search-box {
                position: absolute;
                top: 100%;
                left: 0;
            }
        }

        /* =========================================
           MOBILE SIDEBAR STYLES (Added Back)
           ========================================= */
        .bm-sidebar-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: rgba(0,0,0,0.6);
            z-index: 1000000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }
        .bm-sidebar-backdrop.show {
            opacity: 1;
            visibility: visible;
        }

        .bm-mobile-sidebar {
            position: fixed;
            top: 0;
            left: -320px;
            width: 280px;
            height: 100vh;
            background-color: #ffffff;
            z-index: 1000001;
            box-shadow: 4px 0 15px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .bm-mobile-sidebar.open { left: 0; }
        
        .bm-sidebar-header {
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #f8fafc;
            border-bottom: 1px solid #e2e8f0;
        }
        
        .bm-sidebar-body {
            padding: 10px 0;
            overflow-y: auto;
            flex-grow: 1;
        }
        
        .bm-sidebar-menu-item {
            display: flex;
            align-items: center;
            padding: 12px 20px;
            color: #1e293b;
            font-size: 15px;
            font-weight: 500;
            border-bottom: 1px solid #f1f5f9;
            transition: background 0.2s;
        }
        .bm-sidebar-menu-item:hover {
            background-color: #f8fafc;
            color: #2563eb;
        }
        .bm-sidebar-menu-item i {
            font-size: 20px;
            margin-right: 12px;
            color: #64748b;
        }
        .bm-sidebar-menu-item:hover i { color: #2563eb; }
        
        /* --- Desktop Add Business Button Style --- */
        .bm-desktop-add-btn {
            background: linear-gradient(135deg, #ff8c00, #ff4500);
            color: #ffffff !important;
            border: none;
            border-radius: 6px;
            padding: 10px 6px;
            font-weight: 600;
            font-size: 12px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 4px 15px rgba(255, 69, 0, 0.3);
            transition: all 0.3s ease;
            text-decoration: none !important;
            min-width: 125px;
        }
        .bm-desktop-add-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255, 69, 0, 0.4);
            color: #ffffff;
        }
        .bm-desktop-add-btn i {
            font-size: 22px;
        }
        
    </style>

    <div class="bm-sidebar-backdrop d-lg-none" id="bmSidebarBackdrop"></div>

    <div class="bm-mobile-sidebar d-lg-none" id="bmMobileSidebar">
        <div class="bm-sidebar-header">
            <h6 class="mb-0 font-weight-bold" style="color: #0f172a;">Menu</h6>
            <button type="button" class="btn btn-sm btn-light rounded-circle shadow-none" id="bmSidebarCloseBtn" style="width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;">
                <i class="las la-times fs-18 text-danger"></i>
            </button>
        </div>
        <div class="bm-sidebar-body">
            <a href="{{ route('home') }}" class="bm-sidebar-menu-item">
                <i class="las la-home"></i> {{ translate('Home') }}
            </a>
            @auth
                @if(isAdmin())
                    <a href="{{ route('admin.dashboard') }}" class="bm-sidebar-menu-item"><i class="las la-user-tie"></i> {{ translate('My Panel')}}</a>
                @else
                    @if (Auth::user()->user_type == 'seller')
                        <a href="{{ route('seller.dashboard') }}" class="bm-sidebar-menu-item"><i class="las la-store"></i> {{ translate('My Panel')}}</a>
                    @else
                        <a href="{{ route('dashboard') }}" class="bm-sidebar-menu-item"><i class="las la-user"></i> {{ translate('My Panel')}}</a>
                    @endif
                    <a href="{{ route('users.all-notifications',['type'=>'all','id'=>0]) }}" class="bm-sidebar-menu-item">
                        <i class="las la-bell"></i> {{ translate('Notifications')}}
                        @if($userNotificationCount > 0)
                            <span class="badge badge-primary badge-circle ml-auto">{{$userNotificationCount}}</span>
                        @endif
                    </a>
                @endif
                
                @if(Auth::user()->user_type == 'customer')
                    @if(empty($chekPartner))
                        <a href="{{ url('/affiliate') }}" class="bm-sidebar-menu-item"><i class="las la-handshake"></i> {{ translate('Become a Business Partner')}}</a>
                    @endif
                @endif
                <a href="{{ route('logout') }}" class="bm-sidebar-menu-item text-danger"><i class="las la-sign-out-alt text-danger"></i> {{ translate('Logout')}}</a>
            @else
                <a href="{{ route('shg.user.login') }}" class="bm-sidebar-menu-item"><i class="las la-users"></i> {{ translate('SHG Member Portal')}}</a>
                <a href="{{ route('user.login') }}" class="bm-sidebar-menu-item"><i class="las la-sign-in-alt"></i> {{ translate('Login')}}</a>
                <a href="{{ route('user.registration') }}" class="bm-sidebar-menu-item"><i class="las la-user-plus"></i> {{ translate('Registration')}}</a>
                <a href="{{ url('/affiliate') }}" class="bm-sidebar-menu-item"><i class="las la-handshake"></i> {{ translate('Become a Business Partner')}}</a>
            @endauth
            
            @if (get_setting('helpline_number'))
                <div class="mt-4 px-3">
                    <p class="fs-12 text-muted mb-1 text-uppercase">{{ translate('Need Help?') }}</p>
                    <a href="tel:{{ get_setting('helpline_number') }}" class="btn btn-outline-primary btn-block">
                        <i class="las la-phone"></i> {{ get_setting('helpline_number') }}
                    </a>
                </div>
            @endif
        </div>
    </div>

    <div class="position-relative logo-bar-area">
        <div class="container">
            <div class="bm-header-container">
                
                <div class="bm-logo-box">
                    <button type="button" class="btn btn-link p-0 mr-3 d-lg-none shadow-none" id="mobileMenuBtn" style="color: #1e293b;">
                        <i class="las la-bars" style="font-size: 26px;"></i>
                    </button>

                    <a class="d-block py-lg-20px pr-3" href="{{ route('home') }}">
                        @php $header_logo = get_setting('header_logo'); @endphp
                        @if($header_logo != null)
                            <img src="{{ uploaded_asset($header_logo) }}" alt="{{ env('APP_NAME') }}" class="mw-100 h-30px h-md-40px">
                        @else
                            <img src="{{ static_asset('assets/img/logo.png') }}" alt="{{ env('APP_NAME') }}" class="mw-100 h-30px h-md-40px">
                        @endif
                    </a>
                </div>

                <div class="bm-loc-box bm-loc-wrapper m-0">
                    <button type="button" class="bm-loc-trigger d-none d-lg-flex" data-toggle="modal" data-target="#bmLocationModal">
                        <span class="bm-loc-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z" fill="currentColor" opacity="0.8"/><circle cx="12" cy="9" r="2.5" fill="white"/></svg></span>
                        <span class="bm-loc-text">
                            <span class="bm-loc-label">Your Location</span>
                            <span class="bm-loc-city">@if($hasLocation) {{ $city ?: $pincode }} @else India @endif</span>
                        </span>
                    </button>
                    
                    <button type="button" class="bm-loc-trigger px-2 py-1 d-flex d-lg-none align-items-center" data-toggle="modal" data-target="#bmLocationModal" style="border-radius: 6px; border: 1px solid #e2e8f0; background: #ffffff;">
                        <span class="bm-loc-icon text-primary"><svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z" fill="currentColor" opacity="0.8"/><circle cx="12" cy="9" r="2.5" fill="white"/></svg></span>
                        <span class="bm-loc-text text-left ml-1" style="line-height: 1;">
                            <span class="bm-loc-label">Your Location</span>
                            <span class="bm-loc-city font-weight-bold" style="font-size:12px; color: #1e293b;">@if($hasLocation) {{ $city ?: $pincode }} @else India @endif</span>
                        </span>
                    </button>
                </div>

                <div class="bm-search-box position-relative">
                    <form action="{{ route('search') }}" method="GET" class="stop-propagation w-100">
                        <div class="input-group w-100" style="border: 1px solid #e2e8f0; border-radius: 6px; overflow: hidden;">
                            <input type="text" class="border-0 form-control shadow-none" id="search" name="keyword"
                                @isset($query) value="{{ $query }}" @endisset
                                placeholder="{{translate('I am shopping for...')}}" autocomplete="off" onkeyup="search()" onfocus="search()" style="margin: auto;">
                            <div class="input-group-append">
                                <button class="btn btn-primary px-3 shadow-none" type="submit" style="border-radius: 0;">
                                    <i class="la la-search la-flip-horizontal fs-18"></i>
                                </button>
                            </div>
                        </div>
                    </form>
                    
                    <div class="typed-search-box stop-propagation document-click-d-none d-none">
                        <div class="search-preloader absolute-top-center">
                            <div class="dot-loader"><div></div><div></div><div></div></div>
                        </div>
                        <div class="search-nothing d-none p-3 text-center fs-16"></div>
                        <div id="search-content" class="text-left"></div>
                    </div>
                </div>

                <div class="bm-action-box">
                    @guest
                        <div class="ml-3">
                            <a href="{{ url('/users/login') }}" class="bm-desktop-add-btn">
                                <i class="las la-store"></i>
                                <span>{{ translate('Add Business') }}</span>
                            </a>
                        </div>
                    @else
                        <div class="ml-3" id="compare">@include('frontend.partials.message')</div>
                        @php
                            $desktop_phone = isset(auth()->user()->phone) ? auth()->user()->phone : '';
                            $desktop_seller_row = null;
                            $desktop_customer_row = null;
                            if(!empty($desktop_phone)){
                                $desktop_seller_row = App\Models\User::where('phone', $desktop_phone)->where('user_type','seller')->first();
                                $desktop_customer_row = App\Models\User::where('phone', $desktop_phone)->where('user_type','customer')->first();
                            }
                            $desktop_on_seller_page = request()->is('seller') || request()->is('seller/*');
                        @endphp
                        @if(!empty($desktop_seller_row))
                            @if($desktop_on_seller_page)
                                <div class="ml-3">
                                    <a href="{{ !empty($desktop_customer_row) ? route('seller.customer.login', $desktop_customer_row->id) : url('/dashboard') }}" class="bm-desktop-add-btn">
                                        <i class="las la-user"></i>
                                        <span>{{ translate('User Dashboard') }}</span>
                                    </a>
                                </div>
                            @else
                                <div class="ml-3">
                                    <a href="{{ route('seller.customer.login', $desktop_seller_row->id) }}" class="bm-desktop-add-btn">
                                        <i class="las la-store"></i>
                                        <span>{{ translate('Seller Dashboard') }}</span>
                                    </a>
                                </div>
                            @endif
                        @elseif(Auth::user()->user_type == 'customer')
                            <div class="ml-3">
                                <a href="{{ url('/shops/create') }}" class="bm-desktop-add-btn">
                                    <i class="las la-store"></i>
                                    <span>{{ translate('Become Seller') }}</span>
                                </a>
                            </div>
                        @endif
                    @endguest
                </div>

            </div>
        </div>
        
        @if(Route::currentRouteName() != 'home')
        <div class="hover-category-menu position-absolute w-100 top-100 left-0 right-0 d-none z-3" id="hover-category-menu">
            <div class="container">
                <div class="row gutters-10 position-relative">
                    <div class="col-lg-3 position-static">
                        @include('frontend.partials.category_menu')
                    </div>
                </div>
            </div>
        </div>
        @endif
    </div>
</header>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const menuBtn = document.getElementById('mobileMenuBtn');
    const closeBtn = document.getElementById('bmSidebarCloseBtn');
    const sidebar = document.getElementById('bmMobileSidebar');
    const backdrop = document.getElementById('bmSidebarBackdrop');

    function toggleSidebar() {
        if(sidebar && backdrop) {
            sidebar.classList.toggle('open');
            backdrop.classList.toggle('show');
            document.body.style.overflow = sidebar.classList.contains('open') ? 'hidden' : '';
        }
    }

    if(menuBtn) menuBtn.addEventListener('click', toggleSidebar);
    if(closeBtn) closeBtn.addEventListener('click', toggleSidebar);
    if(backdrop) backdrop.addEventListener('click', toggleSidebar);
});
</script>

<div class="modal fade" id="order_details" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
        <div class="modal-content">
            <div id="order-details-modal-body"></div>
        </div>
    </div>
</div>

{{-- CSRF --}}
@if(!isset($__csrfMetaAdded))
<meta name="csrf-token" content="{{ csrf_token() }}">
@php $__csrfMetaAdded = true; @endphp
@endif

{{-- ================================================================
     LOCATION MODAL — WIDER & SHORTER SPLIT-SCREEN DESIGN (CENTERED)
     ================================================================ --}}
<div class="modal fade" id="bmLocationModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog bmloc-dialog modal-dialog-centered" role="document">
        <div class="modal-content bmloc-card">
            
            <button type="button" class="bmloc-close-absolute" data-dismiss="modal">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2"/>
                </svg>
            </button>

            <div class="bmloc-flex-container">
                <div class="bmloc-left-pane">
                    <div class="bmloc-header-simple">
                        <h5 class="bmloc-title">Choose your location</h5>
                        <p class="bmloc-subtitle">Get accurate delivery options & prices</p>
                    </div>

                    <div class="bmloc-search-area">
                        <div class="bmloc-search-box">
                            <svg class="bmloc-search-icon" width="18" height="18" viewBox="0 0 24 24" fill="none">
                                <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2"/>
                                <path d="M21 21l-4.35-4.35" stroke="currentColor" stroke-width="2"/>
                            </svg>
                            <input type="text" 
                                   id="locSearchInput" 
                                   class="bmloc-search-input" 
                                   placeholder="Search city or pincode..."
                                   autocomplete="off">
                            <button class="bmloc-clear-search d-none" id="clearSearchBtn">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
                                    <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2"/>
                                </svg>
                            </button>
                        </div>
                        <div id="searchResults" class="bmloc-search-results d-none"></div>
                    </div>

                    <div class="bmloc-gps-row" id="gpsDetectBtn">
                        <div class="bmloc-gps-left">
                            <div class="bmloc-gps-icon">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                                    <circle cx="12" cy="12" r="3" fill="currentColor"/>
                                    <path d="M12 2v3M12 19v3M2 12h3M19 12h3" stroke="currentColor" stroke-width="2"/>
                                    <circle cx="12" cy="12" r="8" stroke="currentColor" stroke-width="1.5" opacity="0.5"/>
                                </svg>
                            </div>
                            <div class="bmloc-gps-content">
                                <span class="bmloc-gps-title" id="gpsBtnText">Use current location</span>
                                <span class="bmloc-gps-hint" id="gpsBtnHint">
                                    @if($hasLocation)
                                        <span style="color: #10b981; font-weight: 600;">📍 {{ $city ?: $pincode }}</span>
                                    @else
                                        Auto-detect via GPS
                                    @endif
                                </span>
                            </div>
                        </div>
                    </div>
                    <div id="gpsStatusMsg" class="bmloc-status-msg d-none"></div>
                    
                    <div class="bmloc-footer-text">
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none">
                            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"/>
                            <path d="M12 8v4M12 16h.01" stroke="currentColor" stroke-width="1.5"/>
                        </svg>
                        Personalizes your shopping experience
                    </div>
                </div>

                <div class="bmloc-right-pane">
                    <div class="bmloc-section">
                        <div class="bmloc-section-title">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
                                <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" stroke="currentColor" stroke-width="1.5"/>
                            </svg>
                            <span>POPULAR CITIES</span>
                        </div>
                        <div class="bmloc-city-grid" id="popularCitiesGrid"></div>
                    </div>

                    <div class="bmloc-section mt-4">
                        <div class="bmloc-section-title">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
                                <path d="M3 9h18M3 15h18M9 3v18M15 3v18" stroke="currentColor" stroke-width="1.5"/>
                            </svg>
                            <span>MORE CITIES</span>
                        </div>
                        <div class="bmloc-tag-cloud" id="moreCitiesGrid"></div>
                        <button class="bmloc-show-more d-none" id="showMoreCitiesBtn">+ Show more</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* ========== LOCATION TRIGGER ========== */
.bm-loc-wrapper {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 12px;
}

.bm-loc-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
}

.bm-loc-trigger:hover {
    background: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
}

.bm-loc-icon {
    color: #2563eb;
    display: flex;
    align-items: center;
}

.bm-loc-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: left;
}

.bm-loc-label {
    font-size: 9px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 4px 3px 0px;
}

.bm-loc-city {
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bm-loc-arrow {
    color: #94a3b8;
    display: flex;
    align-items: center;
}

/* ========== MODAL - WIDER SPLIT SCREEN ========== */
.bmloc-dialog {
    max-width: 820px;
}

.bmloc-card {
    border: none;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    background: #ffffff;
}

.bmloc-close-absolute {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 36px;
    height: 36px;
    border: none;
    background: #f1f5f9;
    border-radius: 50%;
    cursor: pointer;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 10;
}

.bmloc-close-absolute:hover {
    background: #fee2e2;
    color: #dc2626;
}

/* Flex Container for Split Screen */
.bmloc-flex-container {
    display: flex;
    flex-direction: row;
    min-height: 400px;
}

/* Left Pane */
.bmloc-left-pane {
    flex: 0 0 42%;
    background: #f8fafc;
    padding: 35px 25px;
    border-right: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
}

.bmloc-header-simple {
    margin-bottom: 24px;
}

.bmloc-title {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 6px;
}

.bmloc-subtitle {
    font-size: 13px;
    color: #64748b;
    margin: 0;
}

/* Search Area */
.bmloc-search-area {
    position: relative;
    margin-bottom: 20px;
}

.bmloc-search-box {
    position: relative;
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 60px;
    transition: all 0.2s;
}

.bmloc-search-box:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.bmloc-search-icon {
    position: absolute;
    left: 18px;
    color: #94a3b8;
    pointer-events: none;
}

.bmloc-search-input {
    width: 100%;
    padding: 12px 40px 12px 48px;
    border: none;
    background: transparent;
    font-size: 14px;
    outline: none;
    border-radius: 60px;
}

.bmloc-clear-search {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    padding: 6px;
    border-radius: 30px;
}

.bmloc-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.15);
    max-height: 250px;
    overflow-y: auto;
    z-index: 10;
    margin-top: 8px;
}

/* GPS Button */
.bmloc-gps-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    cursor: pointer;
    transition: all 0.2s;
}

.bmloc-gps-row:hover {
    border-color: #2563eb;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
}

.bmloc-gps-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bmloc-gps-icon {
    color: #2563eb;
}

.bmloc-gps-title {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    display: block;
}

.bmloc-gps-hint {
    font-size: 12px;
    color: #64748b;
    display: block;
    margin-top: 2px;
}

.bmloc-status-msg {
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 12px;
}

.bmloc-status-msg.success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.bmloc-status-msg.error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

.bmloc-footer-text {
    margin-top: auto;
    padding-top: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #94a3b8;
}

/* Right Pane */
.bmloc-right-pane {
    flex: 0 0 58%;
    padding: 35px;
}

.bmloc-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 16px;
}

.bmloc-city-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.bmloc-city-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 6px;
    background: #f8fafc;
    border: 1px solid transparent;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    text-align: center;
}

.bmloc-city-btn:hover {
    border-color: #2563eb;
    background: #eff6ff;
    color: #2563eb;
}

.bmloc-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bmloc-tag {
    padding: 8px 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s;
}

.bmloc-tag:hover {
    border-color: #2563eb;
    background: #eff6ff;
    color: #2563eb;
}

.bmloc-show-more {
    margin-top: 14px;
    padding: 8px 0;
    background: none;
    border: none;
    color: #2563eb;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* Search Result Items */
.bmloc-search-result-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 12px 18px;
    border: none;
    background: white;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid #f8fafc;
}

.bmloc-search-result-item:hover {
    background: #f8fafc;
}

.bmloc-result-city {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}

.bmloc-result-pin {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
}

.bmloc-no-result {
    padding: 30px 20px;
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
}

/* Animations & Loaders */
.bmloc-loading { opacity: 0.6; pointer-events: none; }

@keyframes spin { to { transform: rotate(360deg); } }

.bmloc-save-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border-radius: 28px;
    z-index: 20;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}

.bmloc-spinner {
    width: 40px; height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.bmloc-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: #10b981;
    color: white;
    padding: 12px 24px;
    border-radius: 60px;
    font-size: 14px;
    font-weight: 500;
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    animation: fadeInUp 0.3s ease;
}

.bmloc-toast.error { background: #ef4444; }

/* Responsive for Mobile */
@media (max-width: 768px) {
    .bmloc-flex-container { flex-direction: column; }
    .bmloc-left-pane { flex: 1; border-right: none; border-bottom: 1px solid #e2e8f0; padding: 25px 20px; }
    .bmloc-right-pane { flex: 1; padding: 25px 20px; }
    .bmloc-city-grid { grid-template-columns: repeat(3, 1fr); }
    .bmloc-close-absolute { top: 10px; right: 10px; }
}

@media (max-width: 575.98px) {
    .bmloc-dialog {
        margin: 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: 100%;
    }
    .bmloc-card { border-radius: 24px 24px 0 0; max-height: 90vh; overflow-y: auto; }
    .bmloc-city-grid { grid-template-columns: repeat(2, 1fr); }
    .bm-loc-city { max-width: 80px; font-size: 11px; }
    .bm-loc-trigger { padding: 6px 12px; }
    
}
</style>

<script>
(function() {
    'use strict';

    let searchTimer = null;
    let isGPSLoading = false;
    let gpsAutoDetected = false;

    // STATIC CITIES - NO DUPLICATES
    const popularCities = [
        { name: 'Delhi', pincode: '110001', state: 'Delhi', icon: '🏛️' },
        { name: 'Mumbai', pincode: '400001', state: 'Maharashtra', icon: '🌊' },
        { name: 'Bangalore', pincode: '560001', state: 'Karnataka', icon: '🚀' },
        { name: 'Chennai', pincode: '600001', state: 'Tamil Nadu', icon: '🏝️' },
        { name: 'Kolkata', pincode: '700001', state: 'West Bengal', icon: '📚' },
        { name: 'Hyderabad', pincode: '500001', state: 'Telangana', icon: '🍽️' },
        { name: 'Ahmedabad', pincode: '380001', state: 'Gujarat', icon: '🏭' },
        { name: 'Pune', pincode: '411001', state: 'Maharashtra', icon: '🎓' }
    ];

    const moreCities = [
        { name: 'Jaipur', pincode: '302001', state: 'Rajasthan' },
        { name: 'Lucknow', pincode: '226001', state: 'Uttar Pradesh' },
        { name: 'Nagpur', pincode: '440001', state: 'Maharashtra' },
        { name: 'Indore', pincode: '452001', state: 'Madhya Pradesh' },
        { name: 'Visakhapatnam', pincode: '530001', state: 'Andhra Pradesh' },
        { name: 'Vijayawada', pincode: '520001', state: 'Andhra Pradesh' },
        { name: 'Coimbatore', pincode: '641001', state: 'Tamil Nadu' },
        { name: 'Madurai', pincode: '625001', state: 'Tamil Nadu' },
        { name: 'Surat', pincode: '395001', state: 'Gujarat' },
        { name: 'Vadodara', pincode: '390001', state: 'Gujarat' },
        { name: 'Agra', pincode: '282001', state: 'Uttar Pradesh' },
        { name: 'Varanasi', pincode: '221001', state: 'Uttar Pradesh' },
        { name: 'Patna', pincode: '800001', state: 'Bihar' },
        { name: 'Ranchi', pincode: '834001', state: 'Jharkhand' },
        { name: 'Bhopal', pincode: '462001', state: 'Madhya Pradesh' },
        { name: 'Chandigarh', pincode: '160001', state: 'Chandigarh' },
        { name: 'Guwahati', pincode: '781001', state: 'Assam' },
        { name: 'Bhubaneswar', pincode: '751001', state: 'Odisha' },
        { name: 'Thiruvananthapuram', pincode: '695001', state: 'Kerala' },
        { name: 'Kochi', pincode: '682001', state: 'Kerala' },
        { name: 'Mysore', pincode: '570001', state: 'Karnataka' },
        { name: 'Mangalore', pincode: '575001', state: 'Karnataka' }
    ];

    const gpsBtn = document.getElementById('gpsDetectBtn');
    const gpsBtnText = document.getElementById('gpsBtnText');
    const gpsStatusMsg = document.getElementById('gpsStatusMsg');
    const searchInput = document.getElementById('locSearchInput');
    const searchResults = document.getElementById('searchResults');
    const clearSearchBtn = document.getElementById('clearSearchBtn');
    const popularGrid = document.getElementById('popularCitiesGrid');
    const moreGrid = document.getElementById('moreCitiesGrid');
    const showMoreBtn = document.getElementById('showMoreCitiesBtn');

    document.addEventListener('DOMContentLoaded', function() {
        renderCities();
        setupEventListeners();
        
        // ⭐ Auto GPS in background - MODAL WILL NOT OPEN
        if (!{{ $hasLocation ? 'true' : 'false' }}) {
            setTimeout(function() {
                autoDetectLocationBackground();
            }, 1500);
        }
    });

    function renderCities() {
        if (popularGrid) {
            popularGrid.innerHTML = popularCities.map(function(city) {
                return '<button class="bmloc-city-btn" onclick="selectLocation(\'' + escapeHtml(city.name) + '\', \'' + city.pincode + '\', \'' + escapeHtml(city.state) + '\')">' +
                    '<span style="font-size: 18px; margin-bottom: 2px;">' + (city.icon || '📍') + '</span>' +
                    '<span>' + escapeHtml(city.name) + '</span>' +
                '</button>';
            }).join('');
        }

        if (moreGrid) {
            var visibleCities = moreCities.slice(0, 16);
            moreGrid.innerHTML = visibleCities.map(function(city) {
                return '<button class="bmloc-tag" onclick="selectLocation(\'' + escapeHtml(city.name) + '\', \'' + city.pincode + '\', \'' + escapeHtml(city.state) + '\')">' +
                    escapeHtml(city.name) +
                '</button>';
            }).join('');
            
            if (moreCities.length > 16 && showMoreBtn) {
                showMoreBtn.classList.remove('d-none');
                var expanded = false;
                showMoreBtn.onclick = function() {
                    if (!expanded) {
                        var remaining = moreCities.slice(16);
                        moreGrid.innerHTML += remaining.map(function(city) {
                            return '<button class="bmloc-tag" onclick="selectLocation(\'' + escapeHtml(city.name) + '\', \'' + city.pincode + '\', \'' + escapeHtml(city.state) + '\')">' +
                                escapeHtml(city.name) +
                            '</button>';
                        }).join('');
                        showMoreBtn.textContent = 'Show less';
                        expanded = true;
                    } else {
                        moreGrid.innerHTML = moreCities.slice(0, 16).map(function(city) {
                            return '<button class="bmloc-tag" onclick="selectLocation(\'' + escapeHtml(city.name) + '\', \'' + city.pincode + '\', \'' + escapeHtml(city.state) + '\')">' +
                                escapeHtml(city.name) +
                            '</button>';
                        }).join('');
                        showMoreBtn.textContent = '+ ' + (moreCities.length - 16) + ' more cities';
                        expanded = false;
                    }
                };
            }
        }
    }

    // ⭐ Auto GPS Background - NO MODAL, NO POPUP
    function autoDetectLocationBackground() {
        if (gpsAutoDetected) return;
        if (!navigator.geolocation) return;
        
        if (navigator.permissions) {
            navigator.permissions.query({ name: 'geolocation' }).then(function(result) {
                if (result.state === 'granted') {
                    performSilentGPSDetection();
                }
            }).catch(function() {});
        }
    }

    function performSilentGPSDetection() {
        if (gpsAutoDetected) return;
        if (isGPSLoading) return;
        
        isGPSLoading = true;
        
        navigator.geolocation.getCurrentPosition(
            function(position) {
                fetch('https://nominatim.openstreetmap.org/reverse?format=json&lat=' + position.coords.latitude + '&lon=' + position.coords.longitude + '&zoom=18&addressdetails=1', {
                    headers: { 'Accept-Language': 'en', 'User-Agent': 'BestMart/1.0' }
                })
                .then(function(res) { return res.json(); })
                .then(function(data) {
                    var addr = data.address || {};
                    var city = addr.city || addr.town || addr.village || addr.municipality || '';
                    var pincode = addr.postcode || '';
                    var state = addr.state || '';
                    
                    if ((city || pincode) && !gpsAutoDetected) {
                        gpsAutoDetected = true;
                        autoSaveLocation(city, pincode, state, position.coords.latitude, position.coords.longitude);
                    }
                })
                .catch(function() {})
                .finally(function() {
                    isGPSLoading = false;
                });
            },
            function(error) {
                isGPSLoading = false;
            },
            { timeout: 8000, enableHighAccuracy: false }
        );
    }

    function autoSaveLocation(city, pincode, state, lat, lng) {
        $.ajax({
            url: '{{ url("/location/save") }}',
            method: 'POST',
            data: {
                _token: $('meta[name="csrf-token"]').attr('content'),
                city: city,
                pincode: pincode,
                state: state,
                latitude: lat || '',
                longitude: lng || '',
                ajax: 1
            },
            success: function() {
                var navCity = document.getElementById('navCityDisplay');
                if (navCity) navCity.textContent = city || pincode || 'India';
                
                var homePincode = document.getElementById('home_pincode');
                var homeCity = document.getElementById('home_city');
                if (homePincode) homePincode.value = pincode || '';
                if (homeCity) homeCity.value = city || '';
            },
            error: function() {}
        });
    }

    window.detectLocation = function(showFeedback) {
        if (isGPSLoading) return;
        
        let gpsBtnHint = document.getElementById('gpsBtnHint');
        
        if (!navigator.geolocation) {
            if (showFeedback) showGPSMessage('error', 'Geolocation not supported');
            return;
        }
        
        isGPSLoading = true;
        if (gpsBtn) gpsBtn.classList.add('bmloc-loading');
        if (gpsBtnText) gpsBtnText.textContent = 'Detecting...';
        if (gpsBtnHint) gpsBtnHint.textContent = 'Fetching live location...';
        
        navigator.geolocation.getCurrentPosition(
            function(position) {
                fetch('https://nominatim.openstreetmap.org/reverse?format=json&lat=' + position.coords.latitude + '&lon=' + position.coords.longitude + '&zoom=18&addressdetails=1', {
                    headers: { 'Accept-Language': 'en', 'User-Agent': 'BestMart/1.0' }
                })
                .then(function(res) { return res.json(); })
                .then(function(data) {
                    var addr = data.address || {};
                    var city = addr.city || addr.town || addr.village || addr.municipality || '';
                    var pincode = addr.postcode || '';
                    var state = addr.state || '';
                    
                    if (city || pincode) {
                        if (showFeedback) showGPSMessage('success', 'Found: ' + (city || pincode));
                        if (gpsBtnHint) gpsBtnHint.innerHTML = '<span style="color: #10b981; font-weight: 600;">📍 ' + (city || pincode) + '</span>';
                        // FIX: pass GPS coords directly so we skip the geocoding round-trip
                        setTimeout(function() {
                            doSaveLocation(city, pincode, state,
                                position.coords.latitude, position.coords.longitude,
                                null);
                            setTimeout(function() {
                                $('#bmLocationModal').modal('hide');
                                setTimeout(function() { location.reload(); }, 500);
                            }, 800);
                        }, 500);
                    } else {
                        if (showFeedback) showGPSMessage('error', 'Could not determine location');
                        if (gpsBtnHint) gpsBtnHint.textContent = 'Location not found';
                    }
                })
                .catch(function() {
                    if (showFeedback) showGPSMessage('error', 'Location service error');
                    if (gpsBtnHint) gpsBtnHint.textContent = 'Auto-detect via GPS';
                })
                .finally(function() {
                    isGPSLoading = false;
                    if (gpsBtn) gpsBtn.classList.remove('bmloc-loading');
                    if (gpsBtnText) gpsBtnText.textContent = 'Use current location';
                });
            },
            function(error) {
                isGPSLoading = false;
                if (gpsBtn) gpsBtn.classList.remove('bmloc-loading');
                if (gpsBtnText) gpsBtnText.textContent = 'Use current location';
                if (gpsBtnHint) gpsBtnHint.textContent = 'Auto-detect via GPS';
                
                var msg = '';
                if (error.code === 1) msg = 'Permission denied';
                else if (error.code === 2) msg = 'Location unavailable';
                else msg = 'Location timed out';
                
                if (showFeedback) showGPSMessage('error', msg);
            },
            { timeout: 10000, enableHighAccuracy: false }
        );
    };

    if (searchInput) {
        searchInput.addEventListener('input', function() {
            var val = this.value.trim();
            if (clearSearchBtn) clearSearchBtn.classList.toggle('d-none', val.length === 0);
            
            clearTimeout(searchTimer);
            if (val.length < 2) {
                if (searchResults) searchResults.classList.add('d-none');
                return;
            }
            
            searchTimer = setTimeout(function() {
                var searchTerm = val.toLowerCase();
                var filteredPopular = popularCities.filter(function(c) { return c.name.toLowerCase().includes(searchTerm); });
                var filteredMore = moreCities.filter(function(c) { return c.name.toLowerCase().includes(searchTerm); });
                var allResults = filteredPopular.concat(filteredMore);
                
                if (allResults.length > 0) {
                    searchResults.innerHTML = allResults.map(function(city) {
                        return '<button class="bmloc-search-result-item" onclick="selectLocation(\'' + escapeHtml(city.name) + '\', \'' + city.pincode + '\', \'' + escapeHtml(city.state) + '\')">' +
                            '<svg width="16" height="16" viewBox="0 0 24 24" fill="none">' +
                                '<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z" fill="#2563eb" opacity="0.2"/>' +
                                '<circle cx="12" cy="9" r="2" fill="#2563eb"/>' +
                            '</svg>' +
                            '<div>' +
                                '<div class="bmloc-result-city">' + escapeHtml(city.name) + '</div>' +
                                '<div class="bmloc-result-pin">' + city.pincode + '</div>' +
                            '</div>' +
                        '</button>';
                    }).join('');
                } else {
                    $.ajax({
                        url: '{{ route("pincodesearch1") }}',
                        data: { filterPincode: val },
                        success: function(data) {
                            if (data.type === '1' && data.html) {
                                var temp = document.createElement('div');
                                temp.innerHTML = data.html;
                                var items = [];
                                temp.querySelectorAll('li').forEach(function(li) {
                                    var link = li.querySelector('a');
                                    if (link) {
                                        var text = link.textContent.trim();
                                        var match = text.match(/(.+?),\s*(\d{6})/);
                                        if (match) {
                                            items.push('<button class="bmloc-search-result-item" onclick="selectLocation(\'' + escapeHtml(match[1]) + '\', \'' + match[2] + '\', \'\')">' +
                                                '<svg width="16" height="16" viewBox="0 0 24 24" fill="none">' +
                                                    '<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z" fill="#2563eb" opacity="0.2"/>' +
                                                    '<circle cx="12" cy="9" r="2" fill="#2563eb"/>' +
                                                '</svg>' +
                                                '<div>' +
                                                    '<div class="bmloc-result-city">' + escapeHtml(match[1]) + '</div>' +
                                                    '<div class="bmloc-result-pin">' + match[2] + '</div>' +
                                                '</div>' +
                                            '</button>');
                                        }
                                    }
                                });
                                searchResults.innerHTML = items.join('') || '<div class="bmloc-no-result">No results found</div>';
                            } else {
                                searchResults.innerHTML = '<div class="bmloc-no-result">No results found</div>';
                            }
                        },
                        error: function() {
                            searchResults.innerHTML = '<div class="bmloc-no-result">No results found</div>';
                        }
                    });
                }
                searchResults.classList.remove('d-none');
            }, 300);
        });
        
        document.addEventListener('click', function(e) {
            if (searchInput && searchResults && !searchInput.contains(e.target) && !searchResults.contains(e.target)) {
                searchResults.classList.add('d-none');
            }
        });
    }

    if (clearSearchBtn) {
        clearSearchBtn.addEventListener('click', function() {
            if (searchInput) searchInput.value = '';
            if (searchResults) searchResults.classList.add('d-none');
            if (clearSearchBtn) clearSearchBtn.classList.add('d-none');
            if (searchInput) searchInput.focus();
        });
    }

    window.selectLocation = function(city, pincode, state) {
        if (!city && !pincode) return;
        
        var modal = document.querySelector('.bmloc-card');
        var overlay = document.createElement('div');
        overlay.className = 'bmloc-save-overlay';
        overlay.innerHTML = '<div class="bmloc-spinner"></div><div>Setting location...</div><small>' + escapeHtml(city || pincode) + '</small>';
        if (modal) {
            modal.style.position = 'relative';
            modal.appendChild(overlay);
        }

        // FIX: Geocode city/pincode to get lat/lng so SearchController can do distance sorting
        var geocodeQuery = encodeURIComponent((city || pincode) + ', ' + (state || 'India'));
        fetch('https://nominatim.openstreetmap.org/search?format=json&q=' + geocodeQuery + '&limit=1', {
            headers: { 'Accept-Language': 'en', 'User-Agent': 'BestMart/1.0' }
        })
        .then(function(res) { return res.json(); })
        .then(function(data) {
            var lat = null, lng = null;
            if (data && data.length > 0) {
                lat = data[0].lat;
                lng = data[0].lon;
            }
            doSaveLocation(city, pincode, state, lat, lng, overlay);
        })
        .catch(function() {
            // Save without coords if geocoding fails
            doSaveLocation(city, pincode, state, null, null, overlay);
        });
    };

    function doSaveLocation(city, pincode, state, lat, lng, overlay) {
        $.ajax({
            url: '{{ url("/location/save") }}',
            method: 'POST',
            data: {
                _token: $('meta[name="csrf-token"]').attr('content'),
                city: city,
                pincode: pincode,
                state: state,
                latitude: lat || '',
                longitude: lng || '',
                ajax: 1
            },
            success: function() {
                var navCity = document.getElementById('navCityDisplay');
                if (navCity) navCity.textContent = city || pincode || 'India';
                
                var homePincode = document.getElementById('home_pincode');
                var homeCity = document.getElementById('home_city');
                if (homePincode) homePincode.value = pincode || '';
                if (homeCity) homeCity.value = city || '';
                
                showToast((city || pincode) + ' selected!');
                
                setTimeout(function() {
                    $('#bmLocationModal').modal('hide');
                    setTimeout(function() { location.reload(); }, 500);
                }, 600);
            },
            error: function() {
                if (overlay && overlay.remove) overlay.remove();
                showToast('Failed to save location. Please try again.', 'error');
            }
        });
    }

    function showGPSMessage(type, message) {
        if (!gpsStatusMsg) return;
        gpsStatusMsg.textContent = message;
        gpsStatusMsg.className = 'bmloc-status-msg ' + (type === 'success' ? 'success' : 'error');
        gpsStatusMsg.classList.remove('d-none');
        setTimeout(function() { gpsStatusMsg.classList.add('d-none'); }, 4000);
    }

    function showToast(message, type) {
        type = type || 'success';
        var toast = document.createElement('div');
        toast.className = 'bmloc-toast ' + (type === 'error' ? 'error' : '');
        toast.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none">' +
            '<path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>' +
            '</svg>' + escapeHtml(message);
        document.body.appendChild(toast);
        setTimeout(function() {
            toast.style.opacity = '0';
            setTimeout(function() { toast.remove(); }, 300);
        }, 3000);
    }

    function escapeHtml(str) {
        if (!str) return '';
        return str.replace(/[&<>]/g, function(m) {
            if (m === '&') return '&amp;';
            if (m === '<') return '&lt;';
            if (m === '>') return '&gt;';
            return m;
        });
    }

    function setupEventListeners() {
        if (gpsBtn) gpsBtn.addEventListener('click', function() { detectLocation(true); });
    }
})();
</script>

@section('script')
    <script src="https://www.gstatic.com/firebasejs/7.13.2/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.13.2/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.13.2/firebase-firestore.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.13.2/firebase-storage.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous"></script>

    <script type="text/javascript">
        function show_order_details(order_id) {
            $('#order-details-modal-body').html(null);
            if (!$('#modal-size').hasClass('modal-lg')) {
                $('#modal-size').addClass('modal-lg');
            }
            $.post('{{ route('orders.details') }}', { _token: AIZ.data.csrf, order_id: order_id }, function (data) {
                $('#order-details-modal-body').html(data);
                $('#order_details').modal();
                $('.c-preloader').hide();
                AIZ.plugins.bootstrapSelect('refresh');
            });
        }

        const firebaseConfig = {
            apiKey: "{{ env('FIREBASE_API_KEY') }}",
            authDomain: "{{ env('FIREBASE_AUTH_DOMAIN') }}",
            projectId: "{{ env('FIREBASE_PROJECT_ID') }}",
            storageBucket: "{{ env('FIREBASE_STORAGE_BUCKET') }}",
            messagingSenderId: "{{ env('FIREBASE_MESSAGING_SENDER_ID') }}",
            appId: "{{ env('FIREBASE_APP_ID') }}",
            measurementId: "{{ env('FIREBASE_MEASUREMENT_ID') }}"
        };
        firebase.initializeApp(firebaseConfig);
        window.db = firebase.firestore();
        var authUserId = $('#authUserId').val();

        if (authUserId != "") {
            db.collection("Users").where("authUserId", "==", authUserId).get().then(function (querySnapshot) {
                if (querySnapshot.size == 0) { insertLoginUserDetails(); }
            });

            var messageCount = 0;
            db.collection("UserChatList").doc(authUserId).collection('chatWithUser').orderBy("date").onSnapshot(function (querysnapshot) {
                querysnapshot.docChanges().forEach(function (change, ind) {
                    var data = change.doc.data();
                    if (data.newMessagesCountFromUser > 0) {
                        messageCount += parseInt(data.newMessagesCountFromUser);
                    }
                });
                $('.messageCount').html(messageCount.toString());
            });
        }

        function insertLoginUserDetails() {
            var authUserId    = $('#authUserId').val();
            var authUserName  = $('#authUserName').val();
            var authUserImage = $('#authUserImage').val();
            if (authUserId != "") {
                storeUserDetails({
                    authUserId    : authUserId,
                    isActive      : 1,
                    aboutMe       : "",
                    authUserName  : authUserName,
                    authUserImage : authUserImage,
                    timestamp     : moment().format("YYYY-MM-DD HH:mm")
                });
            }
        }

        function storeUserDetails(object) {
            db.collection("Users").add(object).then(added => {}).catch(err => {
                console.error("Error occured", err);
            });
        }
    </script>
@endsection