@extends('layouts-v2.app')

@section('title', 'Danh sách bài thi cần chấm')

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

    {{-- Khu vực Tìm kiếm và Lọc --}}
    <div class="bg-white shadow-md rounded-lg p-4 mb-8">
        <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-8 gap-4 items-end mb-4">
            {{-- ID Round --}}
            <div class="col-span-1 md:col-span-2"><x-floating-input name="idHistoryContest" id="idHistoryContest" label="ID History Contest" clearable /></div>

            {{-- Học viên (Dropdown) --}}
            <div class="col-span-1 md:col-span-2 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>

            {{-- Thời gian giao bài --}}
            <div id="filter_assign_time" class="col-span-1 md:col-span-2 relative flex items-center gap-1">
                <input type="text" id="assign_time" placeholder="Thời gian giao 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-assign-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>

            {{-- Thời gian nộp bài --}}
            <div id="filter_finish_time" class="col-span-1 md:col-span-2 relative flex items-center gap-1">
                <input type="text" id="finish_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-finish-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>
            
        </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">
                {{-- Dạng bài --}}
                <div id="filter_skills" 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">
                        Dạng bài
                    </span>
                    <select id="skills" multiple placeholder="Dạng bài" style="width: 100%;" class="select2-custom"></select>
                    <button id="delete_skills" 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>

                {{-- Loại đề --}}
                <div id="filter_contest_types" class="col-span-1 md:col-span-1 relative hidden mr-4">
                    <span class="custom-placeholder-package 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">
                        Loại đề
                    </span>

                    <select id="contest_types" multiple placeholder="Loại đề" style="width: 100%;" class="select2-custom"></select>
                    <button id="delete_contest_types" 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 gó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>
            </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/6">
                                ID History Contest
                            </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 w-1/6">
                                THỜI GIAN
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-sm font-semibold text-gray-500 uppercase tracking-wider">
                                DẠNG BÀI
                            </th>
                            <th scope="col" class="px-6 py-3 text-sm font-semibold text-gray-500 uppercase tracking-wider w-1/6 text-center">
                                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/6">
                                HÀNH ĐỘNG
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200" id="tbody-my-assessments">
                        <tr>
                            <td colspan="6" 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 class="mt-6 flex justify-center" id="pagination"></div>
    </div>

    <!-- Modal: Chuyển hoàn -->
    <div id="return-modal" class="fixed inset-0 z-50 overflow-y-auto hidden bg-gray-500 bg-opacity-75 transition-opacity" aria-labelledby="modal-title-return" role="dialog" aria-modal="true">

        <div class="flex items-center justify-center min-h-screen p-4">
            <div id="return-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">
                            Yêu cầu chuyển hoàn
                        </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-return-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="return-form" method="POST" class="mt-4">
                        @csrf
                        
                        <h4 class="text-base font-semibold text-gray-800 mt-6 mb-3">Hãy cho biết lí do bạn chuyển hoàn ?</h4>

                        {{-- Các lý do gợi ý (Tags) --}}
                        <div class="flex flex-wrap gap-2 mb-4" id="reason-tags">
                            @php
                                $reasons = [
                                    'Bài làm không thuộc chuyên môn của tôi',
                                    'Tôi không thể hoàn thành ngay bây giờ',
                                ];
                            @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="return_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-return-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-return"
                                    class="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 = {
        home: "{{ route('dashboard') }}",
        getMyAssessments: "{{ route('student-exam-details.getMyAssessments') }}",
        returnAssessment: "{{ route('student-exam-details.returnAssessment', ['id_history_contest' => 'ID']) }}",
        searchOAStudents: "{{ route('student.searchStudents') }}",
        getOASkills: "{{ route('skills.getSkills') }}",
        getOAContestTypes: "{{ route('contest-type.getContestTypes')}}",
        edit: "{{ route('student-exam-histories.edit', ['student_score_id' => 'ID']) }}",
    }
</script>
<script src="{{ asset('js/utils/utils.js') }}"></script>
<script src="{{ asset('js/student-exam-detail/student-exam-detail.assessment.js') }}"></script>

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