@extends('layouts.admin')

@section('title', 'Event Analytics - ' . $event->name)

@section('content')
<div class="min-h-screen bg-gray-50">
    <!-- Header -->
    <div class="bg-white shadow-sm border-b border-gray-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="py-6">
                <div class="flex items-center justify-between">
                    <div>
                        <h1 class="text-3xl font-bold text-gray-900">{{ $event->name }}</h1>
                        <p class="mt-1 text-sm text-gray-500">Event Analytics Dashboard</p>
                    </div>
                    <div class="flex items-center space-x-4">
                        <!-- Date Range Picker -->
                        <div class="flex items-center space-x-2">
                            <input type="date" id="start-date" class="px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <span class="text-gray-500">to</span>
                            <input type="date" id="end-date" class="px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <button id="apply-date-filter" class="px-4 py-2 bg-blue-600 text-white rounded-md text-sm hover:bg-blue-700 transition-colors">
                                Apply
                            </button>
                        </div>
                        <!-- Export Button -->
                        <button id="export-data" class="px-4 py-2 bg-green-600 text-white rounded-md text-sm hover:bg-green-700 transition-colors flex items-center">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                            </svg>
                            Export
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- Loading State -->
        <div id="loading-state" class="flex items-center justify-center py-12">
            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
            <span class="ml-3 text-gray-600">Loading analytics data...</span>
        </div>

        <!-- Dashboard Content -->
        <div id="dashboard-content" class="hidden">
            <!-- Overview Cards -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
                                <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 truncate">Total Users</dt>
                                <dd class="flex items-baseline">
                                    <div class="text-2xl font-semibold text-gray-900" id="total-users">-</div>
                                    <div class="ml-2 flex items-baseline text-sm font-semibold" id="users-trend">
                                        <span class="sr-only">Trending</span>
                                    </div>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
                                <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <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>
                            </div>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 truncate">Completion Rate</dt>
                                <dd class="flex items-baseline">
                                    <div class="text-2xl font-semibold text-gray-900" id="completion-rate">-</div>
                                    <div class="ml-2 flex items-baseline text-sm font-semibold" id="completion-trend">
                                        <span class="sr-only">Trending</span>
                                    </div>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <div class="w-8 h-8 bg-yellow-100 rounded-full flex items-center justify-center">
                                <svg class="w-5 h-5 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 truncate">Average Progress</dt>
                                <dd class="flex items-baseline">
                                    <div class="text-2xl font-semibold text-gray-900" id="average-progress">-</div>
                                    <div class="ml-2 flex items-baseline text-sm font-semibold" id="progress-trend">
                                        <span class="sr-only">Trending</span>
                                    </div>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <div class="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center">
                                <svg class="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 17h8m0 0V9m0 8l-8-8-4 4-6-6"></path>
                                </svg>
                            </div>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 truncate">Drop-off Rate</dt>
                                <dd class="flex items-baseline">
                                    <div class="text-2xl font-semibold text-gray-900" id="drop-off-rate">-</div>
                                    <div class="ml-2 flex items-baseline text-sm font-semibold" id="dropoff-trend">
                                        <span class="sr-only">Trending</span>
                                    </div>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Charts Section -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
                <!-- Progress Distribution Chart -->
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h3 class="text-lg font-medium text-gray-900 mb-4">Progress Distribution</h3>
                    <div class="h-64">
                        <canvas id="progress-distribution-chart"></canvas>
                    </div>
                </div>

                <!-- Completion Timeline Chart -->
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h3 class="text-lg font-medium text-gray-900 mb-4">Completion Timeline</h3>
                    <div class="h-64">
                        <canvas id="completion-timeline-chart"></canvas>
                    </div>
                </div>

                <!-- Tier Completion Rates -->
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h3 class="text-lg font-medium text-gray-900 mb-4">Tier Completion Rates</h3>
                    <div class="h-64">
                        <canvas id="tier-completion-chart"></canvas>
                    </div>
                </div>

                <!-- Activity Heatmap -->
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h3 class="text-lg font-medium text-gray-900 mb-4">Activity Heatmap</h3>
                    <div class="h-64" id="activity-heatmap">
                        <!-- Heatmap will be rendered here -->
                    </div>
                </div>
            </div>

            <!-- Assessment Analytics -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-8">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Assessment Performance</h3>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200" id="assessment-table">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Assessment</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Module</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Attempts</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pass Rate</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Avg Score</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Avg Time</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200" id="assessment-tbody">
                            <!-- Assessment data will be populated here -->
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- User Reports -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-medium text-gray-900">User Reports</h3>
                    <div class="flex items-center space-x-4">
                        <!-- Search -->
                        <input type="text" id="user-search" placeholder="Search users..." class="px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <!-- Status Filter -->
                        <select id="status-filter" class="px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">All Status</option>
                            <option value="not_started">Not Started</option>
                            <option value="in_progress">In Progress</option>
                            <option value="completed">Completed</option>
                            <option value="inactive">Inactive</option>
                        </select>
                        <!-- Export Users -->
                        <button id="export-users" class="px-4 py-2 bg-blue-600 text-white rounded-md text-sm hover:bg-blue-700 transition-colors">
                            Export Users
                        </button>
                    </div>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200" id="users-table">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" data-sort="name">
                                    Name
                                    <svg class="w-4 h-4 inline ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"></path>
                                    </svg>
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" data-sort="progress_percentage">
                                    Progress
                                    <svg class="w-4 h-4 inline ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"></path>
                                    </svg>
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Modules</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Assessments</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" data-sort="last_activity">
                                    Last Activity
                                    <svg class="w-4 h-4 inline ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"></path>
                                    </svg>
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200" id="users-tbody">
                            <!-- User data will be populated here -->
                        </tbody>
                    </table>
                </div>
                <!-- Pagination -->
                <div class="flex items-center justify-between mt-6">
                    <div class="text-sm text-gray-700">
                        Showing <span id="users-showing">0</span> of <span id="users-total">0</span> users
                    </div>
                    <div class="flex items-center space-x-2" id="pagination">
                        <!-- Pagination buttons will be generated here -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/date-fns@2.29.3/index.min.js"></script>

