Update templates/menu.html

templates/menu.html

@@ -49,14 +49,14 @@
             border-radius: 15px 15px 0 0;
             opacity: 0;
             transition: opacity 0.5s ease-in-out;
-            background-color: #000; /* Fallback color if video fails */
+            background-color: #000;
         }
         .menu-video.loaded {
             opacity: 1;
         }
         .menu-card:hover .menu-video {
             opacity: 1;
-            transform: scale(1.05); /* Slight zoom effect on hover */
+            transform: scale(1.05);
         }
         .menu-card .card-body .card-title {
             font-size: 1.2rem;
@@ -174,8 +174,8 @@
             font-size: 15px;
             transition: background-color 0.2s ease;
         }
-        .dropdown-menu .dropdown-item:last-child {
-            border-bottom: none;
+        .dropdown-menu .dropdown-item:first-child {
+            border-top: none;
         }
         .dropdown-menu .dropdown-item:hover {
             background-color: #ffe4c4;
@@ -660,17 +660,6 @@
             50% { transform: scale(1.1); }
             100% { transform: scale(1); }
         }
-        .avatar-modal .modal-content {
-            border-radius: 15px;
-            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
-        }
-        .avatar-modal .modal-body img {
-            max-width: 100%;
-            max-height: 80vh;
-            border-radius: 10px;
-            margin: 0 auto;
-            display: block;
-        }
         @media (max-width: 576px) {
             .fixed-top-bar {
                 height: 60px;
@@ -873,7 +862,9 @@
                 {% endif %}
             </div>
             <div class="dropdown-menu" id="avatarDropdown">
-                <a href="{{ url_for('user_details.customer_details') }}" class="dropdown-item">View Profile</a>
+                {% if user_image %}
+                    <div class="dropdown-item delete-item" id="deleteAvatar">Delete Image</div>
+                {% endif %}
                 <a href="{{ url_for('orderhistory.order_history') }}" class="dropdown-item">Order History</a>
                 <div class="dropdown-item upload-item">
                     <label for="avatarUpload" style="cursor: pointer; margin: 0; width: 100%;">
@@ -881,9 +872,6 @@
                     </label>
                     <input type="file" id="avatarUpload" accept="image/*" style="display: none;">
                 </div>
-                {% if user_image %}
-                    <div class="dropdown-item delete-item" id="deleteAvatar">Delete Image</div>
-                {% endif %}
                 <a href="{{ url_for('logout') }}" class="dropdown-item">Logout</a>
             </div>
         </div>
@@ -896,24 +884,6 @@
         </div>
     </div>
 
-    <!-- Avatar View Modal (Triggered Directly from Avatar Icon) -->
-    <div class="modal fade avatar-modal" id="avatarViewModal" tabindex="-1" aria-labelledby="avatarViewModalLabel" aria-hidden="true">
-        <div class="modal-dialog modal-dialog-centered">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title" id="avatarViewModalLabel">View Avatar</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                </div>
-                <div class="modal-body">
-                    <img id="avatarModalImage" src="" alt="Avatar Image" class="img-fluid">
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-                </div>
-            </div>
-        </div>
-    </div>
-
     <form method="get" action="/menu" class="text-center mb-4" id="categoryForm">
         <label class="form-label fw-bold">Select a Category:</label>
         <div class="category-buttons">
@@ -1288,7 +1258,6 @@
             const avatarIcon = document.getElementById('avatarIcon');
             const avatarUpload = document.getElementById('avatarUpload');
             const deleteAvatar = document.getElementById('deleteAvatar');
-            const avatarModalImage = document.getElementById('avatarModalImage');
 
             // Load avatar from localStorage if available
             function loadAvatar() {
@@ -1306,7 +1275,7 @@
                         deleteItem.className = 'dropdown-item delete-item';
                         deleteItem.id = 'deleteAvatar';
                         deleteItem.innerText = 'Delete Image';
-                        dropdownMenu.insertBefore(deleteItem, dropdownMenu.querySelector('.dropdown-item:last-child'));
+                        dropdownMenu.insertBefore(deleteItem, dropdownMenu.firstChild);
                         addDeleteListener(deleteItem);
                     }
                 }
@@ -1324,16 +1293,10 @@
                 if (deleteAvatar) deleteAvatar.remove();
             }
 
-            // Avatar click handler (show modal directly from avatar icon)
+            // Avatar click handler
             avatarIcon.addEventListener('click', function(event) {
                 event.stopPropagation();
-                const avatarImg = this.querySelector('.avatar-image');
-                if (avatarImg) {
-                    avatarModalImage.src = avatarImg.src || '/static/default-avatar.jpg'; // Fallback image
-                    new bootstrap.Modal(document.getElementById('avatarViewModal')).show();
-                } else {
-                    dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
-                }
+                dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
             });
 
             // Handle image upload with 15MB limit and error handling
@@ -1363,7 +1326,7 @@
                         .then(data => {
                             if (data.success) {
                                 const img = document.createElement('img');
-                                img.src = data.image || '/static/default-avatar.jpg'; // Fallback image
+                                img.src = data.image || '/static/default-avatar.jpg';
                                 img.alt = 'User Avatar';
                                 img.className = 'avatar-image';
                                 img.style.cssText = 'width: 100%; height: 100%; object-fit: cover; border-radius: 50%;';
@@ -1375,14 +1338,14 @@
                                     deleteItem.className = 'dropdown-item delete-item';
                                     deleteItem.id = 'deleteAvatar';
                                     deleteItem.innerText = 'Delete Image';
-                                    dropdownMenu.insertBefore(deleteItem, dropdownMenu.querySelector('.dropdown-item:last-child'));
+                                    dropdownMenu.insertBefore(deleteItem, dropdownMenu.firstChild);
                                     addDeleteListener(deleteItem);
                                 }
                                 dropdownMenu.style.display = 'none';
                             } else {
                                 alert('Failed to upload image: ' + (data.error || 'Unknown error. Using default image.'));
                                 const img = document.createElement('img');
-                                img.src = '/static/default-avatar.jpg'; // Fallback image
+                                img.src = '/static/default-avatar.jpg';
                                 img.alt = 'User Avatar';
                                 img.className = 'avatar-image';
                                 img.style.cssText = 'width: 100%; height: 100%; object-fit: cover; border-radius: 50%;';
@@ -1394,7 +1357,7 @@
                                     deleteItem.className = 'dropdown-item delete-item';
                                     deleteItem.id = 'deleteAvatar';
                                     deleteItem.innerText = 'Delete Image';
-                                    dropdownMenu.insertBefore(deleteItem, dropdownMenu.querySelector('.dropdown-item:last-child'));
+                                    dropdownMenu.insertBefore(deleteItem, dropdownMenu.firstChild);
                                     addDeleteListener(deleteItem);
                                 }
                                 dropdownMenu.style.display = 'none';
@@ -1404,7 +1367,7 @@
                             console.error('Upload error:', error);
                             alert('Error uploading image. Using default image as fallback.');
                             const img = document.createElement('img');
-                            img.src = '/static/default-avatar.jpg'; // Fallback image
+                            img.src = '/static/default-avatar.jpg';
                             img.alt = 'User Avatar';
                             img.className = 'avatar-image';
                             img.style.cssText = 'width: 100%; height: 100%; object-fit: cover; border-radius: 50%;';
@@ -1416,7 +1379,7 @@
                                 deleteItem.className = 'dropdown-item delete-item';
                                 deleteItem.id = 'deleteAvatar';
                                 deleteItem.innerText = 'Delete Image';
-                                dropdownMenu.insertBefore(deleteItem, dropdownMenu.querySelector('.dropdown-item:last-child'));
+                                dropdownMenu.insertBefore(deleteItem, dropdownMenu.firstChild);
                                 addDeleteListener(deleteItem);
                             }
                             dropdownMenu.style.display = 'none';
@@ -1425,7 +1388,7 @@
                     reader.onerror = function() {
                         alert('Error reading the image file. Using default image as fallback.');
                         const img = document.createElement('img');
-                        img.src = '/static/default-avatar.jpg'; // Fallback image
+                        img.src = '/static/default-avatar.jpg';
                         img.alt = 'User Avatar';
                         img.className = 'avatar-image';
                         img.style.cssText = 'width: 100%; height: 100%; object-fit: cover; border-radius: 50%;';
@@ -1437,7 +1400,7 @@
                             deleteItem.className = 'dropdown-item delete-item';
                             deleteItem.id = 'deleteAvatar';
                             deleteItem.innerText = 'Delete Image';
-                            dropdownMenu.insertBefore(deleteItem, dropdownMenu.querySelector('.dropdown-item:last-child'));
+                            dropdownMenu.insertBefore(deleteItem, dropdownMenu.firstChild);
                             addDeleteListener(deleteItem);
                         }
                         dropdownMenu.style.display = 'none';
@@ -1945,51 +1908,39 @@
 
         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);
