@extends('layouts.app')

@section('content')
    <div class="flex-1 space-y-8">
        <div class="flex items-center gap-2 text-slate-500 text-sm mb-2 font-medium">
            <a href="{{ route('dashboard') }}" class="hover:text-indigo-600 cursor-pointer transition-colors">Trang chủ</a>
            <i data-lucide="chevron-right" class="w-4 h-4"></i>
            <span class="text-slate-800">Danh sách học sinh làm bài</span>
        </div>
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <div>
                <h1 class="text-3xl font-bold text-slate-900 mb-2 flex items-center gap-3">
                    <div class="p-2 bg-indigo-50 rounded-md">
                        <i data-lucide="users" class="w-7 h-7 text-indigo-600"></i>
                    </div>
                    Danh sách học sinh làm bài
                </h1>
                <p class="text-slate-500 text-sm">Quản lý thông tin học sinh, bài thi và trạng thái chấm điểm.</p>
            </div>
            <button type="button" onclick="exportExcel()"
                class="inline-flex items-center gap-2 px-5 py-2.5 bg-emerald-600 text-white rounded-md text-sm font-medium hover:bg-emerald-700 transition-colors shadow-sm focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
                <i data-lucide="file-spreadsheet" class="w-4 h-4"></i>
                Xuất Excel
            </button>
        </div>

        <div class="bg-white rounded-md shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-slate-200 p-8">
            <form method="GET" action="{{ route('student-exam-history.index') }}" id="filterForm"
                class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 items-end">

                <div>
                    <label for="exam_id" class="block text-sm font-semibold text-slate-700 mb-2">Đề thi</label>
                    <select
                        class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-md text-sm focus:bg-white focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 outline-none transition-all"
                        id="exam_id" name="exam_id">
                        <option value="">Tất cả đề thi</option>
                        @foreach($exams as $exam)
                            <option value="{{ $exam->id }}">
                                {{ $exam->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label for="campaign_id" class="block text-sm font-semibold text-slate-700 mb-2">Chiến dịch</label>
                    <select
                        class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-md text-sm focus:bg-white focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 outline-none transition-all"
                        id="campaign_id" name="campaign_id">
                        <option value="">Tất cả campaign</option>
                        @foreach($campaigns as $campaign)
                            <option value="{{ $campaign['id'] }}">
                                {{ $campaign['name'] }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <!-- <div>
                    <label for="is_completed" class="block text-sm font-semibold text-slate-700 mb-2">Trạng thái hoàn
                        thành</label>
                    <select
                        class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-md text-sm focus:bg-white focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 outline-none transition-all"
                        id="is_completed" name="is_completed">
                        <option value="">Tất cả</option>
                        <option value="0">Chưa hoàn thành</option>
                        <option value="1">Hoàn thành</option>
                    </select>
                </div> -->

                <div>
                    <label for="grade_type" class="block text-sm font-semibold text-slate-700 mb-2">Loại chấm điểm</label>
                    <select
                        class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-md text-sm focus:bg-white focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 outline-none transition-all"
                        id="grade_type" name="grade_type">
                        <option value="">Tất cả</option>
                        <option value="1">AI</option>
                        <option value="2">Manual</option>
                    </select>
                </div>

                <div>
                    <label for="status" class="block text-sm font-semibold text-slate-700 mb-2">Trạng thái thi</label>
                    <select
                        class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-md text-sm focus:bg-white focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 outline-none transition-all"
                        id="status" name="status">
                        <option value="">Tất cả</option>
                        <option value="chua_hoan_thanh">Chưa hoàn thành</option>
                        <option value="da_lam_bai">Đã làm bài</option>
                        <option value="bat_thuong">Bất thường</option>
                    </select>
                </div>

                <div>
                    <label for="date_from" class="block text-sm font-semibold text-slate-700 mb-2">Từ ngày</label>
                    <input type="date" id="date_from" name="date_from"
                        class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-md text-sm focus:bg-white focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 outline-none transition-all">
                </div>

                <div>
                    <label for="date_to" class="block text-sm font-semibold text-slate-700 mb-2">Đến ngày</label>
                    <input type="date" id="date_to" name="date_to"
                        class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-md text-sm focus:bg-white focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 outline-none transition-all">
                </div>

                <div class="hidden grid grid-cols-2 gap-2">
                    <div>
                        <label for="tab_switch_count_min" class="block text-sm font-semibold text-slate-700 mb-2">Tab switch từ</label>
                        <input type="number" id="tab_switch_count_min" name="tab_switch_count_min" min="0" placeholder="Min"
                            class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-md text-sm focus:bg-white focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 outline-none transition-all">
                    </div>
                    <div>
                        <label for="tab_switch_count_max" class="block text-sm font-semibold text-slate-700 mb-2">đến</label>
                        <input type="number" id="tab_switch_count_max" name="tab_switch_count_max" min="0" placeholder="Max"
                            class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-md text-sm focus:bg-white focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 outline-none transition-all">
                    </div>
                </div>

                <div class="sm:col-span-2 lg:col-span-3 xl:col-span-4 flex flex-col sm:flex-row items-center gap-4 mt-2">
                    <div>
                        <button type="submit"
                            class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-6 py-2.5 bg-indigo-600 text-white rounded-md text-sm font-medium hover:bg-indigo-700 transition-colors shadow-sm focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                            <i data-lucide="filter" class="w-4 h-4"></i>
                            Lọc dữ liệu
                        </button>
                        @if(request()->hasAny(['open_score_id', 'exam_id', 'date_from', 'date_to', 'is_completed']) || (request()->has('campaign_id') && !empty(request('campaign_id'))) )
                            <a href="{{ route('student-exam-history.index') }}" 
                               class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-5 py-2.5 bg-slate-100 text-slate-600 rounded-md text-sm font-medium hover:bg-slate-200 transition-colors">
                                <i data-lucide="x" class="w-4 h-4"></i>
                                Xóa lọc
                            </a>
                        @endif
                    </div>
                    @if(request('open_score_id'))
                        <span class="inline-flex items-center gap-2 px-3.5 py-2 rounded-md bg-amber-50 text-amber-700 text-xs font-semibold border border-amber-200 shadow-sm">
                            <span class="w-2 h-2 rounded-full bg-amber-500 animate-pulse"></span>
                            Đang lọc chi tiết một bài thi từ thông báo
                        </span>
                        <input type="hidden" name="open_score_id" value="{{ request('open_score_id') }}">
                    @endif
                </div>
            </form>
        </div>

        <div class="relative w-48">
            <select id="per_page" name="per_page"
                class="peer block w-full appearance-none rounded-md border border-slate-200 bg-white px-4 pb-2 pt-6 text-sm text-slate-800 shadow-sm transition-all focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 cursor-pointer">
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select>

            <label for="per_page"
                class="pointer-events-none absolute left-4 top-2 z-10 origin-left -translate-y-0.5 scale-90 transform text-xs font-semibold text-slate-500 transition-all duration-200 peer-focus:text-indigo-600">
                Số bản ghi / trang
            </label>

            <div
                class="pointer-events-none absolute right-4 top-1/2 z-10 -translate-y-1/2 text-slate-500 transition-transform duration-300 peer-focus:-rotate-180 peer-focus:text-indigo-600">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
                    stroke="currentColor" class="h-4 w-4">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                </svg>
            </div>
        </div>

        <div class="bg-white rounded-md shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-slate-200 overflow-hidden">
            <div class="px-6 py-5 border-t border-slate-200 bg-white meta-pagination"></div>
            <div id="student-exam-history-table-container" class="overflow-x-auto">
                <table class="min-w-max w-full divide-y divide-slate-200">
                    <thead class="bg-slate-50/80 border-b border-slate-200">
                        <tr>
                            <th
                                class="px-5 py-4 text-left text-xs font-bold text-slate-700 uppercase tracking-wider min-w-[80px] whitespace-nowrap">
                                ID</th>
                            <th
                                class="px-5 py-4 text-left text-xs font-bold text-slate-700 uppercase tracking-wider min-w-[220px] whitespace-nowrap">
                                Học viên</th>
                            <th
                                class="px-5 py-4 text-left text-xs font-bold text-slate-700 uppercase tracking-wider min-w-[140px] whitespace-nowrap">
                                Số điện thoại</th>
                            <th
                                class="px-5 py-4 text-left text-xs font-bold text-slate-700 uppercase tracking-wider min-w-[140px] whitespace-nowrap">
                                IP & Thiết bị</th>
                            <th
                                class="px-5 py-4 text-left text-xs font-bold text-slate-700 uppercase tracking-wider min-w-[220px] whitespace-nowrap">
                                Đề thi</th>
                            <th
                                class="px-5 py-4 text-left text-xs font-bold text-slate-700 uppercase tracking-wider min-w-[180px] whitespace-nowrap">
                                URL</th>
                            <th
                                class="px-5 py-4 text-left text-xs font-bold text-slate-700 uppercase tracking-wider min-w-[160px] whitespace-nowrap">
                                Chiến dịch</th>
                            <th
                                class="px-5 py-4 text-left text-xs font-bold text-slate-700 uppercase tracking-wider min-w-[130px] whitespace-nowrap">
                                Bắt đầu</th>
                            <th
                                class="px-5 py-4 text-left text-xs font-bold text-slate-700 uppercase tracking-wider min-w-[130px] whitespace-nowrap">
                                Nộp bài</th>
                            <th
                                class="px-5 py-4 text-left text-xs font-bold text-slate-700 uppercase tracking-wider min-w-[130px] whitespace-nowrap">
                                Tab switch</th>
                            <th
                                class="px-5 py-4 text-left text-xs font-bold text-slate-700 uppercase tracking-wider min-w-[140px] whitespace-nowrap">
                                Trạng thái thi</th>
                            <!-- <th
                                class="px-5 py-4 text-left text-xs font-bold text-slate-700 uppercase tracking-wider min-w-[140px] whitespace-nowrap">
                                Hoàn thành</th> -->
                            <th
                                class="px-5 py-4 text-left text-xs font-bold text-slate-700 uppercase tracking-wider min-w-[120px] whitespace-nowrap">
                                Loại chấm</th>
                            <th
                                class="px-5 py-4 text-left text-xs font-bold text-slate-700 uppercase tracking-wider min-w-[140px] whitespace-nowrap">
                                Trạng thái chấm</th>
                            <th
                                class="px-5 py-4 text-center text-xs font-bold text-slate-700 uppercase tracking-wider min-w-[130px] whitespace-nowrap">
                                Yêu cầu</th>
                            <th
                                class="px-5 py-4 text-center text-xs font-bold text-slate-700 uppercase tracking-wider min-w-[220px] whitespace-nowrap">
                                Hành động</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-slate-100" id="seh-body">
                    </tbody>
                </table>
            </div>
            <div class="px-6 py-5 border-t border-slate-200 bg-white flex items-center justify-center gap-2"
                id="pagination-container">
            </div>
        </div>

       <x-floating-scroll targetId="student-exam-history-table-container" />
    </div>

    @include('student-exam-history.modal.exam-detail')
    @include('student-exam-history.modal.reassign-teacher')
    @include('student-exam-history.modal.suspicious-modal')

@endsection

@section('scripts')
    <script>
        window.routes = {
            searchTeachers: "{{ route('teacher.search') }}",
        }
    </script>
    <script src="{{ asset('js/utils/utils.js') }}"></script>
    <script src="{{ asset('js/exam-history/exam-detail-modal-v2.js') }}"></script>
    <script src="{{ asset('js/exam-history/exam-detail-modal.detail-v2.js') }}"></script>
    <script>
        const tenantConnection = "{{ $tenantConnection }}";
        const isUserAdmin = {{ !empty($isAdmin) ? 'true' : 'false' }};
        fetchData(1);

        async function fetchData(page = 1) {
            const form = document.getElementById('filterForm');
            const formData = new FormData(form);
            const params = new URLSearchParams(formData);
            const params_search = new URLSearchParams(window.location.search);
            params.set('page', page);
            params.set('per_page', document.getElementById('per_page').value);
            if (params_search.get('open_score_id')) {
                params.append('open_score_id', params_search.get('open_score_id'));
            }

            const tbody = document.getElementById('seh-body');
            // Đổi màu svg fill sang #4F46E5 (Indigo 600)
            tbody.innerHTML = `<tr>
                    <td colspan="14" class="text-center py-16 text-slate-500">
                        <div class="flex items-center justify-center"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="none"><style>@keyframes loader2{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}</style><path fill="#4F46E5" d="M17.179 13.605a.431.431 0 00.279.514l.775.245a.393.393 0 00.499-.268 7.318 7.318 0 00-4.5-8.658.39.39 0 00-.507.255l-.245.775a.43.43 0 00.261.523 5.69 5.69 0 013.438 6.614z" style="animation:loader2 1s cubic-bezier(.63,-.71,.32,1.28) infinite both;transform-origin:center center"/></svg></div>
                    </td></tr>`;

            try {
                const response = await fetch(`{{ route('student-exam-history.getStudentExamHistories') }}?${params.toString()}`, {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    }
                });

                const result = await response.json();

                if (result.success) {
                    renderTable(result.data.data, true);
                    renderPagination(result.data);
                    if (typeof lucide !== 'undefined') lucide.createIcons();
                }
            } catch (error) {
                console.error('Lỗi khi lấy dữ liệu:', error);
                tbody.innerHTML = `<tr><td colspan="14" class="text-center py-16 text-rose-500 font-medium">Không thể tải dữ liệu. Vui lòng thử lại.</td></tr>`;
            }
        }

        $('#per_page').on('change', function () {
            fetchData(1);
        });

        function exportExcel() {
            var form = document.getElementById('filterForm');
            var formData = new FormData(form);
            var params = new URLSearchParams(formData);
            window.location.href = '{{ route("student-exam-history.export") }}?' + params.toString();
        }

        async function toggleNeedAssignment(idHistoryContest, action) {
            const isSubmit = action === 'submit';

            const config = {
                title: isSubmit ? 'Xác nhận chấm lại?' : 'Xác nhận hủy yêu cầu?',
                text: isSubmit ? 'Bài thi này sẽ đánh dấu là cần giáo viên chấm lại.' : 'Hủy trạng thái cần chấm lại cho bài thi này.',
                icon: 'question',
                confirmButtonText: 'Đồng ý',
                confirmButtonColor: '#4f46e5' // Indigo 600
            };

            const { isConfirmed } = await Swal.fire({
                title: config.title,
                text: config.text,
                icon: config.icon,
                showCancelButton: true,
                confirmButtonColor: config.confirmButtonColor,
                cancelButtonColor: '#94a3b8',
                confirmButtonText: config.confirmButtonText,
                cancelButtonText: 'Hủy'
            });

            if (!isConfirmed) return;

            Swal.fire({
                title: 'Đang xử lý...',
                text: 'Vui lòng chờ trong giây lát',
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            const urlPattern = isSubmit
                ? "{{ route('student-exam-history.submitExamNeedAssignment', ['idHistoryContest' => ':id']) }}"
                : "{{ route('student-exam-history.submitRevertExamNeedAssignment', ['idHistoryContest' => ':id']) }}";

            const url = urlPattern.replace(':id', idHistoryContest);

            try {
                const response = await fetch(url, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    }
                });

                const result = await response.json();

                if (response.ok) {
                    await Swal.fire({
                        icon: 'success',
                        title: 'Thành công!',
                        text: result.message || 'Cập nhật trạng thái thành công.',
                        timer: 1500,
                        showConfirmButton: false
                    });
                    window.location.reload();
                } else {
                    throw new Error(result.message || 'Có lỗi xảy ra trong quá trình xử lý.');
                }
            } catch (error) {
                Swal.fire({
                    icon: 'error',
                    title: 'Thất bại',
                    text: error.message,
                    confirmButtonColor: '#e11d48'
                });
            }
        }

        function renderTable(data, isAdmin) {
            const tbody = document.getElementById('seh-body');

            if (!data || data.length === 0) {
                // Tăng colspan từ 14 lên 15 vì đã thêm 1 cột mới
                tbody.innerHTML = `
                    <tr>
                        <td colspan="15" class="px-5 py-20 text-center text-slate-500">
                            <div class="flex flex-col items-center justify-center">
                                <div class="p-4 bg-slate-50 rounded-md mb-3 border border-slate-100">
                                    <i data-lucide="inbox" class="w-8 h-8 text-slate-400"></i>
                                </div>
                                <p class="font-medium text-slate-600">Không có dữ liệu</p>
                            </div>
                        </td>
                    </tr>`;
                if (typeof lucide !== 'undefined') lucide.createIcons();
                return;
            }

            const html = data.map(item => {
                const statusBadge = item.is_completed == 1
                    ? `<span class="inline-flex px-3 py-1 rounded-sm text-xs font-semibold bg-emerald-50 text-emerald-700 border border-emerald-200">Hoàn thành</span>`
                    : `<span class="inline-flex px-3 py-1 rounded-sm text-xs font-semibold bg-amber-50 text-amber-700 border border-amber-200">Chưa hoàn thành</span>`;

                let gradeTypeBadge = '<span class="text-xs font-semibold text-slate-400">---</span>';
                if (item.grade_type == 1) {
                    gradeTypeBadge = `<span class="inline-flex px-3 py-1 rounded-sm text-xs font-semibold bg-indigo-50 text-indigo-700 border border-indigo-200"><i data-lucide="bot" class="w-3.5 h-3.5 mr-1.5"></i> AI</span>`;
                } else if (item.grade_type == 2) {
                    gradeTypeBadge = `<span class="inline-flex px-3 py-1 rounded-sm text-xs font-semibold bg-slate-100 text-slate-700 border border-slate-200"><i data-lucide="user" class="w-3.5 h-3.5 mr-1.5"></i> GV </span>`;
                }
                let gradeStatusBadge = '';
                if (item.grade_type == 1) {
                    switch (item.ai_grading_status) {
                        case 'completed':
                            gradeStatusBadge = `<span class="inline-flex px-3 py-1 rounded-sm text-xs font-semibold bg-indigo-50 text-indigo-700 border border-indigo-200"><i data-lucide="bot" class="w-3.5 h-3.5 mr-1.5"></i> Chấm xong</span>`;
                            break;
                            
                        case 'partial_completed':
                            // Case mới: Phân biệt rõ là AI đã chấm xong phần làm bài, nhưng học viên làm thiếu
                            gradeStatusBadge = `<span class="inline-flex px-3 py-1 rounded-sm text-xs font-semibold bg-rose-50 text-rose-600 border border-rose-200" title="Chấm xong những phần đã làm"><i data-lucide="bot" class="w-3.5 h-3.5 mr-1.5"></i> Thiếu bài</span>`;
                            break;
                            
                        case 'pending':
                            gradeStatusBadge = `<span class="inline-flex px-3 py-1 rounded-sm text-xs font-semibold bg-amber-50 text-amber-700 border border-amber-200"><i data-lucide="bot" class="w-3.5 h-3.5 mr-1.5"></i> Đang chờ</span>`;
                            break;
                            
                        case 'not_started':
                        default:
                            gradeStatusBadge = `<span class="inline-flex px-3 py-1 rounded-sm text-xs font-semibold bg-gray-50 text-gray-600 border border-gray-200"><i data-lucide="minus" class="w-3.5 h-3.5 mr-1.5"></i> Chưa làm bài</span>`;
                            break;
                    }
                } else if (item.grade_type == 2 && item.need_assign_at) {
                    let writingStatus = '';
                    if (item.is_rescored_writing == 1) {
                        writingStatus = `<span class="inline-flex items-center px-2 py-1 rounded-sm text-[11px] font-semibold bg-emerald-50 border border-emerald-200 text-emerald-700" title="GV: ${item.teacher_writing}">W: Đã chấm</span>`;
                    } else if (item.teacher_id_writing == 0 || !item.teacher_id_writing) {
                        writingStatus = `<span class="inline-flex items-center px-2 py-1 rounded-sm text-[11px] font-semibold bg-slate-50 border border-slate-200 text-slate-500">W: Chưa gán</span>`;
                    } else {
                        writingStatus = `<span class="inline-flex items-center px-2 py-1 rounded-sm text-[11px] font-semibold bg-amber-50 border border-amber-200 text-amber-700" title="GV: ${item.teacher_writing}">W: Chờ chấm</span>`;
                    }

                    let speakingStatus = '';
                    if (item.is_rescored_speaking == 1) {
                        speakingStatus = `<span class="inline-flex items-center px-2 py-1 rounded-sm text-[11px] font-semibold bg-emerald-50 border border-emerald-200 text-emerald-700" title="GV: ${item.teacher_speaking}">S: Đã chấm</span>`;
                    } else if (item.teacher_id_speaking == 0 || !item.teacher_id_speaking) {
                        speakingStatus = `<span class="inline-flex items-center px-2 py-1 rounded-sm text-[11px] font-semibold bg-slate-50 border border-slate-200 text-slate-500">S: Chưa gán</span>`;
                    } else {
                        speakingStatus = `<span class="inline-flex items-center px-2 py-1 rounded-sm text-[11px] font-semibold bg-amber-50 border border-amber-200 text-amber-700" title="GV: ${item.teacher_speaking}">S: Chờ chấm</span>`;
                    }

                    gradeStatusBadge = `<div class="flex flex-col gap-1.5 w-max">${writingStatus}${speakingStatus}</div>`;
                }

                const isFullyRescored = item.is_rescored_writing == 1 && item.is_rescored_speaking == 1;

                let deviceIcon = 'monitor';
                if (item.student_device === 'Mobile') deviceIcon = 'smartphone';
                else if (item.student_device === 'Tablet') deviceIcon = 'tablet';

                const assignButton = !item.need_assign_at
                    ? `<button type="button" onclick="toggleNeedAssignment('${item.idHistoryContest}', 'submit')" class="btn-need-assign w-full inline-flex justify-center items-center px-3 py-1.5 border border-slate-300 shadow-sm text-xs font-semibold rounded-md text-slate-700 bg-white hover:bg-slate-50 transition-colors">
                            <i data-lucide="refresh-ccw" class="w-3.5 h-3.5 mr-1.5 text-slate-400"></i> Cần chấm lại
                        </button>`
                    : `<button type="button" onclick="toggleNeedAssignment('${item.idHistoryContest}', 'revert')" class="btn-need-assign w-full inline-flex justify-center items-center px-3 py-1.5 border border-rose-200 shadow-sm text-xs font-semibold rounded-md text-rose-700 bg-rose-50 hover:bg-rose-100 transition-colors">
                            <i data-lucide="undo-2" class="w-3.5 h-3.5 mr-1.5"></i> Hủy yêu cầu
                        </button>`;

                // CHIẾC BADGE MỚI: Lấy cảm hứng từ Linear & Vercel
                let examStatusBadge = '';

                if (item.status == 1) {
                    // Nếu có chi tiết bất thường thì hiển thị dạng Button có thể click
                    if (item.suspicious_details) {
                        // Mã hóa mảng thành chuỗi an toàn để truyền vào HTML
                        const safeDetails = encodeURIComponent(item.suspicious_details);
                        
                        examStatusBadge = `
                            <button type="button" onclick="openSuspiciousModal('${safeDetails}')" class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-rose-50 border border-rose-200 text-rose-700 shadow-sm whitespace-nowrap ring-1 ring-rose-500/10 hover:bg-rose-100 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-rose-500 cursor-pointer">
                                <span class="relative flex h-2 w-2">
                                    <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-rose-400 opacity-75"></span>
                                    <span class="relative inline-flex rounded-full h-2 w-2 bg-rose-500"></span>
                                </span>
                                Bất thường
                                <i data-lucide="info" class="w-3.5 h-3.5 ml-0.5 opacity-80"></i>
                            </button>
                        `;
                    } else {
                        // Nếu bất thường nhưng không có chi tiết, giữ nguyên dạng thẻ Span
                        examStatusBadge = `
                            <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold bg-rose-50/80 border border-rose-200 text-rose-700 shadow-sm whitespace-nowrap ring-1 ring-rose-500/10">
                                <span class="relative flex h-2 w-2">
                                    <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-rose-400 opacity-75"></span>
                                    <span class="relative inline-flex rounded-full h-2 w-2 bg-rose-500"></span>
                                </span>
                                Bất thường
                            </span>
                        `;
                    }
                } else if (item.is_completed == 0) {
                    examStatusBadge = `
                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-white border border-slate-200 text-slate-600 shadow-sm whitespace-nowrap hover:bg-slate-50 transition-colors">
                            <span class="w-1.5 h-1.5 rounded-full bg-orange-500 shadow-[0_0_4px_rgba(249,115,22,0.5)]"></span>
                            Chưa hoàn thành
                        </span>
                    `;
                } else if (item.status == 0) {
                    examStatusBadge = `
                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-white border border-slate-200 text-slate-600 shadow-sm whitespace-nowrap hover:bg-slate-50 transition-colors">
                            <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 shadow-[0_0_4px_rgba(16,185,129,0.5)]"></span>
                            Đã làm bài
                        </span>
                    `;
                } else {
                    examStatusBadge = `
                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-white border border-slate-200 text-slate-600 shadow-sm whitespace-nowrap hover:bg-slate-50 transition-colors">
                            <span class="w-1.5 h-1.5 rounded-full bg-slate-500 shadow-[0_0_4px_rgba(100,116,139,0.5)]"></span>
                            Không xác định
                        </span>
                    `;
                }

                return `
                    <tr class="hover:bg-slate-50/50 transition-colors group">
                        <td class="px-5 py-4 text-sm font-semibold text-slate-900">${item.id || 'N/A'}</td>
                        <td class="px-5 py-4">
                            <div class="flex items-center gap-4">
                                <img class="w-10 h-10 object-cover rounded-full border border-slate-200 shadow-sm" src="${item.student_avatar || '/images/student_avatar.jpg'}" alt="avatar" />
                                <div class="flex flex-col justify-center gap-0.5">
                                    <span class="text-indigo-700 font-bold text-sm">${item.student_name || 'N/A'}</span>
                                    <span class="text-slate-500 text-xs">${item.student_email || 'N/A'}</span>
                                </div>
                            </div>
                        </td>
                        <td class="px-5 py-4 text-sm font-medium text-slate-700">${item.student_phone || 'N/A'}</td>
                        <td class="px-5 py-4 text-sm text-slate-600">
                            <div class="flex flex-col gap-1.5">
                                <div class="flex items-center gap-2" title="IP: ${item.student_ip}">
                                    <i data-lucide="globe" class="w-4 h-4 text-slate-400"></i>
                                    <span>${item.student_ip || 'N/A'}</span>
                                </div>
                                <div class="flex items-center gap-2">
                                    <i data-lucide="${deviceIcon}" class="w-4 h-4 text-slate-400"></i>
                                    <span class="text-xs text-slate-500">${item.student_browser || 'N/A'} (${item.student_device || 'N/A'})</span>
                                </div>
                            </div>
                        </td>
                        <td class="px-5 py-4 text-sm">
                            <span class="inline-flex px-3 py-1 rounded-sm text-xs font-semibold bg-slate-100 text-slate-700 max-w-xs truncate" title="${item.exam_name}">${item.exam_name || 'N/A'}</span>
                        </td>
                        <td class="px-5 py-4 text-sm">
                            <span class="inline-flex px-3 py-1 rounded-sm text-xs bg-slate-50 border border-slate-200 text-slate-600 max-w-[150px] truncate" title="${item.final_url}">${item.final_url || 'N/A'}</span>
                        </td>
                        <td class="px-5 py-4 text-sm">
                            <span class="font-medium text-slate-700">${item.campaign_name || 'N/A'}</span>
                        </td>
                        <td class="px-5 py-4 text-sm text-slate-600 text-xs">${dayjs(item.created_at).subtract(7, 'hour').format('HH:mm DD/MM/YY')}</td>
                        <td class="px-5 py-4 text-sm text-slate-600 text-xs">${formatDate(item.time_finish)}</td>
                        <td class="px-5 py-4 text-sm text-slate-600 text-xs">${item.tab_switch_count}</td>
                        
                        <!-- CỘT MỚI: Tình trạng làm bài -->
                        <td class="px-5 py-4 text-sm">${examStatusBadge}</td>
                        
                        <td class="hidden px-5 py-4">${statusBadge}</td>
                        <td class="px-5 py-4">${gradeTypeBadge}</td>
                        <td class="px-5 py-4">${gradeStatusBadge}</td>
                        <td class="px-5 py-4">
                            <div class="flex justify-center w-full">
                                ${assignButton}
                            </div>
                        </td>
                        <td class="px-5 py-4 text-sm">
                            <div class="flex items-center justify-center gap-2 opacity-70 group-hover:opacity-100 transition-opacity">
                                <button onclick="openExamDetail(${item.id} , ${typeof isUserAdmin !== 'undefined' ? isUserAdmin : false}, ${item.grade_type})" class="whitespace-nowrap inline-flex items-center px-3 py-1.5 border border-transparent shadow-sm text-xs font-bold rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all">
                                    Chi tiết
                                </button>
                                ${isAdmin ? `<a href="https://${item.result_url}?mode=review" target="_blank" rel="noopener" class="inline-flex px-3 py-1.5 shadow-sm text-xs font-bold text-white bg-emerald-600 hover:bg-emerald-700 rounded-md focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 transition-all">Kết quả</a>` : ''}
                            </div>
                        </td>
                    </tr>`;
            }).join('');

            tbody.innerHTML = html;
        }

        function renderPagination(meta) {
            const container = document.getElementById('pagination-container');
            const metaPagination = document.querySelector('.meta-pagination');
            if (!meta || meta.total === 0) {
                container.innerHTML = '';
                return;
            }

            const from = meta.from || 0;
            const to = meta.to || 0;
            const total = meta.total || 0;
            const perPage = meta.per_page || 0;

            let summaryHtml = `
                        <div class="text-sm text-slate-500">
                            Hiển thị <span class="font-medium text-slate-700">${from} - ${to}</span> trong tổng số <span class="font-medium text-slate-700">${total}</span> bản ghi (<span class="font-medium text-slate-700">${perPage}</span> bản ghi/trang)
                        </div>
                    `;
            metaPagination.innerHTML = summaryHtml;

            if (meta.last_page <= 1) {
                container.classList.remove('justify-center');
                container.classList.add('justify-between');
                container.innerHTML = summaryHtml;
                return;
            }

            let buttonsHtml = '<div class="flex items-center gap-2">';
            const currentPage = meta.current_page;
            const lastPage = meta.last_page;
            const sidePages = 1;

            buttonsHtml += `
                        <button onclick="fetchData(${currentPage - 1})" ${currentPage === 1 ? 'disabled' : ''} 
                                class="px-3 py-2 text-sm font-medium ${currentPage === 1 ? 'text-slate-300 bg-slate-50 cursor-not-allowed border border-slate-100' : 'text-slate-700 bg-white border border-slate-300 hover:bg-slate-50 shadow-sm'} rounded-md transition-all">
                            <i data-lucide="chevron-left" class="w-4 h-4"></i>
                        </button>
                    `;

            buttonsHtml += renderPageButton(1, currentPage);

            if (currentPage > sidePages + 2) {
                buttonsHtml += `<span class="px-2 text-slate-400 font-medium">...</span>`;
            }

            for (let i = Math.max(2, currentPage - sidePages); i <= Math.min(lastPage - 1, currentPage + sidePages); i++) {
                buttonsHtml += renderPageButton(i, currentPage);
            }

            if (currentPage < lastPage - sidePages - 1) {
                buttonsHtml += `<span class="px-2 text-slate-400 font-medium">...</span>`;
            }

            if (lastPage > 1) {
                buttonsHtml += renderPageButton(lastPage, currentPage);
            }

            buttonsHtml += `
                        <button onclick="fetchData(${currentPage + 1})" ${currentPage === lastPage ? 'disabled' : ''} 
                                class="px-3 py-2 text-sm font-medium ${currentPage === lastPage ? 'text-slate-300 bg-slate-50 cursor-not-allowed border border-slate-100' : 'text-slate-700 bg-white border border-slate-300 hover:bg-slate-50 shadow-sm'} rounded-md transition-all">
                            <i data-lucide="chevron-right" class="w-4 h-4"></i>
                        </button>
                    `;
            buttonsHtml += '</div>';

            container.classList.remove('justify-center');
            container.classList.add('justify-between');
            container.innerHTML = summaryHtml + buttonsHtml;
        }

        function renderPageButton(page, currentPage) {
            const isActive = page === currentPage;
            const activeClass = "font-bold text-white bg-indigo-600 border-indigo-600 shadow-sm";
            const inactiveClass = "font-medium text-slate-700 bg-white border-slate-300 hover:bg-slate-50 shadow-sm";

            return `
                        <button onclick="fetchData(${page})" 
                                class="px-3.5 py-2 text-sm rounded-md border transition-all min-w-[2.5rem] ${isActive ? activeClass : inactiveClass}">
                            ${page}
                        </button>
                    `;
        }

        $('#filterForm').on('submit', function (e) {
            e.preventDefault();
            fetchData(1);
        });

        function openSuspiciousModal(data) {
            const modal = document.getElementById('suspiciousModal');
            const listContainer = document.getElementById('suspiciousList');
            
            try {
                // Giải mã và parse chuỗi JSON thành mảng
                const details = JSON.parse(
                    decodeURIComponent(data)
                );
                
                // Tạo HTML cho từng item trong mảng (Bạn có thể điều chỉnh theo cấu trúc Object của mảng bạn có)
                listContainer.innerHTML = details.map((detail, index) => {
                    // Giả sử mỗi detail là một string, nếu nó là Object thì thay thế detail.message, detail.time... cho phù hợp
                    let textContent = typeof detail === 'string' ? detail : JSON.stringify(detail);
                    
                    return `
                        <li class="flex items-start gap-2.5 p-3 rounded-lg bg-rose-50/50 border border-rose-100">
                            <i data-lucide="shield-alert" class="w-4 h-4 text-rose-500 mt-0.5 flex-shrink-0"></i>
                            <span class="text-sm text-slate-700">${textContent}</span>
                        </li>
                    `;
                }).join('');
                
                // Hiển thị modal
                modal.classList.remove('hidden');
                
                // Gọi lại lucide để render icon trong modal
                if (typeof lucide !== 'undefined') lucide.createIcons();
                
            } catch (e) {
                console.error("Lỗi parse chi tiết bất thường:", e);
            }
        }

        function closeSuspiciousModal() {
            const modal = document.getElementById('suspiciousModal');
            modal.classList.add('hidden');
        }

        (function () {
            var params = new URLSearchParams(window.location.search);
            var openScoreId = params.get('open_score_id');
            if (openScoreId) {
                // Đợi DOM + JS modal sẵn sàng
                var attempts = 0;
                var interval = setInterval(function () {
                    attempts++;
                    if (typeof openExamDetail === 'function') {
                        clearInterval(interval);
                        openExamDetail(openScoreId);
                    } else if (attempts > 20) {
                        clearInterval(interval);
                    }
                }, 300);
            }
        })();

        if (typeof lucide !== 'undefined') lucide.createIcons();
    </script>
    <script src="{{ asset('js/utils/floating-scroll.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Gọi hàm đã được gắn vào window từ file JS trên
            if (typeof window.initFloatingScrollbars === 'function') {
                window.initFloatingScrollbars();
            }
            
            // Render icon lucide nếu có
            if (typeof lucide !== 'undefined') {
                lucide.createIcons();
            }
        });
    </script>
@endsection