Rename templates/combined_summary.html to combined_summary.html

combined_summary.html

@@ -0,0 +1,166 @@
+from flask import Blueprint, render_template, session, redirect, url_for
+from salesforce import get_salesforce_connection
+from flask import Blueprint, render_template, request, session, jsonify, redirect, url_for
+import os
+import re
+from salesforce import get_salesforce_connection
+
+
+combined_summary_blueprint = Blueprint('combined_summary', __name__)
+
+# Initialize Salesforce connection
+sf = get_salesforce_connection()
+
+def escape_soql(value):
+    """Escape single quotes in SOQL query values to prevent injection."""
+    if value:
+        return value.replace("'", "\\'")
+    return value
+
+@combined_summary_blueprint.route('/combined_summary')
+def combined_summary():
+    email = session.get('user_email')
+    if not email:
+        print("No user email in session, redirecting to login")
+        return redirect(url_for('login'))
+
+    try:
+        # Sanitize email for SOQL query
+        safe_email = escape_soql(email)
+
+        # ====== FETCH REWARDS ======
+        reward_query = f"SELECT Id, Reward_Points__c FROM Customer_Login__c WHERE Email__c = '{safe_email}'"
+        reward_data = sf.query_all(reward_query)
+        if not reward_data.get("records"):
+            print(f"No reward info found for email: {email}")
+            return "Reward info not found", 404
+
+        user_points = reward_data["records"][0].get("Reward_Points__c", 0)
+
+        # Determine tier
+        tiers = {
+            "Bronze": 100,
+            "Silver": 200,
+            "Gold": 300,
+            "Platinum": 500
+        }
+        current_tier, next_tier = "Bronze", "Silver"
+        start_point, end_point = 0, 100
+        if user_points >= 100 and user_points < 200:
+            current_tier, next_tier = "Silver", "Gold"
+            start_point, end_point = 100, 200
+        elif user_points >= 200 and user_points < 300:
+            current_tier, next_tier = "Gold", "Platinum"
+            start_point, end_point = 200, 300
+        elif user_points >= 300:
+            current_tier, next_tier = "Platinum", "N/A"
+            start_point, end_point = 300, 500
+
+        progress_percentage = ((user_points - start_point) / (end_point - start_point)) * 100 if end_point != start_point else 100
+        points_needed_for_next_tier = max(0, end_point - user_points)
+
+        # ====== FETCH ORDER SUMMARY ======
+        order_query = f"""
+            SELECT Id, Customer_Name__c, Customer_Email__c, Total_Amount__c, Order_Details__c, 
+                   Order_Status__c, Discount__c, Total_Bill__c
+            FROM Order__c
+            WHERE Customer_Email__c = '{safe_email}'
+            ORDER BY CreatedDate DESC
+            LIMIT 1
+        """
+        order_result = sf.query_all(order_query)
+        if not order_result.get("records"):
+            print(f"No order found for email: {email}")
+            return "No order found", 404
+
+        order = order_result["records"][0]
+        order_details = order.get("Order_Details__c", "")
+        order_items = []
+        sector_names = set()  # Use a set to ensure sector names are unique
+
+        for line in order_details.split('\n'):
+            item_parts = line.split('|')
+            if len(item_parts) >= 5:
+                item_name_raw = item_parts[0].strip()
+                item_name = ' '.join(item_name_raw.split(' ')[:-1]).strip()
+                safe_item_name = escape_soql(item_name)
+
+                menu_query = f"""
+                    SELECT Name, Price__c, Image1__c,
+                        Ingredient_1__r.Ingredient_Name__c, Ingredient_1__r.Ingredient_Image__c, 
+                        Ingredient_1__r.Health_Benefits__c, Ingredient_1__r.Fun_Facts__c,
+                        Ingredient_2__r.Ingredient_Name__c, Ingredient_2__r.Ingredient_Image__c, 
+                        Ingredient_2__r.Health_Benefits__c, Ingredient_2__r.Fun_Facts__c,
+                        Sector__c  
+                    FROM Menu_Item__c
+                    WHERE Name = '{safe_item_name}'
+                """
+                menu_result = sf.query_all(menu_query)
+                ingredients = []
+
+                if menu_result.get("records"):
+                    menu_item = menu_result["records"][0]
+
+                    # Process Ingredient 1 if it exists
+                    if menu_item.get('Ingredient_1__r') is not None:
+                        ingredients.append({
+                            "name": menu_item['Ingredient_1__r'].get('Ingredient_Name__c', ''),
+                            "image": menu_item['Ingredient_1__r'].get('Ingredient_Image__c', ''),
+                            "health_benefits": menu_item['Ingredient_1__r'].get('Health_Benefits__c', ''),
+                            "fun_facts": menu_item['Ingredient_1__r'].get('Fun_Facts__c', '')
+                        })
+
+                    # Process Ingredient 2 if it exists
+                    if menu_item.get('Ingredient_2__r') is not None:
+                        ingredients.append({
+                            "name": menu_item['Ingredient_2__r'].get('Ingredient_Name__c', ''),
+                            "image": menu_item['Ingredient_2__r'].get('Ingredient_Image__c', ''),
+                            "health_benefits": menu_item['Ingredient_2__r'].get('Health_Benefits__c', ''),
+                            "fun_facts": menu_item['Ingredient_2__r'].get('Fun_Facts__c', '')
+                        })
+
+                    # Process the Sector__c field from Menu_Item__c
+                    if menu_item.get('Sector__c'):
+                        sector_names.update(menu_item['Sector__c'].split(','))  # Add sectors to the set
+
+                    # Only add the item if ingredients are present
+                    order_items.append({
+                        "name": item_name,
+                        "price": menu_item.get("Price__c", 0),
+                        "image_url": menu_item.get("Image1__c", ''),
+                        "ingredients": ingredients
+                    })
+
+        # Fetch the sector details from the Sector_Detail__c object
+        sector_details = {}
+        for sector_name in sector_names:
+            safe_sector_name = escape_soql(sector_name.strip())
+            sector_query = f"""
+                SELECT Name, Image_URL__c, Description__c
+                FROM Sector_Detail__c
+                WHERE Name = '{safe_sector_name}'
+            """
+            sector_result = sf.query_all(sector_query)
+            if sector_result.get("records"):
+                sector_record = sector_result["records"][0]
+                sector_details[sector_name] = {
+                    "image_url": sector_record.get('Image_URL__c', ''),
+                    "description": sector_record.get('Description__c', '')
+                }
+
+        return render_template(
+            'combined_summary.html',
+            user_points=round(user_points),
+            current_tier=current_tier,
+            next_tier=next_tier,
+            start_point=start_point,
+            end_point=end_point,
+            progress_percentage=round(progress_percentage),
+            points_needed_for_next_tier=round(points_needed_for_next_tier),
+            order_items=order_items,
+            sector_details=sector_details
+        )
+
+    except Exception as e:
+        print(f"Error in combined_summary: {str(e)}")
+        return f"Error: {str(e)}", 500

