<!-- Desktop Header -->
<div class="sticky-header tw-py-2 d-none d-lg-block tw-bg-white tw-shadow-md tw-z-50 tw-border-b tw-border-gray-200">
    <div class="container-fluid tw-px-4 lg:tw-px-8">
        <div class="row align-items-center tw-flex-nowrap">
            <!-- Logo -->
            <div class="col-auto">
                <a href="<?php echo e(route('home')); ?>" class="tw-text-2xl tw-font-bold tw-text-orange-600 tw-no-underline tw-flex tw-items-center">
                <img src="<?php echo e(asset('images/miniport_logo.png')); ?>?v=4" alt="MiniPort" style="max-height: 50px; width: auto;" class="rounded tw-shadow-sm">
                </a>
            </div>

            <!-- Location Dropdown -->
            <div class="col-auto tw-border-e tw-border-gray-300 tw-pe-4 tw-me-4">
                <div class="dropdown">
                    <button class="btn btn-link tw-text-gray-700 tw-no-underline tw-flex tw-items-center tw-gap-1 dropdown-toggle hover:tw-text-orange-600" type="button" id="locationDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="bi bi-geo-alt tw-text-orange-500"></i>
                        <span class="tw-text-sm tw-font-medium">All Cities</span>
                    </button>
                    <ul class="dropdown-menu shadow-sm border-0" aria-labelledby="locationDropdown" data-bs-display="static" style="max-height: 300px; overflow-y: auto;">
                        <li><a class="dropdown-item" href="<?php echo e(route('public.suppliers.index')); ?>">All Cities</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <?php
                            $cities = $headerCities ?? [];
                            if (empty($cities)) {
                                $cities = ['Delhi', 'Mumbai', 'Bangalore', 'Chennai', 'Kolkata', 'Pune', 'Ahmedabad', 'Hyderabad', 'Surat', 'Jaipur'];
                            }
                        ?>
                        <?php $__currentLoopData = $cities; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $city): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <li><a class="dropdown-item" href="<?php echo e(route('public.suppliers.index', ['location' => $city])); ?>"><?php echo e($city); ?></a></li>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </ul>
                </div>
            </div>

            <!-- Search Bar -->
            <div class="col tw-flex-grow-1" style="max-width: calc(100% - 60px);">
                <div class="d-flex align-items-center">
                    <form action="<?php echo e(route('public.products.index')); ?>" method="GET" class="input-group position-relative tw-border tw-border-gray-300 tw-rounded-lg tw-overflow-hidden tw-shadow-sm hover:tw-shadow-md tw-transition-shadow tw-flex-grow-1" style="max-width: 750px;">
                        <input type="text" name="q" id="searchInput" class="form-control border-0 tw-py-2 tw-px-4 focus:tw-ring-0" placeholder="Search Products or Services" autocomplete="off">
                        
                        <!-- Voice Search Icon inside input -->
                        <button type="button" class="btn btn-white border-0 tw-bg-white tw-pe-3" id="voiceSearchBtn" title="Search by Voice">
                            <i class="bi bi-mic tw-text-gray-400 hover:tw-text-orange-500 tw-text-lg"></i>
                        </button>
    
                        <button class="btn tw-bg-orange-500 tw-border-orange-500 tw-px-4 tw-rounded-none hover:tw-bg-orange-600" type="submit">
                            <i class="bi bi-search text-white"></i>
                        </button>
                        
                        <!-- Autocomplete Dropdown -->
                        <div id="autocompleteDropdown" class="dropdown-menu w-100 shadow-lg border-0 mt-1" style="display: none; position: absolute; top: 100%; left: 0; z-index: 1000; max-height: 400px; overflow-y: auto;">
                            <!-- Results will be populated here -->
                        </div>
                    </form>
                    
                    <!-- Post Requirement Button (Prominent) -->
                    <a href="<?php echo e(route('post.requirement.index')); ?>" class="btn tw-bg-orange-500 tw-border-orange-500 tw-text-white tw-font-bold tw-px-3 tw-py-2 tw-ms-3 tw-whitespace-nowrap d-none d-lg-block tw-shadow hover:tw-shadow-lg hover:tw-scale-105 hover:tw-bg-orange-600 tw-transition-all tw-text-sm tw-rounded-lg">
                        Post Requirement
                    </a>
                </div>
            </div>

            <!-- Quick Links (matching right nav style) -->
            <div class="col-auto d-none d-xl-flex tw-items-center tw-gap-5 tw-border-s tw-border-gray-200 tw-ps-5 tw-ms-3">
                <a href="<?php echo e(route('public.suppliers.index')); ?>" class="tw-flex tw-flex-col tw-items-center tw-text-gray-600 hover:tw-text-orange-500 tw-no-underline tw-group tw-transition-colors">
                    <i class="bi bi-building-fill tw-text-xl tw-mb-1 tw-text-orange-500 group-hover:tw-scale-110 tw-transition-transform"></i>
                    <span class="tw-text-[10px] tw-font-bold">Suppliers</span>
                </a>
                <a href="<?php echo e(route('public.rfqs.index')); ?>" class="tw-flex tw-flex-col tw-items-center tw-text-gray-600 hover:tw-text-orange-500 tw-no-underline tw-group tw-transition-colors">
                    <i class="bi bi-bag-check-fill tw-text-xl tw-mb-1 tw-text-orange-500 group-hover:tw-scale-110 tw-transition-transform"></i>
                    <span class="tw-text-[10px] tw-font-bold">Buy Leads</span>
                </a>
            </div>

            <!-- Right Side Navigation (Icon + Text) -->
            <div class="col-auto tw-flex tw-items-center tw-gap-5 tw-ms-auto">
                
                <!-- Subscription -->
                <a href="<?php echo e(route('public.subscription.plans')); ?>" class="tw-flex tw-flex-col tw-items-center tw-text-gray-600 hover:tw-text-orange-500 tw-no-underline tw-group tw-transition-colors">
                    <i class="bi bi-gem tw-text-xl tw-mb-1 tw-text-orange-500 group-hover:tw-scale-110 tw-transition-transform"></i>
                    <span class="tw-text-[10px] tw-font-bold">Subscription</span>
                </a>

                <!-- Seller -->
                <a href="<?php echo e(route('register.seller')); ?>" class="tw-flex tw-flex-col tw-items-center tw-text-gray-600 hover:tw-text-orange-500 tw-no-underline tw-group tw-transition-colors">
                    <i class="bi bi-shop tw-text-xl tw-mb-1 tw-text-orange-500 group-hover:tw-scale-110 tw-transition-transform"></i>
                    <span class="tw-text-[10px] tw-font-bold">Sell</span>
                </a>

                <!-- Help/Buyer (Optional, maybe Help?) -->
                <!-- Important Note -->
                <a href="#importantNoteModal" data-bs-toggle="modal" class="tw-flex tw-flex-col tw-items-center tw-text-gray-600 hover:tw-text-orange-500 tw-no-underline tw-group tw-transition-colors">
                    <i class="bi bi-info-circle tw-text-xl tw-mb-1 tw-text-orange-500 group-hover:tw-scale-110 tw-transition-transform"></i>
                    <span class="tw-text-[10px] tw-font-bold">Note</span>
                </a>

                <!-- Login / Sign In -->
                <?php if(auth()->guard()->guest()): ?>
                    <a href="<?php echo e(route('login')); ?>" class="tw-flex tw-flex-col tw-items-center tw-text-gray-600 hover:tw-text-orange-500 tw-no-underline tw-group tw-transition-colors">
                        <i class="bi bi-person-circle tw-text-xl tw-mb-1 tw-text-orange-500 group-hover:tw-scale-110 tw-transition-transform"></i>
                        <span class="tw-text-[10px] tw-font-bold">Sign In</span>
                    </a>
                <?php else: ?>
                    <div class="dropdown">
                        <a href="#" class="tw-flex tw-flex-col tw-items-center tw-text-gray-600 hover:tw-text-orange-500 tw-no-underline tw-group dropdown-toggle tw-transition-colors" data-bs-toggle="dropdown">
                            <i class="bi bi-person-check-fill tw-text-xl tw-mb-1 tw-text-orange-500 group-hover:tw-scale-110 tw-transition-transform"></i>
                            <span class="tw-text-[10px] tw-font-bold">Profile</span>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end shadow-sm border-0">
                            <li><span class="dropdown-header">Welcome, <?php echo e(Auth::user()->name); ?></span></li>
                            <?php if(Auth::user()->hasRole('seller')): ?>
                                <li><a class="dropdown-item" href="<?php echo e(route('seller.dashboard')); ?>"><i class="bi bi-speedometer2 me-2"></i> Seller Dashboard</a></li>
                            <?php endif; ?>
                            <?php if(Auth::user()->hasRole('buyer')): ?>
                                <li><a class="dropdown-item" href="<?php echo e(route('buyer.dashboard')); ?>"><i class="bi bi-speedometer2 me-2"></i> Buyer Dashboard</a></li>
                            <?php endif; ?>
                            <?php if(Auth::user()->hasRole('admin')): ?>
                                <li><a class="dropdown-item" href="<?php echo e(route('admin.dashboard')); ?>"><i class="bi bi-speedometer2 me-2"></i> Admin Dashboard</a></li>
                            <?php endif; ?>
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                <form action="<?php echo e(route('logout')); ?>" method="POST">
                                    <?php echo csrf_field(); ?>
                                    <button type="submit" class="dropdown-item text-danger"><i class="bi bi-box-arrow-right me-2"></i> Logout</button>
                                </form>
                            </li>
                        </ul>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>

