| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Your Bill</title> |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet"> |
| <style> |
| body { |
| font-family: Arial, sans-serif; |
| background-color: #fdf4e3; |
| color: #333; |
| } |
| .top-bar { |
| background-color: #FF6F3C; |
| width: 100%; |
| padding: 10px 15px; |
| display: flex; |
| align-items: center; |
| } |
| .back-link { |
| display: flex; |
| align-items: center; |
| text-decoration: none; |
| } |
| .back-arrow { |
| font-size: 1.8rem; |
| color: #000; |
| font-weight: bold; |
| } |
| .back-label { |
| margin-left: 10px; |
| color: white; |
| font-weight: bold; |
| font-size: 1rem; |
| } |
| .order-heading { |
| color: #000; |
| font-size: 2.5rem; |
| font-weight: bold; |
| text-align: center; |
| margin-top: 30px; |
| } |
| .bill-container { |
| max-width: 768px; |
| margin: 20px auto; |
| padding: 15px; |
| background-color: #FFFFFF; |
| border-radius: 10px; |
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); |
| } |
| .bill-item { |
| display: flex; |
| align-items: flex-start; |
| justify-content: space-between; |
| border: 1px solid #fdf4e3; |
| padding: 15px; |
| background-color: #fff; |
| border-radius: 8px; |
| margin-bottom: 10px; |
| } |
| .image-wrapper { |
| width: 80px; |
| height: 80px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| .bill-item img { |
| width: 70px; |
| height: 70px; |
| object-fit: cover; |
| border-radius: 5px; |
| border: 1px solid #ffcc80; |
| } |
| .bill-item img:hover { |
| transform: scale(1.05); |
| } |
| .bill-item-details { |
| flex: 1; |
| margin-left: 15px; |
| } |
| .bill-item-title { |
| font-size: 1.1rem; |
| font-weight: bold; |
| } |
| .text-primary { |
| color: #2e7d32; |
| text-align: right; |
| font-weight: bold; |
| } |
| .bill-summary { |
| text-align: left; |
| margin-top: 15px; |
| padding: 20px; |
| background-color: #fff; |
| border-radius: 12px; |
| border: 2px solid #fdf4e3; |
| } |
| .bill-details { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| grid-gap: 10px; |
| margin-bottom: 10px; |
| } |
| .bill-details .label { |
| font-weight: 600; |
| font-size: 1rem; |
| } |
| .bill-details .amount { |
| text-align: right; |
| font-weight: 600; |
| font-size: 1rem; |
| } |
| .dotted-line { |
| border-bottom: 2px dotted #ccc; |
| margin: 15px 0; |
| } |
| .total-bill { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| font-weight: 600; |
| font-size: 1.2rem; |
| } |
| .total-bill .amount { |
| text-align: right; |
| color: #2e7d32; |
| } |
| .generate-bill-button { |
| background-color: #A52A2A; |
| color: #ffffff; |
| padding: 12px; |
| border-radius: 8px; |
| border: none; |
| width: 100%; |
| font-size: 1rem; |
| cursor: pointer; |
| margin-top: 15px; |
| } |
| .confirm-order-button { |
| background-color: #2e7d32; |
| color: #ffffff; |
| padding: 12px; |
| border-radius: 8px; |
| border: none; |
| width: 100%; |
| font-size: 1rem; |
| cursor: pointer; |
| margin-top: 10px; |
| } |
| .modal { |
| display: none; |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background-color: rgba(0, 0, 0, 0.5); |
| z-index: 1000; |
| justify-content: center; |
| align-items: center; |
| } |
| .modal-content { |
| background-color: #fff; |
| padding: 20px; |
| border-radius: 10px; |
| width: 90%; |
| max-width: 600px; |
| max-height: 80vh; |
| overflow-y: auto; |
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); |
| } |
| .modal-content h3 { |
| text-align: center; |
| margin-bottom: 20px; |
| color: #333; |
| } |
| .close-modal { |
| position: absolute; |
| top: 10px; |
| right: 15px; |
| font-size: 1.5rem; |
| cursor: pointer; |
| color: #333; |
| } |
| .menu-items-container { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 10px; |
| padding: 10px; |
| } |
| .menu-item { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| width: calc(50% - 10px); |
| padding: 10px; |
| border-radius: 8px; |
| background-color: #fff; |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); |
| border: 2px solid #fdf4e3; |
| min-height: 70px; |
| } |
| .menu-item img { |
| width: 50px; |
| height: 50px; |
| object-fit: cover; |
| border-radius: 5px; |
| margin-right: 10px; |
| border: 1px solid #ffcc80; |
| } |
| .menu-item:hover img { |
| transform: scale(1.05); |
| } |
| .menu-item-details { |
| flex-grow: 1; |
| font-size: 0.9rem; |
| } |
| .menu-item-details strong { |
| font-size: 1rem; |
| } |
| .menu-item-details small { |
| display: block; |
| color: #666; |
| font-size: 0.8rem; |
| } |
| .quantity-selector { |
| display: none; |
| align-items: center; |
| } |
| .quantity-selector button { |
| width: 28px; |
| height: 28px; |
| border: none; |
| background-color: #f0f0f0; |
| font-size: 1rem; |
| font-weight: bold; |
| cursor: pointer; |
| border-radius: 4px; |
| } |
| .quantity-selector input { |
| width: 40px; |
| text-align: center; |
| border: none; |
| background-color: #f8f9fa; |
| font-size: 1rem; |
| margin: 0 5px; |
| border-radius: 4px; |
| } |
| .customization-section { |
| display: none; |
| position: absolute; |
| top: 100%; |
| left: 0; |
| right: 0; |
| background-color: #fff; |
| padding: 15px; |
| border-radius: 8px; |
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); |
| z-index: 10; |
| border: 2px solid #fdf4e3; |
| max-height: 300px; |
| overflow-y: auto; |
| } |
| .customization-section.show { |
| display: block; |
| } |
| .customization-section h4 { |
| font-size: 1.2rem; |
| margin-bottom: 10px; |
| } |
| .customization-section label { |
| display: block; |
| margin-bottom: 5px; |
| font-size: 0.9rem; |
| } |
| .customization-section textarea { |
| width: 100%; |
| height: 60px; |
| margin-top: 10px; |
| padding: 5px; |
| border: 1px solid #ccc; |
| border-radius: 5px; |
| font-size: 0.9rem; |
| } |
| .customization-actions { |
| display: flex; |
| justify-content: space-between; |
| margin-top: 15px; |
| } |
| .customization-actions button { |
| padding: 8px; |
| border: none; |
| border-radius: 5px; |
| cursor: pointer; |
| width: 48%; |
| text-align: center; |
| font-size: 0.9rem; |
| color: #fff; |
| } |
| .add-to-cart-btn { |
| background-color: #A52A2A; |
| } |
| .cancel-customization-btn { |
| background-color: #6c757d; |
| } |
| .modal-actions { |
| display: flex; |
| justify-content: space-between; |
| margin-top: 20px; |
| } |
| .action-btn { |
| padding: 10px; |
| border: none; |
| border-radius: 8px; |
| cursor: pointer; |
| width: 48%; |
| text-align: center; |
| color: #fff; |
| } |
| .view-bill-btn { |
| background-color: #A52A2A; |
| } |
| .cancel-btn { |
| background-color: #6c757d; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="top-bar"> |
| <a href="/cart" class="back-link"> |
| <span class="back-arrow">⟨</span> |
| <span class="back-label">Back to Cart</span> |
| </a> |
| </div> |
|
|
| <div class="order-heading">Your Bill</div> |
|
|
| <div class="container"> |
| <div class="bill-container"> |
| {% for item in cart_items %} |
| <div class="bill-item"> |
| <div class="image-wrapper"> |
| <img src="{{ item.Image1__c }}" alt="{{ item.Name }}" onerror="this.src='/static/placeholder.jpg';"> |
| </div> |
| <div class="bill-item-details"> |
| <div class="bill-item-title">{{ item.Name }} x{{ item.Quantity__c }}</div> |
| <div class="bill-item-addons"> |
| <small class="text-muted">Add-ons: {{ item.Add_Ons__c }}</small> |
| </div> |
| <div class="bill-item-instructions"> |
| <small class="text-muted">Instructions: {{ item.Instructions__c or "None" }}</small> |
| </div> |
| </div> |
| <div class="text-primary">${{ item.Price__c }}</div> |
| </div> |
| {% else %} |
| <p>No items in your bill.</p> |
| {% endfor %} |
|
|
| <div class="bill-summary"> |
| <div class="bill-details"> |
| <div class="label">Subtotal</div> |
| <div class="amount">${{ subtotal }}</div> |
| </div> |
| <div class="dotted-line"></div> |
| <div class="total-bill"> |
| <div class="label">Total</div> |
| <div class="amount">${{ subtotal }}</div> |
| </div> |
| <button class="generate-bill-button" onclick="generateBill()">Generate Bill</button> |
| <button class="confirm-order-button" onclick="confirmOrder()">Confirm Order</button> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="modal" id="anythingElseModal"> |
| <div class="modal-content"> |
| <span class="close-modal" onclick="closeAnythingElseModal()">×</span> |
| <h3>Anything Else You Want?</h3> |
| <div class="menu-items-container" id="menuItems"></div> |
| <div class="modal-actions"> |
| <button class="action-btn view-bill-btn" onclick="refreshBill()">View Updated Bill</button> |
| <button class="action-btn cancel-btn" onclick="closeAnythingElseModal()">Cancel</button> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| let currentCart = null; |
| let menuItems = []; |
| let selectedItem = null; |
| let availableAddOns = []; |
| |
| function fetchAddOns() { |
| return fetch('/cart/fetch_add_ons', { |
| method: 'GET', |
| headers: { 'Content-Type': 'application/json' } |
| }) |
| .then(response => response.json()) |
| .then(data => { |
| if (data.success) { |
| availableAddOns = data.add_ons; |
| } else { |
| console.error('Error fetching add-ons:', data.error); |
| availableAddOns = []; |
| } |
| }) |
| .catch(err => { |
| console.error('Error fetching add-ons:', err); |
| availableAddOns = []); |
| }); |
| } |
| |
| function generateBill() { |
| fetchAddOns().then(() => { |
| fetch('/cart/checkout', { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify({}) |
| }) |
| .then(response => response.json()) |
| .then(data => { |
| if (data.success) { |
| currentCart = data.cart; |
| menuItems = data.menu_items; |
| displayAnythingElse(); |
| } else { |
| alert(data.error || data.message); |
| } |
| }) |
| .catch(err => { |
| console.error('Error during checkout:', err); |
| alert('An error occurred. Please try again.'); |
| }); |
| }); |
| } |
| |
| function displayAnythingElse() { |
| const menuItemsContainer = document.getElementById('menuItems'); |
| menuItemsContainer.innerHTML = ''; |
| menuItems.forEach(item => { |
| const itemElement = document.createElement('div'); |
| itemElement.className = 'menu-item'; |
| itemElement.innerHTML = ` |
| <img src="${item.Image1__c}" alt="${item.Name}" onerror="this.src='/static/placeholder.jpg';"> |
| <div class="menu-item-details"> |
| <strong>${item.Name}</strong> |
| <small>${item.Veg_NonVeg__c} | ${item.Section__c}</small> |
| <small>$${item.Price__c.toFixed(2)}</small> |
| </div> |
| <button class="add-back-button" onclick="showQuantitySelector('${item.Name}', ${item.Price__c}, '${item.Image1__c}', this)">+</button> |
| <div class="quantity-selector" data-item-name="${item.Name}"> |
| <button onclick="updateMenuItemQuantity('${item.Name}', 'decrease')">-</button> |
| <input type="text" value="1" readonly data-item-name="${item.Name}"> |
| <button onclick="updateMenuItemQuantity('${item.Name}', 'increase')">+</button> |
| </div> |
| <div class="customization-section" data-item-name="${item.Name}"> |
| <h4>Customize ${item.Name}</h4> |
| <div id="addOns-${item.Name}"> |
| ${availableAddOns.length > 0 ? availableAddOns.map(addon => ` |
| <label> |
| <input type="checkbox" value="${addon.name}" data-price="${addon.price}"> |
| ${addon.name} |
| </label> |
| `).join('') : '<p>No add-ons available</p>'} |
| </div> |
| <div> |
| <strong>Special Instructions</strong> |
| <textarea placeholder="e.g., Less spicy"></textarea> |
| </div> |
| <div class="customization-actions"> |
| <button class="add-to-cart-btn" onclick="addToCartWithCustomizations('${item.Name}', ${item.Price__c}, '${item.Image1__c}')">Add to Cart</button> |
| <button class="cancel-customization-btn" onclick="cancelCustomization('${item.Name}')">Cancel</button> |
| </div> |
| </div> |
| `; |
| menuItemsContainer.appendChild(itemElement); |
| }); |
| document.getElementById('anythingElseModal').style.display = 'flex'; |
| } |
| |
| function showQuantitySelector(itemName, itemPrice, itemImage, buttonElement) { |
| document.querySelectorAll('.quantity-selector').forEach(selector => { |
| selector.style.display = 'none'; |
| selector.querySelector('input').value = 1; |
| }); |
| document.querySelectorAll('.customization-section').forEach(section => { |
| section.classList.remove('show'); |
| section.querySelectorAll('input[type="checkbox"]').forEach(checkbox => { |
| checkbox.checked = false; |
| }); |
| section.querySelector('textarea').value = ''; |
| }); |
| document.querySelectorAll('.add-back-button').forEach(btn => { |
| btn.style.display = 'inline-block'; |
| }); |
| |
| const quantitySelector = buttonElement.nextElementSibling; |
| quantitySelector.style.display = 'flex'; |
| buttonElement.style.display = 'none'; |
| |
| const customizationSection = quantitySelector.nextElementSibling; |
| customizationSection.classList.add('show'); |
| |
| selectedItem = { name: itemName, price: itemPrice, image: itemImage }; |
| } |
| |
| function updateMenuItemQuantity(itemName, action) { |
| const quantityInput = document.querySelector(`.quantity-selector[data-item-name="${itemName}"] input`); |
| let quantity = parseInt(quantityInput.value); |
| if (action === 'increase') { |
| quantity++; |
| } else if (action === 'decrease' && quantity > 1) { |
| quantity--; |
| } |
| if (isNaN(quantity) || quantity < 1) { |
| quantity = 1; |
| } |
| quantityInput.value = quantity; |
| } |
| |
| function cancelCustomization(itemName) { |
| const quantitySelector = document.querySelector(`.quantity-selector[data-item-name="${itemName}"]`); |
| const customizationSection = quantitySelector.nextElementSibling; |
| const addButton = quantitySelector.previousElementSibling; |
| |
| quantitySelector.querySelector('input').value = 1; |
| quantitySelector.style.display = 'none'; |
| customizationSection.classList.remove('show'); |
| addButton.style.display = 'inline-block'; |
| customizationSection.querySelectorAll('input[type="checkbox"]').forEach(checkbox => { |
| checkbox.checked = false; |
| }); |
| customizationSection.querySelector('textarea').value = ''; |
| } |
| |
| function addToCartWithCustomizations(itemName, itemPrice, itemImage) { |
| const quantitySelector = document.querySelector(`.quantity-selector[data-item-name="${itemName}"]`); |
| const quantity = parseInt(quantitySelector.querySelector('input').value); |
| if (isNaN(quantity) || quantity < 1) { |
| alert('Invalid quantity!'); |
| return; |
| } |
| const customizationSection = document.querySelector(`.customization-section[data-item-name="${itemName}"]`); |
| const addOns = Array.from(customizationSection.querySelectorAll('input[type="checkbox"]:checked')).map(checkbox => checkbox.value); |
| const instructions = customizationSection.querySelector('textarea').value.trim(); |
| const customerEmail = "{{ customer_email }}"; |
| |
| const data = { |
| item_name: itemName, |
| item_price: itemPrice, |
| item_image: itemImage, |
| addons: addOns, |
| instructions: instructions, |
| customer_email: customerEmail, |
| quantity: quantity |
| }; |
| |
| fetch('/cart/add_suggestion_to_cart', { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify(data) |
| }) |
| .then(response => response.json()) |
| .then(data => { |
| if (data.success) { |
| alert('Item added to cart!'); |
| closeAnythingElseModal(); |
| refreshBill(); |
| } else { |
| alert('Error adding item to cart: ' + data.error); |
| } |
| }) |
| .catch(err => { |
| console.error('Error adding item:', err); |
| alert('An error occurred while adding the item to the cart.'); |
| }); |
| } |
| |
| function refreshBill() { |
| fetch('/bill/fetch_cart', { |
| method: 'GET', |
| headers: { 'Content-Type': 'application/json' } |
| }) |
| .then(response => response.json()) |
| .then(data => { |
| if (data.success) { |
| const billContainer = document.querySelector('.bill-container'); |
| billContainer.innerHTML = ''; |
| data.cart_items.forEach(item => { |
| const itemElement = document.createElement('div'); |
| itemElement.className = 'bill-item'; |
| itemElement.innerHTML = ` |
| <div class="image-wrapper"> |
| <img src="${item.Image1__c}" alt="${item.Name}" onerror="this.src='/static/placeholder.jpg';"> |
| </div> |
| <div class="bill-item-details"> |
| <div class="bill-item-title">${item.Name} x${item.Quantity__c}</div> |
| <div class="bill-item-addons"> |
| <small class="text-muted">Add-ons: ${item.Add_Ons__c}</small> |
| </div> |
| <div class="bill-item-instructions"> |
| <small class="text-muted">Instructions: ${item.Instructions__c || "None"}</small> |
| </div> |
| </div> |
| <div class="text-primary">$${item.Price__c.toFixed(2)}</div> |
| `; |
| billContainer.appendChild(itemElement); |
| }); |
| if (data.cart_items.length === 0) { |
| billContainer.innerHTML = '<p>No items in your bill.</p>'; |
| } |
| const summaryElement = document.createElement('div'); |
| summaryElement.className = 'bill-summary'; |
| summaryElement.innerHTML = ` |
| <div class="bill-details"> |
| <div class="label">Subtotal</div> |
| <div class="amount">$${data.subtotal.toFixed(2)}</div> |
| </div> |
| <div class="dotted-line"></div> |
| <div class="total-bill"> |
| <div class="label">Total</div> |
| <div class="amount">$${data.subtotal.toFixed(2)}</div> |
| </div> |
| <button class="generate-bill-button" onclick="generateBill()">Generate Bill</button> |
| <button class="confirm-order-button" onclick="confirmOrder()">Confirm Order</button> |
| `; |
| billContainer.appendChild(summaryElement); |
| closeAnythingElseModal(); |
| } else { |
| alert('Error refreshing bill: ' + data.error); |
| } |
| }) |
| .catch(err => { |
| console.error('Error refreshing bill:', err); |
| alert('An error occurred while refreshing the bill.'); |
| }); |
| } |
| |
| function closeAnythingElseModal() { |
| document.getElementById('anythingElseModal').style.display = 'none'; |
| document.querySelectorAll('.quantity-selector').forEach(selector => { |
| selector.style.display = 'none'; |
| selector.querySelector('input').value = 1; |
| }); |
| document.querySelectorAll('.customization-section').forEach(section => { |
| section.classList.remove('show'); |
| section.querySelectorAll('input[type="checkbox"]').forEach(checkbox => { |
| checkbox.checked = false; |
| }); |
| section.querySelector('textarea').value = ''; |
| }); |
| document.querySelectorAll('.add-back-button').forEach(btn => { |
| btn.style.display = 'inline-block'; |
| }); |
| } |
| |
| function confirmOrder() { |
| fetch('/cart/checkout', { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify({}) |
| }) |
| .then(response => response.json()) |
| .then(data => { |
| if (data.success) { |
| currentCart = data.cart; |
| fetch('/cart/submit_order', { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify({ cart: currentCart }) |
| }) |
| .then(response => response.json()) |
| .then(data => { |
| if (data.success) { |
| alert(data.message); |
| window.location.href = '/order'; |
| } else { |
| alert(data.error || data.message); |
| } |
| }) |
| .catch(err => { |
| console.error('Error during order submission:', err); |
| alert('An error occurred during order submission.'); |
| }); |
| } else { |
| alert(data.error || data.message); |
| } |
| }) |
| .catch(err => { |
| console.error('Error during checkout:', err); |
| alert('An error occurred. Please try again.'); |
| }); |
| } |
| </script> |
| </body> |
| </html> |
