@extends('layouts-v2.app')

@section('head')
<style>
    .custom-select-wrapper { position: relative; }
    .custom-select-dropdown { animation: fadeIn 0.2s ease-in-out; }
    @@keyframes fadeIn {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .custom-select-checkbox { width: 16px; height: 16px; cursor: pointer; }
    .custom-select-option-hidden { display: none !important; }
    .custom-select-icon.rotate { transform: rotate(180deg); }
    #selected-courses-tags { min-height: 2rem; }
    .course-tag {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
        border-radius: 0.375rem;
        background: #e0f2fe;
        color: #0369a1;
        margin: 0.125rem;
    }
    .course-tag-remove {
        cursor: pointer;
        opacity: 0.7;
        padding: 0 0.125rem;
    }
    .course-tag-remove:hover { opacity: 1; color: #b91c1c; }
    .dashboard-loading { color: #94a3b8; font-weight: 500; }
    #dashboard-loading-banner {
        display: none;
        margin-top: 1.5rem;
        padding: 0.75rem 1rem;
        background: #eff6ff;
        border: 1px solid #bfdbfe;
        border-radius: 0.75rem;
        color: #1d4ed8;
        font-size: 0.875rem;
    }
    #dashboard-loading-banner.is-visible { display: block; }
</style>
@endsection

@section('content')
<div class="flex justify-between items-end">
    <div>
        <nav class="flex text-sm text-slate-500 mb-2">
            <span class="hover:text-blue-600 cursor-pointer transition-colors">Trang chủ</span>
        </nav>
        <h1 class="text-3xl font-bold text-slate-900">Trang tổng quan</h1>
        <p class="text-slate-500 mt-1">Thống kê BTVN & nộp bài theo bộ lọc course và khoảng thời gian</p>
    </div>
</div>
@if($tenantConnection == 'lms_tenant_icc')
<!-- Filter Form - Áp dụng qua API, không reload trang -->
<div class="mt-6 bg-white p-6 rounded-xl shadow-sm border border-slate-100">
    <h3 class="text-lg font-bold text-slate-800 mb-4">Bộ lọc</h3>
    <form id="chart-filter-form">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="md:col-span-1">
                <label class="block text-sm font-medium text-slate-700 mb-2">Chọn course</label>
                <div class="custom-select-wrapper relative">
                    <div class="custom-select-input flex items-center justify-between px-4 py-2.5 bg-white border border-slate-300 rounded-lg cursor-pointer hover:border-blue-500 transition-colors" id="custom-select-trigger">
                        <span class="text-sm text-slate-600" id="custom-select-text">Chọn course</span>
                        <i data-lucide="chevron-down" class="w-4 h-4 text-slate-400 transition-transform shrink-0" id="custom-select-icon"></i>
                    </div>
                    <div id="selected-courses-tags" class="flex flex-wrap gap-1.5 mt-2 p-2 bg-slate-50 rounded-lg border border-slate-200 min-h-[2.5rem]">
                        @if(isset($filterCourseIds) && is_array($filterCourseIds) && count($filterCourseIds) > 0 && isset($allCourses))
                            @php $selectedCourses = $allCourses->whereIn('id', $filterCourseIds); @endphp
                            @foreach($selectedCourses as $c)
                                <span class="course-tag" data-course-id="{{ $c->id }}">
                                    <span class="course-tag-name">{{ $c->moodle_name ?? '' }}</span>
                                    <span class="course-tag-remove" title="Bỏ chọn" aria-label="Bỏ chọn">×</span>
                                </span>
                            @endforeach
                        @else
                            <span class="text-xs text-slate-400 self-center">Chưa chọn course (áp dụng tất cả)</span>
                        @endif
                    </div>
                    <div class="custom-select-dropdown hidden absolute z-50 w-full mt-1 bg-white border border-slate-300 rounded-lg shadow-lg max-h-60 overflow-hidden" id="custom-select-dropdown">
                        <div class="p-2 border-b border-slate-200">
                            <input type="text" id="custom-select-search" class="w-full px-3 py-2 text-sm border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Gõ để lọc danh sách...">
                        </div>
                        <div class="overflow-y-auto max-h-64" id="custom-select-options">
                            <div id="no-results-message" class="px-4 py-3 text-sm text-slate-500 text-center hidden">Không tìm thấy course nào.</div>
                            <div id="search-prompt" class="px-4 py-2 text-sm text-slate-500 text-center hidden">Gõ để lọc danh sách bên dưới</div>
                            <label class="flex items-center px-4 py-2 hover:bg-slate-50 cursor-pointer border-b border-slate-100 sticky top-0 bg-white z-10" id="select-all-label">
                                <input type="checkbox" class="custom-select-checkbox mr-2" value="all" id="select-all-courses">
                                <span class="text-sm font-medium text-slate-700">Chọn tất cả</span>
                            </label>
                            @if(isset($allCourses) && $allCourses->count() > 0)
                                @foreach($allCourses as $course)
                                    <label class="flex items-center px-4 py-2 hover:bg-slate-50 cursor-pointer course-option"
                                        data-course-name="{{ strtolower($course->moodle_name ?? '') }}"
                                        data-course-id="{{ $course->id }}">
                                        <input type="checkbox" name="filter_courses[]" class="custom-select-checkbox mr-2 course-checkbox" value="{{ $course->id }}"
                                            {{ (isset($filterCourseIds) && is_array($filterCourseIds) && in_array($course->id, $filterCourseIds)) ? 'checked' : '' }}>
                                        <span class="text-sm text-slate-700">{{ $course->moodle_name ?? '' }}</span>
                                    </label>
                                @endforeach
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <label for="filter-date-from" class="block text-sm font-medium text-slate-700 mb-2">Từ ngày</label>
                <input type="date" id="filter-date-from" name="filter_date_from"
                    value="{{ $filterDateFrom ?? date('Y-m-01') }}"
                    class="w-full px-4 py-2.5 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
            </div>
            <div>
                <label for="filter-date-to" class="block text-sm font-medium text-slate-700 mb-2">Đến ngày</label>
                <input type="date" id="filter-date-to" name="filter_date_to"
                    value="{{ $filterDateTo ?? date('Y-m-d') }}"
                    class="w-full px-4 py-2.5 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
            </div>
        </div>
        <div class="flex gap-3 mt-4">
            <button type="button" id="apply-filter-btn" class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors shadow-sm">Áp dụng filter</button>
            <button type="button" id="reset-filter" class="px-4 py-2 bg-slate-100 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-200 transition-colors">Reset</button>
        </div>
    </form>
</div>

<div id="dashboard-loading-banner" class="is-visible" role="status" aria-live="polite">Đang tải dữ liệu thống kê...</div>

<!-- Stats Grid - 7 chỉ số theo plan -->
<div id="dashboard-stats" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mt-6">
    <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition-shadow">
        <div class="flex justify-between items-start">
            <div>
                <p class="text-sm font-medium text-slate-500">Số lượt làm bài (đã nộp)</p>
                <h3 id="stat-total-attempts" class="text-2xl font-bold text-slate-800 mt-2 dashboard-loading">—</h3>
            </div>
            <div class="p-3 rounded-lg bg-blue-600/10 text-blue-600">
                <i data-lucide="file-check" class="w-6 h-6"></i>
            </div>
        </div>
    </div>

    <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition-shadow">
        <div class="flex justify-between items-start">
            <div>
                <p class="text-sm font-medium text-slate-500">Số user nộp bài (unique)</p>
                <h3 id="stat-unique-users" class="text-2xl font-bold text-slate-800 mt-2 dashboard-loading">—</h3>
            </div>
            <div class="p-3 rounded-lg bg-purple-600/10 text-purple-600">
                <i data-lucide="users" class="w-6 h-6"></i>
            </div>
        </div>
    </div>

    <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition-shadow">
        <div class="flex justify-between items-start">
            <div>
                <p class="text-sm font-medium text-slate-500">Bài làm bỏ dở (chưa nộp)</p>
                <h3 id="stat-started-not-submitted" class="text-2xl font-bold text-slate-800 mt-2 dashboard-loading">—</h3>
            </div>
            <div class="p-3 rounded-lg bg-amber-500/10 text-amber-500">
                <i data-lucide="clock" class="w-6 h-6"></i>
            </div>
        </div>
    </div>

    <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition-shadow">
        <div class="flex justify-between items-start">
            <div>
                <p class="text-sm font-medium text-slate-500">Tỷ lệ học viên làm BTVN</p>
                <h3 id="stat-homework-rate" class="text-2xl font-bold text-slate-800 mt-2 dashboard-loading">—</h3>
                <p id="stat-homework-detail" class="text-xs text-slate-400 mt-1"></p>
            </div>
            <div class="p-3 rounded-lg bg-emerald-600/10 text-emerald-600">
                <i data-lucide="percent" class="w-6 h-6"></i>
            </div>
        </div>
    </div>

    <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition-shadow">
        <div class="flex justify-between items-start">
            <div>
                <p class="text-sm font-medium text-slate-500">Thời gian TB làm BTVN</p>
                <h3 id="stat-avg-time" class="text-2xl font-bold text-slate-800 mt-2 dashboard-loading">—</h3>
                <p id="stat-avg-time-detail" class="text-xs text-slate-400 mt-1"></p>
            </div>
            <div class="p-3 rounded-lg bg-cyan-600/10 text-cyan-600">
                <i data-lucide="timer" class="w-6 h-6"></i>
            </div>
        </div>
    </div>
</div>

<!-- Bảng: Tỷ lệ fail theo từng course (5) - Luôn hiển thị -->
<div class="mt-6 bg-white p-6 rounded-xl shadow-sm border border-slate-100">
    <h3 class="text-lg font-bold text-slate-800 mb-4">Tỷ lệ phải làm lại / bị fail theo course</h3>
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-slate-200">
            <thead class="bg-slate-50">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Course</th>
                    <th class="px-4 py-3 text-right text-xs font-medium text-slate-500 uppercase tracking-wider">Tổng lượt</th>
                    <th class="px-4 py-3 text-right text-xs font-medium text-slate-500 uppercase tracking-wider">Đạt</th>
                    <th class="px-4 py-3 text-right text-xs font-medium text-slate-500 uppercase tracking-wider">Fail</th>
                    <th class="px-4 py-3 text-right text-xs font-medium text-slate-500 uppercase tracking-wider">% Đạt</th>
                    <th class="px-4 py-3 text-right text-xs font-medium text-slate-500 uppercase tracking-wider">% Fail</th>
                </tr>
            </thead>
            <tbody id="failure-rate-tbody" class="bg-white divide-y divide-slate-200">
                <tr>
                    <td colspan="6" class="px-4 py-8 text-center text-slate-400 text-sm">Đang tải dữ liệu...</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<!-- Số lượt nộp theo từng khóa (3) + Chart - Luôn hiển thị -->
<div class="mt-6 bg-white p-6 rounded-xl shadow-sm border border-slate-100">
    <h3 class="text-lg font-bold text-slate-800 mb-4">Số lượng nộp bài theo khóa học</h3>
    <div id="submits-chart-wrap" class="h-80 w-full relative">
        <canvas id="submitsByCourseChart"></canvas>
    </div>
    <div class="overflow-x-auto mt-4">
        <table class="min-w-full divide-y divide-slate-200">
            <thead class="bg-slate-50">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Course</th>
                    <th class="px-4 py-3 text-right text-xs font-medium text-slate-500 uppercase tracking-wider">Số lượt nộp</th>
                </tr>
            </thead>
            <tbody id="submits-table-tbody" class="bg-white divide-y divide-slate-200">
                <tr>
                    <td colspan="2" class="px-4 py-8 text-center text-slate-400 text-sm">Đang tải dữ liệu...</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
@endif
@endsection

@section('scripts')
<script>
var dashboardChartInstance = null;

function renderSubmitsChart(labels, data) {
    var wrap = document.getElementById('submits-chart-wrap');
    if (!wrap) return;
    var canvas = document.getElementById('submitsByCourseChart');
    if (!canvas || typeof Chart === 'undefined') return;
    if (dashboardChartInstance) {
        dashboardChartInstance.destroy();
        dashboardChartInstance = null;
    }
    var ctx = canvas.getContext('2d');
    var gradientSubmits = ctx.createLinearGradient(0, 0, 0, 400);
    gradientSubmits.addColorStop(0, 'rgba(59, 130, 246, 0.8)');
    gradientSubmits.addColorStop(1, 'rgba(59, 130, 246, 0.2)');
    dashboardChartInstance = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{ label: 'Số lượt nộp', data: data, backgroundColor: gradientSubmits, borderColor: '#3b82f6', borderWidth: 2, borderRadius: 6, barThickness: 40 }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: true, position: 'top' },
                tooltip: { callbacks: { label: function(c) { return 'Số lượt: ' + c.parsed.y.toLocaleString('vi-VN'); } } }
            },
            scales: {
                x: { grid: { display: false }, ticks: { color: '#94a3b8', maxRotation: 45, minRotation: 45 } },
                y: { grid: { color: '#f1f5f9' }, ticks: { color: '#94a3b8', callback: function(v) { return v.toLocaleString('vi-VN'); } }, beginAtZero: true }
            }
        }
    });
}

