Update templates/previous_orders.html

templates/previous_orders.html

@@ -4,36 +4,28 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Previous Orders</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: #fdf4e3; /* Light cream background */
-            color: #333333; /* Dark gray text */
-            margin: 0;
-            padding: 0;
-            display: flex;
-            flex-direction: column;
-            min-height: 100vh;
+            background-color: #fdf4e3;
+            color: #333333;
         }
         .order-container {
             max-width: 768px;
             margin: 40px auto;
             padding: 20px;
-            background-color: #ffffff; /* White card background */
+            background-color: #ffffff;
             border-radius: 15px;
             box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
-            border: 1px solid #ffe5b4; /* Light orange border */
-            flex-grow: 1;
         }
         .cart-item {
             display: flex;
             align-items: center;
             justify-content: space-between;
-            background-color: #fffcf5; /* Slightly lighter beige */
+            background-color: #fffcf5;
             border-radius: 8px;
-            border: 1px solid #ffe5b4; /* Light orange border */
+            border: 1px solid #ffe5b4;
             padding: 10px;
             margin-bottom: 10px;
         }
@@ -42,7 +34,7 @@
             height: 70px;
             object-fit: cover;
             border-radius: 5px;
-            border: 1px solid #ffcc80; /* Light orange border around images */
+            border: 1px solid #ffcc80;
         }
         .cart-item-details {
             flex: 1;
@@ -51,7 +43,7 @@
         .cart-item-title {
             font-size: 1.2rem;
             font-weight: bold;
-            color: #c04e01; /* Warm orange color for the title */
+            color: #c04e01;
         }
         .cart-item-addons,
         .cart-item-instructions {
@@ -62,11 +54,16 @@
             text-align: right;
             margin-top: 15px;
         }
+        .total-price {
+            font-size: 1.5rem;
+            font-weight: bold;
+            color: #2b9348;
+        }
         .back-to-menu {
             display: block;
             margin: 30px auto 10px auto;
             padding: 10px 20px;
-            background-color: #ff5722; /* Bright orange button */
+            background-color: #ff5722;
             color: #ffffff;
             border: none;
             border-radius: 25px;
@@ -75,12 +72,13 @@
             text-align: center;
             text-decoration: none;
             width: 100%;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-            transition: background-color 0.3s ease;
         }
-        .back-to-menu:hover {
-            background-color: #e64a19;
-            text-decoration: none;
+        footer {
+            background-color: #333333;
+            color: #ffffff;
+            text-align: center;
+            padding: 15px 10px;
+            margin-top: auto;
         }
     </style>
 </head>
@@ -89,35 +87,29 @@
         <div class="order-container">
             <h4 class="mb-4 text-center">Your Previous Orders</h4>
 
-            {% if previous_orders %}
-                {% for order in previous_orders %}
-                    <h5 class="text-center mb-3">Order #{{ order.Order_Number__c }}</h5>
-
-                    {% for line in order.Order_Details__c.split('\n') %}
-                        {% set item_parts = line.split('|') %}
-                        <div class="cart-item">
-                            <!-- Item Image -->
-                            <img src="{{ item_parts[4].strip().replace('Image:', '') }}" 
-                                 alt="{{ item_parts[0].strip() }}" 
-                                 onerror="this.src='/static/placeholder.jpg';">
-
-                            <!-- Item Details -->
-                            <div class="cart-item-details">
-                                <div class="cart-item-title">{{ item_parts[0].strip() }}</div> <!-- Item Name -->
-                                <div class="cart-item-addons">
-                                    <small class="text-muted">Add-ons: {{ item_parts[1].strip().replace('Add-Ons:', '') }}</small>
+            {% if orders %}
+                {% for order in orders %}
+                    <div class="order-items">
+                        <h5 class="text-center">Order Date: {{ order.order_date }}</h5>
+                        {% for item in order.items %}
+                            <div class="cart-item">
+                                <!-- Item Image -->
+                                <img src="{{ item.image }}" alt="{{ item.name }}" onerror="this.src='/static/placeholder.jpg';">
+                                
+                                <!-- Item Details -->
+                                <div class="cart-item-details">
+                                    <div class="cart-item-title">{{ item.name }}</div>
+                                    <div class="cart-item-addons">Add-ons: {{ item.addons }}</div>
+                                    <div class="cart-item-instructions">Instructions: {{ item.instructions }}</div>
                                 </div>
-                                <div class="cart-item-instructions">
-                                    <small class="text-muted">Instructions: {{ item_parts[2].strip().replace('Instructions:', '') }}</small>
+                                
+                                <!-- Price -->
+                                <div class="cart-item-actions">
+                                    <strong>{{ item.price }}</strong>
                                 </div>
                             </div>
-
-                            <!-- Price -->
-                            <div class="cart-item-actions">
-                                <strong>{{ item_parts[3].strip().replace('Price:', '') }}</strong>
-                            </div>
-                        </div>
-                    {% endfor %}
+                        {% endfor %}
+                    </div>
                 {% endfor %}
             {% else %}
                 <p class="text-center">No previous orders found.</p>
@@ -127,5 +119,9 @@
             <a href="/menu" class="back-to-menu">Back to Menu</a>
         </div>
     </div>
+
+    <footer>
+        <p>Thank you for dining with us! <span>We look forward to serving you again.</span></p>
+    </footer>
 </body>
 </html>