Update templates/search.html

templates/search.html

@@ -114,7 +114,10 @@
         .container {
             max-width: 900px;
             margin-top: 20px;
-            margin-bottom: 70px; /* Space for fixed search bar */
+            margin-bottom: 70px;
+        }
+        .search-item {
+            cursor: pointer;
         }
         .menu-card {
             max-width: 350px;
@@ -125,6 +128,10 @@
             display: flex;
             flex-direction: column;
             box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+            transition: transform 0.2s;
+        }
+        .menu-card:hover {
+            transform: scale(1.05);
         }
         .menu-video {
             height: 200px;
@@ -132,82 +139,15 @@
             object-fit: cover;
             border-radius: 15px 15px 0 0;
         }
-        .card-body .card-title {
+        .card-body {
+            padding: 10px;
+            text-align: center;
+        }
+        .card-title {
             font-size: 1.2rem;
             font-weight: 600;
-            margin: 10px 0;
-            color: #333333;
-        }
-        .card-body .card-text.price {
-            font-size: 1rem;
-            font-weight: 500;
-            color: #000000;
-            margin-bottom: 5px;
-        }
-        .btn-primary {
-            font-size: 12px;
-            font-weight: bold;
-            border-radius: 8px;
-            width: 70px;
-            height: 35px;
-            background-color: #0FAA39;
-            border-color: #0FAA39;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 0;
-        }
-        /* Modal styling from menu.html */
-        .modal-fullscreen {
-            width: 100vw;
-            max-width: none;
-            height: 100%;
             margin: 0;
-        }
-        .modal-fullscreen .modal-content {
-            height: 100%;
-            border: none;
-            border-radius: 0;
-            background-color: #fdf4e3;
-        }
-        .modal-body {
-            padding: 20px;
-            overflow-y: auto;
-        }
-        .modal-footer {
-            padding: 15px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            border-top: none;
-        }
-        .addon-section {
-            background-color: #fff;
-            border: 2px solid #ffa500;
-            border-radius: 8px;
-            padding: 12px;
-            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;
+            color: #333333;
         }
     </style>
 </head>
@@ -223,30 +163,13 @@
         <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 }}">
+                <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="card menu-card">
-                        <video 
-                            class="card-img-top menu-video" 
-                            muted 
-                            loop 
-                            preload="auto" 
-                            data-src="{{ item.Video1__c }}" 
-                            poster="{{ item.Image1__c | default('/static/placeholder.jpg') }}"
-                            width="350" 
-                            height="200" 
-                            onmouseover="this.play()" 
-                            onmouseout="this.pause(); this.currentTime = 0;">
-                            <source src="{{ item.Video1__c }}" type="video/mp4">
-                        </video>
+                        <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;">
                         <div class="card-body">
                             <h5 class="card-title">{{ item.Name }}</h5>
-                            <p class="card-text price">${{ item.Price__c }}</p>
-                            <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 }}', '{{ item.Veg_NonVeg__c | default('both') | e }}', '{{ 'true' if item.is_menu_item else 'false' }}')">
-                                ADD
-                            </button>
                         </div>
                     </div>
                 </div>
@@ -261,46 +184,6 @@
         <div id="autocompleteSuggestions" class="autocomplete-suggestions"></div>
     </div>
 
-    <!-- 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">
-                <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 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 class="text-center">Customization Options</h6>
-                        <div id="addons-list" class="addons-container">Loading customization options...</div>
-                    </div>
-                    <div class="mt-4">
-                        <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="" data-is-menu-item="" style="display: none;"></span>
-                </div>
-                <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" 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>
-                </div>
-            </div>
-        </div>
-    </div>
-
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
     <script>
         const menuItems = [
@@ -371,155 +254,6 @@
                     suggestionsContainer.style.display = 'none';
                 }
             });
-
-            // Quantity controls
-            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;
-            });
-
-            window.showItemDetails = function(name, price, image, description, ingredients, nutrition, allergens, section, vegNonVeg, isMenuItem) {
-                document.getElementById('modal-name').innerText = name;
-                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.';
-                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('addons-list').innerHTML = 'Loading customization options...';
-                document.getElementById('modal-instructions').value = '';
-                const modalSectionEl = document.getElementById('modal-section');
-                modalSectionEl.setAttribute('data-section', section);
-                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(`/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 inputType = addon.max_selections === 1 ? 'radio' : 'checkbox';
-                                const listItem = document.createElement('div');
-                                listItem.classList.add('form-check');
-                                listItem.innerHTML = `
-                                    <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);
-                        });
-                    })
-                    .catch(err => {
-                        console.error('Error fetching add-ons:', err);
-                        document.getElementById('addons-list').innerHTML = '<p>Error loading customization options.</p>';
-                    });
-            };
-
-            window.addToCartFromModal = function() {
-                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;
-                const quantity = parseInt(document.getElementById('quantityInput').value);
-                const modalSectionEl = document.getElementById('modal-section');
-                const section = modalSectionEl.getAttribute('data-section');
-                const category = modalSectionEl.getAttribute('data-category');
-                const isMenuItem = modalSectionEl.getAttribute('data-is-menu-item') === 'true';
-
-                const addons = [];
-                document.querySelectorAll('.addon-option:checked').forEach(checkbox => {
-                    addons.push({
-                        name: checkbox.getAttribute('data-name'),
-                        price: parseFloat(checkbox.getAttribute('data-price')) || 0
-                    });
-                });
-
-                const cartPayload = {
-                    itemName: itemName,
-                    itemPrice: itemPrice,
-                    itemImage: itemImage,
-                    section: section,
-                    category: category,
-                    addons: addons,
-                    instructions: instructions,
-                    quantity: quantity
-                };
-
-                fetch('/cart/add', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify(cartPayload)
-                })
-                .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();
-                    } 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. Please check the console for details.');
-                });
-            };
         });
     </script>
 </body>