Update templates/menu.html

templates/menu.html

@@ -15,7 +15,6 @@
         {% endfor %}
     {% endfor %}
     <style>
-        /* Same styles as previous response */
         body {
             font-family: Arial, sans-serif;
             background-color: #fdf4e3;
@@ -42,7 +41,6 @@
         }
         .menu-card.visible {
             opacity: 1;
-            animation: fadeIn 0.3s ease-in-out;
         }
         .menu-card.highlighted {
             border: 3px solid #0FAA39;
@@ -496,100 +494,59 @@
         #softDrinkModal .modal-footer .quantity-controls-footer .btn:active {
             transform: scale(0.95);
         }
-        /* Toggle Styling */
+        /* Filter Form Styling */
+        #filter-form {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 20px;
+        }
+        .form-label {
+            font-size: 1.2rem;
+            font-weight: 600;
+            color: #333;
+            margin-bottom: 10px;
+        }
         .toggle-container {
-            display: inline-flex;
+            display: flex;
             align-items: center;
-            margin: 0 15px;
-            gap: 8px;
+            gap: 10px;
+            margin: 8px 0;
         }
         .custom-toggle {
-            -webkit-appearance: none;
-            -moz-appearance: none;
             appearance: none;
-            width: 40px;
-            height: 20px;
-            background: #e9ecef;
-            border-radius: 20px;
+            width: 48px;
+            height: 24px;
+            background-color: #ccc;
+            border-radius: 12px;
             position: relative;
             cursor: pointer;
-            outline: none;
-            transition: background-color 0.2s ease;
+            transition: background-color 0.3s ease;
         }
         .custom-toggle:checked {
-            background: #0FAA39;
+            background: linear-gradient(45deg, #FFA07A, #FFB347);
         }
         .custom-toggle::before {
             content: '';
             position: absolute;
-            width: 16px;
-            height: 16px;
-            border-radius: 50%;
-            background: #fff;
             top: 2px;
             left: 2px;
-            transition: transform 0.2s ease;
+            width: 20px;
+            height: 20px;
+            background-color: #fff;
+            border-radius: 50%;
+            transition: transform 0.3s ease;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
         }
         .custom-toggle:checked::before {
-            transform: translateX(20px);
+            transform: translateX(24px);
         }
         .toggle-container label {
             font-size: 1rem;
-            font-weight: 500;
             color: #333;
             cursor: pointer;
         }
-        #filter-form {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 10px;
-            margin-bottom: 20px;
-        }
-        #filter-form .form-label {
-            font-size: 1.2rem;
-            color: #333;
-        }
-        .toast-container {
-            position: fixed;
-            top: 20px;
-            right: 20px;
-            z-index: 2000;
-        }
-        .toast {
-            background-color: #dc3545;
-            color: white;
-            padding: 15px;
-            border-radius: 5px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-            opacity: 0;
-            transition: opacity 0.3s ease;
-        }
-        .toast.show {
-            opacity: 1;
-        }
-        .search-suggestions {
-            position: absolute;
-            top: 100%;
-            left: 0;
-            right: 0;
-            background-color: #fff;
-            border-radius: 5px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-            max-height: 200px;
-            overflow-y: auto;
-            display: none;
-            z-index: 1000;
-        }
-        .search-suggestions .suggestion-item {
-            padding: 10px;
-            cursor: pointer;
-            font-size: 14px;
-            color: #333;
-        }
-        .search-suggestions .suggestion-item:hover {
-            background-color: #e6f4ea;
-        }
         @keyframes checkmark {
             from { transform: scale(0); }
             to { transform: scale(1); }
@@ -606,13 +563,6 @@
             from { opacity: 0; transform: translateY(-20px); }
             to { opacity: 1; transform: translateY(0); }
         }
-        form.text-center.mb-4 {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            margin-bottom: 5px;
-        }
         .modal-header {
             padding: 10px 15px;
         }
@@ -859,6 +809,7 @@
             font-size: 12px;
             margin-left: 8px;
         }
+        /* Mobile-Specific Styles */
         @media (max-width: 576px) {
             .fixed-top-bar {
                 height: 60px;
@@ -1012,6 +963,7 @@
                 font-size: 10px;
                 margin-left: 5px;
             }
+            /* Mobile-Specific Addon Styles */
             .addon-section {
                 margin-bottom: 10px;
             }
@@ -1040,6 +992,7 @@
                 margin-left: 6px;
                 font-size: 0.8rem;
             }
+            /* Mobile-Specific Soft Drinks Modal Styles */
             #softDrinkModal .modal-dialog {
                 max-width: 90%;
             }
@@ -1091,38 +1044,39 @@
                 font-size: 1rem;
                 line-height: 28px;
             }
+            /* Mobile-Specific Filter Form Styles */
+            #filter-form {
+                margin-bottom: 15px;
+            }
+            .form-label {
+                font-size: 1rem;
+            }
             .toggle-container {
-                margin: 0 10px;
-                gap: 6px;
+                margin: 6px 0;
             }
             .custom-toggle {
-                width: 36px;
-                height: 18px;
+                width: 40px;
+                height: 20px;
             }
             .custom-toggle::before {
-                width: 14px;
-                height: 14px;
+                width: 16px;
+                height: 16px;
                 top: 2px;
                 left: 2px;
             }
             .custom-toggle:checked::before {
-                transform: translateX(18px);
+                transform: translateX(20px);
             }
             .toggle-container label {
                 font-size: 0.9rem;
             }
-            #filter-form .form-label {
-                font-size: 1.1rem;
-            }
         }
     </style>
 </head>
 <body>
-    <div class="toast-container" id="toastContainer"></div>
-
     <div class="fixed-top-bar">
         <div class="avatar-dropdown-container">
-            <div class="avatar-icon" role="button" aria-label="Open user menu">
+            <div class="avatar-icon">
                 <span>{{ first_letter }}</span>
             </div>
             <div class="dropdown-menu">
@@ -1132,59 +1086,59 @@
             </div>
         </div>
         <div class="search-bar-container">
-            <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." autocomplete="off" aria-label="Search menu items">
+            <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." autocomplete="off">
             <i class="bi bi-search search-icon"></i>
-            <i class="bi bi-mic mic-icon" id="micIcon" aria-label="Voice search"></i>
-            <div class="search-suggestions" id="searchSuggestions"></div>
+            <i class="bi bi-mic mic-icon" id="micIcon"></i>
         </div>
     </div>
 
-    <!-- NEW: Updated Filter Form -->
     <form method="get" action="/menu" class="text-center mb-4" id="filter-form">
         <label class="form-label fw-bold">Filters:</label>
         <div class="toggle-container">
+            <!-- Veg Only Toggle -->
             <input type="checkbox" id="veg-toggle" name="veg"
