Update templates/search.html

templates/search.html

@@ -132,7 +132,7 @@
             justify-content: center;
             padding: 0;
         }
-        /* Full-page modal styling */
+        /* Modal styling from menu.html */
         .modal-fullscreen {
             width: 100vw;
             max-width: none;
@@ -143,35 +143,46 @@
             height: 100%;
             border: none;
             border-radius: 0;
+            background-color: #fdf4e3;
         }
         .modal-body {
-            max-height: 70vh;
+            padding: 20px;
             overflow-y: auto;
-            padding: 15px;
-            text-align: center;
         }
         .modal-footer {
+            padding: 15px;
             display: flex;
-            align-items: center;
             justify-content: space-between;
-            padding: 10px;
-        }
-        .modal-footer .btn-primary {
-            width: auto;
-            padding: 10px 20px;
-            height: 40px;
+            align-items: center;
+            border-top: none;
         }
         .addon-section {
             background-color: #fff;
             border: 2px solid #ffa500;
             border-radius: 8px;
             padding: 12px;
-            margin-bottom: 10px;
+            margin-bottom: 15px;
         }
         .addon-section h6 {
             margin-bottom: 10px;
             font-size: 1.1rem;
             font-weight: bold;
+            color: #333;
+        }
+        .form-check {
+            margin-bottom: 8px;
+        }
+        .form-check-input {
+            margin-right: 10px;
+        }
+        .quantity-controls {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .quantity-controls input {
+            width: 50px;
+            text-align: center;
         }
     </style>
 </head>
@@ -210,7 +221,7 @@
                             <button class="btn btn-primary" 
                                     data-bs-toggle="modal" 
                                     data-bs-target="#itemModal" 
-                                    onclick="showItemDetails('{{ item.Name | e }}', '{{ item.Price__c }}', '{{ item.Image2__c | default(item.Image1__c) | default('/static/placeholder.jpg') }}', '{{ item.Description__c | e }}', '{{ item.IngredientsInfo__c | default('Not specified') | e }}', '{{ item.NutritionalInfo__c | default('Not available') | e }}', '{{ item.Allergens__c | default('None listed') | e }}', '{{ item.Section__c | e }}', 'All')">
+                                    onclick="showItemDetails('{{ item.Name | e }}', '{{ item.Price__c }}', '{{ item.Image2__c | default(item.Image1__c) | default('/static/placeholder.jpg') }}', '{{ item.Description__c | e }}', '{{ item.IngredientsInfo__c | default('Not specified') | e }}', '{{ item.NutritionalInfo__c | default('Not available') | e }}', '{{ item.Allergens__c | default('None listed') | e }}', '{{ item.Section__c | e }}', '{{ item.Veg_NonVeg__c | default('both') | e }}', '{{ 'true' if item.is_menu_item else 'false' }}')">
                                 ADD
                             </button>
                         </div>
@@ -220,7 +231,7 @@
         </div>
     </div>
 
-    <!-- Item Modal (Full-page version from menu.html) -->
+    <!-- Item Modal (Exact replica from menu.html) -->
     <div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-fullscreen">
             <div class="modal-content">
@@ -232,26 +243,26 @@
                     <img id="modal-img" class="img-fluid rounded mb-3 d-block mx-auto" alt="Item Image" style="max-height: 200px; object-fit: cover;">
                     <h5 id="modal-name" class="fw-bold text-center"></h5>
                     <p id="modal-price" class="text-muted text-center"></p>
-                    <p id="modal-description" class="text-secondary"></p>
-                    <div class="nutritional-info">
+                    <p id="modal-description" class="text-secondary text-center"></p>
+                    <div class="nutritional-info text-center">
                         <strong>Ingredients:</strong> <span id="modal-ingredients"></span><br>
                         <strong>Nutrition:</strong> <span id="modal-nutrition"></span><br>
                         <strong>Allergens:</strong> <span id="modal-allergens"></span>
                     </div>
                     <div id="modal-addons" class="modal-addons mt-4">
-                        <h6>Customization Options</h6>
+                        <h6 class="text-center">Customization Options</h6>
                         <div id="addons-list" class="addons-container">Loading customization options...</div>
                     </div>
                     <div class="mt-4">
-                        <h6>Custom Request</h6>
+                        <h6 class="text-center">Custom Request</h6>
                         <textarea id="modal-instructions" class="form-control" placeholder="Enter any special instructions here..."></textarea>
                     </div>
-                    <span id="modal-section" data-section="" data-category="" style="display: none;"></span>
+                    <span id="modal-section" data-section="" data-category="" data-is-menu-item="" style="display: none;"></span>
                 </div>
-                <div class="modal-footer d-flex align-items-center justify-content-between">
-                    <div class="d-flex align-items-center gap-2">
+                <div class="modal-footer">
+                    <div class="quantity-controls">
                         <button type="button" class="btn btn-outline-secondary" id="decreaseQuantity">-</button>
-                        <input type="text" class="form-control text-center" id="quantityInput" value="1" readonly style="width: 50px;"/>
+                        <input type="text" class="form-control" id="quantityInput" value="1" readonly>
                         <button type="button" class="btn btn-outline-secondary" id="increaseQuantity">+</button>
                     </div>
                     <button type="button" class="btn btn-primary" onclick="addToCartFromModal()">Add to Cart</button>
@@ -350,10 +361,10 @@
                 quantityInput.value = currentQuantity;
             });
 
