Update templates/cart.html

templates/cart.html

@@ -339,6 +339,118 @@
             align-items: flex-start;
             margin-left: auto;
         }
+
+        /* Modal Styles */
+        .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;
+            position: relative;
+            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;
+        }
+        .menu-item img {
+            width: 50px;
+            height: 50px;
+            object-fit: cover;
+            border-radius: 5px;
+            margin-right: 10px;
+        }
+        .menu-item-details {
+            flex-grow: 1;
+        }
+        .menu-item-details small {
+            display: block;
+            color: #666;
+        }
+        .bill-item {
+            display: flex;
+            justify-content: space-between;
+            padding: 10px 0;
+            border-bottom: 1px solid #f0f0f0;
+        }
+        .bill-item-details {
+            flex: 1;
+        }
+        .bill-item-details small {
+            display: block;
+            color: #666;
+        }
+        .bill-item-price {
+            font-weight: bold;
+            color: #2e7d32;
+        }
+        .bill-summary {
+            margin-top: 20px;
+        }
+        .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;
+        }
+        .confirm-order-btn {
+            background-color: #A52A2A;
+        }
     </style>
 </head>
 <body>
@@ -399,7 +511,7 @@
                                     <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 }}')">+</button>
+                                <button class="add-back-button" onclick="addToCartSuggestion('{{ suggestion.Name }}', '{{ suggestion.Price__c }}', '{{ suggestion.Image1__c }}')">+</button>
                             </div>
                         {% endfor %}
                     </div>
@@ -439,7 +551,49 @@
         </div>
     </div>
 
+    <!-- Anything Else Modal -->
+    <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="showBill()">View Bill</button>
+                <button class="action-btn cancel-btn" onclick="closeAnythingElseModal()">Cancel</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Bill Modal -->
+    <div class="modal" id="billModal">
+        <div class="modal-content">
+            <span class="close-modal" onclick="closeBillModal()">×</span>
+            <h3>Your Bill</h3>
+            <div id="billItems"></div>
+            <div class="bill-summary">
+                <div class="bill-details">
+                    <div class="label">Subtotal</div>
+                    <div class="amount" id="billSubtotal">$0.00</div>
+                    <div class="label">Discount</div>
+                    <div class="amount" id="billDiscount">$0.00</div>
+                </div>
+                <div class="dotted-line"></div>
+                <div class="total-bill">
+                    <div class="label">Total</div>
+                    <div class="amount" id="billTotal">$0.00</div>
+                </div>
+            </div>
+            <div class="modal-actions">
+                <iml class="action-btn confirm-order-btn" onclick="submitOrder()">Confirm Order</button>
+                <button class="action-btn cancel-btn" onclick="closeBillModal()">Cancel</button>
+            </div>
+        </div>
+    </div>
+
     <script>
+        let currentCart = null;
+        let menuItems = [];
+
         function updateQuantity(action, itemName, customerEmail) {
             let quantityInput = document.querySelector(`input[data-item-name="${itemName}"]`);
             let quantity = parseInt(quantityInput.value);
@@ -515,6 +669,84 @@
                 body: JSON.stringify({ selectedCoupon: selectedCoupon })
             })
             .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="addToCartSuggestion('${item.Name}', '${item.Price__c}', '${item.Image1__c}')">+</button>
+                `;
+                menuItemsContainer.appendChild(itemElement);
+            });
+            document.getElementById('anythingElseModal').style.display = 'flex';
+        }
+
+        function closeAnythingElseModal() {
+            document.getElementById('anythingElseModal').style.display = 'none';
+        }
+
+        function showBill() {
+            closeAnythingElseModal();
+            const billItemsContainer = document.getElementById('billItems');
+            billItemsContainer.innerHTML = '';
+            currentCart.items.forEach(item => {
+                const itemElement = document.createElement('div');
+                itemElement.className = 'bill-item';
+                itemElement.innerHTML = `
+                    <div class="bill-item-details">
+                        <strong>${item.name} x${item.quantity}</strong>
+                        <small>Add-ons: ${item.addons}</small>
+                        <small>Instructions: ${item.instructions}</small>
+                    </div>
+                    <div class="bill-item-price">$${item.price.toFixed(2)}</div>
+                `;
+                billItemsContainer.appendChild(itemElement);
+            });
+            document.getElementById('billSubtotal').innerText = `$${currentCart.subtotal.toFixed(2)}`;
+            document.getElementById('billDiscount').innerText = `$${currentCart.discount.toFixed(2)}`;
+            document.getElementById('billTotal').innerText = `$${currentCart.total.toFixed(2)}`;
+            document.getElementById('billModal').style.display = 'flex';
+        }
+
+        function closeBillModal() {
+            document.getElementById('billModal').style.display = 'none';
+            currentCart = null;
+        }
+
+        function submitOrder() {
+            if (!currentCart) {
+                alert('No cart data available.');
+                return;
+            }
+            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);
@@ -524,8 +756,8 @@
                 }
             })
             .catch(err => {
-                console.error('Error during checkout:', err);
-                alert('An error occurred during checkout. Please try again.');
+                console.error('Error during order submission:', err);
+                alert('An error occurred during order submission. Please try again.');
             });
         }
 
@@ -546,13 +778,12 @@
             .catch(err => console.error('Error removing item:', err));
         }
 
-        function addToCartSuggestion(itemName, itemPrice, itemImage, itemId) {
+        function addToCartSuggestion(itemName, itemPrice, itemImage) {
             const customerEmail = "{{ customer_email }}";
             const data = {
                 item_name: itemName,
                 item_price: itemPrice,
                 item_image: itemImage,
-                item_id: itemId,
                 addons: [],
                 instructions: "",
                 customer_email: customerEmail
@@ -568,7 +799,7 @@
                     alert('Item added to cart!');
                     location.reload();
                 } else {
-            alert('Error adding item to cart: ' + data.error);
+                    alert('Error adding item to cart: ' + data.error);
                 }
             })
             .catch(err => console.error('Error adding item:', err));