Update templates/menu.html

templates/menu.html

@@ -23,11 +23,9 @@
             display: flex;
             flex-direction: column;
             padding-bottom: 70px;
-            overflow-x: hidden;
         }
         .container {
             max-width: 900px;
-            padding: 0 15px;
         }
         .menu-card {
             max-width: 350px;
@@ -51,22 +49,19 @@
             border-radius: 15px 15px 0 0;
             opacity: 0;
             transition: opacity 0.5s ease-in-out;
-            background-color: #000;
+            background-color: #000; /* Fallback color if video fails */
         }
         .menu-video.loaded {
             opacity: 1;
         }
         .menu-card:hover .menu-video {
             opacity: 1;
-            transform: scale(1.05);
-        }
-        .menu-card .card-body {
-            padding: 15px;
+            transform: scale(1.05); /* Slight zoom effect on hover */
         }
         .menu-card .card-body .card-title {
             font-size: 1.2rem;
             font-weight: 600;
-            margin: 0 0 5px 0;
+            margin: 10px 0;
             color: #333333;
         }
         .menu-card .card-body .card-text.price {
@@ -136,7 +131,7 @@
             top: 50%;
             transform: translateY(-50%);
             display: flex;
-            align-items: center;
+            align-items: right;
             justify-content: center;
         }
         .avatar-icon {
@@ -162,7 +157,6 @@
             box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
             display: none;
             border: 1px solid #ffd8b1;
-            z-index: 1001;
         }
         .dropdown-menu .dropdown-item {
             padding: 12px 16px;
@@ -181,7 +175,7 @@
             color: #333;
         }
         .fixed-top-bar {
-            position: fixed;
+            position: relative;
             top: 0;
             left: 0;
             width: 100%;
@@ -203,6 +197,7 @@
             align-items: center;
             width: 300px;
             max-width: 90%;
+            position: relative;
         }
         .search-bar-container input {
             width: 100%;
@@ -271,12 +266,15 @@
             color: #343a40;
         }
         .addon-section .form-check {
-            display: flex;
+            display: inline-flex;
             align-items: center;
             margin-left: 10px;
             color: #343a40;
         }
         .addon-section .form-check-input {
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
             width: 20px;
             height: 20px;
             border: 2px solid #343a40;
@@ -284,7 +282,6 @@
             background-color: #f0f0f0;
             position: relative;
             margin-right: 10px;
-            cursor: pointer;
         }
         .addon-section .form-check-input:checked {
             background-color: #006400;
@@ -300,21 +297,21 @@
         }
         .addon-section .form-check-label {
             font-size: 16px;
+            margin-left: 5px;
             margin-right: 15px;
             cursor: pointer;
+            display: inline-block;
+            vertical-align: middle;
         }
         form.text-center.mb-4 {
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
-            margin-bottom: 20px;
+            margin-bottom: 5px;
         }
         .modal-header {
             padding: 10px 15px;
-            background: linear-gradient(45deg, #0FAA39, #0D9232);
-            color: white;
-            border-radius: 15px 15px 0 0;
         }
         .modal-title {
             font-size: 16px;
@@ -323,14 +320,14 @@
         .modal-body {
             max-height: 60vh;
             overflow-y: auto;
-            padding: 20px;
+            padding: 15px;
         }
         .modal-body #modal-img {
             max-height: 200px;
             width: 100%;
             object-fit: cover;
             border-radius: 8px;
-            margin-bottom: 15px;
+            margin-bottom: 10px;
         }
         .modal-body #modal-name {
             font-size: 20px;
@@ -349,61 +346,60 @@
         .modal-body #modal-description {
             font-size: 14px;
             color: #6c757d;
-            margin-bottom: 15px;
-            text-align: center;
+            margin-bottom: 10px;
         }
         .modal-body .nutritional-info {
             font-size: 12px;
             color: #6c757d;
-            margin-bottom: 15px;
-            text-align: center;
+            margin-bottom: 10px;
         }
-        .modal-body #modal-addons h6 {
+        .modal-body #modal-addons h6,
+        .modal-body #first-row h6 {
             font-size: 14px;
             font-weight: bold;
             margin-bottom: 10px;
-            text-align: center;
         }
         .modal-footer {
             display: flex;
             align-items: center;
             justify-content: space-between;
-            padding: 15px;
-            border-top: none;
+            padding: 10px;
         }