<!-- Mobile Header -->
<div class="sticky-header tw-py-2 d-lg-none tw-bg-white tw-shadow-md tw-z-50 tw-border-b tw-border-gray-200">
    <div class="container-fluid tw-px-3">
        <div class="d-flex align-items-center justify-content-between">
            <!-- Left: Hamburger & Logo -->
            <div class="d-flex align-items-center gap-3">
                <button class="btn btn-link tw-text-orange-500 tw-p-0 tw-text-2xl" type="button" data-bs-toggle="offcanvas" data-bs-target="#mobileMenuOffcanvas">
                    <i class="bi bi-list"></i>
                </button>
                <a href="<?php echo e(route('home')); ?>" class="tw-no-underline">
                    <img src="<?php echo e(asset('images/miniport_logo.png')); ?>?v=4" alt="MiniPort" style="height: 40px; width: auto;" class="rounded tw-shadow-sm">
                </a>
            </div>

            <!-- Right: Search Toggle, Cart, User -->
            <div class="d-flex align-items-center gap-3">
                <button class="btn btn-link tw-text-orange-500 tw-p-0 tw-text-xl" type="button" data-bs-toggle="collapse" data-bs-target="#mobileSearchCollapse">
                    <i class="bi bi-search"></i>
                </button>
                
                <a href="#" class="tw-text-orange-500 tw-text-xl position-relative">
                    <i class="bi bi-cart"></i>
                    <!-- Cart Badge (Optional) -->
                    <!-- <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" style="font-size: 0.5rem;">2</span> -->
                </a>

                <?php if(auth()->guard()->guest()): ?>
                    <a href="<?php echo e(route('login')); ?>" class="tw-text-orange-500 tw-text-xl">
                        <i class="bi bi-person-circle"></i>
                    </a>
                <?php else: ?>
                    <?php
                        $dashboardRoute = 'home';
                        if(Auth::user()->hasRole('admin')) {
                            $dashboardRoute = 'admin.dashboard';
                        } elseif(Auth::user()->hasRole('seller')) {
                            $dashboardRoute = 'seller.dashboard';
                        } elseif(Auth::user()->hasRole('buyer')) {
                            $dashboardRoute = 'buyer.dashboard';
                        }
                    ?>
                    <a href="<?php echo e(route($dashboardRoute)); ?>" class="tw-text-orange-500 tw-text-xl">
                        <div class="tw-w-7 tw-h-7 tw-rounded-full tw-bg-orange-500 tw-text-white tw-flex tw-items-center tw-justify-center tw-text-xs tw-font-bold">
                            <?php echo e(substr(Auth::user()->name, 0, 1)); ?>

                        </div>
                    </a>
                <?php endif; ?>
            </div>
        </div>

        <!-- Mobile Search Collapse -->
        <div class="collapse tw-mt-2" id="mobileSearchCollapse">
            <form action="<?php echo e(route('public.products.index')); ?>" method="GET" class="input-group tw-border-0 tw-rounded-md tw-overflow-hidden tw-shadow-sm">
                <input type="text" name="q" class="form-control border-0 tw-py-2 tw-px-3 focus:tw-ring-0" placeholder="Search products..." autocomplete="off">
                <button class="btn btn-dark tw-bg-gray-900 tw-border-gray-900 tw-px-3" type="submit">
                    <i class="bi bi-search text-white"></i>
                </button>
            </form>
        </div>
    </div>
