BiryaniHubflask31

Sleeping

File size: 18,431 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: #f8f9fa;
        }
        .cart-container {
            max-width: 768px;
            margin: 20px auto;
            padding: 15px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }
        .cart-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #dee2e6;
            padding: 10px 0;
        }
        .cart-item img {
            width: 70px;
            height: 70px;
            object-fit: cover;
            border-radius: 5px;
        }
        .cart-item-details {
            flex: 1;
            margin-left: 15px;
        }
        .cart-item-title {
            font-size: 1rem;
            font-weight: bold;
        }
        .cart-item-quantity {
            display: flex;
            align-items: center;
            margin-top: 5px;
        }
        .cart-item-quantity button {
            width: 30px;
            height: 30px;
            border: none;
            background-color: #f0f0f0;
            font-size: 1rem;
            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: right;
            margin-top: 15px;
        }
        .checkout-button {
            background-color: #007bff;
            color: #fff;
            padding: 10px;
            border-radius: 5px;
            border: none;
            width: 100%;
            font-size: 1.2rem;
            cursor: pointer;
            margin-top: 10px;
        }
        .suggestion-section {
            margin-top: 20px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 10px;
        }
        .suggestion-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 0;
        }
        .suggestion-item img {
            width: 50px;
            height: 50px;
            object-fit: cover;
            border-radius: 5px;
        }
        .add-back-button {
            padding: 5px 15px;
            font-size: 0.9rem;
            border-radius: 20px;
            border: 1px solid #007bff;
            color: #007bff;
            background-color: #fff;
            cursor: pointer;
        }
        .add-back-button:hover {
            background-color: #007bff;
            color: #fff;
        }
    </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">Your Cart</h4>

            <!-- Cart Items -->
            {% for item in cart_items %}
            <div class="cart-item">
                <img src="{{ item.Image1__c }}" alt="{{ item.Name }}" onerror="this.src='/static/placeholder.jpg';">
                <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">
                       <!-- Decrease button -->
                       <button onclick="updateQuantity('decrease', '{{ item.Name }}', '{{ customer_email }}')">-</button>
                       <!-- Quantity input field -->
                       <input type="text" value="{{ item.Quantity__c }}" readonly data-item-name="{{ item.Name }}">
                       <!-- Increase button -->
                       <button onclick="updateQuantity('increase', '{{ item.Name }}', '{{ customer_email }}')">+</button>
                    </div>
                </div>
               <div class="cart-item-actions">
                    <div class="text-primary">
                        $<span class="base-price">{{ item.Price__c }}</span> 
                    </div>
                    <button class="btn btn-danger btn-sm" onclick="removeItemFromCart('{{ item.Name }}')">Remove</button>
                </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">
                <p class="fw-bold">Subtotal: ${{ subtotal }}</p>
                {% 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 %}
                <p class="fw-bold" id="discountText">Discount: $0</p>
                <p class="fw-bold" id="totalBillText">Total Bill: ${{ subtotal }}</p>
                <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: $${discount.toFixed(2)}`;
                document.getElementById("totalBillText").innerText = `Total Bill: $${total.toFixed(2)}`;

            } else {
                // If checkbox is not selected, reset discount
                document.getElementById("discountText").innerText = `Discount: $0`;
                document.getElementById("totalBillText").innerText = `Total Bill: $${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>