Update templates/menu.html

templates/menu.html

@@ -36,6 +36,10 @@
             display: flex;
             flex-direction: column;
             box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+            transition: transform 0.2s ease;
+        }
+        .menu-card:hover {
+            transform: translateY(-5px);
         }
         .menu-card.highlighted {
             border: 3px solid #0FAA39;
@@ -78,6 +82,7 @@
             transition: opacity 0.3s ease;
         }
         .menu-image.hidden {
+            W
             opacity: 0;
         }
         .menu-card .card-body .card-title {
@@ -93,18 +98,19 @@
             margin-bottom: 5px;
         }
         .addbutton .btn {
-            background-color: #28a745;
+            background-color: #0FAA39;
             color: white;
             padding: 10px 20px;
             font-size: 16px;
             font-weight: bold;
-            border-radius: 5px;
+            border-radius: 8px;
             border: none;
-            transition: background-color 0.3s ease;
+            transition: background-color 0.3s ease, transform 0.2s ease;
             margin-left: 13px;
         }
         .addbutton .btn:hover {
-            background-color: #218838;
+            background-color: #0D9232;
+            transform: scale(1.05);
         }
         .button-container {
             display: flex;
@@ -133,11 +139,12 @@
             align-items: center;
             justify-content: center;
             padding: 0;
-            transition: background-color 0.3s ease;
+            transition: background-color 0.3s ease, transform 0.2s ease;
         }
         .btn-primary:hover {
             background-color: #0D9232;
             border-color: #0D9232;
+            transform: scale(1.05);
         }
         .btn-primary:active,
         .btn-primary:focus {
@@ -236,6 +243,7 @@
             justify-content: space-between;
             align-items: center;
             z-index: 1000;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
         }
         .search-bar-container {
             position: absolute;
@@ -257,13 +265,14 @@
             background-color: #fff;
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
             outline: none;
+            transition: box-shadow 0.2s ease;
+        }
+        .search-bar-container input:focus {
+            box-shadow: 0 0 0 3px rgba(255, 160, 122, 0.3);
         }
         .search-bar-container input::placeholder {
             color: #888;
         }
-        .search-bar-container input:focus {
-            border-bottom: 2px solid #FFA07A;
-        }
         .search-icon {
             position: absolute;
             left: 15px;
@@ -276,10 +285,15 @@
             font-size: 18px;
             color: #888;
             cursor: pointer;
-            transition: color 0.3s ease;
+            transition: color 0.3s ease, transform 0.2s ease;
+        }
+        .mic-icon:hover {
+            color: #DC3545;
+            transform: scale(1.1);
         }
         .mic-icon.active {
             color: #DC3545;
+            animation: pulseMic 1.5s infinite;
         }
         /* Addon Section */
         .addon-section {
@@ -401,7 +415,7 @@
         #softDrinkModal .modal-content {
             border-radius: 12px;
             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-            background-color: #fff;
+            background: linear-gradient(180deg, #ffffff, #f8f9fa);
             overflow: hidden;
         }
         #softDrinkModal .modal-header {
@@ -428,6 +442,10 @@
             border-radius: 8px;
             margin-bottom: 15px;
             box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+            transition: transform 0.3s ease;
+        }
+        #softDrinkModal .modal-body img:hover {
+            transform: scale(1.05);
         }
         #softDrinkModal .modal-body h5 {
             font-size: 1.4rem;
@@ -455,26 +473,27 @@
             margin-bottom: 20px;
         }
         #softDrinkModal .quantity-controls .btn {
-            width: 40px;
-            height: 40px;
+            width: 48px;
+            height: 48px;
             border-radius: 50%;
             padding: 0;
-            font-size: 1.2rem;
-            line-height: 40px;
+            font-size: 1.4rem;
+            line-height: 48px;
             text-align: center;
             background-color: #e9ecef;
             border: none;
             color: #333;
-            transition: background-color 0.2s ease;
+            transition: background-color 0.2s ease, transform 0.2s ease;
         }
         #softDrinkModal .quantity-controls .btn:hover {
             background-color: #d1d4d7;
+            transform: scale(1.1);
         }
         #softDrinkModal .quantity-controls input {
             width: 60px;
-            height: 40px;
+            height: 48px;
             text-align: center;
-            font-size: 1.1rem;
+            font-size: 1.2rem;
             font-weight: 600;
             border: 1px solid #ced4da;
             border-radius: 6px;
@@ -489,18 +508,59 @@
         #softDrinkModal .modal-footer .btn-primary {
             background-color: #0FAA39;
             border-color: #0FAA39;
-            padding: 10px 30px;
+            padding: 12px 40px;
             text-align: center;