-                {% if veg_filter %}checked{% endif %}
-                class="custom-toggle" onchange="handleToggle('veg')" aria-label="Filter vegetarian items">
+                   {% if selected_category == "Veg" %}checked{% endif %}
+                   class="custom-toggle" onchange="handleToggle('veg')"
+                   aria-label="Toggle Vegetarian filter">
             <label for="veg-toggle">Veg</label>
         </div>
         <div class="toggle-container">
-            <input type="checkbox" id="category-CustomizedDish" name="custom"
-                {% if custom_filter %}checked{% endif %}
-                class="custom-toggle" onchange="handleToggle('custom')" aria-label="Filter customized dishes">
+            <!-- Customized Dish Toggle -->
+            <input type="radio" id="category-CustomizedDish" name="category" value="Customized Dish"
+                   {% if selected_category == "Customized Dish" %}checked{% endif %}
+                   class="custom-toggle" onchange="handleToggle('custom')"
+                   aria-label="Toggle Customized Dish filter">
             <label for="category-CustomizedDish">Customized Dish</label>
         </div>
     </form>
 
     <div class="container mt-4">
-        {% if custom_filter %}
+        {% if selected_category == "Customized Dish" %}
             <div id="custom-dish-form" class="mt-4">
                 <h3>Create Your Custom Dish</h3>
                 <form method="POST" action="/customdish/generate_custom_dish">
                     <div class="mb-3">
                         <label for="custom-dish-name" class="form-label">Dish Name</label>
-                        <input type="text" class="form-control" id="custom-dish-name" name="name" required aria-required="true">
+                        <input type="text" class="form-control" id="custom-dish-name" name="name" required>
                     </div>
                     <div class="mb-3 position-relative">
                         <label for="custom-dish-description" class="form-label">Dish Description</label>
-                        <textarea class="form-control" id="custom-dish-description" name="description" required aria-required="true"></textarea>
+                        <textarea class="form-control" id="custom-dish-description" name="description" required></textarea>
                         <div id="descriptionSuggestions" class="autocomplete-suggestions"></div>
                     </div>
-                    <button type="submit" class="btn btn-primary" aria-label="Submit custom dish">Submit Custom Dish</button>
+                    <button type="submit" class="btn btn-primary">Submit Custom Dish</button>
                 </form>
             </div>
         {% else %}
-            <!-- NEW: Enhanced Empty State Handling -->
             {% if ordered_menu.items()|length == 0 %}
-                <p id="no-items-message">No menu items available for this filter. Please try adjusting the filters or contact support.</p>
-                <div id="client-side-menu" class="row"></div>
+                <p>No menu items available for this category.</p>
             {% else %}
                 {% for section, items in ordered_menu.items() %}
                     <h3>{{ section }}</h3>
                     <div class="row">
                         {% for item in items %}
                             <div class="col-md-6 mb-4">
-                                <div class="card menu-card" data-item-name="{{ item.Name | default('Unnamed Item') }}" data-item-section="{{ item.Section__c | default(section) }}" data-is-veg="{{ item.IsVeg__c | default('false') | lower }}">
+                                <div class="card menu-card" data-item-name="{{ item.Name | default('Unnamed Item') }}" data-item-section="{{ item.Section__c | default(section) }}">
                                     <video 
                                         class="card-img-top menu-video" 
                                         muted 
@@ -1214,16 +1168,14 @@
                                                      data-item-section="{{ item.Section__c | default(section) }}" 
                                                      data-item-category="{{ selected_category }}"
                                                      data-item-description="{{ item.Description__c | default('No description') }}"
-                                                     data-item-image2="{{ item.Image2__c | default(item.Image1__c) }}"
-                                                     data-is-veg="{{ item.IsVeg__c | default('false') | lower }}">
+                                                     data-item-image2="{{ item.Image2__c | default(item.Image1__c) }}">
                                                     {% if item.Section__c == 'Soft Drinks' %}
-                                                        <button class="btn btn-primary add-to-cart-btn" onclick="showSoftDrinkModal(this)" aria-label="Add {{ item.Name | default('Unnamed Item') }} to cart">ADD</button>
+                                                        <button class="btn btn-primary add-to-cart-btn" onclick="showSoftDrinkModal(this)">ADD</button>
                                                     {% else %}
                                                         <button class="btn btn-primary" 
                                                                 data-bs-toggle="modal" 
                                                                 data-bs-target="#itemModal" 
-                                                                onclick="showItemDetails('{{ item.Name | default('Unnamed Item') }}', '{{ item.Price__c | default('0.00') }}', '{{ item.Image2__c | default(item.Image1__c) }}', '{{ item.Description__c | default('No description') }}', '{{ item.Section__c | default(section) }}', '{{ selected_category }}')"
-                                                                aria-label="Customize {{ item.Name | default('Unnamed Item') }}">
+                                                                onclick="showItemDetails('{{ item.Name | default('Unnamed Item') }}', '{{ item.Price__c | default('0.00') }}', '{{ item.Image2__c | default(item.Image1__c) }}', '{{ item.Description__c | default('No description') }}', '{{ item.Section__c | default(section) }}', '{{ selected_category }}')">
                                                             ADD
                                                         </button>
                                                         {% if item.Section__c != 'Apetizer' and item.Section__c != 'Customized dish' %}
@@ -1235,12 +1187,12 @@
                                         </div>
                                     </div>
                                     {% if item.Section__c != 'Soft Drinks' %}
-                                        <div class="toggle-details" data-item-name="{{ item.Name | default('Unnamed Item') }}" role="button" aria-label="Toggle details for {{ item.Name | default('Unnamed Item') }}">Show Details</div>
+                                        <div class="toggle-details" data-item-name="{{ item.Name | default('Unnamed Item') }}">Show Details</div>
                                         <div class="item-details" id="details-{{ item.Name | default('unnamed-item') | replace(' ', '-') }}">
                                             <h6>Description</h6>
                                             <p>{{ item.Description__c | default('No description available') }}</p>
                                             <h6>Ingredients</h6>
-                                            <p>{{ item.Ingredientsinfo__c | default('Not specified') }}</p>
+                                            <p>{{ item.IngredientsInfo__c | default('Not specified') }}</p>
                                             <h6>Nutritional Info</h6>
                                             <p class="nutritional-info">{{ item.NutritionalInfo__c | default('Not available') }}</p>
                                             <h6>Allergens</h6>
@@ -1257,10 +1209,10 @@
     </div>
 
     <div class="bottom-action-bar">
-        <a href="{{ url_for('orderhistory.order_history') }}" class="btn btn-order-history" aria-label="View order history">
+        <a href="{{ url_for('orderhistory.order_history') }}" class="btn btn-order-history">
             <i class="bi bi-clock-history"></i> Order History
         </a>
