Update templates/order_history.html

templates/order_history.html

@@ -4,156 +4,138 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Order History</title>
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <style>
         body {
-            font-family: Arial, sans-serif;
-            background-color: #f8f9fa;
+            font-family: 'Arial', sans-serif;
+            background-color: #fdf4e3; /* Light cream background */
+            color: #333333; /* Dark gray text */
             margin: 0;
             padding: 0;
-            text-align: center;
         }
-
-        .container {
-            max-width: 600px;
+        .order-history-container {
+            max-width: 900px;
             margin: 40px auto;
-            background: white;
             padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
-        }
-
-        h2 {
-            color: #007bff;
-            margin-bottom: 15px;
-        }
-
-        .back-button {
-            display: block;
-            margin: 10px auto 20px;
-            background-color: #007bff;
-            color: white;
-            padding: 10px 15px;
-            border: none;
-            border-radius: 5px;
-            font-size: 16px;
-            cursor: pointer;
-            text-decoration: none;
-            width: 50%;
+            background-color: #ffffff; /* White card background */
+            border-radius: 15px;
+            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
+            border: 1px solid #ffe5b4; /* Light orange border */
         }
-
-        .back-button:hover {
-            background-color: #0056b3;
-        }
-
-        .order-card {
-            background: #fff;
-            padding: 15px;
-            margin: 10px 0;
+        .order-item {
+            display: flex;
+            justify-content: space-between;
+            background-color: #fffcf5; /* Light beige background for items */
             border-radius: 8px;
-            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
-            text-align: left;
-        }
-
-        .order-card p {
-            margin: 5px 0;
-            font-size: 14px;
+            padding: 10px;
+            margin-bottom: 10px;
+            border: 1px solid #ffe5b4; /* Light orange border */
         }
-
-        .order-status {
-            font-weight: bold;
-            padding: 5px 10px;
+        .order-item img {
+            width: 70px;
+            height: 70px;
+            object-fit: cover;
             border-radius: 5px;
-            display: inline-block;
         }
-
-        .status-pending {
-            background-color: #ffc107;
-            color: #fff;
+        .order-item-details {
+            flex: 1;
+            margin-left: 15px;
         }
-
-        .status-completed {
-            background-color: #28a745;
-            color: #fff;
+        .order-item-title {
+            font-size: 1.2rem;
+            font-weight: bold;
+            color: #c04e01; /* Warm orange color for the title */
         }
-
-        .status-cancelled {
-            background-color: #dc3545;
-            color: #fff;
+        .order-item-price {
+            font-size: 1.1rem;
+            font-weight: bold;
+            color: #2b9348; /* Green for the price */
         }
-
-        .show-more-btn {
-            background-color: #007bff;
-            color: white;
+        .reorder-button {
             padding: 8px 15px;
+            background-color: #ff5722;
+            color: #ffffff;
             border: none;
-            border-radius: 5px;
-            font-size: 14px;
+            border-radius: 25px;
+            font-size: 1rem;
+            font-weight: bold;
             cursor: pointer;
-            margin-top: 10px;
-            display: block;
-            width: 50%;
-            margin-left: auto;
-            margin-right: auto;
+            transition: background-color 0.3s ease;
         }
-
-        .show-more-btn:hover {
-            background-color: #0056b3;
+        .reorder-button:hover {
+            background-color: #e64a19;
+        }
+        footer {
+            background-color: #333333;
+            color: #ffffff;
+            text-align: center;
+            padding: 15px 10px;
+            margin-top: 20px;
         }
-
     </style>
 </head>
 <body>
 
     <div class="container">
-        <h2>Order History</h2>
-
-        <!-- Back to Menu Button -->
-        <a href="{{ url_for('menu') }}" class="back-button">Back to Menu</a>
-
-        {% if orders %}
-            {% for order in orders %}
-            <div class="order-card {% if loop.index > 3 %}hidden{% endif %}">
-                <p><strong>Date:</strong> {{ order['CreatedDate'][:10] }}</p>
-                <p><strong>Order:</strong> {{ order['Order_Details__c'] }}</p>
-                <p><strong>Total Amount:</strong> ${{ order['Total_Amount__c'] }}</p>
-                <p><strong>Discount:</strong> ${{ order['Discount__c'] }}</p>
-                <p><strong>Total Bill:</strong> ${{ order['Total_Bill__c'] }}</p>
-                <p class="order-status 
-                    {% if order['Order_Status__c'] == 'Pending' %}status-pending
-                    {% elif order['Order_Status__c'] == 'Completed' %}status-completed
-                    {% elif order['Order_Status__c'] == 'Cancelled' %}status-cancelled{% endif %}">
-                    {{ order['Order_Status__c'] }}
-                </p>
-            </div>
-            {% endfor %}
+        <div class="order-history-container">
+            <h4 class="mb-4 text-center">Your Order History</h4>
             
-            <!-- Show More / Show Less Button -->
-            {% if orders|length > 3 %}
-                <button class="show-more-btn" onclick="toggleOrders()">Show More</button>
+            {% if orders %}
+                {% for order in orders %}
+                    <h5>Order on: {{ order.CreatedDate }}</h5>
+                    {% for line in order.Order_Details__c.split('\n') %}
+                        {% set item_parts = line.split('|') %}
+                        <div class="order-item">
+                            <img src="{{ item_parts[4].strip().replace('Image:', '') }}" 
+                                 alt="{{ item_parts[0].strip() }}" 
+                                 onerror="this.src='/static/placeholder.jpg';">
+                            <div class="order-item-details">
+                                <div class="order-item-title">{{ item_parts[0].strip() }}</div>
+                                <div><small class="text-muted">Quantity: {{ item_parts[1].strip() }}</small></div>
+                            </div>
+                            <div class="order-item-price">${{ item_parts[3].strip().replace('Price:', '') }}</div>
+                            <button class="reorder-button" onclick="addToCart('{{ item_parts[0].strip() }}')">Reorder</button>
+                        </div>
+                    {% endfor %}
+                {% endfor %}
+            {% else %}
+                <p class="text-center">No orders found in your history.</p>
             {% endif %}
-        {% else %}
-            <p>No past orders found.</p>
-        {% endif %}
+
+        </div>
     </div>
 
-    <script>
-        function toggleOrders() {
-            let hiddenOrders = document.querySelectorAll(".order-card.hidden");
-            let button = document.querySelector(".show-more-btn");
+    <!-- Footer -->
+    <footer>
+        <p>Thank you for dining with us! <span>We look forward to serving you again.</span></p>
+    </footer>
 
-            if (hiddenOrders[0].style.display === "none" || hiddenOrders[0].style.display === "") {
-                hiddenOrders.forEach(order => order.style.display = "block");
-                button.textContent = "Show Less";
-            } else {
-                hiddenOrders.forEach(order => order.style.display = "none");
-                button.textContent = "Show More";
-            }
+    <script>
+        // Function to handle reordering an item
+        function addToCart(itemName) {
+            // You can send a request to the backend to add the item to the cart
+            fetch('/cart/add', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    itemName: itemName,  // Item to be reordered
+                }),
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    alert('Item added to cart successfully!');
+                } else {
+                    alert('Error: ' + data.error);
+                }
+            })
+            .catch(error => {
+                alert('An error occurred: ' + error);
+            });
         }
-
-        // Initially hide extra orders
-        document.addEventListener("DOMContentLoaded", () => {
-            document.querySelectorAll(".order-card.hidden").forEach(order => order.style.display = "none");
-        });
     </script>
 
 </body>