<script>
// Global variables
let eventId = {{ $event->id }};
let currentData = null;
let charts = {};
let currentPage = 1;
let usersPerPage = 10;

// Setup CSRF token for all AJAX requests
const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

// Configure default headers for fetch requests
const defaultHeaders = {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
    'X-CSRF-TOKEN': csrfToken,
    'X-Requested-With': 'XMLHttpRequest'
};
let currentSort = { field: 'progress_percentage', direction: 'desc' };
let currentFilters = {};

// Initialize dashboard
document.addEventListener('DOMContentLoaded', function() {
    loadAnalyticsData();
    setupEventListeners();
});

// Load analytics data
async function loadAnalyticsData() {
    try {
        showLoading();
        
        const params = new URLSearchParams();
        const startDate = document.getElementById('start-date').value;
        const endDate = document.getElementById('end-date').value;
        
        if (startDate) params.append('start_date', startDate);
        if (endDate) params.append('end_date', endDate);
        
        const response = await fetch(`/analytics/events/${eventId}/analytics?${params}`, {
            method: 'GET',
            headers: defaultHeaders,
            credentials: 'same-origin'
        });
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const result = await response.json();
        
        if (result.success) {
            currentData = result.data;
            updateDashboard();
            hideLoading();
        } else {
            throw new Error(result.message || 'Failed to load analytics data');
        }
    } catch (error) {
        console.error('Error loading analytics:', error);
        showError('Failed to load analytics data. Please try again.');
        hideLoading();
    }
}

// Update dashboard with data
function updateDashboard() {
    updateOverviewCards();
    updateCharts();
    updateAssessmentTable();
    updateUsersTable();
}

// Update overview cards
function updateOverviewCards() {
    const overview = currentData.overview;
    
    document.getElementById('total-users').textContent = overview.total_users.toLocaleString();
    document.getElementById('completion-rate').textContent = overview.completion_rate + '%';
    document.getElementById('average-progress').textContent = overview.average_progress + '%';
    document.getElementById('drop-off-rate').textContent = overview.drop_off_rate + '%';
    
    // Update trend indicators
    updateTrendIndicator('users-trend', overview.trend_indicators.user_growth);
}

