Rename template/combined_summary.html to templates/combined_summary.html

template/combined_summary.html

@@ -1,166 +0,0 @@
-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

@@ -0,0 +1,606 @@
+<!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>