@extends('layouts-v2.app')

@section('title', 'Bài thi cần chấm của tôi')

@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>Bài thi cần chấm của tôi</span>
    </div>
    <h1 class="text-3xl font-bold text-slate-900 mb-6 uppercase">Bài thi cần chấm của tôi</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-2 gap-4 items-end mb-4">
            {{-- ID Round --}}
            <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>

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

            <!-- {{-- 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="hidden 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-between 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'
            ]"
        />

        <button id="btnExportExcel" type="button" disabled
                class="hidden disabled:opacity-50 disabled:cursor-not-allowed w-auto inline-flex justify-center items-center py-2.5 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition duration-150 ease-in-out">
            <i data-lucide="sheet" class="w-4 h-4 mr-2"></i>
            EXPORT
        </button>
    </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 whitespace-nowrap">
                                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/6 whitespace-nowrap">
                                ID BÀI THI
                            </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 whitespace-nowrap">
                                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-left">
                                TRẠNG THÁI CHẤM
                            </th>
                            <th scope="col" class="px-6 py-3 text-center 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>

@include('exam-history.modal.exam-detail')

<!-- Modal Edit Writing -->
<div id="editModal" class="hidden fixed inset-0 z-[60] overflow-y-auto" aria-modal="true">
    <div class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm" id="editModalBackdrop"></div>
    <div class="flex min-h-full items-center justify-center p-4">
        <div class="relative bg-white rounded-2xl shadow-2xl w-full max-w-lg overflow-hidden animate-in zoom-in-95 duration-200">
            <div class="flex items-center justify-between px-6 py-4 border-b border-slate-100 bg-slate-50/50">
                <h3 class="text-lg font-bold text-slate-900 flex items-center gap-2">
                    <i data-lucide="edit" class="w-5 h-5 text-blue-600"></i> Chỉnh sửa
                </h3>
                <button type="button" class="p-2 hover:bg-slate-200 rounded-full transition-colors" onclick="closeEditModal()">
                    <i data-lucide="x" class="w-5 h-5 text-slate-500"></i>
                </button>
            </div>
            <div class="p-6 space-y-5">
                <div id="editForm" class="space-y-4">
                    <input type="hidden" id="editPartNumber">
                    <input type="hidden" id="editIdQuestion">
                    <div id="editScoreGroup">
                        <label class="block text-sm font-bold text-slate-700 mb-2">Điểm thành phần (0 - 10)</label>
                        <input type="number" id="editScore" min="0" max="10" step="0.5" 
                            class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-lg font-bold text-blue-700 focus:ring-4 focus:ring-blue-100 focus:border-blue-500 outline-none transition-all">
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-slate-700 mb-2">Nội dung nhận xét/Sửa lỗi</label>
                        <textarea id="editComment" rows="6" 
                            class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:ring-4 focus:ring-blue-100 focus:border-blue-500 outline-none resize-none transition-all leading-relaxed"></textarea>
                    </div>
                </div>
            </div>
            <div class="flex justify-end gap-3 px-6 py-4 border-t border-slate-100 bg-slate-50/80">
                <button type="button" onclick="closeEditModal()" class="px-5 py-2.5 text-sm font-bold text-slate-600 hover:text-slate-800">Hủy</button>
                <button type="button" onclick="saveEditWriting()" class="px-6 py-2.5 text-sm font-bold text-white bg-blue-600 rounded-xl hover:bg-blue-700 shadow-lg shadow-blue-200 transition-all">Lưu</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Manual Writing Score -->
<div id="manualWritingModal" class="hidden fixed inset-0 z-[60] overflow-y-auto">
    <div class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm"></div>

    <div class="flex min-h-full items-center justify-center p-4">
        <div class="relative bg-white rounded-2xl shadow-2xl w-full max-w-md overflow-hidden">

            <div class="flex items-center justify-between px-6 py-4 border-b bg-slate-50">
                <h3 class="text-lg font-bold text-slate-900 flex items-center gap-2">
                    <i data-lucide="edit" class="w-5 h-5 text-blue-600"></i>
                    Chấm điểm
                </h3>

                <button onclick="closeManualWritingModal()">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>

            <div class="p-6 space-y-4">

                <input type="hidden" id="manualQuestionId">
                <input type="hidden" id="manualTaskNumber">

                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">
                        Điểm Task (0 - 10)
                    </label>

                    <input 
                        type="number"
                        id="manualScore"
                        min="0"
                        max="10"
                        step="0.5"
                        class="w-full px-4 py-3 border rounded-xl text-lg font-bold text-blue-700"
                    >
                </div>

            </div>

            <div class="flex justify-end gap-3 px-6 py-4 border-t bg-slate-50">

                <button onclick="closeManualWritingModal()" 
                    class="px-5 py-2 text-sm font-bold text-slate-600">
                    Hủy
                </button>

                <button onclick="saveManualWritingScore()" 
                    class="px-6 py-2 text-sm font-bold text-white bg-blue-600 rounded-xl">
                    Lưu
                </button>

            </div>

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

<!-- Modal Edit Speaking -->
<div id="editSpeakingModal" class="hidden fixed inset-0 z-[60] overflow-y-auto" aria-modal="true">
    <div class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm" id="editSpeakingModalBackdrop"></div>
    <div class="flex min-h-full items-center justify-center p-4">
        <div class="relative bg-white rounded-2xl shadow-2xl w-full max-w-md overflow-hidden animate-in zoom-in-95 duration-200">
            <div class="flex items-center justify-between px-6 py-4 border-b border-slate-100 bg-slate-50/50">
                <h3 class="text-lg font-bold text-slate-900 flex items-center gap-2">
                    <i data-lucide="mic" class="w-5 h-5 text-blue-600"></i> Chỉnh sửa
                </h3>
                <button type="button" class="p-2 hover:bg-slate-200 rounded-full" onclick="closeEditSpeakingModal()">
                    <i data-lucide="x" class="w-5 h-5 text-slate-500"></i>
                </button>
            </div>
            <div class="p-6">
                <div id="editSpeakingForm">
                    <input type="hidden" id="editSpeakingQuestionId">
                    <label class="block text-sm font-bold text-slate-700 mb-2">Điểm cho câu hỏi này</label>
                    <input type="number" id="editSpeakingScore" min="0" max="10" step="0.5" 
                        class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-2xl font-black text-blue-700 text-center focus:ring-4 focus:ring-blue-100 outline-none">
                    <p class="mt-3 text-xs text-slate-400 text-center text-balance italic">Lưu ý: Điểm sẽ tự động tính lại vào điểm tổng Part sau khi bạn nhấn Lưu.</p>
                </div>
            </div>
            <div class="flex justify-end gap-3 px-6 py-4 border-t border-slate-100 bg-slate-50">
                <button type="button" onclick="closeEditSpeakingModal()" class="px-5 py-2.5 text-sm font-bold text-slate-600">Hủy</button>
                <button type="button" onclick="saveEditSpeaking()" class="px-6 py-2.5 text-sm font-bold text-white bg-blue-600 rounded-xl hover:bg-blue-700 shadow-lg shadow-blue-200">Lưu</button>
            </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']) }}",
        studentAvatar: "{{ asset('images/student_avatar.jpg') }}"
    }
</script>
<script src="{{ asset('js/utils/utils.js') }}"></script>
<script src="{{ asset('js/exam-history/exam-detail-modal.js') }}"></script>
<script src="{{ asset('js/exam-history/exam-detail-modal.edit.js') }}"></script>
<script src="{{ asset('js/student-exam-detail/student-exam-detail.assessment-v2.js') }}"></script>

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