@extends('layout.unit.unit_app')

@push('style')
  @vite(['resources/css/layout/banner_main.css', 'resources/css/landing.css', 'resources/css/animate.css', 'resources/css/students/student.css', 'resources/css/unit/unit_detail.css', 'resources/css/unit/unit_exercise.css', 'resources/css/level-test.css'])
@endpush
@php
  use App\Enums\QuestionLabelEnum;
  use App\Enums\LevelExercise;
  use App\Enums\CourseType;

  if ($selectedExerciseParam['level'] != null) {
      switch ($selectedExerciseParam['level']) {
          case LevelExercise::NORMAL->value:
              $level = LevelExercise::NORMAL->name();
              break;
          case LevelExercise::MEDIUM->value:
              $level = LevelExercise::MEDIUM->name();
              break;
          default:
              $level = LevelExercise::ADVANCED->name();
      }
  } else {
      $level = '';
  }
  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)
  {
      $label = strtoupper($label);
      $answer = strtoupper($answer);
      $correct = strtoupper($correct);
      if (($label === $correct && $correct === $answer) || ($label === $correct && $answer !== $correct)) {
          return 'answered-correct'; // cau tra loi dung voi dap an va dung voi label hoac 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));
  }
  function getchoiceLabels($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

      if (json_decode($choices, true)) {
          $choices = str_replace(['<p>', '<\/p>'], '', $choices);
          $choicesArray = json_decode($choices, true);
          if (is_null($choicesArray) || !is_array($choicesArray)) {
              $choices = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
              $choicesArray = json_decode(json_encode($choices), true);
          }
      } else {
          $choices = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
          $choicesArray = json_decode(json_encode($choices), true);
      }
      return $choicesArray;
  }

  $levelStar = getLevelExercise(
      countCorrectAnswer($answerExerciseData, $answerExercises->toArray()),
      $selectedExerciseParam['question_number'],
  );
@endphp
@section('content')
  <section class="page-wrap col-8 col-md-9 col-xl-10 flex-grow-1 px-0">
    <section class="banner-main position-relative w-100">
      <div class="banner-unit">
        <img src="{{ asset('img/promotion/banner_class.png') }}" alt="" class="w-100">
      </div>
      <div class="banner-main-wrap position-absolute mt-2">
        <div class="banner-main-content text-white">
          <div class="banner-main-header text-uppercase">
            <h2>{{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['result'] }}</h2>
          </div>
          <div class="banner-main-text fs-17">
            <nav aria-label="breadcrumb">
              <ol class="breadcrumb">
                <li class="breadcrumb-item breadcrumb-unit"><a href="/">Trang chủ</a></li>
                <li class="breadcrumb-item breadcrumb-unit"><a href="{{ route('students.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item breadcrumb-unit capitalize-first"><a
                    href="{{ route('units.list_unit', ['id' => $coursesPurchased['course_purchased']->id]) }}">
                    {{ $unitData->subject_name }} - {{ $unitData->grade_name }}</a>
                </li>
                <li class="breadcrumb-item breadcrumb-unit"><a
                    href="{{ route('units.detail_unit', ['course_purchased_id' => $coursesPurchased['course_purchased']->id, 'chapter_id' => $unitData->chapter_id, 'unit_id' => $unitData->id]) }}">
                    {{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['topic'] }}
                    {{ $unitData->unit_number }}</a>
                </li>
                <li class="breadcrumb-item breadcrumb-unit active" aria-current="page">
                  {{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['result'] }}
                </li>
              </ol>
            </nav>
          </div>
        </div>
      </div>
    </section>
    <section class="test-result">
      <div class="test-result-wrap pb-2 pt-4 unit-exercise-content" data-chapter-id={{ $unitData->chapter_id }}
        data-unit-id={{ $unitData->id }} data-course-purchased-id={{ $coursesPurchased['course_purchased']->id }}>
        <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-5">
          <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 }}
            </h4>
            <h4 class="test-result-number-correct mb-0">
              <span class="number-correct-answer text-approved-green fw-900 fs-48">
                {{ countCorrectAnswer($answerExerciseData, $answerExercises->toArray()) }}
              </span>
              <span class="text-neutral-08 fs-36">/</span>
              <span class="number-question text-neutral-04 fw-semibold">
                {{ $selectedExerciseParam['question_number'] }}
              </span>
            </h4>
          </div>
          <div class="d-flex">
            <div class="btn-result-navigate">
              @if ($coursesPurchased['course_purchased']->course_type === CourseType::COURSE_SELF_STUDY->value)
                {{-- Khoa tu hoc online --}}
                @if ($selectedExerciseParam['level'] == LevelExercise::NORMAL->value)
                  <a id="startExercise-{{ LevelExercise::NORMAL->value }}"
                    class="btn-outline-red btn-10 fs-18 fw-semibold text-decoration-none btn-test-again text-center"
                    href="{{ route('units.viewExerciseQuestion') }}"
                    data-level-exercise="{{ LevelExercise::NORMAL->value }}">Bài Test Mới</a>
                  <a id="startExercise-{{ LevelExercise::MEDIUM->value }}"
                    class="btn-outline-red btn-10 fs-18 fw-semibold text-decoration-none btn-test-again text-center"
                    href="{{ route('units.viewExerciseQuestion') }}"
                    data-level-exercise="{{ LevelExercise::MEDIUM->value }}">{{ LevelExercise::MEDIUM->name() }}</a>
                  <a class="btn-fill-primary fs-18 fw-semibold text-decoration-none btn-test-again text-center"
                    href="{{ route('units.detail_unit', ['course_purchased_id' => $coursesPurchased['course_purchased']->id, 'chapter_id' => $unitData->chapter_id, 'unit_id' => $unitData->id]) }}">
                    Về Trang Của Bạn</a>
                  <a id="startExercise-{{ LevelExercise::ADVANCED->value }}"
                    class="btn-outline-red btn-10 fs-18 fw-semibold text-decoration-none btn-test-again text-center"
                    href="{{ route('units.viewExerciseQuestion') }}"
                    data-level-exercise="{{ LevelExercise::ADVANCED->value }}">{{ LevelExercise::ADVANCED->name() }}</a>
                @elseif ($selectedExerciseParam['level'] == LevelExercise::MEDIUM->value)
                  <a id="startExercise-{{ LevelExercise::MEDIUM->value }}"
                    class="btn-outline-red btn-10 fs-18 fw-semibold text-decoration-none btn-test-again text-center"
                    href="{{ route('units.viewExerciseQuestion') }}"
                    data-level-exercise="{{ LevelExercise::MEDIUM->value }}">Bài Test Mới</a>
                  <a id="startExercise-{{ LevelExercise::NORMAL->value }}"
                    class="btn-outline-red btn-10 fs-18 fw-semibold text-decoration-none btn-test-again text-center"
                    href="{{ route('units.viewExerciseQuestion') }}"
                    data-level-exercise="{{ LevelExercise::NORMAL->value }}">{{ LevelExercise::NORMAL->name() }}</a>
                  <a class="btn-fill-primary fs-18 fw-semibold text-decoration-none btn-test-again text-center"
                    href="{{ route('units.detail_unit', ['course_purchased_id' => $coursesPurchased['course_purchased']->id, 'chapter_id' => $unitData->chapter_id, 'unit_id' => $unitData->id]) }}">
                    Về Trang Của Bạn</a>
                  <a id="startExercise-{{ LevelExercise::ADVANCED->value }}"
                    class="btn-outline-red btn-10 fs-18 fw-semibold text-decoration-none btn-test-again text-center"
                    href="{{ route('units.viewExerciseQuestion') }}"
                    data-level-exercise="{{ LevelExercise::ADVANCED->value }}">{{ LevelExercise::ADVANCED->name() }}</a>
                @else
                  <a id="startExercise-{{ LevelExercise::ADVANCED->value }}"
                    class="btn-outline-red btn-10 fs-18 fw-semibold text-decoration-none btn-test-again text-center"
                    href="{{ route('units.viewExerciseQuestion') }}"
                    data-level-exercise="{{ LevelExercise::ADVANCED->value }}">Bài Test Mới</a>
                  <a id="startExercise-{{ LevelExercise::NORMAL->value }}"
                    class="btn-outline-red btn-10 fs-18 fw-semibold text-decoration-none btn-test-again text-center"
                    href="{{ route('units.viewExerciseQuestion') }}"
                    data-level-exercise="{{ LevelExercise::NORMAL->value }}">{{ LevelExercise::NORMAL->name() }}</a>
                  <a class="btn-fill-primary fs-18 fw-semibold text-decoration-none btn-test-again text-center"
                    href="{{ route('units.detail_unit', ['course_purchased_id' => $coursesPurchased['course_purchased']->id, 'chapter_id' => $unitData->chapter_id, 'unit_id' => $unitData->id]) }}">
                    Về Trang Của Bạn</a>
                  <a id="startExercise-{{ LevelExercise::MEDIUM->value }}"
                    class="btn-outline-red btn-10 fs-18 fw-semibold text-decoration-none btn-test-again text-center"
                    href="{{ route('units.viewExerciseQuestion') }}"
                    data-level-exercise="{{ LevelExercise::MEDIUM->value }}">{{ LevelExercise::MEDIUM->name() }}</a>
                @endif
              @else
                {{-- Khoa du hoc online --}}
                <a id="startExercise"
                  class="btn-outline-red btn-10 fs-18 fw-semibold text-decoration-none btn-test-again text-center"
                  href="{{ route('units.viewExerciseQuestion') }}" data-level-exercise="">Do More Test</a>
                <a id="startExercise"
                  class="btn-outline-red btn-10 fs-18 fw-semibold text-decoration-none btn-test-again text-center invisible">{{ LevelExercise::ADVANCED->name() }}</a>
                <a class="btn-fill-primary fs-18 fw-semibold text-decoration-none btn-test-again text-center"
                  href="{{ route('units.detail_unit', ['course_purchased_id' => $coursesPurchased['course_purchased']->id, 'chapter_id' => $unitData->chapter_id, 'unit_id' => $unitData->id]) }}">
                  About Your Page</a>
                <a id="startExercise"
                  class="btn-outline-red btn-10 fs-18 fw-semibold text-decoration-none btn-test-again text-center invisible">{{ LevelExercise::ADVANCED->name() }}</a>
              @endif
            </div>
          </div>
        </div>
        <div class="proficiency-assessment-test-content test-result-questions-wrap px-4">
          @foreach ($answerExerciseData as $index => $ans)
            <div class="test-result-questions-item d-flex flex-column gap-3">
              <div class="test-result-questions-name fw-semibold text-neutral-04 d-flex flex-column">
                <h5 class="fw-semibold mb-0">
                  {{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['question'] }}
                  {{ $loop->index + 1 }}:</h5>
                <h5 class="showByMathpix mb-0"
                  data-content="{{ getImageQuestion($answerExercises, $ans['question_id'])['text'] }}">
                </h5>
              </div>
              <div class="d-flex flex-column gap-3">
                @if (!$ans['theory_answer'])
                  {{-- Truong hop tra loi trac nghiem A,B,C,D --}}
                  <div class="d-flex flex-column gap-2">
                    @foreach (getchoiceLabels($answerExercises, $ans['question_id']) as $label)
                      <div class="d-flex justify-content-between px-3">
                        <div class="exercise-choice d-flex gap-3">
                          <input disabled
                            class="form-check-input pe-2 {{ getLabelClass(substr(ltrim($label), 0, 1), $ans['answer'], getCorrectAnswer($answerExercises, $ans['question_id'])['correct']) }}"
                            type="radio"
                            {{ getCorrectAnswer($answerExercises, $ans['question_id'])['correct'] === strtoupper(substr(ltrim($label), 0, 1)) || $ans['answer'] === strtoupper(substr(ltrim($label), 0, 1)) ? 'checked' : '' }}>
                          <label
                            class="form-check-label showChoiceByMathpix {{ getLabelClass(substr(ltrim($label), 0, 1), $ans['answer'], getCorrectAnswer($answerExercises, $ans['question_id'])['correct']) }}"
                            data-choice="{{ $label }}">
                          </label>
                        </div>
                        <div>
                          @if (getLabelClass(substr(ltrim($label), 0, 1),
                                  $ans['answer'],
                                  getCorrectAnswer($answerExercises, $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(substr(ltrim($label), 0, 1),
                                  $ans['answer'],
                                  getCorrectAnswer($answerExercises, $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
                        </div>
                      </div>
                    @endforeach
                  </div>
                  @if (getCorrectAnswer($answerExercises, $ans['question_id'])['text_answer'])
                    <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">{{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['see_explanation'] }}</a>
                    <div class="collapse" 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">
                            {{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['explain'] . ':' }}
                          </span>
                        </p>
                        <div class="text-approved-green imgCoverPosition">
                          <div class="showByMathpix mt-3"
                            data-content="{{ getCorrectAnswer($answerExercises, $ans['question_id'])['text_answer'] }}"
                            data-result="{{ getCorrectAnswer($answerExercises, $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>
                    </div>
                  @else
                    <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">{{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['see_explanation'] }}</a>
                    <div class="collapse" 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">
                            {{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['explain'] }}
                          </span>
                        </p>
                        <div class="text-approved-green imgCoverPosition">
                          <div class="showByMathpix mt-3"
                            data-content="{{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['no_explanation'] }}"
                            data-result="{{ getCorrectAnswer($answerExercises, $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>
                    </div>
                  @endif
                @else
                  {{-- Truong hop tra loi cau hoi tu luan --}}
                  <div class="theoryQuestion mb-3">
                    <label for="exampleFormControlTextarea1" class="form-label">
                      {{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['text_your_answer'] }}
                    </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">
                      {{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['text_answer'] }}
                    </label>
                    <div class="textAnswer imgCoverPosition">
                      <div class="showByMathpix"
                        data-content="{{ getCorrectAnswer($answerExercises, $ans['question_id'])['text_answer'] }}"
                        data-result="{{ getCorrectAnswer($answerExercises, $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">
                        {{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['text_you_did'] }}
                      </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">
                            {{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['btn_correct'] }}
                            <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">
                            {{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['btn_wrong'] }}
                            <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>
  </section>
@endsection
@push('script')
  @vite(['resources/js/question_mathpix.js', 'resources/js/unit.js', 'resources/js/question_mathpix_image_responsive.js'])
@endpush