@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;
  //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', 'E', 'F', 'G', 'H'];
  if (empty($choices)) {
      $choices = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
  }
  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 = '';
  }
@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)['unit'] . ' ' . $unitData->chapter_number }}
              -
              {{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['topic'] . ' ' . $unitData->unit_number }}:
              {{ $level }}
            </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)['exercise'] }}</li>
              </ol>
            </nav>
          </div>
        </div>
      </div>
    </section>
    @if ($question)
      <div class="container-fuild">
        <div class="row mx-5 my-5 exercise-frame unit-exercise-content" data-chapter-id={{ $unitData->chapter_id }}
          data-unit-id={{ $unitData->id }} data-course-purchased-id={{ $coursesPurchased['course_purchased']->id }}>
          <div
            class="{{ $coursesPurchased['course_purchased']->course_type === CourseType::COURSE_SELF_STUDY->value ? 'col-9' : 'col-12 px-0' }}">
            <div class="exercise-wrapper d-flex flex-column">
              <form action="{{ route('units.storeExerciseQuestion') }}" method="post" id="exerciseForm">
                @csrf
                <input type="hidden" name="is_true" value="">
                <input type="hidden" name="answer" value="">
                <input type="hidden" name="question_id" value="{{ $question->id }}">
                <div class="exercise-header d-flex">
                  @if ($coursesPurchased['course_purchased']->course_type === CourseType::COURSE_SELF_STUDY->value)
                    <svg xmlns="http://www.w3.org/2000/svg" width="201" height="56" viewBox="0 0 201 56"
                      fill="none">
                      <path d="M0 0H185.626L201 29L185.626 56H0V0Z" fill="#004DA9" />
                      <text class="exercise-header-number" x="55%" y="54%" dominant-baseline="middle"
                        text-anchor="middle"fill="#FFF">
                        {{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['question'] }}
                        {{ $selectedExerciseParam['question_order'] }} /
                        {{ $selectedExerciseParam['question_number'] }}</text>
                      <g transform="translate(8, 9)">
                        <svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" viewBox="0 0 38 38"
                          fill="none">
                          <path
                            d="M18.9827 35.6605C26.7981 35.6605 33.1338 34.0903 33.1338 32.1535C33.1338 30.2166 26.7981 28.6465 18.9827 28.6465C11.1672 28.6465 4.83154 30.2166 4.83154 32.1535C4.83154 34.0903 11.1672 35.6605 18.9827 35.6605Z"
                            fill="#EFEFEF" fill-opacity="0.6" />
                          <path
                            d="M29.5039 9.51562L9.61328 10.7058V18.9212C9.61328 20.4341 14.0676 23.1906 19.5627 23.1906C24.9205 23.1906 29.2872 20.4944 29.5021 19.0337L29.5039 19.0343V19.021V9.51562Z"
                            fill="#FAF4D7" />
                          <path
                            d="M19.5627 24.0819C13.8265 24.0819 8.72266 21.1962 8.72266 18.9219V10.7062C8.72266 10.235 9.08959 9.84523 9.55984 9.81703L29.4505 8.62686C29.6978 8.61082 29.9359 8.69929 30.1143 8.86762C30.2933 9.03595 30.3942 9.27048 30.3942 9.516V19.0216C30.3942 19.0697 30.3904 19.1172 30.383 19.1641C30.0573 21.3779 25 24.0819 19.5627 24.0819ZM10.5039 11.5451V18.9219C10.6099 19.7582 14.417 22.3006 19.5627 22.3006C24.835 22.3006 28.3808 19.7059 28.6133 18.9355V10.4615L10.5039 11.5451Z"
                            fill="#CA7900" />
                          <path opacity="0.2"
                            d="M19.5936 18.1448C19.4885 18.1448 19.3834 18.1261 19.2831 18.089L9.18933 14.335C8.72828 14.1634 8.49346 13.6507 8.66505 13.1897C8.83635 12.7287 9.34994 12.4941 9.8101 12.6654L19.5874 16.3015L28.4752 12.8611C28.9339 12.6832 29.4496 12.9118 29.6274 13.3702C29.8049 13.8289 29.5769 14.3448 29.1183 14.5224L19.9151 18.0849C19.8115 18.1249 19.7026 18.1448 19.5936 18.1448Z"
                            fill="#CA7900" />
                          <path
                            d="M20.5659 11.3164C20.5659 11.6442 19.9677 11.9102 19.23 11.9102C18.4922 11.9102 17.894 11.6442 17.894 11.3164C17.894 10.9887 19.2837 10.7227 19.23 10.7227C19.968 10.7227 20.5659 10.9884 20.5659 11.3164Z"
                            fill="#CA7900" />
                          <path
                            d="M3.26562 24.3789C2.7737 24.3789 2.375 23.9802 2.375 23.4883V11.0195C2.375 10.5276 2.7737 10.1289 3.26562 10.1289C3.75755 10.1289 4.15625 10.5276 4.15625 11.0195V23.4883C4.15625 23.9802 3.75755 24.3789 3.26562 24.3789Z"
                            fill="#CA7900" />
                          <path
                            d="M3.41406 19.332C4.31584 19.332 5.04688 18.601 5.04688 17.6992C5.04688 16.7974 4.31584 16.0664 3.41406 16.0664C2.51229 16.0664 1.78125 16.7974 1.78125 17.6992C1.78125 18.601 2.51229 19.332 3.41406 19.332Z"
                            fill="#FAF4D7" />
                          <path
                            d="M3.41406 20.2227C2.02261 20.2227 0.890625 19.0907 0.890625 17.6992C0.890625 16.3078 2.02261 15.1758 3.41406 15.1758C4.80552 15.1758 5.9375 16.3078 5.9375 17.6992C5.9375 19.0907 4.80552 20.2227 3.41406 20.2227ZM3.41406 16.957C3.00467 16.957 2.67188 17.2901 2.67188 17.6992C2.67188 18.1083 3.00467 18.4414 3.41406 18.4414C3.82345 18.4414 4.15625 18.1083 4.15625 17.6992C4.15625 17.2901 3.82345 16.957 3.41406 16.957Z"
                            fill="#CA7900" />
                          <path d="M36.118 10.1996L19.5627 16.2077L3.00781 10.1996L19.5627 4.19141L36.118 10.1996Z"
                            fill="#FAF4D7" />
                          <path
                            d="M19.5627 16.8016C19.4942 16.8016 19.4256 16.7897 19.36 16.766L2.80505 10.7578C2.57022 10.6726 2.41406 10.4493 2.41406 10.1997C2.41406 9.95 2.57022 9.72675 2.80505 9.64155L19.36 3.63339C19.4906 3.58589 19.634 3.5856 19.7652 3.63339L36.3208 9.64155C36.5556 9.72675 36.7117 9.95 36.7117 10.1997C36.7117 10.4493 36.5556 10.6726 36.3208 10.7578L19.7652 16.7657C19.6996 16.7897 19.631 16.8016 19.5627 16.8016ZM4.74809 10.1997L19.5625 15.5761L34.3774 10.1997L19.5625 4.82327L4.74809 10.1997Z"
                            fill="#CA7900" />
                          <path
                            d="M9.79767 13.6917C9.69199 13.6917 9.58422 13.6727 9.47942 13.6323L2.6893 11.0311C2.34196 10.8981 2.11396 10.5635 2.11722 10.1915C2.12049 9.81986 2.35443 9.48914 2.70414 9.36238L19.2591 3.35422C19.4556 3.28297 19.6703 3.28297 19.8668 3.35422L36.4223 9.36238C36.7714 9.48884 37.0051 9.81897 37.0092 10.1901C37.0131 10.5612 36.7863 10.896 36.4398 11.0302L29.7126 13.6314C29.2528 13.8081 28.738 13.5804 28.5608 13.122C28.3832 12.6633 28.6115 12.1474 29.0702 11.9701L33.5806 10.226L19.5628 5.13873L5.55622 10.2221L10.1165 11.9692C10.5758 12.1453 10.8056 12.6601 10.6298 13.1196C10.4938 13.4741 10.156 13.6917 9.79767 13.6917Z"
                            fill="#CA7900" />
                          <path
                            d="M19.7422 10.3516C20.603 10.3516 21.3008 10.0525 21.3008 9.68359C21.3008 9.31468 20.603 9.01562 19.7422 9.01562C18.8814 9.01562 18.1836 9.31468 18.1836 9.68359C18.1836 10.0525 18.8814 10.3516 19.7422 10.3516Z"
                            fill="#CA7900" />
                        </svg>
                      </g>
                    </svg>
                  @else
                    <svg xmlns="http://www.w3.org/2000/svg" width="275" height="56" viewBox="0 0 275 56"
                      fill="none">
                      <path d="M0 0H253.966L275 29L253.966 56H0V0Z" fill="#004DA9" />
                      <text class="exercise-header-number" x="54%" y="54%" dominant-baseline="middle"
                        text-anchor="middle"fill="#FFF">
                        {{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['question'] }}
                        {{ $selectedExerciseParam['question_order'] }} /
                        {{ $selectedExerciseParam['question_number'] }}</text>
                      <g transform="translate(8, 9)">
                        <svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" viewBox="0 0 38 38"
                          fill="none">
                          <path
                            d="M18.9827 35.6605C26.7981 35.6605 33.1338 34.0903 33.1338 32.1535C33.1338 30.2166 26.7981 28.6465 18.9827 28.6465C11.1672 28.6465 4.83154 30.2166 4.83154 32.1535C4.83154 34.0903 11.1672 35.6605 18.9827 35.6605Z"
                            fill="#EFEFEF" fill-opacity="0.6" />
                          <path
                            d="M29.5039 9.51562L9.61328 10.7058V18.9212C9.61328 20.4341 14.0676 23.1906 19.5627 23.1906C24.9205 23.1906 29.2872 20.4944 29.5021 19.0337L29.5039 19.0343V19.021V9.51562Z"
                            fill="#FAF4D7" />
                          <path
                            d="M19.5627 24.0819C13.8265 24.0819 8.72266 21.1962 8.72266 18.9219V10.7062C8.72266 10.235 9.08959 9.84523 9.55984 9.81703L29.4505 8.62686C29.6978 8.61082 29.9359 8.69929 30.1143 8.86762C30.2933 9.03595 30.3942 9.27048 30.3942 9.516V19.0216C30.3942 19.0697 30.3904 19.1172 30.383 19.1641C30.0573 21.3779 25 24.0819 19.5627 24.0819ZM10.5039 11.5451V18.9219C10.6099 19.7582 14.417 22.3006 19.5627 22.3006C24.835 22.3006 28.3808 19.7059 28.6133 18.9355V10.4615L10.5039 11.5451Z"
                            fill="#CA7900" />
                          <path opacity="0.2"
                            d="M19.5936 18.1448C19.4885 18.1448 19.3834 18.1261 19.2831 18.089L9.18933 14.335C8.72828 14.1634 8.49346 13.6507 8.66505 13.1897C8.83635 12.7287 9.34994 12.4941 9.8101 12.6654L19.5874 16.3015L28.4752 12.8611C28.9339 12.6832 29.4496 12.9118 29.6274 13.3702C29.8049 13.8289 29.5769 14.3448 29.1183 14.5224L19.9151 18.0849C19.8115 18.1249 19.7026 18.1448 19.5936 18.1448Z"
                            fill="#CA7900" />
                          <path
                            d="M20.5659 11.3164C20.5659 11.6442 19.9677 11.9102 19.23 11.9102C18.4922 11.9102 17.894 11.6442 17.894 11.3164C17.894 10.9887 19.2837 10.7227 19.23 10.7227C19.968 10.7227 20.5659 10.9884 20.5659 11.3164Z"
                            fill="#CA7900" />
                          <path
                            d="M3.26562 24.3789C2.7737 24.3789 2.375 23.9802 2.375 23.4883V11.0195C2.375 10.5276 2.7737 10.1289 3.26562 10.1289C3.75755 10.1289 4.15625 10.5276 4.15625 11.0195V23.4883C4.15625 23.9802 3.75755 24.3789 3.26562 24.3789Z"
                            fill="#CA7900" />
                          <path
                            d="M3.41406 19.332C4.31584 19.332 5.04688 18.601 5.04688 17.6992C5.04688 16.7974 4.31584 16.0664 3.41406 16.0664C2.51229 16.0664 1.78125 16.7974 1.78125 17.6992C1.78125 18.601 2.51229 19.332 3.41406 19.332Z"
                            fill="#FAF4D7" />
                          <path
                            d="M3.41406 20.2227C2.02261 20.2227 0.890625 19.0907 0.890625 17.6992C0.890625 16.3078 2.02261 15.1758 3.41406 15.1758C4.80552 15.1758 5.9375 16.3078 5.9375 17.6992C5.9375 19.0907 4.80552 20.2227 3.41406 20.2227ZM3.41406 16.957C3.00467 16.957 2.67188 17.2901 2.67188 17.6992C2.67188 18.1083 3.00467 18.4414 3.41406 18.4414C3.82345 18.4414 4.15625 18.1083 4.15625 17.6992C4.15625 17.2901 3.82345 16.957 3.41406 16.957Z"
                            fill="#CA7900" />
                          <path d="M36.118 10.1996L19.5627 16.2077L3.00781 10.1996L19.5627 4.19141L36.118 10.1996Z"
                            fill="#FAF4D7" />
                          <path
                            d="M19.5627 16.8016C19.4942 16.8016 19.4256 16.7897 19.36 16.766L2.80505 10.7578C2.57022 10.6726 2.41406 10.4493 2.41406 10.1997C2.41406 9.95 2.57022 9.72675 2.80505 9.64155L19.36 3.63339C19.4906 3.58589 19.634 3.5856 19.7652 3.63339L36.3208 9.64155C36.5556 9.72675 36.7117 9.95 36.7117 10.1997C36.7117 10.4493 36.5556 10.6726 36.3208 10.7578L19.7652 16.7657C19.6996 16.7897 19.631 16.8016 19.5627 16.8016ZM4.74809 10.1997L19.5625 15.5761L34.3774 10.1997L19.5625 4.82327L4.74809 10.1997Z"
                            fill="#CA7900" />
                          <path
                            d="M9.79767 13.6917C9.69199 13.6917 9.58422 13.6727 9.47942 13.6323L2.6893 11.0311C2.34196 10.8981 2.11396 10.5635 2.11722 10.1915C2.12049 9.81986 2.35443 9.48914 2.70414 9.36238L19.2591 3.35422C19.4556 3.28297 19.6703 3.28297 19.8668 3.35422L36.4223 9.36238C36.7714 9.48884 37.0051 9.81897 37.0092 10.1901C37.0131 10.5612 36.7863 10.896 36.4398 11.0302L29.7126 13.6314C29.2528 13.8081 28.738 13.5804 28.5608 13.122C28.3832 12.6633 28.6115 12.1474 29.0702 11.9701L33.5806 10.226L19.5628 5.13873L5.55622 10.2221L10.1165 11.9692C10.5758 12.1453 10.8056 12.6601 10.6298 13.1196C10.4938 13.4741 10.156 13.6917 9.79767 13.6917Z"
                            fill="#CA7900" />
                          <path
                            d="M19.7422 10.3516C20.603 10.3516 21.3008 10.0525 21.3008 9.68359C21.3008 9.31468 20.603 9.01562 19.7422 9.01562C18.8814 9.01562 18.1836 9.31468 18.1836 9.68359C18.1836 10.0525 18.8814 10.3516 19.7422 10.3516Z"
                            fill="#CA7900" />
                        </svg>
                      </g>
                    </svg>
                  @endif
                  <span
                    class="exercise-header-title">{{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['text'] }}</span>
                </div>
                <div class="exercise-content d-flex flex-column w-100">
                  @if ($question->solution->result)
                    <div class="exercise-question d-flex flex-column align-items-center mt-4">
                      <div class="exercise-text showByMathpix" data-content="{{ $question->text }}"></div>
                    </div>
                    <div class="exercise-choices row justify-content-evenly">
                      @foreach ($choices as $choice)
                        <div class="exercise-anwser">
                          <div class="exercise-choice d-flex align-items-center gap-3 mb-5">
                            <input class="exercise-choice-input" type="checkbox"
                              id="inlineCheckbox{{ $loop->index }}"
                              value="{{ QuestionLabelEnum::getkey($loop->index) }}">
                            <label class="exercise-choice-text showChoiceByMathpix" data-choice="{{ $choice }}"
                              for="inlineCheckbox{{ $loop->index }}"></label>
                          </div>
                        </div>
                      @endforeach

                      {{-- show validate error --}}
                      <p class="text-danger text-center"></p>
                    </div>
                  @else
                    <div class="exercise-question d-flex flex-column align-items-center mt-4">

                      <div class="exercise-text showByMathpix" data-content="{{ $question->text }}"
                        data-choices="{{ empty($question->choices) ? $question->choices : '[]' }}"></div>
                    </div>
                    <div class="theoryQuestion my-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" value=""></textarea>
                      {{-- show validate error --}}
                      <p class="text-danger"></p>
                      <button class="answerQuestion btn btn-danger fw-700 rounded-5 my-3 px-3 py-2">
                        {{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['btn_answer'] }}
                      </button>
                    </div>
                    <div class="theoryQuestion ansQuestion 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="{{ $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">
                          {{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['text_you_did'] }}
                        </label>
                        <div class="me-5">

                          <button class="correctAnswer btn btn-danger fw-700 rounded-5 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>
                          <button class="wrongAnswer btn btn-light fw-700 rounded-5 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>
                        </div>
                      </div>
                    </div>
                  @endif
                </div>
                <div class="exercise-footer d-flex justify-content-center w-100">
                  <button type="submit" class="fw-bold btn-next-question text-center">
                    @if ($selectedExerciseParam['question_order'] < $selectedExerciseParam['question_number'])
                      <span class="me-2">
                        {{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['btn_next_question'] }}
                      </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">
                        {{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['btn_complete'] }}
                      </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>
              </form>
            </div>
          </div>
          @if ($coursesPurchased['course_purchased']->course_type === CourseType::COURSE_SELF_STUDY->value)
            <div class="col-3">
              <div class="exercise-info d-flex flex-column">
                <div class="exercise-info-header d-flex justify-content-center align-items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24"
                    fill="none">
                    <path
                      d="M12.5 22C18.0228 22 22.5 17.5228 22.5 12C22.5 6.47715 18.0228 2 12.5 2C6.97715 2 2.5 6.47715 2.5 12C2.5 17.5228 6.97715 22 12.5 22Z"
                      stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M12.5 16V12" stroke="white" stroke-width="2" stroke-linecap="round"
                      stroke-linejoin="round" />
                    <path d="M12.5 8H12.51" stroke="white" stroke-width="2" stroke-linecap="round"
                      stroke-linejoin="round" />
                  </svg>
                  <span>Bạn có khoảng 30 phút để làm bài</span>
                </div>
                <div class="exercise-info-body d-flex flex-column align-items-center">
                  <div class="exercise-info-content">
                    Chúc bạn làm bài kiểm tra thật tốt!
                  </div>
                  <div class="exercise-info-action d-flex flex-column align-items-center gap-3">
                    <a id="startExercise-{{ LevelExercise::NORMAL->value }}"
                      class="btn btn-exercise-action btn-normal text-decoration-none {{ $selectedExerciseParam['level'] == LevelExercise::NORMAL->value ? 'disabled' : '' }}"
                      href="{{ route('units.viewExerciseQuestion') }}"
                      data-level-exercise="{{ LevelExercise::NORMAL->value }}">
                      <span class="fw-700">{{ LevelExercise::NORMAL->name() }}</span></a>
                    <a id="startExercise-{{ LevelExercise::MEDIUM->value }}"
                      class="btn btn-exercise-action btn-medium text-decoration-none {{ $selectedExerciseParam['level'] == LevelExercise::MEDIUM->value ? 'disabled' : '' }}"
                      href="{{ route('units.viewExerciseQuestion') }}"
                      data-level-exercise="{{ LevelExercise::MEDIUM->value }}">
                      <span class="fw-700">{{ LevelExercise::MEDIUM->name() }}</span></a>
                    <a id="startExercise-{{ LevelExercise::ADVANCED->value }}"
                      class="btn btn-exercise-action btn-advanced text-decoration-none {{ $selectedExerciseParam['level'] == LevelExercise::ADVANCED->value ? 'disabled' : '' }}"
                      href="{{ route('units.viewExerciseQuestion') }}"
                      data-level-exercise="{{ LevelExercise::ADVANCED->value }}">
                      <span class="fw-700">{{ LevelExercise::ADVANCED->name() }}</span></a>
                  </div>
                  {{-- <a class="btn-exercise-action btn-home text-decoration-none" href="{{ route('units.detail_unit', ['course_purchased_id' => $coursesPurchased['course_purchased']->id, 'chapter_id' => $unitData->chapter_id, 'unit_id' => $unitData->id]) }}">
                      <span class="fw-600">Về Trang Của Bạn</span>
                    </a> --}}
                  {{-- @if ($selectedExerciseParam['level'] == LevelExercise::NORMAL->value)
                    <a id="startExercise-{{ LevelExercise::NORMAL->value }}"
                      class="btn btn-exercise-action btn-normal text-decoration-none {{ $selectedExerciseParam['level'] == LevelExercise::NORMAL->value ? 'disabled' : '' }}"
                      href="{{ route('units.viewExerciseQuestion') }}" data-level-exercise="{{ LevelExercise::NORMAL->value }}">
                      <span class="fw-700">{{ LevelExercise::NORMAL->name() }}</span></a>
                    <a id="startExercise-{{ LevelExercise::MEDIUM->value }}"
                      class="btn btn-exercise-action btn-medium text-decoration-none {{ $selectedExerciseParam['level'] == LevelExercise::MEDIUM->value ? 'disabled' : '' }}"
                      href="{{ route('units.viewExerciseQuestion') }}" data-level-exercise="{{ LevelExercise::MEDIUM->value }}">
                      <span class="fw-700">{{ LevelExercise::MEDIUM->name() }}</span></a>
                    <a id="startExercise-{{ LevelExercise::ADVANCED->value }}"
                      class="btn btn-exercise-action btn-advanced text-decoration-none {{ $selectedExerciseParam['level'] == LevelExercise::ADVANCED->value ? 'disabled' : '' }}"
                      href="{{ route('units.viewExerciseQuestion') }}" data-level-exercise="{{ LevelExercise::ADVANCED->value }}">
                      <span class="fw-700">{{ LevelExercise::ADVANCED->name() }}</span></a>
                  @elseif ($selectedExerciseParam['level'] == LevelExercise::MEDIUM->value)
                    <a id="startExercise-{{ LevelExercise::NORMAL->value }}" class="btn-exercise-action btn-normal text-decoration-none"
                      href="{{ route('units.viewExerciseQuestion') }}" data-level-exercise="{{ LevelExercise::NORMAL->value }}">
                      <span class="fw-700">{{ LevelExercise::NORMAL->name() }}</span></a>
                    <a id="startExercise-{{ LevelExercise::ADVANCED->value }}" class="btn-exercise-action btn-advanced text-decoration-none"
                      href="{{ route('units.viewExerciseQuestion') }}" data-level-exercise="{{ LevelExercise::ADVANCED->value }}">
                      <span class="fw-700">{{ LevelExercise::ADVANCED->name() }}</span></a>
                  @else
                    <a id="startExercise-{{ LevelExercise::NORMAL->value }}" class="btn-exercise-action btn-normal text-decoration-none"
                      href="{{ route('units.viewExerciseQuestion') }}" data-level-exercise="{{ LevelExercise::NORMAL->value }}">
                      <span class="fw-700">{{ LevelExercise::NORMAL->name() }}</span></a>
                    <a id="startExercise-{{ LevelExercise::MEDIUM->value }}" class="btn-exercise-action btn-medium text-decoration-none"
                      href="{{ route('units.viewExerciseQuestion') }}" data-level-exercise="{{ LevelExercise::MEDIUM->value }}">
                      <span class="fw-700">{{ LevelExercise::MEDIUM->name() }}</span></a>
                  @endif --}}
                </div>
              </div>
            </div>
          @endif
        </div>
      </div>
    @else
      <p class="text-center text-danger my-5">
        {{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['no_question'] }}</p>
    @endif
  </section>
@endsection

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