-        .modal-footer .quantity-selector {
+        .modal-footer .d-flex {
             display: flex;
             align-items: center;
-            background-color: #f8f9fa;
-            padding: 5px;
-            border-radius: 10px;
+            gap: 10px;
         }
-        .modal-footer .btn-outline-secondary {
-            width: 40px;
+        .modal-footer .btn {
             height: 40px;
-            padding: 0;
-            font-size: 16px;
-            line-height: 40px;
+            padding: 0 15px;
         }
         .modal-footer .form-control {
-            width: 60px;
+            width: 50px;
             height: 40px;
             text-align: center;
-            font-weight: bold;
-            font-size: 16px;
         }
         .modal-footer .btn-primary {
             background-color: #0FAA39;
             border-color: #0FAA39;
             font-weight: bold;
             padding: 10px 20px;
-            border-radius: 8px;
+            height: 40px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: auto;
+        }
+        .modal-footer .btn-outline-secondary {
+            height: 40px;
+            width: 40px;
         }
         .item-details {
             display: none;
             padding: 15px;
             background-color: #f8f9fa;
             border-radius: 8px;
+            margin-top: 10px;
             margin: 10px 15px;
             box-shadow: 0 2px 5px rgba(0,0,0,0.1);
         }
@@ -462,6 +458,36 @@
         .category-button:hover {
             background-color: #e6f4ea;
         }
+        .quantity-selector {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+        .quantity-selector .btn {
+            width: 25px;
+            height: 25px;
+            padding: 0;
+            font-size: 12px;
+            line-height: 25px;
+            text-align: center;
+        }
+        .quantity-selector .quantity-display {
+            width: 25px;
+            text-align: center;
+            font-size: 12px;
+            font-weight: bold;
+            line-height: 25px;
+        }
+        .quantity-selector .quantity-to-add,
+        .quantity-selector .quantity-to-remove {
+            width: 45px;
+            height: 25px;
+            font-size: 12px;
+            padding: 0 5px;
+        }
+        .modal-dialog {
+            max-height: 90vh;
+        }
         .modal-body::-webkit-scrollbar {
             width: 8px;
         }
@@ -480,6 +506,13 @@
             opacity: 0.65;
             cursor: not-allowed;
         }
+        .quantity-selector select {
+            width: 60px;
+            height: 35px;
+            padding: 5px;
+            border-radius: 5px;
+            border: 1px solid #ced4da;
+        }
         #custom-dish-form {
             position: relative;
             padding-bottom: 80px;
@@ -549,6 +582,8 @@
             font-size: 12px;
             margin-left: 8px;
         }
+
+        /* Mic Popup Styles */
         .mic-popup {
             position: fixed;
             top: 50%;
@@ -565,20 +600,24 @@
             max-width: 90%;
             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
         }
+        
         .mic-popup.active {
             display: block;
         }
+        
         .mic-popup-icon {
             font-size: 48px;
             margin-bottom: 20px;
             color: #ff4444;
             animation: pulse 1.5s infinite;
         }
+        
         .mic-popup-text {
             font-size: 18px;
             margin-bottom: 15px;
             min-height: 24px;
         }
+        
         .mic-popup-cancel {
             background-color: #ff4444;
             color: white;
@@ -587,16 +626,14 @@
             border-radius: 20px;
             cursor: pointer;
             font-weight: bold;
-            transition: background-color 0.3s ease;
-        }
-        .mic-popup-cancel:hover {
-            background-color: #cc3333;
         }
+        
         @keyframes pulse {
             0% { transform: scale(1); }
             50% { transform: scale(1.1); }
             100% { transform: scale(1); }
         }
+
         @media (max-width: 576px) {
             .fixed-top-bar {
                 height: 60px;
@@ -604,66 +641,146 @@
             }
             .search-bar-container {
                 width: 80%;
+                max-width: 100%;
                 left: 10px;
+                top: 50%;
+                transform: translateY(-50%);
             }
             .search-bar-container input {
-                padding: 6px 35px;
+                padding: 6px 35px 6px 35px;
                 font-size: 14px;
                 border-radius: 20px;
             }
-            .search-icon, .mic-icon {
+            .search-icon {
+                left: 12px;
                 font-size: 16px;
             }
+            .mic-icon {
+                right: 12px;
+                font-size: 16px;
+            }
+            .avatar-dropdown-container {
+                right: 10px;
+            }
             .avatar-icon {
-                width: 35px;
-                height: 35px;
-                font-size: 18px;
+                width: 40px;
+                height: 40px;
+                font-size: 20px;
             }
             .dropdown-menu {
-                width: 200px;
+                width: 220px;
+            }
+            .dropdown-menu .dropdown-item {
+                padding: 12px 16px;
+                font-size: 15px;
+            }
+            .category-buttons {
+                gap: 8px;
             }
             .category-button {
                 padding: 4px 12px;
                 font-size: 0.85rem;
             }
+            .modal-dialog {
+                max-width: 96%;
+                margin: 5px auto;
+            }
+            .modal-header {
+                padding: 5px 10px;
+            }
+            .modal-title {
+                font-size: 14px;
+            }
             .modal-body {
                 max-height: 50vh;
-                padding: 15px;
+                padding: 8px;
             }
             .modal-body #modal-img {
                 max-height: 150px;
+                width: 100%;
+                max-width: 150px;
+                margin: 0 auto 5px;
+                display: block;
             }
             .modal-body #modal-name {
                 font-size: 18px;
+                margin-bottom: 3px;
             }
             .modal-body #modal-price {
                 font-size: 14px;
+                margin-bottom: 5px;
             }
-            .modal-body #modal-description, .modal-body .nutritional-info {
+            .modal-body #modal-description {
                 font-size: 12px;
+                margin-bottom: 5px;
             }
-            .modal-footer .btn-outline-secondary {
-                width: 30px;
+            .modal-body .nutritional-info {
+                font-size: 10px;
+                margin-bottom: 5px;
+            }
+            .modal-body #modal-addons h6,
+            .modal-body #first-row h6 {
+                font-size: 12px;
+                margin-bottom: 5px;
+            }
+            .modal-footer {
+                padding: 5px;
+            }
+            .modal-footer .btn {
                 height: 30px;
-                font-size: 14px;
+                padding: 0 10px;
             }
             .modal-footer .form-control {
-                width: 50px;
+                width: 30px;
                 height: 30px;
-                font-size: 14px;
+                font-size: 12px;
+                font-weight: bold;
+            }
+            .modal-footer .btn-outline-secondary {
+                width: 25px;
+                height: 25px;
+                font-size: 12px;
+                line-height: 25px;
             }
             .modal-footer .btn-primary {
-                padding: 8px 15px;
-                font-size: 14px;
+                font-size: 12px;
+                height: 30px;
+                padding: 0 15px;
+                border-radius: 5px;
             }
             .btn-primary {
-                width: 60px;
-                height: 30px;
                 font-size: 10px;
+                width: 50px;
+                height: 25px;
             }
             .customisable-text {
                 font-size: 8px;
             }
+            .button-container {
+                gap: 3px;
+            }
+            .quantity-selector .btn {
+                width: 18px;
+                height: 18px;
+                font-size: 9px;
+                line-height: 18px;
+            }
+            .quantity-selector .quantity-display {
+                width: 18px;
+                font-size: 9px;
+                line-height: 18px;
+            }
+            .quantity-selector .quantity-to-add,
+            .quantity-selector .quantity-to-remove {
+                width: 35px;
+                height: 18px;
+                font-size: 9px;
+            }
+            .quantity-selector select {
+                width: 50px;
+                height: 30px;
+                font-size: 12px;
+            }
             .bottom-action-bar {
                 padding: 8px 10px;
             }
@@ -675,28 +792,46 @@
                 width: 18px;
                 height: 18px;
                 font-size: 10px;
+                margin-left: 5px;
+            }
+            .item-details {
+                padding: 10px;
+                margin: 5px 10px;
+            }
+            .item-details h6 {
+                font-size: 0.95rem;
             }
+            .item-details p {
+                font-size: 0.8rem;
+            }
+            .toggle-details {
+                font-size: 0.8rem;
+            }
+            /* Mic Popup Mobile Styles */
             .mic-popup {
-                width: 280px;
                 padding: 20px;
+                width: 280px;
             }
             .mic-popup-icon {
                 font-size: 36px;
+                margin-bottom: 15px;
             }
             .mic-popup-text {
                 font-size: 16px;
             }
             .mic-popup-cancel {
                 padding: 6px 16px;
+                font-size: 14px;
             }
         }
     </style>
 </head>
 <body>
+
     <div class="fixed-top-bar">
         <div class="avatar-dropdown-container">
             <div class="avatar-icon">
-                <span>{{ first_letter | default('U') }}</span>
+                <span>{{ first_letter }}</span>
             </div>
             <div class="dropdown-menu">
                 <a href="{{ url_for('user_details.customer_details') }}" class="dropdown-item">View Profile</a>
