@push('style')
  @vite(['resources/css/landing.css', 'resources/css/level-test.css', 'resources/css/unit/unit_exercise.css'])
@endpush
@php
  use App\Enums\QuestionLabelEnum;

  function getLabelClass($label, $answer, $correct)
  {
      if ($label === $correct && $correct === $answer) {
          return 'answered-correct'; // cau tra loi dung voi dap an va dung voi label
      }
      if ($label === $correct && $answer !== $correct) {
          return 'answer-correct'; // cau tra loi dung khong dung voi dap an va nhung dung voi label
      }
      if ($label === $answer && $answer !== $correct) {
          return 'answer-wrong'; // cau tra loi sai voi dap an va sai voi label
      }
      return '';
  }
  // get so checkbox de hien thi dua vao truong choices
  // $answerLabel=["A","B","C",...]
  function getAnswerLabels($choices): array
  {
      $choicesArray = $choices ? json_decode($choices, true) : ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
      return QuestionLabelEnum::getAnswerLabels(count($choicesArray));
  }
@endphp
<section class="test-result find-tutors">
  <div class="test-result-wrap pb-2 pt-4">
    <div
      class="test-result-information-wrap d-flex justify-content-lg-between justify-content-center align-items-center bg-custon-white-smoke flex-wrap py-3">
      <div class="test-result-information d-flex flex-column align-items-center justify-content-center">
        <h4 class="test-result-level fw-bold fs-2">Số điểm bạn đạt được</h4>
        <h4 class="test-result-number-correct mb-0">
          <span class="number-correct-answer text-approved-green fw-900 fs-48">
            {{ $myScore }}
          </span>
          <span class="text-neutral-08 fs-36">/</span>
          <span class="number-question text-neutral-04 fw-semibold">
            {{ $questions->total() }}
          </span>
        </h4>
      </div>
      <div class="test-result-navigate d-flex flex-column">
        <a href="{{ route('landingpage') }}"
          class="btn-outline-red fs-18 fw-semibold text-decoration-none btn-go-home px-4 text-center">
          Về Trang Chủ
        </a>
        <a href="{{ route('examinations.showQuestion', ['grade_id' => $params['grade_id'], 'subject_id' => $params['subject_id'], 'other_id' => $params['other_id']]) }}"
          class="btn-fill-primary fs-18 fw-semibold text-decoration-none btn-test-again mt-4 text-center {{ $params['isOtherExam'] == false ? 'disabled-link' : '' }}">Đề
          khác
        </a>
      </div>
    </div>
    <div class="proficiency-assessment-test-content test-result-questions-wrap">
      @foreach ($questions as $index => $question)
        <div class="test-result-questions-item">
          <div class="test-result-questions-name fw-semibold text-neutral-04 pb-1">
            <h5 class="fw-semibold">Câu
              {{ ($questions->currentPage() - 1) * $questions->perPage() + $loop->iteration }}:</h5>
          </div>
          <div class="card border-0 mb-3">
            {{-- Show ra cac cau hoi --}}
            <div class="imgCoverPosition">
              <div class="showByMathpix p-4" data-content="{{ $question['text'] }}"
                data-choices="{{ $question['choices'] }}">
              </div>
            </div>
            @if ($question['result'])
              {{-- Truong hop tra loi trac nghiem A,B,C,D --}}
              <div class="card-body text-center">
                @foreach (getAnswerLabels($question['choices']) as $label)
                  <div class="form-check form-check-inline mx-4">
                    <input disabled
                      class="form-check-input {{ getLabelClass($label, $question['answerData']['answer'], $question['result']) }}"
                      type="checkbox"
                      {{ $question['result'] === $label || $question['answerData']['answer'] === $label ? 'checked' : '' }}>
                    <label
                      class="form-check-label {{ getLabelClass($label, $question['answerData']['answer'], $question['result']) }}">{{ $label }}
                      @if (getLabelClass($label, $question['answerData']['answer'], $question['result']) === 'answered-correct')
                        <span class="ms-3">
                          <svg width="25" height="24" viewBox="0 0 25 24" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path d="M2.5 12L7.75 17L10.375 14M8.5 12L13.75 17L22.5 7M16.5 7L13 11" stroke="#00CC4F"
                              stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                          </svg>
                        </span>
                      @endif
                      @if (getLabelClass($label, $question['answerData']['answer'], $question['result']) === 'answer-wrong')
                        <span class="ms-3">
                          <svg width="25" height="24" viewBox="0 0 25 24" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path d="M18.5 6L6.5 18M6.5 6L18.5 18" stroke="#FE4742" stroke-width="2"
                              stroke-linecap="round" stroke-linejoin="round" />
                          </svg>
                        </span>
                      @endif
                    </label>
                  </div>
                @endforeach
              </div>
              @if ($question['answer_text'])
                <a id="toggle-btn-{{ $index }}" class="btn btn-result w-100" data-bs-toggle="collapse"
                  href="#collapseExample-{{ $index }}" role="button" aria-expanded="false"
                  aria-controls="collapseExample">Xem Lời Giải</a>
                <div class="collapse mt-3" id="collapseExample-{{ $index }}">
                  <div class="test-result-question-explain card card-body">
                    <p class="fs-5 mb-0">
                      <span class="fw-bold text-red-main">
                        Giải thích:
                      </span>
                    </p>
                    <div class="text-approved-green imgCoverPosition">
                      <div class="showByMathpix mt-3" data-content="{{ $question['answer_text'] }}"
                        data-result="{{ $question['result'] }}">
                      </div>
                    </div>
                  </div>
                </div>
              @endif
            @else
              {{-- Truong hop tra loi cau hoi tu luan --}}
              <div class="theoryQuestion mb-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" disabled>{{ $question['answerData']['theory_answer'] }}</textarea>
              </div>
              <div class="theoryQuestion mb-3">
                <label for="exampleFormControlTextarea1" class="form-label">Đáp án</label>
                <div class="textAnswer imgCoverPosition">
                  <div class="showByMathpix" data-content="{{ $question['answer_text'] }}"
                    data-result="{{ $question['result'] }}">
                  </div>
                </div>
                <div class="d-flex justify-content-between align-items-center">
                  @if ($question['answerData']['is_true'] !== null)
                    <div class="d-flex justify-content-between align-items-center">
                      <label class="form-label">Bạn đã làm đúng</label>
                      <div class="d-flex justify-content-between align-items-center">
                        <div class="examClass12 d-flex justify-content-center align-items-center my-5 me-3">
                          @foreach ([0, 25, 50, 75, 100] as $value)
                            <button
                              class="btn bg-white btn-outline-danger mx-2 rounded-5 px-4 text-danger {{ $question['answerData']['is_true'] == $value ? 'percentActive' : '' }}"
                              data-value="{{ $value }}" disabled>
                              {{ $value }}%
                            </button>
                          @endforeach
                        </div>
                      </div>
                    </div>
                  @endif
                </div>
              </div>
            @endif
          </div>
        </div>
      @endforeach
      {{-- Pagination --}}
      <div class="d-flex justify-content-center my-4 ">
        {{ $questions->links('tutors.pagination-request-manager') }}
      </div>
    </div>
  </div>
</section>
@include('landing.level_tests.show_notice_timeout_no_answer', [
    'noAnswerDataFlag' => $noAnswerDataFlag,
])

@push('script')
  <script>
    let selectedParams = JSON.parse(localStorage.getItem('selected_params'));
    selectedParams[0].question_order = 1;
    localStorage.setItem('selected_params', JSON.stringify(selectedParams));
    localStorage.removeItem('selected_answers');
    localStorage.removeItem('minutes');
    localStorage.removeItem('seconds');
    localStorage.removeItem('subject_name');
    localStorage.removeItem('grade_name');
  </script>
  @vite(['resources/js/question_mathpix.js', 'resources/js/question_mathpix_image_responsive.js'])
@endpush