Update templates/reward_status.html

templates/reward_status.html

@@ -167,32 +167,28 @@
             <div class="points">You have <strong>{{ user_points }}</strong> points</div>
         </div>
 
-        <div class="points-bar">
-            <div class="progress"></div>
-        </div>
-
-        <div class="points-info">
-            <div class="points">You need <strong>{{ points_needed_for_next_tier }}</strong> more points</div>
-            <div class="next-tier">Next tier: {{ next_tier }}</div>
-        </div>
-
         <!-- Reward Item Display -->
         <div class="reward-item-card">
-            <div>
-                <img class="item-image" src="{{ item_image_url }}" alt="{{ item_name }}">
-                <h3>{{ item_name }}</h3>
-            </div>
-            <div class="ingredient-card">
-                <div class="ingredient" onclick="showIngredientDetails('ingredient_1')">
-                    <img src="{{ ingredient_1_image }}" alt="{{ ingredient_1_name }}">
-                    <p>{{ ingredient_1_name }}</p>
+            {% for item in order_items %}
+                <div>
+                    <img class="item-image" src="{{ item.image_url }}" alt="{{ item.name }}" onerror="this.src='/static/placeholder.jpg';">
+                    <h3>{{ item.name }}</h3>
+                    <p>Price: ${{ "%.2f"|format(item.price) }}</p>
                 </div>
-                <div class="ingredient" onclick="showIngredientDetails('ingredient_2')">
-                    <img src="{{ ingredient_2_image }}" alt="{{ ingredient_2_name }}">
-                    <p>{{ ingredient_2_name }}</p>
+
+                <div class="ingredient-card">
+                    {% for ingredient in item.ingredients %}
+                        {% if ingredient.name %}
+                            <div class="ingredient" onclick="showIngredientDetails('{{ ingredient.name }}')">
+                                <img src="{{ ingredient.image }}" alt="{{ ingredient.name }}" onerror="this.src='/static/placeholder.jpg';">
+                                <p>{{ ingredient.name }}</p>
+                            </div>
+                        {% endif %}
+                    {% endfor %}
                 </div>
-            </div>
+            {% endfor %}
         </div>
+
     </div>
 </div>
 
@@ -215,15 +211,14 @@
 
 <script>
     function showIngredientDetails(ingredient) {
-        // Fetch data for the selected ingredient
         let ingredientData = {
-            'ingredient_1': {
+            '{{ 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': {
+            '{{ ingredient_2_name }}': {
                 name: "{{ ingredient_2_name }}",
                 image: "{{ ingredient_2_image }}",
                 health_benefits: "{{ ingredient_2_health_benefits }}",
@@ -231,21 +226,18 @@
             }
         };
 
-        // Update modal content
         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;
 
-        // Show the modal
         document.getElementById("ingredientModal").style.display = "block";
     }
 
     function closeModal() {
-        // Hide the modal
         document.getElementById("ingredientModal").style.display = "none";
     }
 </script>
 
 </body>
-</html>
+</html>