Hugging Face's logo

Spaces:
lokeshloki143
/
lokesh143
Sleeping

App Files Community
lokeshloki143 commited on
Commit
d612240
·
verified ·
1 Parent(s): 82178b9

Update templates/order.html

Browse files
Files changed (1) hide show
  1. templates/order.html +211 -543
templates/order.html CHANGED
@@ -1,555 +1,223 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Order Confirmation</title>
7
- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
8
- <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
9
- <style>
10
- body {
11
- font-family: Arial, sans-serif;
12
- background-color: #fdf4e3;
13
- color: #333;
14
- }
15
- .top-bar {
16
- background-color: #FF6F3C;
17
- width: 100%;
18
- padding: 10px 15px;
19
- display: flex;
20
- align-items: center;
21
- }
22
- .back-link {
23
- display: flex;
24
- align-items: center;
25
- text-decoration: none;
26
- }
27
- .back-arrow {
28
- font-size: 1.8rem;
29
- color: #000;
30
- font-weight: bold;
31
- }
32
- .back-label {
33
- margin-left: 10px;
34
- color: white;
35
- font-weight: bold;
36
- font-size: 1rem;
37
- }
38
- .order-heading {
39
- color: #000;
40
- font-size: 2.5rem;
41
- font-weight: bold;
42
- text-align: center;
43
- margin-top: 30px;
44
- }
45
- .container {
46
- max-width: 768px;
47
- margin: 20px auto;
48
- padding: 15px;
49
- }
50
- .order-details {
51
- background-color: #fff;
52
- padding: 20px;
53
- border-radius: 10px;
54
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
55
- }
56
- .order-item {
57
- display: flex;
58
- justify-content: space-between;
59
- padding: 10px 0;
60
- border-bottom: 1px solid #f0f0f0;
61
- }
62
- .order-item-details {
63
- flex: 1;
64
- }
65
- .order-item-details small {
66
- display: block;
67
- color: #666;
68
- }
69
- .order-item-price {
70
- font-weight: bold;
71
- color: #2e7d32;
72
- }
73
- .order-summary {
74
- margin-top: 20px;
75
- }
76
- .order-summary .bill-details {
77
- display: grid;
78
- grid-template-columns: 1fr 1fr;
79
- gap: 10px;
80
- }
81
- .bill-details .label {
82
- font-weight: 600;
83
- }
84
- .bill-details .amount {
85
- text-align: right;
86
- font-weight: 600;
87
- color: #2e7d32;
88
- }
89
- .dotted-line {
90
- border-bottom: 2px dotted #ccc;
91
- margin: 15px 0;
92
- }
93
- .total-bill {
94
- display: grid;
95
- grid-template-columns: 1fr 1fr;
96
- font-weight: 600;
97
- font-size: 1.2rem;
98
- }
99
- .add-more-btn {
100
- background-color: #A52A2A;
101
- color: #fff;
102
- padding: 12px;
103
- border-radius: 8px;
104
- border: none;
105
- width: 100%;
106
- font-size: 1rem;
107
- cursor: pointer;
108
- margin-top: 20px;
109
- }
110
- .modal {
111
- display: none;
112
- position: fixed;
113
- top: 0;
114
- left: 0;
115
- width: 100%;
116
- height: 100%;
117
- background-color: rgba(0, 0, 0, 0.5);
118
- z-index: 1000;
119
- justify-content: center;
120
- align-items: center;
121
- }
122
- .modal-content {
123
- background-color: #fff;
124
- padding: 20px;
125
- border-radius: 10px;
126
- width: 90%;
127
- max-width: 600px;
128
- max-height: 80vh;
129
- overflow-y: auto;
130
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
131
- }
132
- .modal-content h3 {
133
- text-align: center;
134
- margin-bottom: 20px;
135
- }
136
- .close-modal {
137
- position: absolute;
138
- top: 10px;
139
- right: 15px;
140
- font-size: 1.5rem;
141
- cursor: pointer;
142
- }
143
- .menu-items-container {
144
- display: flex;
145
- flex-wrap: wrap;
146
- gap: 10px;
147
- padding: 10px;
148
- }
149
- .menu-item {
150
- display: flex;
151
- align-items: center;
152
- justify-content: space-between;
153
- width: calc(50% - 10px);
154
- padding: 10px;
155
- border-radius: 8px;
156
- background-color: #fff;
157
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
158
- border: 2px solid #fdf4e3;
159
- min-height: 70px;
160
- }
161
- .menu-item img {
162
- width: 50px;
163
- height: 50px;
164
- object-fit: cover;
165
- border-radius: 5px;
166
- margin-right: 10px;
167
- border: 1px solid #ffcc80;
168
- }
169
- .menu-item:hover img {
170
- transform: scale(1.05);
171
- }
172
- .menu-item-details {
173
- flex-grow: 1;
174
- font-size: 0.9rem;
175
- }
176
- .menu-item-details strong {
177
- font-size: 1rem;
178
- }
179
- .menu-item-details small {
180
- display: block;
181
- color: #666;
182
- font-size: 0.8rem;
183
- }
184
- .add-back-button {
185
- font-size: 1rem;
186
- padding: 0;
187
- width: 30px;
188
- height: 30px;
189
- background-color: #fff;
190
- color: #0FAA39;
191
- border: 2px solid #0FAA39;
192
- border-radius: 50%;
193
- cursor: pointer;
194
- }
195
- .quantity-selector {
196
- display: none;
197
- align-items: center;
198
- }
199
- .quantity-selector button {
200
- width: 28px;
201
- height: 28px;
202
- border: none;
203
- background-color: #f0f0f0;
204
- font-size: 1rem;
205
- border-radius: 4px;
206
- }
207
- .quantity-selector input {
208
- width: 40px;
209
- text-align: center;
210
- border: none;
211
- background-color: #f8f9fa;
212
- font-size: 1rem;
213
- margin: 0 5px;
214
- border-radius: 4px;
215
- }
216
- .customization-section {
217
- display: none;
218
- position: absolute;
219
- top: 100%;
220
- left: 0;
221
- right: 0;
222
- background-color: #fff;
223
- padding: 15px;
224
- border-radius: 8px;
225
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
226
- z-index: 10;
227
- border: 2px solid #fdf4e3;
228
- max-height: 300px;
229
- overflow-y: auto;
230
- }
231
- .customization-section.show {
232
- display: block;
233
- }
234
- .customization-section h4 {
235
- font-size: 1.2rem;
236
- margin-bottom: 10px;
237
- }
238
- .customization-section label {
239
- display: block;
240
- margin-bottom: 5px;
241
- font-size: 0.9rem;
242
- }
243
- .customization-section textarea {
244
- width: 100%;
245
- height: 60px;
246
- margin-top: 10px;
247
- padding: 5px;
248
- border: 1px solid #ccc;
249
- border-radius: 5px;
250
- font-size: 0.9rem;
251
- }
252
- .customization-actions {
253
- display: flex;
254
- justify-content: space-between;
255
- margin-top: 15px;
256
- }
257
- .customization-actions button {
258
- padding: 8px;
259
- border: none;
260
- border-radius: 5px;
261
- cursor: pointer;
262
- width: 48%;
263
- font-size: 0.9rem;
264
- color: #fff;
265
- }
266
- .add-to-cart-btn {
267
- background-color: #A52A2A;
268
- }
269
- .cancel-customization-btn {
270
- background-color: #6c757d;
271
- }
272
- </style>
273
  </head>
