{% load static %}

<div class="widget sat-learner-widget" style="font-family: 'Quicksand', 'Helvetica Neue', Arial, sans-serif; position: relative;"
     id="sat-learner-widget">
    <div class="loading-overlay" id="sat-learner-loading">
        <div class="spinner"></div>
    </div>
    <div class="empty-data-overlay" id="sat-learner-empty-data" style="display: none; position: absolute; top: 15%; left: 0; width: 100%; height: 85%; background-color: #435364e6; z-index: 10; justify-content: center; align-items: center; text-align: center; border-radius: 10px;">
        <div style="padding: 20px; color: #fff; font-weight: 600; font-size: 1.5rem;">
            To learn more about adding Security Training to your account, speak with your account executive.
        </div>
    </div>
    <div class="section-title-wrapper">
        <h2 style="color: #435364; font-weight: 600;">Security Training Summary</h2>
        {% if "feature-ai-jarvis" in user_feature_access and "feature-ai-jarvis" in company_feature_access %}
        <button class="ask-jarvis-btn" onclick="askJarvisAbout('Security Training Summary')">
            🤖
            <span class="ask-jarvis-tooltip">Ask Jarvis</span>
        </button>
        {% endif %}
    </div>
    <div class="widget-content">
        <div id="learner-data-container">
            <div id="learner-data-content">
                <div class="mb-3" id="lesson-filter-container" style="display: block; margin-bottom: 35px;">
                    <label for="lessonFilter" style="display: block; margin-bottom: 5px; font-weight: 600; color: #435364;">Filter by Lesson:</label>
                    <select id="lessonFilter" style="width: 90%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-family: 'Quicksand', sans-serif;">
                        <option value="all">All Lessons</option>
                    </select>
                </div>
                
                <div class="category-counts" style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;">
                    <div class="count-item" style="grid-column: span 3; background-color: #03FB8D; border-radius: 10px; padding-right: 0.5rem; padding-left: 0.5rem; padding-top: 1rem; padding-bottom: 1rem; color: #1B545F; text-align: center; box-sizing: border-box; width: 100%;">
                        <span id="totalLearners-value" class="value" style="font-size: 1.8rem; font-weight: 700;">0</span>
                        <br>
                        <span class="label" style="font-weight: 600;">Total Learners</span>
                    </div>
                </div>
                
                <div style="margin-top: 20px;">
                    <h3 style="color: #435364; font-weight: 600; font-size: 1.2rem; margin-bottom: 10px;">Training Breakdown</h3>
                    <div style="display: grid; grid-template-columns: calc(33.33% - 7px) calc(33.33% - 7px) calc(33.33% - 6px); gap: 10px; max-width: 100%; box-sizing: border-box;">
                        <div class="count-item" style="grid-column: span 1; background-color: #00ADAD; border-radius: 10px; padding-right: 0.5rem; padding-left: 0.5rem; padding-top: 1rem; padding-bottom: 1rem; color: #fff; text-align: center; box-sizing: border-box; width: 100%;">
                            <span id="completion-rate-value" class="value" style="font-size: 1.8rem; font-weight: 700;">0.0%</span>
                            <br>
                            <span class="label" style="font-weight: 600;">Completion Rate</span>
                        </div>
                        <div class="count-item" style="grid-column: span 1; background-color: #435364; border-radius: 10px; padding-right: 0.5rem; padding-left: 0.5rem; padding-top: 1rem; padding-bottom: 1rem; color: #fff; text-align: center; box-sizing: border-box; width: 100%;">
                            <span id="average-score-value" class="value" style="font-size: 1.8rem; font-weight: 700;">0.0%</span>
                            <br>
                            <span class="label" style="font-weight: 600;">Average Score</span>
                        </div>
                        <div class="count-item" style="grid-column: span 1; background-color: #FF5252; border-radius: 10px; padding-right: 0.5rem; padding-left: 0.5rem; padding-top: 1rem; padding-bottom: 1rem; color: #fff; text-align: center; box-sizing: border-box; width: 100%;">
                            <span id="incomplete-rate-value" class="value" style="font-size: 1.8rem; font-weight: 700;">0.0%</span>
                            <br>
                            <span class="label" style="font-weight: 600;">Incomplete Rate</span>
                        </div>
                    </div>
                </div>
                
                <div style="text-align: center; color: #435364; font-size: 0.9rem; margin-top: 15px;">
                    <span>Data updated hourly</span>
                </div>
            </div>
        </div>
        
    </div>
</div>