templates/combined_summary.html

@@ -1,606 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <title>Order Summary</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <style>
-        /* Custom animations */
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        @keyframes lightMoveUp {
-            0% { background-position: 0 100%; }
-            100% { background-position: 0 0%; }
-        }
-        @keyframes shine {
-            from { transform: rotate(0deg) translateX(-100%); }
-            to { transform: rotate(25deg) translateX(100%); }
-        }
-        .modal, .popup {
-            animation: fadeIn 0.2s ease-in-out;
-        }
-        .progress-bar {
-            transition: width 0.6s ease-in-out;
-        }
-        .ingredient-image {
-            transition: transform 0.3s ease-in-out;
-        }
-        .ingredient-button:hover .ingredient-image {
-            transform: scale(1.1);
-        }
-        .tier-badge {
-            position: relative;
-            overflow: hidden;
-            background-color: #FFB347;
-        }
-        .tier-badge::after {
-            content: '';
-            position: absolute;
-            top: -50%;
-            left: -50%;
-            width: 200%;
-            height: 200%;
-            background: linear-gradient(45deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
-            animation: shine 3s infinite;
-        }
-        /* Custom class for order items */
-        .custom-class {
-            text-align: center;
-            border-radius: 8px;
-            border-width: 1px;
-            border-color: #E5E7EB;
-            padding: 20px !important;
-            margin-bottom: 12px;
-            background-color: #FFFFFF;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-        }
-        .history {
-            display: flex;
-            justify-content: center;
-            font-size: 1.75rem;
-            font-weight: 700;
-            padding: 1.5rem;
-        }
-        /* Scrollable sector images */
-        .sector-images-container {
-            display: flex;
-            overflow-x: auto;
-            padding: 10px 0;
-            gap: 15px;
-        }
-        .sector-image {
-            max-width: 150px;
-            height: 100px;
-            object-fit: cover;
-            cursor: pointer;
-            border-radius: 6px;
-        }
-        .sector-name {
-            text-align: center;
-            font-size: 0.75rem;
-            font-weight: 600;
-            margin-top: 6px;
-            max-width: 100px;
-            color: #1F2937;
-        }
-        /* Full-width gradient header */
-        .back-to-menu {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            display: flex;
-            align-items: center;
-            padding: 14px 24px;
-            background: linear-gradient(45deg, #FFA07A, #FFB347);
-            color: #FFFFFF;
-            font-size: 1.125rem;
-            font-weight: 600;
-            text-decoration: none;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-            z-index: 9999;
-            transition: background-color 0.3s ease, transform 0.2s ease;
-        }
-        .back-to-menu:hover {
-            background: linear-gradient(45deg, #FF8C61, #FF9E2C);
-            transform: translateY(-1px);
-        }
-        /* Content spacing */
-        .container {
-            margin-top: 90px;
-        }
-        /* Sector popup */
-        #sector-popup {
-            display: none;
-            position: fixed;
-            inset: 0;
-            background: rgba(17, 24, 39, 0.6);
-            justify-content: center;
-            align-items: center;
-            z-index: 10000;
-            animation: fadeIn 0.2s ease-in-out;
-        }
-        #popup-content {
-            background: linear-gradient(135deg, #FFFFFF 0%, #F9FAFB 100%);
-            padding: 24px;
-            border-radius: 12px;
-            width: 90%;
-            max-width: 550px;
-            max-height: 85vh;
-            overflow-y: auto;
-            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
-            border: 1px solid #E5E7EB;
-            position: relative;
-            contain: layout;
-        }
-        .popup-header {
-            position: relative;
-            padding-bottom: 12px;
-            margin-bottom: 16px;
-            border-bottom: 2px solid #FFB347;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        .popup-close {
-            background: #FFB347;
-            color: #FFFFFF;
-            border-radius: 50%;
-            width: 40px;
-            height: 40px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 24px;
-            font-weight: bold;
-            border: none;
-            cursor: pointer;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-            line-height: 1;
-            padding: 0;
-            position: relative;
-            overflow: hidden;
-            will-change: transform, background;
-        }
-        .popup-close::before {
-            content: '';
-            position: absolute;
-            top: 100%;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(to top, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
-            animation: lightMoveUp 1.5s infinite linear;
-            z-index: 0;
-        }
-        .popup-close:hover {
-            background: #FF9E2C;
-            transform: scale(1.1);
-        }
-        .popup-close span {
-            position: relative;
-            z-index: 1;
-        }
-        /* Ingredient modal */
-        .ingredient-modal-container {
-            display: none;
-            position: fixed;
-            inset: 0;
-            background: rgba(0, 0, 0, 0.6);
-            justify-content: center;
-            align-items: center;
-            z-index: 10000;
-            animation: fadeIn 0.2s ease-in-out;
-        }
-        .ingredient-modal {
-            background: linear-gradient(135deg, #FFFFFF 0%, #F9FAFB 100%);
-            border-radius: 12px;
-            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
-            border: 1px solid #E5E7EB;
-            width: 90%;
-            max-width: 500px;
-            max-height: 90vh;
-            overflow-y: auto;
-            position: relative;
-            contain: layout;
-        }
-        .modal-section {
-            padding: 16px;
-            border-left: 4px solid #2DD4BF;
-            margin-bottom: 16px;
-            background: #F9FAFB;
-            border-radius: 6px;
-        }
-        /* Green border for ingredient images when section is visible */
-        .ingredients-section:not(.hidden) .ingredient-image {
-            border: 2px solid #10B981;
-            border-radius: 6px;
-        }
-        /* Prevent body scroll when modal is open */
-        body.modal-open {
-            overflow: hidden;
-        }
-        /* Fallback messages */
-        .no-data {
-            text-align: center;
-            color: #6B7280;
-            font-size: 1.125rem;
-            padding: 20px;
-            background: #F9FAFB;
-            border-radius: 8px;
-            margin-bottom: 20px;
-        }
-        /* Responsive adjustments */
-        @media (max-width: 640px) {
-            .back-to-menu {
-                padding: 12px 16px;
-                font-size: 1rem;
-            }
-            .container {
-                margin-top: 70px;
-            }
-            .history {
-                font-size: 1.5rem;
-                padding: 1rem;
-            }
-            .custom-class {
-                padding: 16px !important;
-            }
-            .sector-image {
-                max-width: 120px;
-                height: 80px;
-            }
-            #popup-content {
-                width: 95%;
-                padding: 16px;
-                max-height: 80vh;
-            }
-            .ingredient-modal {
-                width: 95%;
-                max-height: 80vh;
-            }
-            .popup-close {
-                width: 40px;
-                height: 40px;
-                font-size: 24px;
-            }
-            .popup-close::before {
-                animation: lightMoveUp 1.2s infinite linear;
-            }
-        }
-    </style>
-</head>
-<body class="bg-gray-50">
-    <a href="{{ url_for('menu.menu') }}" class="back-to-menu" aria-label="Go back to menu">
-        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mr-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M15 18l-6-6 6-6"></path>
-        </svg>
-        Back to Menu
-    </a>
-
-    <div class="container mx-auto p-6 pt-2">
-        <!-- Order Confirmation -->
-        <div class="section bg-white shadow-sm rounded-xl p-6 mb-6">
-            <h1 class="text-center text-2xl font-bold text-orange-500">Order Confirmed!</h1>
-            <p class="text-center text-gray-600 mt-2">Estimated delivery time: {{ delivery_time }} minutes</p>
-        </div>
-
-        <!-- Reward Status Section -->
-        <div class="section bg-white rounded-xl shadow-lg p-6 mb-6">
-            <div class="flex items-center justify-between mb-4 cursor-pointer" onclick="toggleTierDetails()" aria-expanded="false" aria-controls="tierDetails">
-                <div id="tierBadge" class="w-8 h-8 p-1 rounded-full flex items-center justify-center tier-badge">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white">
-                        <path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"></path>
-                        <path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"></path>
-                        <path d="M4 22h16"></path>
-                        <path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"></path>
-                        <path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"></path>
-                        <path d="M9 9c0 .97.64 1.79 1.5 2.05A2 2 0 0 1 12 13c.82 0 1.54-.39 2-1"></path>
-                        <path d="M18 9H6a4 4 0 0 1 0-8h12a4 4 0 0 1 0 8Z"></path>
-                    </svg>
-                </div>
-                <span class="ml-2 text-xl font-bold text-orange-500" id="currentTier">{{ current_tier }} Tier</span>
-                <svg id="arrowIcon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-gray-600">
-                    <path id="arrowPath" d="M19 9l-7 7-7-7"></path>
-                </svg>
-            </div>
-
-            <!-- Collapsible Content Section -->
-            <div id="tierDetails" class="tier-details hidden">
-                <div class="text-center mb-6">
-                    <p class="text-gray-600">Valid through December {{ validity_year }}</p>
-                    <p class="text-lg font-semibold mt-2 text-yellow-600" id="pointsDisplay">{{ user_points }} points</p>
-                </div>
-
-                <!-- Progress Bar -->
-                <div class="relative h-4 bg-gray-200 rounded-full overflow-hidden mb-4">
-                    <div id="progressBar" class="absolute left-0 top-0 h-full progress-bar bg-teal-400" style="width: {{ progress_percentage }}%"></div>
-                </div>
-
-                <div class="flex justify-between text-sm text-gray-600 mb-4">
-                    <span id="startPoint">{{ start_point }}</span>
-                    <span id="endPoint">{{ end_point }}</span>
-                </div>
-
-                <p class="text-center text-gray-700">
-                    You need <span class="font-semibold text-gray-800" id="pointsNeeded">{{ points_needed_for_next_tier }}</span> more
-                    points to reach
-                    <span class="font-semibold text-orange-500" id="nextTier">{{ next_tier }}</span>
-                </p>
-
-                <!-- Tier Benefits -->
-                <div class="mt-6 bg-gray-50 rounded-xl p-4">
-                    <h3 class="text-lg font-semibold mb-4 text-gray-800" id="benefitsTitle">
-                        Benefits of Reaching {{ next_tier }} Tier
-                    </h3>
-                    <ul class="space-y-3" id="benefitsList">
-                        {% if next_tier == "Silver" %}
-                        <li class="flex items-center">
-                            <span class="text-2xl mr-3">🏷️</span>
-                            <span class="text-gray-700">10% discount on next purchase</span>
-                        </li>
-                        <li class="flex items-center">
-                            <span class="text-2xl mr-3">🍹</span>
-                            <span class="text-gray-700">Free soft drink with your next order</span>
-                        </li>
-                        {% elif next_tier == "Gold" %}
-                        <li class="flex items-center">
-                            <span class="text-2xl mr-3">🏷️</span>
-                            <span class="text-gray-700">15% discount on next purchase</span>
-                        </li>
-                        <li class="flex items-center">
-                            <span class="text-2xl mr-3">🍰</span>
-                            <span class="text-gray-700">Free dessert on next order</span>
-                        </li>
-                        {% elif next_tier == "Platinum" %}
-                        <li class="flex items-center">
-                            <span class="text-2xl mr-3">🏷️</span>
-                            <span class="text-gray-700">20% discount on next purchase</span>
-                        </li>
-                        <li class="flex items-center">
-                            <span class="text-2xl mr-3">🍴</span>
-                            <span class="text-gray-700">Free entrée with your next order</span>
-                        </li>
-                        {% else %}
-                        <li class="text-gray-700">You've reached the highest tier! Enjoy exclusive benefits.</li>
-                        {% endif %}
-                    </ul>
-                </div>
-            </div>
-        </div>
-
-        <!-- Ingredient History -->
-        <div class="history">
-            <h1 class="text-center text-2xl font-bold text-orange-500">Ingredient History</h1>
-        </div>
-        {% if sector_details %}
-        <div class="sector-images-container">
-            {% for sector_name, sector in sector_details.items() %}
-            <div class="sector-item">
-                <img src="{{ sector.image_url | default('/static/placeholder.jpg') }}" alt="{{ sector_name }}" class="sector-image lazyload" loading="lazy" onclick="showSectorDescription('{{ sector.description | escape }}')">
-                <h3 class="sector-name">{{ sector_name }}</h3>
-            </div>
-            {% endfor %}
-        </div>
-        {% else %}
-        <div class="no-data">No sector details available.</div>
-        {% endif %}
-
-        <!-- Popup for Sector Description -->
-        <div id="sector-popup" class="popup" style="display:none;" role="dialog" aria-modal="true" aria-labelledby="sector-popup-title">
-            <div id="popup-content">
-                <div class="popup-header flex justify-between items-center">
-                    <h3 id="sector-popup-title" class="text-xl font-semibold text-gray-800">Origin History</h3>
-                    <button onclick="closePopup()" class="popup-close" aria-label="Close sector description popup"><span>×</span></button>
-                </div>
-                <p id="sector-description" class="text-gray-700 leading-relaxed"></p>
-            </div>
-        </div>
-
-        <!-- Order Items Section -->
-        <div class="text-center text-2xl font-bold text-orange-500 mb-6">Previous Orders</div>
-        {% if order_items %}
-        {% for item in order_items %}
-        <div class="custom-class">
-            <img src="{{ item.image_url | default('/static/placeholder.jpg') }}" alt="{{ item.name | escape }}" class="w-full h-48 object-cover rounded-xl mb-4 lazyload" loading="lazy" />
-            <h3 class="text-lg font-semibold text-gray-800">{{ item.name | escape }}</h3>
-            <p class="text-gray-600 mb-2">${{ "%.2f"|format(item.price | default(0)) }}</p>
-
-            {% if item.ingredients %}
-            <button id="ingredientsToggleButton{{ loop.index }}" class="text-green-600 text-sm font-semibold mt-2 ml-2 text-left pb-4 hover:text-green-700" onclick="toggleIngredients({{ loop.index }})" aria-expanded="false" aria-controls="ingredientsSection{{ loop.index }}">
-                Show Ingredients
-            </button>
-
-            <div id="ingredientsSection{{ loop.index }}" class="ingredients-section hidden mt-4">
-                <div class="grid grid-cols-2 gap-4">
-                    {% for ingredient in item.ingredients %}
-                    <button 
-                        onclick="showIngredientDetails(
-                            '{{ loop.index }}', 
-                            '{{ ingredient.name | escape }}', 
-                            '{{ ingredient.image | default('/static/placeholder.jpg') | escape }}', 
-                            '{{ ingredient.health_benefits | escape }}', 
-                            '{{ ingredient.fun_facts | escape }}'
-                        )"
-                        class="relative group ingredient-button"
-                        aria-label="View details for {{ ingredient.name }}"
-                    >
-                        <div class="overflow-hidden rounded-lg">
-                            <img 
-                                src="{{ ingredient.image | default('/static/placeholder.jpg') }}" 
-                                alt="{{ ingredient.name | escape }}"
-                                class="w-full h-32 object-cover ingredient-image lazyload"
-                                loading="lazy"
-                            />
-                        </div>
-                        <p class="mt-2 text-center text-sm font-medium text-gray-800">{{ ingredient.name | escape }}</p>
-                    </button>
-                    {% endfor %}
-                </div>
-            </div>
-            {% endif %}
-        </div>
-
-        <!-- Modal for Ingredients -->
-        <div id="ingredientModal{{ loop.index }}" class="ingredient-modal-container hidden modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle{{ loop.index }}">
-            <div class="ingredient-modal">
-                <div class="p-6">
-                    <div class="popup-header flex justify-between items-center mb-4">
-                        <h3 id="modalTitle{{ loop.index }}" class="text-xl font-semibold text-gray-800"></h3>
-                        <button onclick="closeModal({{ loop.index }})" class="popup-close" aria-label="Close ingredient details modal"><span>×</span></button>
-                    </div>
-
-                    <img id="modalImage{{ loop.index }}" src="" alt="" class="w-full h-48 object-cover rounded-xl mb-4 border border-gray-200 lazyload" loading="lazy" />
-
-                    <div class="space-y-4">
-                        <div class="modal-section">
-                            <h4 class="font-semibold mb-2 text-gray-800 flex items-center">
-                                <svg class="w-5 h-5 mr-2 text-teal-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-                                </svg>
-                                Health Benefits
-                            </h4>
-                            <ul id="healthBenefits{{ loop.index }}" class="list-disc list-inside text-gray-700"></ul>
-                        </div>
-
-                        <div class="modal-section">
-                            <h4 class="font-semibold mb-2 text-gray-800 flex items-center">
-                                <svg class="w-5 h-5 mr-2 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-                                </svg>
-                                Fun Facts
-                            </h4>
-                            <ul id="funFacts{{ loop.index }}" class="list-disc list-inside text-gray-700"></ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        {% endfor %}
-        {% else %}
-        <div class="no-data">No previous orders found.</div>
-        {% endif %}
-    </div>
-
-    <script>
-        // Debounce function for performance
-        function debounce(func, wait) {
-            let timeout;
-            return function executedFunction(...args) {
-                const later = () => {
-                    clearTimeout(timeout);
-                    func(...args);
-                };
-                clearTimeout(timeout);
-                timeout = setTimeout(later, wait);
-            };
-        }
-
-        // Show sector description popup
-        function showSectorDescription(description) {
-            try {
-                document.getElementById('sector-description').innerText = description || 'No description available.';
-                document.getElementById('sector-popup').style.display = 'flex';
-                document.body.classList.add('modal-open');
-            } catch (e) {
-                console.error('Error showing sector description:', e);
-            }
-        }
-
-        // Close sector popup
-        function closePopup() {
-            document.getElementById('sector-popup').style.display = 'none';
-            document.body.classList.remove('modal-open');
-        }
-
-        // Toggle tier details
-        function toggleTierDetails() {
-            const tierDetails = document.getElementById('tierDetails');
-            const arrowPath = document.getElementById('arrowPath');
-            const toggleButton = tierDetails.parentElement.querySelector('[aria-controls="tierDetails"]');
-            const isExpanded = !tierDetails.classList.contains('hidden');
-            tierDetails.classList.toggle('hidden');
-            arrowPath.setAttribute('d', tierDetails.classList.contains('hidden') ? 'M19 9l-7 7-7-7' : 'M19 15l-7-7-7 7');
-            toggleButton.setAttribute('aria-expanded', !isExpanded);
-        }
-
-        // Toggle ingredients section
-        function toggleIngredients(index) {
-            try {
-                const currentSection = document.getElementById('ingredientsSection' + index);
-                const currentButton = document.getElementById('ingredientsToggleButton' + index);
-                const isCurrentlyVisible = !currentSection.classList.contains('hidden');
-
-                document.querySelectorAll('[id^="ingredientsSection"]').forEach(section => section.classList.add('hidden'));
-                document.querySelectorAll('[id^="ingredientsToggleButton"]').forEach(button => {
-                    button.textContent = 'Show Ingredients';
-                    button.setAttribute('aria-expanded', 'false');
-                });
-
-                if (!isCurrentlyVisible) {
-                    currentSection.classList.remove('hidden');
-                    currentButton.textContent = 'Hide Ingredients';
-                    currentButton.setAttribute('aria-expanded', 'true');
-                }
-            } catch (e) {
-                console.error('Error toggling ingredients:', e);
-            }
-        }
-
-        // Show ingredient details modal
-        function showIngredientDetails(index, name, image, healthBenefits, funFacts) {
-            try {
-                const healthBenefitsList = (healthBenefits || '').split(',').filter(item => item.trim());
-                const funFactsList = (funFacts || '').split(',').filter(item => item.trim());
-                document.getElementById("modalTitle" + index).textContent = name || 'Unknown Ingredient';
-                document.getElementById("modalImage" + index).src = image || '/static/placeholder.jpg';
-                const healthBenefitsUl = document.getElementById("healthBenefits" + index);
-                const funFactsUl = document.getElementById("funFacts" + index);
-                healthBenefitsUl.innerHTML = '';
-                funFactsUl.innerHTML = '';
-                healthBenefitsList.length ? healthBenefitsList.forEach(item => {
-                    const li = document.createElement("li");
-                    li.textContent = item.trim();
-                    healthBenefitsUl.appendChild(li);
-                }) : healthBenefitsUl.innerHTML = '<li>No health benefits available.</li>';
-                funFactsList.length ? funFactsList.forEach(item => {
-                    const li = document.createElement("li");
-                    li.textContent = item.trim();
-                    funFactsUl.appendChild(li);
-                }) : funFactsUl.innerHTML = '<li>No fun facts available.</li>';
-                document.getElementById("ingredientModal" + index).style.display = "flex";
-                document.body.classList.add('modal-open');
-            } catch (e) {
-                console.error('Error showing ingredient details:', e);
-            }
-        }
-
-        // Close ingredient modal
-        function closeModal(index) {
-            try {
-                document.getElementById("ingredientModal" + index).style.display = "none";
-                document.body.classList.remove('modal-open');
-            } catch (e) {
-                console.error('Error closing modal:', e);
-            }
-        }
-
-        // Close modals on outside click
-        document.addEventListener('click', function(e) {
-            if (e.target.id === 'sector-popup') {
-                closePopup();
-            }
-            document.querySelectorAll('.ingredient-modal-container').forEach(modal => {
-                if (e.target === modal) {
-                    const index = modal.id.replace('ingredientModal', '');
-                    closeModal(index);
-                }
-            });
-        });
-    </script>
-</body>
-</html>