</div>

<!-- Mobile Offcanvas Menu -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="mobileMenuOffcanvas" style="width: 85%;">
    <div class="offcanvas-header tw-bg-gray-50 tw-border-b">
        <h5 class="offcanvas-title tw-font-bold tw-text-primary">Menu</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body tw-p-0">
        <!-- User Section -->
        <div class="tw-p-4 tw-bg-orange-50">
            <?php if(auth()->guard()->guest()): ?>
                <div class="d-grid gap-2">
                    <a href="<?php echo e(route('login')); ?>" class="btn btn-outline-primary tw-font-bold">Login</a>
                    <a href="<?php echo e(route('register.seller')); ?>" class="btn btn-primary tw-font-bold">Register as Seller</a>
                </div>
            <?php else: ?>
                <div class="d-flex align-items-center gap-3 mb-3">
                    <div class="tw-w-12 tw-h-12 tw-rounded-full tw-bg-white tw-flex tw-items-center tw-justify-center tw-text-primary tw-text-xl tw-font-bold tw-shadow-sm">
                        <?php echo e(substr(Auth::user()->name, 0, 1)); ?>

                    </div>
                    <div>
                        <div class="tw-font-bold tw-text-gray-800"><?php echo e(Auth::user()->name); ?></div>
                        <?php
                            $roleDisplay = 'User';
                            if(Auth::user()->hasRole('admin')) {
                                $roleDisplay = 'Admin';
                            } elseif(Auth::user()->hasRole('seller')) {
                                $roleDisplay = 'Seller';
                            } elseif(Auth::user()->hasRole('buyer')) {
                                $roleDisplay = 'Buyer';
                            }
                        ?>
                        <div class="tw-text-xs tw-text-gray-500"><?php echo e($roleDisplay); ?></div>
                    </div>
                </div>
                <div class="d-grid">
                    <?php
                        $dashboardRoute = 'home';
                        if(Auth::user()->hasRole('admin')) {
                            $dashboardRoute = 'admin.dashboard';
                        } elseif(Auth::user()->hasRole('seller')) {
                            $dashboardRoute = 'seller.dashboard';
                        } elseif(Auth::user()->hasRole('buyer')) {
                            $dashboardRoute = 'buyer.dashboard';
                        }
                    ?>
                    <a href="<?php echo e(route($dashboardRoute)); ?>" class="btn btn-primary btn-sm tw-font-bold">Go to Dashboard</a>
                </div>
            <?php endif; ?>
        </div>

        <!-- Navigation Links -->
        <div class="list-group list-group-flush">
            <a href="<?php echo e(route('home')); ?>" class="list-group-item list-group-item-action tw-py-3 tw-font-medium">
                <i class="bi bi-house-door me-2 tw-text-gray-400"></i> Home
            </a>
            <a href="<?php echo e(route('public.categories.index')); ?>" class="list-group-item list-group-item-action tw-py-3 tw-font-medium">
                <i class="bi bi-grid me-2 tw-text-gray-400"></i> All Categories
            </a>
            <a href="<?php echo e(route('public.suppliers.index')); ?>" class="list-group-item list-group-item-action tw-py-3 tw-font-medium">
                <i class="bi bi-building-fill me-2 tw-text-orange-500"></i> Find Suppliers
            </a>
            <a href="<?php echo e(route('public.rfqs.index')); ?>" class="list-group-item list-group-item-action tw-py-3 tw-font-medium">
                <i class="bi bi-bag-check-fill me-2 tw-text-orange-500"></i> Buy Leads
            </a>
            <a href="<?php echo e(route('post.requirement.index')); ?>" class="list-group-item list-group-item-action tw-py-3 tw-font-medium">
                <i class="bi bi-pencil-square me-2 tw-text-orange-500"></i> Post Buy Requirement
            </a>
            <a href="<?php echo e(route('public.subscription.plans')); ?>" class="list-group-item list-group-item-action tw-py-3 tw-font-medium">
                <i class="bi bi-gem me-2 tw-text-orange-500"></i> Subscription Plans
            </a>
            <a href="<?php echo e(route('register.seller')); ?>" class="list-group-item list-group-item-action tw-py-3 tw-font-medium">
                <i class="bi bi-shop me-2 tw-text-orange-500"></i> Sell on MiniPort
            </a>
            <a href="#importantNoteModal" data-bs-toggle="modal" class="list-group-item list-group-item-action tw-py-3 tw-font-medium">
                <i class="bi bi-info-circle me-2 tw-text-orange-500"></i> Important Note
            </a>
        </div>

        <!-- Categories Accordion -->
        <div class="accordion accordion-flush" id="mobileCategoriesAccordion">
            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed tw-font-bold tw-bg-gray-50" type="button" data-bs-toggle="collapse" data-bs-target="#categoriesCollapse">
                        Top Categories
                    </button>
                </h2>
                <div id="categoriesCollapse" class="accordion-collapse collapse" data-bs-parent="#mobileCategoriesAccordion">
                    <div class="accordion-body tw-p-0">
                        <div class="list-group list-group-flush">
                            <?php $__currentLoopData = ($categories ?? collect())->take(8); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <a href="<?php echo e(route('public.categories.show', $category->slug)); ?>" class="list-group-item list-group-item-action tw-ps-5 tw-text-sm">
                                    <?php echo e($category->name); ?>

                                </a>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            <a href="<?php echo e(route('public.categories.index')); ?>" class="list-group-item list-group-item-action tw-ps-5 tw-text-sm tw-text-primary tw-font-bold">
                                View All
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <?php if(auth()->guard()->check()): ?>
            <div class="tw-p-4 tw-border-t tw-mt-2">
                <form action="<?php echo e(route('logout')); ?>" method="POST">
                    <?php echo csrf_field(); ?>
                    <button type="submit" class="btn btn-outline-danger w-100">Logout</button>
                </form>
            </div>
        <?php endif; ?>
    </div>