274
  <body>
275
- <div class="top-bar">
276
- <a href="/menu" class="back-link">
277
- <span class="back-arrow">⟨</span>
278
- <span class="back-label">Back to Menu</span>
279
- </a>
280
- </div>
281
-
282
- <div class="order-heading">Order Confirmation</div>
283
-
284
- <div class="container">
285
- <div class="order-details">
286
- <h4>Order #{{ order_id }}</h4>
287
- <div id="orderItems"></div>
288
- <div class="order-summary">
289
- <div class="bill-details">
290
- <div class="label">Subtotal</div>
291
- <div class="amount" id="orderSubtotal">$0.00</div>
292
- <div class="label">Discount</div>
293
- <div class="amount" id="orderDiscount">$0.00</div>
294
- </div>
295
- <div class="dotted-line"></div>
296
- <div class="total-bill">
297
- <div class="label">Total</div>
298
- <div class="amount" id="orderTotal">$0.00</div>
299
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
300
  </div>
301
- <button class="add-more-btn" onclick="openAddMoreModal()">Add More Items</button>
302
  </div>
303
- </div>
304
 
305
- <div class="modal" id="addMoreModal">
306
- <div class="modal-content">
307
- <span class="close-modal" onclick="closeAddMoreModal()">×</span>
308
- <h3>Add More Items</h3>
309
- <div class="menu-items-container" id="menuItems"></div>
310
- </div>
311
  </div>
 
