Update templates/menu.html

templates/menu.html

@@ -686,48 +686,7 @@ form-check-input addon-option{
     </div>
 
   <!-- Modal for Item Details -->
-<!-- <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">
-                <!-- Item Image -->
-                <img id="modal-img" class="img-fluid rounded mb-3 d-block mx-auto" alt="Item Image" style="max-height: 200px; object-fit: cover;">
-                <!-- Item Name -->
-                <h5 id="modal-name" class="fw-bold text-center"></h5>
-                <!-- Item Price -->
-                <p id="modal-price" class="text-muted text-center"></p>
-                <!-- Item Description -->
-                <p id="modal-description" class="text-secondary"></p>
-                <!-- Add-ons -->
-                <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>
-            <!-- Quantity Controls and Add to Cart Button -->
-            <div class="modal-footer d-flex align-items-center justify-content-between">
-                <!-- Quantity Controls -->
-                <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>
-                <!-- Add to Cart Button -->
-                <button type="button" class="btn btn-primary" onclick="addToCartFromModal()">Add to Cart</button>
-            </div>
-        </div>
-    </div>
-</div> -->
-<div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
+ <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">
@@ -770,135 +729,138 @@ form-check-input addon-option{
 </div>
 
 
+
 <!-- JavaScript -->
 <script>
-    // Show item details and fetch customization options
-    // function showItemDetails(name, price, image, description, section, selectedCategory) {
-    //     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('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', selectedCategory);
-
-    //      // Set the default quantity to 1
-    //          document.getElementById('quantityInput').value = 1;
+
+  
+     Show item details and fetch customization options
+    function showItemDetails(name, price, image, description, section, selectedCategory) {
+        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('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', selectedCategory);
+
+         // Set the default quantity to 1
+             document.getElementById('quantityInput').value = 1;
         
-    //     // Fetch customization options based on the section
-    //     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 = ''; // Clear previous content
-
-    //             if (!data.success || !data.addons || data.addons.length === 0) {
-    //                 addonsList.innerHTML = '<p>No customization options available.</p>';
-    //                 return;
-    //             }
+        // Fetch customization options based on the section
+        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 = ''; // Clear previous content
+
+                if (!data.success || !data.addons || data.addons.length === 0) {
+                    addonsList.innerHTML = '<p>No customization options available.</p>';
+                    return;
+                }
                 
-    //             // Display customization options inside styled divs
-    //             data.addons.forEach(addon => {
-    //                 const sectionDiv = document.createElement('div');
-    //                 sectionDiv.classList.add('addon-section'); // Add styling class
+                // Display customization options inside styled divs
+                data.addons.forEach(addon => {
+                    const sectionDiv = document.createElement('div');
+                    sectionDiv.classList.add('addon-section'); // Add styling class
                     
-    //                 // Add section title
-    //                 const title = document.createElement('h6');
-    //                 title.innerText = addon.name;
-    //                 sectionDiv.appendChild(title);
+                    // Add section title
+                    const title = document.createElement('h6');
+                    title.innerText = addon.name;
+                    sectionDiv.appendChild(title);
                     
-    //                 // Create options list
-    //                 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>';
-    //         });
-    // }
-
-
-  function showItemDetails(name, price, image, description, section, selectedCategory) {
-    // Set the modal details
-    document.getElementById('modal-name').innerText = name || 'Unnamed Item';
-    document.getElementById('modal-price').innerText = price ? `$${price}` : 'Price not available';
-    document.getElementById('modal-img').src = image || '/static/placeholder.jpg'; // Placeholder image if no image is available
-    document.getElementById('modal-description').innerText = description || 'No description available.';
-    document.getElementById('addons-list').innerHTML = 'Loading customization options...';
-    document.getElementById('modal-instructions').value = ''; // Clear any previous custom request
-
-    // Set hidden data attributes for section and category
-    const modalSectionEl = document.getElementById('modal-section');
-    modalSectionEl.setAttribute('data-section', section || 'default-section');
-    modalSectionEl.setAttribute('data-category', selectedCategory || 'default-category');
-
-    // Set the default quantity to 1
-    document.getElementById('quantityInput').value = 1;
-
-    // Fetch customization options based on the section
-    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 = ''; // Clear previous content
-
-            if (!data.success || !data.addons || data.addons.length === 0) {
-                addonsList.innerHTML = '<p>No customization options available.</p>';
-                return;
-            }
-
-            // Display customization options inside styled divs
-            data.addons.forEach(addon => {
-                const sectionDiv = document.createElement('div');
-                sectionDiv.classList.add('addon-section'); // Add styling class
-
-                // Add section title
-                const title = document.createElement('h6');
-                title.innerText = addon.name || 'Custom Add-ons';
-                sectionDiv.appendChild(title);
-
-                // Create options list
-                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);
+                    // Create options list
+                    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);
                 });
-                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>';
             });
-        })
-        .catch(err => {
-            console.error('Error fetching add-ons:', err);
-            document.getElementById('addons-list').innerHTML = '<p>Error loading customization options.</p>';
-        });
-}
+    }
+
+
+//   function showItemDetails(name, price, image, description, section, selectedCategory) {
+//     // Set the modal details
+//     document.getElementById('modal-name').innerText = name || 'Unnamed Item';
+//     document.getElementById('modal-price').innerText = price ? `$${price}` : 'Price not available';
+//     document.getElementById('modal-img').src = image || '/static/placeholder.jpg'; // Placeholder image if no image is available
+//     document.getElementById('modal-description').innerText = description || 'No description available.';
+//     document.getElementById('addons-list').innerHTML = 'Loading customization options...';
+//     document.getElementById('modal-instructions').value = ''; // Clear any previous custom request
+
+//     // Set hidden data attributes for section and category
+//     const modalSectionEl = document.getElementById('modal-section');
+//     modalSectionEl.setAttribute('data-section', section || 'default-section');
+//     modalSectionEl.setAttribute('data-category', selectedCategory || 'default-category');
+
+//     // Set the default quantity to 1
+//     document.getElementById('quantityInput').value = 1;
+
+//     // Fetch customization options based on the section
+//     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 = ''; // Clear previous content
+
+//             if (!data.success || !data.addons || data.addons.length === 0) {
+//                 addonsList.innerHTML = '<p>No customization options available.</p>';
+//                 return;
+//             }
+
+//             // Display customization options inside styled divs
+//             data.addons.forEach(addon => {
+//                 const sectionDiv = document.createElement('div');
+//                 sectionDiv.classList.add('addon-section'); // Add styling class
+
+//                 // Add section title
+//                 const title = document.createElement('h6');
+//                 title.innerText = addon.name || 'Custom Add-ons';
+//                 sectionDiv.appendChild(title);
+
+//                 // Create options list
+//                 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>';
+//         });
+// }