@php
  use App\Enums\LevelTest;
  $menuData = getMenuData();
@endphp

{{-- Start: kiểm tra theo yêu cầu --}}

<div class="modal fade" id="testLevelModalToggle" aria-hidden="true" aria-labelledby="testLevelModalToggleLabel"
  tabindex="-1">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content modal-test">
      <div
        class="modal-header d-flex flex-column justify-content-center align-items-center position-relative border-0 px-0 pb-2 pt-0">
        <h4 class="modal-title text-red-main text-capitalize fw-bold mb-1 text-center" id="testLevelModalToggleLabel">
          Đánh giá năng lực
        </h4>
        <p class="text-neutral-04 mb-0 text-center">Bạn muốn làm bài kiểm tra trình độ với môn học, lớp nào?</p>
        <button type="button" data-bs-dismiss="modal" aria-label="Close"
          class="btn-close position-absolute end-0 top-0">
        </button>
      </div>
      <div class="modal-body p-0">
        <div class="container-fluid">
          <div class="modal-subject-wrap">
            <h6 class="modal-test-option-title text-blue fw-semibold">Chọn Môn</h6>
            <div class="row row-gap-12">
              @foreach ($menuData['subjects'] as $subject)
                <div class="col-md-6 col-xl-3">
                  <div class="modal-subject-item d-flex flex-column justify-content-center align-items-center"
                    subject_id="{{ $subject->id }}">
                    <div class="modal-subject-icon-wrap rounded-circle">
                      <img src="{{ getDefaultSubjectAvatar($subject->id) }}" alt="Icon {{ $subject->name }}"
                        class="modal-subject-icon">
                    </div>
                    <div class="modal-subject-icon-name mt-1 mt-xl-3">
                      <p class="fw-bold text-neutral-05 text-uppercase mb-0">{{ $subject->name }}</p>
                    </div>
                  </div>
                </div>
              @endforeach

            </div>
          </div>
          <div class="modal-grades-wrap py-3">
            <h6 class="modal-test-option-title text-blue fw-semibold">Chọn Lớp</h6>
            <div class="row row-gap-12">
              @foreach ($menuData['grades'] as $grade)
                <div class="col-xl-3 col-md-4">
                  <div class="modal-grade-item-single-select d-flex justify-content-center align-items-center py-2"
                    grade_id="{{ $grade->id }}">
                    <span class="me-2">
                      <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24"
                        fill="none">
                        <path
                          d="M4.92495 17.4001V13.3981L9.73455 16.1593C10.462 16.577 11.2861 16.7968 12.1249 16.7968C12.9638 16.7968 13.7879 16.577 14.5153 16.1593L19.3249 13.3993V17.4001C19.3251 17.4789 19.3097 17.557 19.2796 17.6299C19.2496 17.7028 19.2054 17.769 19.1497 17.8249L19.1473 17.8261L19.1449 17.8297L19.1365 17.8369L19.1089 17.8633L19.0129 17.9521C18.8957 18.055 18.7752 18.1542 18.6517 18.2497C18.2207 18.5806 17.7627 18.8748 17.2825 19.1293C15.6944 19.9717 13.9227 20.4086 12.1249 20.4013C10.3272 20.4086 8.5555 19.9717 6.96735 19.1293C6.48758 18.8748 6.02997 18.5806 5.59935 18.2497C5.441 18.1276 5.28806 17.9987 5.14095 17.8633L5.11335 17.8369C5.05454 17.7802 5.0076 17.7124 4.97525 17.6374C4.94291 17.5624 4.92581 17.4817 4.92495 17.4001ZM22.6237 10.1209L13.9177 15.1189C13.3722 15.4322 12.7541 15.597 12.1249 15.597C11.4958 15.597 10.8777 15.4322 10.3321 15.1189L2.52495 10.6369V16.2001C2.52495 16.3592 2.46174 16.5118 2.34922 16.6243C2.23669 16.7368 2.08408 16.8001 1.92495 16.8001C1.76582 16.8001 1.61321 16.7368 1.50069 16.6243C1.38817 16.5118 1.32495 16.3592 1.32495 16.2001V9.60005C1.32489 9.49188 1.35408 9.3857 1.40942 9.29275C1.46477 9.1998 1.54422 9.12355 1.63935 9.07205L10.3321 4.08125C10.8776 3.76761 11.4958 3.60254 12.1249 3.60254C12.7541 3.60254 13.3723 3.76761 13.9177 4.08125L22.6237 9.08045C22.7152 9.13304 22.7912 9.20882 22.8441 9.30015C22.8969 9.39148 22.9248 9.49513 22.9248 9.60065C22.9248 9.70617 22.8969 9.80983 22.8441 9.90116C22.7912 9.99249 22.7152 10.0683 22.6237 10.1209Z"
                          fill="#4D4D4D" />
                      </svg>
                    </span>
                    <p class="text-uppercase mb-0">{{ $grade->name }}</p>
                  </div>
                </div>
              @endforeach
            </div>
          </div>
          <div class="modal-study-chapter-wrap pt-1">
            <h6 class="modal-test-option-title text-blue fw-semibold">Chương đang học</h6>
            <div class="row">
              <div class="col-lg-6 px-0 ps-2">
                <select id="selectedChapterLevelTest" name=""
                  class="w-100 modal-test-select text-neutral-04 bg-transparent">
                  <option value="" selected>Chọn</option>
                </select>
                <span class="text-danger"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="modal-footer d-flex justify-content-center align-items-center flex-column flex-sm-row border-0 px-0 pb-0 pt-4">
        <button class="btn-modal-cancel text-neutral-05 fs-18 fw-semibold me-sm-3 mx-0 my-0" data-bs-dismiss="modal">
          Hủy
        </button>
        <button class="btn-modal-continue validateModal1 fw-semibold fs-18 ms-sm-3 mt-sm-0 mx-0 mb-0"
          data-bs-target="#textLevelModalConfirm1" data-bs-toggle="modal1">
          Làm bài
        </button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="textLevelModalConfirm" aria-hidden="true" aria-labelledby="textLevelModalConfirmLabel"
  tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content modal-test-confirm">
      <div class="modal-header border-0 px-0 pb-3 pt-0">
        <h2 class="modal-title text-blue text-capitalize fw-bold w-100 mb-0 text-center" id="testLevelModalToggleLabel">
          Bài kiểm tra trình độ
        </h2>
      </div>
      <div class="modal-body p-0">
        <div class="d-flex flex-column justify-content-center align-items-center">
          <h5 class="modal-test-description mb-4 text-center">
            <span class="text-neutral-04 fw-500">
              Bạn sẽ làm bài kiểm tra trình độ
            </span>
            <br>
            <span class="text-red-main fw-600 selectedSubjectGrade text-capitalize">
              Vật Lý - lớp 7
            </span>
          </h5>
          <p class="fw-500 text-neutral-04 mb-0 text-center">
            <span class="text-blue fw-bold fs-4">{{ LevelTest::QUESTION_NUMBER->value }} câu</span>
            <br>
            trong vòng
            <span class="text-blue fw-bold fs-4 text-nowrap">{{ LevelTest::FINISH_TIME->value }} phút.</span>
          </p>
        </div>
      </div>
      <div class="modal-footer d-flex justify-content-center border-0 px-0 pb-0 pt-3">
        {{-- <a href="{{ route('level_tests.viewLevelTest') }}" --}}
        <a href="{{ route('level_tests.viewLevelTestNew') }}"
          class="btn-modal-continue fw-semibold fs-18 text-decoration-none my-0 me-0 ms-3" id="startLevelTest"
          chapter_id="">
          Làm bài
        </a>
      </div>
    </div>
  </div>