312
 
313
- <script>
314
- let menuItems = [];
315
- let availableAddOns = [];
316
- const orderId = "{{ order_id }}";
317
- const customerEmail = "{{ customer_email }}";
318
-
319
- // Fetch order details
320
- function fetchOrderDetails() {
321
- fetch('/cart/checkout', {
322
- method: 'POST',
323
- headers: { 'Content-Type': 'application/json' },
324
- body: JSON.stringify({ selectedCoupon: null })
325
- })
326
- .then(response => response.json())
327
- .then(data => {
328
- if (data.success) {
329
- const orderItemsContainer = document.getElementById('orderItems');
330
- orderItemsContainer.innerHTML = '';
331
- data.cart.items.forEach(item => {
332
- const itemElement = document.createElement('div');
333
- itemElement.className = 'order-item';
334
- itemElement.innerHTML = `
335
- <div class="order-item-details">
336
- <strong>${item.name} x${item.quantity}</strong>
337
- <small>Add-ons: ${item.addons}</small>
338
- <small>Instructions: ${item.instructions}</small>
339
- </div>
340
- <div class="order-item-price">$${item.price.toFixed(2)}</div>
341
- `;
342
- orderItemsContainer.appendChild(itemElement);
343
- });
344
- document.getElementById('orderSubtotal').innerText = `$${data.cart.subtotal.toFixed(2)}`;
345
- document.getElementById('orderDiscount').innerText = `$${data.cart.discount.toFixed(2)}`;
346
- document.getElementById('orderTotal').innerText = `$${data.cart.total.toFixed(2)}`;
347
- } else {
348
- alert('Error fetching order details: ' + data.error);
349
- }
350
- })
351
- .catch(err => {
352
- console.error('Error fetching order:', err);
353
- alert('An error occurred.');
354
- });
355
- }
356
-
357
- // Fetch add-ons
358
- function fetchAddOns() {
359
- return fetch('/cart/fetch_add_ons', {
360
- method: 'GET',
361
- headers: { 'Content-Type': 'application/json' }
362
- })
363
- .then(response => response.json())
364
- .then(data => {
365
- if (data.success) {
366
- availableAddOns = data.add_ons;
367
- } else {
368
- console.error('Error fetching add-ons:', data.error);
369
- availableAddOns = [];
370
- }
371
- })
372
- .catch(err => {
373
- console.error('Error fetching add-ons:', err);
374
- availableAddOns = [];
375
- });
376
- }
377
-
378
- // Fetch menu items
379
- function fetchMenuItems() {
380
- fetch('/cart/fetch_menu_items', {
381
- method: 'GET',
382
- headers: { 'Content-Type': 'application/json' }
383
- })
384
- .then(response => response.json())
385
- .then(data => {
386
- if (data.success) {
387
- menuItems = data.menu_items;
388
- displayMenuItems();
389
- } else {
390
- alert('Error fetching menu items: ' + data.error);
391
- }
392
- })
393
- .catch(err => {
394
- console.error('Error fetching menu items:', err);
395
- alert('An error occurred.');
396
- });
397
- }
398
-
399
- function openAddMoreModal() {
400
- fetchAddOns().then(() => {
401
- fetchMenuItems();
402
- document.getElementById('addMoreModal').style.display = 'flex';
403
- });
404
- }
405
-
406
- function displayMenuItems() {
407
- const menuItemsContainer = document.getElementById('menuItems');
408
- menuItemsContainer.innerHTML = '';
409
- menuItems.forEach(item => {
410
- const itemElement = document.createElement('div');
411
- itemElement.className = 'menu-item';
412
- itemElement.innerHTML = `
413
- <img src="${item.Image1__c}" alt="${item.Name}" onerror="this.src='/static/placeholder.jpg';">
414
- <div class="menu-item-details">
415
- <strong>${item.Name}</strong>
416
- <small>${item.Veg_NonVeg__c} | ${item.Section__c}</small>
417
- <small>$${item.Price__c.toFixed(2)}</small>
418
- </div>
419
- <button class="add-back-button" onclick="showQuantitySelector('${item.Name}', ${item.Price__c}, '${item.Image1__c}', this)">+</button>
420
- <div class="quantity-selector" data-item-name="${item.Name}">
421
- <button onclick="updateMenuItemQuantity('${item.Name}', 'decrease')">-</button>
422
- <input type="text" value="1" readonly data-item-name="${item.Name}">
423
- <button onclick="updateMenuItemQuantity('${item.Name}', 'increase')">+</button>
424
- </div>
425
- <div class="customization-section" data-item-name="${item.Name}">
426
- <h4>Customize ${item.Name}</h4>
427
- <div id="addOns-${item.Name}">
428
- <strong>Add-Ons</strong>
429
- ${availableAddOns.length > 0 ? availableAddOns.map(addon => `
430
- <label>
431
- <input type="checkbox" value="${addon.name}" data-price="${addon.price}">
432
- ${addon.name}
433
- </label>
434
- `).join('') : '<p>No add-ons available</p>'}
435
- </div>
436
- <div>
437
- <strong>Special Instructions</strong>
438
- <textarea placeholder="e.g., Less spicy"></textarea>
439
- </div>
440
- <div class="customization-actions">
441
- <button class="add-to-cart-btn" onclick="addToOrder('${item.Name}', ${item.Price__c}, '${item.Image1__c}')">Add to Order</button>
442
- <button class="cancel-customization-btn" onclick="cancelCustomization('${item.Name}')">Cancel</button>
443
- </div>
444
- </div>
445
- `;
446
- menuItemsContainer.appendChild(itemElement);
447
- });
448
- }
449
-
450
- function showQuantitySelector(itemName, itemPrice, itemImage, buttonElement) {
451
- document.querySelectorAll('.quantity-selector').forEach(selector => {
452
- selector.style.display = 'none';
453
- selector.querySelector('input').value = 1;
454
- });
455
- document.querySelectorAll('.customization-section').forEach(section => {
456
- section.classList.remove('show');
457
- section.querySelectorAll('input[type="checkbox"]').forEach(checkbox => checkbox.checked = false);
458
- section.querySelector('textarea').value = '';
459
- });
460
- document.querySelectorAll('.add-back-button').forEach(btn => btn.style.display = 'inline-block');
461
-
462
- const quantitySelector = buttonElement.nextElementSibling;
463
- quantitySelector.style.display = 'flex';
464
- buttonElement.style.display = 'none';
465
-
466
- const customizationSection = quantitySelector.nextElementSibling;
467
- customizationSection.classList.add('show');
468
- }
469
-
470
- function updateMenuItemQuantity(itemName, action) {
471
- const quantityInput = document.querySelector(`.quantity-selector[data-item-name="${itemName}"] input`);
472
- let quantity = parseInt(quantityInput.value);
473
- if (action === 'increase') {
474
- quantity++;
475
- } else if (action === 'decrease' && quantity > 1) {
476
- quantity--;
477
- }
478
- quantityInput.value = quantity;
479
- }
480
-
481
- function cancelCustomization(itemName) {
482
- const quantitySelector = document.querySelector(`.quantity-selector[data-item-name="${itemName}"]`);
483
- const customizationSection = quantitySelector.nextElementSibling;
484
- const addButton = quantitySelector.previousElementSibling;
485
-
486
- quantitySelector.querySelector('input').value = 1;
487
- quantitySelector.style.display = 'none';
488
- customizationSection.classList.remove('show');
489
- addButton.style.display = 'inline-block';
490
- customizationSection.querySelectorAll('input[type="checkbox"]').forEach(checkbox => checkbox.checked = false);
491
- customizationSection.querySelector('textarea').value = '';
492
- }
493
-
494
- function addToOrder(itemName, itemPrice, itemImage) {
495
- const quantitySelector = document.querySelector(`.quantity-selector[data-item-name="${itemName}"]`);
496
- const quantity = parseInt(quantitySelector.querySelector('input').value);
497
- if (isNaN(quantity) || quantity < 1) {
498
- alert('Invalid quantity!');
499
- return;
500
- }
501
- const customizationSection = document.querySelector(`.customization-section[data-item-name="${itemName}"]`);
502
- const addOns = Array.from(customizationSection.querySelectorAll('input[type="checkbox"]:checked')).map(checkbox => checkbox.value);
503
- const instructions = customizationSection.querySelector('textarea').value.trim();
504
-
505
- const data = {
506
- item_name: itemName,
507
- item_price: itemPrice,
508
- item_image: itemImage,
509
- addons: addOns,
510
- instructions: instructions,
511
- customer_email: customerEmail,
512
- quantity: quantity,
513
- order_id: orderId
514
- };
515
-
516
- fetch('/cart/add_to_pending_order', {
517
- method: 'POST',
518
- headers: { 'Content-Type': 'application/json' },
519
- body: JSON.stringify(data)
520
- })
521
- .then(response => response.json())
522
- .then(data => {
523
- if (data.success) {
524
- alert('Item added to order!');
525
- closeAddMoreModal();
526
- fetchOrderDetails();
527
- } else {
528
- alert('Error adding item: ' + data.error);
529
- }
530
- })
531
- .catch(err => {
532
- console.error('Error adding item:', err);
533
- alert('An error occurred.');
534
- });
535
- }
536
-
537
- function closeAddMoreModal() {
538
- document.getElementById('addMoreModal').style.display = 'none';
539
- document.querySelectorAll('.quantity-selector').forEach(selector => {
540
- selector.style.display = 'none';
541
- selector.querySelector('input').value = 1;
542
- });
543
- document.querySelectorAll('.customization-section').forEach(section => {
544
- section.classList.remove('show');
545
- section.querySelectorAll('input[type="checkbox"]').forEach(checkbox => checkbox.checked = false);
546
- section.querySelector('textarea').value = '';
547
- });
548
- document.querySelectorAll('.add-back-button').forEach(btn => btn.style.display = 'inline-block');
549
- }
550
-
551
- // Load order details on page load
552
- window.onload = fetchOrderDetails;
553
- </script>
554
  </body>
