@php
  use Carbon\Carbon;
  $currentDate = \Carbon\Carbon::now();
@endphp

<div class="custom-modal-overlay" id="testModal">
  <div class="custom-modal">
    <div class="custom-modal-header">
      <div class="text-center w-100">
        <h5 class="modal-title" id="testModalLabel">Bài kiểm tra</h5>
        <p class="text-center lessonName"></p>
      </div>
      <button type="button" class="custom-modal-close-button closeTestModal" id="closeCustomModal" aria-label="Close">
        <span>
          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
            <path d="M24 8L8 24M8 8L24 24" stroke="#787878" stroke-width="2" stroke-linecap="round"
              stroke-linejoin="round" />
          </svg>
        </span>
      </button>
    </div>
    <div class="custom-modal-body">
      <div class="row row-cols-2 row-cols-lg-4 g-0 px-2">
        <div class="col">
          <div class="mx-2">
            <label for="testTimeLimit" class="form-label labelBlue">Thời gian làm bài</label>
            <div class="input-group">
              <input type="number" class="form-control" id="testTimeLimit" value="15">
              <span class="input-group-text">phút</span>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="mx-2">
            <label for="testDeadline" class="form-label labelBlue">Deadline</label>
            <input type="date" class="form-control" id="testDeadline" value="{{ $currentDate->format('Y-m-d') }}"
              min="{{ $currentDate->format('Y-m-d') }}">
          </div>
        </div>
        <div class="col">
          <div class="mx-2">
            <label for="testQuestionNumber" class="form-label labelBlue">Số lượng câu</label>
            <input type="number" class="form-control" id="testQuestionNumber" value="10">
          </div>
        </div>
        <div class="col">
          <div class="mx-2">
            <label for="testFactor" class="form-label labelBlue">Hệ số điểm</label>
            <input type="number" class="form-control" id="testFactor" value="1">
          </div>
        </div>
      </div>
      <div class="my-3 testSource-wrap">
        <input type="hidden" type="radio" name="testQuestionSource" value="1">
        <div class="form-check my-4">
          <button type="button" class="btn btnData" id="testSourceTeacher">
            Giáo viên tự nhập câu hỏi và đáp án <span><svg xmlns="http://www.w3.org/2000/svg" width="19"
                height="18" viewBox="0 0 19 18" fill="none">
                <path
                  d="M9.9026 14.4323L10.4593 13.8083C11.1424 13.0428 12.3679 13.1423 12.9185 14.008C13.4314 14.8145 14.5458 14.9674 15.257 14.3288L16.2661 13.4228M2.73438 14.6025L6.00886 13.9428C6.1827 13.9077 6.34231 13.8221 6.46766 13.6967L13.7979 6.36243C14.1494 6.01078 14.1491 5.44079 13.7974 5.08945L12.2446 3.53839C11.893 3.18719 11.3233 3.18743 10.972 3.53892L3.64095 10.874C3.51584 10.9991 3.43041 11.1584 3.39535 11.3319L2.73438 14.6025Z"
                  stroke="#004DA9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
              </svg></span>
          </button>
        </div>
        <div class="form-check">
          <label class="form-check-label labelBlue" for="testSourceBank">Lấy từ ngân hàng đề của Sieuhoc.com</label>
        </div>
      </div>
      <hr>
      <div class="handleTeacherDocument-wrap">
        @include('teachers.documents.handle_teacher_document', ['modal_name' => 'testModal'])
      </div>
      <div class="bankDocument-wrap list-group">
        @foreach ($chapters as $chapter)
          <div class="form-check d-flex align-items-center justify-content-between my-2">
            <label class="form-check-label labelBlack" for="radios{{ $chapter->id }}">
              Chương {{ $chapter->chapter_number }}: {{ $chapter->name }}
            </label>
            <div class="divRadio">
              <input class="form-check-input" type="checkbox" name="testLesson" value="{{ $chapter->id }}"
                id="radios{{ $chapter->id }}">
            </div>
          </div>
        @endforeach
      </div>
    </div>
    <div class="custom-modal-footer">
      <a class="btn btn-light text-blue preview" href="#">Xem trước</a>
      <div>
        <button type="button" class="btn btn-secondary closeTestModal">Đóng</button>
        <button type="button" class="btn btn-primary add-more mx-4" data-modal_name="testModal" data-count="1">
          Thêm mới <span class="addMoreIcon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
              viewBox="0 0 12 12" fill="none">
              <path d="M6 10V6M6 6V2M6 6H10M6 6H2" stroke="white" stroke-width="2" stroke-linecap="round" />
            </svg></span>
        </button>
        <button type="button" class="btn btn-danger btn-save-test">Xác nhận <span><svg
              xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path
                d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C13.4121 3 14.7482 3.32519 15.9375 3.90476M19.3125 6.375L11.4375 14.25L9.1875 12"
                stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            </svg></span></button>
      </div>
    </div>
  </div>
</div>
@push('script')
  @vite(['resources/js/teacher_documents/exercises/modal_test.js'])
@endpush