@@ -720,7 +855,7 @@
             {% endfor %}
             <button type="button" class="category-button {% if selected_category == 'Customized Dish' %}selected{% endif %}" data-category="Customized Dish">Customized Dish</button>
         </div>
-        <input type="hidden" name="category" id="selectedCategoryInput" value="{{ selected_category | default('All') }}">
+        <input type="hidden" name="category" id="selectedCategoryInput" value="{{ selected_category }}">
     </form>
 
     <div class="container mt-4">
@@ -742,7 +877,7 @@
             </div>
         {% else %}
             {% if ordered_menu.items()|length == 0 %}
-                <p class="text-center">No menu items available for this category.</p>
+                <p>No menu items available for this category.</p>
             {% else %}
                 {% for section, items in ordered_menu.items() %}
                     <h3>{{ section }}</h3>
@@ -774,25 +909,27 @@
                                                     <div class="toggle-details" data-item-name="{{ item.Name | default('Unnamed Item') }}">Show Details</div>
                                                 {% endif %}
                                             </div>
-                                            <div class="button-container" 
-                                                 data-item-name="{{ item.Name | default('Unnamed Item') }}" 
-                                                 data-item-price="{{ item.Price__c | default('0.00') }}" 
-                                                 data-item-image="{{ item.Image2__c | default(item.Image1__c) | default('/static/placeholder.jpg') }}"
-                                                 data-item-section="{{ item.Section__c | default(section) }}" 
-                                                 data-item-category="{{ selected_category }}">
-                                                {% if item.Section__c == 'Soft Drinks' %}
-                                                    <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) | default('/static/placeholder.jpg') }}', '{{ item.Description__c | default('No description') }}', '{{ item.IngredientsInfo__c | default('Not specified') }}', '{{ item.NutritionalInfo__c | default('Not available') }}', '{{ item.Allergens__c | default('None listed') }}', '{{ item.Section__c | default(section) }}', '{{ selected_category }}')">
-                                                        ADD
-                                                    </button>
-                                                    {% if item.Section__c not in ['Appetizer', 'Customized Dish', 'Soft Drinks'] %}
+                                            <div class="d-flex flex-column align-item-center justify-content-center">
+                                                <div class="button-container" 
+                                                     data-item-name="{{ item.Name | default('Unnamed Item') }}" 
+                                                     data-item-price="{{ item.Price__c | default('0.00') }}" 
+                                                     data-item-image="{{ item.Image2__c | default(item.Image1__c) | default('/static/placeholder.jpg') }}"
+                                                     data-item-section="{{ item.Section__c | default(section) }}" 
+                                                     data-item-category="{{ selected_category }}">
+                                                    {% if item.Section__c == 'Soft Drinks' %}
+                                                        <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.IngredientsInfo__c | default('Not specified') }}', '{{ item.NutritionalInfo__c | default('Not available') }}', '{{ item.Allergens__c | default('None listed') }}', '{{ item.Section__c | default(section) }}', '{{ selected_category }}')">
+                                                            ADD
+                                                        </button>
+                                                    {% endif %}
+                                                    {% if item.Section__c != 'Apetizer' and item.Section__c != 'Customized dish' and item.Section__c !='Soft Drinks' %}
                                                         <span class="customisable-text">Customisable</span>
                                                     {% endif %}
-                                                {% endif %}
+                                                </div>
                                             </div>
                                         </div>
                                     </div>
@@ -800,8 +937,8 @@
                                         <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>
+                                            <h6>Ingredientsinfo</h6>
+                                            <p>{{ item.Ingredientsinfo__c | default('Not specified') }}</p>
                                             <h6>Nutritional Info</h6>
                                             <p>{{ item.NutritionalInfo__c | default('Not available') }}</p>
                                             <h6>Allergens</h6>
@@ -823,20 +960,20 @@
         </a>
         <a href="{{ url_for('cart.cart') }}" class="btn btn-view-cart">
             <i class="bi bi-cart"></i> View Cart
-            <span class="cart-icon-badge" id="cart-item-count">{{ cart_item_count | default(0) }}</span>
+            <span class="cart-icon-badge" id="cart-item-count">{{ cart_item_count }}</span>
         </a>
     </div>
 
-    <!-- Item Modal -->
+    <!-- Modal for Item Details -->
     <div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered">
-            <div class="modal-content" style="border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.2);">
+            <div class="modal-content">
                 <div class="modal-header">
                     <h5 class="modal-title" id="itemModalLabel">Item Details</h5>
-                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
-                    <img id="modal-img" class="img-fluid rounded mb-3 d-block mx-auto" alt="Item Image">
+                    <img id="modal-img" class="img-fluid rounded mb-3 d-block mx-auto" alt="Item Image" style="max-height: 200px; object-fit: cover;">
                     <h5 id="modal-name" class="fw-bold text-center"></h5>
                     <p id="modal-price" class="text-muted text-center"></p>
                     <p id="modal-description" class="text-secondary"></p>
@@ -851,46 +988,46 @@
                     </div>
                     <div class="mt-4">
                         <h6>Custom Request</h6>
-                        <textarea id="modal-instructions" class="form-control" placeholder="Enter any special instructions here..." rows="2"></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">
-                    <div class="quantity-selector">
+                <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">-</button>
-                        <input type="text" class="form-control text-center" id="quantityInput" value="1" readonly>
+                        <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" id="addToCartBtn" onclick="addToCartFromModal()">Add to Cart</button>
+                    <button type="button" class="btn btn-primary" onclick="addToCartFromModal()">Add to Cart</button>
                 </div>
             </div>
         </div>
     </div>
 
-    <!-- Soft Drink Modal -->
+    <!-- Modal for Soft Drinks Quantity Selection -->
     <div class="modal fade" id="softDrinkModal" tabindex="-1" aria-labelledby="softDrinkModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content" style="border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.2);">
-                <div class="modal-header">
+                <div class="modal-header" style="background: linear-gradient(45deg, #0FAA39, #0D9232); color: white; border-radius: 15px 15px 0 0;">
                     <h5 class="modal-title" id="softDrinkModalLabel">Select Your Drink</h5>
                     <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
-                <div class="modal-body">
+                <div class="modal-body" style="padding: 20px;">
                     <div class="text-center mb-4">
                         <img id="soft-drink-image" class="img-fluid rounded mb-3" alt="Soft Drink Image" style="max-height: 150px; width: auto; object-fit: contain;">
                         <h5 id="soft-drink-name" class="fw-bold" style="color: #333;"></h5>
                         <p id="soft-drink-price" class="text-muted" style="font-size: 1.1rem;"></p>
                     </div>
                     <div class="d-flex justify-content-center align-items-center mb-4">
