Update app.py

app.py

@@ -52,6 +52,7 @@ modal_and_cart_js = """
         "Veg Manchurian": 12
     };
     let finalized = false;
+
     function openModal(name, image, description, price) {
         if (finalized) {
             alert("You cannot add more items after finalizing your order.");
@@ -60,7 +61,6 @@ modal_and_cart_js = """
         const modal = document.getElementById('modal');
         modal.style.display = 'block';
         modal.style.position = 'fixed';
-
         if (window.innerWidth <= 768) {
             // For mobile devices
             modal.style.width = '90%';
@@ -68,25 +68,24 @@ modal_and_cart_js = """
             // For laptops or larger screens
             modal.style.width = '30%';
         }
-
         modal.style.top = '15%';
         modal.style.left = '50%';
         modal.style.transform = 'translate(-50%, -50%)';
-
         document.getElementById('modal-image').src = image;
         document.getElementById('modal-name').innerText = name;
         document.getElementById('modal-description').innerText = description;
         document.getElementById('modal-price').innerText = price;
-
         // Reset extras
         const extrasInputs = document.querySelectorAll('input[name="biryani-extra"]');
         extrasInputs.forEach(input => input.checked = false);
         document.getElementById('quantity').value = 1;
         document.getElementById('special-instructions').value = '';
     }
+
     function closeModal() {
         document.getElementById('modal').style.display = 'none';
     }
+
     function addToCart() {
         if (finalized) {
             alert("You cannot add more items after finalizing your order.");
@@ -99,43 +98,104 @@ modal_and_cart_js = """
         const extras = Array.from(document.querySelectorAll('input[name="biryani-extra"]:checked')).map(extra => extra.value);
         const extrasCost = extras.reduce((sum, extra) => sum + (extrasPrices[extra] || 0), 0);
         const itemTotal = (price + extrasCost) * quantity;
-        const cartItem = { name, price, quantity, instructions, extras, itemTotal };
+        const cartItem = { name, price, quantity, instructions, extras, itemTotal, extrasQuantities: extras.map(() => 1) };
         cart.push(cartItem);
         alert(`${name} added to cart!`);
         updateCartDisplay();
         closeModal();
     }
+
     function updateCartDisplay() {
         let totalBill = 0;
-        let cartHTML = "<h3>Your Cart:</h3><ul>";
+        let cartHTML = "<h3>Your Cart:</h3><ul style='list-style: none; padding: 0;'>";
         cart.forEach((item, index) => {
             totalBill += item.itemTotal;
-            const extras = item.extras.join(', ');
-            cartHTML += `<li><input type='checkbox' id='cart-item-${index}' value='${index}' checked onclick='removeItem(${index})'> ${item.name} (x${item.quantity}, Extras: ${extras}, Instructions: ${item.instructions}) - $${item.itemTotal.toFixed(2)}</li>`;
+            const extras = item.extras.map((extra, i) => {
+                const extraQuantity = item.extrasQuantities ? item.extrasQuantities[i] || 1 : 1;
+                const extraTotal = extrasPrices[extra] * extraQuantity;
+                totalBill += extraTotal;
+                return `<li>
+                            <div style='display: flex; justify-content: space-between; align-items: center;'>
+                                <span>${extra}</span>
+                                <span>Price: $${extrasPrices[extra].toFixed(2)}</span>
+                                <div>
+                                    <label for='extra-quantity-${index}-${i}'>Quantity:</label>
+                                    <input type='number' id='extra-quantity-${index}-${i}' value='${extraQuantity}' min='1' style='width: 50px;' onchange='updateExtraQuantity(${index}, ${i}, this.value)'>
+                                </div>
+                                <span>Total: $${extraTotal.toFixed(2)}</span>
+                                <input type='checkbox' id='extra-remove-${index}-${i}' onclick='removeExtra(${index}, ${i})'> Remove
+                            </div>
+                        </li>`;
+            }).join('');
+
+            cartHTML += `<li style='border-bottom: 1px solid #ddd; margin-bottom: 10px;'>
+                            <div style='display: flex; justify-content: space-between; align-items: center;'>
+                                <span>${item.name}</span>
+                                <span>Item Price: $${item.price.toFixed(2)}</span>
+                                <div>
+                                    <label for='item-quantity-${index}'>Quantity:</label>
+                                    <input type='number' id='item-quantity-${index}' value='${item.quantity}' min='1' style='width: 50px;' onchange='updateItemQuantity(${index}, this.value)'>
+                                </div>
+                                <span>Total: $${(item.price * item.quantity).toFixed(2)}</span>
+                                <input type='checkbox' id='item-remove-${index}' onclick='removeItem(${index})'> Remove
+                            </div>
+                            <div style='margin-left: 20px;'>
+                                <h4>Extras:</h4>
+                                <ul style='list-style: none; padding: 0;'>${extras}</ul>
+                            </div>
+                            <div style='margin-left: 20px;'>
+                                <strong>Instructions:</strong> ${item.instructions || "None"}
+                            </div>
+                        </li>`;
         });
         cartHTML += `</ul><p><strong>Total Bill: $${totalBill.toFixed(2)}</strong></p>`;
+        cartHTML += `<button style='margin-top: 10px; background-color: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer;' onclick='submitCart()'>Submit</button>`;
         document.getElementById('floating-cart').innerHTML = cartHTML;
     }