// Update trend indicator
function updateTrendIndicator(elementId, value) {
    const element = document.getElementById(elementId);
    const isPositive = value > 0;
    const isNegative = value < 0;
    
    if (isPositive) {
        element.innerHTML = `
            <svg class="w-4 h-4 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
            </svg>
            <span class="text-green-600">+${Math.abs(value).toFixed(1)}%</span>
        `;
    } else if (isNegative) {
        element.innerHTML = `
            <svg class="w-4 h-4 text-red-500" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
            </svg>
            <span class="text-red-600">${value.toFixed(1)}%</span>
        `;
    } else {
        element.innerHTML = '<span class="text-gray-500">No change</span>';
    }
}

// Update charts
function updateCharts() {
    updateProgressDistributionChart();
    updateCompletionTimelineChart();
    updateTierCompletionChart();
    updateActivityHeatmap();
}

// Progress distribution pie chart
function updateProgressDistributionChart() {
    const ctx = document.getElementById('progress-distribution-chart').getContext('2d');
    const data = currentData.progress_analytics.user_progress_distribution;
    
    if (charts.progressDistribution) {
        charts.progressDistribution.destroy();
    }
    
    charts.progressDistribution = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ['Not Started', 'In Progress', 'Completed'],
            datasets: [{
                data: [data.not_started, data.in_progress, data.completed],
                backgroundColor: ['#EF4444', '#F59E0B', '#10B981'],
                borderWidth: 2,
                borderColor: '#ffffff'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });
}

