Update templates/search.html

templates/search.html

@@ -455,6 +455,12 @@
         </div>
     </div>
 
+    <!-- Timer and Success Message Container -->
+    <div id="orderTimerContainer" style="display: none; text-align: center; margin-top: 20px;">
+        <div id="orderTimer" style="font-size: 1.5rem; font-weight: bold; color: #FFA07A;"></div>
+        <div id="orderSuccessMessage" style="font-size: 1.5rem; font-weight: bold; color: #0FAA39; display: none;">Order Successfully Placed!</div>
+    </div>
+
     <div class="container mt-4">
         <h1 class="menu-heading">Search Menu Items</h1>
         <div class="row" id="menuItems">
@@ -552,8 +558,8 @@
                 return;
             }
 
-            const filteredItems = menuItems.filter(item => 
-                item.name.toLowerCase().includes(query.toLowerCase()) || 
+            const filteredItems = menuItems.filter(item =>
+                item.name.toLowerCase().includes(query.toLowerCase()) ||
                 item.section.toLowerCase().includes(query.toLowerCase())
             );
 
@@ -578,6 +584,63 @@
             searchPopup.style.display = 'block';
         }
 
+        // Timer and Success Message Functions
+        let orderTimerInterval;
+        let orderDurationInSeconds = 0; // Set your desired order completion time in seconds
+
+        function startOrderTimer(durationInSeconds) {
+            orderDurationInSeconds = durationInSeconds;
+            const timerElement = document.getElementById('orderTimer');
+            const successMessageElement = document.getElementById('orderSuccessMessage');
+            const timerContainer = document.getElementById('orderTimerContainer');
+
+            if (!timerElement || !successMessageElement || !timerContainer) {
+                console.error("Timer elements not found.");
+                return;
+            }
+
+            timerContainer.style.display = 'block';
+            successMessageElement.style.display = 'none';
+
+            let secondsRemaining = orderDurationInSeconds;
+
+            timerElement.innerText = formatTime(secondsRemaining);
+            timerElement.style.display = 'block'; // Ensure timer is visible when starting
+
+            orderTimerInterval = setInterval(() => {
+                secondsRemaining--;
+
+                if (secondsRemaining <= 0) {
+                    clearInterval(orderTimerInterval);
+                    timerElement.style.display = 'none';
+                    successMessageElement.style.display = 'block';
+                    // Optionally hide the container after a few seconds
+                    setTimeout(() => {
+                        timerContainer.style.display = 'none';
+                        successMessageElement.style.display = 'none';
+                        timerElement.style.display = 'block'; // Reset for next order
+                    }, 5000); // Hide after 5 seconds
+                } else {
+                    timerElement.innerText = formatTime(secondsRemaining);
+                }
+            }, 1000);
+        }
+
+        function formatTime(seconds) {
+            const minutes = Math.floor(seconds / 60);
+            const remainingSeconds = seconds % 60;
+            const formattedMinutes = String(minutes).padStart(2, '0');
+            const formattedSeconds = String(remainingSeconds).padStart(2, '0');
+            return `${formattedMinutes}:${formattedSeconds}`;
+        }
+
+        // Function to simulate placing a new order (replace with your actual order logic)
+        // This function should be called when a new order is successfully processed.
+        function handleNewOrderSuccess(estimatedCompletionTimeInSeconds) {
+             console.log("New order successful, starting timer...");
+             startOrderTimer(estimatedCompletionTimeInSeconds);
+        }
+
         document.addEventListener('DOMContentLoaded', function () {
             // Avatar Dropdown
             const avatarContainer = document.querySelector('.avatar-dropdown-container');
@@ -665,7 +728,59 @@
                     const cart = getCartLocalStorage();
                     updateCartUI(cart);
                 });
+
+            // --- Timer Logic Integration ---
+            // You need to call handleNewOrderSuccess() when a new order is successfully placed.
+            // This is where you'll connect this frontend timer to your backend order process.
+            // For demonstration purposes, let's simulate a new order after the page loads
+            // with a fixed duration (e.g., 30 seconds).
+            // In a real application, this call would happen after the user confirms an order
+            // on a different page (like a checkout or confirmation page).
+            // Example:
+            // handleNewOrderSuccess(30); // Simulate a new order with a 30-second timer
+            // You would likely pass the estimated time from your backend here.
+
+            // --- Persistence (Optional but Recommended) ---
+            // To make the timer persist across page loads, you can store the order's
+            // start time and estimated duration in local storage.
+            // When the page loads, check local storage for timer data and resume the timer
+            // if an active order exists.
+
+            const savedOrderTimer = localStorage.getItem('orderTimer');
+            if (savedOrderTimer) {
+                const timerData = JSON.parse(savedOrderTimer);
+                const now = Date.now();
+                const elapsed = Math.floor((now - timerData.startTime) / 1000);
+                const remaining = timerData.duration - elapsed;
+
+                if (remaining > 0) {
+                    startOrderTimer(remaining);
+                } else {
+                    // Timer has already finished, show success message briefly
+                    const successMessageElement = document.getElementById('orderSuccessMessage');
+                    const timerContainer = document.getElementById('orderTimerContainer');
+                    timerContainer.style.display = 'block';
+                    successMessageElement.style.display = 'block';
+                     setTimeout(() => {
+                        timerContainer.style.display = 'none';
+                        successMessageElement.style.display = 'none';
+                    }, 3000); // Show success for 3 seconds
+                     localStorage.removeItem('orderTimer'); // Clear finished timer data
+                }
+            }
         });
+
+        // --- Add this to your order placement success logic ---
+        // When you successfully place a new order (e.g., after a fetch/API call),
+        // call this function to start the timer and save its state.
+        function handleOrderPlacedAndStartTimer(estimatedCompletionTimeInSeconds) {
+            const startTime = Date.now();
+            localStorage.setItem('orderTimer', JSON.stringify({
+                startTime: startTime,
+                duration: estimatedCompletionTimeInSeconds
+            }));
+            startOrderTimer(estimatedCompletionTimeInSeconds);
+        }
     </script>
 </body>
 </html>