@extends('layouts-v2.app')

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

@section('content')
<div>
    <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="calendar-days" 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ý lịch sử làm bài
        </h1>
    </div>

    {{-- Khu vực Bộ lọc (Card) --}}
    <div class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm mb-6">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            {{-- Lọc Bài kiểm tra --}}
            <div class="quiz-ts">
                <label class="block text-xs font-semibold text-slate-600 mb-1">Bài kiểm tra</label>
                <select id="quiz_search" multiple placeholder="Tìm bài kiểm tra..."></select>
            </div>

            {{-- Lọc Trạng thái Đạt/Không đạt --}}
            <div class="status-ts">
                <label class="block text-xs font-semibold text-slate-600 mb-1">Trạng thái hoàn thành</label>
                <select id="status_search" multiple placeholder="Chọn trạng thái..."></select>
            </div>

            {{-- Lọc Thời gian nộp bài --}}
            <div>
                <label class="block text-xs font-semibold text-slate-600 mb-1">Từ ngày</label>
                <div class="relative">
                    <input type="text" id="start_take_exam_time" class="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white" placeholder="DD-MM-YYYY">
                    <button type="button" id="btn-clear-start-take-exam-time" class="absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 hidden">
                        <i data-lucide="x" class="w-4 h-4"></i>
                    </button>
                </div>
            </div>
            <div>
                <label class="block text-xs font-semibold text-slate-600 mb-1">Đến ngày</label>
                <div class="relative">
                    <input type="text" id="end_take_exam_time" class="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white" placeholder="DD-MM-YYYY">
                    <button type="button" id="btn-clear-end-take-exam-time" class="absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 hidden">
                        <i data-lucide="x" class="w-4 h-4"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Khu vực Thao tác (Header của Bảng) --}}
    <div class="flex justify-between items-center mb-4">
        <div class="flex items-center gap-3">
            {{-- 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>

        <div class="hidden flex items-center gap-2">
            <button id="btn-export-history-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 transition-all font-semibold text-sm">
                <i data-lucide="download" class="w-4 h-4"></i>
                <span>Xuất dữ liệu</span>
            </button>
        </div>
    </div>

    {{-- Bảng Danh sách Bài thi --}}
    <div id="history-table-container" class="flex flex-col">
        <div class="-my-2 overflow-x-auto custom-scrollbar sm:-mx-6 lg:-mx-8" id="histories-container">
            <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
                <div class="table-container 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-slate-50/90 backdrop-blur-sm sticky top-0 z-10">
                            <tr>
                                <th class="px-6 py-3.5 text-left text-[11px] font-bold text-slate-500 uppercase tracking-widest border-b-2 border-slate-200 whitespace-nowrap">ID</th>
                                <th class="px-6 py-3.5 text-left text-[11px] font-bold text-slate-500 uppercase tracking-widest border-b-2 border-slate-200 whitespace-nowrap">Học viên</th>
                                <th class="px-6 py-3.5 text-left text-[11px] font-bold text-slate-500 uppercase tracking-widest border-b-2 border-slate-200 whitespace-nowrap">Bài kiểm tra</th>
                                <th class="px-6 py-3.5 text-center text-[11px] font-bold text-slate-500 uppercase tracking-widest border-b-2 border-slate-200 whitespace-nowrap">Trạng thái</th>
                                <th class="px-6 py-3.5 text-left text-[11px] font-bold text-slate-500 uppercase tracking-widest border-b-2 border-slate-200 whitespace-nowrap">Thời gian làm bài</th>
                                <th class="px-6 py-3.5 text-center text-[11px] font-bold text-slate-500 uppercase tracking-widest border-b-2 border-slate-200 whitespace-nowrap">Hành động</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-100" id="tbody-exam-histories">
                            </tbody>
                    </table>
                </div>
            </div>
        </div>
        
        {{-- Phân trang (Card) --}}
        <div class="bg-white px-5 py-3 rounded-xl border border-slate-200 shadow-sm mt-4">
            <div class="flex items-center justify-between" id="pagination-exam-histories"></div>
        </div>
    </div>

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

@include('exam-history.modal.exam-detail')
@include('exam-history.modal.reassign-teacher')
@include('exam-schedule-result.modal.deadline')

<script>
    window.routes = {
        searchQuizzes: "{{ route('course.searchQuizzes') }}",
        getBasicExamHistories: "{{ route('exam-histories.getBasicExamHistories') }}",
        studentAvatar: "{{ asset('images/student_avatar.jpg') }}",
        searchTeachers: "{{ route('teacher.searchTeachers') }}",
        assignTeacher: "{{ route('student-exam-histories.assignTeacher') }}",
    }
</script>

<script src="{{ asset('js/utils/utils.js') }}"></script>
<script src="{{ asset('js/basic-exam-history/basic-exam-history.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>
@endsection