Update templates/reward_status.html

templates/reward_status.html

@@ -89,7 +89,6 @@
             object-fit: cover;
             border-radius: 8px;
         }
-
         /* Modal Styling */
         .modal {
             display: none;
@@ -144,7 +143,7 @@
                 <div class="ingredient-card">
                     {% if item.ingredients %}
                         {% for ingredient in item.ingredients %}
-                            <div class="ingredient" onclick="showIngredientDetails('{{ ingredient.name }}', '{{ ingredient.image }}', '{{ ingredient.health_benefits }}', '{{ ingredient.fun_facts }}')">
+                            <div class="ingredient" onclick="showIngredientDetails('{{ loop.index }}', '{{ 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>
@@ -153,63 +152,55 @@
                         <p>No ingredients found for {{ item.name }}</p>
                     {% endif %}
                 </div>
-            {% endfor %}
-        </div>
-    </div>
-</div>
 
-<!-- Ingredient Modal -->
-<div id="ingredientModal" class="modal">
-    <div class="modal-content">
-        <span class="close" onclick="closeModal()">&times;</span>
-        <div class="modal-header">
-            <h2 id="ingredientName"></h2>
-        </div>
-        <div class="modal-body">
-            <img id="ingredientImage" src="" alt="" style="width: 150px; height: 150px; object-fit: cover; border-radius: 8px;">
-            <h3>Health Benefits:</h3>
-            <ul id="healthBenefits"></ul>
-            <h3>Fun Facts:</h3>
-            <ul id="funFacts"></ul>
+                <!-- Ingredient Modal for each item -->
+                <div id="ingredientModal{{ loop.index }}" class="modal">
+                    <div class="modal-content">
+                        <span class="close" onclick="closeModal({{ loop.index }})">&times;</span>
+                        <div class="modal-header">
+                            <h2 id="ingredientName{{ loop.index }}"></h2>
+                        </div>
+                        <div class="modal-body">
+                            <img id="ingredientImage{{ loop.index }}" src="" alt="" style="width: 150px; height: 150px; object-fit: cover; border-radius: 8px;">
+                            <h3>Health Benefits:</h3>
+                            <ul id="healthBenefits{{ loop.index }}"></ul>
+                            <h3>Fun Facts:</h3>
+                            <ul id="funFacts{{ loop.index }}"></ul>
+                        </div>
+                    </div>
+                </div>
+            {% endfor %}
         </div>
     </div>
 </div>
 
 <script>
     // JavaScript for showing ingredient details in modal
-    function showIngredientDetails(name, image, healthBenefits, funFacts) {
+    function showIngredientDetails(index, name, image, healthBenefits, funFacts) {
         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 = '';
+        document.getElementById("ingredientName" + index).textContent = name;
+        document.getElementById("ingredientImage" + index).src = image;
+        document.getElementById("healthBenefits" + index).innerHTML = '';
+        document.getElementById("funFacts" + index).innerHTML = '';
+        
         healthBenefitsList.forEach(function(item) {
             const li = document.createElement("li");
             li.textContent = item.trim();
-            document.getElementById("healthBenefits").appendChild(li);
+            document.getElementById("healthBenefits" + index).appendChild(li);
         });
+
         funFactsList.forEach(function(item) {
             const li = document.createElement("li");
             li.textContent = item.trim();
-            document.getElementById("funFacts").appendChild(li);
+            document.getElementById("funFacts" + index).appendChild(li);
         });
-        document.getElementById("ingredientModal").style.display = "block";
-    }
 
-    function closeModal() {
-        document.getElementById("ingredientModal").style.display = "none";
+        document.getElementById("ingredientModal" + index).style.display = "block";
     }
 
-    // Debugging: Ensure ingredients are visible
-    window.onload = function() {
-        const items = document.querySelectorAll('.item-info');
-        items.forEach(item => {
-            const ingredients = item.nextElementSibling.querySelectorAll('.ingredient');
-            ingredients.forEach(ingredient => {
-                console.log("Ingredient:", ingredient.querySelector('p').innerText);
-            });
-        });
+    function closeModal(index) {
+        document.getElementById("ingredientModal" + index).style.display = "none";
     }
 </script>