-                        <div class="quantity-selector">
-                            <button type="button" class="btn btn-outline-secondary" id="soft-drink-decrease">-</button>
-                            <input type="text" class="form-control text-center mx-2" id="soft-drink-quantity" value="1" readonly>
-                            <button type="button" class="btn btn-outline-secondary" id="soft-drink-increase">+</button>
+                        <div class="quantity-selector" style="background-color: #f8f9fa; padding: 10px; border-radius: 10px;">
+                            <button type="button" class="btn btn-outline-secondary" id="soft-drink-decrease" style="width: 40px; height: 40px;">-</button>
+                            <input type="text" class="form-control text-center mx-2" id="soft-drink-quantity" value="1" readonly style="width: 60px; font-weight: bold; font-size: 1.1rem;">
+                            <button type="button" class="btn btn-outline-secondary" id="soft-drink-increase" style="width: 40px; height: 40px;">+</button>
                         </div>
                     </div>
                 </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-primary" onclick="addSoftDrinkToCart()">Add to Cart</button>
+                <div class="modal-footer" style="border-top: none; padding: 0 20px 20px 20px; justify-content: center;">
+                    <button type="button" class="btn btn-primary" onclick="addSoftDrinkToCart()" style="width: 200px; padding: 12px; font-size: 1.1rem; background-color: #0FAA39; border-color: #0FAA39;">Add to Cart</button>
                 </div>
             </div>
         </div>
@@ -907,7 +1044,9 @@
 
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
     <script>
+        let isProcessingRequest = false;
         let currentSoftDrinkButton = null;
+
         const menuItems = [
             {% for section, items in ordered_menu.items() %}
                 {% for item in items %}
@@ -915,15 +1054,18 @@
                 {% endfor %}
             {% endfor %}
         ];