-            // Item details and cart functionality
-            window.showItemDetails = function(name, price, image, description, ingredients, nutrition, allergens, section, selectedCategory) {
+            // Item details and cart functionality (exact from menu.html)
+            window.showItemDetails = function(name, price, image, description, ingredients, nutrition, allergens, section, vegNonVeg, isMenuItem) {
                 document.getElementById('modal-name').innerText = name;
-                document.getElementById('modal-price').innerText = `$${price}`;
+                document.getElementById('modal-price').innerText = `$${parseFloat(price).toFixed(2)}`;
                 const modalImg = document.getElementById('modal-img');
                 modalImg.src = image || '/static/placeholder.jpg';
                 document.getElementById('modal-description').innerText = description || 'No description available.';
@@ -364,9 +375,11 @@
                 document.getElementById('modal-instructions').value = '';
                 const modalSectionEl = document.getElementById('modal-section');
                 modalSectionEl.setAttribute('data-section', section);
-                modalSectionEl.setAttribute('data-category', selectedCategory);
+                modalSectionEl.setAttribute('data-category', vegNonVeg === 'Veg' ? 'Veg' : vegNonVeg === 'Non veg' ? 'Non veg' : 'All');
+                modalSectionEl.setAttribute('data-is-menu-item', isMenuItem);
                 document.getElementById('quantityInput').value = 1;
 
+                // Fetch customization options from Salesforce
                 fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
                     .then(response => response.json())
                     .then(data => {
@@ -385,17 +398,32 @@
                             const optionsContainer = document.createElement('div');
                             addon.options.forEach((option, index) => {
                                 const optionId = `addon-${addon.name.replace(/\s+/g, '')}-${index}`;
+                                const inputType = addon.max_selections === 1 ? 'radio' : 'checkbox';
                                 const listItem = document.createElement('div');
                                 listItem.classList.add('form-check');
                                 listItem.innerHTML = `
-                                    <input type="checkbox" class="form-check-input addon-option" id="${optionId}" value="${option}"
-                                           data-name="${option}" data-group="${addon.name}" data-price="${addon.extra_charge ? addon.extra_charge_amount : 0}">
+                                    <input type="${inputType}" class="form-check-input addon-option" id="${optionId}" 
+                                           name="${addon.name}" value="${option}" 
+                                           data-name="${option}" data-group="${addon.name}" 
+                                           data-price="${addon.extra_charge ? addon.extra_charge_amount : 0}">
                                     <label class="form-check-label" for="${optionId}">
                                         ${option} ${addon.extra_charge ? `($${addon.extra_charge_amount})` : ''}
                                     </label>
                                 `;
                                 optionsContainer.appendChild(listItem);
                             });
+                            if (addon.max_selections > 1) {
+                                const inputs = optionsContainer.querySelectorAll('input[type="checkbox"]');
+                                inputs.forEach(input => {
+                                    input.addEventListener('change', function () {
+                                        const checkedCount = optionsContainer.querySelectorAll('input[type="checkbox"]:checked').length;
+                                        if (checkedCount > addon.max_selections) {
+                                            this.checked = false;
+                                            alert(`You can select up to ${addon.max_selections} options for ${addon.name}.`);
+                                        }
+                                    });
+                                });
+                            }
                             sectionDiv.appendChild(optionsContainer);
                             addonsList.appendChild(sectionDiv);
                         });
@@ -414,7 +442,8 @@
                 const quantity = parseInt(document.getElementById('quantityInput').value);
                 const modalSectionEl = document.getElementById('modal-section');
                 const section = modalSectionEl.getAttribute('data-section');
-                const selectedCategory = modalSectionEl.getAttribute('data-category');
+                const category = modalSectionEl.getAttribute('data-category');
+                const isMenuItem = modalSectionEl.getAttribute('data-is-menu-item') === 'true';
 
                 const addons = [];
                 document.querySelectorAll('.addon-option:checked').forEach(checkbox => {
@@ -429,7 +458,7 @@
                     itemPrice: itemPrice,
                     itemImage: itemImage,
                     section: section,
-                    category: selectedCategory,
+                    category: category,
                     addons: addons,
                     instructions: instructions,
                     quantity: quantity
@@ -442,13 +471,22 @@
                     },
                     body: JSON.stringify(cartPayload)
                 })
-                .then(response => response.json())
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! status: ${response.status}`);
+                    }
+                    return response.json();
+                })
                 .then(data => {
                     if (data.success) {
                         alert('Item added to cart successfully!');
                         const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
                         modal.hide();
-                        // Optionally update cart UI here if you add a cart badge
+                        // Update cart UI if you have a cart badge
+                        if (data.cart) {
+                            console.log('Updated cart:', data.cart);
+                            // Add cart badge update logic here if needed
+                        }
                     } else {
                         console.error('Failed to add item to cart:', data.error);
                         alert(data.error || 'Failed to add item to cart.');
@@ -456,7 +494,7 @@
                 })
                 .catch(err => {
                     console.error('Error adding item to cart:', err);
-                    alert('Error adding item to cart.');
+                    alert('Error adding item to cart. Please check the console for details.');
                 });
             };
         });