subbuok

Sleeping

App Files Files Community

lokeshloki143 commited on May 16

Commit

66e8343

verified ·

1 Parent(s): 1b42973

Create bill.html

Browse files

Files changed (1) hide show

templates/bill.html +699 -0

templates/bill.html ADDED Viewed

	@@ -0,0 +1,699 @@

+<!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/[email protected]/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>