+
         const ingredientsList = [
             "Basmati Rice", "Bell Pepper", "Biryani Masala", "Butter", "Capsicum", "Cauliflower",
-            "Chickpea Flour (Besan)", "Chickpeas (Channa)", "Chili Powder", "Chili Sauce", "Coconut Milk",
-            "Coriander Powder", "Cornflour", "Cream", "Cumin Powder", "Cumin Seeds", "Curd (Yogurt)",
-            "Curry Leaves", "Fish (e.g., King Fish or Salmon)", "Fresh Coriander Leaves", "Garam Masala",
-            "Garlic", "Ghee (Clarified Butter)", "Ginger", "Ginger-Garlic Paste", "Goat Meat (Mutton)",
-            "Green Chilies", "Honey", "Kasuri Methi (dried fenugreek leaves)", "Lemon Juice", "Mango Puree",
-            "Mint Leaves", "Mixed Vegetables (Carrot, Peas, Potato, Cauliflower)", "Mustard Seeds", "Oil",
-            "Onion", "Paneer (Indian Cottage Cheese)", "Peas", "Potatoes", "Prawns", "Red Chili Powder",
+            "Chickpea Flour (Besan)", "Chickpea Flour (for batter)", "Chickpeas (Channa)", "Chili Powder",
+            "Chili Sauce", "Coconut Milk", "Coriander Powder", "Cornflour", "Cream", "Cumin Powder",
+            "Cumin Seeds", "Curd (Yogurt)", "Curry Leaves", "Fish (e.g., King Fish or Salmon)",
+            "Fresh Coriander Leaves", "Garam Masala", "Garlic", "Ghee (Clarified Butter)", "Ginger",
+            "Ginger-Garlic Paste", "Goat Meat (Mutton)", "Green Chilies", "Honey",
+            "Kasuri Methi (dried fenugreek leaves)", "Lemon Juice", "Mango Puree", "Mint Leaves",
+            "Mixed Vegetables (Carrot, Peas, Potato, Cauliflower)", "Mixed Vegetables (Carrot, Peas, Potato)",
+            "Mustard Seeds", "Mutton (Goat Meat)", "Oil", "Oil (for frying)", "Onion",
+            "Paneer (Indian Cottage Cheese)", "Peas", "Potatoes", "Prawns", "Red Chili Powder",
             "Rice Flour", "Saffron", "Salt", "Soy Sauce", "Spring Onion", "Tamarind (for sourness)",
             "Tomato Ketchup", "Tomatoes", "Turmeric Powder", "Vinegar", "Water", "Wheat Flour (for dough)",
             "Whole Wheat Flour", "Yogurt (Curd)"
@@ -931,13 +1073,13 @@
 
         function addToCartLocalStorage(payload) {
             let cart = JSON.parse(localStorage.getItem('cart')) || [];
-            const existingItem = cart.find(item =>
-                item.itemName === payload.itemName &&
-                item.instructions === payload.instructions &&
+            const existingItem = cart.find(item => 
+                item.itemName === payload.itemName && 
+                item.instructions === payload.instructions && 
                 JSON.stringify(item.addons) === JSON.stringify(payload.addons)
             );
             if (existingItem) {
-                existingItem.quantity += payload.quantity;
+                existingItem.quantity = payload.quantity;
             } else {
                 cart.push(payload);
             }
@@ -945,232 +1087,450 @@
             return cart;
         }
 
-        function updateCartUI(cart) {
-            let totalQuantity = cart.reduce((sum, item) => sum + (item.quantity || 0), 0);
-            const cartItemCount = document.getElementById('cart-item-count');
-            if (cartItemCount) {
-                cartItemCount.innerText = totalQuantity;
-                cartItemCount.style.display = totalQuantity > 0 ? 'inline-flex' : 'none';
+        function removeFromCartLocalStorage(itemName, quantityToRemove, instructions, addons) {
+            let cart = JSON.parse(localStorage.getItem('cart')) || [];
+            const itemIndex = cart.findIndex(item => 
+                item.itemName === itemName && 
+                item.instructions === instructions && 
+                JSON.stringify(item.addons) === JSON.stringify(addons)
+            );
+            if (itemIndex !== -1) {
+                if (quantityToRemove >= cart[itemIndex].quantity) {
+                    cart.splice(itemIndex, 1);
+                } else {
+                    cart[itemIndex].quantity -= quantityToRemove;
+                }
             }
+            localStorage.setItem('cart', JSON.stringify(cart));
+            return cart;
+        }
+
+        function getCartLocalStorage() {
+            return JSON.parse(localStorage.getItem('cart')) || [];
+        }
+
+        function debounce(func, wait) {
+            let timeout;
+            return function (...args) {
+                clearTimeout(timeout);
+                timeout = setTimeout(() => func.apply(this, args), wait);
+            };
         }
 
         function showSoftDrinkModal(button) {
             currentSoftDrinkButton = button;
             const buttonContainer = button.closest('.button-container');
-            document.getElementById('soft-drink-name').textContent = buttonContainer.getAttribute('data-item-name');
-            document.getElementById('soft-drink-price').textContent = `$${buttonContainer.getAttribute('data-item-price')}`;
+            const itemName = buttonContainer.getAttribute('data-item-name');
+            const itemPrice = buttonContainer.getAttribute('data-item-price');
+            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-quantity').value = '1';
-            document.getElementById('soft-drink-image').src = buttonContainer.getAttribute('data-item-image') || '/static/placeholder.jpg';
+            const softDrinkImage = document.getElementById('soft-drink-image');
+            softDrinkImage.src = itemImage || '/static/placeholder.jpg';
+            
             const modal = new bootstrap.Modal(document.getElementById('softDrinkModal'));
             modal.show();
         }
 
         function addSoftDrinkToCart() {
             if (!currentSoftDrinkButton) return;
+            
             const buttonContainer = currentSoftDrinkButton.closest('.button-container');
             const quantity = parseInt(document.getElementById('soft-drink-quantity').value) || 1;
+            
+            const itemName = buttonContainer.getAttribute('data-item-name');
+            const itemPrice = parseFloat(buttonContainer.getAttribute('data-item-price'));
+            const itemImage = buttonContainer.getAttribute('data-item-image');
+            const section = buttonContainer.getAttribute('data-item-section');
+            const selectedCategory = buttonContainer.getAttribute('data-item-category');
+            
             const cartPayload = {
-                itemName: buttonContainer.getAttribute('data-item-name'),
-                itemPrice: parseFloat(buttonContainer.getAttribute('data-item-price')) || 0,
-                itemImage: buttonContainer.getAttribute('data-item-image'),
-                section: buttonContainer.getAttribute('data-item-section'),
-                category: buttonContainer.getAttribute('data-item-category'),
+                itemName: itemName,
+                itemPrice: itemPrice,
+                itemImage: itemImage,
+                section: section,
+                category: selectedCategory,
                 addons: [],
                 instructions: '',
                 quantity: quantity
             };
+            
             fetch('/cart/add', {
                 method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
+                headers: {
+                    'Content-Type': 'application/json',
+                },
                 body: JSON.stringify(cartPayload)
             })
             .then(response => response.json())
             .then(data => {
-                updateCartUI(data.success ? data.cart : addToCartLocalStorage(cartPayload));
-                bootstrap.Modal.getInstance(document.getElementById('softDrinkModal')).hide();
+                if (data.success) {
+                    updateCartUI(data.cart);
+                    const modal = bootstrap.Modal.getInstance(document.getElementById('softDrinkModal'));
+                    modal.hide();
+                } else {
+                    console.error('Failed to add item to cart:', data.error);
+                    const cart = addToCartLocalStorage(cartPayload);
+                    updateCartUI(cart);
+                    const modal = bootstrap.Modal.getInstance(document.getElementById('softDrinkModal'));
+                    modal.hide();
+                }
             })
-            .catch(() => {
-                updateCartUI(addToCartLocalStorage(cartPayload));
-                bootstrap.Modal.getInstance(document.getElementById('softDrinkModal')).hide();
+            .catch(err => {
+                console.error('Error adding item to cart:', err);
+                const cart = addToCartLocalStorage(cartPayload);
+                updateCartUI(cart);
+                const modal = bootstrap.Modal.getInstance(document.getElementById('softDrinkModal'));
+                modal.hide();
             });
         }
 
-        document.addEventListener('DOMContentLoaded', () => {
-            // Avatar Dropdown
+        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';
+            }
+        }
+
+        document.addEventListener('DOMContentLoaded', function () {
             const avatarContainer = document.querySelector('.avatar-dropdown-container');
             const dropdownMenu = document.querySelector('.dropdown-menu');
-            avatarContainer.addEventListener('click', (e) => {
-                e.stopPropagation();
+            avatarContainer.addEventListener('click', function (event) {
+                event.stopPropagation();
                 dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
             });
-            document.addEventListener('click', (e) => {
-                if (!avatarContainer.contains(e.target)) dropdownMenu.style.display = 'none';
+            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';
+                });
             });
 
-            // Lazy Loading
-            const cardObserver = new IntersectionObserver((entries) => {
+            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');
-                        cardObserver.unobserve(entry.target);
+                        observer.unobserve(entry.target);
                     }
                 });
-            }, { threshold: 0.1 });
-            const videoObserver = new IntersectionObserver((entries) => {
+            }, {
+                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) video.querySelector('source').src = src;
-                        video.load();
+                        if (src && !video.querySelector('source[src="' + src + '"]')) {
+                            const source = video.querySelector('source');
+                            source.src = src;
+                            video.load();
+                        }
                         video.classList.add('loaded');
-                        videoObserver.unobserve(video);
+                        observer.unobserve(video);
                     }
                 });
-            }, { rootMargin: '200px' });
-            document.querySelectorAll('.menu-card').forEach(card => cardObserver.observe(card));
-            document.querySelectorAll('.menu-video').forEach(video => videoObserver.observe(video));
+            }, {
+                root: null,
+                rootMargin: '200px',
+                threshold: 0.01
+            });
+            menuCards.forEach(card => cardObserver.observe(card));
+            menuVideos.forEach(video => videoObserver.observe(video));
 
-            // Toggle Details
-            document.querySelectorAll('.toggle-details').forEach(link => {
-                link.addEventListener('click', () => {
-                    const detailsDiv = document.getElementById(`details-${link.getAttribute('data-item-name').replace(/ /g, '-')}`);
-                    detailsDiv.classList.toggle('show');
-                    link.innerText = detailsDiv.classList.contains('show') ? 'Hide Details' : 'Show 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 = otherDetails.previousElementSibling.querySelector('.toggle-details');
+                            if (otherLink) {
+                                otherLink.innerText = 'Show Details';
+                            }
+                        }
+                    });
+
+                    if (!isCurrentlyShown) {
+                        detailsDiv.classList.add('show');
+                        this.innerText = 'Hide Details';
+                    } else {
+                        detailsDiv.classList.remove('show');
+                        this.innerText = 'Show Details';
+                    }
                 });
             });
 