-        <a href="{{ url_for('cart.cart') }}" class="btn btn-view-cart" aria-label="View cart">
+        <a href="{{ url_for('cart.cart') }}" class="btn btn-view-cart">
             <i class="bi bi-cart"></i> View Cart
             <span id="cart-item-count" class="cart-icon-badge" style="display: none;">0</span>
         </a>
@@ -1285,17 +1237,17 @@
                     </div>
                     <div class="mt-4">
                         <h6>Special Instructions</h6>
-                        <textarea id="modal-instructions" class="form-control" placeholder="Enter any special instructions here..." aria-label="Special instructions"></textarea>
+                        <textarea id="modal-instructions" class="form-control" placeholder="Enter any special instructions here..."></textarea>
                     </div>
                     <span id="modal-section" data-section="" data-category="" style="display: none;"></span>
                 </div>
                 <div class="modal-footer d-flex align-items-center justify-content-between">
                     <div class="d-flex align-items-center gap-2">
-                        <button type="button" class="btn btn-outline-secondary" id="decreaseQuantity" aria-label="Decrease quantity">-</button>
-                        <input type="text" class="form-control text-center" id="quantityInput" value="1" readonly style="width: 50px;" aria-label="Selected quantity"/>
-                        <button type="button" class="btn btn-outline-secondary" id="increaseQuantity" aria-label="Increase quantity">+</button>
+                        <button type="button" class="btn btn-outline-secondary" id="decreaseQuantity">-</button>
+                        <input type="text" class="form-control text-center" id="quantityInput" value="1" readonly style="width: 50px;"/>
+                        <button type="button" class="btn btn-outline-secondary" id="increaseQuantity">+</button>
                     </div>
-                    <button type="button" class="btn btn-primary" onclick="addToCartFromModal()" aria-label="Add to cart">Add to Cart</button>
+                    <button type="button" class="btn btn-primary" onclick="addToCartFromModal()">Add to Cart</button>
                 </div>
             </div>
         </div>
@@ -1334,30 +1286,19 @@
 
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
     <script>
-        // === Global State ===
         let isProcessingRequest = false;
         let currentSoftDrinkButton = null;
         let baseItemPrice = 0;
-
-        // === Menu Data ===
         const menuItems = [
             {% for section, items in ordered_menu.items() %}
                 {% for item in items %}
                     {
                         name: "{{ item.Name | default('Unnamed Item') }}",
-                        section: "{{ item.Section__c | default(section) }}",
-                        isVeg: {{ item.IsVeg__c | default('false') | lower }},
-                        price: "{{ item.Price__c | default('0.00') }}",
-                        image: "{{ item.Image1__c | default('/static/placeholder.jpg') }}",
-                        image2: "{{ item.Image2__c | default(item.Image1__c) }}",
-                        description: "{{ item.Description__c | default('No description') }}",
-                        video: "{{ item.Video1__c | default('/static/placeholder.mp4') }}"
+                        section: "{{ item.Section__c | default(section) }}"
                     },
                 {% endfor %}
             {% endfor %}
         ];
-
-        // === Ingredients for Custom Dish ===
         const ingredientsList = [
             "Basmati Rice", "Bell Pepper", "Biryani Masala", "Butter", "Capsicum", "Cauliflower",
             "Chickpea Flour (Besan)", "Chickpea Flour (for batter)", "Chickpeas (Channa)", "Chili Powder",
@@ -1373,30 +1314,6 @@
             "Tomato Ketchup", "Tomatoes", "Turmeric Powder", "Vinegar", "Water", "Wheat Flour (for dough)",
             "Whole Wheat Flour", "Yogurt (Curd)"
         ];