-            font-size: 1rem;
+            font-size: 1.1rem;
             font-weight: 600;
             border-radius: 8px;
-            transition: background-color 0.2s ease;
+            transition: background-color 0.2s ease, transform 0.2s ease;
             width: auto;
         }
         #softDrinkModal .modal-footer .btn-primary:hover {
             background-color: #0D9232;
+            transform: scale(1.05);
+        }
+        /* Item Modal Styling */
+        #itemModal .modal-dialog {
+            max-width: 500px;
+            margin: 1.75rem auto;
+            animation: fadeInModal 0.3s ease-out;
+        }
+        #itemModal .modal-content {
+            border-radius: 12px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            background: linear-gradient(180deg, #ffffff, #f8f9fa);
+            overflow: hidden;
+        }
+        #itemModal .modal-header {
+            background: linear-gradient(45deg, #FFA07A, #FFB347);
+            border-top-left-radius: 12px;
+            border-top-right-radius: 12px;
+            padding: 12px 15px;
+            border-bottom: none;
+        }
+        #itemModal .modal-title {
+            font-size: 1.3rem;
+            font-weight: 600;
+            color: #fff;
+        }
+        #itemModal .modal-body {
+            padding: 20px;
+        }
+        #itemModal .modal-body img {
+            width: 200px;
+            height: 200px;
+            object-fit: cover;
+            aspect-ratio: 1/1;
+            border-radius: 8px;
+            margin: 0 auto 15px;
+            display: block;
+            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+            transition: transform 0.3s ease;
+        }
+        #itemModal .modal-body img:hover {
+            transform: scale(1.05);
         }
-        /* Item Modal Quantity Controls */
         #itemModal .quantity-controls {
             display: flex;
             justify-content: center;
@@ -509,31 +569,45 @@
             margin-bottom: 20px;
         }
         #itemModal .quantity-controls .btn {
-            width: 40px;
-            height: 40px;
+            width: 48px;
+            height: 48px;
             border-radius: 50%;
             padding: 0;
-            font-size: 1.2rem;
-            line-height: 40px;
+            font-size: 1.4rem;
+            line-height: 48px;
             text-align: center;
             background-color: #e9ecef;
             border: none;
             color: #333;
-            transition: background-color 0.2s ease;
+            transition: background-color 0.2s ease, transform 0.2s ease;
         }
         #itemModal .quantity-controls .btn:hover {
             background-color: #d1d4d7;
+            transform: scale(1.1);
         }
         #itemModal .quantity-controls input {
             width: 60px;
-            height: 40px;
+            height: 48px;
             text-align: center;
-            font-size: 1.1rem;
+            font-size: 1.2rem;
             font-weight: 600;
             border: 1px solid #ced4da;
             border-radius: 6px;
             background-color: #f8f9fa;
         }
+        #itemModal .modal-footer .btn-primary {
+            background-color: #0FAA39;
+            border-color: #0FAA39;
+            padding: 12px 40px;
+            font-size: 1.1rem;
+            font-weight: 600;
+            border-radius: 8px;
+            transition: background-color 0.2s ease, transform 0.2s ease;
+        }
+        #itemModal .modal-footer .btn-primary:hover {
+            background-color: #0D9232;
+            transform: scale(1.05);
+        }
         /* Filter Form Styling */
         #filter-form {
             display: flex;
@@ -602,7 +676,7 @@
         #micModal .modal-content {
             border-radius: 12px;
             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-            background-color: #fff;
+            background: linear-gradient(180deg, #ffffff, #f8f9fa);
             text-align: center;
         }
         #micModal .modal-header {
@@ -625,12 +699,26 @@
             align-items: center;
             gap: 15px;
             min-height: 200px;
+            position: relative;
         }
         #micModal .modal-body i#mic-icon-animation {
             font-size: 2.5rem;
             color: #DC3545;
+            position: relative;
             animation: pulse 2s infinite;
         }
+        #micModal .modal-body i#mic-icon-animation::before {
+            content: '';
+            position: absolute;
+            top: -10px;
+            left: -10px;
+            right: -10px;
+            bottom: -10px;
+            border: 2px solid #DC3545;
+            border-radius: 50%;
+            opacity: 0.5;
+            animation: ripple 2s infinite;
+        }
         #micModal .modal-body p#mic-status {
             font-size: 1.1rem;
             color: #333;
@@ -644,6 +732,14 @@
             border-radius: 8px;
             margin-bottom: 10px;
             box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+            animation: fadeIn 0.3s ease;
