@extends('layouts-v2.app')

@section('title', 'Danh sách bài thi')



@section('content')
<div>
    {{-- Breadcrumb --}}
    <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">Trang chủ</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <span>Danh sách bài thi</span>
    </div>
    <h1 class="text-3xl font-bold text-slate-900 mb-6 uppercase">Danh sách bài thi</h1>

    @include('components.exam-history-filter')

    {{-- Khu vực Thao tác (Header của Bảng) --}}
    <div class="flex justify-start items-center mb-4">
        {{-- Số lượng hiển thị --}}
        <x-floating-select 
            name="perpage"
            id="perpage"
            class="w-40"
            label="Số lượng hiển thị"
            :options="[
                '' => '10',
                '20' => '20',
                '30' => '30',
                '50' => '50',
                '100' => '100'
            ]"
        />
    </div>

    {{-- Bảng Danh sách Bài thi --}}
    <div class="flex flex-col">
        <div id="top-scrollbar-wrapper" class="overflow-x-auto overflow-y-hidden mb-2" style="height: 20px;">
            <div id="top-scrollbar-content" style="height: 20px;"></div>
        </div>
        <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8" id="table-scroll">
            <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
                <div class="shadow-md border border-gray-100 overflow-auto max-h-[calc(100vh-250px)]">
                    <table class="min-w-full divide-y divide-gray-200 sticky-header">
                        <thead class="bg-gray-50 sticky top-0 z-10">
                            <tr>
                                <th scope="col" class="px-6 py-3 text-left text-sm font-semibold text-gray-500 uppercase tracking-wider w-1/5 whitespace-nowrap">
                                    HỌC VIÊN
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-sm font-semibold text-gray-500 uppercase tracking-wider w-1/5 whitespace-nowrap">
                                    MÃ LỚP
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-sm font-semibold text-gray-500 uppercase tracking-wider w-1/5 whitespace-nowrap">
                                    KHÓA HỌC
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-sm font-semibold text-gray-500 uppercase tracking-wider w-1/4 whitespace-nowrap">
                                    BÀI THI
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-sm font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                                    DẠNG ĐỀ
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-sm font-semibold text-gray-500 uppercase tracking-wider w-1/5 whitespace-nowrap">
                                    THỜI GIAN
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-sm font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                                    KẾT QUẢ
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-sm font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                                    TRẠNG THÁI BÀI TEST
                                </th>
                                <th scope="col" class="px-6 py-3 text-center text-sm font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                                    ĐIỂM
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-sm font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                                    OVERALL SCORE
                                </th>
                                <th scope="col" class="px-6 py-3 text-right text-sm font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                                    HÀNH ĐỘNG
                                </th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200" id="tbody-exam-histories">
                            <tr>
                                <td colspan="11" class="px-6 py-4 whitespace-nowrap text-center text-sm font-medium text-gray-900">
                                    <div class="flex items-center justify-center">
                                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><style>@keyframes loader2{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}</style><path fill="#265BFF" 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>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="mt-6 flex justify-center" id="pagination"></div>
    </div>
</div>

@include('exam-history.modal.exam-detail')
@include('exam-history.modal.reassign-teacher')
@include('exam-history.modal.export-progress')

<script>
    window.routes = {
        searchCourses: "{{ route('course.searchCourses') }}",
        searchClasses: "{{ route('class.searchClasses') }}",
        searchTeachers: "{{ route('teacher.searchTeachers') }}",
        searchOAStudents: "{{ route('student.searchStudents') }}",
        getOAExamHistories: "{{ route('exam-histories.getExamHistories') }}",
        exportExamHistories: "{{ route('exam-histories.export') }}",
        exportProgress: "{{ route('exam-histories.export-progress', ['export_id' => 'ID']) }}",
        getOAExamDetail: "{{ route('exam-histories.detail', ['id' => 'ID']) }}",
        studentAvatar: "{{ asset('images/student_avatar.jpg') }}",
        submitExamNeedAssignment: "{{ route('exam-histories.submitExamNeedAssignment', ['student_score_id' => 'ID']) }}",
        submitRevertExamNeedAssignment: "{{ route('exam-histories.submitRevertExamNeedAssignment', ['student_score_id' => 'ID']) }}"
    }
</script>

<script src="{{ asset('js/utils/utils.js') }}"></script>
<script src="{{ asset('js/exam-history/exam-history.js') }}"></script>
<script src="{{ asset('js/exam-history/exam-detail-modal.js') }}"></script>
<script src="{{ asset('js/exam-history/exam-detail-modal.detail.js') }}"></script>

<script>
    $(document).ready(function() {
        loadOAExamHistories();
    });
</script>
@endsection