Update templates/order.html

templates/order.html

@@ -9,8 +9,8 @@
     <style>
         body {
             font-family: 'Arial', sans-serif;
-            background-color:  #fdf4e3; /* Updated background color */
-            color: #333333; /* Dark gray text */
+            background-color: #fdf4e3;
+            color: #333333;
             margin: 0;
             padding: 0;
             display: flex;
@@ -21,7 +21,7 @@
             max-width: 768px;
             margin: 40px auto;
             padding: 20px;
-            background-color: #ffffff; /* Set the container background to white */
+            background-color: #ffffff;
             border-radius: 15px;
             box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
             border: 1px solid #ffffff;
@@ -30,9 +30,9 @@
         .cart-item {
             display: flex;
             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;
         }
@@ -41,7 +41,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;
@@ -50,17 +50,17 @@
         .cart-item-title {
             font-size: 1.2rem;
             font-weight: bold;
-            color: #000000; /* Change the color to black */
+            color: #000000;
         }
         .cart-item-addons,
         .cart-item-instructions {
             font-size: 0.9rem;
-            color: #000000; /* Change the color to black */
+            color: #000000;
         }
         .cart-item-actions {
             font-size: 1.2rem;
             font-weight: bold;
-            color: #2b9348; 
+            color: #2b9348;
         }
         .order-summary {
             text-align: right;
@@ -69,7 +69,7 @@
         .total-price {
             font-size: 1.5rem;
             font-weight: bold;
-            color: #2b9348; /* Green for the total price */
+            color: #2b9348;
         }
         .back-to-menu {
             display: block;
@@ -111,94 +111,99 @@
         }
         .yourorder {
             font-family: Serif;
-            color: #ff5722; /* Orange color for "Your Order Summary" */
-            font-size: 1.5rem; /* Adjusted for better visibility */
+            color: #ff5722;
+            font-size: 1.5rem;
             font-weight: bold;
         }
-        /* Remove any gap between Sub-Total and Discount */
         .d-flex {
-            margin-bottom: 0px !important; /* Remove margin */
+            margin-bottom: 0px !important;
         }
         .d-flex:first-child {
-            margin-top: 0px !important; /* Ensure no space above Sub-Total */
+            margin-top: 0px !important;
         }
-        /* Remove padding and margins from the individual fields */
         .d-flex .cart-item-actions {
-            margin-bottom: 0px !important; /* Remove margin between fields */
-        }
-    .cart-item-instructions {
-        word-wrap: break-word; /* Ensures text wraps to the next line */
-        white-space: normal;   /* Allows text to wrap naturally */
-        overflow-wrap: break-word; /* Breaks long words to prevent overflow */
-        max-width: 100%;       /* Ensures the text stays within the container's width */
-        line-height: 1.5;      /* Increases line height for better readability */
-        padding: 5px 0;        /* Adds some padding for better text spacing */
-        word-break: break-word; /* Prevents words from overflowing */
-    }
+            margin-bottom: 0px !important;
+        }
+        .cart-item-instructions {
+            word-wrap: break-word;
+            white-space: normal;
+            overflow-wrap: break-word;
+            max-width: 100%;
+            line-height: 1.5;
+            padding: 5px 0;
+            word-break: break-word;
+        }
+        .order-header {
+            font-size: 1.3rem;
+            font-weight: bold;
+            color: #ff5722;
+            margin-top: 20px;
+            margin-bottom: 10px;
+        }
     </style>
 </head>
 <body>
     <div class="container">
         <div class="order-container">
-            <h4 class="mb-4 text-center yourorder">Your Order Summary</h4>
+            <h4 class="mb-4 text-center yourorder">Your Pending Orders</h4>
 
-            {% if order %}
-                {% 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 & Quantity -->
+            {% if orders %}
+                {% for order in orders %}
+                    <div class="order-header">Order ID: {{ order.Id }}</div>
+                    {% 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';">
                             
-
-                            <div class="cart-item-addons">
-                                <small class="text-muted">Add-ons: {{ item_parts[1].strip().replace('Add-Ons:', '') }}</small>
+                            <!-- Item Details -->
+                            <div class="cart-item-details">
+                                <div class="cart-item-title">{{ item_parts[0].strip() }}</div>
+                                <div class="cart-item-addons">
+                                    <small class="text-muted">Add-ons: {{ item_parts[1].strip().replace('Add-Ons:', '') }}</small>
+                                </div>
+                                <div class="cart-item-instructions">
+                                    <small class="text-muted">Instructions: {{ item_parts[2].strip().replace('Instructions:', '') }}</small>
+                                </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">
+                                <span style="font-size: 16px; margin-right: 13px">{{ item_parts[3].strip().replace('Price:', '') }}</span>
                             </div>
                         </div>
-                        
-                        <!-- Price -->
-                        <div class="cart-item-actions m">
-                         <span style="font-size: 16px; margin-right: 13px">{{ item_parts[3].strip().replace('Price:', '') }}</span>
-                        </div>
-                    </div>
+                    {% endfor %}
                 {% endfor %}
-
-                <!-- Total Section (Updated for Combined Amounts) -->
+                
+                <!-- Aggregate Totals Section -->
                 <div class="container mt-5 cart-item">
                     <div class="container">
+                        {% if orders|length > 1 %}
+                            <h5 class="mb-3 text-center" style="color: #ff5722; font-weight: bold;">Summary of All Pending Orders</h5>
+                        {% endif %}
                         <div class="d-flex justify-content-between mb-3">
-                            <p><strong>Sub-Total:</strong></p>
-                            <p class="cart-item-actions" style="font-size: 16px;">${{ "%.2f"|format(order.Total_Amount__c) }}</p>
+                            <p><strong>Total Sub-Total:</strong></p>
+                            <p class="cart-item-actions" style="font-size: 16px;">${{ "%.2f"|format(total_subtotal) }}</p>
                         </div>
                         <div class="d-flex justify-content-between mb-3">
-                            <p><strong>Discount:</strong></p>
-                            <p class="cart-item-actions" style="font-size: 16px;">${{ "%.2f"|format(order.Discount__c) }}</p>
+                            <p><strong>Total Discount:</strong></p>
+                            <p class="cart-item-actions" style="font-size: 16px;">${{ "%.2f"|format(total_discount) }}</p>
                         </div>
-                        <!-- Add dotted line here -->
                         <div style="border-bottom: 2px dotted #000; margin-bottom: 10px;"></div>
                         <div class="d-flex justify-content-between mb-3">
                             <p><strong>Total Bill:</strong></p>
-                            <p class="cart-item-actions" style="font-size: 16px;">${{ "%.2f"|format(order.Total_Bill__c) }}</p>
+                            <p class="cart-item-actions" style="font-size: 16px;">${{ "%.2f"|format(total_bill) }}</p>
                         </div>
                     </div>
                 </div>
-
             {% else %}
-                <p class="text-center">No order details available.</p>
+                <p class="text-center">No pending order details available.</p>
             {% endif %}
 
             <!-- Back to Menu Button -->
             <a href="{{ url_for('combined_summary.combined_summary') }}" class="back-to-menu">Back</a>
-
         </div>
     </div>
 
@@ -207,4 +212,4 @@
         <p>Thank you for dining with us! <span>We look forward to serving you again.</span></p>
     </footer>
 </body>
-</html>
+</html>