Update app.py

app.py

@@ -210,10 +210,10 @@ def modal_js():
                 cartItemsContainer.innerHTML += `
                     <div style="border: 1px solid #ddd; padding: 10px; margin-bottom: 10px; border-radius: 8px;">
                         <h3>${item.name}</h3>
-                        <p>Quantity: ${item.quantity}</p>
+                        <p>Quantity: <input type="number" value="${item.quantity}" min="1" style="width: 50px;" onchange="updateCartItem(${index}, 'item', this.value)" /></p>
                         <p>Extras: ${extrasList || 'None'}</p>
                         <p>Special Instructions: ${item.instructions || 'None'}</p>
-                        <p>Total Cost: $${item.totalCost.toFixed(2)}</p>
+                        <p>Total Cost: $<span id="item-${index}-total">${item.totalCost.toFixed(2)}</span></p>
                         <button onclick="removeFromCart(${index})" style="color: red;">Remove</button>
                     </div>
                 `;
@@ -234,8 +234,21 @@ def modal_js():
             openCartModal();
         }
 
+        function updateCartItem(index, type, value) {
+            if (type === 'item') {
+                cart[index].quantity = parseInt(value);
+            }
+            const item = cart[index];
+            const price = item.price;
+            const extrasCost = item.extras.reduce((total, extra) => total + (extra.price * extra.quantity), 0);
+            item.totalCost = (price * item.quantity) + extrasCost;
+            document.getElementById(`item-${index}-total`).innerText = item.totalCost.toFixed(2);
+            updateCartTotalCost();  // Update total cost displayed
+        }
+
         function updateCartTotalCost() {
             const totalCostElement = document.getElementById('cart-total-cost');
+            totalCartCost = cart.reduce((total, item) => total + item.totalCost, 0);
             totalCostElement.innerText = `Total Cart Cost: $${totalCartCost.toFixed(2)}`;
         }