Update templates/reward_status.html

templates/reward_status.html

@@ -128,7 +128,7 @@
 
     <div class="reward-status">
         <div class="item-section">
-            {% for item in order_items %}
+            {% for item_index, item in enumerate(order_items) %}
                 <img class="item-image" src="{{ item.image_url }}" alt="{{ item.name }}" onerror="this.src='/static/placeholder.jpg';">
                 <div class="item-info">
                     <h3>{{ item.name }}</h3>
@@ -137,8 +137,9 @@
 
                 <!-- Ingredients -->
                 <div class="ingredient-card">
-                    {% for ingredient in item.ingredients %}
-                        <div class="ingredient" onclick="showIngredientDetails('{{ ingredient.name }}', '{{ ingredient.image }}', '{{ ingredient.health_benefits }}', '{{ ingredient.fun_facts }}')">
+                    {% for ingredient_index, ingredient in enumerate(item.ingredients) %}
+                        <div class="ingredient" 
+                             onclick="showIngredientDetails({{ item_index }}, {{ ingredient_index }})">
                             <img src="{{ ingredient.image }}" alt="{{ ingredient.name }}" onerror="this.src='/static/placeholder.jpg';">
                             <p>{{ ingredient.name }}</p>
                         </div>
@@ -168,23 +169,39 @@
 
 <script>
     // JavaScript for showing ingredient details in modal
-    function showIngredientDetails(name, image, healthBenefits, funFacts) {
-        const healthBenefitsList = healthBenefits.split(',');
-        const funFactsList = funFacts.split(',');
-        document.getElementById("ingredientName").textContent = name;
-        document.getElementById("ingredientImage").src = image;
+    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(',');
+        
         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";
     }