Update app.py

app.py

@@ -191,10 +191,6 @@ def modal_js():
             updateCartTotalCost();  // Update total cost displayed
             closeModal();
         }
-        function resetAddOns() {
-            const checkboxes = document.querySelectorAll('input[name="biryani-extra"]');
-            checkboxes.forEach(checkbox => checkbox.checked = false);  // Uncheck all add-ons
-        }
         function updateCartButton() {
             const cartButton = document.getElementById('cart-button');
             cartButton.innerText = `View Cart (${cart.length} items)`;
@@ -246,24 +242,37 @@ def modal_js():
             totalCartCost = cart.reduce((total, item) => total + item.totalCost, 0);
             totalCostElement.innerText = `Total Cart Cost: $${totalCartCost.toFixed(2)}`;
         }
-        function submitOrder() {
-            const orderDetails = cart.map(item => `${item.name} (x${item.quantity}) - $${item.totalCost.toFixed(2)}`).join('<br>');
-            const totalCost = cart.reduce((total, item) => total + item.totalCost, 0).toFixed(2);
-            document.getElementById('order-summary').innerHTML = orderDetails;
-            document.getElementById('total-bill').innerText = `$${totalCost}`;
-            // Close the cart modal
-            closeCartModal();
-            // Navigate to the final order page
-            document.getElementById('final-order-page').style.display = 'block';
+        function proceedToCheckout() {
+            // Trigger the final order page and send the cart data
+            const finalOrderPage = document.getElementById('final-order-section');
+            const cartPage = document.getElementById('cart-section');
+            cartPage.style.display = 'none';
+            finalOrderPage.style.display = 'block';
+
+            // Show the cart details on the final order page
+            const finalOrderItems = document.getElementById('final-order-items');
+            const finalOrderTotal = document.getElementById('final-order-total');
+            let itemsHtml = '';
+            let totalBill = 0;
+            cart.forEach(item => {
+                itemsHtml += `<p>${item.name} (x${item.quantity}) - $${item.totalCost.toFixed(2)}</p>`;
+                totalBill += item.totalCost;
+            });
+            finalOrderItems.innerHTML = itemsHtml;
+            finalOrderTotal.innerHTML = `Total Bill: $${totalBill.toFixed(2)}`;
+        }
+        function goBackToMenu() {
+            const finalOrderPage = document.getElementById('final-order-section');
+            const cartPage = document.getElementById('cart-section');
+            finalOrderPage.style.display = 'none';
+            cartPage.style.display = 'block';
         }
     </script>
     """
     return modal_script
 
-
 # Gradio App
 with gr.Blocks() as app:
-    # Login and Signup pages
     with gr.Row():
         gr.HTML("<h1 style='text-align: center;'>Welcome to Biryani Hub</h1>")
 
@@ -290,17 +299,17 @@ with gr.Blocks() as app:
             preference = gr.Radio(choices=["All", "Veg", "Non-Veg"], label="Filter Preference", value="All")
             menu_output = gr.HTML()
             gr.HTML("<div id='cart-button' style='position: fixed; top: 20px; right: 20px; background: #28a745; color: white; padding: 10px 20px; border-radius: 30px; cursor: pointer; z-index: 1000;' onclick='openCartModal()'>View Cart</div>")
-            gr.HTML("<div id='cart-modal' style='display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: white; z-index: 1000; overflow-y: auto;'><div style='padding: 20px;'><div style='text-align: right;'><button onclick='closeCartModal()' style='background: none; border: none; font-size: 24px; cursor: pointer;'>&times;</button></div><h1>Your Cart</h1><div id='cart-items'></div><p id='cart-total-cost' style='font-size: 1.2em; font-weight: bold;'>Total Cart Cost: $0.00</p><button style='background: #ff5722; color: white; padding: 10px 20px; border-radius: 5px; border: none; cursor: pointer;' onclick='submitOrder()'>Submit Order</button></div></div>")
+            gr.HTML("<div id='cart-modal' style='display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: white; z-index: 1000; overflow-y: auto;'><div style='padding: 20px;'><div style='text-align: right;'><button onclick='closeCartModal()' style='background: none; border: none; font-size: 24px; cursor: pointer;'>&times;</button></div><h1>Your Cart</h1><div id='cart-items'></div><p id='cart-total-cost' style='font-size: 1.2em; font-weight: bold;'>Total Cart Cost: $0.00</p><button style='background: #ff5722; color: white; padding: 10px 20px; border-radius: 5px; border: none; cursor: pointer;' onclick='proceedToCheckout()'>Proceed to Checkout</button></div></div>")
             gr.HTML(create_modal_window())
             gr.HTML(modal_js())
 
     # Final Order Page
     with gr.Row(visible=False) as final_order_page:
         with gr.Column():
-            gr.HTML("<h2>Final Order:</h2>")
-            order_summary = gr.HTML()
-            gr.HTML("<h3>Total Bill:</h3>")
-            total_bill = gr.Textbox()
+            gr.HTML("<h1>Your Final Order</h1>")
+            final_order_items = gr.HTML()
+            final_order_total = gr.HTML()
+            gr.Button("Go Back to Menu", elem_id="back-to-menu-button")
 
     login_button.click(
         lambda email, password: (gr.update(visible=False), gr.update(visible=True), gr.update(value=filter_menu("All")), "Login successful!")