Update templates/reward_status.html

templates/reward_status.html

@@ -138,13 +138,20 @@
                 <!-- Ingredients -->
                 <div class="ingredient-card">
                     {% for ingredient in item.ingredients %}
-                        <div class="ingredient" 
-                             onclick="showIngredientDetails({{ loop.index0 }}, {{ loop.index0 }})">
+                        <div class="ingredient" onclick="showIngredientDetails('{{ ingredient.name }}', '{{ ingredient.image }}', '{{ ingredient.health_benefits }}', '{{ ingredient.fun_facts }}')">
                             <img src="{{ ingredient.image }}" alt="{{ ingredient.name }}" onerror="this.src='/static/placeholder.jpg';">
                             <p>{{ ingredient.name }}</p>
                         </div>
                     {% endfor %}
                 </div>
+
+                <!-- Debugging the items and ingredients in console -->
+                <script>
+                    console.log("Rendering item: {{ item.name }}");
+                    {% for ingredient in item.ingredients %}
+                        console.log("Ingredient: {{ ingredient.name }} - Image: {{ ingredient.image }}");
+                    {% endfor %}
+                </script>
             {% endfor %}
         </div>
     </div>
@@ -169,45 +176,42 @@
 
 <script>
     // JavaScript for showing ingredient details in modal
-    function showIngredientDetails(itemIndex, ingredientIndex) {
-        // Get the correct item and ingredient based on the index
-        const item = order_items[itemIndex];
-        const ingredient = item.ingredients[ingredientIndex];
-
-        // Set the ingredient name
-        document.getElementById("ingredientName").textContent = ingredient.name;
-
-        // Set the ingredient image
-        document.getElementById("ingredientImage").src = ingredient.image;
-
-        // Set health benefits
-        const healthBenefitsList = ingredient.health_benefits.split(',');
-        const funFactsList = ingredient.fun_facts.split(',');
-        
+    function showIngredientDetails(name, image, healthBenefits, funFacts) {
+        console.log("Ingredient clicked:", name);  // Debugging to check if the correct ingredient is clicked
+        const healthBenefitsList = healthBenefits.split(',');
+        const funFactsList = funFacts.split(',');
+        document.getElementById("ingredientName").textContent = name;
+        document.getElementById("ingredientImage").src = image;
         document.getElementById("healthBenefits").innerHTML = '';
         document.getElementById("funFacts").innerHTML = '';
-
-        // Display health benefits in the modal
         healthBenefitsList.forEach(function(item) {
             const li = document.createElement("li");
             li.textContent = item.trim();
             document.getElementById("healthBenefits").appendChild(li);
         });
-
-        // Display fun facts in the modal
         funFactsList.forEach(function(item) {
             const li = document.createElement("li");
             li.textContent = item.trim();
             document.getElementById("funFacts").appendChild(li);
         });
-
-        // Show the modal
         document.getElementById("ingredientModal").style.display = "block";
     }
 
     function closeModal() {
         document.getElementById("ingredientModal").style.display = "none";
     }
+
+    // Debugging: Check if items and ingredients exist on page load
+    window.onload = function() {
+        const items = document.querySelectorAll('.item-info');
+        items.forEach(item => {
+            console.log("Item:", item.querySelector('h3').innerText);
+            const ingredients = item.nextElementSibling.querySelectorAll('.ingredient');
+            ingredients.forEach(ingredient => {
+                console.log("Ingredient Name:", ingredient.querySelector('p').innerText);
+            });
+        });
+    }
 </script>
 
 </body>