@extends('layouts-v2.app')

@section('title', 'Danh sách đề 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 đề thi</span>
    </div>
    <h1 class="text-3xl font-bold text-slate-900 mb-6 uppercase">Danh sách đề 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>
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
            {{-- ID Đề thi --}}
            <x-floating-input name="exam_id" id="exam_id" label="ID Đề thi" clearable />

            {{-- Tên Đề thi --}}
            <x-floating-input name="exam_name" id="exam_name" label="Tên đề thi" clearable />

            {{-- Thời gian tạo --}}
            <input type="text" id="created_time" placeholder="Thời gian tạo" 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">

            {{-- Trạng thái (Dropdown) --}}
            <x-floating-select 
                name="status"
                id="status"
                label="Trạng thái"
                :options="[
                    '1' => 'Hoạt động',
                    '0' => 'Không hoạt động'
                ]"
            />
   
        </div>
        {{-- Nút Xóa và Lọc --}}
        <div class="flex space-x-2 justify-end mt-4">
            <button type="button" id="reset_filter"
                    class="w-full md:w-auto inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-gray-500 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition duration-150 ease-in-out">
                XÓA
            </button>
            <button
                    id="btnFilter"
                    class="w-full md:w-auto inline-flex justify-center py-2 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>

    {{-- Khu vực Thao tác và Phân trang (Header của Bảng) --}}
    <div class="flex justify-between items-center mb-4">
        {{-- Số lượng hiển thị --}}
        <x-floating-select 
            id="perpage"
            name="perpage"
            class="w-40"
            label="Số lượng hiển thị"
            :options="[
                '' => '10',
                '20' => '20',
                '30' => '30',
                '50' => '50'
            ]"
        />

        {{-- Nút Thêm Đề thi --}}
        <button type="button" id="btn-add-exam"
                class="inline-flex items-center px-4 py-2 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">
            <svg class="w-5 h-5 -ml-1 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
            THÊM ĐỀ THI
        </button>
    </div>

    {{-- Bảng Danh sách Đề thi --}}
    <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">
                                ĐỀ 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 TẠO
                            </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
                            </th>
                            <th scope="col" class="px-6 py-3 text-center text-sm font-semibold text-gray-500 uppercase tracking-wider">
                                THAO TÁC
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200" id="tbody-oa-exams">
                        <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>

    {{-- Phân trang --}}
    <div class="mt-6 flex justify-center" id="pagination"></div>
     
    <!-- Modal Cập nhật Exam -->
    <div id="edit-exam-modal" class="fixed inset-0 z-50 overflow-y-auto hidden bg-gray-500 bg-opacity-75 transition-opacity" aria-labelledby="modal-title-edit" role="dialog" aria-modal="true">

        <div class="flex items-center justify-center min-h-screen p-4">
            <div id="edit-exam-content" class="relative w-full max-w-md bg-white rounded-xl shadow-xl transform transition-all overflow-hidden">

                <div class="bg-white p-6">
                    {{-- Modal Header --}}
                    <div class="flex justify-between items-center mb-6">
                        <h3 class="text-xl font-semibold text-gray-900" id="modal-title-edit">
                            Cập nhật đề thi
                        </h3>
                        {{-- Nút Đóng --}}
                        <button type="button" 
                                class="btn-cancel-edit-exam text-gray-400 hover:text-gray-500 p-1 rounded-full hover:bg-gray-100">
                            <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>

                    {{-- Modal Body (Form) --}}
                    <form id="edit-exam-form" method="POST">
                        @csrf
                        <input type="hidden" name="exam_id" id="edit-exam-id" value=""> 

                        {{-- 1. Tên đề thi --}}
                        <div class="mb-4" id="form-group-title">
                            <x-floating-input name="title" label="Tên đề thi *" id="edit-exam-title" />
                        </div>

                        {{-- 2. Mô tả --}}
                        <div class="mb-4" id="form-group-description">
                            <textarea id="edit-exam-description" name="description" rows="4" placeholder="Mô tả"
                                    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">[Mô tả hiện tại]</textarea>
                            <x-form-error field="description" />
                        </div>
                        
                        {{-- 5. Trạng thái --}}
                        <div class="mb-6" id="form-group-is_active">
                            <x-floating-select 
                                name="is_active"
                                id="edit-exam-status"
                                label="Trạng thái"
                                :options="[
                                    '1' => 'Hoạt động',
                                    '0' => 'Không hoạt động'
                                ]"
                            />
                        </div>

                        {{-- Các trường khác giữ nguyên... --}}
                        <div class="mb-4">
                            <input id="edit-ems-exam" type="text" placeholder="Đề thi trên EMS" disabled
                                    class="w-full border-gray-300 rounded-lg shadow-sm py-3 px-4 text-sm !bg-gray-100 text-gray-500">
                        </div>
                        <div class="mb-4">
                            <label for="edit-exam-duration" class="sr-only">Thời gian làm bài</label>
                            <div class="flex rounded-lg shadow-sm border border-gray-300">
                                <input id="edit-exam-duration" disabled
                                    class="flex-1 min-w-0 block w-full rounded-l-lg py-2.5 px-4 text-sm border-none !bg-gray-100 text-gray-500"
                                    aria-label="Thời gian làm bài" min="0">
                                <span class="inline-flex items-center px-4 rounded-r-lg border border-transparent bg-gray-50 text-gray-500 text-sm font-medium">
                                    phút
                                </span>
                            </div>
                        </div>

                        {{-- Modal Footer (Buttons) --}}
                        <div class="flex space-x-3">
                            <button type="button" 
                                    class="btn-cancel-edit-exam flex-1 justify-center py-2.5 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-gray-700 bg-gray-200 hover:bg-gray-300 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-update-exam"
                                    class="disabled:opacity-50 disabled:cursor-not-allowed flex-1 justify-center py-2.5 px-4 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">
                                CẬP NHẬT
                            </button>
                        </div>
                    </form>

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

    <!-- Modal hiển thị danh sách đề thi phía EMS -->
    <div id="ems-exams-modal" class="fixed inset-0 z-50 overflow-y-auto hidden transition-opacity" aria-labelledby="modal-title-ems" role="dialog" aria-modal="true">

        <div class="fixed inset-0 bg-gray-500 bg-opacity-75" id="ems-exams-overlay"></div>

        {{-- Panel (Nội dung Modal) - Dùng flex để căn giữa --}}
        <div class="flex items-center justify-center min-h-screen p-4">
            {{-- Tăng kích thước modal lên max-w-4xl để chứa bảng lớn --}}
            <div class="relative w-full max-w-5xl bg-white rounded-xl shadow-xl transform transition-all overflow-hidden">

                <div class="p-8 bg-white min-h-[50vh]"> {{-- Điều chỉnh padding và min-height --}}

                    {{-- Modal Header (Bỏ Breadcrumb) --}}
                    <div class="flex justify-between items-center mb-6">
                        <h1 class="text-2xl font-semibold">Danh sách đề thi trên EMS</h1>
                        
                        {{-- Nút Đóng Modal --}}
                        <button type="button" id="close-ems-exams-modal"
                                class="text-gray-400 hover:text-gray-500 p-1 rounded-full hover:bg-gray-100">
                            <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>

                    <div class="bg-gray-50 rounded-xl p-4 shadow-inner border border-gray-200 mb-6">
                        <div class="flex items-end justify-between gap-4">
                            <div class="flex items-end gap-4 flex-grow">
                                {{-- Tên hoặc ID đề thi --}}
                                <div class="flex-1 min-w-[200px]">
                                    <label for="search-ems" class="text-sm font-medium text-gray-700">Tên hoặc ID đề thi</label>
                                    <x-floating-input id="search-ems" name="search-ems" clearable/>
                                </div>

                                {{-- Hiển thị --}}
                                <div class="w-24">
                                    <label for="perpage-ems" class="text-sm font-medium text-gray-700">Hiển thị</label>
                                    <x-floating-select 
                                    name="perpage-ems"
                                    id="perpage-ems"
                                    :options="[
                                        '' => '10',
                                        '25' => '25',
                                        '50' => '50'
                                    ]"
                                />
                                </div>
                            </div>

                            {{-- Nút Lọc --}}
                            <div class="w-24">
                                <button class="w-full bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition duration-150" id="btnFilter-ems">
                                    Lọc
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="mt-6 overflow-x-auto border rounded-xl max-h-[50vh] overflow-y-auto">
                        <table class="min-w-full bg-white">
                            {{-- Header --}}
                            <thead class="bg-gray-100 text-gray-600 font-medium border-b sticky top-0">
                                <tr>
                                    <th class="px-6 py-3 text-left text-sm">Tên đề thi</th>
                                    <th class="px-6 py-3 text-left text-sm">Số vòng thi</th>
                                    <th class="px-6 py-3 text-left text-sm">Thời gian thi (phút)</th>
                                    <th class="px-6 py-3 text-left text-sm">Loại đề thi</th>
                                    <th class="px-6 py-3 text-right text-sm">Thao tác</th>
                                </tr>
                            </thead>

                            {{-- Body (Dữ liệu mẫu) --}}
                            <tbody class="text-gray-700 divide-y divide-gray-200" id="tbody-ems-exams"></tbody>
                        </table>
                    </div>

                    {{-- Phân trang (Pagination) --}}
                    <div class="mt-6 flex justify-center" id="pagination-ems"></div>
                </div>
            </div>
        </div>
    </div>
</div>

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

<script>
    window.routes = {
        getOAExams: "{{ route('oa-exams.getOAExams') }}",
        getEmsExams: "{{ route('ems-exams.getEmsExams') }}",
        addOAExam: "{{ route('oa-exams.store') }}",
        getOAExam: "{{ route('oa-exams.getOAExam', ['id' => ':id']) }}",
        updateOAExam: "{{ route('oa-exams.update', ['id' => ':id']) }}",
        deleteOAExam: "{{ route('oa-exams.destroy', ['id' => ':id']) }}",
    }
</script>

<script>
    $(document).ready(function() {
        
        loadOAExams();
        
        // // Lọc danh sách ems
        // $('#btnFilter-ems').click(function() {
        //     loadEmsExams();
        // });

        // // Hiển thị danh sách đề thi theo số phần tử 1 trang ems
        // $('#perpage-ems').change(function() {
        //     loadEmsExams();
        // });
    })
</script>
@endsection