@extends('layout.app', ['title' => 'Kiểm tra trình độ'])

@push('style')
  @vite(['resources/css/landing.css', 'resources/css/level-test.css'])
@endpush
@php
  use App\Enums\QuestionLabelEnum;
  //TODO: mot so cau trac nghiem co 4 dap nhung truong choices trong problem chi co 1/[] choices
  $choices = $question && $question->choices ? json_decode($question->choices, true) : ['A', 'B', 'C', 'D'];
  // dd(QuestionLabelEnum::getkey(2));
@endphp
@section('content')
  <div class="page-content col-8 col-md-9 col-xl-10 flex-grow-1 p-0">
    @if ($question)
      @include('layout.landing_banner', [
          'title' =>
              $chapter->course->grade->name .
              ' - ' .
              $chapter->course->subject->name .
              ': Chương ' .
              $chapter->chapter_number .
              ' - Bài ' .
              getUnitNumber($question->id),
          'description' =>
              'Đánh giá năng lực học tập giúp xác định điểm mạnh và điểm yếu của bạn, từ đó tạo ra các chiến lược học tập phù hợp để đạt được thành công.',
      ])
      <section class="proficiency-assessment">
        <div class="proficiency-assessment-wrap py-5">
          <div class="container-fluid">
            <div class="row flex-column-reverse flex-xl-row">
              <div class="col-xl-10 borderRight">
                <div class="proficiency-assessment-test">
                  <div
                    class="proficiency-assessment-test-header d-flex justify-content-between align-items-center pb-3 pe-4">
                    <h4 class="proficiency-assessment-test-title text-red-main fw-semibold mb-0">KIỂM TRA TRÌNH ĐỘ</h4>
                    <h5 class="proficiency-assessment-question-number text-red-main mb-0">Câu hỏi
                      {{ $selectedParam['question_order'] }} / {{ $selectedParam['question_number'] }}
                    </h5>
                  </div>
                  @if ($question && $question->solution)
                    <div class="proficiency-assessment-test-content mt-3 pt-3">
                      <div class="proficiency-assessment-question">
                        <form action="{{ route('level_tests.storeLevelTest') }}" method="post" id="levelTestForm">
                          @csrf
                          <input type="hidden" name="is_true" value="">
                          <input type="hidden" name="answer" value="">
                          <input type="hidden" name="time_minutes" value="{{ $selectedParam['time_minutes'] }}">
                          <input type="hidden" name="time_seconds" value="{{ $selectedParam['time_seconds'] }}">
                          <input type="hidden" name="question_id" value="{{ $question->id }}">
                          <div class="card mb-3 border-0">
                            <div class="imgCoverPosition">
                              <div class="textAnswer showByMathpix" data-content="{{ $question->text }}"
                                data-choices="{{ $question->choices }}"></div>
                              {{-- <img src="{{ $question->image_path }}" class="card-img-top" alt="image question"> --}}
                            </div>

                            {{-- TODO: dieu kien de hien cac o multi select box --}}
                            @if ($question->solution->result)
                              <div class="card-body text-center">
                                @foreach ($choices as $choice)
                                  <div class="form-check form-check-inline mx-4">
                                    <input class="form-check-input" type="checkbox" id="inlineCheckbox{{ $loop->index }}"
                                      value="{{ QuestionLabelEnum::getkey($loop->index) }}">
                                    <label class="form-check-label"
                                      for="inlineCheckbox{{ $loop->index }}">{{ QuestionLabelEnum::getkey($loop->index) }}</label>
                                  </div>
                                @endforeach

                                {{-- show validate error --}}
                                <p class="text-danger"></p>
                              </div>
                            @else
                              <div class="theoryQuestion my-3">
                                <label for="exampleFormControlTextarea1" class="form-label">Câu trả lời của bạn</label>
                                <textarea class="form-control textAnswer" rows="10" name="theory_answer" value=""></textarea>
                                {{-- show validate error --}}
                                <p class="text-danger"></p>
                                <button class="answerQuestion btn btn-danger rounded-5 my-3 px-3 py-2">Trả
                                  lời</button>
                              </div>
                              <div class="theoryQuestion ansQuestion mb-3">
                                <label for="exampleFormControlTextarea1" class="form-label">Đáp án</label>
                                <div class="textAnswer imgCoverPosition">
                                  <div class="showByMathpix" data-content="{{ $question->solution->text }}"
                                    data-result="{{ $question->result }}"></div>
                                  {{-- <img src="{{ $question->solution->image_path }}" class="card-img-top" alt="..."> --}}
                                </div>

                                <div class="d-flex justify-content-between align-items-center">
                                  <label class="form-label">Bạn đã làm</label>
                                  <div class="me-5">

                                    <button class="correctAnswer btn btn-danger rounded-5 my-3 me-3 px-3 py-2">Đúng
                                      <span><svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                          xmlns="http://www.w3.org/2000/svg">
                                          <path
                                            d="M16 4H18C18.5304 4 19.0391 4.21071 19.4142 4.58579C19.7893 4.96086 20 5.46957 20 6V20C20 20.5304 19.7893 21.0391 19.4142 21.4142C19.0391 21.7893 18.5304 22 18 22H6C5.46957 22 4.96086 21.7893 4.58579 21.4142C4.21071 21.0391 4 20.5304 4 20V6C4 5.46957 4.21071 4.96086 4.58579 4.58579C4.96086 4.21071 5.46957 4 6 4H8"
                                            stroke="white" stroke-width="2" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                          <path
                                            d="M15 2H9C8.73478 2 8.48043 2.10536 8.29289 2.29289C8.10536 2.48043 8 2.73478 8 3V5C8 5.26522 8.10536 5.51957 8.29289 5.70711C8.48043 5.89464 8.73478 6 9 6H15C15.2652 6 15.5196 5.89464 15.7071 5.70711C15.8946 5.51957 16 5.26522 16 5V3C16 2.73478 15.8946 2.48043 15.7071 2.29289C15.5196 2.10536 15.2652 2 15 2V2Z"
                                            stroke="white" stroke-width="2" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                          <path d="M9 13L11 15L15 11" stroke="white" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round" />
                                        </svg>
                                      </span></button>
                                    <button class="wrongAnswer btn btn-light rounded-5 my-3 me-5 px-3 py-2">Sai <span><svg
                                          width="24" height="24" viewBox="0 0 24 24" fill="none"
                                          xmlns="http://www.w3.org/2000/svg">
                                          <path
                                            d="M16 4H18C18.5304 4 19.0391 4.21071 19.4142 4.58579C19.7893 4.96086 20 5.46957 20 6V20C20 20.5304 19.7893 21.0391 19.4142 21.4142C19.0391 21.7893 18.5304 22 18 22H6C5.46957 22 4.96086 21.7893 4.58579 21.4142C4.21071 21.0391 4 20.5304 4 20V6C4 5.46957 4.21071 4.96086 4.58579 4.58579C4.96086 4.21071 5.46957 4 6 4H8"
                                            stroke="#CC3A3D" stroke-width="2" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                          <path
                                            d="M15 2H9C8.73478 2 8.48043 2.10536 8.29289 2.29289C8.10536 2.48043 8 2.73478 8 3V5C8 5.26522 8.10536 5.51957 8.29289 5.70711C8.48043 5.89464 8.73478 6 9 6H15C15.2652 6 15.5196 5.89464 15.7071 5.70711C15.8946 5.51957 16 5.26522 16 5V3C16 2.73478 15.8946 2.48043 15.7071 2.29289C15.5196 2.10536 15.2652 2 15 2V2Z"
                                            stroke="#CC3A3D" stroke-width="2" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                          <path d="M15 11L9 17" stroke="#CC3A3D" stroke-width="2" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                          <path d="M9 11L15 17" stroke="#CC3A3D" stroke-width="2" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                        </svg>
                                      </span></button>
                                  </div>
                                </div>
                              </div>
                            @endif

                          </div>

                          {{-- TODO: dieu kien de hien thi cau cuoi cung --}}
                          @if ($question->solution->result)
                            <div class="d-flex justify-content-center align-items-center mt-1">
                              <button type="submit" class="fw-bold btn-next-question text-center">
                                @if ($selectedParam['question_order'] < $selectedParam['question_number'])
                                  <span class="me-2">
                                    Câu tiếp theo
                                  </span>
                                  <span class="ps-1">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24"
                                      viewBox="0 0 25 24" fill="none">
                                      <path d="M15.5 14L20.5 9L15.5 4" stroke="white" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                      <path
                                        d="M4.5 20V13C4.5 11.9391 4.92143 10.9217 5.67157 10.1716C6.42172 9.42143 7.43913 9 8.5 9H20.5"
                                        stroke="white" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                    </svg>
                                  </span>
                                @else
                                  <span class="me-2">
                                    Hoàn thành
                                  </span>
                                  <span class="ps-1">
                                    <svg width="25" height="24" viewBox="0 0 25 24" fill="none"
                                      xmlns="http://www.w3.org/2000/svg">
                                      <path d="M22.5 10V16V10ZM2.5 10L12.5 5L22.5 10L12.5 15L2.5 10Z" stroke="white"
                                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                      <path d="M6.5 12V17C9.5 20 15.5 20 18.5 17V12" stroke="white" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                    </svg>
                                  </span>
                                @endif
                              </button>
                            </div>
                          @endif
                        </form>
                      </div>
                    </div>
                  @endif
                </div>
              </div>
              <div class="col-xl-2">
                <div class="proficiency-assessment-feature py-4">
                  <div class="d-flex flex-column justify-content-center align-items-center">
                    <div class="proficiency-assessment-icon mb-2">
                      <svg xmlns="http://www.w3.org/2000/svg" width="147" height="146" viewBox="0 0 147 146"
                        fill="none">
                        <path
                          d="M73.5 130.73C41.66 130.73 15.77 104.83 15.77 73C15.77 41.16 41.66 15.27 73.5 15.27C105.33 15.27 131.23 41.17 131.23 73.01C131.23 104.84 105.34 130.73 73.5 130.73Z"
                          fill="white" />
                        <path
                          d="M73.5057 0C33.2555 0 0.5 32.744 0.5 73.0057C0.5 113.256 33.2555 146 73.5057 146C113.756 146 146.5 113.245 146.5 73.0057C146.511 32.744 113.756 0 73.5057 0ZM73.5057 138.962C37.1285 138.962 7.54922 109.371 7.54922 73.0057C7.54922 36.6285 37.1285 7.04922 73.5057 7.04922C109.871 7.04922 139.462 36.64 139.462 73.0171C139.462 109.383 109.883 138.962 73.5057 138.962Z"
                          fill="#299241" />
                        <path
                          d="M73.5052 6C36.5632 6 6.5 36.0527 6.5 73.0052C6.5 109.947 36.5632 140 73.5052 140C110.447 140 140.5 109.937 140.5 73.0052C140.51 36.0527 110.447 6 73.5052 6ZM73.5052 133.541C40.118 133.541 12.9698 106.382 12.9698 73.0052C12.9698 39.618 40.118 12.4698 73.5052 12.4698C106.882 12.4698 134.041 39.6285 134.041 73.0157C134.041 106.393 106.893 133.541 73.5052 133.541Z"
                          fill="#B2EDA6" />
                        <path
                          d="M123.43 76.6901C125.468 76.6901 127.12 75.038 127.12 73.0001C127.12 70.9621 125.468 69.3101 123.43 69.3101C121.392 69.3101 119.74 70.9621 119.74 73.0001C119.74 75.038 121.392 76.6901 123.43 76.6901Z"
                          fill="#2F2F2F" />
                        <path
                          d="M118.583 51.2245C120.343 50.2086 120.947 47.958 119.931 46.1977C118.915 44.4374 116.664 43.834 114.904 44.85C113.144 45.8659 112.54 48.1164 113.556 49.8767C114.572 51.637 116.823 52.2404 118.583 51.2245Z"
                          fill="#2F2F2F" />
                        <path
                          d="M101.661 31.6012C102.677 29.8408 102.073 27.5903 100.313 26.5745C98.5525 25.5586 96.3019 26.1622 95.2861 27.9225C94.2703 29.6828 94.8738 31.9334 96.6341 32.9492C98.3945 33.965 100.645 33.3615 101.661 31.6012Z"
                          fill="#2F2F2F" />
                        <path
                          d="M76.7141 25.8658C77.7299 24.1055 77.1264 21.855 75.366 20.8391C73.6057 19.8233 71.3552 20.4268 70.3393 22.1872C69.3235 23.9475 69.927 26.198 71.6874 27.2138C73.4477 28.2297 75.6982 27.6261 76.7141 25.8658Z"
                          fill="#2F2F2F" />
                        <path
                          d="M50.3721 32.9476C52.1324 31.9317 52.7358 29.6811 51.7199 27.9209C50.704 26.1606 48.4534 25.5572 46.6931 26.5731C44.9328 27.589 44.3294 29.8396 45.3454 31.5999C46.3613 33.3601 48.6118 33.9636 50.3721 32.9476Z"
                          fill="#2F2F2F" />
                        <path
                          d="M33.4445 49.869C34.4605 48.1087 33.8571 45.8582 32.0969 44.8422C30.3366 43.8262 28.0861 44.4295 27.0701 46.1898C26.0541 47.95 26.6574 50.2006 28.4177 51.2166C30.1779 52.2326 32.4285 51.6292 33.4445 49.869Z"
                          fill="#2F2F2F" />
                        <path
                          d="M23.5599 69.3101C21.5299 69.3101 19.8799 70.9601 19.8799 72.9901C19.8799 75.0301 21.5299 76.6701 23.5599 76.6701C24.5359 76.6701 25.4719 76.2823 26.162 75.5922C26.8522 74.9021 27.2399 73.9661 27.2399 72.9901C27.2399 72.0141 26.8522 71.078 26.162 70.3879C25.4719 69.6978 24.5359 69.3101 23.5599 69.3101ZM28.4099 94.7801C27.5666 95.2707 26.9522 96.0756 26.701 97.0183C26.4499 97.961 26.5825 98.9649 27.0699 99.8101C27.5595 100.654 28.3635 101.27 29.3062 101.523C30.2488 101.776 31.2533 101.646 32.0999 101.16C32.9463 100.67 33.5638 99.864 33.8169 98.9192C34.07 97.9743 33.938 96.9677 33.4499 96.1201C32.9592 95.2741 32.1525 94.6577 31.2074 94.4064C30.2622 94.1551 29.2559 94.2895 28.4099 94.7801Z"
                          fill="#2F2F2F" />
                        <path
                          d="M51.7174 118.079C52.7334 116.319 52.1301 114.069 50.3698 113.053C48.6096 112.037 46.359 112.64 45.343 114.4C44.327 116.16 44.9304 118.411 46.6906 119.427C48.4509 120.443 50.7014 119.84 51.7174 118.079Z"
                          fill="#2F2F2F" />
                        <path
                          d="M73.4901 119.25C71.4501 119.25 69.8201 120.9 69.8101 122.93C69.8201 124.96 71.4601 126.61 73.4901 126.61C75.5201 126.61 77.1801 124.96 77.1701 122.93C77.1714 122.447 77.0771 121.967 76.8926 121.52C76.7082 121.073 76.4371 120.667 76.0951 120.325C75.7532 119.983 75.347 119.712 74.8999 119.528C74.4528 119.343 73.9737 119.249 73.4901 119.25ZM96.6201 113.06C96.1997 113.3 95.8313 113.622 95.536 114.005C95.2407 114.389 95.0245 114.828 94.8999 115.295C94.7753 115.763 94.7447 116.251 94.81 116.731C94.8752 117.211 95.035 117.673 95.2801 118.09C95.5216 118.509 95.8434 118.876 96.2269 119.171C96.6105 119.466 97.0483 119.682 97.5154 119.807C97.9825 119.933 98.4697 119.965 98.9492 119.902C99.4288 119.839 99.8912 119.682 100.31 119.44C100.729 119.199 101.097 118.877 101.391 118.494C101.686 118.11 101.902 117.672 102.028 117.205C102.153 116.738 102.185 116.251 102.122 115.771C102.059 115.291 101.902 114.829 101.66 114.41C101.418 113.99 101.096 113.622 100.711 113.327C100.327 113.032 99.8883 112.815 99.4201 112.69C98.952 112.564 98.4637 112.532 97.9832 112.596C97.5027 112.66 97.0395 112.817 96.6201 113.06ZM118.58 94.7802C118.161 94.5382 117.699 94.3812 117.219 94.3181C116.74 94.255 116.252 94.287 115.785 94.4124C115.318 94.5378 114.88 94.754 114.497 95.0488C114.113 95.3436 113.791 95.711 113.55 96.1302C113.307 96.5487 113.149 97.0112 113.085 97.491C113.021 97.9709 113.053 98.4586 113.179 98.9261C113.304 99.3935 113.521 99.8316 113.816 100.215C114.112 100.598 114.48 100.92 114.9 101.16C116.66 102.17 118.91 101.57 119.93 99.8102C120.95 98.0502 120.35 95.7902 118.58 94.7802Z"
                          fill="#2F2F2F" />
                        <line x1="73.5" y1="37" x2="73.5" y2="69" stroke="#299241"
                          stroke-width="4" stroke-linecap="round" />
                        <line x1="75.0747" y1="73.8292" x2="98.4843" y2="82.6035" stroke="#299241"
                          stroke-width="4" stroke-linecap="round" />
                        <line x1="74.7902" y1="72.6369" x2="100.971" y2="62.7096" stroke="#142B6F"
                          stroke-linecap="round" />
                        <path
                          d="M73.5 78C70.7423 78 68.5 75.7568 68.5 73C68.5 70.2423 70.7423 68 73.5 68C76.2568 68 78.5 70.2432 78.5 73.0009C78.5 75.7577 76.2577 78 73.5 78Z"
                          fill="#B2EDA6" />
                      </svg>
                    </div>
                    <div class="proficiency-assessment-time pt-4">
                      <p class="proficiency-assessment-time-remaining fw-semibold text-red-main mb-0 text-center">
                        <span class="fs-2 time-minutes"></span>
                        m
                        <span class="fs-2 time-seconds"></span>
                        s
                      </p>
                      <p class="proficiency-assessment-time-description text-neutral-05 mb-2 text-center">Thời gian làm
                        bài
                      </p>
                    </div>
                    <a href="{{ route('landingpage') }}"
                      class="btn-outline-red btn-go-home text-decoration-none fs-18 fw-semibold mt-5 px-4 text-center">
                      Về Trang Chủ
                    </a>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>
      </section>
    @else
      <p class="text-center my-5">Không tìm thây câu hỏi</p>
    @endif
  </div>
@endsection

@push('script')
  <script>
    var time_minutes = {!! $selectedParam['time_minutes'] !!};
    var time_seconds = {!! $selectedParam['time_seconds'] !!};
  </script>
  @vite(['resources/js/landing.js', 'resources/js/time.js', 'resources/js/answer.js', 'resources/js/question_mathpix.js', 'resources/js/question_mathpix_image_responsive.js'])
@endpush