+        }
+        #micModal .modal-body #mic-item-name {
+            font-size: 1.2rem;
+            font-weight: 600;
+            color: #333;
+            margin-bottom: 10px;
+            animation: fadeIn 0.3s ease;
         }
         #micModal .modal-body #mic-item-details.show {
             animation: fadeIn 0.3s ease;
@@ -659,11 +755,63 @@
             padding: 10px 20px;
             font-size: 1rem;
             border-radius: 8px;
+            transition: background-color 0.2s ease, transform 0.2s ease;
         }
         #micModal .modal-footer .btn-secondary:hover {
             background-color: #5a6268;
-            border-color: #5a6268;
+            transform: scale(1.05);
+        }
+        /* Search Suggestions Styling */
+        .autocomplete-suggestions {
+            position: absolute;
+            top: 100%;
+            left: 0;
+            right: 0;
+            background-color: #fff;
+            border: 1px solid #ced4da;
+            border-radius: 8px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            max-height: 200px;
+            overflow-y: auto;
+            z-index: 1000;
+            display: none;
+            animation: slideDown 0.3s ease-out;
+        }
+        .autocomplete-suggestion {
+            display: flex;
+            align-items: center;
+            padding: 8px 12px;
+            cursor: pointer;
+            font-size: 0.9rem;
+            color: #333;
+            transition: background-color 0.2s ease, transform 0.2s ease;
+        }
+        .autocomplete-suggestion:hover {
+            background-color: #e6f4ea;
+            transform: translateX(5px);
+        }
+        .autocomplete-suggestion img {
+            width: 40px;
+            height: 40px;
+            object-fit: cover;
+            border-radius: 4px;
+            margin-right: 10px;
+        }
+        .autocomplete-suggestions::-webkit-scrollbar {
+            width: 6px;
+        }
+        .autocomplete-suggestions::-webkit-scrollbar-track {
+            background: #f1f1f1;
+            border-radius: 10px;
+        }
+        .autocomplete-suggestions::-webkit-scrollbar-thumb {
+            background: #0FAA39;
+            border-radius: 10px;
         }
+        .autocomplete-suggestions::-webkit-scrollbar-thumb:hover {
+            background: #0D9232;
+        }
+        /* Animations */
         @keyframes checkmark {
             from { transform: scale(0); }
             to { transform: scale(1); }
@@ -685,6 +833,17 @@
             50% { transform: scale(1.2); }
             100% { transform: scale(1); }
         }
+        @keyframes pulseMic {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.15); }
+            100% { transform: scale(1); }
+        }
+        @keyframes ripple {
+            0% { transform: scale(0.8); opacity: 0.5; }
+            50% { transform: scale(1.2); opacity: 0.2; }
+            100% { transform: scale(1.6); opacity: 0; }
+        }
+        /* Modal General Styles */
         .modal-header {
             padding: 10px 15px;
         }
@@ -905,6 +1064,10 @@
             text-align: center;
             min-width: 0;
             white-space: nowrap;
+            transition: transform 0.2s ease;
+        }
+        .bottom-action-bar .btn:hover {
+            transform: scale(1.05);
         }
         .bottom-action-bar .btn-order-history {
             background: linear-gradient(45deg, #FF8C00, #32CD32);
@@ -913,7 +1076,6 @@
         }
         .bottom-action-bar .btn-order-history:hover {
             background: linear-gradient(45deg, #FF4500, #228B22);
-            border-color: transparent;
             color: #000000;
         }
         .bottom-action-bar .btn-view-cart {
@@ -923,7 +1085,6 @@
         }
         .bottom-action-bar .btn-view-cart:hover {
             background-color: #0D9232;
-            border-color: #0D9232;
             color: white;
         }
         .cart-icon-badge {
@@ -937,6 +1098,7 @@
             justify-content: center;
             font-size: 12px;
             margin-left: 8px;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
         }
         /* Mobile-Specific Styles */
         @media (max-width: 576px) {
@@ -1156,38 +1318,45 @@
                 margin-bottom: 15px;
             }
             #softDrinkModal .quantity-controls .btn {
-                width: 32px;
-                height: 32px;
-                font-size: 1rem;
-                line-height: 32px;
+                width: 40px;
+                height: 40px;
+                font-size: 1.2rem;
+                line-height: 40px;
             }
             #softDrinkModal .quantity-controls input {
                 width: 50px;
-                height: 32px;
-                font-size: 0.9rem;
+                height: 40px;
+                font-size: 1rem;
             }
             #softDrinkModal .modal-footer {
                 padding: 10px;
             }
             #softDrinkModal .modal-footer .btn-primary {
