@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'])
@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)
  {
      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($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)['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)['result'] }}
                </li>
              </ol>
            </nav>
          </div>
        </div>
      </div>
    </section>
    <div class="complete-body">
      <div class="row justify-content-center mx-0">
        <img src="{{ asset('img/unit/flag.png') }}" alt="flag">
      </div>
      <div class="d-flex">
        <div class="col-6">
          <div class="d-flex justify-content-center">
            <img src="{{ asset('img/unit/cup.png') }}" alt="">
          </div>
        </div>
        <div class="col-6">
          <div class="complete-content d-flex flex-column justify-content-center align-items-center h-100">
            <div class="d-flex flex-column gap-3">
              <div class="complete-message">
                {{ $coursesPurchased['course_purchased']->course_type === CourseType::COURSE_SELF_STUDY->value ? 'Chúc mừng bạn đã hoàn thành' : 'Congratulations on your completion' }}
              </div>
              <span class="complete-score">{{ countCorrectAnswer($answerExerciseData, $answerExercises->toArray()) }} /
                {{ $selectedExerciseParam['question_number'] }}</span>
              <div class="complete-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>
            </div>
            <div class="complete-accumulated d-flex flex-column align-items-center">
              <span>{{ $coursesPurchased['course_purchased']->course_type === CourseType::COURSE_SELF_STUDY->value ? 'Điểm tích lũy' : 'Accumulated points' }}</span>
              <span>+ {{ $score }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="position-relative w-100">
        <img src="{{ asset('img/unit/footer.png') }}" alt="footer-complete" class="w-100">
        <a class="fw-bold btn-view-result text-center text-decoration-none position-absolute"
          href="{{ route('units.viewResultExerciseQuestion') }}">
          <span class="me-2">
            {{ $coursesPurchased['course_purchased']->course_type === CourseType::COURSE_SELF_STUDY->value ? 'Xem kết quả' : 'See results' }}
          </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>
        </a>
      </div>
    </div>
  </section>
@endsection