-    function removeItem(index) {
-        cart.splice(index, 1);
+
+    function updateItemQuantity(index, newQuantity) {
+        const quantity = parseInt(newQuantity) || 1;
+        cart[index].quantity = quantity;
+        cart[index].itemTotal = cart[index].price * quantity;
         updateCartDisplay();
     }
-    function finalizeOrder() {
-        if (cart.length === 0) {
-            alert("Your cart is empty. Please add items before finalizing.");
-            return;
+
+    function updateExtraQuantity(cartIndex, extraIndex, newQuantity) {
+        const quantity = parseInt(newQuantity) || 1;
+        cart[cartIndex].extrasQuantities = cart[cartIndex].extrasQuantities || [];
+        cart[cartIndex].extrasQuantities[extraIndex] = quantity;
+        updateCartDisplay();
+    }
+
+    function removeExtra(cartIndex, extraIndex) {
+        cart[cartIndex].extras.splice(extraIndex, 1);
+        if (cart[cartIndex].extrasQuantities) {
+            cart[cartIndex].extrasQuantities.splice(extraIndex, 1);
         }
-        finalized = true;
+        updateCartDisplay();
+    }
+
+    function submitCart() {
         let finalOrderHTML = "<h3>Final Order:</h3><ul>";
         let totalBill = 0;
         cart.forEach(item => {
             totalBill += item.itemTotal;
-            const extras = item.extras.join(', ');
-            finalOrderHTML += `<li>${item.name} (x${item.quantity}, Extras: ${extras}, Instructions: ${item.instructions}) - $${item.itemTotal.toFixed(2)}</li>`;
+            const extras = item.extras.map((extra, i) => {
+                const extraQuantity = item.extrasQuantities ? item.extrasQuantities[i] || 1 : 1;
+                const extraTotal = extrasPrices[extra] * extraQuantity;
+                totalBill += extraTotal;
+                return `${extra} (x${extraQuantity}) - $${extraTotal.toFixed(2)}`;
+            }).join(', ');
+
+            finalOrderHTML += `<li>
+                ${item.name} (x${item.quantity}) - $${item.itemTotal.toFixed(2)}
+                <br>Extras: ${extras}
+                <br>Instructions: ${item.instructions || "None"}
+            </li>`;
         });
         finalOrderHTML += `</ul><p><strong>Total Bill: $${totalBill.toFixed(2)}</strong></p>`;
         document.getElementById('final-order').innerHTML = finalOrderHTML;
-        alert("Your order has been finalized. You cannot make changes now.");
+        alert("Your final order has been submitted!");
     }
 </script>
 """