-                padding: 8px 20px;
-                font-size: 0.9rem;
+                padding: 10px 30px;
+                font-size: 1rem;
             }
             /* Mobile-Specific Item Modal Styles */
+            #itemModal .modal-dialog {
+                max-width: 90%;
+            }
+            #itemModal .modal-body img {
+                width: 150px;
+                height: 150px;
+            }
             #itemModal .quantity-controls .btn {
-                width: 32px;
-                height: 32px;
-                font-size: 1rem;
-                line-height: 32px;
+                width: 40px;
+                height: 40px;
+                font-size: 1.2rem;
+                line-height: 40px;
             }
             #itemModal .quantity-controls input {
                 width: 50px;
-                height: 32px;
-                font-size: 0.9rem;
+                height: 40px;
+                font-size: 1rem;
             }
             #itemModal .modal-footer .btn-primary {
-                padding: 8px 15px;
-                font-size: 0.9rem;
+                padding: 10px 30px;
+                font-size: 1rem;
             }
             /* Mobile-Specific Filter Form Styles */
             #filter-form {
@@ -1238,43 +1407,10 @@
                 padding: 8px 15px;
                 font-size: 0.9rem;
             }
-        }
-        .autocomplete-suggestions {
-            position: absolute;
-            top: 100%;
-            left: 0;
-            right: 0;
-            background-color: #fff;
-            border: 1px solid #ced4da;
-            border-radius: 4px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-            max-height: 150px;
-            overflow-y: auto;
-            z-index: 1000;
-            display: none;
-        }
-        .autocomplete-suggestion {
-            padding: 8px 12px;
-            cursor: pointer;
-            font-size: 0.9rem;
-            color: #333;
-            transition: background-color 0.2s ease;
-        }
-        .autocomplete-suggestion:hover {
-            background-color: #e6f4ea;
-        }
-        .autocomplete-suggestions::-webkit-scrollbar {
-            width: 6px;
-        }
-        .autocomplete-suggestions::-webkit-scrollbar-track {
-            background: #f1f1f1;
-        }
-        .autocomplete-suggestions::-webkit-scrollbar-thumb {
-            background: #0FAA39;
-            border-radius: 10px;
-        }
-        .autocomplete-suggestions::-webkit-scrollbar-thumb:hover {
-            background: #0D9232;
+            .autocomplete-suggestion img {
+                width: 32px;
+                height: 32px;
+            }
         }
     </style>
 </head>
@@ -1334,7 +1470,7 @@
                         <div id="descriptionSuggestions" class="autocomplete-suggestions"></div>
                     </div>
                     <button type="submit" class="btn btn-primary">Submit Custom Dish</button>
-                    </form>
+                </form>
             </div>
         {% else %}
             {% if ordered_menu.items()|length == 0 %}
@@ -1389,7 +1525,10 @@
                                                         <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 }}')">
