Update templates/reward_status.html

templates/reward_status.html

@@ -179,7 +179,7 @@
                 <div class="ingredient-card">
                     {% for ingredient in item.ingredients %}
                         {% if ingredient.name %}
-                            <div class="ingredient" onclick="showIngredientDetails('{{ ingredient.name }}')">
+                            <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>
@@ -202,35 +202,42 @@
         <div class="modal-body">
             <img id="ingredientImage" src="" alt="" style="width: 150px; height: 150px; object-fit: cover; border-radius: 8px;">
             <h3>Health Benefits:</h3>
-            <p id="healthBenefits"></p>
+            <ul id="healthBenefits"></ul>
             <h3>Fun Facts:</h3>
-            <p id="funFacts"></p>
+            <ul id="funFacts"></ul>
         </div>
     </div>
 </div>
 
 <script>
-    function showIngredientDetails(ingredient) {
-        let ingredientData = {
-            '{{ ingredient_1_name }}': {
-                name: "{{ ingredient_1_name }}",
-                image: "{{ ingredient_1_image }}",
-                health_benefits: "{{ ingredient_1_health_benefits }}",
-                fun_facts: "{{ ingredient_1_fun_facts }}"
-            },
-            '{{ ingredient_2_name }}': {
-                name: "{{ ingredient_2_name }}",
-                image: "{{ ingredient_2_image }}",
-                health_benefits: "{{ ingredient_2_health_benefits }}",
-                fun_facts: "{{ ingredient_2_fun_facts }}"
-            }
-        };
-
-        document.getElementById("ingredientName").textContent = ingredientData[ingredient].name;
-        document.getElementById("ingredientImage").src = ingredientData[ingredient].image;
-        document.getElementById("healthBenefits").textContent = ingredientData[ingredient].health_benefits;
-        document.getElementById("funFacts").textContent = ingredientData[ingredient].fun_facts;
-
+    function showIngredientDetails(name, image, healthBenefits, funFacts) {
+        // Split the health benefits and fun facts by commas
+        const healthBenefitsList = healthBenefits.split(',');
+        const funFactsList = funFacts.split(',');
+
+        // Set ingredient name and image
+        document.getElementById("ingredientName").textContent = name;
+        document.getElementById("ingredientImage").src = image;
+
+        // Clear the previous lists
+        document.getElementById("healthBenefits").innerHTML = '';
+        document.getElementById("funFacts").innerHTML = '';
+
+        // Add each health benefit as a list item
+        healthBenefitsList.forEach(function(item) {
+            const li = document.createElement("li");
+            li.textContent = item.trim();
+            document.getElementById("healthBenefits").appendChild(li);
+        });
+
+        // Add each fun fact as a list item
+        funFactsList.forEach(function(item) {
+            const li = document.createElement("li");
+            li.textContent = item.trim();
+            document.getElementById("funFacts").appendChild(li);
+        });
+
+        // Display the modal
         document.getElementById("ingredientModal").style.display = "block";
     }