-            // Category Selection
             const categoryButtons = document.querySelectorAll('.category-button');
             const categoryForm = document.getElementById('categoryForm');
             const selectedCategoryInput = document.getElementById('selectedCategoryInput');
             if (!selectedCategoryInput.value) {
-                selectedCategoryInput.value = 'All';
+                selectedCategoryInput.value = "All";
                 document.querySelector('.category-button[data-category="All"]').classList.add('selected');
             }
             categoryButtons.forEach(button => {
-                button.addEventListener('click', () => {
+                button.addEventListener('click', function () {
                     categoryButtons.forEach(btn => btn.classList.remove('selected'));
-                    button.classList.add('selected');
-                    selectedCategoryInput.value = button.getAttribute('data-category');
+                    this.classList.add('selected');
+                    selectedCategoryInput.value = this.getAttribute('data-category');
                     categoryForm.submit();
                 });
             });
-
-            // Search Functionality
             const searchBar = document.getElementById('searchBar');
             const suggestionsContainer = document.getElementById('autocompleteSuggestions');
-            searchBar.addEventListener('input', () => {
-                const input = searchBar.value.trim().toLowerCase();
+            searchBar.addEventListener('input', function () {
+                const input = this.value.trim().toLowerCase();
                 suggestionsContainer.innerHTML = '';
-                suggestionsContainer.style.display = input && menuItems.some(item => item.toLowerCase().includes(input)) ? 'block' : 'none';
+                suggestionsContainer.style.display = 'none';
                 if (input) {
-                    menuItems.filter(item => item.toLowerCase().includes(input)).forEach(item => {
-                        const div = document.createElement('div');
-                        div.classList.add('suggestion-item');
-                        div.innerText = item;
-                        div.addEventListener('click', () => {
-                            searchBar.value = item;
-                            suggestionsContainer.style.display = 'none';
-                            filterMenu();
+                    const filteredItems = menuItems.filter(item => 
+                        item.toLowerCase().includes(input)
+                    );
+                    if (filteredItems.length > 0) {
+                        filteredItems.forEach(item => {
+                            const suggestionDiv = document.createElement('div');
+                            suggestionDiv.classList.add('suggestion-item');
+                            suggestionDiv.innerText = item;
+                            suggestionDiv.addEventListener('click', function () {
+                                searchBar.value = item;
+                                suggestionsContainer.style.display = 'none';
+                                filterMenu();
+                            });
+                            suggestionsContainer.appendChild(suggestionDiv);
                         });
-                        suggestionsContainer.appendChild(div);
-                    });
+                        suggestionsContainer.style.display = 'block';
+                    }
                 }
                 filterMenu();
             });
-            document.addEventListener('click', (e) => {
-                if (!searchBar.contains(e.target) && !suggestionsContainer.contains(e.target)) suggestionsContainer.style.display = 'none';
+            document.addEventListener('click', function (event) {
+                if (!searchBar.contains(event.target) && !suggestionsContainer.contains(event.target)) {
+                    suggestionsContainer.style.display = 'none';
+                }
             });
-
-            // Custom Dish Suggestions
             const descriptionTextarea = document.getElementById('custom-dish-description');
             const descriptionSuggestions = document.getElementById('descriptionSuggestions');
-            if (descriptionTextarea) {
-                descriptionTextarea.addEventListener('input', () => {
-                    const words = descriptionTextarea.value.trim().split(/,\s*/);
+            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);
+                            }
+                        });
+                    }
+                }
+                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 = lastWord && ingredientsList.some(ing => ing.toLowerCase().includes(lastWord)) ? 'block' : 'none';
+                    descriptionSuggestions.style.display = 'none';
+                    updateUsedIngredients();
                     if (lastWord) {
-                        ingredientsList.filter(ing => ing.toLowerCase().includes(lastWord)).forEach(ingredient => {
-                            const div = document.createElement('div');
-                            div.classList.add('suggestion-item');
-                            div.innerText = ingredient;
-                            div.addEventListener('click', () => {
-                                const base = descriptionTextarea.value.substring(0, descriptionTextarea.value.lastIndexOf(lastWord));
-                                descriptionTextarea.value = base + ingredient + ', ';
-                                descriptionSuggestions.style.display = 'none';
+                        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.appendChild(div);
-                        });
+                            descriptionSuggestions.style.display = 'block';
+                        }
+                    }
+                });
+                document.addEventListener('click', function (event) {
+                    if (!descriptionTextarea.contains(event.target) && !descriptionSuggestions.contains(event.target)) {
+                        descriptionSuggestions.style.display = 'none';
                     }
                 });
             }
-
-            // Initial Cart Load
             fetch('/cart/get')
-                .then(response => response.json())
-                .then(data => updateCartUI(data.success ? data.cart : JSON.parse(localStorage.getItem('cart') || '[]')))
-                .catch(() => updateCartUI(JSON.parse(localStorage.getItem('cart') || '[]')));
-
-            // Quantity Controls
-            const modals = ['itemModal', 'softDrinkModal'];
-            modals.forEach(modalId => {
-                const decreaseBtn = document.getElementById(modalId === 'itemModal' ? 'decreaseQuantity' : 'soft-drink-decrease');
-                const increaseBtn = document.getElementById(modalId === 'itemModal' ? 'increaseQuantity' : 'soft-drink-increase');
-                const quantityInput = document.getElementById(modalId === 'itemModal' ? 'quantityInput' : 'soft-drink-quantity');
-                decreaseBtn.addEventListener('click', () => {
-                    let qty = parseInt(quantityInput.value);
-                    if (qty > 1) quantityInput.value = qty - 1;
-                });
-                increaseBtn.addEventListener('click', () => {
-                    let qty = parseInt(quantityInput.value);
-                    if (qty < 99) quantityInput.value = qty + 1;
+                .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);
                 });
+            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 currentQuantity = parseInt(quantityInput.value);
+                if (currentQuantity > 1) {
+                    currentQuantity--;
+                    quantityInput.value = currentQuantity;
+                }
+            });
+            increaseBtn.addEventListener('click', function () {
+                let currentQuantity = parseInt(quantityInput.value);
+                currentQuantity++;
+                quantityInput.value = currentQuantity;
             });
 
-            // Microphone Functionality
+            const softDrinkDecreaseBtn = document.getElementById('soft-drink-decrease');
+            const softDrinkIncreaseBtn = document.getElementById('soft-drink-increase');
+            const softDrinkQuantityInput = document.getElementById('soft-drink-quantity');
+            
+            softDrinkDecreaseBtn.addEventListener('click', function() {
+                let currentQuantity = parseInt(softDrinkQuantityInput.value);
+                if (currentQuantity > 1) {
+                    currentQuantity--;
+                    softDrinkQuantityInput.value = currentQuantity;
+                }
+            });
+            
+            softDrinkIncreaseBtn.addEventListener('click', function() {
+                let currentQuantity = parseInt(softDrinkQuantityInput.value);
+                if (currentQuantity < 1000) {
+                    currentQuantity++;
+                    softDrinkQuantityInput.value = currentQuantity;
+                }
+            });
+
+            // Mic Popup Functionality
             const micIcon = document.getElementById('micIcon');
             const micPopup = document.getElementById('micPopup');
             const micPopupText = document.getElementById('micPopupText');
             const micPopupCancel = document.getElementById('micPopupCancel');
+            
             if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
                 const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
                 const recognition = new SpeechRecognition();
                 recognition.continuous = false;
                 recognition.interimResults = true;
                 recognition.lang = 'en-US';
-
+                
                 recognition.onstart = () => {
                     micIcon.classList.add('active');
                     micPopup.classList.add('active');
                     micPopupText.textContent = 'Listening...';
                 };
+                
                 recognition.onresult = (event) => {
+                    let interimTranscript = '';
                     let finalTranscript = '';
+                    
                     for (let i = event.resultIndex; i < event.results.length; i++) {
-                        if (event.results[i].isFinal) finalTranscript = event.results[i][0].transcript;
-                        else micPopupText.textContent = event.results[i][0].transcript;
+                        const transcript = event.results[i][0].transcript;
+                        if (event.results[i].isFinal) {
+                            finalTranscript += transcript;
+                        } else {
+                            interimTranscript += transcript;
+                        }
                     }
+                    
+                    // Display interim results
+                    if (interimTranscript) {
+                        micPopupText.textContent = interimTranscript;
+                    }
+                    
+                    // When we have a final result
                     if (finalTranscript) {
                         searchBar.value = finalTranscript.trim();
                         filterMenu();
                         micPopup.classList.remove('active');
-                        micIcon.classList.remove('active');
                     }
                 };
+                
                 recognition.onend = () => {
                     micIcon.classList.remove('active');
-                    micPopup.classList.remove('active');
+                    if (micPopup.classList.contains('active')) {
+                        // If still active, it means it ended unexpectedly
+                        setTimeout(() => {
+                            micPopup.classList.remove('active');
+                        }, 1000);
+                    }
                 };
+                
                 recognition.onerror = (event) => {
-                    micPopupText.textContent = `Error: ${event.error}`;
-                    setTimeout(() => micPopup.classList.remove('active'), 2000);
                     micIcon.classList.remove('active');
+                    micPopupText.textContent = 'Error: ' + event.error;
+                    setTimeout(() => {
+                        micPopup.classList.remove('active');
+                    }, 2000);
+                    console.error('Speech error:', event.error);
                 };
-                micIcon.addEventListener('click', () => recognition.start());
-                micPopupCancel.addEventListener('click', () => recognition.stop());
+                
+                micIcon.addEventListener('click', () => {
+                    try {
+                        recognition.start();
+                    } catch (e) {
+                        micPopupText.textContent = 'Error starting microphone';
+                        setTimeout(() => {
+                            micPopup.classList.remove('active');
+                        }, 2000);
+                        console.error('Recognition start error:', e);
+                    }
+                });
+                
+                micPopupCancel.addEventListener('click', () => {
+                    recognition.stop();
+                    micPopup.classList.remove('active');
+                    micIcon.classList.remove('active');
+                });
             } else {
                 micIcon.style.display = 'none';
             }
@@ -1183,122 +1543,172 @@
             let matchedSections = new Set();
             items.forEach(item => {
                 const itemName = item.querySelector('.card-title').innerText.toLowerCase();
-                const sectionTitle = item.closest('.row').previousElementSibling.innerText.toLowerCase();
-                if (itemName.includes(input) || sectionTitle.includes(input)) {
+                const itemSection = item.closest('.row').previousElementSibling.innerText.toLowerCase();
+                if (itemName.includes(input) || (itemSection && itemSection.includes(input))) {
                     item.style.display = 'block';
+                    item.classList.add('visible');
                     matchedSections.add(item.closest('.row'));
                 } else {
                     item.style.display = 'none';
                 }
             });
             sections.forEach(section => {
-                const row = section.nextElementSibling;
-                row.style.display = matchedSections.has(row) ? 'flex' : 'none';
-                section.style.display = matchedSections.has(row) ? 'block' : 'none';
+                const sectionRow = section.nextElementSibling;
+                if (matchedSections.has(sectionRow)) {
+                    section.style.display = 'block';
+                    sectionRow.style.display = 'flex';
+                } else {
+                    section.style.display = 'none';
+                    sectionRow.style.display = 'none';
+                }
             });
             if (!input) {
                 sections.forEach(section => {
                     section.style.display = 'block';
                     section.nextElementSibling.style.display = 'flex';
                 });
-                items.forEach(item => item.style.display = 'block');
+                items.forEach(item => {
+                    item.style.display = 'block';
+                    item.classList.add('visible');
+                });
             }
         }
 
-        function showItemDetails(name, price, image, description, ingredients, nutrition, allergens, section, category) {
+        function showItemDetails(name, price, image, description, ingredients, nutrition, allergens, section, selectedCategory) {
             document.getElementById('modal-name').innerText = name;
-            document.getElementById('modal-price').innerText = `$${parseFloat(price).toFixed(2)}`;
-            document.getElementById('modal-img').src = image || '/static/placeholder.jpg';
-            document.getElementById('modal-description').innerText = description;
-            document.getElementById('modal-ingredients').innerText = ingredients;
-            document.getElementById('modal-nutrition').innerText = nutrition;
-            document.getElementById('modal-allergens').innerText = allergens;
+            document.getElementById('modal-price').innerText = `$${price}`;
+            const modalImg = document.getElementById('modal-img');
+            modalImg.src = image || '/static/placeholder.jpg';
+            document.getElementById('modal-description').innerText = description || 'No description available.';
+            document.getElementById('modal-ingredients').innerText = ingredients || 'Not specified';
+            document.getElementById('modal-nutrition').innerText = nutrition || 'Not available';
+            document.getElementById('modal-allergens').innerText = allergens || 'None listed';
+            document.getElementById('addons-list').innerHTML = 'Loading customization options...';
             document.getElementById('modal-instructions').value = '';
-            document.getElementById('quantityInput').value = '1';
-            document.getElementById('modal-section').setAttribute('data-section', section);
-            document.getElementById('modal-section').setAttribute('data-category', category);
-
-            const addonsList = document.getElementById('addons-list');
-            const addToCartBtn = document.getElementById('addToCartBtn');
-            addonsList.innerHTML = 'Loading customization options...';
-            addToCartBtn.disabled = true;
+            const modalSectionEl = document.getElementById('modal-section');
+            modalSectionEl.setAttribute('data-section', section);
+            modalSectionEl.setAttribute('data-category', selectedCategory);
+            document.getElementById('quantityInput').value = 1;
 
             fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
                 .then(response => response.json())
                 .then(data => {
+                    const addonsList = document.getElementById('addons-list');
                     addonsList.innerHTML = '';
-                    if (data.success && data.addons && data.addons.length > 0) {
-                        data.addons.forEach(addon => {
-                            const sectionDiv = document.createElement('div');
-                            sectionDiv.classList.add('addon-section');
-                            sectionDiv.innerHTML = `<h6>${addon.name}</h6>`;
-                            addon.options.forEach((option, index) => {
-                                const optionId = `addon-${addon.name.replace(/\s+/g, '-')}-${index}`;
-                                const div = document.createElement('div');
-                                div.classList.add('form-check');
-                                div.innerHTML = `
-                                    <input type="checkbox" class="form-check-input" id="${optionId}" value="${option}" data-name="${option}" data-group="${addon.name}" data-price="${addon.extra_charge ? addon.extra_charge_amount : 0}">
-                                    <label class="form-check-label" for="${optionId}">${option} ${addon.extra_charge ? `($${addon.extra_charge_amount})` : ''}</label>
-                                `;
-                                sectionDiv.appendChild(div);
-                            });
-                            addonsList.appendChild(sectionDiv);
-                        });
-                    } else {
+                    if (!data.success || !data.addons || data.addons.length === 0) {
                         addonsList.innerHTML = '<p>No customization options available.</p>';
+                        return;
                     }
-                    addToCartBtn.disabled = false;
+                    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');
+                        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}">
+                                <label class="form-check-label" for="${optionId}">
+                                    ${option} ${addon.extra_charge ? `($${addon.extra_charge_amount})` : ''}
+                                </label>
+                            `;
+                            optionsContainer.appendChild(listItem);
+                        });
+                        sectionDiv.appendChild(optionsContainer);
+                        addonsList.appendChild(sectionDiv);
+                    });
                 })
-                .catch(() => {
-                    addonsList.innerHTML = '<p>Failed to load customization options.</p>';
-                    addToCartBtn.disabled = false;
+                .catch(err => {
+                    console.error('Error fetching add-ons:', err);
+                    document.getElementById('addons-list').innerHTML = '<p>Error loading customization options.</p>';
                 });
         }
 
-        document.addEventListener('click', (e) => {
-            if (e.target.classList.contains('form-check-input')) {
-                const group = e.target.getAttribute('data-group');
-                const multiSelectGroups = ["Extra Toppings", "Choose Raita/Sides", "Select Dip/Sauce", "Extra Add-ons", "Make it a Combo", "Beverages", "Sauces"];
-                if (!multiSelectGroups.includes(group)) {
-                    document.querySelectorAll(`.form-check-input[data-group="${group}"]`).forEach(cb => {
-                        if (cb !== e.target) cb.checked = false;
-                    });
-                }
+        document.addEventListener('click', function(event) {
+            if (event.target.classList.contains('addon-option')) {
+                handleAddonClick(event.target);
             }
         });
 
+        function handleAddonClick(checkbox) {
+            const groupName = checkbox.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) {
+                const checkboxes = document.querySelectorAll(`.addon-option[data-group="${groupName}"]`);
+                checkboxes.forEach(otherCheckbox => {
+                    if (otherCheckbox !== checkbox) {
+                        otherCheckbox.checked = false;
+                    }
+                });
+            }
+        }
+
         function addToCartFromModal() {
-            const payload = {
-                itemName: document.getElementById('modal-name').innerText,
-                itemPrice: parseFloat(document.getElementById('modal-price').innerText.replace('$', '')) || 0,
-                itemImage: document.getElementById('modal-img').src,
-                section: document.getElementById('modal-section').getAttribute('data-section'),
-                category: document.getElementById('modal-section').getAttribute('data-category'),
-                addons: Array.from(document.querySelectorAll('#addons-list .form-check-input:checked')).map(cb => ({
-                    name: cb.getAttribute('data-name'),
-                    price: parseFloat(cb.getAttribute('data-price')) || 0
-                })),
-                instructions: document.getElementById('modal-instructions').value,
-                quantity: parseInt(document.getElementById('quantityInput').value) || 1
+            const itemName = document.getElementById('modal-name').innerText;
+            let itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
+            if (isNaN(itemPrice)) {
+                alert('Invalid price for the item. Please check the item details.');
+                return;
+            }
+            const itemImage = document.getElementById('modal-img').src;
+            const modalSectionEl = document.getElementById('modal-section');
+            const section = modalSectionEl.getAttribute('data-section');
+            const selectedCategory = modalSectionEl.getAttribute('data-category');
+            if (!itemName || !itemPrice || !section || !itemImage) {
+                console.error('Missing data for cart item:', { itemName, itemPrice, section, itemImage });
+                return;
+            }
+            const selectedAddOns = Array.from(
+                document.querySelectorAll('#addons-list input[type="checkbox"]:checked')
+            ).map(addon => ({
+                name: addon.getAttribute('data-name') || 'Default Name',
+                price: parseFloat(addon.getAttribute('data-price') || 0)
+            }));
+            const quantity = parseInt(document.getElementById('quantityInput').value) || 1;
+            const instructions = document.getElementById('modal-instructions').value;
+            const cartPayload = {
+                itemName: itemName,
+                itemPrice: itemPrice,
+                itemImage: itemImage,
+                section: section,
+                category: selectedCategory,
+                addons: selectedAddOns,
+                instructions: instructions,
+                quantity: quantity
             };
+            
             fetch('/cart/add', {
                 method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(payload)
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(cartPayload)
             })
             .then(response => response.json())
             .then(data => {
                 if (data.success) {
+                    alert('Item added to cart successfully!');
                     updateCartUI(data.cart);
-                    bootstrap.Modal.getInstance(document.getElementById('itemModal')).hide();
+                    const modal = document.getElementById('itemModal');
+                    const modalInstance = bootstrap.Modal.getInstance(modal);
+                    modalInstance.hide();
                 } else {
-                    updateCartUI(addToCartLocalStorage(payload));
-                    bootstrap.Modal.getInstance(document.getElementById('itemModal')).hide();
+                    console.error('Failed to add item to cart:', data.error);
+                    alert(data.error || 'Failed to add item to cart.');
                 }
             })
-            .catch(() => {
-                updateCartUI(addToCartLocalStorage(payload));
-                bootstrap.Modal.getInstance(document.getElementById('itemModal')).hide();
+            .catch(err => {
+                console.error('Error adding item to cart:', err);
+                const cart = addToCartLocalStorage(cartPayload);
+                updateCartUI(cart);
+                const modal = document.getElementById('itemModal');
+                const modalInstance = bootstrap.Modal.getInstance(modal);
+                modalInstance.hide();
             });
         }
     </script>