Update templates/menu.html

templates/menu.html

@@ -1295,6 +1295,7 @@
             <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." autocomplete="off">
             <i class="bi bi-search search-icon"></i>
             <i class="bi bi-mic mic-icon" id="micIcon"></i>
+            <div id="searchSuggestions" class="autocomplete-suggestions"></div>
         </div>
     </div>
 
@@ -1333,7 +1334,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 %}
@@ -1527,7 +1528,11 @@
                     {
                         name: "{{ item.Name | default('Unnamed Item') }}",
                         section: "{{ item.Section__c | default(section) }}",
-                        image: "{{ item.Image1__c | default('/static/placeholder.jpg') }}"
+                        image: "{{ item.Image1__c | default('/static/placeholder.jpg') }}",
+                        price: "{{ item.Price__c | default('0.00') }}",
+                        image2: "{{ item.Image2__c | default(item.Image1__c) }}",
+                        description: "{{ item.Description__c | default('No description') }}",
+                        category: "{{ selected_category }}"
                     },
                 {% endfor %}
             {% endfor %}
@@ -1903,36 +1908,79 @@
             document.getElementById('mic-item-name').textContent = '';
         }
         document.addEventListener('DOMContentLoaded', function () {
-            const avatarContainer = document.querySelector('.avatar-dropdown-container');
+            const            avatarIcon = document.querySelector('.avatar-icon');
             const dropdownMenu = document.querySelector('.dropdown-menu');
-            avatarContainer.addEventListener('click', function (event) {
-                event.stopPropagation();
+
+            avatarIcon.addEventListener('click', function () {
                 dropdownMenu.classList.toggle('show');
             });
+
             document.addEventListener('click', function (event) {
-                if (!avatarContainer.contains(event.target)) {
+                if (!avatarIcon.contains(event.target) && !dropdownMenu.contains(event.target)) {
                     dropdownMenu.classList.remove('show');
                 }
             });
-            const dropdownItems = document.querySelectorAll('.dropdown-item');
-            dropdownItems.forEach(item => {
-                item.addEventListener('click', function () {
-                    dropdownMenu.classList.remove('show');
-                });
-            });
 
             const searchBar = document.getElementById('searchBar');
-            searchBar.addEventListener('input', function () {
-                const query = this.value.toLowerCase();
-                document.querySelectorAll('.menu-card').forEach(card => {
-                    const itemName = card.getAttribute('data-item-name').toLowerCase();
-                    const section = card.getAttribute('data-item-section').toLowerCase();
-                    if (itemName.includes(query) || section.includes(query)) {
-                        card.style.display = 'block';
-                    } else {
-                        card.style.display = 'none';
-                    }
+            const searchSuggestions = document.getElementById('searchSuggestions');
+
+            searchBar.addEventListener('input', debounce(function () {
+                const query = searchBar.value.trim().toLowerCase();
+                searchSuggestions.innerHTML = '';
+                if (query.length < 2) {
+                    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;
+                    suggestion.addEventListener('click', () => {
+                        const card = document.querySelector(`.menu-card[data-item-name="${item.name}"]`);
+                        if (card) {
+                            card.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                            card.classList.add('highlighted');
+                            setTimeout(() => card.classList.remove('highlighted'), 2000);
+                            const buttonContainer = card.querySelector('.button-container');
+                            if (item.section === 'Soft Drinks') {
+                                showSoftDrinkModal(buttonContainer.querySelector('.add-to-cart-btn'));
+                            } else {
+                                showItemDetails(
+                                    item.name,
+                                    item.price,
+                                    item.image2 || item.image,
+                                    item.description,
+                                    item.section,
+                                    item.category
+                                );
+                                const modal = new bootstrap.Modal(document.getElementById('itemModal'));
+                                modal.show();
+                            }
+                            searchBar.value = '';
+                            searchSuggestions.innerHTML = '';
+                            searchSuggestions.style.display = 'none';
+                        }
+                    });
+                    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')) {
@@ -1944,15 +1992,17 @@
                         card.classList.add('highlighted');
                         setTimeout(() => card.classList.remove('highlighted'), 2000);
                         const buttonContainer = card.querySelector('.button-container');
-                        const name = buttonContainer.getAttribute('data-item-name');
-                        const price = buttonContainer.getAttribute('data-item-price');
-                        const image = buttonContainer.getAttribute('data-item-image2') || buttonContainer.getAttribute('data-item-image');
-                        const description = buttonContainer.getAttribute('data-item-description');
-                        const category = buttonContainer.getAttribute('data-item-category');
-                        if (section === 'Soft Drinks') {
+                        if (selectedItem.section === 'Soft Drinks') {
                             showSoftDrinkModal(buttonContainer.querySelector('.add-to-cart-btn'));
                         } else {
-                            showItemDetails(name, price, image, description, section, category);
+                            showItemDetails(
+                                selectedItem.name,
+                                selectedItem.price,
+                                selectedItem.image2 || selectedItem.image,
+                                selectedItem.description,
+                                selectedItem.section,
+                                selectedItem.category
+                            );
                             const modal = new bootstrap.Modal(document.getElementById('itemModal'));
                             modal.show();
                         }
@@ -2070,12 +2120,11 @@
                     );
 
                     if (matchedItem) {
-                        // Stop recognition immediately after finding a match
                         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;
+                        document.getElementById('mic-item-image').src = matchedItem.image || '/static/placeholder.jpg';
 
                         const card = document.querySelector(`.menu-card[data-item-name="${matchedItem.name}"]`);
                         if (card) {
@@ -2087,18 +2136,17 @@
                                     showSoftDrinkModal(buttonContainer.querySelector('.add-to-cart-btn'));
                                 } else {
                                     showItemDetails(
-                                        buttonContainer.getAttribute('data-item-name'),
-                                        buttonContainer.getAttribute('data-item-price'),
-                                        buttonContainer.getAttribute('data-item-image2'),
-                                        buttonContainer.getAttribute('data-item-description'),
+                                        matchedItem.name,
+                                        matchedItem.price,
+                                        matchedItem.image2 || matchedItem.image,
+                                        matchedItem.description,
                                         matchedItem.section,
-                                        buttonContainer.getAttribute('data-item-category')
+                                        matchedItem.category
                                     );
                                     const modal = new bootstrap.Modal(document.getElementById('itemModal'));
                                     modal.show();
                                 }
                             }
-                            // Hide the mic modal after showing item details
                             const micModal = bootstrap.Modal.getInstance(document.getElementById('micModal'));
                             if (micModal) {
                                 micModal.hide();
@@ -2127,6 +2175,8 @@
                     resetMicModal();
                     recognition.start();
                 });
+
+                document.getElementById('stopMicBtn').addEventListener('click', stopSpeechRecognition);
             } else {
                 document.getElementById('micIcon').style.display = 'none';
             }
@@ -2181,4 +2231,4 @@
         });
     </script>
 </body>
-</html>
+</html>