<script>
    // Store the data globally so we can access it when filtering
    window.globalLearnerData = {
        allData: {
            lessons: [],
            totalLearners: 0,
            completedLearners: 0,
            incompleteLearners: 0,
            completionRate: 0,
            averageScore: 0,
            incompleteRate: 0
        },
        lessonsData: {},
        rawData: null
    };
    
    // Function to update the UI with the given data
    function updateLearnerUIWithData(data) {
        // Get the widget container to scope our element queries
        const learnerWidgetContainer = document.getElementById('sat-learner-widget');
        if (!learnerWidgetContainer) return;
        
        // Update the UI with data - scoped to this widget
        const completionRateElement = learnerWidgetContainer.querySelector('#completion-rate-value');
        if (completionRateElement) {
            completionRateElement.textContent = (data.completionRate || 0).toFixed(1) + '%';
        }
        
        const averageScoreElement = learnerWidgetContainer.querySelector('#average-score-value');
        if (averageScoreElement) {
            averageScoreElement.textContent = (data.averageScore || 0).toFixed(1) + '%';
        }
        
        const incompleteRateElement = learnerWidgetContainer.querySelector('#incomplete-rate-value');
        if (incompleteRateElement) {
            incompleteRateElement.textContent = (data.incompleteRate || 0).toFixed(1) + '%';
        }
        
        // Update total learners
        const totalLearnersElement = learnerWidgetContainer.querySelector('#totalLearners-value');
        if (totalLearnersElement) {
            totalLearnersElement.textContent = data.totalLearners || 0;
        }
    }
    
    // Function to update the learners table with data
    function updateLearnersTable(data) {
        try {
            // Get the table body
            const tableBody = document.querySelector('#learners-table tbody');
            if (!tableBody) {
                console.error('Table body not found');
                return;
            }
            
            // Destroy existing DataTable if it exists and clear existing rows
            if ($.fn.DataTable.isDataTable('#learners-table')) {
                $('#learners-table').DataTable().destroy();
            }
            tableBody.innerHTML = '';
            
            // If no data, show a "no learners" message
            if (!data || Object.keys(data).length === 0) {
                const row = document.createElement('tr');
                row.style.backgroundColor = '#ffffff';
                
                const nameCell = document.createElement('td');
                nameCell.className = 'text-center';
                nameCell.textContent = 'No learners';
                nameCell.style.padding = '10px';
                nameCell.style.borderBottom = '1px solid #e2e8f0';
                row.appendChild(nameCell);
                
                // Always create company column cell with the learner-company-column class
                const companyCell = document.createElement('td');
                companyCell.className = 'text-center learner-company-column';
                companyCell.textContent = '-';
                companyCell.style.padding = '10px';
                companyCell.style.borderBottom = '1px solid #e2e8f0';
                row.appendChild(companyCell);
                
                // Add empty cells for other columns
                for (let i = 0; i < 4; i++) {
                    const emptyCell = document.createElement('td');
                    emptyCell.className = 'text-center';
                    emptyCell.textContent = '-';
                    emptyCell.style.padding = '10px';
                    emptyCell.style.borderBottom = '1px solid #e2e8f0';
                    row.appendChild(emptyCell);
                }
                
                tableBody.appendChild(row);
                return;
            }
            
            // Process all learners across all companies
            let allLearners = [];
            
            // Iterate through each company's learners
            Object.keys(data).forEach(companyName => {
                const learners = data[companyName];
                
                // Add company name to each learner object
                learners.forEach(learner => {
                    learner.company = companyName;
                    allLearners.push(learner);
                });
            });
            
            // Add rows for each learner
            allLearners.forEach((learner, index) => {
                const row = document.createElement('tr');
                row.style.backgroundColor = index % 2 === 0 ? '#ffffff' : '#f8fafc';
                
                // Name cell
                const nameCell = document.createElement('td');
                nameCell.textContent = learner.learnerName || 'N/A';
                nameCell.style.padding = '10px';
                nameCell.style.borderBottom = '1px solid #e2e8f0';
                row.appendChild(nameCell);
                
                // Company cell
                const companyCell = document.createElement('td');
                companyCell.className = 'learner-company-column';
                companyCell.textContent = learner.company || 'N/A';
                companyCell.style.padding = '10px';
                companyCell.style.borderBottom = '1px solid #e2e8f0';
                row.appendChild(companyCell);
                
                // Email cell
                const emailCell = document.createElement('td');
                emailCell.textContent = learner.learnerEmail || 'N/A';
                emailCell.style.padding = '10px';
                emailCell.style.borderBottom = '1px solid #e2e8f0';
                row.appendChild(emailCell);
                
                // Assignment cell
                const assignmentCell = document.createElement('td');
                assignmentCell.textContent = learner.assignmentName || 'N/A';
                assignmentCell.style.padding = '10px';
                assignmentCell.style.borderBottom = '1px solid #e2e8f0';
                row.appendChild(assignmentCell);
                
                // Progress cell with status badge
                const progressCell = document.createElement('td');
                progressCell.style.padding = '10px';
                progressCell.style.borderBottom = '1px solid #e2e8f0';
                
                // Determine status based on completion (completedAt exists or progress >= 100)
                let status = 'Incomplete';
                const isCompleted = learner.completedAt || (learner.progress !== null && learner.progress >= 100);
                if (isCompleted) {
                    status = learner.score >= 70 ? 'Pass' : 'Fail';
                }
                
                const statusBadge = document.createElement('span');
                statusBadge.className = 'badge rounded-pill';
                
                if (status === 'Pass') {
                    statusBadge.classList.add('bg-success');
                    statusBadge.textContent = 'Pass';
                } else if (status === 'Fail') {
                    statusBadge.classList.add('bg-danger');
                    statusBadge.textContent = 'Fail';
                } else {
                    statusBadge.classList.add('bg-warning', 'text-dark');
                    statusBadge.textContent = 'Incomplete';
                }
                
                progressCell.appendChild(statusBadge);
                progressCell.setAttribute('data-status', status);
                progressCell.setAttribute('data-sort', learner.progress || 0);
                row.appendChild(progressCell);
                
                // Score cell
                const scoreCell = document.createElement('td');
                scoreCell.style.padding = '10px';
                scoreCell.style.borderBottom = '1px solid #e2e8f0';
                scoreCell.style.color = '#435364';
                
                if (status !== 'Incomplete') {
                    scoreCell.textContent = `${learner.score || 0}%`;
                } else {
                    scoreCell.textContent = '';
                }
                
                scoreCell.setAttribute('data-sort', learner.score || 0);
                row.appendChild(scoreCell);
                
                tableBody.appendChild(row);
            });
                        
            // Initialize DataTable if jQuery and DataTables are available
            if (typeof $ !== 'undefined' && $.fn.DataTable) {
                $('#learners-table').DataTable({
                    paging: true,
                    searching: true,
                    ordering: {
                        indicators: false
                    },
                    info: true,
                    pageLength: 10,
                    lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
                    language: {
                        emptyTable: "No learners found",
                        paginate: {
                            first: "First",
                            last: "Last",
                            next: "→",
                            previous: "←"
                        },
                        info: "Showing _START_ to _END_ of _TOTAL_ entries",
                        infoEmpty: "Showing 0 to 0 of 0 entries",
                        lengthMenu: "Show _MENU_ entries"
                    },
                    order: [[1, 'asc']],
                    columnControl: ['order', ['search', 'spacer', 'orderAsc', 'orderDesc', 'orderClear']],
                    columnDefs: [
                        {
                            targets: 1, // Company column (index 1)
                            columnControl: [
                                'order',
                                ['searchList', 'spacer', 'orderAsc', 'orderDesc', 'orderClear']
                            ]
                        },
                        {
                            targets: 2, // Assignment column (index 2)
                        },
                        {
                            targets: 3, // Assignment column (index 3)
                            columnControl: [
                                'order',
                                ['searchList', 'spacer', 'orderAsc', 'orderDesc', 'orderClear']
                            ]
                        },
                        {
                            targets: 4, // Progress column (index 4)
                            type: 'string', // Set the progress column type as string for columncontrol
                            // "width": "15%" 
                            columnControl: [
                                'order',
                                ['searchList', 'spacer', 'orderAsc', 'orderDesc', 'orderClear']
                            ]
                        }
                    ],
                    responsive: true,
                    // Custom styling for DataTables elements
                    initComplete: function() {
                        // Style the DataTables wrapper
                        $('.dataTables_wrapper').css({
                            'font-family': "'Quicksand', 'Helvetica Neue', Arial, sans-serif",
                            'color': '#435364',
                            'margin-top': '10px'
                        });
                        
                        // Style the search input
                        $('.dataTables_filter input').css({
                            'border-radius': '5px',
                            'border': '1px solid #e2e8f0',
                            'padding': '5px 10px',
                            'margin-bottom': '10px'
                        });
                        
                        // Style the length selector
                        $('.dataTables_length select').css({
                            'border-radius': '5px',
                            'border': '1px solid #e2e8f0',
                            'padding': '5px 10px',
                            'margin-bottom': '10px'
                        });
                        
                        // Style pagination buttons
                        $('.dataTables_paginate').css({
                            'margin-top': '10px'
                        });
                        
                        $('.dataTables_paginate .paginate_button').css({
                            'border-radius': '5px',
                            'padding': '5px 10px',
                            'margin': '0 2px',
                            'border': '1px solid #e2e8f0',
                            'background-color': '#f8fafc',
                            'color': '#435364 !important'
                        });
                        
                        $('.dataTables_paginate .paginate_button.current').css({
                            'background-color': '#00ADAD !important',
                            'color': 'white !important',
                            'border': '1px solid #00ADAD'
                        });
                        
                        $('.dataTables_paginate .paginate_button:hover').css({
                            'background-color': '#e2e8f0 !important',
                            'color': '#435364 !important'
                        });
                    }
                });
            
            // Hide loading animation
            hideLearnersTableLoading();
            }
        } catch (error) {
            hideLearnersTableLoading();
        }
    }
    
    // Function to handle lesson filter change for the widget summary data
    function handleLessonFilterChange() {
        // Get the widget container to scope our element queries
        const learnerWidgetContainer = document.getElementById('sat-learner-widget');
        if (!learnerWidgetContainer) return;
        
        const lessonFilter = learnerWidgetContainer.querySelector('#lessonFilter');
        if (!lessonFilter) return;
        
        const selectedLesson = lessonFilter.value;
        const selectedOption = lessonFilter.options[lessonFilter.selectedIndex];
        const isAggregatedLesson = selectedOption && selectedOption.getAttribute('data-aggregated') === 'true';
        
        if (selectedLesson === 'all') {
            // Show aggregated data for all lessons
            updateLearnerUIWithData(window.globalLearnerData.allData);
        } else {
            // Show data for the selected lesson
            if (isAggregatedLesson && window.globalLearnerData.lessonNameMap) {
                // For aggregated lessons, use the lesson name to get aggregated data
                const lessonName = selectedOption.textContent;
                if (window.globalLearnerData.lessonNameMap[lessonName]) {
                    updateLearnerUIWithData(window.globalLearnerData.lessonNameMap[lessonName]);
                }
            } else if (window.globalLearnerData.lessonsData[selectedLesson]) {
                // For non-aggregated lessons, use the lesson ID
                updateLearnerUIWithData(window.globalLearnerData.lessonsData[selectedLesson]);
            } else {
                // No data available for this lesson
                updateLearnerUIWithData(window.globalLearnerData.allData);
            }
        }
    }
    
    // Function to update the SATLearners widget data with the API response
    function updateSATLearnersWidgetData(data) {
        try {
            // Store the raw data for filtering
            window.globalLearnerData.rawData = data;
            
            // Check if data is empty
            let isEmpty = false;
            if (typeof data === 'object' && Object.keys(data).length > 0) {
                // Check if all company arrays are empty
                isEmpty = Object.keys(data).every(company =>
                    Array.isArray(data[company]) && data[company].length === 0
                );
            }
            
            // Show or hide the empty data overlay based on the check
            if (isEmpty) {
                showSatLearnersEmptyDataOverlay();
            } else {
                hideSatLearnersEmptyDataOverlay();
            }
            
            // Process the data - aggregate across all lessons
            let learnerAggregatedData = {
                lessons: [],
                totalLearners: 0,
                completedLearners: 0,
                incompleteLearners: 0,
                completionRate: 0,
                averageScore: 0,
                incompleteRate: 0
            };
            
            // Initialize lesson data structures
            window.globalLearnerData.lessonsData = {};
            
            // Track unique lessons across all companies
            const uniqueLessons = new Set();
            const lessonData = {};
            // Map to track lessons by name for aggregation
            const lessonNameMap = {};
            
            // Process data
            if (typeof data === 'object' && Object.keys(data).length > 0) {
                // Process all learners across all companies
                let totalScore = 0;
                let scoredLearners = 0;
                
                // Track UNIQUE learners globally (matching backend huntress_sat_tools.py logic)
                const uniqueLearnerIds = new Set();
                const completedLearnerIds = new Set();
                const allScores = [];
                
                // Iterate through each company's learners
                Object.keys(data).forEach(companyName => {
                    const learners = data[companyName];
                    
                    // Process each learner activity
                    learners.forEach(learner => {
                        // Track unique learner IDs globally
                        if (learner.learnerId) {
                            uniqueLearnerIds.add(learner.learnerId);
                        }
                        
                        // Track unique lessons
                        uniqueLessons.add(learner.assignmentId);
                        
                        // Initialize lesson data if not exists
                        if (!lessonData[learner.assignmentId]) {
                            lessonData[learner.assignmentId] = {
                                id: learner.assignmentId,
                                name: learner.assignmentName,
                                startDate: learner.assignmentStartDate,
                                totalLearners: 0,
                                completedLearners: 0,
                                incompleteLearners: 0,
                                completionRate: 0,
                                averageScore: 0,
                                incompleteRate: 0,
                                totalScore: 0,
                                scoredLearners: 0,
                                uniqueLearnerIds: new Set(),
                                completedLearnerIds: new Set()
                            };
                            
                            // Track lessons by name for aggregation (using Sets for unique learner tracking)
                            if (!lessonNameMap[learner.assignmentName]) {
                                lessonNameMap[learner.assignmentName] = {
                                    name: learner.assignmentName,
                                    ids: [learner.assignmentId],
                                    startDate: learner.assignmentStartDate, // Store date for sorting
                                    totalLearners: 0,
                                    completedLearners: 0,
                                    incompleteLearners: 0,
                                    completionRate: 0,
                                    averageScore: 0,
                                    incompleteRate: 0,
                                    totalScore: 0,
                                    scoredLearners: 0,
                                    // Use Sets to track UNIQUE learners across all assignmentIds with same name
                                    uniqueLearnerIds: new Set(),
                                    completedLearnerIds: new Set()
                                };
                            } else {
                                lessonNameMap[learner.assignmentName].ids.push(learner.assignmentId);
                                // Update startDate if this assignment is more recent
                                if (learner.assignmentStartDate && (!lessonNameMap[learner.assignmentName].startDate || 
                                    new Date(learner.assignmentStartDate) > new Date(lessonNameMap[learner.assignmentName].startDate))) {
                                    lessonNameMap[learner.assignmentName].startDate = learner.assignmentStartDate;
                                }
                            }
                        }
                        
                        // Track unique learners per lesson (by assignmentId)
                        if (learner.learnerId) {
                            lessonData[learner.assignmentId].uniqueLearnerIds.add(learner.learnerId);
                            // Also track in lessonNameMap for proper aggregation by lesson name
                            lessonNameMap[learner.assignmentName].uniqueLearnerIds.add(learner.learnerId);
                        }
                        
                        // Check if learner has completed the lesson (progress === 100)
                        const isCompleted = learner.progress !== null && learner.progress >= 100;
                        if (isCompleted) {
                            // Track completed unique learners globally
                            if (learner.learnerId) {
                                completedLearnerIds.add(learner.learnerId);
                                lessonData[learner.assignmentId].completedLearnerIds.add(learner.learnerId);
                                // Also track completed in lessonNameMap for proper aggregation by lesson name
                                lessonNameMap[learner.assignmentName].completedLearnerIds.add(learner.learnerId);
                            }
                            
                            // Add score if available (include 0 scores for accurate average)
                            if (learner.score !== null && learner.score !== undefined) {
                                totalScore += learner.score;
                                scoredLearners++;
                                allScores.push(learner.score);
                                lessonData[learner.assignmentId].totalScore += learner.score;
                                lessonData[learner.assignmentId].scoredLearners++;
                                // Also track scores in lessonNameMap for proper aggregation
                                lessonNameMap[learner.assignmentName].totalScore += learner.score;
                                lessonNameMap[learner.assignmentName].scoredLearners++;
                            }
                        }
                    });
                });
                
                // Calculate aggregated stats using UNIQUE learners (matching backend logic)
                learnerAggregatedData.totalLearners = uniqueLearnerIds.size;
                learnerAggregatedData.completedLearners = completedLearnerIds.size;
                learnerAggregatedData.incompleteLearners = uniqueLearnerIds.size - completedLearnerIds.size;
                
                // Calculate rates for aggregated data
                if (learnerAggregatedData.totalLearners > 0) {
                    learnerAggregatedData.completionRate = (learnerAggregatedData.completedLearners / learnerAggregatedData.totalLearners) * 100;
                    learnerAggregatedData.incompleteRate = (learnerAggregatedData.incompleteLearners / learnerAggregatedData.totalLearners) * 100;
                }
                
                // Calculate lesson data rates and store
                Object.keys(lessonData).forEach(lessonId => {
                    const lesson = lessonData[lessonId];
                    
                    // Convert sets to counts for unique learners per lesson
                    lesson.totalLearners = lesson.uniqueLearnerIds ? lesson.uniqueLearnerIds.size : 0;
                    lesson.completedLearners = lesson.completedLearnerIds ? lesson.completedLearnerIds.size : 0;
                    lesson.incompleteLearners = lesson.totalLearners - lesson.completedLearners;
                    
                    // Calculate rates
                    if (lesson.totalLearners > 0) {
                        lesson.completionRate = (lesson.completedLearners / lesson.totalLearners) * 100;
                        lesson.incompleteRate = (lesson.incompleteLearners / lesson.totalLearners) * 100;
                    }
                    
                    // Calculate average score
                    if (lesson.scoredLearners > 0) {
                        lesson.averageScore = lesson.totalScore / lesson.scoredLearners;
                    }
                    
                    // Store lesson data (remove sets before storing to avoid issues)
                    const lessonToStore = {...lesson};
                    delete lessonToStore.uniqueLearnerIds;
                    delete lessonToStore.completedLearnerIds;
                    window.globalLearnerData.lessonsData[lessonId] = lessonToStore;
                    
                    // Note: lessonNameMap is now populated with Sets directly during the main loop,
                    // so we don't need to sum counts here (which was causing double-counting)
                });
                
                // Calculate overall average score using all collected scores
                if (allScores.length > 0) {
                    const totalScoreSum = allScores.reduce((sum, score) => sum + score, 0);
                    learnerAggregatedData.averageScore = totalScoreSum / allScores.length;
                }
                
                // Add lessons to aggregated data
                learnerAggregatedData.lessons = Array.from(uniqueLessons);
                
                // Calculate rates for lessons aggregated by name using UNIQUE learners from Sets
                Object.keys(lessonNameMap).forEach(lessonName => {
                    const aggregatedLesson = lessonNameMap[lessonName];
                    
                    // Convert Sets to counts for unique learners (matching backend logic)
                    aggregatedLesson.totalLearners = aggregatedLesson.uniqueLearnerIds ? aggregatedLesson.uniqueLearnerIds.size : 0;
                    aggregatedLesson.completedLearners = aggregatedLesson.completedLearnerIds ? aggregatedLesson.completedLearnerIds.size : 0;
                    aggregatedLesson.incompleteLearners = aggregatedLesson.totalLearners - aggregatedLesson.completedLearners;
                    
                    // Calculate rates
                    if (aggregatedLesson.totalLearners > 0) {
                        aggregatedLesson.completionRate = (aggregatedLesson.completedLearners / aggregatedLesson.totalLearners) * 100;
                        aggregatedLesson.incompleteRate = (aggregatedLesson.incompleteLearners / aggregatedLesson.totalLearners) * 100;
                    }
                    
                    // Calculate average score
                    if (aggregatedLesson.scoredLearners > 0) {
                        aggregatedLesson.averageScore = aggregatedLesson.totalScore / aggregatedLesson.scoredLearners;
                    }
                    
                    // Clean up Sets before storing (remove to avoid serialization issues)
                    delete aggregatedLesson.uniqueLearnerIds;
                    delete aggregatedLesson.completedLearnerIds;
                });
                
                // Store aggregated data and lesson name map
                window.globalLearnerData.allData = learnerAggregatedData;
                window.globalLearnerData.lessonNameMap = lessonNameMap;
                
                // Update the UI with the aggregated data initially
                updateLearnerUIWithData(learnerAggregatedData);
                
                // Update the learners table with all data
                updateLearnersTable(data);
                
                // Update lesson filter dropdowns - both in widget and table
                // First, update the widget's filter
                const learnerWidgetContainer = document.getElementById('sat-learner-widget');
                if (learnerWidgetContainer) {
                    const lessonFilter = learnerWidgetContainer.querySelector('#lessonFilter');
                    if (lessonFilter) {
                        // Clear existing options except "All Lessons"
                        while (lessonFilter.options.length > 1) {
                            lessonFilter.remove(1);
                        }
                        
                        if (Object.keys(window.globalLearnerData.lessonNameMap).length > 0) {
                            // When "All Companies" is selected, show aggregated lessons by name
                            const addedLessonNames = new Set();
                            
                            // Get all lessons
                            const lessonValues = Object.values(window.globalLearnerData.lessonNameMap);
                            
                            // Sort by actual start date (most recent first)
                            lessonValues.sort((a, b) => {
                                const aDate = a.startDate ? new Date(a.startDate) : new Date(0);
                                const bDate = b.startDate ? new Date(b.startDate) : new Date(0);
                                // Most recent first (descending order)
                                return bDate - aDate;
                            });
                            
                            // Show all assignments (backend already filters to past 3 months + ongoing)
                            lessonValues.forEach(lesson => {
                                // Only add each lesson name once
                                if (!addedLessonNames.has(lesson.name)) {
                                    const option = document.createElement('option');
                                    // Use the first ID associated with this lesson name
                                    option.value = lesson.ids[0];
                                    option.textContent = lesson.name;
                                    option.setAttribute('data-aggregated', 'true');
                                    lessonFilter.appendChild(option);
                                    addedLessonNames.add(lesson.name);
                                }
                            });
                        } else if (Object.keys(window.globalLearnerData.lessonsData).length > 0) {
                            // For specific company, show all lessons sorted by date
                            const lessonValues = Object.values(window.globalLearnerData.lessonsData);
                            
                            // Sort by actual start date (most recent first)
                            lessonValues.sort((a, b) => {
                                const aDate = a.startDate ? new Date(a.startDate) : new Date(0);
                                const bDate = b.startDate ? new Date(b.startDate) : new Date(0);
                                // Most recent first (descending order)
                                return bDate - aDate;
                            });
                            
                            // Show all assignments (backend already filters to past 3 months + ongoing)
                            lessonValues.forEach(lesson => {
                                const option = document.createElement('option');
                                option.value = lesson.id;
                                option.textContent = lesson.name;
                                lessonFilter.appendChild(option);
                            });
                        }
                        
                        // Make sure "All Lessons" is selected and enabled
                        lessonFilter.options[0].textContent = "All Lessons";
                        lessonFilter.options[0].disabled = false;
                    }
                }
                
                // Now, update the table's filter with the same options
                const lessonTableFilter = document.getElementById('lessonTableFilter');
                if (lessonTableFilter) {
                    // Clear existing options except "All Lessons"
                    while (lessonTableFilter.options.length > 1) {
                        lessonTableFilter.remove(1);
                    }
                    
                    if (Object.keys(window.globalLearnerData.lessonNameMap).length > 0) {
                        // When "All Companies" is selected, show aggregated lessons by name
                        const addedLessonNames = new Set();
                        
                        // Get all lessons
                        const lessonValues = Object.values(window.globalLearnerData.lessonNameMap);
                        
                        // Sort by actual start date (most recent first)
                        lessonValues.sort((a, b) => {
                            const aDate = a.startDate ? new Date(a.startDate) : new Date(0);
                            const bDate = b.startDate ? new Date(b.startDate) : new Date(0);
                            // Most recent first (descending order)
                            return bDate - aDate;
                        });
                        
                        // Show all assignments (backend already filters to past 3 months + ongoing)
                        lessonValues.forEach(lesson => {
                            // Only add each lesson name once
                            if (!addedLessonNames.has(lesson.name)) {
                                const option = document.createElement('option');
                                // Use the first ID associated with this lesson name
                                option.value = lesson.ids[0];
                                option.textContent = lesson.name;
                                option.setAttribute('data-aggregated', 'true');
                                lessonTableFilter.appendChild(option);
                                addedLessonNames.add(lesson.name);
                            }
                        });
                    } else if (Object.keys(window.globalLearnerData.lessonsData).length > 0) {
                        // For specific company, show all lessons sorted by date
                        const lessonValues = Object.values(window.globalLearnerData.lessonsData);
                        
                        // Sort by actual start date (most recent first)
                        lessonValues.sort((a, b) => {
                            const aDate = a.startDate ? new Date(a.startDate) : new Date(0);
                            const bDate = b.startDate ? new Date(b.startDate) : new Date(0);
                            // Most recent first (descending order)
                            return bDate - aDate;
                        });
                        
                        // Show all assignments (backend already filters to past 3 months + ongoing)
                        lessonValues.forEach(lesson => {
                            const option = document.createElement('option');
                            option.value = lesson.id;
                            option.textContent = lesson.name;
                            lessonTableFilter.appendChild(option);
                        });
                    }
                    
                    // Make sure "All Lessons" is selected and enabled
                    lessonTableFilter.options[0].textContent = "All Lessons";
                    lessonTableFilter.options[0].disabled = false;
                }
            } else {
                // No data available, use empty data structure
                updateLearnerUIWithData(globalLearnerData.allData);
            }
            
            // Hide loading animation
            hideSATLearnerLoading();
            
        } catch (error) {
            hideSATLearnerLoading();
            hideLearnersTableLoading();
            
            // Show error message - scoped to this widget
            const learnerWidgetContainer = document.getElementById('sat-learner-widget');
            if (!learnerWidgetContainer) return;
            
            const learnerDataContent = learnerWidgetContainer.querySelector('#learner-data-content');
            if (learnerDataContent) {
                const errorAlert = document.createElement('div');
                errorAlert.className = 'alert alert-danger';
                errorAlert.innerHTML = '<p>Error loading security training data.</p>';
                learnerDataContent.appendChild(errorAlert);
            }
        }
    }
    
    // Function to show loading animation
    function showSATLearnerLoading() {
        const learnerWidgetContainer = document.getElementById('sat-learner-widget');
        if (!learnerWidgetContainer) return;
        
        const loadingElement = learnerWidgetContainer.querySelector('#sat-learner-loading');
        if (loadingElement) {
            loadingElement.classList.add('active');
        }
    }
    
    // Function to hide loading animation
    function hideSATLearnerLoading() {
        const learnerWidgetContainer = document.getElementById('sat-learner-widget');
        if (!learnerWidgetContainer) return;
        
        const loadingElement = learnerWidgetContainer.querySelector('#sat-learner-loading');
        if (loadingElement) {
            loadingElement.classList.remove('active');
        }
    }
    
    // Function to show empty data overlay
    function showSatLearnersEmptyDataOverlay() {
        const learnerWidgetContainer = document.getElementById('sat-learner-widget');
        if (!learnerWidgetContainer) return;
        
        learnerWidgetContainer.classList.add('has-empty-data');
        const emptyDataElement = learnerWidgetContainer.querySelector('#sat-learner-empty-data');
        if (emptyDataElement) {
            emptyDataElement.style.display = 'flex';
        }
    }
    
    // Function to hide empty data overlay
    function hideSatLearnersEmptyDataOverlay() {
        const learnerWidgetContainer = document.getElementById('sat-learner-widget');
        if (!learnerWidgetContainer) return;
        
        learnerWidgetContainer.classList.remove('has-empty-data');
        const emptyDataElement = learnerWidgetContainer.querySelector('#sat-learner-empty-data');
        if (emptyDataElement) {
            emptyDataElement.style.display = 'none';
        }
    }
    
    // Function to show table loading animation
    function showLearnersTableLoading() {
        const learningTablesLoadingElement = document.getElementById('sat-learner-table-loading');
        if (learningTablesLoadingElement) {
            learningTablesLoadingElement.classList.add('active');
        }
    }
    
    // Function to hide table loading animation
    function hideLearnersTableLoading() {
        const learningTablesLoadingElement = document.getElementById('sat-learner-table-loading');
        if (learningTablesLoadingElement) {
            learningTablesLoadingElement.classList.remove('active');
        }
    }

    // Function to fetch SATLearners data from the API
    function fetchSATLearnersData() {
        // Clear any existing error messages before fetching new data
        const learnerWidgetContainer = document.getElementById('sat-learner-widget');
        if (learnerWidgetContainer) {
            const errorAlerts = learnerWidgetContainer.querySelectorAll('.alert.alert-danger');
            errorAlerts.forEach(alert => alert.remove());
        }
        
        // Show loading animation
        showSATLearnerLoading();
        showLearnersTableLoading();

        // Start with base API URL
        let apiUrl = '{{ base_api_url }}/api/v1/dashboard/sat-activity';
        
        // Check for group selection and append to path if not "All Companies"
        const groupSelect = document.getElementById('group-select');
        if (groupSelect && groupSelect.value) {
            const selectedGroup = groupSelect.options[groupSelect.selectedIndex];
            const groupCodename = selectedGroup.getAttribute('data-codename');
            if (groupCodename) {
                // Append group ID to the URL path (not as a parameter)
                apiUrl += `/${groupCodename}/`;
            } else {
                // Ensure trailing slash for consistency
                apiUrl += '/';
            }
        } else {
            // Ensure trailing slash for consistency
            apiUrl += '/';
        }
        
        // Add query parameters for dates
        const params = new URLSearchParams();
        
        // Append parameters to URL if any exist
        if (params.toString()) {
            apiUrl += '?' + params.toString();
        }
        
        // Make the API request with automatic token refresh on 401
        window.authenticatedFetch(apiUrl, {
            method: 'GET'
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            updateSATLearnersWidgetData(data);
        })
        .catch(error => {
            // Silently ignore stale requests (user switched companies before this completed)
            if (error.message === 'STALE_REQUEST' || error.name === 'AbortError') {
                console.log('SAT learners request cancelled - user switched companies');
                return;
            }
            hideSATLearnerLoading();
            hideLearnersTableLoading();
            
            // Show error message - scoped to this widget
            const learnerWidgetContainer = document.getElementById('sat-learner-widget');
            if (!learnerWidgetContainer) return;
            
            const learnerDataContent = learnerWidgetContainer.querySelector('#learner-data-content');
            if (learnerDataContent) {
                const errorAlert = document.createElement('div');
                errorAlert.className = 'alert alert-danger';
                errorAlert.innerHTML = '<p>Error loading security training data.</p>';
                learnerDataContent.appendChild(errorAlert);
            }
        });
    }

    document.addEventListener('DOMContentLoaded', function() {
        // Initialize the widget
        fetchSATLearnersData();
        
        // Handle lesson filter change - use event delegation to ensure we only affect this widget
        const satLearnerWidget = document.getElementById('sat-learner-widget');
        const lessonFilter = satLearnerWidget ? satLearnerWidget.querySelector('#lessonFilter') : null;
        if (lessonFilter) {
            // Remove any existing listeners to prevent duplicates
            lessonFilter.removeEventListener('change', handleLessonFilterChange);
            lessonFilter.addEventListener('change', handleLessonFilterChange);
        }
        
        // Handle group selection
        // Listen for debounced group change event from sidebar
        document.addEventListener('groupChanged', function() {
            // Trigger a refresh of the widget with the new group selection
            fetchSATLearnersData();
        });

        // Set default dates
        const today = new Date();
        const thirtyDaysAgo = new Date();
        thirtyDaysAgo.setDate(today.getDate() - 30);
        
        // Format dates as YYYY-MM-DD
        const formatDate = (date) => {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        };
                
    });
</script>