+                                                                onclick="showItemDetails('{{ item.Name | default('Unnamed Item') }}', '{{ item.Price__c | default('0.00') }}', '{{ item.Image 🙂
+
+System: ```javascript
+2__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' %}
@@ -1713,126 +1852,84 @@
                     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');
-                        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);
-                        });
-                        sectionDiv.appendChild(optionsContainer);
-                        addonsList.appendChild(sectionDiv);
-                    });
-                    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', 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;
-                                    }
-                                });
-                            }
-                        });
-                    });
-                    if (window.most_common_addons && window.most_common_addons.length > 0) {
-                        const checkboxes = document.querySelectorAll('.addon-option');
-                        const categorySelection = {
-                            "Select Spice Level": null,
-                            "Choose Spice Level": null,
-                            "Raita/Sides": [],
-                        };
-                        for (let spice of window.most_common_addons) {
-                            const isSpiceLevel = ["Mild", "Medium", "Spicy", "Extra Spicy"].includes(spice);
-                            if (isSpiceLevel) {
-                                checkboxes.forEach(checkbox => {
-                                    const checkboxName = checkbox.getAttribute('data-name').trim();
-                                    const checkboxGroup = checkbox.getAttribute('data-group');
-                                    if ((checkboxGroup === "Select Spice Level" || checkboxGroup === "Choose Spice Level") &&
-                                        checkboxName === spice && categorySelection[checkboxGroup] === null) {
-                                        console.log(`Pre-selecting highest-count spice level: ${checkboxName}`);
-                                        checkbox.checked = true;
-                                        categorySelection[checkboxGroup] = checkboxName;
-                                    }
-                                });
-                                if (categorySelection["Select Spice Level"] || categorySelection["Choose Spice Level"]) break;
-                            }
-                        }
-                        checkboxes.forEach(checkbox => {
-                            const checkboxName = checkbox.getAttribute('data-name').trim();
-                            const checkboxGroup = checkbox.getAttribute('data-group');
-                            if (checkboxGroup === "Raita/Sides" && window.most_common_addons.includes(checkboxName)) {
-                                console.log(`Pre-selecting add-on: ${checkboxName}`);
-                                checkbox.checked = true;
-                                categorySelection["Raita/Sides"].push(checkboxName);
-                            }
+                        const noAddonsMessage = document.createElement('p');
+                        noAddonsMessage.textContent = 'No add-ons available for this item.';
+                        noAddonsMessage.className = 'text-muted';
+                        addonsList.appendChild(noAddonsMessage);
+                    } else {
+                        data.addons.forEach(addon => {
+                            const addonSection = document.createElement('div');
+                            addonSection.className = 'addon-section';
+                            const addonHeader = document.createElement('h6');
+                            addonHeader.textContent = addon.section;
+                            addonHeader.setAttribute('data-bs-toggle', 'collapse');
+                            addonHeader.setAttribute('data-bs-target', `#addon-collapse-${addon.section.replace(/\s+/g, '-')}`);
+                            addonHeader.setAttribute('aria-expanded', 'true');
+                            addonHeader.setAttribute('aria-controls', `addon-collapse-${addon.section.replace(/\s+/g, '-')}`);
+                            addonSection.appendChild(addonHeader);
+                            const addonCollapse = document.createElement('div');
+                            addonCollapse.id = `addon-collapse-${addon.section.replace(/\s+/g, '-')}`;
+                            addonCollapse.className = 'addon-options collapse show';
+                            addon.items.forEach(item => {
+                                const addonItem = document.createElement('div');
+                                addonItem.className = 'form-check';
+                                const input = document.createElement('input');
+                                input.type = 'checkbox';
+                                input.className = 'form-check-input';
+                                input.id = `addon-${item.name.replace(/\s+/g, '-')}`;
+                                input.setAttribute('data-price', item.price || 0);
+                                input.setAttribute('data-name', item.name);
+                                input.setAttribute('data-section', addon.section);
+                                input.addEventListener('change', updateModalPrice);
+                                const label = document.createElement('label');
+                                label.className = 'form-check-label';
+                                label.htmlFor = `addon-${item.name.replace(/\s+/g, '-')}`;
+                                label.textContent = item.name;
+                                if (item.price > 0) {
+                                    const priceSpan = document.createElement('span');
+                                    priceSpan.className = 'extra-charge';
+                                    priceSpan.textContent = `+$${parseFloat(item.price).toFixed(2)}`;
+                                    label.appendChild(priceSpan);
+                                }
+                                addonItem.appendChild(label);
+                                addonItem.appendChild(input);
+                                addonCollapse.appendChild(addonItem);
+                            });
+                            addonSection.appendChild(addonCollapse);
+                            addonsList.appendChild(addonSection);
                         });
                     }
                 })
                 .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>';
+                    console.error('Error fetching addons:', err);
+                    const addonsList = document.getElementById('addons-list');
+                    addonsList.classList.remove('addon-loading');
+                    addonsList.innerHTML = '<p class="text-muted">Failed to load add-ons.</p>';
                 });
         }
         function addToCartFromModal() {
             if (isProcessingRequest) return;
             isProcessingRequest = true;
-            const modalSectionEl = document.getElementById('modal-section');
-            const section = modalSectionEl.getAttribute('data-section');
-            const selectedCategory = modalSectionEl.getAttribute('data-category');
             const itemName = document.getElementById('modal-name').innerText;
-            const itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', '')) || 0;
-            const itemImage = document.getElementById('modal-img').src;
             const quantity = parseInt(document.getElementById('quantityInput').value) || 1;
             const instructions = document.getElementById('modal-instructions').value;
             const selectedAddOns = Array.from(
                 document.querySelectorAll('#addons-list input[type="checkbox"]:checked')
             ).map(addon => ({
+                section: addon.getAttribute('data-section'),
                 name: addon.getAttribute('data-name'),
                 price: parseFloat(addon.getAttribute('data-price')) || 0
             }));
-            if (!itemName || isNaN(itemPrice) || !section || !itemImage || quantity < 1) {
-                console.error('Invalid cart item data:', { itemName, itemPrice, section, itemImage, quantity });
-                alert('Invalid item data. Please try again.');
-                isProcessingRequest = false;
-                return;
-            }
+            const modalSectionEl = document.getElementById('modal-section');
+            const section = modalSectionEl.getAttribute('data-section');
+            const selectedCategory = modalSectionEl.getAttribute('data-category');
+            const totalAddOnPrice = selectedAddOns.reduce((sum, addon) => sum + addon.price, 0);
+            const totalPrice = (baseItemPrice + totalAddOnPrice);
+            const modalImg = document.getElementById('modal-img').src;
             const cartPayload = {
                 itemName: itemName,
-                itemPrice: itemPrice,
-                itemImage: itemImage,
+                itemPrice: totalPrice,
+                itemImage: modalImg,
                 section: section,
                 category: selectedCategory,
                 addons: selectedAddOns,
@@ -1848,6 +1945,7 @@
             })
             .then(response => response.json())
             .then(data => {
+                isProcessingRequest = false;
                 if (data.success) {
                     updateCartUI(data.cart);
                     const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
@@ -1861,38 +1959,28 @@
                 }
             })
             .catch(err => {
+                isProcessingRequest = false;
                 console.error('Error adding item to cart:', err);
                 const cart = addToCartLocalStorage(cartPayload);
                 updateCartUI(cart);
                 const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
                 modal.hide();
-            })
-            .finally(() => {
-                isProcessingRequest = false;
             });
         }
