@extends('layouts-v2.app')

@section('title', 'Bài thi theo round')

@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 theo round</span>
    </div>
    <h1 class="text-3xl font-bold text-slate-900 mb-6 uppercase">Danh sách bài thi theo round</h1>

    {{-- Khu vực Tìm kiếm và Lọc --}}
    <div class="bg-white shadow-md rounded-lg p-4 mb-6">
        <h2 class="text-lg font-semibold text-gray-800 mb-4">Tìm kiếm</h2>
        <div class="grid grid-cols-1 md:grid-cols-6 gap-4 items-end mb-4">
            {{-- ID History Contest --}}
            <div class="col-span-1 md:col-span-3">
                <x-floating-input name="idHistoryContest" id="idHistoryContest" label="ID History Contest" clearable="true" />
            </div>

            {{-- Học viên (Dropdown) --}}
            <div class="col-span-1 md:col-span-3 relative">
                <span class="absolute left-3 -top-1/5 -translate-y-1/2 text-gray-500 pointer-events-none z-10 text-xs bg-white p-1.25">
                    Học viên
                </span>
                <select id="student_search" name="student_search" multiple style="width: 100%" class="border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"></select>
            </div>
        </div>

        {{-- Lọc nâng cao --}}
        <div id="advanced-filters-row">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end mb-6">
                {{-- CẦN CHẤM HAY KO KO CẦN CHẤM (Dropdown) --}}
                <div id="filter_is_need_assign" class="col-span-1 md:col-span-1 relative  hidden mr-4">
                    
                    <x-floating-select 
                        name="is_need_assign"
                        id="is_need_assign"
                        label="Yêu cầu chấm"
                        placeholder="Yêu cầu chấm"
                        :options="[
                            '' => 'Tất cả',
                            '0' => 'Không được yêu cầu',
                            '1' => 'Được yêu cầu '
                        ]"
                    />
                    
                    <button id="delete_is_need_assign" type="button" class="absolute -right-10 inset-y-0 mr-1 p-2 text-gray-400 hover:text-gray-600" title="Xóa bộ lọc">
                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
                    </button>
                </div>

                {{-- Trạng thái phân công (Dropdown) --}}
                <div id="filter_teacher_assign_at" class="col-span-1 md:col-span-1 relative  hidden mr-4">
                    <x-floating-select 
                        name="teacher_assign_at"
                        id="teacher_assign_at"
                        label="Trạng thái phân công"
                        placeholder="Trạng thái phân công"
                        :options="[
                            '' => 'Tất cả',
                            '0' => 'Chưa phân công',
                            '1' => 'Đã phân công'
                        ]"
                        class="w-full"
                    />
                    
                    <button id="delete_exam_type" type="button" class="absolute -right-10 inset-y-0 mr-1 p-2 text-gray-400 hover:text-gray-600" title="Xóa bộ lọc">
                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
                    </button>
                </div>

                {{-- Trạng thái bài thi (Dropdown) --}}
                <!-- <div id="filter_exam_status" class="col-span-1 md:col-span-1 relative  hidden mr-4">
                    <x-floating-select 
                        name="exam_status"
                        id="exam_status"
                        label="Trạng thái bài thi"
                        placeholder="Trạng thái bài thi"
                        :options="[
                            '' => 'Tất cả',
                            '0' => 'Chưa hoàn thành',
                            '1' => 'Đã hoàn thành'
                        ]"
                        class="w-full"
                    />
                    
                    <button id="delete_exam_type" type="button" class="absolute -right-10 inset-y-0 mr-1 p-2 text-gray-400 hover:text-gray-600" title="Xóa bộ lọc">
                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
                    </button>
                </div> -->

                {{-- Trạng thái chấm (Dropdown) --}}
                <div id="filter_teacher_assessment_status" class="col-span-1 md:col-span-1 relative  hidden mr-4">
                    <x-floating-select 
                        name="teacher_assessment_status"
                        id="teacher_assessment_status"
                        label="Trạng thái chấm"
                        placeholder="Trạng thái chấm"
                        :options="[
                            '' => 'Tất cả',
                            '0' => 'Chưa chấm',
                            '1' => 'Đang chấm',
                            '2' => 'Hoàn thành'
                        ]"
                        class="w-full"
                    />
                    
                    <button id="delete_exam_type" type="button" class="absolute -right-10 inset-y-0 mr-1 p-2 text-gray-400 hover:text-gray-600" title="Xóa bộ lọc">
                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
                    </button>
                </div>

                <!-- {{-- Đề thi (Dropdown/Search) --}}
                <div id="filter_exam_search" class="col-span-1 md:col-span-1 relative hidden mr-4">
                    <span class="absolute left-3 -top-1/5 -translate-y-1/2 text-gray-500 pointer-events-none z-10 text-xs bg-white p-1.25">
                        Đề thi
                    </span>
                    <select id="exam_search" multiple placeholder="Đề thi" style="width: 100%;" class="select2-custom"></select>
                    <button id="delete_exam_search" type="button" class="absolute -right-10 inset-y-0 mr-1 p-2 text-gray-400 hover:text-gray-600" title="Xóa bộ lọc">
                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
                    </button>
                </div> -->

                {{-- Đã phân công cho (Dropdown/Search) --}}
                <div id="filter_teacher_search" class="col-span-1 md:col-span-1 relative hidden mr-4">
                    <span class="absolute left-3 -top-1/5 -translate-y-1/2 text-gray-500 pointer-events-none z-10 text-xs bg-white p-1.25">
                        Đã phân công cho
                    </span>

                    <select id="teacher_search" multiple placeholder="Phân công cho" style="width: 100%;" class="select2-custom"></select>
                    <button id="delete_teacher_search" type="button" class="absolute -right-10 inset-y-0 mr-1 p-2 text-gray-400 hover:text-gray-600" title="Xóa bộ lọc">
                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
                    </button>
                </div>
            </div>

            {{-- Nút Thao tác --}}
            <div class="flex justify-end space-x-2">
                <div class="relative">
                    <button type="button" id="btn-add-filter"
                            class="w-auto inline-flex justify-center py-2.5 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out">
                        THÊM BỘ LỌC
                    </button>
                    <ul id="list-filter" class="absolute z-10 mt-1 shadow-md border border-gray-50 bg-white rounded-md w-full max-h-48 overflow-y-auto hidden"></ul>
                </div>
                {{-- Nút Lọc --}}
                <button id="btnFilter"
                        class="w-auto inline-flex justify-center py-2.5 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out">
                    LỌC
                </button>
            </div>
        </div>
    </div>

    {{-- 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 cần Assign --}}
    <div class="flex flex-col">
        <div class="py-2 align-middle inline-block min-w-full">
            <div class="shadow-md border border-gray-100 ">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-sm font-semibold text-gray-500 uppercase tracking-wider w-1/5">
                                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/4">
                                PHẦN THI
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-sm font-semibold text-gray-500 uppercase tracking-wider">
                                THỜI GIAN
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-sm font-semibold text-gray-500 uppercase tracking-wider">
                                ĐIỂM
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-sm font-semibold text-gray-500 uppercase tracking-wider w-1/5">
                                TRẠNG THÁI BÀI
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-sm font-semibold text-gray-500 uppercase tracking-wider">
                                TRẠNG THÁI CHẤM
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-sm font-semibold text-gray-500 uppercase tracking-wider w-1/5">
                                GÁN GV CHẤM
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200" id="tbody-student-exam-details">
                        <tr>
                            <td colspan="7" 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>

    <!-- Modal: Gán lại giáo viên -->
    <div id="reassign-modal" class="fixed inset-0 z-50 overflow-y-auto hidden bg-gray-500 bg-opacity-75 transition-opacity" aria-labelledby="modal-title-reassign" role="dialog" aria-modal="true">

        {{-- Panel (Nội dung Modal) --}}
        <div class="flex items-center justify-center min-h-screen p-4">
            {{-- Kích thước max-w-md cho modal form đơn giản --}}
            <div id="reassign-modal-content" class="relative w-full max-w-2xl bg-white rounded-xl shadow-xl transform transition-all overflow-hidden">

                <div class="bg-white p-6 rounded-xl shadow-xl">
                    {{-- Modal Header --}}
                    <div class="flex justify-between items-center pb-4 border-b">
                        <h3 class="text-xl font-semibold text-gray-900">
                            Phân công lại
                        </h3>
                        {{-- Nút Đóng --}}
                        <button type="button"
                                class="text-gray-400 hover:text-gray-500 p-1 rounded-full hover:bg-gray-100 btn-close-reassign-modal">
                            <span class="sr-only">Đóng</span>
                            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>

                    <form id="reassign-form" method="POST" class="mt-4">
                        @csrf
                        
                        {{-- Thông tin người chuyển và nhận --}}
                        <div class="mb-4 flex items-center space-x-3">
                            <span class="text-base text-gray-700">từ</span>
                            
                            {{-- Người chuyển (Hiển thị tên/avatar) --}}
                            <div class="inline-flex items-center px-2 py-1 bg-gray-200 rounded-full text-sm font-medium text-gray-800">
                                <img src="https://i.pravatar.cc/32?img=1" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
                                <span id="current_teacher"></span>
                            </div>
                            
                            <span class="text-base text-gray-700">giao cho</span>
                            
                            {{-- Người nhận (Dropdown) --}}
                            <div class="flex-1">
                                <select id="reassign-teacher-search" style="width: 100%;"></select>
                            </div>
                        </div>
                        
                        <h4 class="text-base font-semibold text-gray-800 mt-6 mb-3">Hãy cho biết lí do bạn phân công lại?</h4>

                        {{-- Các lý do gợi ý (Tags) --}}
                        <div class="flex flex-wrap gap-2 mb-4" id="reason-tags">
                            @php
                                $reasons = [
                                    'Tôi đã có nhầm lẫn lần trước đó',
                                    'Giáo viên hiện tại không thể thực hiện chấm được lúc này',
                                    'Bài thi đã quá hạn chấm',
                                ];
                            @endphp
                            
                            @foreach ($reasons as $reason)
                                <button type="button" data-reason="{{ $reason }}"
                                        class="tag-reason inline-flex items-center px-3 py-1 text-sm font-medium rounded-full bg-gray-100 text-gray-700 border border-gray-300 hover:bg-blue-100 hover:text-blue-700 transition duration-150">
                                    {{ $reason }}
                                </button>
                            @endforeach
                        </div>

                        {{-- Hộp văn bản Lý do --}}
                        <div class="mb-6">
                            <textarea id="reassign_reason" name="reason" rows="4" placeholder="Lý do" required
                                    class="w-full border border-gray-300 outline-none rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500 py-2.5 px-4 text-sm"></textarea>
                        </div>

                        {{-- Modal Footer (Buttons) --}}
                        <div class="flex justify-end space-x-3 pt-4 border-t">
                            <button type="button"
                                    class="btn-close-reassign-modal w-28 justify-center !py-2.5 px-2 border border-transparent rounded-lg shadow-sm text-sm font-medium text-gray-700 bg-gray-300 hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition duration-150 ease-in-out">
                                HỦY
                            </button>
                            <button id="btn-submit-reassign-teacher"
                                    class="disabled:opacity-50 disabled:cursor-not-allowed w-48 justify-center !py-2.5 px-2 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out">
                                XÁC NHẬN
                            </button>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>

<script>
    window.routes = {
        searchStudents: "{{ route('student.searchStudents') }}",
        searchTeachers: "{{ route('teacher.searchTeachers') }}",
        getStudentExamDetails: "{{ route('student-exam-details.getStudentExamDetails') }}",
        assignTeacher: "{{ route('student-exam-histories.assignTeacher', ['id_history_contest' => ':id']) }}",
        studentAvatar: "{{ asset('images/student_avatar.jpg') }}"
    }
</script>
<script src="{{ asset('js/utils/utils.js') }}"></script>
<script src="{{ asset('js/exam-history/exam-history.assessment.js') }}"></script>

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