@extends('layout.app', ['title' => 'Kết quả kiểm tra'])

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

  function getImageQuestion($answers, $question_id): array|null
  {
      $question = collect($answers)
          ->map(function ($item) use ($question_id) {
              return $item->question->where('id', $question_id)->first();
          })
          ->first();
      if ($question) {
          return [
              // 'image_path' => $question->image_path,
              'text' => $question->text,
              'choices' => $question->choices ?? '[]',
          ];
      } else {
          return [
              'text' => null,
              'choices' => '[]',
          ];
      }
  }
  function getCorrectAnswer($answers, $question_id)
  {
      $result = collect($answers)->where('id', $question_id);
      $dd = [
          'correct' => $result->pluck('result')->first(),
          'text_answer' => $result->pluck('text')->first(), //Text cua cau tra loi dung(giai thich)
          // 'image_answer' => $result->pluck('image_path')->first(), //image cua cau tra loi dung(giai thich)
      ];
      return $dd;
  }
  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($answers, $question_id): array
  {
      $findChoices = collect($answers)->map(function ($item) use ($question_id) {
          return $item->question->where('id', $question_id)->first();
      });
      $choices = $findChoices->pluck('choices')->first(); // choices cua cau hoi
      $choicesArray = json_decode($choices, true);
      return QuestionLabelEnum::getAnswerLabels(count($choicesArray));
  }
  $levelStar = getLevelExercise(
      countCorrectAnswer($answerData, $answers->toArray()),
      $selectedParam['question_number'],
  );

  $descriptions = [
      'Đặt ra mục tiêu, đam mê, và không ngừng nỗ lực - thành công sẽ là thành tựu của những ai kiên trì và không bao giờ từ bỏ.',
      'Những nỗ lực hôm nay sẽ thắp sáng con đường tương lai của bạn. Hãy tin tưởng vào bản thân và tiến lên với mục tiêu rực rỡ!',
      'Hãy kiên trì và nỗ lực, thành công sẽ đến với những ai không ngừng cố gắng.',
      'Chăm chỉ hôm nay, thành công ngày mai – bạn đang trên đường chinh phục ước mơ!',
  ];
  $randomDescription = $descriptions[array_rand($descriptions)];