</div>
{{-- End: kiểm tra theo yêu cầu --}}


{{-- Start: kiểm tra theo yêu cầu --}}
<div class="modal fade" id="testLevelCustomModalToggle" aria-hidden="true"
  aria-labelledby="testLevelCustomModalToggleLabel" tabindex="-1">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content modal-test">
      <div
        class="modal-header d-flex flex-column justify-content-center align-items-center position-relative border-0 px-0 pb-1 pb-xl-3 pt-0">
        <h4 class="modal-title text-red-main text-capitalize fw-bold mb-1 text-center"
          id="testLevelCustomModalToggleLabel">
          kiểm tra theo yêu cầu
        </h4>
        <p class="text-neutral-04 mb-0 text-center">Vui lòng chọn Môn</p>
        <button type="button" data-bs-dismiss="modal" aria-label="Close"
          class="btn-close position-absolute end-0 top-0">
        </button>
      </div>
      <div class="modal-body p-0">
        <div class="container-fluid">
          <div class="modal-subject-wrap">
            <h6 class="modal-test-option-title text-blue fw-semibold">Chọn Môn</h6>
            <div class="row row-gap-12">
              @foreach ($menuData['subjects'] as $subject)
                <div class="col-md-6 col-xl-3">
                  <div class="modal-subject-item d-flex flex-column justify-content-center align-items-center"
                    subject_id="{{ $subject->id }}">
                    <div class="modal-subject-icon-wrap rounded-circle">
                      <img src="{{ getDefaultSubjectAvatar($subject->id) }}" alt="Icon toán học"
                        class="modal-subject-icon">
                    </div>
                    <div class="modal-subject-icon-name mt-1 mt-xl-2">
                      <p class="fw-bold text-neutral-05 text-uppercase mb-0">{{ $subject->name }}</p>
                    </div>
                  </div>
                </div>
              @endforeach

            </div>
          </div>
          <div class="modal-grades-wrap py-1 py-xl-3">
            <h6 class="modal-test-option-title text-blue fw-semibold">Chọn Lớp</h6>
            <div class="row row-gap-12">
              @foreach ($menuData['grades'] as $grade)
                <div class="col-xl-3 col-md-4">
                  <div class="modal-grade-item-single-select d-flex justify-content-center align-items-center py-2"
                    grade_id="{{ $grade->id }}">
                    <span class="me-2">
                      <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24"
                        fill="none">
                        <path
                          d="M4.92495 17.4001V13.3981L9.73455 16.1593C10.462 16.577 11.2861 16.7968 12.1249 16.7968C12.9638 16.7968 13.7879 16.577 14.5153 16.1593L19.3249 13.3993V17.4001C19.3251 17.4789 19.3097 17.557 19.2796 17.6299C19.2496 17.7028 19.2054 17.769 19.1497 17.8249L19.1473 17.8261L19.1449 17.8297L19.1365 17.8369L19.1089 17.8633L19.0129 17.9521C18.8957 18.055 18.7752 18.1542 18.6517 18.2497C18.2207 18.5806 17.7627 18.8748 17.2825 19.1293C15.6944 19.9717 13.9227 20.4086 12.1249 20.4013C10.3272 20.4086 8.5555 19.9717 6.96735 19.1293C6.48758 18.8748 6.02997 18.5806 5.59935 18.2497C5.441 18.1276 5.28806 17.9987 5.14095 17.8633L5.11335 17.8369C5.05454 17.7802 5.0076 17.7124 4.97525 17.6374C4.94291 17.5624 4.92581 17.4817 4.92495 17.4001ZM22.6237 10.1209L13.9177 15.1189C13.3722 15.4322 12.7541 15.597 12.1249 15.597C11.4958 15.597 10.8777 15.4322 10.3321 15.1189L2.52495 10.6369V16.2001C2.52495 16.3592 2.46174 16.5118 2.34922 16.6243C2.23669 16.7368 2.08408 16.8001 1.92495 16.8001C1.76582 16.8001 1.61321 16.7368 1.50069 16.6243C1.38817 16.5118 1.32495 16.3592 1.32495 16.2001V9.60005C1.32489 9.49188 1.35408 9.3857 1.40942 9.29275C1.46477 9.1998 1.54422 9.12355 1.63935 9.07205L10.3321 4.08125C10.8776 3.76761 11.4958 3.60254 12.1249 3.60254C12.7541 3.60254 13.3723 3.76761 13.9177 4.08125L22.6237 9.08045C22.7152 9.13304 22.7912 9.20882 22.8441 9.30015C22.8969 9.39148 22.9248 9.49513 22.9248 9.60065C22.9248 9.70617 22.8969 9.80983 22.8441 9.90116C22.7912 9.99249 22.7152 10.0683 22.6237 10.1209Z"
                          fill="#4D4D4D" />
                      </svg>
                    </span>
                    <p class="text-uppercase m-0">{{ $grade->name }}</p>
                  </div>
                </div>
              @endforeach
            </div>
          </div>

          <div class="modal-study-chapter-wrap col-lg-8 py-1 py-xl-3">
            <h6 class="modal-test-option-title text-blue fw-semibold text-capitalize mb-1 mb-xl-3">Phạm vi</h6>
            <div class="row">
              <div class="col-6">
                <label class="text-neutral-04 fw-500 lh-base text-capitalize mb-2 pb-1" for="chapter_start">
                  Chương bắt đầu
                </label>
                <select name="chapter_start" class="w-100 modal-test-select text-neutral-04 bg-transparent">
                  <option value="" selected>Chọn</option>
                </select>
              </div>
              <div class="col-6">
                <label class="text-neutral-04 fw-500 lh-base text-capitalize mb-2 pb-1" for="chapter_end">
                  Chương kết thúc
                </label>
                <select name="chapter_end" class="w-100 modal-test-select text-neutral-04 bg-transparent">
                  <option value="" selected>Chọn</option>
                </select>
              </div>
              <div class="col-6">
                <h6 class="modal-test-option-title text-blue fw-semibold text-capitalize my-1 my-xl-3"> Số lượng câu
                  hỏi
                </h6>
                <input type="number" placeholder="Tối đa 100 câu hỏi" name="question_number"
                  class="w-100 modal-test-input" value="" min="0">
              </div>
              <span class="error-level-test text-danger"></span>
            </div>

          </div>

        </div>
      </div>
      <div
        class="modal-footer d-flex justify-content-center align-items-center flex-column flex-sm-row border-0 px-0 pb-0 pt-3">
        <button class="btn-modal-cancel text-neutral-05 fs-18 fw-semibold me-sm-3 mx-0 my-0" data-bs-dismiss="modal">
          Hủy
        </button>
        <button class="btn-modal-continue validateModal2 fw-semibold fs-18 ms-sm-3 mt-sm-0 mx-0 mb-0"
          data-bs-target="#textLevelCustomModalConfirm" data-bs-toggle="modal2">
          Làm bài
        </button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="textLevelCustomModalConfirm" aria-hidden="true"
  aria-labelledby="textLevelCustomModalConfirmLabel" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content modal-test-confirm">
      <div class="modal-header border-0 px-0 pb-3 pt-0">
        <h4 class="modal-title text-blue text-capitalize fw-bold w-100 mb-0 text-center"
          id="testLevelCustomModalToggleLabel">
          bài kiểm tra theo yêu cầu
        </h4>
      </div>
      <div class="modal-body p-0">
        <div class="d-flex flex-column justify-content-center align-items-center">
          <h5 class="modal-test-description text-neutral-04 mb-4 text-center">
            <span>
              Bạn sẽ làm bài kiểm tra trình độ
            </span>
            <br>
            <span class="text-red-main fw-600 selectedSubjectGrade text-capitalize">
              Vật Lý - lớp 7
            </span>
            <br>
            <span class="fw-normal rangeChapterNumber">Nội dung từ chương 7 - chương 11</span>
          </h5>
          <p class="fw-500 text-neutral-04 mb-0 text-center">
            <span class="text-blue fw-bold fs-4 questionNumber">{{ LevelTest::FINISH_TIME->value }} câu</span>
            <br>
            trong vòng
            <span class="text-blue fw-bold fs-4 text-nowrap finishTime">{{ LevelTest::FINISH_TIME->value }}
              phút.</span>
          </p>
        </div>
      </div>
      <div class="modal-footer d-flex justify-content-center border-0 px-0 pb-0 pt-3">
        <a href="{{ route('level_tests.viewRequestLevelTestNew') }}"
          class="btn-modal-continue fw-semibold fs-18 text-decoration-none my-0 me-0 ms-3" id="startRequestLevelTest"
          chapter_id="">
          Làm bài
        </a>
      </div>
    </div>
  </div>
</div>
{{-- End: kiểm tra theo yêu cầu --}}

@push('script')
  @vite('resources/js/chapter.js')
@endpush