Update templates/cart.html

templates/cart.html

@@ -146,9 +146,6 @@
             color: #ffffff;
         }
         .add-back-button {
-            position: absolute;
-            top: -5px;
-            right: -10px;
             font-size: 1rem;
             padding: 0;
             width: 30px;
@@ -156,16 +153,13 @@
             background-color: #fff;
             color: #0FAA39;
             border: 2px solid #0FAA39;
-            border-radius: 0;
+            border-radius: 50%;
             cursor: pointer;
             transition: background-color 0.3s, color 0.3s, border-color 0.3s;
-            z-index: 2;
         }
         .add-back-button:hover {
-            background-color: #fff;
-            color: #0FAA39;
-            border-color: #0FAA39;
-            z-index: 3;
+            background-color: #0FAA39;
+            color: #fff;
         }
         .cart-item-details {
             flex: 1;
@@ -393,6 +387,7 @@
             background-color: #fff;
             box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
             border: 2px solid #fdf4e3;
+            position: relative;
         }
         .menu-item img {
             width: 50px;
@@ -401,6 +396,9 @@
             border-radius: 5px;
             margin-right: 10px;
         }
+        .menu-item:hover img {
+            transform: scale(1.05);
+        }
         .menu-item-details {
             flex-grow: 1;
         }
@@ -408,6 +406,80 @@
             display: block;
             color: #666;
         }
+        .quantity-selector {
+            display: flex;
+            align-items: center;
+        }
+        .quantity-selector button {
+            width: 24px;
+            height: 24px;
+            border: none;
+            background-color: #f0f0f0;
+            font-size: 0.8rem;
+            font-weight: bold;
+            cursor: pointer;
+        }
+        .quantity-selector input {
+            width: 40px;
+            text-align: center;
+            border: none;
+            background-color: #f8f9fa;
+            font-size: 1rem;
+            margin: 0 5px;
+        }
+        .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;
+        }
+        .customization-section.show {
+            display: block;
+        }
+        .customization-section h4 {
+            font-size: 1.2rem;
+            margin-bottom: 10px;
+        }
+        .customization-section label {
+            display: block;
+            margin-bottom: 5px;
+        }
+        .customization-section textarea {
+            width: 100%;
+            height: 60px;
+            margin-top: 10px;
+            padding: 5px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+        }
+        .customization-actions {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 10px;
+        }
+        .customization-actions button {
+            padding: 8px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            width: 48%;
+            text-align: center;
+        }
+        .add-to-cart-btn {
+            background-color: #A52A2A;
+            color: #fff;
+        }
+        .cancel-customization-btn {
+            background-color: #6c757d;
+            color: #fff;
+        }
         .bill-item {
             display: flex;
             justify-content: space-between;
@@ -593,6 +665,14 @@
     <script>
         let currentCart = null;
         let menuItems = [];
+        let selectedItem = null;
+
+        // Static list of add-ons (replace with dynamic fetch if available)
+        const availableAddOns = [
+            { name: "Extra Raita ($2.00)", price: 2.00 },
+            { name: "Extra Gravy ($3.00)", price: 3.00 },
+            { name: "Extra Salad ($1.50)", price: 1.50 }
+        ];
 
         function updateQuantity(action, itemName, customerEmail) {
             let quantityInput = document.querySelector(`input[data-item-name="${itemName}"]`);
@@ -697,15 +777,144 @@
                         <small>${item.Veg_NonVeg__c} | ${item.Section__c}</small>
                         <small>$${item.Price__c.toFixed(2)}</small>
                     </div>
-                    <button class="add-back-button" onclick="addToCartSuggestion('${item.Name}', '${item.Price__c}', '${item.Image1__c}')">+</button>
+                    <button class="add-back-button" onclick="showQuantitySelector('${item.Name}', ${item.Price__c}, '${item.Image1__c}', this)">+</button>
+                    <div class="quantity-selector" style="display: none;">
+                        <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>
+                            <strong>Add-Ons</strong>
+                            ${availableAddOns.map(addon => `
+                                <label>
+                                    <input type="checkbox" value="${addon.name}" data-price="${addon.price}">
+                                    ${addon.name}
+                                </label>
+                            `).join('')}
+                        </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) {
+            // Hide all quantity selectors and customization sections
+            document.querySelectorAll('.quantity-selector').forEach(selector => {
+                selector.style.display = 'none';
+            });
+            document.querySelectorAll('.customization-section').forEach(section => {
+                section.classList.remove('show');
+            });
+            document.querySelectorAll('.add-back-button').forEach(btn => {
+                btn.style.display = 'inline-block';
+            });
+
+            // Show quantity selector for the clicked item
+            const quantitySelector = buttonElement.nextElementSibling;
+            quantitySelector.style.display = 'flex';
+            buttonElement.style.display = 'none';
+
+            // Show customization section
+            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 input[data-item-name="${itemName}"]`);
+            let quantity = parseInt(quantityInput.value);
+            if (action === 'increase') {
+                quantity++;
+            } else if (action === 'decrease' && quantity > 1) {
+                quantity--;
+            }
+            quantityInput.value = quantity;
+        }
+
+        function cancelCustomization(itemName) {
+            const quantitySelector = document.querySelector(`.quantity-selector input[data-item-name="${itemName}"]`).parentElement;
+            const customizationSection = quantitySelector.nextElementSibling;
+            const addButton = quantitySelector.previousElementSibling;
+
+            // Reset quantity
+            quantitySelector.querySelector('input').value = 1;
+            // Hide quantity selector and customization section
+            quantitySelector.style.display = 'none';
+            customizationSection.classList.remove('show');
+            // Show add button
+            addButton.style.display = 'inline-block';
+            // Reset add-ons and instructions
+            customizationSection.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
+                checkbox.checked = false;
+            });
+            customizationSection.querySelector('textarea').value = '';
+        }
+
+        function addToCartWithCustomizations(itemName, itemPrice, itemImage) {
+            const quantityInput = document.querySelector(`.quantity-selector input[data-item-name="${itemName}"]`);
+            const quantity = parseInt(quantityInput.value);
+            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!');
+                    location.reload();
+                } else {
+                    alert('Error adding item to cart: ' + data.error);
+                }
+            })
+            .catch(err => console.error('Error adding item:', err));
+        }
+
         function closeAnythingElseModal() {
             document.getElementById('anythingElseModal').style.display = 'none';
+            // Reset all quantity selectors and customization sections
+            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 showBill() {