+            const isMultiSelectGroup = ["Extra Toppings", "Choose Raita/Sides", "Select Dip/Sauce", "Extra Add-ons", "Make it"].includes(groupName);
+            const checkboxes = document.querySelectorAll(`.addon-option[data-group="${groupName}"]`);
             if (!isMultiSelectGroup) {
-                const checkboxes = document.querySelectorAll(`.addon-option[data-group="${groupName}"]`);
-                checkboxes.forEach(otherCheckbox => {
-                    if (otherCheckbox !== checkbox) {
-                        otherCheckbox.checked = false;
-                    }
+                checkboxes.forEach(cb => {
+                    if (cb !== checkbox) cb.checked = false;
                 });
             }
         }
 
         function addToCartFromModal() {
             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 itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
             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 instructions = document.getElementById('modal-instructions').value.trim();
+            const quantity = parseInt(document.getElementById('quantityInput').value);
+            const section = document.getElementById('modal-section').getAttribute('data-section');
+            const selectedCategory = document.getElementById('modal-section').getAttribute('data-category');
+            const addons = Array.from(document.querySelectorAll('.addon-option:checked')).map(cb => ({
+                name: cb.getAttribute('data-name'),
+                price: parseFloat(cb.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,
+                addons: addons,
                 instructions: instructions,
                 quantity: quantity
             };
-            
+
             fetch('/cart/add', {
                 method: 'POST',
                 headers: {
@@ -2002,12 +1953,11 @@
                 if (data.success) {
                     alert('Item added to cart successfully!');
                     updateCartUI(data.cart);
-                    const modal = document.getElementById('itemModal');
-                    const modalInstance = bootstrap.Modal.getInstance(modal);
-                    modalInstance.hide();
+                    const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
+                    modal.hide();
                 } else {
                     console.error('Failed to add item to cart:', data.error);
-                    alert(data.error || 'Failed to add item to cart.');
+                    alert(data.error || 'Failed to add item to cart. Using local storage as fallback.');
                     const cart = addToCartLocalStorage(cartPayload);
                     updateCartUI(cart);
                     const modal = document.getElementById('itemModal');