@extends('layouts-v2.app')

@section('title', 'Quản lý chấm bài thi')

@section('content')
<div class="font-sans text-slate-800">
    <div class="flex items-center gap-3 mb-6">
        <div class="p-2.5 bg-blue-100 text-blue-600 rounded-lg shadow-sm border border-blue-200">
            <i data-lucide="user-round-pen" class="w-6 h-6"></i>
        </div>
        <h1 class="text-2xl md:text-3xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-blue-700 to-indigo-600">
            Quản lý chấm bài thi
        </h1>
    </div>

    <div class="flex flex-col lg:flex-row gap-6 items-start">
        <div class="w-full lg:w-1/4 xl:w-1/5 flex-shrink-0 bg-white p-5 rounded-xl border border-gray-100 shadow-sm sticky top-4">
            <h2 class="text-base font-bold mb-4 text-slate-800 border-b border-slate-100 pb-3 flex items-center gap-2">
                <i data-lucide="filter" class="w-4 h-4 text-slate-500"></i> Bộ lọc
            </h2>
            @include('exam-grading.components.exam-grading-filter')
        </div>
    
        <div class="w-full lg:w-3/4 xl:w-4/5 flex-grow bg-white p-5 rounded-xl border border-gray-100 shadow-sm">
            {{-- Khu vực Thao tác (Header của Bảng) --}}
            <div class="flex justify-between items-center mb-4">
                {{-- Số lượng hiển thị --}}
                <x-floating-select 
                    name="grading_perpage"
                    id="grading_perpage"
                    class="w-40"
                    label="Số lượng hiển thị"
                    :options="[
                        '' => '10',
                        '20' => '20',
                        '30' => '30',
                        '50' => '50',
                        '100' => '100'
                    ]"
                />
                
                <button id="btn-export-grading-excel"
                    class="group flex items-center gap-2 py-2 px-4 border-2 border-blue-600 text-blue-600 rounded-lg hover:bg-blue-50 hover:border-blue-700 hover:shadow-lg hover:shadow-blue-200/50 hover:scale-105 transition-all duration-200 font-semibold text-sm">
                    <i data-lucide="download" class="w-4 h-4 group-hover:scale-110 transition-transform group-hover:translate-y-[2px]"></i>
                    <span>Xuất dữ liệu</span>
                </button>
            </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 custom-scrollbar 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 rounded-xl overflow-auto max-h-[calc(100vh-250px)] custom-scrollbar">
                            <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-3 py-3.5 text-[11px] font-bold text-slate-500 uppercase tracking-widest border-b-2 border-slate-200 bg-slate-50/90 backdrop-blur-sm sticky top-0 z-20 group whitespace-nowrap">
                                            HỌC VIÊN
                                        </th>
                                        <th scope="col" class="px-3 py-3.5 text-[11px] font-bold text-slate-500 uppercase tracking-widest border-b-2 border-slate-200 bg-slate-50/90 backdrop-blur-sm sticky top-0 z-20 group whitespace-nowrap">
                                            MÃ LỚP
                                        </th>
                                        <th scope="col" class="px-3 py-3.5 text-[11px] font-bold text-slate-500 uppercase tracking-widest border-b-2 border-slate-200 bg-slate-50/90 backdrop-blur-sm sticky top-0 z-20 group whitespace-nowrap">
                                            KHÓA HỌC
                                        </th>
                                        <th scope="col" class="px-3 py-3.5 text-[11px] font-bold text-gray-500 uppercase tracking-wider w-1/4 whitespace-nowrap">
                                            BÀI KIỂM TRA
                                        </th>
                                        <th scope="col" class="px-3 py-3.5 text-[11px] font-bold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                                            ĐIỂM THÀNH PHẦN
                                        </th>
                                        <th scope="col" class="px-3 py-3.5 text-[11px] font-bold text-gray-500 uppercase tracking-wider w-1/5 whitespace-nowrap">
                                            TRẠNG THÁI CHẤM
                                        </th>
                                        <th scope="col" class="px-3 py-3.5 text-[11px] font-bold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                                            NGƯỜI CHẤM
                                        </th>
                                        <th scope="col" class="px-3 py-3.5 text-[11px] font-bold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                                            THỜI GIAN NỘP
                                        </th>
                                        <th scope="col" class="px-3 py-3.5 text-[11px] font-bold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                                            THỜI HẠN
                                        </th>
                                        <th scope="col" class="px-3 py-3.5 text-[11px] font-bold 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-grading">
                                    <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 items-center justify-between" id="pagination-exam-grading"></div>
            </div>
        </div>
    </div>

    <input type="hidden" id="tenant-connection" value="{{ $tenant_connection }}">
</div>

@include('exam-history.modal.exam-detail')
@include('exam-history.modal.reassign-teacher')
@include('exam-schedule-result.modal.edit-writing')
@include('exam-schedule-result.modal.edit-manual-writing')
@include('exam-schedule-result.modal.edit-speaking')
@include('exam-history.modal.export-progress')

<script>
    window.routes = {
        searchCourses: "{{ route('course.searchCourses') }}",
        searchSections: "{{ route('course.searchSections') }}",
        searchQuizzes: "{{ route('course.searchQuizzes') }}",
        searchClasses: "{{ route('class.searchClasses') }}",
        searchTeachers: "{{ route('teacher.searchTeachers') }}",
        searchOAStudents: "{{ route('student.searchStudents') }}",
        saveDeadlineSchedule: '{{ route("exam-permission.save-deadlines") }}',
        getOAExamGrading: "{{ route('exam-grading.getExamGrading') }}", // Tab3
        studentAvatar: "{{ asset('images/student_avatar.jpg') }}",
        exportExamGrading: "{{ route('exam-grading.export') }}",
        exportGradingProgress: "{{ route('exam-grading.export-progress', ['export_id' => 'ID']) }}",
        getTeacherAssignedOverview: "{{ route('student-exam-histories.getTeacherAssignedOverview', ['student_score_id' => 'ID']) }}",
    }
</script>

<script src="{{ asset('js/utils/utils.js') }}"></script>
<script src="{{ asset('js/exam-schedule-result/exam-history/exam-detail-modal.js') }}"></script>
<script src="{{ asset('js/exam-schedule-result/exam-history/exam-detail-modal.detail.js') }}"></script>
<script src="{{ asset('js/exam-schedule-result/exam-history/exam-detail-modal.edit.js') }}"></script>
<script src="{{ asset('js/exam-grading/exam-grading.js') }}"></script>
@endsection