555
  </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Order Summary</title>
7
+ <!-- Bootstrap CSS -->
8
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
9
+ <style>
10
+ body {
11
+ font-family: 'Arial', sans-serif;
12
+ background-color: #fdf4e3;
13
+ color: #333333;
14
+ margin: 0;
15
+ padding: 0;
16
+ display: flex;
17
+ flex-direction: column;
18
+ min-height: 100vh;
19
+ }
20
+
21
+ .top-bar {
22
+ background-color: #FF6F3C;
23
+ width: 100%;
24
+ padding: 10px 15px;
25
+ display: flex;
26
+ align-items: center;
27
+ box-sizing: border-box;
28
+ }
29
+
30
+ .back-link {
31
+ display: flex;
32
+ align-items: center;
33
+ text-decoration: none;
34
+ }
35
+
36
+ .back-arrow {
37
+ font-size: 1.8rem;
38
+ color: #000;
39
+ font-weight: bold;
40
+ }
41
+
42
+ .back-label {
43
+ margin-left: 10px;
44
+ color: white;
45
+ font-weight: bold;
46
+ font-size: 1rem;
47
+ }
48
+
49
+ .yourorder-title {
50
+ font-family: Serif;
51
+ color: #000000;
52
+ font-weight: bold;
53
+ text-align: center;
54
+ margin: 20px 15px 10px;
55
+ font-size: clamp(1.2rem, 5vw, 2rem); /* Responsive font size */
56
+ }
57
+
58
+ .order-container {
59
+ max-width: 768px;
60
+ margin: 40px auto;
61
+ padding: 20px;
62
+ background-color: #ffffff;
63
+ border-radius: 15px;
64
+ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
65
+ border: 1px solid #ffffff;
66
+ flex-grow: 1;
67
+ }
68
+
69
+ .cart-item {
70
+ display: flex;
71
+ justify-content: space-between;
72
+ background-color: #fffcf5;
73
+ border-radius: 8px;
74
+ border: 1px solid #ffe5b4;
75
+ padding: 10px;
76
+ margin-bottom: 10px;
77
+ }
78
+
79
+ .cart-item img {
80
+ width: 70px;
81
+ height: 70px;
82
+ object-fit: cover;
83
+ border-radius: 5px;
84
+ border: 1px solid #ffcc80;
85
+ }
86
+
87
+ .cart-item-details {
88
+ flex: 1;
89
+ margin-left: 15px;
90
+ }
91
+
92
+ .cart-item-title {
93
+ font-size: 1.2rem;
94
+ font-weight: bold;
95
+ color: #000000;
96
+ }
97
+
98
+ .cart-item-addons,
99
+ .cart-item-instructions {
100
+ font-size: 0.9rem;
101
+ color: #000000;
102
+ word-wrap: break-word;
103
+ overflow-wrap: break-word;
104
+ white-space: normal;
105
+ line-height: 1.5;
106
+ word-break: break-all;
107
+ }
108
+
109
+ .cart-item-actions {
110
+ font-size: 1.2rem;
111
+ font-weight: bold;
112
+ color: #2b9348;
113
+ }
114
+
115
+ .order-summary {
116
+ text-align: right;
117
+ margin-top: 15px;
118
+ }
119
+
120
+ .total-price {
121
+ font-size: 1.5rem;
122
+ font-weight: bold;
123
+ color: #2b9348;
124
+ }
125
+
126
+ footer {
127
+ background-color: #333333;
128
+ color: #ffffff;
129
+ text-align: center;
130
+ padding: 15px 10px;
131
+ margin-top: auto;
132
+ }
133
+
134
+ footer p {
135
+ margin: 0;
136
+ font-size: 1rem;
137
+ }
138
+
139
+ footer p span {
140
+ color: #ffcc00;
141
+ font-weight: bold;
142
+ }
143
+
144
+ .d-flex {
145
+ margin-bottom: 0px !important;
146
+ }
147
+
148
+ .d-flex:first-child {
149
+ margin-top: 0px !important;
150
+ }
151
+
152
+ .d-flex .cart-item-actions {
153
+ margin-bottom: 0px !important;
154
+ }
155
+ </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
156
  </head>
