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

        {{-- Lớp (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">
                Lớp
            </span>
            <select id="class_search" multiple style="width: 100%;" class="select2-custom"></select>
        </div>

        {{-- Khóa học (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">
                Khóa học
            </span>
            <select id="course_search" multiple style="width: 100%;" class="select2-custom"></select>
        </div>

        {{-- Tên đề thi --}}
        <div class="col-span-1 md:col-span-1">
            <x-floating-input name="exam_name" id="exam_name" label="Tên đề thi" clearable />
        </div>
    </div>

    {{-- Hàng 2: Bộ lọc mở rộng --}}
    <div id="advanced-filters-row">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end mb-6">
            {{-- Trạng thái bài test (Dropdown) --}}
            <div class="col-span-1 md:col-span-1 relative">
                <x-floating-select name="teacher_status" id="teacher_status" label="Trạng thái bài test"
                    placeholder="Trạng thái bài test" :options="[
                        '' => 'Tất cả',
                        '1' => 'Chưa gán GV chấm',
                        '2' => 'Chưa được chấm lại',
                        '3' => 'Hoàn thành chấm'
                    ]" />
            </div>

            {{-- Trạng thái (Dropdown) --}}
            <div class="col-span-1 md:col-span-1">
                <x-floating-select name="score_status" id="score_status" label="Kết quả" :options="[
                        '' => 'Tất cả',
                        '0' => 'Không đạt',
                        '1' => 'Đạt'
                    ]" />
            </div>

            <div id="filter_start_take_exam_time" class="col-span-1 md:col-span-1 relative">
                <div class="flex items-center gap-1">
                    <input type="text" id="start_take_exam_time" placeholder="Thời gian bắt đầu làm 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-start-take-exam-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>

            <div id="filter_end_take_exam_time" class="col-span-1 md:col-span-1 relative">
                <div class="flex items-center gap-1">
                    <input type="text" id="end_take_exam_time" placeholder="Thời gian kết thúc làm 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-end-take-exam-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>
        </div>

        {{-- Nút Thao tác --}}
        <div class="flex justify-end space-x-2">
            {{-- Nút Export --}}
            <button id="btnExport"
                class="w-auto inline-flex justify-center py-2 px-3 border border-blue-600 shadow-sm text-sm font-medium rounded-md text-blue-600 bg-white hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out">
                EXPORT CSV
            </button>
            {{-- Nút Lọc --}}
            <button id="btnFilter"
                class="w-auto inline-flex justify-center py-2 px-3 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>