Update templates/search.html

templates/search.html

@@ -163,8 +163,17 @@
         <h2>Search Results</h2>
         <div id="searchResults" class="row">
             {% for item in all_items %}
-                <div class="col-md-6 mb-4 search-item" data-name="{{ item.Name | lower }}" data-section="{{ item.Section__c | lower }}"
-                     onclick="window.location.href='/menu?highlight={{ item.Name | urlencode }}'">
+                <div class="col-md-6 mb-4 search-item" 
+                     data-name="{{ item.Name | lower }}" 
+                     data-section="{{ item.Section__c | lower }}"
+                     data-price="{{ item.Price__c | default('0.00') }}"
+                     data-image="{{ item.Image2__c | default(item.Image1__c) | default('/static/placeholder.jpg') }}"
+                     data-description="{{ item.Description__c | default('No description') | e }}"
+                     data-ingredients="{{ item.IngredientsInfo__c | default('Not specified') | e }}"
+                     data-nutrition="{{ item.NutritionalInfo__c | default('Not available') | e }}"
+                     data-allergens="{{ item.Allergens__c | default('None listed') | e }}"
+                     data-category="{{ item.Category__c | default('') }}"
+                     onclick="triggerItemModal(this)">
                     <div class="card menu-card">
                         <img src="{{ item.Image2__c | default(item.Image1__c) | default('/static/placeholder.jpg') }}"
                              class="card-img-top menu-video" alt="{{ item.Name }}" style="height: 200px; object-fit: cover;">
@@ -184,6 +193,46 @@
         <div id="autocompleteSuggestions" class="autocomplete-suggestions"></div>
     </div>
 
+    <!-- Include the Item Modal from Menu HTML -->
+    <div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="itemModalLabel">Item Details</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <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">
+                        <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>
+                        <div id="addons-list" class="addons-container">Loading customization options...</div>
+                    </div>
+                    <div class="mt-4">
+                        <h6>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>
+                </div>
+                <div class="modal-footer d-flex align-items-center justify-content-between">
+                    <div class="d-flex align-items-center gap-2">
+                        <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;"/>
+                        <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>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
     <script>
         const menuItems = [
@@ -254,7 +303,142 @@
                     suggestionsContainer.style.display = 'none';
                 }
             });
+
+            // Quantity controls for modal
+            const decreaseBtn = document.getElementById('decreaseQuantity');
+            const increaseBtn = document.getElementById('increaseQuantity');
+            const quantityInput = document.getElementById('quantityInput');
+            decreaseBtn.addEventListener('click', function () {
+                let currentQuantity = parseInt(quantityInput.value);
+                if (currentQuantity > 1) {
+                    currentQuantity--;
+                    quantityInput.value = currentQuantity;
+                }
+            });
+            increaseBtn.addEventListener('click', function () {
+                let currentQuantity = parseInt(quantityInput.value);
+                currentQuantity++;
+                quantityInput.value = currentQuantity;
+            });
         });
+
+        function triggerItemModal(element) {
+            const name = element.querySelector('.card-title').innerText;
+            const price = element.getAttribute('data-price');
+            const image = element.getAttribute('data-image');
+            const description = element.getAttribute('data-description');
+            const ingredients = element.getAttribute('data-ingredients');
+            const nutrition = element.getAttribute('data-nutrition');
+            const allergens = element.getAttribute('data-allergens');
+            const section = element.getAttribute('data-section');
+            const selectedCategory = element.getAttribute('data-category');
+
+            // Populate modal
+            document.getElementById('modal-name').innerText = name;
+            document.getElementById('modal-price').innerText = `$${price}`;
+            document.getElementById('modal-img').src = image || '/static/placeholder.jpg';
+            document.getElementById('modal-description').innerText = description || 'No description available.';
+            document.getElementById('modal-ingredients').innerText = ingredients || 'Not specified';
+            document.getElementById('modal-nutrition').innerText = nutrition || 'Not available';
+            document.getElementById('modal-allergens').innerText = allergens || 'None listed';
+            document.getElementById('modal-instructions').value = '';
+            const modalSectionEl = document.getElementById('modal-section');
+            modalSectionEl.setAttribute('data-section', section);
+            modalSectionEl.setAttribute('data-category', selectedCategory);
+            document.getElementById('quantityInput').value = 1;
+
+            // Fetch addons (assuming this endpoint exists)
+            fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
+                .then(response => response.json())
+                .then(data => {
+                    const addonsList = document.getElementById('addons-list');
+                    addonsList.innerHTML = '';
+                    if (!data.success || !data.addons || data.addons.length === 0) {
+                        addonsList.innerHTML = '<p>No customization options available.</p>';
+                        return;
+                    }
+                    data.addons.forEach(addon => {
+                        const sectionDiv = document.createElement('div');
+                        sectionDiv.classList.add('addon-section');
+                        const title = document.createElement('h6');
+                        title.innerText = addon.name;
+                        sectionDiv.appendChild(title);
+                        const optionsContainer = document.createElement('div');
+                        addon.options.forEach((option, index) => {
+                            const optionId = `addon-${addon.name.replace(/\s+/g, '')}-${index}`;
+                            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}">
+                                <label class="form-check-label" for="${optionId}">
+                                    ${option} ${addon.extra_charge ? `($${addon.extra_charge_amount})` : ''}
+                                </label>
+                            `;
+                            optionsContainer.appendChild(listItem);
+                        });
+                        sectionDiv.appendChild(optionsContainer);
+                        addonsList.appendChild(sectionDiv);
+                    });
+                })
+                .catch(err => {
+                    console.error('Error fetching add-ons:', err);
+                    document.getElementById('addons-list').innerHTML = '<p>Error loading customization options.</p>';
+                });
+
+            // Show modal
+            const modal = new bootstrap.Modal(document.getElementById('itemModal'));
+            modal.show();
+        }
+
+        function addToCartFromModal() {
+            const itemName = document.getElementById('modal-name').innerText;
+            const itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
+            const itemImage = document.getElementById('modal-img').src;
+            const instructions = document.getElementById('modal-instructions').value.trim();
+            const quantity = parseInt(document.getElementById('quantityInput').value);
+            const section = document.getElementById('modal-section').getAttribute('data-section');
+            const selectedCategory = document.getElementById('modal-section').getAttribute('data-category');
+            const addons = Array.from(document.querySelectorAll('.addon-option:checked')).map(cb => ({
+                name: cb.getAttribute('data-name'),
+                price: parseFloat(cb.getAttribute('data-price') || 0)
+            }));
+
+            const cartPayload = {
+                itemName: itemName,
+                itemPrice: itemPrice,
+                itemImage: itemImage,
+                section: section,
+                category: selectedCategory,
+                addons: addons,
+                instructions: instructions,
+                quantity: quantity
+            };
+
+            fetch('/cart/add', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(cartPayload)
+            })
+            .then(response => 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 needed
+                } else {
+                    console.error('Failed to add item to cart:', data.error);
+                    alert(data.error || 'Failed to add item to cart.');
+                }
+            })
+            .catch(err => {
+                console.error('Error adding item to cart:', err);
+                alert('Error adding item to cart.');
+            });
+        }
     </script>
 </body>
 </html>