-
-        // === Utility Functions ===
-        function debounce(func, wait) {
-            let timeout;
-            return function (...args) {
-                clearTimeout(timeout);
-                timeout = setTimeout(() => func.apply(this, args), wait);
-            };
-        }
-
-        function showToast(message) {
-            const toastContainer = document.getElementById('toastContainer');
-            const toast = document.createElement('div');
-            toast.classList.add('toast');
-            toast.innerText = message;
-            toastContainer.appendChild(toast);
-            setTimeout(() => toast.classList.add('show'), 100);
-            setTimeout(() => {
-                toast.classList.remove('show');
-                setTimeout(() => toast.remove(), 300);
-            }, 3000);
-        }
-
-        // === Cart Functions ===
         function addToCartLocalStorage(payload) {
             let cart = JSON.parse(localStorage.getItem('cart')) || [];
             const existingItem = cart.find(item => 
@@ -1412,7 +1329,6 @@
             localStorage.setItem('cart', JSON.stringify(cart));
             return cart;
         }
-
         function removeFromCartLocalStorage(itemName, quantityToRemove, instructions, addons) {
             let cart = JSON.parse(localStorage.getItem('cart')) || [];
             const itemIndex = cart.findIndex(item => 
@@ -1430,29 +1346,16 @@
             localStorage.setItem('cart', JSON.stringify(cart));
             return cart;
         }
-
         function getCartLocalStorage() {
             return JSON.parse(localStorage.getItem('cart')) || [];
         }
-
-        function updateCartUI(cart) {
-            if (!Array.isArray(cart)) {
-                console.error('Invalid cart data:', cart);
-                showToast('Error updating cart');
-                return;
-            }
-            let totalQuantity = 0;
-            cart.forEach(item => {
-                totalQuantity += item.quantity;
-            });
-            const cartItemCount = document.getElementById('cart-item-count');
-            if (cartItemCount) {
-                cartItemCount.innerText = totalQuantity;
-                cartItemCount.style.display = totalQuantity > 0 ? 'inline-flex' : 'none';
-            }
+        function debounce(func, wait) {
+            let timeout;
+            return function (...args) {
+                clearTimeout(timeout);
+                timeout = setTimeout(() => func.apply(this, args), wait);
+            };
         }
-
-        // === Modal Functions ===
         function updateModalPrice() {
             const selectedAddOns = Array.from(
                 document.querySelectorAll('#addons-list input[type="checkbox"]:checked')
@@ -1461,14 +1364,12 @@
             const totalPrice = baseItemPrice + totalAddOnPrice;
             document.getElementById('modal-price').innerText = `$${totalPrice.toFixed(2)}`;
         }
-
         function updateSoftDrinkQuantity(delta) {
             const quantityInput = document.getElementById('soft-drink-quantity');
             let currentQuantity = parseInt(quantityInput.value) || 1;
             currentQuantity = Math.max(1, currentQuantity + delta);
             quantityInput.value = currentQuantity;
         }
-
         function showSoftDrinkModal(button) {
             currentSoftDrinkButton = button;
             const buttonContainer = button.closest('.button-container');
@@ -1477,14 +1378,13 @@
             const itemImage = buttonContainer.getAttribute('data-item-image');
             
             document.getElementById('soft-drink-name').textContent = itemName;
-            document.getElementById('soft-drink-price').textContent = `$${itemPrice}`;
+            document.getElementById('soft-drink-price').textContent = `${itemPrice}`;
             document.getElementById('soft-drink-quantity').value = '1';
             document.getElementById('soft-drink-image').src = itemImage || '/static/placeholder.jpg';
             
             const modal = new bootstrap.Modal(document.getElementById('softDrinkModal'));
             modal.show();
         }
-
         function addSoftDrinkToCart() {
             if (!currentSoftDrinkButton) return;
             
@@ -1523,7 +1423,6 @@
                     modal.hide();
                 } else {
                     console.error('Failed to add item to cart:', data.error);
-                    showToast('Failed to add item to cart');
                     const cart = addToCartLocalStorage(cartPayload);
                     updateCartUI(cart);
                     const modal = bootstrap.Modal.getInstance(document.getElementById('softDrinkModal'));
@@ -1532,14 +1431,27 @@
             })
             .catch(err => {
                 console.error('Error adding item to cart:', err);
-                showToast('Error adding item to cart');
                 const cart = addToCartLocalStorage(cartPayload);
                 updateCartUI(cart);
                 const modal = bootstrap.Modal.getInstance(document.getElementById('softDrinkModal'));
                 modal.hide();
             });
         }
-
+        function updateCartUI(cart) {
+            if (!Array.isArray(cart)) {
+                console.error('Invalid cart data:', cart);
+                return;
+            }
+            let totalQuantity = 0;
+            cart.forEach(item => {
+                totalQuantity += item.quantity;
+            });
+            const cartItemCount = document.getElementById('cart-item-count');
+            if (cartItemCount) {
+                cartItemCount.innerText = totalQuantity;
+                cartItemCount.style.display = totalQuantity > 0 ? 'inline-flex' : 'none';
+            }
+        }
         function showItemDetails(name, price, image, description, section, selectedCategory) {
             document.getElementById('modal-name').innerText = name;
             baseItemPrice = parseFloat(price) || 0;
@@ -1555,91 +1467,79 @@
             modalSectionEl.setAttribute('data-category', selectedCategory);
             document.getElementById('quantityInput').value = 1;
 
-            let retryCount = 0;
-            const maxRetries = 2;
-            function fetchAddons() {
-                fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
-                    .then(response => response.json())
-                    .then(data => {
-                        const addonsList = document.getElementById('addons-list');
-                        addonsList.classList.remove('addon-loading');
-                        addonsList.innerHTML = '';
-                        if (!data.success || !data.addons || data.addons.length === 0) {
-                            addonsList.innerHTML = '<p>No customization options available.</p>';
-                            return;
-                        }
-
-                        data.addons.forEach(addon => {
-                            const sectionDiv = document.createElement('div');
-                            sectionDiv.classList.add('addon-section');
-                            const title = document.createElement('h6');
-                            title.innerText = addon.name;
-                            sectionDiv.appendChild(title);
-                            const optionsContainer = document.createElement('div');
-                            optionsContainer.classList.add('addon-options');
+            fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
+                .then(response => response.json())
+                .then(data => {
+                    const addonsList = document.getElementById('addons-list');
+                    addonsList.classList.remove('addon-loading');
+                    addonsList.innerHTML = '';
+                    if (!data.success || !data.addons || data.addons.length === 0) {
+                        addonsList.innerHTML = '<p>No customization options available.</p>';
+                        return;
+                    }
 
-                            addon.options.forEach((option, index) => {
-                                const optionId = `addon-${addon.name.replace(/\s+/g, '')}-${index}`;
-                                const listItem = document.createElement('div');
-                                listItem.classList.add('form-check');
-                                listItem.innerHTML = `
-                                    <input type="checkbox" class="form-check-input addon-option" id="${optionId}" value="${option}"
-                                           data-name="${option}" data-group="${addon.name}" data-price="${addon.extra_charge ? addon.extra_charge_amount : 0}"
-                                           aria-label="Select ${option} for ${addon.name}">
-                                    <label class="form-check-label" for="${optionId}">
-                                        ${option} ${addon.extra_charge ? `<span class="extra-charge">($${addon.extra_charge_amount.toFixed(2)})</span>` : ''}
-                                    </label>
-                                `;
-                                optionsContainer.appendChild(listItem);
-                            });
+                    data.addons.forEach(addon => {
+                        const sectionDiv = document.createElement('div');
+                        sectionDiv.classList.add('addon-section');
+                        const title = document.createElement('h6');
+                        title.innerText = addon.name;
+                        sectionDiv.appendChild(title);
+                        const optionsContainer = document.createElement('div');
+                        optionsContainer.classList.add('addon-options');
 
-                            sectionDiv.appendChild(optionsContainer);
-                            addonsList.appendChild(sectionDiv);
+                        addon.options.forEach((option, index) => {
+                            const optionId = `addon-${addon.name.replace(/\s+/g, '')}-${index}`;
+                            const listItem = document.createElement('div');
+                            listItem.classList.add('form-check');
+                            listItem.innerHTML = `
+                                <input type="checkbox" class="form-check-input addon-option" id="${optionId}" value="${option}"
+                                       data-name="${option}" data-group="${addon.name}" data-price="${addon.extra_charge ? addon.extra_charge_amount : 0}"
+                                       aria-label="Select ${option} for ${addon.name}">
+                                <label class="form-check-label" for="${optionId}">
+                                    ${option} ${addon.extra_charge ? `<span class="extra-charge">($${addon.extra_charge_amount.toFixed(2)})</span>` : ''}
+                                </label>
+                            `;
+                            optionsContainer.appendChild(listItem);
                         });
 
-                        const addonSections = addonsList.querySelectorAll('.addon-section');
-                        addonSections.forEach(section => {
-                            const title = section.querySelector('h6');
-                            const options = section.querySelector('.addon-options');
-                            title.addEventListener('click', () => {
-                                section.classList.toggle('collapsed');
-                                options.classList.toggle('collapsed');
-                            });
-                        });
+                        sectionDiv.appendChild(optionsContainer);
+                        addonsList.appendChild(sectionDiv);
+                    });
 
-                        document.querySelectorAll('.addon-option').forEach(checkbox => {
-                            checkbox.addEventListener('change', updateModalPrice);
+                    const addonSections = addonsList.querySelectorAll('.addon-section');
+                    addonSections.forEach(section => {
+                        const title = section.querySelector('h6');
+                        const options = section.querySelector('.addon-options');
+                        title.addEventListener('click', () => {
+                            section.classList.toggle('collapsed');
+                            options.classList.toggle('collapsed');
                         });
+                    });
 
-                        document.querySelectorAll('.addon-option').forEach(checkbox => {
-                            checkbox.addEventListener('change', function () {
-                                const groupName = this.getAttribute('data-group');
-                                const isMultiSelectGroup = ["Extra Toppings", "Choose Raita/Sides", "Select Dip/Sauce", "Extra Add-ons", "Make it a Combo", "Beverages", "Sauces"].includes(groupName);
-                                if (!isMultiSelectGroup && this.checked) {
-                                    document.querySelectorAll(`.addon-option[data-group="${groupName}"]`).forEach(otherCheckbox => {
-                                        if (otherCheckbox !== this) {
-                                            otherCheckbox.checked = false;
-                                        }
-                                    });
-                                }
-                            });
+                    document.querySelectorAll('.addon-option').forEach(checkbox => {
+                        checkbox.addEventListener('change', updateModalPrice);
+                    });
+
+                    document.querySelectorAll('.addon-option').forEach(checkbox => {
+                        checkbox.addEventListener('change', function () {
+                            const groupName = this.getAttribute('data-group');
+                            const isMultiSelectGroup = ["Extra Toppings", "Choose Raita/Sides", "Select Dip/Sauce", "Extra Add-ons", "Make it a Combo", "Beverages", "Sauces"].includes(groupName);
+                            if (!isMultiSelectGroup && this.checked) {
+                                document.querySelectorAll(`.addon-option[data-group="${groupName}"]`).forEach(otherCheckbox => {
+                                    if (otherCheckbox !== this) {
+                                        otherCheckbox.checked = false;
+                                    }
+                                });
+                            }
                         });
-                    })
-                    .catch(err => {
-                        console.error('Error fetching add-ons:', err);
-                        if (retryCount < maxRetries) {
-                            retryCount++;
-                            setTimeout(fetchAddons, 1000);
-                        } else {
-                            document.getElementById('addons-list').classList.remove('addon-loading');
-                            document.getElementById('addons-list').innerHTML = '<p>Failed to load customization options. Please try again later.</p>';
-                            showToast('Error loading customization options');
-                        }
                     });
-            }
-            fetchAddons();
+                })
+                .catch(err => {
+                    console.error('Error fetching add-ons:', err);
+                    document.getElementById('addons-list').classList.remove('addon-loading');
+                    document.getElementById('addons-list').innerHTML = '<p>Error loading customization options.</p>';
+                });
         }
-
         function addToCartFromModal() {
             if (isProcessingRequest) return;
             isProcessingRequest = true;
@@ -1659,7 +1559,7 @@
             }));
             if (!itemName || isNaN(itemPrice) || !section || !itemImage || quantity < 1) {
                 console.error('Invalid cart item data:', { itemName, itemPrice, section, itemImage, quantity });
-                showToast('Invalid item data. Please try again.');
+                alert('Invalid item data. Please try again.');
                 isProcessingRequest = false;
                 return;
             }
@@ -1688,7 +1588,6 @@
                     modal.hide();
                 } else {
                     console.error('Failed to add item to cart:', data.error);
-                    showToast('Failed to add item to cart');
                     const cart = addToCartLocalStorage(cartPayload);
                     updateCartUI(cart);
                     const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
@@ -1697,7 +1596,6 @@
             })
             .catch(err => {
                 console.error('Error adding item to cart:', err);
-                showToast('Error adding item to cart');
                 const cart = addToCartLocalStorage(cartPayload);
                 updateCartUI(cart);
                 const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
@@ -1707,19 +1605,10 @@
                 isProcessingRequest = false;
             });
         }
-
-        // NEW: Updated Filter Form Logic
         function handleToggle(source) {
             const form = document.getElementById("filter-form");
             const veg = document.getElementById("veg-toggle");
             const custom = document.getElementById("category-CustomizedDish");
-
-            if (!form || !veg || !custom) {
-                console.error("Form or toggle elements not found");
-                showToast("Error applying filter");
-                return;
-            }
-
             if (source === 'veg') {
                 if (veg.checked) {
                     custom.checked = false;
@@ -1729,365 +1618,233 @@
                     veg.checked = false;
                 }
             }
-
-            // NEW: Log query parameters for debugging
-            const params = new URLSearchParams();
-            if (veg.checked) params.set('veg', 'on');
-            if (custom.checked) params.set('custom', 'on');
-            console.log('Filter form submitting with:', params.toString());
-
+            if (!custom.checked && !veg.checked) {
+                custom.checked = false;
+            }
             form.submit();
         }
-
-        // NEW: Client-Side Filtering for Veg
-        function applyClientSideVegFilter() {
-            const noItemsMessage = document.getElementById('no-items-message');
-            const clientSideMenu = document.getElementById('client-side-menu');
-            if (!noItemsMessage || !clientSideMenu) return;
-
-            const vegItems = menuItems.filter(item => item.isVeg === true);
-            if (vegItems.length > 0) {
-                noItemsMessage.innerText = 'Showing vegetarian items (client-side)';
-                clientSideMenu.innerHTML = '';
-
-                const sections = [...new Set(vegItems.map(item => item.section))];
-                sections.forEach(section => {
-                    const sectionItems = vegItems.filter(item => item.section === section);
-                    const sectionDiv = document.createElement('div');
-                    sectionDiv.innerHTML = `<h3>${section}</h3>`;
-                    const rowDiv = document.createElement('div');
-                    rowDiv.classList.add('row');
-
-                    sectionItems.forEach(item => {
-                        const itemDiv = document.createElement('div');
-                        itemDiv.classList.add('col-md-6', 'mb-4');
-                        itemDiv.innerHTML = `
-                            <div class="card menu-card" data-item-name="${item.name}" data-item-section="${item.section}" data-is-veg="${item.isVeg}">
-                                <video 
-                                    class="card-img-top menu-video" 
-                                    muted 
-                                    loop 
-                                    preload="auto" 
-                                    data-src="${item.video}" 
-                                    poster="${item.image}"
-                                    width="350" 
-                                    height="200" 
-                                    onmouseover="this.play()" 
-                                    onmouseout="this.pause(); this.currentTime = 0;" 
-                                    onerror="this.poster='/static/placeholder.jpg';">
-                                    <source src="${item.video}" type="video/mp4">
-                                    Your browser does not support the video tag.
-                                </video>
-                                <div class="addbutton">
-                                    <div class="card-body d-flex align-items-center justify-content-between">
-                                        <div>
-                                            <h5 class="card-title">${item.name}</h5>
-                                            <p class="card-text price">$${item.price}</p>
-                                        </div>
-                                        <div class="d-flex flex-column align-items-center justify-content-center  
-                                        <div class="button-container" 
-                                             data-item-name="${item.name}" 
-                                             data-item-price="${item.price}" 
-                                             data-item-image="${item.image}" 
-                                             data-item-section="${item.section}" 
-                                             data-item-category="Veg"
-                                             data-item-description="${item.description}"
-                                             data-item-image2="${item.image2}"
-                                             data-is-veg="${item.isVeg}">
-                                            <button class="btn btn-primary" 
-                                                    data-bs-toggle="modal" 
-                                                    data-bs-target="#itemModal" 
-                                                    onclick="showItemDetails('${item.name}', '${item.price}', '${item.image2}', '${item.description}', '${item.section}', 'Veg')"
-                                                    aria-label="Customize ${item.name}">
-                                                ADD
-                                            </button>
-                                                                                       ${item.section !== 'Apetizer' && item.section !== 'Customized Dish' ? '<span class="customisable-text">Customisable</span>' : ''}
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="toggle-details" data-item-name="${item.name}" role="button" aria-label="Toggle details for ${item.name}">Show Details</div>
-                                <div class="item-details" id="details-${item.name.replace(/ /g, '-')}">
-                                    <h6>Description</h6>
-                                    <p>${item.description}</p>
-                                    <!-- NEW: Placeholder for ingredients and nutritional info -->
-                                    <h6>Ingredients</h6>
-                                    <p>Not specified</p>
-                                    <h6>Nutritional Info</h6>
-                                    <p class="nutritional-info">Not available</p>
-                                    <h6>Allergens</h6>
-                                    <p>None listed</p>
-                                </div>
-                            </div>
-                        `;
-                        rowDiv.appendChild(itemDiv);
-                    });
-                    sectionDiv.appendChild(rowDiv);
-                    clientSideMenu.appendChild(sectionDiv);
+        document.addEventListener('DOMContentLoaded', function () {
+            const avatarContainer = document.querySelector('.avatar-dropdown-container');
+            const dropdownMenu = document.querySelector('.dropdown-menu');
+            avatarContainer.addEventListener('click', function (event) {
+                event.stopPropagation();
+                dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
+            });
+            document.addEventListener('click', function (event) {
+                if (!avatarContainer.contains(event.target)) {
+                    dropdownMenu.style.display = 'none';
+                }
+            });
+            const dropdownItems = document.querySelectorAll('.dropdown-item');
+            dropdownItems.forEach(item => {
+                item.addEventListener('click', function () {
+                    dropdownMenu.style.display = 'none';
                 });
-
-                // NEW: Re-apply Intersection Observers for client-side rendered cards
-                const newMenuCards = clientSideMenu.querySelectorAll('.menu-card');
-                const newMenuVideos = clientSideMenu.querySelectorAll('.menu-video');
-                newMenuCards.forEach(card => cardObserver.observe(card));
-                newMenuVideos.forEach(video => videoObserver.observe(video));
-
-                // NEW: Re-apply toggle details listeners
-                const newToggleLinks = clientSideMenu.querySelectorAll('.toggle-details');
-                newToggleLinks.forEach(link => {
-                    link.addEventListener('click', function () {
-                        const itemName = this.getAttribute('data-item-name').replace(/ /g, '-');
-                        const detailsDiv = document.getElementById(`details-${itemName}`);
-                        const isCurrentlyShown = detailsDiv.classList.contains('show');
-                        document.querySelectorAll('.item-details.show').forEach(otherDetails => {
-                            if (otherDetails !== detailsDiv) {
-                                otherDetails.classList.remove('show');
-                                const otherLink = document.querySelector(`.toggle-details[data-item-name="${otherDetails.id.replace('details-', '').replace(/-/g, ' ')}"]`);
-                                if (otherLink) {
-                                    otherLink.innerText = 'Show Details';
-                                }
+            });
+            const searchBar = document.getElementById('searchBar');
+            searchBar.addEventListener('click', function () {
+                window.location.href = '/search';
+            });
+            const selectedItem = localStorage.getItem('selectedItem');
+            if (selectedItem) {
+                try {
+                    const { name, section } = JSON.parse(selectedItem);
+                    const menuCards = document.querySelectorAll('.menu-card');
+                    let targetCard = null;
+                    let buttonContainer = null;
+                    menuCards.forEach(card => {
+                        const itemName = card.getAttribute('data-item-name');
+                        const itemSection = card.getAttribute('data-item-section');
+                        if (itemName === name && itemSection === section) {
+                            targetCard = card;
+                            buttonContainer = card.querySelector('.button-container');
+                            card.classList.add('highlighted');
+                            card.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                            const toggleLink = card.querySelector('.toggle-details');
+                            if (toggleLink) {
+                                toggleLink.click();
                             }
-                        });
-                        if (!isCurrentlyShown) {
-                            detailsDiv.classList.add('show');
-                            this.innerText = 'Hide Details';
-                        } else {
-                            detailsDiv.classList.remove('show');
-                            this.innerText = 'Show Details';
                         }
                     });
-                });
-            } else {
-                noItemsMessage.innerText = 'No vegetarian items available. Please try adjusting the filters or contact support.';
-            }
-        }
-
-        // NEW: Apply client-side filter if no items are returned
-        if (document.getElementById('no-items-message')) {
-            applyClientSideVegFilter();
-        }
-
-        // === Search Functionality ===
-        const searchBar = document.getElementById('searchBar');
-        const searchSuggestions = document.getElementById('searchSuggestions');
-        const debouncedSearch = debounce(function () {
-            const query = searchBar.value.trim().toLowerCase();
-            searchSuggestions.innerHTML = '';
-            searchSuggestions.style.display = 'none';
-            if (query.length >= 2) {
-                const filteredItems = menuItems.filter(item =>
-                    item.name.toLowerCase().includes(query) ||
-                    item.section.toLowerCase().includes(query) ||
-                    item.description.toLowerCase().includes(query)
-                );
-                if (filteredItems.length > 0) {
-                    filteredItems.forEach(item => {
-                        const suggestionDiv = document.createElement('div');
-                        suggestionDiv.classList.add('suggestion-item');
-                        suggestionDiv.innerText = item.name;
-                        suggestionDiv.addEventListener('click', () => {
-                            searchBar.value = item.name;
-                            searchSuggestions.style.display = 'none';
-                            window.location.href = '/search';
-                        });
-                        searchSuggestions.appendChild(suggestionDiv);
-                    });
-                    searchSuggestions.style.display = 'block';
-                }
-            }
-        }, 300);
-        searchBar.addEventListener('input', debouncedSearch);
-        document.addEventListener('click', function (event) {
-            if (!searchBar.contains(event.target) && !searchSuggestions.contains(event.target)) {
-                searchSuggestions.style.display = 'none';
-            }
-        });
-
-        // === Dropdown Menu ===
-        const avatarIcon = document.querySelector('.avatar-icon');
-        const dropdownMenu = document.querySelector('.dropdown-menu');
-        avatarIcon.addEventListener('click', function () {
-            dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
-        });
-        document.addEventListener('click', function (event) {
-            if (!avatarIcon.contains(event.target) && !dropdownMenu.contains(event.target)) {
-                dropdownMenu.style.display = 'none';
-            }
-        });
-
-        // === Intersection Observers ===
-        const menuCards = document.querySelectorAll('.menu-card');
-        const menuVideos = document.querySelectorAll('.menu-video');
-        const cardObserver = new IntersectionObserver((entries, observer) => {
-            entries.forEach(entry => {
-                if (entry.isIntersecting) {
-                    entry.target.classList.add('visible');
-                    observer.unobserve(entry.target);
-                }
-            });
-        }, {
-            root: null,
-            rootMargin: '0px',
-            threshold: 0.1
-        });
-        const videoObserver = new IntersectionObserver((entries, observer) => {
-            entries.forEach(entry => {
-                if (entry.isIntersecting) {
-                    const video = entry.target;
-                    const src = video.getAttribute('data-src');
-                    if (src && src !== '/static/placeholder.mp4') {
-                        const source = video.querySelector('source');
-                        if (source && !source.src) {
-                            source.src = src;
-                            video.load().catch(err => {
-                                console.error('Error loading video:', err);
-                                video.poster = '/static/placeholder.jpg';
-                            });
+                    if (buttonContainer) {
+                        if (section === 'Soft Drinks') {
+                            showSoftDrinkModal(buttonContainer.querySelector('.add-to-cart-btn'));
+                        } else {
+                            const name = buttonContainer.getAttribute('data-item-name');
+                            const price = buttonContainer.getAttribute('data-item-price');
+                            const image = buttonContainer.getAttribute('data-item-image2');
+                            const description = buttonContainer.getAttribute('data-item-description');
+                            const category = buttonContainer.getAttribute('data-item-category');
+                            showItemDetails(name, price, image, description, section, category);
+                            const modal = new bootstrap.Modal(document.getElementById('itemModal'));
+                            modal.show();
                         }
-                    } else {
-                        video.poster = '/static/placeholder.jpg';
                     }
-                    video.classList.add('loaded');
-                    observer.unobserve(video);
+                } catch (err) {
+                    console.error('Error parsing selected item:', err);
                 }
+                localStorage.removeItem('selectedItem');
+            }
+            const menuCards = document.querySelectorAll('.menu-card');
+            const menuVideos = document.querySelectorAll('.menu-video');
+            const cardObserver = new IntersectionObserver((entries, observer) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.classList.add('visible');
+                        observer.unobserve(entry.target);
+                    }
+                });
+            }, {
+                root: null,
+                rootMargin: '0px',
+                threshold: 0.1
             });
-        }, {
-            root: null,
-            rootMargin: '200px',
-            threshold: 0.01
-        });
-        menuCards.forEach(card => cardObserver.observe(card));
-        menuVideos.forEach(video => videoObserver.observe(video));
-
-        // === Toggle Details ===
-        const toggleLinks = document.querySelectorAll('.toggle-details');
-        toggleLinks.forEach(link => {
-            link.addEventListener('click', function () {
-                const itemName = this.getAttribute('data-item-name').replace(/ /g, '-');
-                const detailsDiv = document.getElementById(`details-${itemName}`);
-                const isCurrentlyShown = detailsDiv.classList.contains('show');
-                document.querySelectorAll('.item-details.show').forEach(otherDetails => {
-                    if (otherDetails !== detailsDiv) {
-                        otherDetails.classList.remove('show');
-                        const otherLink = document.querySelector(`.toggle-details[data-item-name="${otherDetails.id.replace('details-', '').replace(/-/g, ' ')}"]`);
-                        if (otherLink) {
-                            otherLink.innerText = 'Show Details';
+            const videoObserver = new IntersectionObserver((entries, observer) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        const video = entry.target;
+                        const src = video.getAttribute('data-src');
+                        if (src && !video.querySelector('source[src="' + src + '"]')) {
+                            const nextSibling = video.nextElementSibling;
+                            if (nextSibling && nextSibling.tagName === 'SOURCE') {
+                                nextSibling.src = src;
+                            } else {
+                                const source = video.querySelector('source');
+                                if (source) {
+                                    source.src = src;
+                                }
+                            }
+                            video.load();
                         }
+                        video.classList.add('loaded');
+                        observer.unobserve(video);
                     }
                 });
-                if (!isCurrentlyShown) {
-                    detailsDiv.classList.add('show');
-                    this.innerText = 'Hide Details';
-                } else {
-                    detailsDiv.classList.remove('show');
-                    this.innerText = 'Show Details';
-                }
+            }, {
+                root: null,
+                rootMargin: '200px',
+                threshold: 0.01
             });
-        });
-
-        // === Custom Dish Form Suggestions ===
-        const descriptionTextarea = document.getElementById('custom-dish-description');
-        const descriptionSuggestions = document.getElementById('descriptionSuggestions');
-        if (descriptionTextarea && descriptionSuggestions) {
-            let usedIngredients = new Set();
-            function updateUsedIngredients() {
-                const inputText = descriptionTextarea.value.trim();
-                usedIngredients.clear();
-                if (inputText) {
-                    const words = inputText.split(/,\s*/).map(word => word.trim());
-                    words.forEach(word => {
-                        if (word && ingredientsList.includes(word)) {
-                            usedIngredients.add(word);
+            menuCards.forEach(card => cardObserver.observe(card));
+            menuVideos.forEach(video => videoObserver.observe(video));
+            const toggleLinks = document.querySelectorAll('.toggle-details');
+            toggleLinks.forEach(link => {
+                link.addEventListener('click', function () {
+                    const itemName = this.getAttribute('data-item-name').replace(/ /g, '-');
+                    const detailsDiv = document.getElementById(`details-${itemName}`);
+                    const isCurrentlyShown = detailsDiv.classList.contains('show');
+                    document.querySelectorAll('.item-details.show').forEach(otherDetails => {
+                        if (otherDetails !== detailsDiv) {
+                            otherDetails.classList.remove('show');
+                            const otherLink = document.querySelector(`.toggle-details[data-item-name="${otherDetails.id.replace('details-', '').replace(/-/g, ' ')}"]`);
+                            if (otherLink) {
+                                otherLink.innerText = 'Show Details';
+                            }
                         }
                     });
-                }
-            }
-            const debouncedSuggestions = debounce(function () {
-                const inputText = descriptionTextarea.value.trim();
-                const words = inputText.split(/,\s*/);
-                const lastWord = words[words.length - 1].trim().toLowerCase();
-                descriptionSuggestions.innerHTML = '';
-                descriptionSuggestions.style.display = 'none';
-                updateUsedIngredients();
-                if (lastWord) {
-                    const filteredIngredients = ingredientsList.filter(ingredient =>
-                        ingredient.toLowerCase().includes(lastWord) && !usedIngredients.has(ingredient)
-                    );
-                    if (filteredIngredients.length > 0) {
-                        filteredIngredients.forEach(ingredient => {
-                            const suggestionDiv = document.createElement('div');
-                            suggestionDiv.classList.add('suggestion-item');
-                            suggestionDiv.innerText = ingredient;
-                            suggestionDiv.addEventListener('click', function () {
-                                const currentValue = descriptionTextarea.value;
-                                const lastCommaIndex = currentValue.lastIndexOf(',');
-                                const baseText = lastCommaIndex !== -1 ? currentValue.substring(0, lastCommaIndex + 1) : '';
-                                descriptionTextarea.value = baseText + (baseText ? ' ' : '') + ingredient + ', ';
-                                descriptionSuggestions.style.display = 'none';
-                                descriptionTextarea.focus();
-                                updateUsedIngredients();
-                            });
-                            descriptionSuggestions.appendChild(suggestionDiv);
+                    if (!isCurrentlyShown) {
+                        detailsDiv.classList.add('show');
+                        this.innerText = 'Hide Details';
+                    } else {
+                        detailsDiv.classList.remove('show');
+                        this.innerText = 'Show Details';
+                    }
+                });
+            });
+            const descriptionTextarea = document.getElementById('custom-dish-description');
+            const descriptionSuggestions = document.getElementById('descriptionSuggestions');
+            if (descriptionTextarea && descriptionSuggestions) {
+                let usedIngredients = new Set();
+                function updateUsedIngredients() {
+                    const inputText = descriptionTextarea.value.trim();
+                    usedIngredients.clear();
+                    if (inputText) {
+                        const words = inputText.split(/,\s*/).map(word => word.trim());
+                        words.forEach(word => {
+                            if (word && ingredientsList.includes(word)) {
+                                usedIngredients.add(word);
+                            }
                         });
-                        descriptionSuggestions.style.display = 'block';
                     }
                 }
-            }, 300);
-            descriptionTextarea.addEventListener('input', debouncedSuggestions);
-            document.addEventListener('click', function (event) {
-                if (!descriptionTextarea.contains(event.target) && !descriptionSuggestions.contains(event.target)) {
+                descriptionTextarea.addEventListener('input', function () {
+                    const inputText = this.value.trim();
+                    const words = inputText.split(/,\s*/);
+                    const lastWord = words[words.length - 1].trim().toLowerCase();
+                    descriptionSuggestions.innerHTML = '';
                     descriptionSuggestions.style.display = 'none';
-                }
-            });
-        }
-
-        // === Fetch Initial Cart ===
-        fetch('/cart/get')
-            .then(response => {
-                if (!response.ok) {
-                    throw new Error(`HTTP error! Status: ${response.status}`);
-                }
-                return response.json();
-            })
-            .then(data => {
-                if (data.success) {
-                    updateCartUI(data.cart);
-                } else {
-                    console.error('Failed to fetch cart:', data.error);
-                    showToast('Failed to load cart');
+                    updateUsedIngredients();
+                    if (lastWord) {
+                        const filteredIngredients = ingredientsList.filter(ingredient =>
+                            ingredient.toLowerCase().includes(lastWord) && !usedIngredients.has(ingredient)
+                        );
+                        if (filteredIngredients.length > 0) {
+                            filteredIngredients.forEach(ingredient => {
+                                const suggestionDiv = document.createElement('div');
+                                suggestionDiv.classList.add('suggestion-item');
+                                suggestionDiv.innerText = ingredient;
+                                suggestionDiv.addEventListener('click', function () {
+                                    const currentValue = descriptionTextarea.value;
+                                    const lastCommaIndex = currentValue.lastIndexOf(',');
+                                    const baseText = lastCommaIndex !== -1 ? currentValue.substring(0, lastCommaIndex + 1) : '';
+                                    descriptionTextarea.value = baseText + (baseText ? ' ' : '') + ingredient + ', ';
+                                    descriptionSuggestions.style.display = 'none';
+                                    descriptionTextarea.focus();
+                                    updateUsedIngredients();
+                                });
+                                descriptionSuggestions.appendChild(suggestionDiv);
+                            });
+                            descriptionSuggestions.style.display = 'block';
+                        }
+                    }
+                });
+                document.addEventListener('click', function (event) {
+                    if (!descriptionTextarea.contains(event.target) && !descriptionSuggestions.contains(event.target)) {
+                        descriptionSuggestions.style.display = 'none';
+                    }
+                });
+            }
+            fetch('/cart/get')
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! Status: ${response.status}`);
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    if (data.success) {
+                        updateCartUI(data.cart);
+                    } else {
+                        console.error('Failed to fetch cart:', data.error);
+                        const cart = getCartLocalStorage();
+                        updateCartUI(cart);
+                    }
+                })
+                .catch(err => {
+                    console.error('Error fetching cart:', err);
                     const cart = getCartLocalStorage();
                     updateCartUI(cart);
-                }
-            })
-            .catch(err => {
-                console.error('Error fetching cart:', err);
-                showToast('Error loading cart');
-                const cart = getCartLocalStorage();
-                updateCartUI(cart);
+                });
+            const preloadedVideos = document.querySelectorAll('link[rel="preload"][as="video"]');
+            preloadedVideos.forEach(link => {
+                const video = document.createElement('video');
+                video.src = link.href;
+                video.preload = 'auto';
+            });
+            const decreaseBtn = document.getElementById('decreaseQuantity');
+            const increaseBtn = document.getElementById('increaseQuantity');
+            const quantityInput = document.getElementById('quantityInput');
+            decreaseBtn.addEventListener('click', function () {
+                let quantity = parseInt(quantityInput.value) || 1;
+                quantity = Math.max(1, quantity - 1);
+                quantityInput.value = quantity;
+            });
+            increaseBtn.addEventListener('click', function () {
+                let quantity = parseInt(quantityInput.value) || 1;
+                quantity += 1;
+                quantityInput.value = quantity;
             });
-
-        // === Quantity Controls for Item Modal ===
-        const decreaseBtn = document.getElementById('decreaseQuantity');
-        const increaseBtn = document.getElementById('increaseQuantity');
-        const quantityInput = document.getElementById('quantityInput');
-        decreaseBtn.addEventListener('click', function () {
-            let quantity = parseInt(quantityInput.value) || 1;
-            quantity = Math.max(1, quantity - 1);
-            quantityInput.value = quantity;
-        });
-        increaseBtn.addEventListener('click', function () {
-            let quantity = parseInt(quantityInput.value) || 1;
-            quantity += 1;
-            quantityInput.value = quantity;
-        });
-
-        // === Keyboard Accessibility for Search Bar ===
-        searchBar.addEventListener('keydown', function (e) {
-            if (e.key === 'Enter' && searchBar.value.trim()) {
-                window.location.href = '/search';
-            }
         });
-    });
     </script>
 </body>
-</html>
- 
+</html>