@endphp
@section('content')
  <div class="page-content col-8 col-md-9 col-xl-10 flex-grow-1 p-0">
    @include('layout.landing_banner', [
        'title' => 'Kết quả: ' . $chapter->course->grade->name . ' - ' . $chapter->course->subject->name,
        'description' => $randomDescription,
    ])
    <section class="test-result">
      <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">
            <div class="test-result-star d-flex justify-content-center">
              @if ($levelStar == 0)
                <i class="fa-solid fa-star icon-star"></i>
                <i class="fa-solid fa-star icon-star"></i>
                <i class="fa-solid fa-star icon-star"></i>
              @else
                <i class="fa-solid fa-star icon-star {{ $levelStar >= 1 ? 'active' : '' }}"></i>
                <i class="fa-solid fa-star icon-star {{ $levelStar >= 2 ? 'active' : '' }}"></i>
                <i class="fa-solid fa-star icon-star {{ $levelStar == 3 ? 'active' : '' }}"></i>
              @endif
            </div>
            <h4 class="test-result-level text-red-main fw-bold mt-2">
              Level {{ $levelStar }}
            </h4>
            <h4 class="test-result-number-correct mb-0">
              <span class="number-correct-answer text-approved-green fw-900 fs-48">
                {{ countCorrectAnswer($answerData, $answers->toArray()) }}
              </span>
              <span class="text-neutral-08 fs-36">/</span>
              <span class="number-question text-neutral-04 fw-semibold">
                {{ $selectedParam['question_number'] }}
              </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('level_tests.viewLevelTest', ['from_chapter_id' => $selectedParam['from_chapter_id'], 'to_chapter_id' => $selectedParam['to_chapter_id'], 'question_order' => 1, 'question_number' => $selectedParam['question_number']]) }}"
              class="btn-fill-primary fs-18 fw-semibold text-decoration-none btn-test-again mt-4 text-center">Kiểm Tra
              Thêm
            </a>
          </div>
        </div>
        <div class="proficiency-assessment-test-content test-result-questions-wrap">
          @foreach ($answerData as $ans)
            <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 {{ $loop->index + 1 }}:</h5>
              </div>
              <div class="card mb-3">
                <div class="imgCoverPosition">
                  <div class="showByMathpix p-4"
                    data-content="{{ getImageQuestion($answers, $ans['question_id'])['text'] }}"
                    data-choices="{{ getImageQuestion($answers, $ans['question_id'])['choices'] }}">
                  </div>
                  {{-- <img src="{{ getImageQuestion($answers, $ans['question_id']) }}" class="card-img-top"
                    alt="Image question"> --}}
                </div>
                @if (!$ans['theory_answer'])
                  {{-- Truong hop tra loi trac nghiem A,B,C,D --}}
                  <div class="card-body text-center">
                    @foreach (getAnswerLabels($answers, $ans['question_id']) as $label)
                      <div class="form-check form-check-inline mx-4">
                        <input disabled
                          class="form-check-input {{ getLabelClass($label, $ans['answer'], getCorrectAnswer($answers, $ans['question_id'])['correct']) }}"
                          type="checkbox"
                          {{ getCorrectAnswer($answers, $ans['question_id'])['correct'] === $label || $ans['answer'] === $label ? 'checked' : '' }}>
                        <label
                          class="form-check-label {{ getLabelClass($label, $ans['answer'], getCorrectAnswer($answers, $ans['question_id'])['correct']) }}">{{ $label }}
                          @if (getLabelClass($label, $ans['answer'], getCorrectAnswer($answers, $ans['question_id'])['correct']) ===
                                  '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, $ans['answer'], getCorrectAnswer($answers, $ans['question_id'])['correct']) ===
                                  '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 (getCorrectAnswer($answers, $ans['question_id'])['text_answer'])
                    <div class="test-result-question-explain p-4">
                      <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="{{ getCorrectAnswer($answers, $ans['question_id'])['text_answer'] }}"
                          data-result="{{ getCorrectAnswer($answers, $ans['question_id'])['correct'] }}">
                        </div>
                        {{-- <img src="{{ getCorrectAnswer($answers, $ans['question_id'])['image_answer'] }}"
                          class="card-img-top" alt="Image answer and explain"> --}}
                      </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>{{ $ans['theory_answer'] }}</textarea>
                    {{-- <button class="answerQuestion btn btn-danger rounded-5 disableBtn my-3 px-3 py-2">Trả
                      lời</button> --}}
                  </div>
                  <div class="theoryQuestion mb-3">
                    <label for="exampleFormControlTextarea1" class="form-label">Đáp án</label>
                    <div class="textAnswer imgCoverPosition">
                      <div class="showByMathpix"
                        data-content="{{ getCorrectAnswer($answers, $ans['question_id'])['text_answer'] }}"
                        data-result="{{ getCorrectAnswer($answers, $ans['question_id'])['correct'] }}">
                      </div>
                      {{-- <img src="{{ getCorrectAnswer($answers, $ans['question_id'])['image_answer'] }}"
                        class="card-img-top" alt="Image answer and explain"> --}}
                    </div>

                    <div class="d-flex justify-content-between align-items-center">
                      <label class="form-label">Bạn đã làm</label>
                      <div class="me-5">
                        @if ($ans['is_true'] == 1)
                          <button class="correctAnswer btn btn-danger rounded-5 disableBtn 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>
                        @endif
                        @if ($ans['is_true'] == 0)
                          <button class="wrongAnswer btn btn-light rounded-5 disableBtn 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>
                        @endif
                      </div>
                    </div>
                  </div>
                @endif

              </div>
            </div>
          @endforeach

        </div>
      </div>
    </section>
  </div>
@endsection

@push('script')
  @vite(['resources/js/question_mathpix.js', 'resources/js/question_mathpix_image_responsive.js'])
@endpush