@extends('layouts-v2.app')

@section('head')
<style>
    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    .animate-spin {
        animation: spin 1s linear infinite;
    }

    .chart-card {
        background-color: #171b26;
        border: 1px solid #2a3143;
        border-radius: 0.75rem;
        padding: 1.25rem;
    }

    .chart-card-header {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .chart-card-title {
        font-size: 0.875rem;
        font-weight: 700;
        color: #e2e8f0;
        letter-spacing: 0.025em;
    }

    .chart-loading {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: #64748b;
        font-size: 0.8rem;
        gap: 0.4rem;
    }

    .custom-scrollbar {
        scrollbar-width: thin;
        scrollbar-color: #334155 transparent;
    }

    .custom-scrollbar::-webkit-scrollbar {
        width: 5px;
    }

    .custom-scrollbar::-webkit-scrollbar-track {
        background: transparent;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb {
        background-color: #334155;
        border-radius: 10px;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        background-color: #475569;
    }
</style>
@endsection

@section('content')
<div class="flex-1 space-y-6 overflow-x-hidden max-w-full">
    <!-- Header -->
    <div class="flex items-center gap-2 text-slate-500 text-sm mb-2">
        <a href="{{ route('dashboard') }}" class="hover:text-blue-600 cursor-pointer transition-colors">Trang chủ</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <span class="text-slate-700">Báo cáo</span>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <span>Tổng quan tiến độ LCMS</span>
    </div>
    <div class="flex items-start justify-between mb-4">
        <div>
            <h1 class="text-xl md:text-2xl lg:text-3xl font-bold text-slate-900">Tổng quan Tiến độ Học tập LCMS</h1>
            <p class="text-slate-500 text-sm mt-1">Thống kê hoàn thành BTVN & Bài kiểm tra trên hệ thống LCMS</p>
        </div>
        <button id="refresh-btn"
            class="flex items-center gap-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-lg transition-colors shadow-sm">
            <i data-lucide="refresh-cw" class="w-4 h-4" id="refresh-icon"></i>
            Làm mới
        </button>
    </div>

    <!-- Overview Card -->
    <div class="rounded-xl border p-5" style="background-color: #171b26; border-color: #2a3143;">
        <div class="flex items-center gap-2 mb-5">
            <i data-lucide="pie-chart" class="w-5 h-5" style="color: #6366f1;"></i>
            <h2 class="text-base font-bold text-white tracking-wide">Số liệu tổng quan</h2>
            <span class="ml-1 px-2 py-0.5 text-[11px] rounded-full font-medium"
                style="background-color: #312e81; color: #a5b4fc;">
                Course IDs: 346, 563, 595, 1084
            </span>
        </div>

        <!-- Row 1: 6 Metric blocks -->
        <div class="grid grid-cols-2 lg:grid-cols-6 gap-3 mb-4">
            <div class="rounded-lg p-4 text-center flex flex-col justify-center" style="background-color: #1f2537;">
                <h3 class="text-2xl lg:text-3xl font-bold mb-1" style="color: #818cf8;" id="ov-total-students">
                    <i data-lucide="loader" class="w-5 h-5 animate-spin mx-auto text-slate-500"></i>
                </h3>
                <div class="text-xs" style="color: #64748b;">Tổng học viên</div>
            </div>
            <div class="rounded-lg p-4 text-center flex flex-col justify-center" style="background-color: #261e35;">
                <h3 class="text-2xl lg:text-3xl font-bold mb-1" style="color: #c084fc;" id="ov-total-courses">
                    <i data-lucide="loader" class="w-5 h-5 animate-spin mx-auto text-slate-500"></i>
                </h3>
                <div class="text-xs" style="color: #64748b;">Số khóa học</div>
            </div>
            <div class="rounded-lg p-4 text-center flex flex-col justify-center" style="background-color: #1e293b;">
                <h3 class="text-2xl lg:text-3xl font-bold mb-1" style="color: #60a5fa;" id="ov-btvn-ratio">
                    <i data-lucide="loader" class="w-5 h-5 animate-spin mx-auto text-slate-500"></i>
                </h3>
                <div class="text-xs" style="color: #64748b;">Tỉ lệ HT BTVN</div>
            </div>
            <div class="rounded-lg p-4 text-center flex flex-col justify-center" style="background-color: #0f2933;">
                <h3 class="text-2xl lg:text-3xl font-bold mb-1" style="color: #22d3ee;" id="ov-btvn-score">
                    <i data-lucide="loader" class="w-5 h-5 animate-spin mx-auto text-slate-500"></i>
                </h3>
                <div class="text-xs" style="color: #64748b;">Điểm TB BTVN</div>
            </div>
            <div class="rounded-lg p-4 text-center flex flex-col justify-center" style="background-color: #0f2f25;">
                <h3 class="text-2xl lg:text-3xl font-bold mb-1" style="color: #34d399;" id="ov-bkt-ratio">
                    <i data-lucide="loader" class="w-5 h-5 animate-spin mx-auto text-slate-500"></i>
                </h3>
                <div class="text-xs" style="color: #64748b;">Tỉ lệ HT BKT</div>
            </div>
            <div class="rounded-lg p-4 text-center flex flex-col justify-center" style="background-color: #2d2417;">
                <h3 class="text-2xl lg:text-3xl font-bold mb-1" style="color: #fbbf24;" id="ov-bkt-score">
                    <i data-lucide="loader" class="w-5 h-5 animate-spin mx-auto text-slate-500"></i>
                </h3>
                <div class="text-xs" style="color: #64748b;">Điểm TB BKT</div>
            </div>
        </div>

        <!-- Row 2: BTVN + BKT detail -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-3">
            <!-- BTVN -->
            <div class="rounded-lg p-5" style="background-color: #1c2235;">
                <div class="flex items-center gap-2 mb-4">
                    <i data-lucide="file-text" class="w-4 h-4" style="color: #fca5a5;"></i>
                    <span class="text-sm font-semibold text-slate-200">Bài tập về nhà (BTVN)</span>
                </div>
                <div class="grid grid-cols-3 gap-3 text-center">
                    <div>
                        <div class="text-2xl font-bold text-white mb-0.5" id="ov-btvn-total">
                            <i data-lucide="loader" class="w-4 h-4 animate-spin mx-auto text-slate-500"></i>
                        </div>
                        <div class="text-xs" style="color: #64748b;">Tổng lượt giao</div>
                    </div>
                    <div>
                        <div class="text-2xl font-bold mb-0.5" style="color: #34d399;" id="ov-btvn-completed">
                            <i data-lucide="loader" class="w-4 h-4 animate-spin mx-auto text-slate-500"></i>
                        </div>
                        <div class="text-xs" style="color: #64748b;">Đã hoàn thành</div>
                    </div>
                    <div>
                        <div class="text-2xl font-bold mb-0.5" style="color: #fb923c;" id="ov-btvn-uncompleted">
                            <i data-lucide="loader" class="w-4 h-4 animate-spin mx-auto text-slate-500"></i>
                        </div>
                        <div class="text-xs" style="color: #64748b;">Chưa hoàn thành</div>
                    </div>
                </div>
                <!-- Progress bar -->
                <div class="mt-4">
                    <div class="h-2 rounded-full overflow-hidden" style="background-color: #2a3143;">
                        <div id="ov-btvn-progress" class="h-full rounded-full transition-all duration-700"
                            style="width: 0%; background-color: #60a5fa;"></div>
                    </div>
                    <p class="text-right text-xs mt-1" style="color: #64748b;" id="ov-btvn-progress-label">0%</p>
                </div>
            </div>

            <!-- BKT -->
            <div class="rounded-lg p-5" style="background-color: #142823;">
                <div class="flex items-center gap-2 mb-4">
                    <i data-lucide="file-text" class="w-4 h-4" style="color: #fca5a5;"></i>
                    <span class="text-sm font-semibold text-slate-200">Bài kiểm tra (BKT)</span>
                </div>
                <div class="grid grid-cols-3 gap-3 text-center">
                    <div>
                        <div class="text-2xl font-bold text-white mb-0.5" id="ov-bkt-total">
                            <i data-lucide="loader" class="w-4 h-4 animate-spin mx-auto text-slate-500"></i>
                        </div>
                        <div class="text-xs" style="color: #64748b;">Tổng lượt giao</div>
                    </div>
                    <div>
                        <div class="text-2xl font-bold mb-0.5" style="color: #34d399;" id="ov-bkt-completed">
                            <i data-lucide="loader" class="w-4 h-4 animate-spin mx-auto text-slate-500"></i>
                        </div>
                        <div class="text-xs" style="color: #64748b;">Đã hoàn thành</div>
                    </div>
                    <div>
                        <div class="text-2xl font-bold mb-0.5" style="color: #fb923c;" id="ov-bkt-uncompleted">
                            <i data-lucide="loader" class="w-4 h-4 animate-spin mx-auto text-slate-500"></i>
                        </div>
                        <div class="text-xs" style="color: #64748b;">Chưa hoàn thành</div>
                    </div>
                </div>
                <!-- Progress bar -->
                <div class="mt-4">
                    <div class="h-2 rounded-full overflow-hidden" style="background-color: #2a3143;">
                        <div id="ov-bkt-progress" class="h-full rounded-full transition-all duration-700"
                            style="width: 0%; background-color: #34d399;"></div>
                    </div>
                    <p class="text-right text-xs mt-1" style="color: #64748b;" id="ov-bkt-progress-label">0%</p>
                </div>
            </div>
        </div>
    </div>

    <!-- ===== 2. COURSE DETAIL PANEL ===== -->
    <div class="chart-card mt-4 mb-4">
        <div class="chart-card-header mb-4">
            <i data-lucide="layout-list" class="w-4 h-4" style="color: #fca5a5;"></i>
            <span class="chart-card-title">Chi tiết theo Khóa học</span>
        </div>

        <!-- Chart -->
        <div style="position: relative; height: 320px;" id="course-detail-wrap">
            <div class="chart-loading" id="course-detail-loading">
                <i data-lucide="loader" class="w-4 h-4 animate-spin"></i> Đang tải...
            </div>
            <canvas id="courseDetailChart" style="display:none;"></canvas>
        </div>
        <div id="course-detail-legend" class="flex justify-center gap-4 mt-4 mb-6"
            style="font-size: 0.72rem; color: #94a3b8;">
            <span><span
                    style="display:inline-block;width:12px;height:12px;background:#2563eb;border-radius:2px;margin-right:4px;vertical-align:middle;"></span>BTVN
                Hoàn thành (%)</span>
            <span><span
                    style="display:inline-block;width:12px;height:12px;background:#10b981;border-radius:2px;margin-right:4px;vertical-align:middle;"></span>BKT
                Hoàn thành (%)</span>
            <span><span
                    style="display:inline-block;width:14px;height:3px;background:#8b5cf6;margin-right:4px;vertical-align:middle;"></span>Điểm
                TB BTVN</span>
            <span><span
                    style="display:inline-block;width:14px;height:3px;background:#f59e0b;margin-right:4px;vertical-align:middle;"></span>Điểm
                TB BKT</span>
        </div>

        <!-- Table -->
        <div class="overflow-x-auto mt-2">
            <table class="w-full text-sm text-center"
                style="color: #cbd5e1; border-collapse: separate; border-spacing: 0;">
                <thead class="text-xs uppercase" style="background-color: #1f2537; color: #94a3b8;">
                    <tr>
                        <th scope="col" class="px-3 py-3 rounded-tl-lg text-left" rowspan="2"
                            style="border-bottom: 1px solid #334155;">Khóa học</th>
                        <th scope="col" class="px-3 py-3" rowspan="2" style="border-bottom: 1px solid #334155;">HV</th>
                        <th scope="col" class="px-3 py-2 border-l border-slate-700" colspan="3"
                            style="border-bottom: 1px solid #334155;">
                            <i data-lucide="file-text" class="w-3 h-3 inline text-blue-400 mr-1"></i>BTVN
                        </th>
                        <th scope="col" class="px-3 py-2 border-l border-slate-700 rounded-tr-lg" colspan="3"
                            style="border-bottom: 1px solid #334155;">
                            <i data-lucide="check-square" class="w-3 h-3 inline text-green-400 mr-1"></i>Bài kiểm tra
                        </th>
                    </tr>
                    <tr style="background-color: #171b26;">
                        <th
                            class="px-3 py-2 font-medium text-blue-300 border-l border-slate-700 border-b border-slate-700">
                            Hoàn thành</th>
                        <th class="px-3 py-2 font-medium text-blue-300 border-b border-slate-700">Tỉ lệ</th>
                        <th class="px-3 py-2 font-medium text-blue-300 border-b border-slate-700">Điểm TB</th>
                        <th
                            class="px-3 py-2 font-medium text-green-300 border-l border-slate-700 border-b border-slate-700">
                            Hoàn thành</th>
                        <th class="px-3 py-2 font-medium text-green-300 border-b border-slate-700">Tỉ lệ</th>
                        <th class="px-3 py-2 font-medium text-green-300 border-b border-slate-700">Điểm TB</th>
                    </tr>
                </thead>
                <tbody id="courseDetailTableBody">
                    <tr>
                        <td colspan="8" class="py-6 text-center text-slate-500">
                            <i data-lucide="loader" class="w-5 h-5 animate-spin mx-auto mb-2"></i> Đang tải dữ liệu chi
                            tiết...
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- ===== 3 CHART PANELS ===== -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">

        <!-- 1. Donut Chart: Phân bổ Loại nội dung -->
        <div class="chart-card">
            <div class="chart-card-header">
                <i data-lucide="pie-chart" class="w-4 h-4" style="color: #818cf8;"></i>
                <span class="chart-card-title">Phân bổ Loại nội dung</span>
                <span class="ml-auto px-2 py-0.5 text-[10px] rounded-full font-medium"
                    style="background-color: #312e81; color: #a5b4fc;">Section duy nhất</span>
            </div>
            <div style="position: relative; height: 240px;" id="content-type-wrap">
                <div class="chart-loading" id="content-type-loading">
                    <i data-lucide="loader" class="w-4 h-4 animate-spin"></i> Đang tải...
                </div>
                <canvas id="contentTypeChart" style="display:none;"></canvas>
            </div>
            <div id="content-type-legend" class="flex justify-center gap-4 mt-3"
                style="font-size: 0.72rem; color: #94a3b8;"></div>
        </div>

        <!-- 2. Bar Chart: Phân bổ Điểm số Học viên -->
        <div class="chart-card">
            <div class="chart-card-header">
                <i data-lucide="bar-chart-2" class="w-4 h-4" style="color: #38bdf8;"></i>
                <span class="chart-card-title">Phân bổ Điểm số Học viên</span>
                <span class="ml-auto px-2 py-0.5 text-[10px] rounded-full font-medium"
                    style="background-color: #0c4a6e; color: #7dd3fc;">Histogram</span>
            </div>
            <div style="position: relative; height: 240px;" id="score-hist-wrap">
                <div class="chart-loading" id="score-hist-loading">
                    <i data-lucide="loader" class="w-4 h-4 animate-spin"></i> Đang tải...
                </div>
                <canvas id="scoreHistChart" style="display:none;"></canvas>
            </div>
            <div class="flex justify-center gap-4 mt-3" style="font-size: 0.72rem; color: #94a3b8;">
                <span><span
                        style="display:inline-block;width:10px;height:10px;background:#38bdf8;border-radius:2px;margin-right:4px;"></span>BTVN</span>
                <span><span
                        style="display:inline-block;width:10px;height:10px;background:#818cf8;border-radius:2px;margin-right:4px;"></span>BKT</span>
            </div>
        </div>

        <!-- 3. Line Chart: Xu hướng Hoàn thành theo Tháng -->
        <div class="chart-card">
            <div class="chart-card-header">
                <i data-lucide="trending-up" class="w-4 h-4" style="color: #a78bfa;"></i>
                <span class="chart-card-title">Xu hướng Hoàn thành theo Tháng</span>
                <span class="ml-auto px-2 py-0.5 text-[10px] rounded-full font-medium"
                    style="background-color: #3b0764; color: #d8b4fe;">2026</span>
            </div>
            <div style="position: relative; height: 240px;" id="trend-wrap">
                <div class="chart-loading" id="trend-loading">
                    <i data-lucide="loader" class="w-4 h-4 animate-spin"></i> Đang tải...
                </div>
                <canvas id="completionTrendChart" style="display:none;"></canvas>
            </div>
            <div class="flex justify-center gap-4 mt-3" style="font-size: 0.72rem; color: #94a3b8;">
                <span><span
                        style="display:inline-block;width:10px;height:10px;background:#a78bfa;border-radius:2px;margin-right:4px;"></span>Hoàn
                    thành</span>
            </div>
        </div>

    </div>

    <!-- ===== 4. REGISTRATION AND STUDENT STATS PANELS ===== -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-4 mb-4">
        <!-- Panel: Tình trạng Đăng ký Khóa học -->
        <div class="chart-card flex flex-col">
            <div class="chart-card-header mb-4">
                <i data-lucide="users" class="w-4 h-4" style="color: #60a5fa;"></i>
                <span class="chart-card-title">Tình trạng Đăng ký Khóa học</span>
            </div>

            <div id="registration-loading" class="chart-loading flex-1">
                <i data-lucide="loader" class="w-4 h-4 animate-spin"></i> Đang tải...
            </div>
            <div id="registration-wrap" class="space-y-4 custom-scrollbar" style="display:none;">
                <!-- JS will fill this -->
            </div>
        </div>

        <!-- Panel: Thống kê Học viên -->
        <div class="chart-card flex flex-col">
            <div class="chart-card-header mb-4">
                <i data-lucide="users" class="w-4 h-4" style="color: #60a5fa;"></i>
                <span class="chart-card-title">Thống kê Học viên</span>
            </div>

            <div id="student-stats-loading" class="chart-loading flex-1">
                <i data-lucide="loader" class="w-4 h-4 animate-spin"></i> Đang tải...
            </div>
            <div id="student-stats-wrap" class="flex-1 flex flex-col" style="display:none;">
                <!-- Grid 4 ô vuông -->
                <div class="grid grid-cols-2 gap-3 mb-6">
                    <div
                        class="p-3 rounded-md bg-[#1f2537] border border-slate-700/50 flex flex-col items-center justify-center">
                        <div class="text-xl font-bold text-purple-400" id="stat-lcms-students">-</div>
                        <div class="text-[10px] text-slate-400 mt-1 uppercase text-center">HV trong LCMS</div>
                    </div>
                    <div
                        class="p-3 rounded-md bg-[#17262b] border border-slate-700/50 flex flex-col items-center justify-center">
                        <div class="text-xl font-bold text-emerald-400" id="stat-assignments">-</div>
                        <div class="text-[10px] text-slate-400 mt-1 uppercase text-center">Tổng lượt giao bài</div>
                    </div>
                    <div
                        class="p-3 rounded-md bg-[#17262b] border border-slate-700/50 flex flex-col items-center justify-center">
                        <div class="text-xl font-bold text-emerald-400" id="stat-has-score">-</div>
                        <div class="text-[10px] text-slate-400 mt-1 uppercase text-center">HV có điểm</div>
                    </div>
                    <div
                        class="p-3 rounded-md bg-[#2b211a] border border-slate-700/50 flex flex-col items-center justify-center">
                        <div class="text-xl font-bold text-orange-400" id="stat-no-score">-</div>
                        <div class="text-[10px] text-slate-400 mt-1 uppercase text-center">HV chưa có điểm</div>
                    </div>
                </div>

                <!-- Phân bố giới tính -->
                <div class="mb-6">
                    <div class="text-xs text-slate-400 mb-3 font-medium">Phân bố Giới tính</div>
                    <div class="space-y-4" id="gender-distribution-wrap">
                        <!-- JS fill -->
                    </div>
                </div>

                <!-- Footer Unique Counts -->
                <div
                    class="flex justify-between items-end border-t border-slate-700/50 pt-3 text-xs text-slate-400 mt-auto">
                    <div>Unique Sections: <span class="text-slate-200 font-medium" id="stat-unique-sections">-</span>
                    </div>
                    <div>Unique Students: <span class="text-slate-200 font-medium" id="stat-unique-students">-</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ===== 5. TOP & WARNING STUDENTS PANELS ===== -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-4 mb-4">
        <!-- Panel: Top Học viên Điểm cao -->
        <div class="chart-card flex flex-col">
            <div class="chart-card-header mb-4">
                <i data-lucide="trophy" class="w-4 h-4" style="color: #fbbf24;"></i>
                <span class="chart-card-title">Top Học viên Điểm cao</span>
            </div>

            <div id="top-students-loading" class="chart-loading flex-1">
                <i data-lucide="loader" class="w-4 h-4 animate-spin"></i> Đang tải...
            </div>
            <div id="top-students-wrap" class="space-y-3 custom-scrollbar" style="display:none;">
                <!-- JS will fill this -->
            </div>
        </div>

        <!-- Panel: Học viên Cần chú ý -->
        <div class="chart-card  flex flex-col">
            <div class="chart-card-header mb-4">
                <i data-lucide="alert-triangle" class="w-4 h-4" style="color: #fca5a5;"></i>
                <span class="chart-card-title">Học viên Cần chú ý</span>
            </div>

            <div id="warning-students-loading" class="chart-loading flex-1">
                <i data-lucide="loader" class="w-4 h-4 animate-spin"></i> Đang tải...
            </div>
            <div id="warning-students-wrap" class="space-y-3 custom-scrollbar" style="display:none;">
                <!-- JS will fill this -->
            </div>
        </div>
    </div>

    </div>

    <!-- ===== 6. STUDENT PROGRESS DETAIL ===== -->
    <div class="chart-card mt-4">
        <div class="chart-card-header flex justify-between items-center mb-6">
            <div class="flex items-center gap-2">
                <i data-lucide="users" class="w-5 h-5 text-blue-400"></i>
                <span class="chart-card-title">Chi tiết Tiến độ Học viên</span>
            </div>
            <!-- <div class="flex gap-2">
                <button id="export-progress-btn" class="px-3 py-1.5 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-md text-xs flex items-center gap-1.5 transition-all border border-slate-700">
                    <i data-lucide="download" class="w-3.5 h-3.5"></i> Xuất Excel
                </button>
            </div> -->
        </div>

        <!-- Filters Form -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-3 mb-6 p-4 rounded-xl bg-[#1a2030]/50 border border-slate-800/50">
            <div class="space-y-1.5">
                <label class="text-[10px] uppercase tracking-wider text-slate-500 font-bold ml-1">Tìm kiếm</label>
                <div class="relative">
                    <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-500"></i>
                    <input type="text" id="sp-search" placeholder="ID, Tên, Zeus ID..." 
                        class="w-full bg-[#0f172a] border border-slate-700 rounded-lg py-2 pl-9 pr-3 text-sm text-slate-200 focus:outline-none focus:border-blue-500 transition-all">
                </div>
            </div>
            <div class="space-y-1.5">
                <label class="text-[10px] uppercase tracking-wider text-slate-500 font-bold ml-1">Giới tính</label>
                <select id="sp-gender" class="w-full bg-[#0f172a] border border-slate-700 rounded-lg py-2 px-3 text-sm text-slate-200 focus:outline-none focus:border-blue-500">
                    <option value="">Tất cả giới tính</option>
                    <option value="Male">Nam (Male)</option>
                    <option value="Female">Nữ (Female)</option>
                    <option value="Unknown">Không xác định</option>
                </select>
            </div>
            <div class="space-y-1.5">
                <label class="text-[10px] uppercase tracking-wider text-slate-500 font-bold ml-1">HT BTVN (%)</label>
                <div class="flex items-center gap-2">
                    <input type="number" id="sp-completion-min" placeholder="Min" class="w-full bg-[#0f172a] border border-slate-700 rounded-lg py-2 px-3 text-sm text-slate-200 focus:outline-none focus:border-blue-500">
                    <input type="number" id="sp-completion-max" placeholder="Max" class="w-full bg-[#0f172a] border border-slate-700 rounded-lg py-2 px-3 text-sm text-slate-200 focus:outline-none focus:border-blue-500">
                </div>
            </div>
            <div class="space-y-1.5">
                <label class="text-[10px] uppercase tracking-wider text-slate-500 font-bold ml-1">Điểm TB BTVN</label>
                <div class="flex items-center gap-2">
                    <input type="number" id="sp-score-min" step="0.1" placeholder="Min" class="w-full bg-[#0f172a] border border-slate-700 rounded-lg py-2 px-3 text-sm text-slate-200 focus:outline-none focus:border-blue-500">
                    <input type="number" id="sp-score-max" step="0.1" placeholder="Max" class="w-full bg-[#0f172a] border border-slate-700 rounded-lg py-2 px-3 text-sm text-slate-200 focus:outline-none focus:border-blue-500">
                </div>
            </div>
            <div class="flex items-end gap-2">
                <button id="sp-search-btn" class="flex-1 bg-blue-600 hover:bg-blue-500 text-white font-medium py-2 px-4 rounded-lg text-sm transition-all shadow-lg shadow-blue-500/20 active:scale-95">
                    Tìm kiếm
                </button>
                <button id="sp-clear-btn" class="p-2 bg-slate-800 hover:bg-slate-700 text-slate-400 rounded-lg border border-slate-700 transition-all active:scale-95" title="Xóa bộ lọc">
                    <i data-lucide="refresh-cw" class="w-4 h-4"></i>
                </button>
            </div>
        </div>

        <!-- Table -->
        <div class="overflow-x-auto custom-scrollbar rounded-xl border border-slate-800 shadow-2xl">
            <table class="w-full text-sm text-left border-collapse">
                <thead>
                    <tr class="bg-[#1a2030] text-slate-400 font-medium border-b border-slate-800/50">
                        <th class="px-4 py-4 font-bold border-r border-slate-800/50">Học viên</th>
                        <th class="px-4 py-4 font-bold border-r border-slate-800/50">Khóa học</th>
                        <th class="px-4 py-4 text-center border-r border-slate-800/50 bg-blue-500/5 text-blue-300">BTVN %</th>
                        <th class="px-4 py-4 text-center border-r border-slate-800/50 bg-blue-500/5 text-blue-300">BTVN Điểm</th>
                        <th class="px-4 py-4 text-center border-r border-slate-800/50 bg-emerald-500/5 text-emerald-300">BKT %</th>
                        <th class="px-4 py-4 text-center bg-emerald-500/5 text-emerald-300">BKT Điểm</th>
                    </tr>
                </thead>
                <tbody id="student-progress-tbody">
                    <!-- JS fill -->
                </tbody>
            </table>
        </div>

        <!-- Loading state -->
        <div id="student-progress-loading" class="py-20 flex flex-col items-center justify-center gap-3 text-slate-500" style="display:none;">
            <i data-lucide="loader" class="w-8 h-8 animate-spin text-blue-500"></i>
            <span class="text-sm font-medium">Đang tải dữ liệu học viên...</span>
        </div>

        <!-- Empty state -->
        <div id="student-progress-empty" class="py-20 flex flex-col items-center justify-center gap-3 text-slate-500" style="display:none;">
            <div class="p-4 rounded-full bg-slate-800/50 mb-2">
                <i data-lucide="user-x" class="w-10 h-10 text-slate-600"></i>
            </div>
            <span class="text-sm font-medium">Không tìm thấy học viên phù hợp</span>
            <button onclick="document.getElementById('sp-clear-btn').click()" class="text-blue-400 hover:underline text-xs mt-2 font-medium">Xóa bộ lọc và thử lại</button>
        </div>

        <!-- Pagination -->
        <div id="student-progress-pagination" class="mt-6 flex flex-wrap justify-between items-center gap-4 px-2 pb-2">
            <!-- JS fill -->
        </div>
    </div>

    <!-- Last updated info -->
    <div class="flex items-center gap-2 text-xs text-slate-400 mt-4">
        <i data-lucide="clock" class="w-3 h-3"></i>
        <span>Cập nhật lần cuối: <span id="ov-last-updated">---</span></span>
    </div>
</div>

<!-- ===== STUDENT DETAIL MODAL ===== -->
<div id="student-detail-modal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-[#0a0f1d]/80 backdrop-blur-sm transition-opacity opacity-0 pointer-events-none">
    <div class="bg-[#111827] w-full max-w-4xl max-h-[90vh] rounded-2xl border border-slate-800 shadow-2xl flex flex-col overflow-hidden transform scale-95 transition-transform">
        <!-- Modal Header -->
        <div class="px-6 py-4 border-b border-slate-800 flex justify-between items-center bg-[#1e293b]/50">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-full bg-blue-500/10 flex items-center justify-center border border-blue-500/20">
                    <i data-lucide="user" class="w-5 h-5 text-blue-400"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-slate-100" id="modal-student-name">Học viên: ---</h3>
                    <p class="text-xs text-slate-500" id="modal-student-info">ID: --- • Chi tiết các bài học</p>
                </div>
            </div>
            <button onclick="closeStudentModal()" class="w-8 h-8 rounded-full bg-slate-800 hover:bg-slate-700 text-slate-400 flex items-center justify-center transition-all">
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>
        </div>

        <!-- Modal Body -->
        <div class="flex-1 overflow-y-auto p-6 custom-scrollbar">
            <div id="modal-loading" class="flex flex-col items-center justify-center py-20 gap-3">
                <div class="relative">
                    <div class="w-12 h-12 border-4 border-blue-500/20 rounded-full border-t-blue-500 animate-spin"></div>
                </div>
                <span class="text-slate-400 text-sm font-medium">Đang tải chi tiết...</span>
            </div>

            <div id="modal-content" style="display:none;">
                <div class="overflow-x-auto rounded-xl border border-slate-800 overflow-hidden">
                    <table class="w-full text-left border-collapse text-sm">
                        <thead>
                            <tr class="bg-[#0f172a] border-b border-slate-800 text-slate-400">
                                <th class="py-3 px-4 font-bold uppercase tracking-wider text-[10px]">Tên Bài Học (Section)</th>
                                <th class="py-3 px-4 font-bold uppercase tracking-wider text-[10px]">Loại</th>
                                <th class="py-3 px-4 font-bold uppercase tracking-wider text-[10px] text-center">Trạng Thái</th>
                                <th class="py-3 px-4 font-bold uppercase tracking-wider text-[10px] text-right">Điểm Trung Bình</th>
                            </tr>
                        </thead>
                        <tbody id="modal-detail-tbody" class="divide-y divide-slate-800/50 bg-[#1e2333]/30">
                            <!-- JS fill -->
                        </tbody>
                    </table>
                </div>
            </div>

            <div id="modal-empty" class="hidden flex flex-col items-center justify-center py-20 text-center">
                <div class="bg-slate-800/50 p-4 rounded-full mb-3">
                    <i data-lucide="database" class="w-10 h-10 text-slate-600"></i>
                </div>
                <span class="text-slate-400 font-medium">Không tìm thấy dữ liệu bài học</span>
            </div>
        </div>

        <!-- Modal Footer -->
        <div class="px-6 py-4 border-t border-slate-800 bg-[#1e293b]/30 flex justify-end">
            <button onclick="closeStudentModal()" class="px-6 py-2 bg-slate-800 hover:bg-slate-700 text-slate-100 rounded-lg text-sm font-bold transition-all border border-slate-700">
                Đóng
            </button>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    // =============================================
    // CHART INSTANCES (for destroy/re-render)
    // =============================================
    let _contentTypeChart = null;
    let _scoreHistChart = null;
    let _trendChart = null;
    let _courseDetailChart = null;

    // =============================================
    // OVERVIEW DATA (existing)
    // =============================================
    function loadOverviewData() {
        const icon = document.getElementById('refresh-icon');
        const btn = document.getElementById('refresh-btn');
        if (icon) icon.style.animation = 'spin 1s linear infinite';
        if (btn) btn.disabled = true;

        fetch('{{ route("lcms-overview-report.data") }}')
            .then(r => r.json())
            .then(res => {
                if (!res.success) return;
                const data = res.data;

                document.getElementById('ov-total-students').innerText = (data.total_students || 0).toLocaleString('vi-VN');
                document.getElementById('ov-total-courses').innerText = (data.total_courses || 0).toLocaleString('vi-VN');

                document.getElementById('ov-btvn-ratio').innerText = (data.btvn.ratio || 0) + '%';
                document.getElementById('ov-btvn-score').innerText = data.btvn.average !== null && data.btvn.average !== undefined ? data.btvn.average : 'N/A';
                document.getElementById('ov-bkt-ratio').innerText = (data.bkt.ratio || 0) + '%';
                document.getElementById('ov-bkt-score').innerText = data.bkt.average !== null && data.bkt.average !== undefined ? data.bkt.average : 'N/A';

                document.getElementById('ov-btvn-total').innerText = (data.btvn.total || 0).toLocaleString('vi-VN');
                document.getElementById('ov-btvn-completed').innerText = (data.btvn.completed || 0).toLocaleString('vi-VN');
                document.getElementById('ov-btvn-uncompleted').innerText = (data.btvn.not_completed || 0).toLocaleString('vi-VN');

                document.getElementById('ov-bkt-total').innerText = (data.bkt.total || 0).toLocaleString('vi-VN');
                document.getElementById('ov-bkt-completed').innerText = (data.bkt.completed || 0).toLocaleString('vi-VN');
                document.getElementById('ov-bkt-uncompleted').innerText = (data.bkt.not_completed || 0).toLocaleString('vi-VN');

                // Progress bars
                const btvnRatio = data.btvn.ratio || 0;
                const bktRatio = data.bkt.ratio || 0;
                document.getElementById('ov-btvn-progress').style.width = btvnRatio + '%';
                document.getElementById('ov-btvn-progress-label').innerText = btvnRatio + '%';
                document.getElementById('ov-bkt-progress').style.width = bktRatio + '%';
                document.getElementById('ov-bkt-progress-label').innerText = bktRatio + '%';

                // Last updated
                const now = new Date();
                document.getElementById('ov-last-updated').innerText = now.toLocaleString('vi-VN');
            })
            .catch(e => {
                console.error('Error fetching overview data:', e);
            })
            .finally(() => {
                if (icon) icon.style.animation = '';
                if (btn) btn.disabled = false;
            });
    }

    // =============================================
    // 1. DONUT CHART — Phân bổ Loại nội dung
    // =============================================
    function loadContentTypeChart() {
        fetch('{{ route("lcms-overview-report.content-type-distribution") }}')
            .then(r => r.json())
            .then(res => {
                const loadingEl = document.getElementById('content-type-loading');
                const canvas = document.getElementById('contentTypeChart');
                if (!res.success || !res.data.length) {
                    if (loadingEl) loadingEl.innerHTML = 'Không có dữ liệu';
                    return;
                }

                if (loadingEl) loadingEl.style.display = 'none';
                canvas.style.display = 'block';

                const labels = res.data.map(r => r.content_type);
                const values = res.data.map(r => parseInt(r.total_sections));
                const colors = ['#38bdf8', '#818cf8', '#34d399', '#fbbf24'];

                if (_contentTypeChart) _contentTypeChart.destroy();
                _contentTypeChart = new Chart(canvas, {
                    type: 'doughnut',
                    data: {
                        labels: labels,
                        datasets: [{
                            data: values,
                            backgroundColor: colors.slice(0, labels.length),
                            borderColor: '#171b26',
                            borderWidth: 3,
                            hoverOffset: 8
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        cutout: '65%',
                        plugins: {
                            legend: { display: false },
                            tooltip: {
                                callbacks: {
                                    label: ctx => ` ${ctx.label}: ${ctx.parsed.toLocaleString('vi-VN')} section`
                                }
                            }
                        }
                    }
                });

                // Custom legend
                const legendEl = document.getElementById('content-type-legend');
                if (legendEl) {
                    legendEl.innerHTML = labels.map((l, i) =>
                        `<span style="display:flex;align-items:center;gap:4px;">
                        <span style="display:inline-block;width:10px;height:10px;background:${colors[i]};border-radius:50%;"></span>
                        ${l}
                    </span>`
                    ).join('');
                }
            })
            .catch(e => console.error('Error loading content type chart:', e));
    }

    // =============================================
    // 2. BAR CHART — Phân bổ Điểm số Học viên
    // =============================================
    function loadScoreHistogram() {
        fetch('{{ route("lcms-overview-report.score-histogram") }}')
            .then(r => r.json())
            .then(res => {
                const loadingEl = document.getElementById('score-hist-loading');
                const canvas = document.getElementById('scoreHistChart');
                if (!res.success || !res.data.length) {
                    if (loadingEl) loadingEl.innerHTML = 'Không có dữ liệu';
                    return;
                }

                if (loadingEl) loadingEl.style.display = 'none';
                canvas.style.display = 'block';

                const labels = res.data.map(r => r.score_range);
                const btvnData = res.data.map(r => parseInt(r.count_hv_btvn) || 0);
                const bktData = res.data.map(r => parseInt(r.count_hv_bkt) || 0);

                if (_scoreHistChart) _scoreHistChart.destroy();
                _scoreHistChart = new Chart(canvas, {
                    type: 'bar',
                    data: {
                        labels: labels,
                        datasets: [
                            {
                                label: 'BTVN',
                                data: btvnData,
                                backgroundColor: 'rgba(56, 189, 248, 0.75)',
                                borderColor: '#38bdf8',
                                borderWidth: 1,
                                borderRadius: 4
                            },
                            {
                                label: 'BKT',
                                data: bktData,
                                backgroundColor: 'rgba(129, 140, 248, 0.75)',
                                borderColor: '#818cf8',
                                borderWidth: 1,
                                borderRadius: 4
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: { display: false },
                            tooltip: {
                                callbacks: {
                                    label: ctx => ` ${ctx.dataset.label}: ${ctx.parsed.y.toLocaleString('vi-VN')} HV`
                                }
                            }
                        },
                        scales: {
                            x: {
                                grid: { color: 'rgba(42,49,67,0.8)' },
                                ticks: { color: '#64748b', font: { size: 11 } },
                                title: {
                                    display: true,
                                    text: 'Khoảng điểm (thang 10)',
                                    color: '#94a3b8',
                                    font: { size: 11 }
                                }
                            },
                            y: {
                                grid: { color: 'rgba(42,49,67,0.8)' },
                                ticks: { color: '#64748b', font: { size: 11 } },
                                title: {
                                    display: true,
                                    text: 'Số HV',
                                    color: '#94a3b8',
                                    font: { size: 11 }
                                },
                                beginAtZero: true
                            }
                        }
                    }
                });
            })
            .catch(e => console.error('Error loading score histogram:', e));
    }

    // =============================================
    // 3. LINE CHART — Xu hướng Hoàn thành theo Tháng
    // =============================================
    function loadCompletionTrend() {
        fetch('{{ route("lcms-overview-report.completion-trend") }}')
            .then(r => r.json())
            .then(res => {
                const loadingEl = document.getElementById('trend-loading');
                const canvas = document.getElementById('completionTrendChart');
                if (!res.success || !res.data.length) {
                    if (loadingEl) loadingEl.innerHTML = 'Không có dữ liệu';
                    return;
                }

                if (loadingEl) loadingEl.style.display = 'none';
                canvas.style.display = 'block';

                const labels = res.data.map(r => r.month);
                const values = res.data.map(r => parseInt(r.total_completions) || 0);

                if (_trendChart) _trendChart.destroy();
                _trendChart = new Chart(canvas, {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: 'Hoàn thành',
                            data: values,
                            borderColor: '#a78bfa',
                            backgroundColor: 'rgba(167, 139, 250, 0.12)',
                            borderWidth: 2,
                            pointBackgroundColor: '#a78bfa',
                            pointBorderColor: '#171b26',
                            pointBorderWidth: 2,
                            pointRadius: 5,
                            pointHoverRadius: 7,
                            fill: true,
                            tension: 0.35
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: { display: false },
                            tooltip: {
                                callbacks: {
                                    label: ctx => ` Hoàn thành: ${ctx.parsed.y.toLocaleString('vi-VN')} lượt`
                                }
                            }
                        },
                        scales: {
                            x: {
                                grid: { color: 'rgba(42,49,67,0.8)' },
                                ticks: { color: '#64748b', font: { size: 11 } },
                                title: {
                                    display: true,
                                    text: 'Tháng',
                                    color: '#94a3b8',
                                    font: { size: 11 }
                                }
                            },
                            y: {
                                grid: { color: 'rgba(42,49,67,0.8)' },
                                ticks: { color: '#64748b', font: { size: 11 } },
                                title: {
                                    display: true,
                                    text: 'Lượt HT',
                                    color: '#94a3b8',
                                    font: { size: 11 }
                                },
                                beginAtZero: true
                            }
                        }
                    }
                });
            })
            .catch(e => console.error('Error loading completion trend:', e));
    }

    // =============================================
    // 4. COURSE DETAIL — Combo Chart & Table
    // =============================================
    function loadCourseDetail() {
        fetch('{{ route("lcms-overview-report.course-detail") }}')
            .then(r => r.json())
            .then(res => {
                const loadingEl = document.getElementById('course-detail-loading');
                const canvas = document.getElementById('courseDetailChart');
                const tbody = document.getElementById('courseDetailTableBody');

                if (!res.success || !res.data || !res.data.length) {
                    if (loadingEl) loadingEl.innerHTML = 'Không có dữ liệu';
                    if (tbody) tbody.innerHTML = '<tr><td colspan="8" class="py-4 text-center text-slate-500">Không có dữ liệu</td></tr>';
                    return;
                }

                if (loadingEl) loadingEl.style.display = 'none';
                canvas.style.display = 'block';

                const data = res.data;

                // 1. Render Table
                let html = '';
                data.forEach(row => {
                    const btvnRatio = row.btvn_ratio ? row.btvn_ratio + '%' : '-';
                    const bktRatio = row.bkt_ratio ? row.bkt_ratio + '%' : '-';
                    const btvnAvg = row.btvn_avg_score ? parseFloat(row.btvn_avg_score).toFixed(2) : '-';
                    const bktAvg = row.bkt_avg_score ? parseFloat(row.bkt_avg_score).toFixed(2) : '-';

                    html += `
                    <tr class="hover:bg-[#1e2333] transition-colors border-b border-slate-800">
                        <td class="px-3 py-3 text-left font-medium text-slate-200">
                            ${row.course_name}<br>
                            <span class="text-[10px] text-slate-500 font-normal">ID: ${row.course_id}</span>
                        </td>
                        <td class="px-3 py-3 font-semibold text-white">${row.total_students}</td>
                        
                        <td class="px-3 py-3 text-blue-100 border-l border-slate-800">${row.btvn_completed}/${row.btvn_assigned || 0}</td>
                        <td class="px-3 py-3 font-medium text-blue-400">${btvnRatio}</td>
                        <td class="px-3 py-3 text-blue-200">${btvnAvg}</td>

                        <td class="px-3 py-3 text-green-100 border-l border-slate-800">${row.bkt_completed}/${row.bkt_assigned || 0}</td>
                        <td class="px-3 py-3 font-medium text-green-400">${bktRatio}</td>
                        <td class="px-3 py-3 text-green-200">${bktAvg}</td>
                    </tr>
                `;
                });
                tbody.innerHTML = html;

                // 2. Render Chart (Combo: Bar cho tỉ lệ HT, Line cho Điểm TB)
                const labels = data.map(r => r.course_name.length > 25 ? r.course_name.substring(0, 25) + '...' : r.course_name);
                const btvnRatioData = data.map(r => parseFloat(r.btvn_ratio) || 0);
                const bktRatioData = data.map(r => parseFloat(r.bkt_ratio) || 0);
                const btvnScoreData = data.map(r => parseFloat(r.btvn_avg_score) || null);
                const bktScoreData = data.map(r => parseFloat(r.bkt_avg_score) || null);

                if (_courseDetailChart) _courseDetailChart.destroy();
                _courseDetailChart = new Chart(canvas, {
                    type: 'bar',
                    data: {
                        labels: labels,
                        datasets: [
                            {
                                type: 'line',
                                label: 'Điểm TB BTVN',
                                data: btvnScoreData,
                                borderColor: '#8b5cf6', // purple
                                backgroundColor: '#8b5cf6',
                                borderWidth: 2,
                                tension: 0.3,
                                yAxisID: 'yScore',
                                pointRadius: 4,
                                pointBackgroundColor: '#171b26'
                            },
                            {
                                type: 'line',
                                label: 'Điểm TB BKT',
                                data: bktScoreData,
                                borderColor: '#f59e0b', // amber
                                backgroundColor: '#f59e0b',
                                borderWidth: 2,
                                tension: 0.3,
                                yAxisID: 'yScore',
                                pointRadius: 4,
                                pointBackgroundColor: '#171b26'
                            },
                            {
                                type: 'bar',
                                label: 'BTVN Hoàn thành (%)',
                                data: btvnRatioData,
                                backgroundColor: 'rgba(37, 99, 235, 0.8)', // blue
                                borderColor: '#2563eb',
                                borderWidth: 1,
                                borderRadius: 4,
                                yAxisID: 'yRatio'
                            },
                            {
                                type: 'bar',
                                label: 'BKT Hoàn thành (%)',
                                data: bktRatioData,
                                backgroundColor: 'rgba(16, 185, 129, 0.8)', // emerald
                                borderColor: '#10b981',
                                borderWidth: 1,
                                borderRadius: 4,
                                yAxisID: 'yRatio'
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        interaction: {
                            mode: 'index',
                            intersect: false,
                        },
                        plugins: {
                            legend: { display: false },
                            tooltip: {
                                callbacks: {
                                    label: function (ctx) {
                                        let label = ctx.dataset.label || '';
                                        let val = ctx.parsed.y;
                                        if (label.includes('%')) {
                                            return ` ${label}: ${val}%`;
                                        }
                                        return ` ${label}: ${val}`;
                                    }
                                }
                            }
                        },
                        scales: {
                            x: {
                                grid: { color: 'rgba(42,49,67,0.5)', drawBorder: false },
                                ticks: { color: '#94a3b8', font: { size: 10 }, maxRotation: 45, minRotation: 0 }
                            },
                            yRatio: {
                                type: 'linear',
                                display: true,
                                position: 'left',
                                grid: { color: 'rgba(42,49,67,0.8)', drawBorder: false },
                                ticks: { color: '#94a3b8', font: { size: 11 }, stepSize: 20 },
                                title: { display: true, text: 'Tỉ lệ hoàn thành (%)', color: '#64748b' },
                                min: 0,
                                max: 100
                            },
                            yScore: {
                                type: 'linear',
                                display: true,
                                position: 'right',
                                grid: { drawOnChartArea: false }, // Only draw grid for ratio
                                ticks: { color: '#8b5cf6', font: { size: 11 }, stepSize: 2 },
                                title: { display: true, text: 'Điểm trung bình (thang 10)', color: '#64748b' },
                                min: 0,
                                max: 10
                            }
                        }
                    }
                });

                if (typeof lucide !== 'undefined') lucide.createIcons();
            })
            .catch(e => {
                console.error('Error loading course detail:', e);
                const loadingEl = document.getElementById('course-detail-loading');
                if (loadingEl) loadingEl.innerHTML = '<span class="text-red-400">Lỗi khi tải dữ liệu</span>';
            });
    }

    // =============================================
    // 5. REGISTRATION STATUS
    // =============================================
    function loadRegistrationStatus() {
        fetch('{{ route("lcms-overview-report.registration-status") }}')
            .then(r => r.json())
            .then(res => {
                const loadingEl = document.getElementById('registration-loading');
                const wrapEl = document.getElementById('registration-wrap');
                if (!res.success || !res.data || !res.data.length) {
                    if (loadingEl) loadingEl.innerHTML = 'Không có dữ liệu';
                    return;
                }
                if (loadingEl) loadingEl.style.display = 'none';
                wrapEl.style.display = 'block';

                let html = '';
                res.data.forEach(row => {
                    const enrolled = parseInt(row.enrolled_count) || 0;
                    const finished = parseInt(row.finished_count) || 0;
                    const synced = parseInt(row.synced_count) || 0;

                    const syncRatio = enrolled > 0 ? (synced / enrolled) * 100 : 0;

                    html += `
                    <div class="p-3 rounded-lg bg-[#1a2030] border border-slate-800">
                        <div class="flex justify-between items-start mb-3">
                            <div class="text-sm font-medium text-slate-200 truncate pr-2 w-3/4">${row.course_name}</div>
                            <div class="text-[10px] text-slate-500 whitespace-nowrap">ID: ${row.course_id}</div>
                        </div>
                        <div class="flex justify-between text-xs mb-2">
                            <div class="text-center">
                                <div class="font-bold text-blue-400 text-sm">${enrolled.toLocaleString()}</div>
                                <div class="text-slate-400 text-[10px] uppercase mt-0.5">Đăng ký</div>
                            </div>
                            <div class="text-center">
                                <div class="font-bold text-emerald-400 text-sm">${finished.toLocaleString()}</div>
                                <div class="text-slate-400 text-[10px] uppercase mt-0.5">Kết thúc</div>
                            </div>
                            <div class="text-center">
                                <div class="font-bold text-green-400 text-sm">${synced.toLocaleString()}/${enrolled.toLocaleString()}</div>
                                <div class="text-slate-400 text-[10px] uppercase mt-0.5">Đã đồng bộ</div>
                            </div>
                        </div>
                        <!-- Progress bar -->
                        <div class="h-1.5 w-full bg-slate-800 rounded-full overflow-hidden mt-2">
                            <div class="h-full bg-indigo-500 rounded-full" style="width: ${syncRatio}%;"></div>
                        </div>
                    </div>
                `;
                });
                wrapEl.innerHTML = html;
            })
            .catch(e => {
                console.error('Error loading registration status:', e);
                const loadingEl = document.getElementById('registration-loading');
                if (loadingEl) loadingEl.innerHTML = '<span class="text-red-400">Lỗi khi tải dữ liệu</span>';
            });
    }

    // =============================================
    // 6. STUDENT STATISTICS
    // =============================================
    function loadStudentStatistics() {
        fetch('{{ route("lcms-overview-report.student-statistics") }}')
            .then(r => r.json())
            .then(res => {
                const loadingEl = document.getElementById('student-stats-loading');
                const wrapEl = document.getElementById('student-stats-wrap');
                if (!res.success || !res.data) {
                    if (loadingEl) loadingEl.innerHTML = 'Không có dữ liệu';
                    return;
                }
                if (loadingEl) loadingEl.style.display = 'none';
                wrapEl.style.display = 'flex';

                const d = res.data;
                document.getElementById('stat-lcms-students').textContent = parseInt(d.lcms_student_count || 0).toLocaleString();
                document.getElementById('stat-assignments').textContent = parseInt(d.total_assignments || 0).toLocaleString();
                document.getElementById('stat-has-score').textContent = parseInt(d.student_with_scores_count || 0).toLocaleString();
                document.getElementById('stat-no-score').textContent = parseInt(d.student_without_scores_count || 0).toLocaleString();

                document.getElementById('stat-unique-sections').textContent = parseInt(d.unique_sections_count || 0).toLocaleString();
                document.getElementById('stat-unique-students').textContent = parseInt(d.unique_students_count || 0).toLocaleString();

                const male = parseInt(d.male_count || 0);
                const female = parseInt(d.female_count || 0);
                const hidden = parseInt(d.unknown_gender_count || 0);
                const totalGen = male + female + hidden;

                const malePct = totalGen > 0 ? (male / totalGen) * 100 : 0;
                const femalePct = totalGen > 0 ? (female / totalGen) * 100 : 0;
                const hiddenPct = totalGen > 0 ? (hidden / totalGen) * 100 : 0;

                const genderHtml = `
                <div class="flex items-center text-xs">
                    <div class="w-24 text-slate-300">Male</div>
                    <div class="flex-1 mx-2">
                        <div class="h-1.5 w-full bg-slate-800 rounded-full overflow-hidden">
                            <div class="h-full bg-purple-500 rounded-full" style="width: ${malePct}%;"></div>
                        </div>
                    </div>
                    <div class="w-10 text-right text-slate-300 font-medium">${male.toLocaleString()}</div>
                </div>
                <div class="flex items-center text-xs">
                    <div class="w-24 text-slate-300">Không xác định</div>
                    <div class="flex-1 mx-2">
                        <div class="h-1.5 w-full bg-slate-800 rounded-full overflow-hidden">
                            <div class="h-full bg-purple-500 rounded-full" style="width: ${hiddenPct}%;"></div>
                        </div>
                    </div>
                    <div class="w-10 text-right text-slate-300 font-medium">${hidden.toLocaleString()}</div>
                </div>
                <div class="flex items-center text-xs">
                    <div class="w-24 text-slate-300">Female</div>
                    <div class="flex-1 mx-2">
                        <div class="h-1.5 w-full bg-slate-800 rounded-full overflow-hidden">
                            <div class="h-full bg-purple-500 rounded-full" style="width: ${femalePct}%;"></div>
                        </div>
                    </div>
                    <div class="w-10 text-right text-slate-300 font-medium">${female.toLocaleString()}</div>
                </div>
            `;
                document.getElementById('gender-distribution-wrap').innerHTML = genderHtml;
            })
            .catch(e => {
                console.error('Error loading student stats:', e);
                const loadingEl = document.getElementById('student-stats-loading');
                if (loadingEl) loadingEl.innerHTML = '<span class="text-red-400">Lỗi khi tải dữ liệu</span>';
            });
    }

    // =============================================
    // 7. TOP STUDENTS
    // =============================================
    function loadTopStudents() {
        fetch('{{ route("lcms-overview-report.top-students") }}')
            .then(r => r.json())
            .then(res => {
                const loadingEl = document.getElementById('top-students-loading');
                const wrapEl = document.getElementById('top-students-wrap');
                if (!res.success || !res.data || !res.data.length) {
                    if (loadingEl) loadingEl.innerHTML = 'Không có dữ liệu';
                    return;
                }
                if (loadingEl) loadingEl.style.display = 'none';
                wrapEl.style.display = 'block';

                let html = '';
                res.data.forEach((row, idx) => {
                    const rank = idx + 1;
                    let rankClass = 'bg-slate-800 text-slate-400';
                    if (rank === 1) rankClass = 'bg-[#fbbf24]/20 text-[#fbbf24] font-bold';
                    else if (rank === 2) rankClass = 'bg-slate-300/20 text-slate-300 font-bold';
                    else if (rank === 3) rankClass = 'bg-[#d97706]/20 text-[#d97706] font-bold';

                    html += `
                    <div class="flex items-center p-3 rounded-lg bg-[#1a2030] border border-slate-800">
                        <div class="flex-shrink-0 w-8 h-8 rounded-full ${rankClass} flex items-center justify-center text-xs mr-3">
                            ${rank}
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="text-sm font-medium text-slate-200 truncate">${row.student_name}</div>
                            <div class="text-[10px] text-slate-500 truncate mt-0.5">ID: ${row.student_id} • ${row.email}</div>
                            <div class="text-[10px] text-slate-400 mt-1">
                                Hoàn thành: ${row.completed_count}/${row.total_assigned} 
                                (${row.total_assigned > 0 ? ((row.completed_count / row.total_assigned) * 100).toFixed(2) : 0}%)
                            </div>
                        </div>
                        <div class="flex-shrink-0 text-right ml-3 text-emerald-400">
                            <div class="text-base font-bold">${row.average_score}</div>
                            <div class="text-[10px] text-slate-500 uppercase mt-0.5">Điểm TB</div>
                        </div>
                    </div>
                `;
                });
                wrapEl.innerHTML = html;
            })
            .catch(e => {
                console.error('Error loading top students:', e);
                const loadingEl = document.getElementById('top-students-loading');
                if (loadingEl) loadingEl.innerHTML = '<span class="text-red-400">Lỗi khi tải dữ liệu</span>';
            });
    }

    // =============================================
    // 8. WARNING STUDENTS
    // =============================================
    function loadWarningStudents() {
        fetch('{{ route("lcms-overview-report.warning-students") }}')
            .then(r => r.json())
            .then(res => {
                const loadingEl = document.getElementById('warning-students-loading');
                const wrapEl = document.getElementById('warning-students-wrap');
                if (!res.success || !res.data || !res.data.length) {
                    if (loadingEl) loadingEl.innerHTML = 'Không có dữ liệu';
                    return;
                }
                if (loadingEl) loadingEl.style.display = 'none';
                wrapEl.style.display = 'block';

                let html = '';
                res.data.forEach((row, idx) => {
                    const rank = idx + 1;
                    const rankClass = 'bg-red-500/20 text-red-500 font-bold';

                    html += `
                    <div class="flex items-center p-3 rounded-lg bg-[#1a2030] border border-slate-800">
                        <div class="flex-shrink-0 w-8 h-8 rounded-full ${rankClass} flex items-center justify-center text-xs mr-3">
                            ${rank}
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="text-sm font-medium text-slate-200 truncate">${row.student_name}</div>
                            <div class="text-[10px] text-slate-500 truncate mt-0.5">ID: ${row.student_id} • ${row.email}</div>
                            <div class="text-[10px] text-slate-400 mt-1">
                                Hoàn thành: ${row.total_completed_sections}/${row.total_assigned_sections}
                            </div>
                        </div>
                        <div class="flex-shrink-0 text-right ml-3 text-rose-500">
                            <div class="text-base font-bold">${row.completion_ratio}%</div>
                            <div class="text-[10px] text-slate-500 uppercase mt-0.5">Tỉ lệ HT</div>
                        </div>
                    </div>
                `;
                });
                wrapEl.innerHTML = html;
            })
            .catch(e => {
                console.error('Error loading warning students:', e);
                const loadingEl = document.getElementById('warning-students-loading');
                if (loadingEl) loadingEl.innerHTML = '<span class="text-red-400">Lỗi khi tải dữ liệu</span>';
            });
    }

    // =============================================
    // 9. STUDENT PROGRESS DETAIL (PAGINATED TABLE)
    // =============================================
    function loadStudentProgress(page = 1) {
        const tbody = document.getElementById('student-progress-tbody');
        const loadingEl = document.getElementById('student-progress-loading');
        const emptyEl = document.getElementById('student-progress-empty');
        const paginationEl = document.getElementById('student-progress-pagination');

        const params = new URLSearchParams({
            page: page,
            searchTerm: document.getElementById('sp-search').value,
            gender: document.getElementById('sp-gender').value,
            completion_min: document.getElementById('sp-completion-min').value,
            completion_max: document.getElementById('sp-completion-max').value,
            score_min: document.getElementById('sp-score-min').value,
            score_max: document.getElementById('sp-score-max').value,
        });

        tbody.innerHTML = '';
        loadingEl.style.display = 'flex';
        emptyEl.style.display = 'none';
        paginationEl.innerHTML = '';

        fetch("{{ route('lcms-overview-report.student-progress') }}", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: params.toString()
        })
            .then(r => r.json())
            .then(res => {
                loadingEl.style.display = 'none';
                if (!res.success || !res.data || !res.data.length) {
                    emptyEl.style.display = 'flex';
                    return;
                }

                let html = '';
                res.data.forEach(row => {
                    const genderIcon = row.stu_gender === 'Male' ? 'user' : (row.stu_gender === 'Female' ? 'user' : 'help-circle');
                    const genderColor = row.stu_gender === 'Male' ? 'text-blue-400' : (row.stu_gender === 'Female' ? 'text-pink-400' : 'text-slate-500');
                    
                    html += `
                        <tr class="hover:bg-[#1e2333]/80 transition-all border-b border-slate-800/50 group cursor-pointer" onclick="viewStudentDetails(${row.stu_id}, '${row.stu_name.replace(/'/g, "\\'")}', ${row.course_id})">
                            <td class="px-4 py-4 border-r border-slate-800/50">
                                <div class="flex items-center gap-3">
                                    <div class="w-8 h-8 rounded-full bg-slate-800 flex items-center justify-center border border-slate-700 group-hover:border-blue-500/50 transition-all">
                                        <i data-lucide="${genderIcon}" class="w-4 h-4 ${genderColor}"></i>
                                    </div>
                                    <div>
                                        <div class="text-sm font-bold text-slate-200 group-hover:text-blue-400 transition-all">${row.stu_name}</div>
                                        <div class="text-[10px] text-slate-500 font-medium">ID: ${row.stu_id} • Zeus: ${row.zeus_id || 'N/A'}</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-4 py-4 text-slate-300 border-r border-slate-800/50">
                                <span class="block max-w-[200px] truncate" title="${row.course_name}">${row.course_name}</span>
                            </td>
                            <td class="px-4 py-4 text-center border-r border-slate-800/50 bg-blue-500/5">
                                <div class="text-blue-400 font-bold">${parseFloat(row.btvn_ratio || 0).toFixed(2)}%</div>
                                <div class="text-[10px] text-blue-500/70">${row.btvn_completed}/${row.btvn_total} section</div>
                            </td>
                            <td class="px-4 py-4 text-center border-r border-slate-800/50 bg-blue-500/5 text-blue-200 font-medium">${row.btvn_avg_score || '-'}</td>
                            <td class="px-4 py-4 text-center border-r border-slate-800/50 bg-emerald-500/5">
                                <div class="text-emerald-400 font-bold">${parseFloat(row.bkt_ratio || 0).toFixed(2)}%</div>
                                <div class="text-[10px] text-emerald-500/70">${row.bkt_completed}/${row.bkt_total} section</div>
                            </td>
                            <td class="px-4 py-4 text-center bg-emerald-500/5 text-emerald-200 font-medium">${row.bkt_avg_score || '-'}</td>
                        </tr>
                    `;
                });
                tbody.innerHTML = html;
                if (typeof lucide !== 'undefined') lucide.createIcons({ nodes: [tbody] });

                renderPagination(res.pagination, paginationEl, loadStudentProgress);
            })
            .catch(e => {
                console.error('Error student progress:', e);
                loadingEl.style.display = 'none';
                emptyEl.style.display = 'flex';
            });
    }

    function renderPagination(p, container, loadFn) {
        if (p.last_page <= 1) return;
        let html = `
            <div class="text-xs text-slate-500">
                Hiển thị <span class="text-slate-300">${((p.current_page - 1) * p.per_page) + 1}</span> 
                đến <span class="text-slate-300">${Math.min(p.current_page * p.per_page, p.total)}</span> 
                trong <span class="text-slate-300">${p.total}</span> học viên
            </div>
            <div class="flex items-center gap-1">
        `;
        html += `<button onclick="${p.current_page > 1 ? `loadStudentProgress(${p.current_page - 1})` : ''}" 
                class="p-2 rounded-lg border border-slate-800 ${p.current_page > 1 ? 'hover:bg-slate-800 text-slate-300 cursor-pointer' : 'text-slate-600 cursor-not-allowed'} transition-all">
                <i data-lucide="chevron-left" class="w-4 h-4"></i></button>`;
        const start = Math.max(1, p.current_page - 2);
        const end = Math.min(p.last_page, p.current_page + 2);
        for (let i = start; i <= end; i++) {
            html += `<button onclick="loadStudentProgress(${i})" 
                    class="w-9 h-9 flex items-center justify-center rounded-lg border ${i === p.current_page ? 'bg-blue-600 border-blue-500 text-white font-bold shadow-lg shadow-blue-500/20' : 'border-slate-800 text-slate-400 hover:bg-slate-800 cursor-pointer'} transition-all">${i}</button>`;
        }
        html += `<button onclick="${p.current_page < p.last_page ? `loadStudentProgress(${p.current_page + 1})` : ''}" 
                class="p-2 rounded-lg border border-slate-800 ${p.current_page < p.last_page ? 'hover:bg-slate-800 text-slate-300 cursor-pointer' : 'text-slate-600 cursor-not-allowed'} transition-all">
                <i data-lucide="chevron-right" class="w-4 h-4"></i></button></div>`;
        container.innerHTML = html;
        if (typeof lucide !== 'undefined') lucide.createIcons({ nodes: [container] });
    }

    function viewStudentDetails(studentId, studentName) {
        alert('Chi tiết section cho ' + studentName + ' đang được phát triển...');
    }

    // =============================================
    // LOAD ALL + REFRESH
    // =============================================
    function loadAllCharts() {
        loadContentTypeChart();
        loadScoreHistogram();
        loadCompletionTrend();
        loadCourseDetail();
        loadRegistrationStatus();
        loadStudentStatistics();
        loadTopStudents();
        loadWarningStudents();
        loadStudentProgress();
    }

    function refreshAllData() {
        loadOverviewData();

        // Reset chart canvases
        ['contentTypeChart', 'scoreHistChart', 'completionTrendChart', 'courseDetailChart'].forEach(id => {
            const c = document.getElementById(id);
            if (c) c.style.display = 'none';
        });

        const wrap1 = document.getElementById('registration-wrap');
        if (wrap1) wrap1.style.display = 'none';
        const wrap2 = document.getElementById('student-stats-wrap');
        if (wrap2) wrap2.style.display = 'none';
        const wrap3 = document.getElementById('top-students-wrap');
        if (wrap3) wrap3.style.display = 'none';
        const wrap4 = document.getElementById('warning-students-wrap');
        if (wrap4) wrap4.style.display = 'none';

        const wrap5 = document.getElementById('student-progress-tbody');
        if (wrap5) wrap5.innerHTML = '';
        const empty5 = document.getElementById('student-progress-empty');
        if (empty5) empty5.style.display = 'none';
        const pagin5 = document.getElementById('student-progress-pagination');
        if (pagin5) pagin5.innerHTML = '';

        ['content-type-loading', 'score-hist-loading', 'trend-loading', 'course-detail-loading', 'registration-loading', 'student-stats-loading', 'top-students-loading', 'warning-students-loading', 'student-progress-loading'].forEach(id => {
            const el = document.getElementById(id);
            if (el) {
                el.style.display = 'flex';
                el.innerHTML = '<i data-lucide="loader" class="w-4 h-4 animate-spin"></i> Đang tải...';
                if (typeof lucide !== 'undefined') lucide.createIcons({ nodes: [el] });
            }
        });

        loadAllCharts();
    }

    document.addEventListener('DOMContentLoaded', function () {
        if (typeof lucide !== 'undefined') lucide.createIcons();
        loadOverviewData();
        loadAllCharts();

        const refreshBtn = document.getElementById('refresh-btn');
        if (refreshBtn) refreshBtn.addEventListener('click', refreshAllData);

        // Student Progress Search Listeners
        const spSearchBtn = document.getElementById('sp-search-btn');
        if (spSearchBtn) spSearchBtn.addEventListener('click', () => loadStudentProgress(1));
        
        const spClearBtn = document.getElementById('sp-clear-btn');
        if (spClearBtn) spClearBtn.addEventListener('click', () => {
            document.getElementById('sp-search').value = '';
            document.getElementById('sp-gender').value = '';
            document.getElementById('sp-completion-min').value = '';
            document.getElementById('sp-completion-max').value = '';
            document.getElementById('sp-score-min').value = '';
            document.getElementById('sp-score-max').value = '';
            loadStudentProgress(1);
        });

        // Enter key for search
        document.getElementById('sp-search').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') loadStudentProgress(1);
        });
    });
    // =============================================
    // 10. STUDENT PROGRESS DETAIL MODAL
    // =============================================
    function viewStudentDetails(studentId, studentName, courseId) {
        const modal = document.getElementById('student-detail-modal');
        const modalName = document.getElementById('modal-student-name');
        const modalInfo = document.getElementById('modal-student-info');
        const modalLoading = document.getElementById('modal-loading');
        const modalContent = document.getElementById('modal-content');
        const modalEmpty = document.getElementById('modal-empty');
        const tbody = document.getElementById('modal-detail-tbody');

        // Reset UI
        modalName.innerText = `Học viên: ${studentName}`;
        modalInfo.innerText = `ID: ${studentId} • Chi tiết bài học & Điểm quiz`;
        modalLoading.style.display = 'flex';
        modalContent.style.display = 'none';
        modalEmpty.style.display = 'none';
        tbody.innerHTML = '';

        // Open Modal
        modal.classList.remove('pointer-events-none', 'opacity-0');
        modal.querySelector('.transform').classList.remove('scale-95');
        modal.querySelector('.transform').classList.add('scale-100');

        // Fetch Data
        fetch("{{ route('lcms-overview-report.student-progress-detail') }}", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ stu_id: studentId, course_id: courseId })
        })
        .then(r => r.json())
        .then(res => {
            modalLoading.style.display = 'none';
            if (!res.success || !res.data || !res.data.length) {
                modalEmpty.style.display = 'flex';
                return;
            }

            modalContent.style.display = 'block';
            
            // Group activities by section
            const sections = {};
            res.data.forEach(row => {
                if (!sections[row.section_id]) {
                    sections[row.section_id] = {
                        name: row.section_name,
                        type: row.cou_section_type,
                        is_completed: row.is_section_completed,
                        total_required: row.total_required,
                        activities: []
                    };
                }
                sections[row.section_id].activities.push({
                    name: row.activity_name,
                    id: row.activity_id,
                    score: row.activity_score
                });
            });

            let html = '';
            Object.values(sections).forEach(sec => {
                const typeLabel = sec.type == 2 ? 'BTVN' : (sec.type == 3 ? 'BKT' : 'Khác');
                const typeColor = sec.type == 2 ? 'bg-blue-500/10 text-blue-400 border-blue-500/20' : 'bg-amber-500/10 text-amber-400 border-amber-500/20';
                
                const statusLabel = sec.is_completed == 1 ? 'Hoàn thành' : 'Chưa xong';
                const statusColor = sec.is_completed == 1 ? 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20' : 'bg-slate-500/10 text-slate-400 border-slate-500/20';
                
                // Calculate Section Average (Only if student has scores for ALL required quizzes)
                const completedActs = sec.activities.filter(a => a.score !== null && a.score !== '-1' && a.score !== '');
                const secAvg = (completedActs.length >= sec.total_required && sec.total_required > 0)
                    ? (completedActs.reduce((sum, a) => sum + parseFloat(a.score), 0) / sec.total_required).toFixed(2)
                    : null;
                const secAvgColor = secAvg !== null ? (parseFloat(secAvg) >= 8 ? 'text-emerald-400' : (parseFloat(secAvg) >= 5 ? 'text-amber-400' : 'text-rose-400')) : 'text-slate-500';

                // Section Header Row
                html += `
                    <tr class="bg-[#1e293b]/40 border-b border-slate-800/80">
                        <td class="px-4 py-3 font-bold text-slate-100 flex items-center gap-2">
                             <i data-lucide="folder" class="w-3.5 h-3.5 text-blue-400"></i>
                             ${sec.name}
                        </td>
                        <td class="px-4 py-3">
                            <span class="px-2 py-0.5 rounded text-[10px] font-bold border ${typeColor}">${typeLabel}</span>
                        </td>
                        <td class="px-4 py-3 text-center">
                            <span class="px-2 py-0.5 rounded text-[10px] font-bold border ${statusColor}">${statusLabel}</span>
                        </td>
                        <td class="px-4 py-3 text-right font-bold ${secAvgColor}">${secAvg !== null ? secAvg : '---'}</td>
                    </tr>
                `;

                // Activity Rows
                sec.activities.forEach(act => {
                    const actScore = (act.score !== null && act.score !== '-1' && act.score !== '') ? parseFloat(act.score).toFixed(2) : '---';
                    const actScoreColor = actScore !== '---' ? (parseFloat(actScore) >= 8 ? 'text-emerald-500/80' : (parseFloat(actScore) >= 5 ? 'text-amber-500/80' : 'text-rose-500/80')) : 'text-slate-600';
                    
                    html += `
                        <tr class="hover:bg-slate-800/20 transition-all border-b border-slate-800/30">
                            <td class="px-8 py-2 text-slate-400 text-xs italic flex items-center gap-2">
                                <i data-lucide="file-text" class="w-3 h-3 text-slate-500"></i>
                                ${act.name} <span class="text-[10px] opacity-50 ml-1">(ID: ${act.id})</span>
                            </td>
                            <td class="px-4 py-2 text-[10px] text-slate-500 italic">Quiz</td>
                            <td class="px-4 py-2"></td>
                            <td class="px-4 py-2 text-right text-xs font-medium ${actScoreColor}">${actScore}</td>
                        </tr>
                    `;
                });
            });
            tbody.innerHTML = html;
            if (typeof lucide !== 'undefined') lucide.createIcons({ nodes: [modal] });
        })
        .catch(e => {
            console.error('Error loading detail:', e);
            modalLoading.innerHTML = '<span class="text-rose-400 text-sm font-medium">Lỗi khi tải dữ liệu</span>';
        });
    }

    function closeStudentModal() {
        const modal = document.getElementById('student-detail-modal');
        modal.classList.add('pointer-events-none', 'opacity-0');
        modal.querySelector('.transform').classList.remove('scale-100');
        modal.querySelector('.transform').classList.add('scale-95');
    }
</script>
@endsection