BiryaniHubflask37

Runtime error

File size: 23,201 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cart</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: #f3f4f6;
            color: #333;
        }
        .cart-container {
            max-width: 768px;
            margin: 30px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 12px;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
            transition: box-shadow 0.3s ease-in-out;
        }
        .cart-container:hover {
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }
        
        .cart-item {
            display: flex;                  /* Flexbox layout for the cart item */
            align-items: flex-start;         /* Ensure the image and content align at the top */
            justify-content: space-between;  /* Spread image and content across the container */
            border-bottom: 1px solid #e0e0e0;
            padding: 15px 0;
        }
        .image-wrapper {
            width: 80px;                    /* Width of the image container */
            height: 140px !important;                   /* Height of the image container */
            display: flex;                  /* Flex container for image */
            align-items: flex-start;        /* Align the image at the top */
            justify-content: center;        /* Center image horizontally if it has space */
        }
        .cart-item img {
            width: 100%;                    /* Fill the image container */
            height: auto !important;                   /* Maintain aspect ratio */
            object-fit: contain;            /* Ensure the full image is visible */
            border-radius: 8px;             /* Optional: rounded corners */
            transition: transform 0.3s;
        }
        .cart-item img:hover {
            transform: scale(1.05);
        }
        .cart-item-title {
            font-size: 1.1rem;
            font-weight: 600;
        }
        .cart-item-actions .text-primary {
            color: #000 !important; /* Changed from blue to black */
        }

        .checkout-button {
           background-color: #0FAA39; /* Green background */
           color: #fff; /* White text */
           padding: 12px;
           border-radius: 8px;
           border: none;
           width: 100%;
           font-size: 1.2rem;
           cursor: pointer;
           transition: background-color 0.3s, color 0.3s;
       }
       .checkout-button:hover {
           background-color: #0FAA39; /* Keep the background green on hover */
           color: #fff; /* Keep the text white on hover */
       }
        .add-back-button {
            padding: 6px 20px;
            font-size: 0.9rem;
            border-radius: 20px;
            border: 1px solid #fff;
            background-color: #fff;
            color: #0FAA39;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s;
        }
        .add-back-button:hover {
            background-color: #fff;
            color: #0FAA39;
        }
        
        .cart-item-details {
            flex: 1;
            margin-left: 15px;
        }
       
        .cart-item-quantity {
            display: flex;
            align-items: center;
            margin-top: 5px;
        }
        .cart-item-quantity button {
            width: 24px;
            height: 24px;
            border: none;
            background-color: #f0f0f0;
            font-size: 0.8rem;
            font-weight: bold;
            cursor: pointer;
        }
        .cart-item-quantity input {
            width: 40px;
            text-align: center;
            border: none;
            background-color: #f8f9fa;
            font-size: 1rem;
            margin: 0 5px;
        }
        .cart-summary {
            text-align: left;
            margin-top: 15px;
            padding: 20px;
            background-color: #fff;
            border-radius: 12px;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
        }
        .bill-details {
            display: grid;
            grid-template-columns: 1fr 1fr; /* Two-column layout */
            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;
            margin-top: 10px;
        }
        .total-bill .label {
            font-size: 1.1rem;
        }
        .total-bill .amount {
                text-align: right;
                font-size: 1.1rem;
                color: #000; /* Changed from green to black */
        }
        .checkout-button {
            background-color: #0FAA39;
            color: #fff;
            padding: 12px;
            border-radius: 8px;
            border: none;
            width: 100%;
            font-size: 1.2rem;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s;
        }
      
        .suggestion-section {
            margin-top: 20px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 10px;
        }
       .suggestion-item {
            display: flex;
            align-items: center; /* Vertically align image and text */
            justify-content: space-between; /* Space between the image/text and the button */
            padding: 10px 0;
        }
        .suggestion-item img {
            width: 50px;
            height: 50px;
            object-fit: cover;
            border-radius: 5px;
            margin-right: 10px; /* Spacing between the image and the text */
        }
        .suggestion-item div {
            display: flex;
            flex-direction: column;
            justify-content: center;
            flex-grow: 1; /* Allow the text to take up the available space */
        }
        .suggestion-item button {
            padding: 5px 15px;
            font-size: 0.9rem;
            border-radius: 5px;
            border: 2px solid #0FAA39;
            color: #0FAA39;
            background-color: #fff;
            font-weight: 600;
            height: 44px;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s, border-color 0.3s;
            margin-left: auto; /* Push button to the right */
        }
       .suggestion-item button:hover {
           background-color: #fff; /* Change background to green on hover */
           color: #0FAA39; /* Change text color to white on hover */
           border-color: #0FAA39; /* Keep the border green */
       }
        
        .remove-icon {
            border: none;
            background: none;
            color: red;
            font-size: 1.2rem;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="cart-container">
            <div style="text-align: right;">
                <a href="/menu" style="text-decoration: none; font-size: 1.5rem; color: #007bff;">&times;</a>
            </div>

             <h4 class="mb-4 fw-bold">Your Cart</h4>

            <!-- Cart Items -->
            {% for item in cart_items %}
            <div class="cart-item">
                <div class="image-wrapper">
                    <img src="{{ item.Image1__c }}" alt="{{ item.Name }}" onerror="this.src='/static/placeholder.jpg';">
               </div>
                <div class="cart-item-details">
                    <div class="cart-item-title">
                        {{ item.Name }}
                    </div> 
                    <div class="cart-item-addons">
                        <small class="text-muted">Add-ons: {{ item.Add_Ons__c }}</small>
                    </div>
                    <div class="cart-item-instructions">
                        <small class="text-muted">Instructions: {{ item.Instructions__c or "None" }}</small>
                    </div>
                    <div class="cart-item-quantity mt-2">
                        <button onclick="updateQuantity('decrease', '{{ item.Name }}', '{{ customer_email }}')">-</button>
                        <input type="text" value="{{ item.Quantity__c|int }}" readonly data-item-name="{{ item.Name }}">
                        <button onclick="updateQuantity('increase', '{{ item.Name }}', '{{ customer_email }}')">+</button>
                    </div>
                </div>
               <div class="cart-item-actions">
                    <div>
                      <button class="remove-icon" onclick="removeItemFromCart('{{ item.Name }}')">🗑️</button>
                    </div>
                    <div class="text-primary" style="color: #000 !important;">  <!-- Inline style to ensure it's black -->
                        $<span class="base-price">{{ item.Price__c }}</span> 
                    </div>
                </div>
            </div>
            {% else %}
            <p class="text-center">Your cart is empty.</p>
            {% endfor %}

            <!-- Suggestions Section -->
            {% if suggestions %}
            <div class="suggestion-section">
                <h5>Complete Your Meal</h5>
                {% for suggestion in suggestions %}
                <div class="suggestion-item">
                    <img src="{{ suggestion.Image1__c }}" alt="{{ suggestion.Name }}" onerror="this.src='/static/placeholder.jpg';">
                    <div>
                        <div>{{ suggestion.Name }}</div>
                        <div class="text-muted">${{ suggestion.Price__c }}</div>
                    </div>
                    <button class="add-back-button" onclick="addToCartSuggestion('{{ suggestion.Name }}', '{{ suggestion.Price__c }}', '{{ suggestion.Image1__c }}', '{{ suggestion.Id }}')">Add</button>
                </div>
                {% endfor %}
            </div>
            {% endif %}

            <!-- Subtotal -->
            <div class="cart-summary">
               
                {% if coupons %}
                    <div class="coupon-selection">
                        <label>
                            <input type="checkbox" id="couponCheckbox" onchange="toggleCouponDropdown()">
                            Apply Coupon Code
                        </label>
                        <select id="couponDropdown" class="form-select mt-2" disabled onchange="calculateDiscount()">
                            <option value="">Select a coupon</option>
                            {% for coupon in coupons %}
                                <option value="{{ coupon }}">{{ coupon }}</option>
                           {% endfor %}
                        </select>
                    </div>
                {% endif %}
                <div class="bill-details">
                    <div class="label">Cart Total</div>
                    <div class="amount">${{ subtotal }}</div>
                    <div class="label">Discount</div>
                    <div class="amount" id="discountText">-${{ discount }}</div>


                    
                    
                </div>

                <div class="dotted-line"></div>

                <div class="total-bill">
                     <div class="label">To Pay</div>
                     <div class="amount" id="totalBillText">${{ subtotal }}</div>
                </div>
                <button class="checkout-button" onclick="proceedToOrder()">Proceed to Order</button>
            </div>
        </div>
    </div>


    <script>
        // Example function to handle the increase/decrease button clicks
        function updateQuantity(action, itemName, customerEmail) {
            let quantityInput = document.querySelector(`input[data-item-name="${itemName}"]`);
            let quantity = parseInt(quantityInput.value);
            // Update quantity based on action
            if (action === 'increase') {
                quantity++;
            } else if (action === 'decrease' && quantity > 1) {
                quantity--;
            }

            // Validate quantity
            if (isNaN(quantity) || quantity < 1) {
                alert("Invalid quantity!");
                return;
            }

            // Send updated quantity to the server
            fetch('/cart/update_quantity', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ email: customerEmail, item_name: itemName, quantity: quantity })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Update the item price and quantity in the UI
                    quantityInput.value = quantity;
                    let itemElement = quantityInput.closest(".cart-item"); // Locate the parent cart item
                    if (itemElement) {
                        let basePriceElement = itemElement.querySelector(".base-price");
                        let addonsPriceElement = itemElement.querySelector(".addons-price");

                        // Update the base price
                        if (basePriceElement) {
                            basePriceElement.innerText = data.new_item_price.toFixed(2); // Assuming backend sends this
                        }

                        // Update add-ons price if needed (optional)
                        if (addonsPriceElement && data.addons_price !== undefined) {
                            addonsPriceElement.innerText = data.addons_price.toFixed(2);
                        }
                    } else {
                        console.error(`Parent cart item element not found for item: ${itemName}`);
                    }
                    location.reload();

                    // Recalculate subtotal dynamically
                    
                } else {
                    alert("Error updating quantity: " + data.error);
                }
            })
            .catch(err => console.error("Error:", err));
        }
        function toggleCouponDropdown() {
            let couponCheckbox = document.getElementById('couponCheckbox');
            let couponDropdown = document.getElementById('couponDropdown');

            // Enable or disable the dropdown based on checkbox status
            couponDropdown.disabled = !couponCheckbox.checked;

            // If unchecked, reset discount and total
            if (!couponCheckbox.checked) {
                document.getElementById("discountText").innerText = `Discount: $0`;
                document.getElementById("totalBillText").innerText = `Total Bill: ${{ subtotal }}`;
            }
        }

        function calculateDiscount() {
            let couponCheckbox = document.getElementById('couponCheckbox');
            let couponDropdown = document.getElementById('couponDropdown');
            let subtotal = parseFloat("{{ subtotal }}");

            // If checkbox is selected
            if (couponCheckbox.checked) {
                let selectedCoupon = couponDropdown.value.trim();
                if (!selectedCoupon || selectedCoupon.toLowerCase() === "none") {
                    alert("Please select a valid coupon.");
                    document.getElementById("discountText").innerText = `Discount: $0`;
                    document.getElementById("totalBillText").innerText = `Total Bill: $${subtotal.toFixed(2)}`;
                    return;
                }

                

                // Apply 10% discount
                let discount = subtotal * 0.10;
                let total = subtotal - discount;

                // Update UI
                document.getElementById("discountText").innerText = `$${discount.toFixed(2)}`;
                document.getElementById("totalBillText").innerText = `$${total.toFixed(2)}`;

            } else {
                // If checkbox is not selected, reset discount
                document.getElementById("discountText").innerText = `$0`;
                document.getElementById("totalBillText").innerText = `$${subtotal.toFixed(2)}`;
            }
        }

        function proceedToOrder() {
            let couponCheckbox = document.getElementById('couponCheckbox');
            let couponDropdown = document.getElementById('couponDropdown');
            let selectedCoupon = ""; // Default to empty coupon

            if (couponCheckbox && couponCheckbox.checked) {
                if (couponDropdown) {
                    selectedCoupon = couponDropdown.value.trim();
                
                    // Prevent checkout if no coupon is selected
                    if (!selectedCoupon) {
                        alert("Please select a valid coupon before proceeding.");
                        return;
                    }
                } else {
                    alert("Error: Coupon dropdown not found.");
                    return;
                }
            }
            fetch('/checkout', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ selectedCoupon: selectedCoupon })
            })
            .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 checkout:', err));
        }

        function calculateSubtotal() {
            let subtotal = 0;
            document.querySelectorAll('.cart-item').forEach(item => {
                const quantity = parseInt(item.querySelector('input').value);
                const basePrice = parseFloat(item.querySelector('.base-price').innerText.replace('$', '')); // Base Price
                const addonsPrice = parseFloat(item.querySelector('.addons-price').innerText.replace('$', '')) || 0; // Add-ons Price
                subtotal += (basePrice * quantity) + addonsPrice; // Include add-ons price in subtotal
            });

            // Update the subtotal in the HTML
            document.querySelector('.cart-summary p').innerText = `Subtotal: $${subtotal.toFixed(2)}`;
            return subtotal;
        }
        function addSuggestion(itemId) {
            fetch(`/cart/add_suggestion/${itemId}`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({})
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('Item added to cart!');
                    location.reload();
                } else {
                    alert(data.error);
                }
            })
            .catch(err => console.error('Error adding suggestion:', err));
        }
        function removeItemFromCart(itemName) {
            fetch(`/cart/remove/${encodeURIComponent(itemName)}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert(data.message);
                    location.reload(); // Reload the page to update the cart
                } else {
                    alert(data.message);
                }
            })
            .catch(err => console.error('Error removing item:', err));
        }
        function addToCart(itemName, customerEmail) {
            fetch(`/cart/add_item`, {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    email: customerEmail,
                    item_name: itemName.trim(), //Ensure the item name is trimmed
                    quantity: 0 // DEFAULT QUANTITY PASSED HERE
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert("Item added/updated successfully.");
                    location.reload(); // Reload the page to update the cart
                } else {
                    alert(data.error || "Failed to add item to cart.");
                }
            })
            .catch(err => console.error("Error adding item to cart:", err));
        }
        function addSuggestion(itemId) {
            fetch(`/cart/add_suggestion/${itemId}`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({})
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('Item added to cart!');
                    location.reload();
                } else {
                    alert(data.error);
                }
            })
            .catch(err => console.error('Error adding suggestion:', err));
        }
        function addToCartSuggestion(itemName, itemPrice, itemImage, itemId) {
            const customerEmail = "{{ customer_email }}"; // Get customer email from session

            // Create the data object to send to the server
            const data = {
                item_name: itemName,
                item_price: itemPrice,
                item_image: itemImage,
                item_id: itemId,
                addons: [], // Default to empty, you can adjust if needed
                instructions: "", // Default to empty, you can adjust if needed
                customer_email: customerEmail
            };

            // Send the data to the backend via a POST request
            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!');
                    location.reload(); // Reload to update the cart view
                } else {
                    alert('Error adding item to cart: ' + data.error);
                }
            })
            .catch(err => console.error('Error adding item:', err));
        }


        
        
    </script>

</body>
</html>