Update templates/reward_status.html

templates/reward_status.html

@@ -118,22 +118,23 @@
 
     <div class="reward-status">
         <div class="item-section">
-            <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>
-                <p>Price: ${{ "%.2f"|format(item.price) }}</p>
-            </div>
-        </div>
+            {% for item in 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>
+                    <p>Price: ${{ "%.2f"|format(item.price) }}</p>
+                </div>
 
-        <div class="item-section">
-            <div class="ingredient-card">
-                {% for ingredient in item.ingredients %}
-                    <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>
+                <!-- 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 }}')">
+                            <img src="{{ ingredient.image }}" alt="{{ ingredient.name }}" onerror="this.src='/static/placeholder.jpg';">
+                            <p>{{ ingredient.name }}</p>
+                        </div>
+                    {% endfor %}
+                </div>
+            {% endfor %}
         </div>
     </div>
 </div>
@@ -156,34 +157,29 @@
 </div>
 
 <script>
+    // JavaScript for showing ingredient details in modal
     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";
     }