157
  <body>
158
+ <!-- Top Orange Label Bar -->
159
+ <div class="top-bar">
160
+ <a href="{{ url_for('combined_summary.combined_summary') }}" class="back-link">
161
+ <span class="back-arrow">⟨</span>
162
+ <span class="back-label">Summary </span>
163
+ </a>
164
+ </div>
165
+
166
+ <!-- Title (centered and responsive) -->
167
+ <h1 class="yourorder-title">Your Order Summary</h1>
168
+
169
+ <div class="container">
170
+ <div class="order-container">
171
+ {% if order %}
172
+ {% for line in order.Order_Details__c.split('\n') %}
173
+ {% set item_parts = line.split('|') %}
174
+ <div class="cart-item">
175
+ <img src="{{ item_parts[4].strip().replace('Image:', '') }}"
176
+ alt="{{ item_parts[0].strip() }}"
177
+ onerror="this.src='/static/placeholder.jpg';">
178
+ <div class="cart-item-details">
179
+ <div class="cart-item-title">{{ item_parts[0].strip() }}</div>
180
+ <div class="cart-item-addons">
181
+ <small class="text-muted">Add-ons: {{ item_parts[1].strip().replace('Add-Ons:', '') }}</small>
182
+ </div>
183
+ <div class="cart-item-instructions">
184
+ <small class="text-muted">Instructions: {{ item_parts[2].strip().replace('Instructions:', '') }}</small>
185
+ </div>
186
+ </div>
187
+ <div class="cart-item-actions">
188
+ <span style="font-size: 16px; margin-right: 13px">{{ item_parts[3].strip().replace('Price:', '') }}</span>
189
+ </div>
190
+ </div>
191
+ {% endfor %}
192
+
193
+ <!-- Total Section -->
194
+ <div class="container mt-5 cart-item">
195
+ <div class="container">
196
+ <div class="d-flex justify-content-between mb-3">
197
+ <p><strong>Sub-Total:</strong></p>
198
+ <p class="cart-item-actions" style="font-size: 16px;">${{ order.Total_Amount__c }}</p>
199
+ </div>
200
+ <div class="d-flex justify-content-between mb-3">
201
+ <p><strong>Discount:</strong></p>
202
+ <p class="cart-item-actions" style="font-size: 16px;">${{ "%.2f"|format(order.Discount__c) }}</p>
203
+ </div>
204
+ <div style="border-bottom: 2px dotted #000; margin-bottom: 10px;"></div>
205
+ <div class="d-flex justify-content-between mb-3">
206
+ <p><strong>Total Bill:</strong></p>
207
+ <p class="cart-item-actions" style="font-size: 16px;">${{ "%.2f"|format(order.Total_Bill__c) }}</p>
208
  </div>
209
+ </div>
210
  </div>
 
211
 
212
+ {% else %}
213
+ <p class="text-center">No order details available.</p>
214
+ {% endif %}
 
 
 
215
  </div>
216
+ </div>
217
 
218
+ <!-- Footer -->
219
+ <footer>
220
+ <p>Thanks for choosing to dine with us! <span>We look forward to serving you again.</span></p>
221
+ </footer>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
222
  </body>
223
  </html>