@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>

    {{-- 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>
        
        {{-- Hàng 1: Bộ lọc cơ bản --}}
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end mb-4">
            {{-- ID Bài thi --}}
            <div class="col-span-1 md:col-span-1">
                <x-floating-input name="student_score_id" id="student_score_id" label="ID bài thi" clearable />
            </div>

            {{-- ID Round --}}
            <!-- <div class="col-span-1 md:col-span-1">
                <x-floating-input name="student_exam_detail_id" id="student_exam_detail_id" label="ID Round" clearable />
            </div> -->

            {{-- Trạng thái (Dropdown) --}}
            <!-- <div class="col-span-1 md:col-span-1">
                <x-floating-select 
                    name="exam_status"
                    id="exam_status"
                    label="Trạng thái"
                    :options="[
                        'pending' => 'Đang tiến hành',
                        'completed' => 'Hoàn thành'
                    ]"
                />
            </div> -->

            {{-- Học viên (Dropdown) --}}
            <div class="col-span-1 md:col-span-1 relative">
                <span class="custom-placeholder 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" multiple style="width: 100%;" class="select2-custom"></select>
            </div>

            <div class="col-span-1 md:col-span-1 relative">
                <x-floating-select 
                    name="contest_type"
                    id="contest_type"
                    label="Dạng đề"
                    placeholder="Dạng đề"
                    :options="['' => 'Tất cả'] + config('ems.contest_type')"
                    class="w-full"
                />
            </div>

            {{-- CẦN CHẤM HAY KO KO CẦN CHẤM (Dropdown) --}}
            <div class="col-span-1 md:col-span-1 relative">
                <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ần chấm',
                        '1' => 'Cần chấm'
                    ]"
                />
            </div>
        </div>

        {{-- Hàng 2: Bộ lọc mở rộng (Phần này sẽ ẩn/hiện bằng JS) --}}
        <div id="advanced-filters-row">
            
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end mb-6">
                <!-- {{-- Thời gian nộp bài --}}
                <div id="filter_submission_time" class="col-span-1 md:col-span-1 relative hidden mr-4">
                    <div class="flex items-center gap-1">
                        <input type="text" id="submission_time" placeholder="Thời gian nộp bài" class="w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500 py-2.5 px-4 text-sm outline-none border">
                        <button id="btn-clear-submission-time" class="hidden"> 
                            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><style>@keyframes rotate-tr{0%{transform:rotate(0)}to{transform:rotate(20deg)}}</style><path fill="#0A0A30" d="M16.773 10.083a.75.75 0 00-1.49-.166l1.49.166zm-1.535 7.027l.745.083-.745-.083zm-6.198 0l-.745.083.745-.083zm-.045-7.193a.75.75 0 00-1.49.166l1.49-.166zm5.249 7.333h-4.21v1.5h4.21v-1.5zm1.038-7.333l-.79 7.11 1.491.166.79-7.11-1.49-.166zm-5.497 7.11l-.79-7.11-1.49.166.79 7.11 1.49-.165zm.249.223a.25.25 0 01-.249-.222l-1.49.165a1.75 1.75 0 001.739 1.557v-1.5zm4.21 1.5c.892 0 1.64-.67 1.74-1.557l-1.492-.165a.25.25 0 01-.248.222v1.5z"/><path fill="#265BFF" fill-rule="evenodd" d="M11 6a1 1 0 00-1 1v.25H7a.75.75 0 000 1.5h10a.75.75 0 000-1.5h-3V7a1 1 0 00-1-1h-2z" clip-rule="evenodd" style="animation:rotate-tr 1s cubic-bezier(1,-.28,.01,1.13) infinite alternate-reverse both;transform-origin:right center"/></svg>
                        </button>
                    </div>
                    <button id="delete_submission_time" 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 thời gian nộp bài">
                        <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> -->

                {{-- 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ần chấm',
                            '1' => 'Cần chấm'
                        ]"
                    />
                    
                    <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 dạng đề">
                        <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> -->

                {{-- Dạng đề (Dropdown) --}}
                <!-- <div id="filter_contest_type" class="col-span-1 md:col-span-1 relative hidden mr-4">
                    <x-floating-select 
                        name="contest_type"
                        id="contest_type"
                        label="Dạng đề"
                        placeholder="Dạng đề"
                        :options="['' => 'Tất cả'] + config('ems.contest_type')"
                        class="w-full"
                    />
                    
                    <button id="delete_contest_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 dạng đề">
                        <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="custom-placeholder 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 đề thi">
                        <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 --}}
    <div class="flex flex-col">
        <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
            <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">
                    <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">
                                    BÀI THI
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-sm font-semibold text-gray-500 uppercase tracking-wider">
                                    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">
                                    THỜI GIAN
                                </th>
                                <!-- <th scope="col" class="px-6 py-3 text-left text-sm font-semibold text-gray-500 uppercase tracking-wider">
                                    CẦN CHẤM
                                </th> -->
                                <th scope="col" class="px-6 py-3 text-right text-sm font-semibold text-gray-500 uppercase tracking-wider">
                                    HÀNH ĐỘNG
                                </th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200" id="tbody-exam-histories">
                            <tr>
                                <td colspan="5" 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>

<script>
    window.routes = {
        searchOAStudents: "{{ route('student.searchStudents') }}",
        getOAExamHistories: "{{ route('exam-histories.getExamHistories') }}",
        getOAExamDetail: "{{ route('exam-histories.detail', ['id' => 'ID']) }}",
        studentAvatar: "{{ asset('images/student_avatar.jpg') }}",
        submitExamNeedAssignment: "{{ route('exam-histories.submitExamNeedAssignment', ['student_score_id' => 'ID']) }}"
    }
</script>

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

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