// Completion timeline line chart
function updateCompletionTimelineChart() {
    const ctx = document.getElementById('completion-timeline-chart').getContext('2d');
    const data = currentData.progress_analytics.completion_timeline;
    
    if (charts.completionTimeline) {
        charts.completionTimeline.destroy();
    }
    
    charts.completionTimeline = new Chart(ctx, {
        type: 'line',
        data: {
            labels: data.map(item => item.completion_date),
            datasets: [{
                label: 'Completions',
                data: data.map(item => item.completions),
                borderColor: '#3B82F6',
                backgroundColor: 'rgba(59, 130, 246, 0.1)',
                fill: true,
                tension: 0.4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
}

// Tier completion rates bar chart
function updateTierCompletionChart() {
    const ctx = document.getElementById('tier-completion-chart').getContext('2d');
    const data = currentData.progress_analytics.tier_completion_rates;
    
    if (charts.tierCompletion) {
        charts.tierCompletion.destroy();
    }
    
    charts.tierCompletion = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: data.map(item => item.tier_name),
            datasets: [{
                label: 'Completion Rate (%)',
                data: data.map(item => item.completion_rate),
                backgroundColor: '#8B5CF6',
                borderColor: '#7C3AED',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    max: 100
                }
            }
        }
    });
}

// Activity heatmap
function updateActivityHeatmap() {
    const container = document.getElementById('activity-heatmap');
    const data = currentData.activity_analytics.hourly_activity;
    
    // Create simple heatmap visualization
    const hours = Array.from({length: 24}, (_, i) => i);
    const maxActivity = Math.max(...data.map(item => item.activity_count));
    
    let heatmapHTML = '<div class="grid grid-cols-12 gap-1">';
    
    hours.forEach(hour => {
        const activityData = data.find(item => item.hour === hour);
        const activityCount = activityData ? activityData.activity_count : 0;
        const intensity = maxActivity > 0 ? activityCount / maxActivity : 0;
        const opacity = Math.max(0.1, intensity);
        
        heatmapHTML += `
            <div class="h-8 bg-blue-500 rounded flex items-center justify-center text-xs text-white font-medium" 
                 style="opacity: ${opacity}" 
                 title="Hour ${hour}: ${activityCount} activities">
                ${hour}
            </div>
        `;
    });
    
    heatmapHTML += '</div>';
    container.innerHTML = heatmapHTML;
}

// Update assessment table
function updateAssessmentTable() {
    const tbody = document.getElementById('assessment-tbody');
    const data = currentData.assessment_analytics;
    
    tbody.innerHTML = data.map(assessment => `
        <tr>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                ${assessment.assessment_title}
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                ${assessment.module_title}
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                ${assessment.total_attempts}
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                <div class="flex items-center">
                    <div class="w-16 bg-gray-200 rounded-full h-2 mr-2">
                        <div class="bg-green-600 h-2 rounded-full" style="width: ${assessment.pass_rate}%"></div>
                    </div>
                    ${assessment.pass_rate}%
                </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                ${assessment.average_score}%
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                ${assessment.average_time} min
            </td>
        </tr>
    `).join('');
}

// Update users table
function updateUsersTable() {
    const tbody = document.getElementById('users-tbody');
    let data = currentData.user_reports;
    
    // Apply filters
    data = applyFilters(data);
    
    // Apply sorting
    data = applySorting(data);
    
    // Pagination
    const startIndex = (currentPage - 1) * usersPerPage;
    const endIndex = startIndex + usersPerPage;
    const paginatedData = data.slice(startIndex, endIndex);
    
    tbody.innerHTML = paginatedData.map(user => `
        <tr>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                ${user.name}
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                ${user.email}
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                <div class="flex items-center">
                    <div class="w-16 bg-gray-200 rounded-full h-2 mr-2">
                        <div class="bg-blue-600 h-2 rounded-full" style="width: ${user.progress_percentage}%"></div>
                    </div>
                    ${user.progress_percentage}%
                </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                ${user.completed_modules}/${user.total_modules}
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                ${user.assessments_passed}/${user.assessments_attempted}
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                ${user.last_activity ? new Date(user.last_activity).toLocaleDateString() : 'Never'}
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusBadgeClass(user.status)}">
                    ${getStatusText(user.status)}
                </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                <button onclick="viewUserDetails(${user.user_id})" class="text-blue-600 hover:text-blue-900">
                    View Details
                </button>
            </td>
        </tr>
    `).join('');
    
    // Update pagination info
    document.getElementById('users-showing').textContent = Math.min(data.length, endIndex);
    document.getElementById('users-total').textContent = data.length;
    
    // Update pagination controls
    updatePagination(data.length);
}

// Apply filters to user data
function applyFilters(data) {
    let filtered = [...data];
    
    // Status filter
    if (currentFilters.status) {
        filtered = filtered.filter(user => user.status === currentFilters.status);
    }
    
    // Search filter
    if (currentFilters.search) {
        const search = currentFilters.search.toLowerCase();
        filtered = filtered.filter(user => 
            user.name.toLowerCase().includes(search) || 
            user.email.toLowerCase().includes(search)
        );
    }
    
    return filtered;
}

// Apply sorting to user data
function applySorting(data) {
    return data.sort((a, b) => {
        let aVal = a[currentSort.field];
        let bVal = b[currentSort.field];
        
        // Handle date fields
        if (currentSort.field === 'last_activity') {
            aVal = aVal ? new Date(aVal) : new Date(0);
            bVal = bVal ? new Date(bVal) : new Date(0);
        }
        
        if (currentSort.direction === 'asc') {
            return aVal > bVal ? 1 : -1;
        } else {
            return aVal < bVal ? 1 : -1;
        }
    });
}

// Update pagination controls
function updatePagination(totalItems) {
    const totalPages = Math.ceil(totalItems / usersPerPage);
    const pagination = document.getElementById('pagination');
    
    let paginationHTML = '';
    
    // Previous button
    if (currentPage > 1) {
        paginationHTML += `
            <button onclick="changePage(${currentPage - 1})" class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
                Previous
            </button>
        `;
    }
    
    // Page numbers
    for (let i = Math.max(1, currentPage - 2); i <= Math.min(totalPages, currentPage + 2); i++) {
        const isActive = i === currentPage;
        paginationHTML += `
            <button onclick="changePage(${i})" class="px-3 py-2 text-sm font-medium ${isActive ? 'text-blue-600 bg-blue-50 border-blue-500' : 'text-gray-500 bg-white border-gray-300'} border rounded-md hover:bg-gray-50">
                ${i}
            </button>
        `;
    }
    
    // Next button
    if (currentPage < totalPages) {
        paginationHTML += `
            <button onclick="changePage(${currentPage + 1})" class="px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
                Next
            </button>
        `;
    }
    
    pagination.innerHTML = paginationHTML;
}

// Change page
function changePage(page) {
    currentPage = page;
    updateUsersTable();
}

// Get status badge class
function getStatusBadgeClass(status) {
    switch (status) {
        case 'completed':
            return 'bg-green-100 text-green-800';
        case 'in_progress':
            return 'bg-blue-100 text-blue-800';
        case 'not_started':
            return 'bg-gray-100 text-gray-800';
        case 'inactive':
            return 'bg-red-100 text-red-800';
        default:
            return 'bg-gray-100 text-gray-800';
    }
}

// Get status text
function getStatusText(status) {
    switch (status) {
        case 'completed':
            return 'Completed';
        case 'in_progress':
            return 'In Progress';
        case 'not_started':
            return 'Not Started';
        case 'inactive':
            return 'Inactive';
        default:
            return 'Unknown';
    }
}

// Setup event listeners
function setupEventListeners() {
    // Date filter
    document.getElementById('apply-date-filter').addEventListener('click', loadAnalyticsData);
    
    // Export data
    document.getElementById('export-data').addEventListener('click', exportData);
    document.getElementById('export-users').addEventListener('click', exportUsers);
    
    // User search
    document.getElementById('user-search').addEventListener('input', function(e) {
        currentFilters.search = e.target.value;
        currentPage = 1;
        updateUsersTable();
    });
    
    // Status filter
    document.getElementById('status-filter').addEventListener('change', function(e) {
        currentFilters.status = e.target.value;
        currentPage = 1;
        updateUsersTable();
    });
    
    // Table sorting
    document.querySelectorAll('[data-sort]').forEach(header => {
        header.addEventListener('click', function() {
            const field = this.dataset.sort;
            if (currentSort.field === field) {
                currentSort.direction = currentSort.direction === 'asc' ? 'desc' : 'asc';
            } else {
                currentSort.field = field;
                currentSort.direction = 'desc';
            }
            updateUsersTable();
        });
    });
}

// Export data
async function exportData() {
    try {
        const params = new URLSearchParams();
        const startDate = document.getElementById('start-date').value;
        const endDate = document.getElementById('end-date').value;
        
        if (startDate) params.append('start_date', startDate);
        if (endDate) params.append('end_date', endDate);
        
        window.open(`/analytics/events/${eventId}/export?${params}`, '_blank');
    } catch (error) {
        console.error('Error exporting data:', error);
        showError('Failed to export data. Please try again.');
    }
}

// Export users
async function exportUsers() {
    try {
        const params = new URLSearchParams();
        const startDate = document.getElementById('start-date').value;
        const endDate = document.getElementById('end-date').value;
        
        if (startDate) params.append('start_date', startDate);
        if (endDate) params.append('end_date', endDate);
        
        // Add current filters
        if (currentFilters.status) params.append('filters[status]', currentFilters.status);
        if (currentFilters.search) params.append('filters[search]', currentFilters.search);
        
        window.open(`/analytics/events/${eventId}/export-users?${params}`, '_blank');
    } catch (error) {
        console.error('Error exporting users:', error);
        showError('Failed to export users. Please try again.');
    }
}

// View user details
function viewUserDetails(userId) {
    // Open user details modal or navigate to user details page
    window.open(`/analytics/events/${eventId}/users/${userId}`, '_blank');
}

// Show loading state
function showLoading() {
    document.getElementById('loading-state').classList.remove('hidden');
    document.getElementById('dashboard-content').classList.add('hidden');
}

// Hide loading state
function hideLoading() {
    document.getElementById('loading-state').classList.add('hidden');
    document.getElementById('dashboard-content').classList.remove('hidden');
}

// Show error message
function showError(message) {
    // You can implement a toast notification system here
    alert(message);
}
</script>
@endsection