</div>

<!-- Important Note Modal -->
<div class="modal fade" id="importantNoteModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg rounded-4 overflow-hidden">
            <div class="modal-body p-0">
                <div class="row g-0">
                    <div class="col-md-5">
                        <img src="<?php echo e(asset('images/msme-support.jpg')); ?>" class="img-fluid h-100 object-fit-cover" alt="MSME Support" style="min-height: 300px;">
                    </div>
                    <div class="col-md-7">
                        <div class="p-4 p-lg-5">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h4 class="fw-bold mb-0 text-primary">Important Note</h4>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            
                            <!-- Language Tabs -->
                            <ul class="nav nav-pills mb-4 bg-light p-1 rounded-pill" id="noteLanguageTabs" role="tablist" style="width: fit-content;">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active rounded-pill px-4 fw-bold py-2" id="english-tab" data-bs-toggle="tab" data-bs-target="#english-content" type="button" role="tab" style="font-size: 0.85rem;">English</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link rounded-pill px-4 fw-bold py-2" id="hindi-tab" data-bs-toggle="tab" data-bs-target="#hindi-content" type="button" role="tab" style="font-size: 0.85rem;">हिंदी (Hindi)</button>
                                </li>
                            </ul>

                            <div class="tab-content text-muted " id="noteLanguageTabContent" style="font-size: 0.95rem; line-height: 1.6; max-height: 50vh; overflow-y: auto; padding-right: 10px;">
                                <!-- English Content -->
                                <div class="tab-pane fade show active" id="english-content" role="tabpanel">
                                    <p class="mb-3">
                                        Hello, <strong>MiniPort</strong> is special for mini, micro, and small MSMEs. We build this platform to help small and micro businesses grow.
                                    </p>
                                    <p class="mb-3">
                                        Our platform is only a contact bridge between buyer and seller. We do not handle any delivery or logistics, and we do not take any commission. We are not responsible for any profit or loss.
                                    </p>
                                    <p class="mb-3">
                                        <strong>Verification Advisory:</strong> Verifying any seller documents or certificates is the sole responsibility of the buyer and seller. Buyers are strongly advised to verify the seller's business documents and identity via email or phone (WhatsApp) before placing an order.
                                    </p>
                                    <p class="mb-3">
                                        So before placing an order, <strong>we strongly recommend that buyers try a small quantity or sample order</strong>, if the seller agrees. This helps you to verify the product quality and reliability of the supplier.
                                    </p>
                                    <p class="mb-0">
                                        Always communicate and make payments through safe and verified methods.<br>
                                        <strong>Thanks.</strong>
                                    </p>
                                </div>

                                <!-- Hindi Content -->
                                <div class="tab-pane fade" id="hindi-content" role="tabpanel">
                                    <p class="mb-3">
                                        नमस्ते, <strong>MiniPort</strong> मिनी, माइक्रो और स्मॉल MSME व्यवसायों के लिए बनाया गया एक प्लेटफॉर्म है, जिसका उद्देश्य छोटे व्यवसायों को आगे बढ़ने में मदद करना है।
                                    </p>
                                    <p class="mb-3">
                                        MiniPort केवल खरीदार और विक्रेता के बीच संपर्क का माध्यम है। हम किसी भी प्रकार की डिलीवरी, लॉजिस्टिक्स या कमीशन में शामिल नहीं हैं। डिलीवरी की व्यवस्था विक्रेता द्वारा स्वयं की जाएगी। किसी भी लाभ या नुकसान के लिए MiniPort जिम्मेदार नहीं होगा।
                                    </p>
                                    <p class="mb-3">
                                        <strong>महत्वपूर्ण सूचना:</strong> विक्रेता के किसी भी दस्तावेज या प्रमाण पत्र का सत्यापन करना क्रेता और विक्रेता की अपनी जिम्मेदारी है। क्रेताओं को सलाह दी जाती है कि ऑर्डर देने से पहले विक्रेता से उसके व्यावसायिक दस्तावेजों और पहचान को ईमेल या फोन (व्हाट्सएप) के माध्यम से जरूर सत्यापित कर लें।
                                    </p>
                                    <p class="mb-3">
                                        ऑर्डर देने से पहले, हम सलाह देते हैं कि विक्रेता की सहमति से पहले कम मात्रा या सैंपल ऑर्डर करके उत्पाद की गुणवत्ता और सप्लायर की विश्वसनीयता जांच लें।
                                    </p>
                                    <p class="mb-0">
                                        हमेशा सुरक्षित और सत्यापित तरीकों से ही बातचीत करें और भुगतान करें।<br>
                                        <strong>धन्यवाद।</strong>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- JS for Search (Same as before) -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const searchInput = document.getElementById('searchInput');
        const dropdown = document.getElementById('autocompleteDropdown');
        const voiceBtn = document.getElementById('voiceSearchBtn');
        let debounceTimer;

        // Autocomplete
        if(searchInput) {
            searchInput.addEventListener('input', function() {
                clearTimeout(debounceTimer);
                const query = this.value;
                
                if (query.length < 2) {
                    dropdown.style.display = 'none';
                    return;
                }

                debounceTimer = setTimeout(() => {
                    fetch(`<?php echo e(route('public.search.autocomplete')); ?>?q=${encodeURIComponent(query)}`)
                        .then(response => response.json())
                        .then(data => {
                            dropdown.innerHTML = '';
                            if (data.length > 0) {
                                data.forEach(item => {
                                    const a = document.createElement('a');
                                    a.href = item.url;
                                    a.className = 'dropdown-item d-flex align-items-center py-2 border-bottom';
                                    
                                    let iconOrImg = '';
                                    if (item.image) {
                                        iconOrImg = `<img src="${item.image}" class="rounded me-2" style="width: 30px; height: 30px; object-fit: cover;">`;
                                    } else {
                                        let iconClass = 'bi-search';
                                        if (item.type === 'Category') iconClass = 'bi-grid';
                                        if (item.type === 'Supplier') iconClass = 'bi-shop';
                                        iconOrImg = `<div class="rounded bg-light d-flex align-items-center justify-content-center me-2" style="width: 30px; height: 30px;"><i class="bi ${iconClass} text-muted"></i></div>`;
                                    }

                                    a.innerHTML = `
                                        ${iconOrImg}
                                        <div>
                                            <div class="fw-bold text-dark" style="font-size: 0.9rem;">${item.label}</div>
                                            <div class="text-muted" style="font-size: 0.75rem;">${item.type}</div>
                                        </div>
                                    `;
                                    dropdown.appendChild(a);
                                });
                                dropdown.style.display = 'block';
                            } else {
                                dropdown.innerHTML = '<div class="p-3 text-muted text-center">No results found</div>';
                                dropdown.style.display = 'block';
                            }
                        });
                }, 300);
            });

            // Close dropdown when clicking outside
            document.addEventListener('click', function(e) {
                if (!searchInput.contains(e.target) && !dropdown.contains(e.target)) {
                    dropdown.style.display = 'none';
                }
            });
        }

        // Voice Search
        if (voiceBtn && 'webkitSpeechRecognition' in window) {
            const recognition = new webkitSpeechRecognition();
            recognition.continuous = false;
            recognition.interimResults = false;
            recognition.lang = 'en-US';

            voiceBtn.addEventListener('click', function() {
                recognition.start();
                voiceBtn.innerHTML = '<i class="bi bi-mic-mute-fill text-danger"></i>';
            });

            recognition.onresult = function(event) {
                const transcript = event.results[0][0].transcript;
                searchInput.value = transcript;
                searchInput.dispatchEvent(new Event('input')); // Trigger autocomplete
                voiceBtn.innerHTML = '<i class="bi bi-mic-fill text-primary"></i>';
            };

            recognition.onerror = function(event) {
                console.error('Voice recognition error', event.error);
                voiceBtn.innerHTML = '<i class="bi bi-mic-fill text-primary"></i>';
            };
            
            recognition.onend = function() {
                voiceBtn.innerHTML = '<i class="bi bi-mic-fill text-primary"></i>';
            };
        } else if(voiceBtn) {
            voiceBtn.style.display = 'none';
        }
    });
</script>
<?php /**PATH /home/u281583269/domains/theminiport.com/public_html/resources/views/partials/header.blade.php ENDPATH**/ ?>