-        function handleToggle(source) {
-            const form = document.getElementById("filter-form");
-            const veg = document.getElementById("veg-toggle");
-            const custom = document.getElementById("category-CustomizedDish");
-            if (source === 'veg') {
-                if (veg.checked) {
-                    custom.checked = false;
-                }
-            } else if (source === 'custom') {
-                if (custom.checked) {
-                    veg.checked = false;
-                }
-            }
-            if (!custom.checked && !veg.checked) {
-                custom.checked = false;
-            }
-            form.submit();
+        function resetMicModal() {
+            const micStatus = document.getElementById('mic-status');
+            const micItemDetails = document.getElementById('mic-item-details');
+            const micItemName = document.getElementById('mic-item-name');
+            const micItemImage = document.getElementById('mic-item-image');
+            micStatus.textContent = 'Say the name of a menu item...';
+            micStatus.style.display = 'block';
+            micItemDetails.style.display = 'none';
+            micItemName.textContent = '';
+            micItemImage.src = '/static/placeholder.jpg';
         }
         function stopSpeechRecognition() {
             if (recognition) {
                 recognition.stop();
-                document.getElementById('micIcon').classList.remove('active');
                 const micModal = bootstrap.Modal.getInstance(document.getElementById('micModal'));
                 if (micModal) {
                     micModal.hide();
@@ -1900,30 +1988,34 @@
                 }
             }
         }
-        function resetMicModal() {
-            document.getElementById('mic-status').textContent = 'Say the name of a menu item...';
-            document.getElementById('mic-status').style.display = 'block';
-            document.getElementById('mic-item-details').style.display = 'none';
-            document.getElementById('mic-item-image').src = '';
-            document.getElementById('mic-item-name').textContent = '';
+        function handleToggle(toggleType) {
+            const vegToggle = document.getElementById('veg-toggle');
+            const customToggle = document.getElementById('category-CustomizedDish');
+            let url = '/menu?';
+            const params = [];
+            if (toggleType === 'veg' && vegToggle.checked) {
+                params.push('veg=Veg');
+                customToggle.checked = false;
+            } else if (toggleType === 'custom' && customToggle.checked) {
+                params.push('category=Customized+Dish');
+                vegToggle.checked = false;
+            }
+            url += params.join('&');
+            window.location.href = url;
         }
         document.addEventListener('DOMContentLoaded', function () {
-            const            avatarIcon = document.querySelector('.avatar-icon');
+            const avatarIcon = document.querySelector('.avatar-icon');
             const dropdownMenu = document.querySelector('.dropdown-menu');
-
             avatarIcon.addEventListener('click', function () {
                 dropdownMenu.classList.toggle('show');
             });
-
             document.addEventListener('click', function (event) {
                 if (!avatarIcon.contains(event.target) && !dropdownMenu.contains(event.target)) {
                     dropdownMenu.classList.remove('show');
                 }
             });
-
             const searchBar = document.getElementById('searchBar');
             const searchSuggestions = document.getElementById('searchSuggestions');
-
             searchBar.addEventListener('input', debounce(function () {
                 const query = searchBar.value.trim().toLowerCase();
                 searchSuggestions.innerHTML = '';
@@ -1931,20 +2023,23 @@
                     searchSuggestions.style.display = 'none';
                     return;
                 }
-
                 const filteredItems = menuItems.filter(item =>
                     item.name.toLowerCase().includes(query) || item.section.toLowerCase().includes(query)
                 );
-
                 if (filteredItems.length === 0) {
                     searchSuggestions.style.display = 'none';
                     return;
                 }
-
                 filteredItems.forEach(item => {
                     const suggestion = document.createElement('div');
                     suggestion.classList.add('autocomplete-suggestion');
-                    suggestion.textContent = item.name;
+                    const img = document.createElement('img');
+                    img.src = item.image || '/static/placeholder.jpg';
+                    img.alt = item.name;
+                    suggestion.appendChild(img);
+                    const text = document.createElement('span');
+                    text.textContent = item.name;
+                    suggestion.appendChild(text);
                     suggestion.addEventListener('click', () => {
                         const card = document.querySelector(`.menu-card[data-item-name="${item.name}"]`);
                         if (card) {
@@ -1973,16 +2068,13 @@
                     });
                     searchSuggestions.appendChild(suggestion);
                 });
-
                 searchSuggestions.style.display = 'block';
             }, 300));
-
             document.addEventListener('click', function (event) {
                 if (!searchBar.contains(event.target) && !searchSuggestions.contains(event.target)) {
                     searchSuggestions.style.display = 'none';
                 }
             });
-
             if (localStorage.getItem('selectedItem')) {
                 try {
                     const selectedItem = JSON.parse(localStorage.getItem('selectedItem'));
@@ -2013,11 +2105,9 @@
                     localStorage.removeItem('selectedItem');
                 }
             }
-
             document.querySelectorAll('.media-wrapper').forEach(wrapper => {
                 const video = wrapper.querySelector('.menu-video');
                 const image = wrapper.querySelector('.menu-image');
-
                 wrapper.addEventListener('mouseenter', () => {
                     image.classList.add('hidden');
                     video.classList.add('active');
@@ -2033,7 +2123,6 @@
                     video.currentTime = 0;
                     image.classList.remove('hidden');
                 });
-
                 let touchTimeout;
                 wrapper.addEventListener('touchstart', (e) => {
                     e.preventDefault();
@@ -2057,23 +2146,19 @@
                     }, 500);
                 });
             });
-
             const decreaseBtn = document.getElementById('decreaseQuantity');
             const increaseBtn = document.getElementById('increaseQuantity');
             const quantityInput = document.getElementById('quantityInput');
-
             decreaseBtn.addEventListener('click', () => {
                 let value = parseInt(quantityInput.value) || 1;
                 if (value > 1) {
                     quantityInput.value = value - 1;
                 }
             });
-
             increaseBtn.addEventListener('click', () => {
                 let value = parseInt(quantityInput.value) || 1;
                 quantityInput.value = value + 1;
             });
-
             document.querySelectorAll('.toggle-details').forEach(link => {
                 link.addEventListener('click', () => {
                     const details = link.nextElementSibling;
@@ -2086,7 +2171,6 @@
                     }
                 });
             });
-
             fetch('/cart')
                 .then(response => response.json())
                 .then(data => {
@@ -2100,74 +2184,73 @@
                     console.error('Error fetching cart:', err);
                     updateCartUI(getCartLocalStorage());
                 });
-
             if ('webkitSpeechRecognition' in window) {
                 recognition = new webkitSpeechRecognition();
                 recognition.continuous = false;
                 recognition.interimResults = false;
                 recognition.lang = 'en-US';
-
                 recognition.onstart = () => {
-                    document.getElementById('micIcon').classList.add('active');
+                    document.getElementById('mic-icon-animation').classList.add('active');
                     document.getElementById('mic-status').textContent = 'Listening...';
                 };
-
                 recognition.onresult = (event) => {
                     const transcript = event.results[0][0].transcript.trim().toLowerCase();
                     console.log('Recognized speech:', transcript);
                     const matchedItem = menuItems.find(item => 
                         item.name.toLowerCase().includes(transcript)
                     );
-
                     if (matchedItem) {
-                        recognition.stop();
-                        document.getElementById('mic-status').style.display = 'none';
-                        document.getElementById('mic-item-details').style.display = 'block';
-                        document.getElementById('mic-item-name').textContent = matchedItem.name;
-                        document.getElementById('mic-item-image').src = matchedItem.image || '/static/placeholder.jpg';
-
-                        const card = document.querySelector(`.menu-card[data-item-name="${matchedItem.name}"]`);
-                        if (card) {
-                            card.classList.add('highlighted');
-                            card.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                            const buttonContainer = card.querySelector('.button-container');
-                            if (buttonContainer) {
-                                if (matchedItem.section === 'Soft Drinks') {
-                                    showSoftDrinkModal(buttonContainer.querySelector('.add-to-cart-btn'));
-                                } else {
-                                    showItemDetails(
-                                        matchedItem.name,
-                                        matchedItem.price,
-                                        matchedItem.image2 || matchedItem.image,
-                                        matchedItem.description,
-                                        matchedItem.section,
-                                        matchedItem.category
-                                    );
-                                    const modal = new bootstrap.Modal(document.getElementById('itemModal'));
-                                    modal.show();
+                        const micStatus = document.getElementById('mic-status');
+                        const micItemDetails = document.getElementById('mic-item-details');
+                        const micItemName = document.getElementById('mic-item-name');
+                        const micItemImage = document.getElementById('mic-item-image');
+                        micStatus.style.display = 'none';
+                        micItemDetails.style.display = 'block';
+                        micItemName.textContent = matchedItem.name;
+                        micItemImage.src = matchedItem.image || '/static/placeholder.jpg';
+                        setTimeout(() => {
+                            recognition.stop();
+                            const card = document.querySelector(`.menu-card[data-item-name="${matchedItem.name}"]`);
+                            if (card) {
+                                card.classList.add('highlighted');
+                                card.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                                setTimeout(() => card.classList.remove('highlighted'), 2000);
+                                const buttonContainer = card.querySelector('.button-container');
+                                if (buttonContainer) {
+                                    if (matchedItem.section === 'Soft Drinks') {
+                                        showSoftDrinkModal(buttonContainer.querySelector('.add-to-cart-btn'));
+                                    } else {
+                                        showItemDetails(
+                                            matchedItem.name,
+                                            matchedItem.price,
+                                            matchedItem.image2 || matchedItem.image,
+                                            matchedItem.description,
+                                            matchedItem.section,
+                                            matchedItem.category
+                                        );
+                                        const modal = new bootstrap.Modal(document.getElementById('itemModal'));
+                                        modal.show();
+                                    }
+                                }
+                                const micModal = bootstrap.Modal.getInstance(document.getElementById('micModal'));
+                                if (micModal) {
+                                    micModal.hide();
+                                    resetMicModal();
                                 }
                             }
-                            const micModal = bootstrap.Modal.getInstance(document.getElementById('micModal'));
-                            if (micModal) {
-                                micModal.hide();
-                                resetMicModal();
-                            }
-                        }
+                        }, 2000);
                     } else {
                         document.getElementById('mic-status').textContent = 'Item not found. Try again.';
                     }
                 };
-
                 recognition.onerror = (event) => {
                     console.error('Speech recognition error:', event.error);
                     document.getElementById('mic-status').textContent = 'Error occurred. Please try again.';
-                    document.getElementById('micIcon').classList.remove('active');
+                    document.getElementById('mic-icon-animation').classList.remove('active');
                 };
-
                 recognition.onend = () => {
-                    document.getElementById('micIcon').classList.remove('active');
+                    document.getElementById('mic-icon-animation').classList.remove('active');
                 };
-
                 document.getElementById('micIcon').addEventListener('click', () => {
                     if (!recognition) return;
                     const micModal = new bootstrap.Modal(document.getElementById('micModal'));
@@ -2175,34 +2258,27 @@
                     resetMicModal();
                     recognition.start();
                 });
-
                 document.getElementById('stopMicBtn').addEventListener('click', stopSpeechRecognition);
             } else {
                 document.getElementById('micIcon').style.display = 'none';
             }
-
             const descriptionInput = document.getElementById('custom-dish-description');
             const suggestionsContainer = document.getElementById('descriptionSuggestions');
-
             if (descriptionInput && suggestionsContainer) {
                 descriptionInput.addEventListener('input', debounce(() => {
                     const query = descriptionInput.value.toLowerCase();
                     suggestionsContainer.innerHTML = '';
-
                     if (query.length < 2) {
                         suggestionsContainer.style.display = 'none';
                         return;
                     }
-
                     const filteredIngredients = ingredientsList.filter(ingredient =>
                         ingredient.toLowerCase().includes(query)
                     );
-
                     if (filteredIngredients.length === 0) {
                         suggestionsContainer.style.display = 'none';
                         return;
                     }
-
                     filteredIngredients.forEach(ingredient => {
                         const suggestionItem = document.createElement('div');
                         suggestionItem.classList.add('autocomplete-suggestion');
@@ -2218,10 +2294,8 @@
                         });
                         suggestionsContainer.appendChild(suggestionItem);
                     });
-
                     suggestionsContainer.style.display = 'block';
                 }, 300));
-
                 document.addEventListener('click', (event) => {
                     if (!descriptionInput.contains(event.target) && !suggestionsContainer.contains(event.target)) {
                         suggestionsContainer.style.display = 'none';