function updateDashboardFromData(d) {
    var data = d.data || d;
    ['stat-total-attempts', 'stat-unique-users', 'stat-started-not-submitted', 'stat-homework-rate', 'stat-avg-time'].forEach(function(id) {
        var node = document.getElementById(id);
        if (node) node.classList.remove('dashboard-loading');
    });
    var el = document.getElementById('stat-total-attempts');
    if (el) el.textContent = (data.total_attempts || 0).toLocaleString('vi-VN');
    el = document.getElementById('stat-unique-users');
    if (el) el.textContent = (data.total_unique_users || 0).toLocaleString('vi-VN');
    el = document.getElementById('stat-started-not-submitted');
    if (el) el.textContent = (data.total_started_not_submitted || 0).toLocaleString('vi-VN');
    var hr = data.homework_completion_rate || {};
    el = document.getElementById('stat-homework-rate');
    if (el) el.textContent = (hr.completion_rate_percentage != null ? Number(hr.completion_rate_percentage).toFixed(1) : '0') + '%';
    el = document.getElementById('stat-homework-detail');
    if (el) el.textContent = (hr.total_users_assigned > 0) ? (hr.users_completed_homework || 0).toLocaleString('vi-VN') + '/' + (hr.total_users_assigned || 0).toLocaleString('vi-VN') + ' user' : '';
    var at = data.average_time_btvn || {};
    el = document.getElementById('stat-avg-time');
    if (el) el.textContent = at.average_time_formatted || '0 phút 0 giây';
    el = document.getElementById('stat-avg-time-detail');
    if (el) el.textContent = (at.total_attempts > 0) ? (at.total_attempts || 0).toLocaleString('vi-VN') + ' lượt · ' + (at.total_students || 0).toLocaleString('vi-VN') + ' học viên' : '';
    var failure = data.failure_rate_by_course || [];
    var tbody = document.getElementById('failure-rate-tbody');
    if (tbody) {
        if (failure.length === 0) {
            tbody.innerHTML = '<tr><td colspan="6" class="px-4 py-8 text-center text-slate-400 text-sm">Không có dữ liệu theo bộ lọc đã chọn</td></tr>';
        } else {
            tbody.innerHTML = failure.map(function(row) {
                return '<tr><td class="px-4 py-3 text-sm text-slate-900">' + (row.course_name || '') + '</td><td class="px-4 py-3 text-sm text-slate-900 text-right">' + (row.total_attempts || 0).toLocaleString('vi-VN') + '</td><td class="px-4 py-3 text-sm text-slate-900 text-right">' + (row.passed_attempts || 0).toLocaleString('vi-VN') + '</td><td class="px-4 py-3 text-sm text-slate-900 text-right">' + (row.failed_attempts || 0).toLocaleString('vi-VN') + '</td><td class="px-4 py-3 text-sm font-medium text-emerald-600 text-right">' + (row.pass_rate_percentage != null ? Number(row.pass_rate_percentage).toFixed(1) : '0') + '%</td><td class="px-4 py-3 text-sm font-medium text-red-600 text-right">' + (row.failure_rate_percentage != null ? Number(row.failure_rate_percentage).toFixed(1) : '0') + '%</td></tr>';
            }).join('');
        }
    }
    var submits = data.submits_by_course || [];
    var stbody = document.getElementById('submits-table-tbody');
    if (stbody) {
        if (submits.length === 0) {
            stbody.innerHTML = '<tr><td colspan="2" class="px-4 py-8 text-center text-slate-400 text-sm">Không có dữ liệu</td></tr>';
        } else {
            stbody.innerHTML = submits.map(function(row) {
                return '<tr><td class="px-4 py-3 text-sm text-slate-900">' + (row.course_name || '') + '</td><td class="px-4 py-3 text-sm text-slate-900 text-right">' + (row.total_submits || 0).toLocaleString('vi-VN') + '</td></tr>';
            }).join('');
        }
    }
    var labels = submits.map(function(r) { return r.course_name || ''; });
    var submitData = submits.map(function(r) { return r.total_submits || 0; });
    renderSubmitsChart(labels, submitData);
}

