@extends('layouts-v2.app')

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

@section('content')
<div class="pb-10">
    {{-- Header Page --}}
    <div class="flex items-center justify-between mb-6">
        <div class="flex items-center gap-3">
            <div class="p-2.5 bg-blue-50 text-blue-600 rounded-xl shadow-sm border border-blue-100">
                <i data-lucide="check-square" class="w-6 h-6"></i>
            </div>
            <h1 class="text-2xl md:text-3xl font-extrabold text-slate-800 tracking-tight">
                Quản lý chấm bài
            </h1>
        </div>
        <button class="group flex items-center gap-2 py-2.5 px-5 bg-white border border-slate-200 text-slate-700 rounded-xl hover:bg-slate-50 hover:text-blue-600 hover:border-blue-200 transition-all font-semibold text-sm shadow-sm">
            <i data-lucide="download" class="w-4 h-4 text-slate-400 group-hover:text-blue-500"></i>
            <span>Xuất dữ liệu</span>
        </button>
    </div>

    {{-- Khu vực Bộ lọc (Card) --}}
    <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-[0_2px_10px_-3px_rgba(6,81,237,0.05)] mb-6 relative">
        <div class="flex items-center gap-2 mb-4 text-slate-800 font-bold text-sm">
            <i data-lucide="filter" class="w-4 h-4 text-blue-500"></i>
            Bộ lọc dữ liệu
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-y-5 gap-x-4">
            {{-- Ngày tháng --}}
            <div>
                <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-1.5">Từ ngày</label>
                <div class="relative">
                    <i data-lucide="calendar" class="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 z-10"></i>
                    <input type="text" id="filter_start_date" class="w-full pl-9 pr-3 py-2.5 border border-slate-300 rounded-lg text-sm bg-white focus:ring-2 focus:ring-blue-100 focus:border-blue-500 transition-all shadow-sm" placeholder="DD-MM-YYYY">
                </div>
            </div>
            <div>
                <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-1.5">Đến ngày</label>
                <div class="relative">
                    <i data-lucide="calendar" class="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 z-10"></i>
                    <input type="text" id="filter_end_date" class="w-full pl-9 pr-3 py-2.5 border border-slate-300 rounded-lg text-sm bg-white focus:ring-2 focus:ring-blue-100 focus:border-blue-500 transition-all shadow-sm" placeholder="DD-MM-YYYY">
                </div>
            </div>
            
            {{-- Text Inputs --}}
            <div>
                <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-1.5">Số điện thoại</label>
                <input type="text" id="filter_phone" class="w-full px-3 py-2.5 border border-slate-300 rounded-lg text-sm bg-white focus:ring-2 focus:ring-blue-100 focus:border-blue-500 transition-all shadow-sm" placeholder="Nhập SĐT...">
            </div>
            <div>
                <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-1.5">Email</label>
                <input type="email" id="filter_email" class="w-full px-3 py-2.5 border border-slate-300 rounded-lg text-sm bg-white focus:ring-2 focus:ring-blue-100 focus:border-blue-500 transition-all shadow-sm" placeholder="Nhập Email...">
            </div>

            {{-- TomSelect Multiple --}}
            <div>
                <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-1.5">Mã HV</label>
                <select id="filter_student_code" multiple placeholder="Chọn Mã HV..."></select>
            </div>
            <div>
                <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-1.5">Mã lớp</label>
                <select id="filter_class_code" multiple placeholder="Chọn Mã lớp..."></select>
            </div>
            <div>
                <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-1.5">Sản phẩm</label>
                <select id="filter_product" multiple placeholder="Chọn sản phẩm..."></select>
            </div>
            <div>
                <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-1.5">Khóa học</label>
                <select id="filter_course" multiple placeholder="Chọn khóa học..."></select>
            </div>
            <div>
                <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-1.5">Bài thi</label>
                <select id="filter_exam" multiple placeholder="Chọn bài thi..."></select>
            </div>

            {{-- TomSelect Single --}}
            <div>
                <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-1.5">Trạng thái xử lý điểm</label>
                <select id="filter_point_status" placeholder="Chọn trạng thái...">
                    <option value="">Tất cả</option>
                    <option value="0">Đang xử lý</option>
                    <option value="1">Hoàn tất</option>
                    <option value="2">Giao chấm lại</option>
                </select>
            </div>
            <div>
                <label class="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-1.5">Trạng thái chấm của GV</label>
                <select id="filter_grading_status" placeholder="Chọn trạng thái...">
                    <option value="">Tất cả</option>
                    <!-- <option value="0">Không xác định</option> -->
                    <option value="1">Chờ chấm</option>
                    <option value="2">Đã chấm</option>
                    <option value="3">Quá hạn</option>
                </select>
            </div>
        </div>

        <div id="filter_actions" class="mt-5 pt-5 border-t border-slate-100 flex items-center justify-end gap-3">
            <button id="btn_reset" class="hidden px-5 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-600 text-sm font-bold rounded-lg transition-all flex items-center gap-2">
                <i data-lucide="rotate-ccw" class="w-4 h-4"></i> Làm mới
            </button>
            <button id="btn_search" class="px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-bold rounded-lg shadow-sm shadow-blue-200 transition-all flex items-center gap-2">
                <i data-lucide="search" class="w-4 h-4"></i> Tìm kiếm
            </button>
        </div>
    </div>

    {{-- Khu vực Bảng quản lý (Table Card) --}}
    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden flex flex-col relative z-10">
        
        <div class="px-4 py-3 border-b border-slate-100 flex justify-between items-center bg-slate-50/50">
            <h3 class="font-bold text-slate-700 text-sm">Danh sách</h3>
            <div class="flex items-center gap-2">
                <span class="text-[11px] font-bold text-slate-500 uppercase tracking-wider">Hiển thị</span>
                <select id="perpage" class="border border-slate-300 rounded-lg text-sm bg-white px-3 py-1.5 focus:ring-2 focus:ring-blue-100 focus:border-blue-500 outline-none shadow-sm cursor-pointer">
                    <option value="10">10</option>
                    <option value="20">20</option>
                    <option value="50">50</option>
                </select>
                <span class="text-[11px] font-bold text-slate-500 uppercase tracking-wider">Dòng</span>
            </div>
        </div>

        {{-- Vùng Table Scrollable --}}
        <div class="overflow-x-auto custom-scrollbar" style="max-height: calc(100vh - 350px);">
            <table class="min-w-max w-full divide-y divide-gray-200 text-sm">
                {{-- THEAD: Cấu hình Sticky (chỉ kích hoạt từ màn hình lg trở lên) --}}
                <thead class="bg-slate-50 sticky top-0 z-30 border-b border-slate-200">
                    <tr>
                        <th class="lg:sticky lg:left-0 bg-slate-50 z-30 w-[60px] min-w-[60px] px-4 py-4 text-center text-[11px] font-bold text-slate-500 uppercase tracking-widest border-b border-slate-200">STT</th>
                        <th class="lg:sticky lg:left-[60px] bg-slate-50 z-30 w-[200px] min-w-[200px] px-4 py-4 text-left text-[11px] font-bold text-slate-500 uppercase tracking-widest border-b border-slate-200">GV chấm</th>
                        <th class="lg:sticky lg:left-[260px] bg-slate-50 z-30 w-[250px] min-w-[250px] lg:shadow-[4px_0_12px_-4px_rgba(0,0,0,0.05)] px-4 py-4 text-left text-[11px] font-bold text-slate-500 uppercase tracking-widest border-b border-slate-200">Học viên</th>
                        
                        <th class="px-4 py-4 text-left text-[11px] font-bold text-slate-500 uppercase tracking-widest border-b border-slate-200">Mã HV</th>
                        <th class="px-4 py-4 text-left text-[11px] font-bold text-slate-500 uppercase tracking-widest border-b border-slate-200">Mã lớp</th>
                        <th class="px-4 py-4 text-left text-[11px] font-bold text-slate-500 uppercase tracking-widest border-b border-slate-200">Sản phẩm</th>
                        <th class="px-4 py-4 text-left text-[11px] font-bold text-slate-500 uppercase tracking-widest border-b border-slate-200">Khóa học</th>
                        <th class="px-4 py-4 text-left text-[11px] font-bold text-slate-500 uppercase tracking-widest border-b border-slate-200">Bài thi</th>
                        <th class="px-4 py-4 text-left text-[11px] font-bold text-slate-500 uppercase tracking-widest border-b border-slate-200 min-w-[180px]">Thời gian làm bài</th>
                        <th class="px-4 py-4 text-left text-[11px] font-bold text-slate-500 uppercase tracking-widest border-b border-slate-200">Bất thường</th>
                        <th class="px-4 py-4 text-left text-[11px] font-bold text-slate-500 uppercase tracking-widest border-b border-slate-200">Kỹ năng chấm</th>
                        <th class="px-4 py-4 text-left text-[11px] font-bold text-slate-500 uppercase tracking-widest border-b border-slate-200 min-w-[150px]">TG phân chấm</th>
                        <th class="px-4 py-4 text-left text-[11px] font-bold text-slate-500 uppercase tracking-widest border-b border-slate-200 min-w-[150px]">Deadline</th>
                        <th class="px-4 py-4 text-left text-[11px] font-bold text-slate-500 uppercase tracking-widest border-b border-slate-200 min-w-[150px]">Trạng thái chấm GV</th>
                        
                        <th class="lg:sticky lg:right-0 bg-slate-50 z-30 w-[120px] min-w-[120px] lg:shadow-[-4px_0_12px_-4px_rgba(0,0,0,0.05)] px-4 py-4 text-center text-[11px] font-bold text-slate-500 uppercase tracking-widest border-b border-slate-200">Hành động</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100 bg-white" id="grading-table-body">
                </tbody>
            </table>
        </div>
        
        {{-- Phân trang --}}
        <div class="px-6 py-4 border-t border-slate-200 bg-slate-50 flex items-center justify-between" id="pagination-exam-grading">
        </div>
    </div>

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

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

<script>
    window.routes = {
        searchCategories: "{{ route('course.searchCategories') }}",
        searchCourses: "{{ route('course.searchCourses') }}",
        searchQuizzes: "{{ route('course.searchQuizzes') }}",
        searchClasses: "{{ route('class.searchClasses') }}",
        searchStudents: "{{ route('student.searchStudents') }}",
        studentAvatar: "{{ asset('images/student_avatar.jpg') }}",
        getExamGrading: "{{ route('exam-grading.getExamGrading') }}",
        getTeacherAssignedOverview: "{{ route('student-exam-histories.getTeacherAssignedOverview', ['student_score_id' => 'ID']) }}",
    }
</script>
<script src="{{ asset('js/utils/utils.js') }}"></script>
<script src="{{ asset('js/exam-grading/exam-grading-v2.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>
@endsection