Update templates/menu_page.html

templates/menu_page.html

@@ -57,7 +57,7 @@
     #main-course-btn:hover, #appetizer-btn:hover {
         background-color: #FF7F00;
     }
-    #cart-summary {
+    #cart-summary, #place-order-summary {
         display: none;
     }
 </style>
@@ -77,6 +77,7 @@
     <h1>Main Course Menu</h1>
     <div id="main-course-items"></div>
     <button id="back-to-category-btn">Back to Category Selection</button>
+    <button id="view-cart-btn">View Cart</button>
 </div>
 
 <!-- Page 3: Appetizers Menu -->
@@ -84,6 +85,23 @@
     <h1>Appetizers Menu</h1>
     <div id="appetizer-items"></div>
     <button id="back-to-category-btn2">Back to Category Selection</button>
+    <button id="view-cart-btn2">View Cart</button>
+</div>
+
+<!-- Page 4: View Cart -->
+<div id="view-cart-page" class="menu-container" style="display: none;">
+    <h1>Your Cart</h1>
+    <div id="cart-details"></div>
+    <button id="place-order-btn">Place Final Order</button>
+    <button id="back-to-menu-btn">Back to Menu</button>
+</div>
+
+<!-- Page 5: Place Order -->
+<div id="place-order-page" class="menu-container" style="display: none;">
+    <h1>Place Your Order</h1>
+    <div id="place-order-summary"></div>
+    <button id="confirm-order-btn">Confirm Order</button>
+    <button id="back-to-cart-btn">Back to Cart</button>
 </div>
 
 <script>
@@ -104,30 +122,18 @@ const menuData = {
 const categoryButtons = document.getElementById('page1');
 const mainCoursePage = document.getElementById('main-course-page');
 const appetizerPage = document.getElementById('appetizer-page');
+const viewCartPage = document.getElementById('view-cart-page');
+const placeOrderPage = document.getElementById('place-order-page');
 const backToCategoryBtns = document.querySelectorAll('[id^="back-to-category-btn"]');
+const backToMenuBtns = document.querySelectorAll('[id^="back-to-menu-btn"]');
+const cartDetails = document.getElementById("cart-details");
+const placeOrderSummary = document.getElementById("place-order-summary");
 
-// Event listeners for buttons to navigate between pages
-document.getElementById("main-course-btn").addEventListener("click", () => {
-    categoryButtons.style.display = "none";
-    mainCoursePage.style.display = "block";
-    displayMenuItems('Main Course');
-});
-
-document.getElementById("appetizer-btn").addEventListener("click", () => {
-    categoryButtons.style.display = "none";
-    appetizerPage.style.display = "block";
-    displayMenuItems('Appetizers');
-});
-
-backToCategoryBtns.forEach(button => {
-    button.addEventListener("click", () => {
-        mainCoursePage.style.display = "none";
-        appetizerPage.style.display = "none";
-        categoryButtons.style.display = "block";
-    });
-});
+// Global cart variable to store items
+let cart = [];
+let menuData = {}; 
 
-// Function to populate menu items based on category
+// Function to display menu items based on category
 function displayMenuItems(category) {
     const menuContainer = category === 'Main Course' ? document.getElementById('main-course-items') : document.getElementById('appetizer-items');
     menuContainer.innerHTML = '';
@@ -148,7 +154,6 @@ function displayMenuItems(category) {
 }
 
 // Function to add an item to the cart
-let cart = [];
 function addToCart(itemName, quantity) {
     const item = findItem(itemName);
     cart.push({ name: item.name, price: item.price, quantity: quantity });
@@ -156,10 +161,92 @@ function addToCart(itemName, quantity) {
 
 // Function to find item in the menu
 function findItem(itemName) {
-    const menu = menuData['Main Course']; // Default category to check first
+    const menu = menuData['Main Course']; 
     return menu.find(item => item.name.toLowerCase() === itemName.toLowerCase());
 }
 
+// Function to display cart details
+function showCartDetails() {
+    if (cart.length > 0) {
+        let cartHtml = "";
+        cart.forEach(item => {
+            cartHtml += `<p>${item.quantity} x ${item.name} - ₹${item.price * item.quantity}</p>`;
+        });
+        cartDetails.innerHTML = cartHtml;
+        viewCartPage.style.display = "block";
+        speak(`Your cart contains ${cart.length} items.`);
+    } else {
+        speak("Your cart is empty.");
+    }
+}
+
+// Function to place the order
+function showPlaceOrder() {
+    if (cart.length > 0) {
+        let summaryHtml = "";
+        cart.forEach(item => {
+            summaryHtml += `<p>${item.quantity} x ${item.name} - ₹${item.price * item.quantity}</p>`;
+        });
+        placeOrderSummary.innerHTML = summaryHtml;
+        placeOrderPage.style.display = "block";
+    } else {
+        speak("Your cart is empty. Please add items to the cart first.");
+    }
+}
+
+// Event listeners for page navigation
+document.getElementById("main-course-btn").addEventListener("click", () => {
+    categoryButtons.style.display = "none";
+    mainCoursePage.style.display = "block";
+    displayMenuItems('Main Course');
+});
+
+document.getElementById("appetizer-btn").addEventListener("click", () => {
+    categoryButtons.style.display = "none";
+    appetizerPage.style.display = "block";
+    displayMenuItems('Appetizers');
+});
+
+backToCategoryBtns.forEach(button => {
+    button.addEventListener("click", () => {
+        mainCoursePage.style.display = "none";
+        appetizerPage.style.display = "none";
+        categoryButtons.style.display = "block";
+    });
+});
+
+backToMenuBtns.forEach(button => {
+    button.addEventListener("click", () => {
+        viewCartPage.style.display = "none";
+        placeOrderPage.style.display = "none";
+        categoryButtons.style.display = "block";
+    });
+});
+
+// Buttons for View Cart and Place Order
+document.getElementById("view-cart-btn").addEventListener("click", () => {
+    showCartDetails();
+    mainCoursePage.style.display = "none";
+    appetizerPage.style.display = "none";
+});
+
+document.getElementById("view-cart-btn2").addEventListener("click", () => {
+    showCartDetails();
+    mainCoursePage.style.display = "none";
+    appetizerPage.style.display = "none";
+});
+
+document.getElementById("place-order-btn").addEventListener("click", () => {
+    showPlaceOrder();
+    viewCartPage.style.display = "none";
+});
+
+document.getElementById("confirm-order-btn").addEventListener("click", () => {
+    speak("Your order has been placed successfully. Thank you for visiting Biryani Hub.");
+    placeOrderPage.style.display = "none";
+    categoryButtons.style.display = "block";
+});
+
 // Voice greeting for menu categories
 const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
 recognition.lang = "en-US";
@@ -170,7 +257,6 @@ function speak(text) {
 }
 
 window.onload = function() {
-    // Sample menu data for Main Course and Appetizers
     menuData = {
         'Main Course': [
             { name: "Chicken Biryani", price: 250 },
@@ -183,10 +269,7 @@ window.onload = function() {
         ]
     };
 
-    // Automatically greet the user and prompt for category selection
     speak("Welcome to Biryani Hub! We have the following categories: Main Course and Appetizers. Please say 'Main Course' or 'Appetizers' to select a category.");
-
-    // Automatically trigger voice recognition for category selection
     recognition.start();
     recognition.onresult = (event) => {
         const categoryCommand = event.results[0][0].transcript.toLowerCase();