$(document).ready(function() {
    if (typeof lucide !== 'undefined') lucide.createIcons();

    var selectedTagsEl = document.getElementById('selected-courses-tags');
    function renderSelectedTags() {
        if (!selectedTagsEl) return;
        refreshCourseOptions();
        var selected = Array.from(window.courseCheckboxes || []).filter(function(cb) { return cb.checked; });
        selectedTagsEl.innerHTML = '';
        if (selected.length === 0) {
            selectedTagsEl.innerHTML = '<span class="text-xs text-slate-400 self-center">Chưa chọn course (áp dụng tất cả)</span>';
            return;
        }
        selected.forEach(function(cb) {
            var opt = cb.closest('.course-option');
            var name = opt ? opt.querySelector('.text-sm.text-slate-700') : null;
            var nameText = name ? name.textContent : ('ID ' + cb.value);
            var tag = document.createElement('span');
            tag.className = 'course-tag';
            tag.setAttribute('data-course-id', cb.value);
            var nameSpan = document.createElement('span');
            nameSpan.className = 'course-tag-name';
            nameSpan.textContent = nameText;
            var removeSpan = document.createElement('span');
            removeSpan.className = 'course-tag-remove';
            removeSpan.setAttribute('title', 'Bỏ chọn');
            removeSpan.setAttribute('aria-label', 'Bỏ chọn');
            removeSpan.textContent = '×';
            tag.appendChild(nameSpan);
            tag.appendChild(document.createTextNode(' '));
            tag.appendChild(removeSpan);
            removeSpan.addEventListener('click', function(ev) {
                ev.preventDefault();
                ev.stopPropagation();
                cb.checked = false;
                if (selectAllCheckbox) selectAllCheckbox.checked = false;
                renderSelectedTags();
                updateSelectText();
            });
            selectedTagsEl.appendChild(tag);
        });
    }

    // Custom select
    const customSelectTrigger = document.getElementById('custom-select-trigger');
    const customSelectDropdown = document.getElementById('custom-select-dropdown');
    const customSelectSearch = document.getElementById('custom-select-search');
    const customSelectText = document.getElementById('custom-select-text');
    const customSelectIcon = document.getElementById('custom-select-icon');
    const selectAllCheckbox = document.getElementById('select-all-courses');
    const customSelectOptions = document.getElementById('custom-select-options');

    function refreshCourseOptions() {
        window.courseOptions = document.querySelectorAll('.course-option');
        window.courseCheckboxes = document.querySelectorAll('.course-option input[type="checkbox"]');
    }
    refreshCourseOptions();

    function updateSelectText() {
        refreshCourseOptions();
        var selected = Array.from(window.courseCheckboxes || []).filter(function(cb) { return cb.checked; });
        if (selected.length === 0) {
            customSelectText.textContent = 'Chọn course';
        } else if (selected.length === 1) {
            var option = selected[0].closest('.course-option');
            customSelectText.textContent = option ? option.querySelector('span').textContent : '1 course đã chọn';
        } else {
            customSelectText.textContent = selected.length + ' courses đã chọn';
        }
        if (typeof renderSelectedTags === 'function') renderSelectedTags();
    }

    if (customSelectTrigger && customSelectDropdown) {
        customSelectTrigger.addEventListener('click', function(e) {
            e.stopPropagation();
            const isHidden = customSelectDropdown.classList.contains('hidden');
            customSelectDropdown.classList.toggle('hidden', !isHidden);
            if (customSelectIcon) customSelectIcon.classList.toggle('rotate', !isHidden);
            if (!isHidden && customSelectSearch) customSelectSearch.focus();
        });
        document.addEventListener('click', function(e) {
            if (!customSelectTrigger.contains(e.target) && !customSelectDropdown.contains(e.target)) {
                customSelectDropdown.classList.add('hidden');
                if (customSelectIcon) customSelectIcon.classList.remove('rotate');
            }
        });

        if (customSelectSearch) {
            var searchTimeout;
            customSelectSearch.addEventListener('input', function(e) {
                var searchTerm = e.target.value.trim();
                clearTimeout(searchTimeout);

                if (searchTerm.length === 0) {
                    refreshCourseOptions();
                    (window.courseOptions || []).forEach(function(o) { o.classList.remove('hidden'); });
                    document.getElementById('no-results-message').classList.add('hidden');
                    var prompt = document.getElementById('search-prompt');
                    if (prompt) prompt.classList.add('hidden');
                    updateSelectText();
                    return;
                }

                searchTimeout = setTimeout(function() {
                    var noRes = document.getElementById('no-results-message');
                    var prompt = document.getElementById('search-prompt');
                    if (prompt) prompt.classList.add('hidden');
                    noRes.textContent = 'Đang tìm...';
                    noRes.classList.remove('hidden');
                    refreshCourseOptions();
                    (window.courseOptions || []).forEach(function(o) { o.classList.add('hidden'); });

                    fetch('/api/courses/search?q=' + encodeURIComponent(searchTerm) + '&limit=50')
                        .then(function(r) { return r.json(); })
                        .then(function(data) {
                            refreshCourseOptions();
                            var selectedIds = Array.from(window.courseCheckboxes || []).filter(function(cb) { return cb.checked; }).map(function(cb) { return cb.value; });
                            (window.courseOptions || []).forEach(function(o) { o.classList.add('hidden'); });

                            if (data.success && data.data && data.data.length > 0) {
                                data.data.forEach(function(course) {
                                    refreshCourseOptions();
                                    var existing = null;
                                    (window.courseOptions || []).forEach(function(opt) {
                                        if (opt.getAttribute('data-course-id') == course.id) existing = opt;
                                    });
                                    if (!existing) {
                                        var label = document.createElement('label');
                                        label.className = 'flex items-center px-4 py-2 hover:bg-slate-50 cursor-pointer course-option';
                                        label.setAttribute('data-course-name', (course.moodle_name || '').toLowerCase());
                                        label.setAttribute('data-course-id', course.id);
                                        var checkbox = document.createElement('input');
                                        checkbox.type = 'checkbox';
                                        checkbox.name = 'filter_courses[]';
                                        checkbox.className = 'custom-select-checkbox mr-2 course-checkbox';
                                        checkbox.value = course.id;
                                        if (selectedIds.indexOf(String(course.id)) >= 0) checkbox.checked = true;
                                        var span = document.createElement('span');
                                        span.className = 'text-sm text-slate-700';
                                        span.textContent = course.moodle_name || '';
                                        label.appendChild(checkbox);
                                        label.appendChild(span);
                                        customSelectOptions.appendChild(label);
                                    } else {
                                        existing.classList.remove('hidden');
                                        var cb = existing.querySelector('input.course-checkbox');
                                        if (cb && selectedIds.indexOf(String(course.id)) >= 0) cb.checked = true;
                                    }
                                });
                                refreshCourseOptions();
                                noRes.classList.add('hidden');
                            } else {
                                noRes.textContent = 'Không tìm thấy course nào.';
                                noRes.classList.remove('hidden');
                            }
                            updateSelectText();
                        })
                        .catch(function() {
                            var noRes = document.getElementById('no-results-message');
                            noRes.textContent = 'Có lỗi khi tìm kiếm. Vui lòng thử lại.';
                            noRes.classList.remove('hidden');
                        });
                }, 300);
            });
        }

        if (selectAllCheckbox) {
            selectAllCheckbox.addEventListener('change', function(e) {
                var isChecked = e.target.checked;
                refreshCourseOptions();
                (window.courseOptions || []).forEach(function(opt) {
                    if (!opt.classList.contains('hidden')) {
                        var cb = opt.querySelector('input.course-checkbox');
                        if (cb) cb.checked = isChecked;
                    }
                });
                updateSelectText();
            });
        }

        if (customSelectOptions) {
            customSelectOptions.addEventListener('change', function(e) {
                if (e.target.type === 'checkbox' && e.target.value !== 'all') {
                    refreshCourseOptions();
                    updateSelectText();
                    if (!e.target.checked && selectAllCheckbox) selectAllCheckbox.checked = false;
                    if (selectAllCheckbox && e.target.checked) {
                        var visible = document.querySelectorAll('.course-option:not(.hidden)');
                        var visibleChecked = document.querySelectorAll('.course-option:not(.hidden) input.course-checkbox:checked');
                        selectAllCheckbox.checked = (visible.length > 0 && visibleChecked.length === visible.length);
                    }
                }
            });
        }

        updateSelectText();
    }

    function buildDashboardQueryString() {
        refreshCourseOptions();
        var courseIds = Array.from(window.courseCheckboxes || []).filter(function(cb) { return cb.checked; }).map(function(cb) { return cb.value; });
        var dateFrom = document.getElementById('filter-date-from').value || '{{ date("Y-m-01") }}';
        var dateTo = document.getElementById('filter-date-to').value || '{{ date("Y-m-d") }}';
        var params = new URLSearchParams();
        courseIds.forEach(function(id) { params.append('filter_courses[]', id); });
        params.set('filter_date_from', dateFrom);
        params.set('filter_date_to', dateTo);
        return params.toString();
    }

    function setDashboardLoading(isLoading, errorMessage) {
        var banner = document.getElementById('dashboard-loading-banner');
        var btn = document.getElementById('apply-filter-btn');
        var resetBtn = document.getElementById('reset-filter');
        if (banner) {
            if (isLoading) {
                banner.textContent = 'Đang tải dữ liệu thống kê...';
                banner.classList.add('is-visible');
            } else if (errorMessage) {
                banner.textContent = errorMessage;
                banner.classList.add('is-visible');
            } else {
                banner.classList.remove('is-visible');
            }
        }
        if (btn) {
            btn.disabled = !!isLoading;
            btn.textContent = isLoading ? 'Đang tải...' : 'Áp dụng filter';
        }
        if (resetBtn) resetBtn.disabled = !!isLoading;
    }

    function loadDashboardData(queryString) {
        var url = '{{ url("/dashboard/data") }}' + (queryString ? '?' + queryString : '');
        setDashboardLoading(true);
        fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' } })
            .then(function(r) { return r.json(); })
            .then(function(res) {
                if (res.success && res.data) {
                    updateDashboardFromData(res);
                    setDashboardLoading(false);
                } else {
                    setDashboardLoading(false, res.message || 'Không tải được dữ liệu dashboard');
                }
            })
            .catch(function() {
                setDashboardLoading(false, 'Lỗi tải dữ liệu dashboard');
                console.error('Lỗi tải dữ liệu dashboard');
            });
    }

    function updateUrlFromFilter() {
        var qs = buildDashboardQueryString();
        var url = window.location.pathname + (qs ? '?' + qs : '');
        if (window.history && window.history.replaceState) window.history.replaceState({}, '', url);
    }

    document.getElementById('apply-filter-btn') && document.getElementById('apply-filter-btn').addEventListener('click', function() {
        var qs = buildDashboardQueryString();
        loadDashboardData(qs);
        updateUrlFromFilter();
    });

    document.getElementById('reset-filter') && document.getElementById('reset-filter').addEventListener('click', function() {
        refreshCourseOptions();
        (window.courseCheckboxes || []).forEach(function(cb) { cb.checked = false; });
        if (selectAllCheckbox) selectAllCheckbox.checked = false;
        document.getElementById('filter-date-from').value = '{{ date("Y-m-01") }}';
        document.getElementById('filter-date-to').value = '{{ date("Y-m-d") }}';
        updateSelectText();
        renderSelectedTags();
        var qs = buildDashboardQueryString();
        loadDashboardData(qs);
        updateUrlFromFilter();
    });

    renderSelectedTags();

    // First paint: shell only; load metrics via API
    if (document.getElementById('dashboard-stats')) {
        loadDashboardData(buildDashboardQueryString());
    }
});
</script>
@endsection