Update templates/menu.html

templates/menu.html

@@ -153,7 +153,7 @@
                         <p class="card-text">${{ item.Price__c }}</p>
                         <p class="card-text"><small class="text-muted">{{ item.Category__c }}</small></p>
                         <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#itemModal" 
-                            onclick="showItemDetails('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image2__c }}', '{{ item.Description__c }}', '{{item.Section__c}}')">
+                            onclick="showItemDetails('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image2__c }}', '{{ item.Description__c }}', '{{item.Section__c}}','{{ selected_category }}')">
                             Add +
                         </button>
                     </div>
@@ -207,7 +207,7 @@
 
     <!-- JavaScript -->
     <script>
-        function showItemDetails(name, price, image, description, section) {
+        function showItemDetails(name, price, image, description, section, selectedCategory) {
             // Set modal content dynamically
             document.getElementById('modal-name').innerText = name;
             document.getElementById('modal-price').innerText = `$${price}`;
@@ -216,6 +216,8 @@
             document.getElementById('addons-list').innerHTML = 'Loading add-ons...';
             document.getElementById('modal-instructions').value = '';
             document.getElementById('modal-section').innerText = section || 'No section available';  // Show section
+            document.getElementById('modal-section').setAttribute('data-section', section);
+            document.getElementById('modal-section').setAttribute('data-category', selectedCategory);
             // Fetch add-ons dynamically based on item Name
             fetch(`/api/addons?item_name=${encodeURIComponent(name)}`)
                 .then(response => response.json())
@@ -246,6 +248,8 @@
             const itemName = document.getElementById('modal-name').innerText; // Get item name
             const itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', '')); // Get item price
             const itemImage = document.getElementById('modal-img').src; // Get item image
+            const section = document.getElementById('modal-section').getAttribute('data-section');
+            const selectedCategory = document.getElementById('modal-section').getAttribute('data-category');
             const selectedAddOns = Array.from(
                 document.querySelectorAll('#addons-list input[type="checkbox"]:checked')
             ).map(addon => ({
@@ -264,6 +268,8 @@
                 itemName: itemName, // Food item name
                 itemPrice: itemPrice,
                 itemImage: itemImage, // Image URL
+                section: section,
+                category: selectedCategory,
                 addons: selectedAddOns,
                 instructions: instructions
             };