@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'])
@endpush

@php
  use App\Enums\LevelExercise;
  use App\Enums\CourseType;
  $type_course_online = 1;
  $domain = url('/');
  $videos = json_decode($unitData->video);
  $slides = json_decode($unitData->slide);
  $link_youtubes = json_decode($unitData->link_youtube);
  if ($slides !== null) {
      $paths = [];
      $fileExtensions = [];
      foreach ($slides as $index => $slide) {
          $paths[$index] = 'http://docs.google.com/gview?url=' . Storage::url($slide) . '&embedded=true';
          $fileExtensions[$index] = strtolower(pathinfo($slide, PATHINFO_EXTENSION));
      }
  }
  if ($link_youtubes !== null) {
      $embed_links = [];
      foreach ($link_youtubes as $index => $link_youtube) {
          preg_match(
              '/(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:watch\?(?:.*&)?v=|embed\/|v\/|.+?\/))([^\s&]+)/',
              $link_youtube,
              $matches,
          );
          $video_id = $matches[1] ?? '';

          // Tạo URL nhúng
          $embed_links[$index] = $video_id;
      }
  }
  foreach ($listUnits as $index => $listUnit) {
      if ($listUnit['unit_id'] === $unitData->id) {
          if (count($listUnits) === 1) {
              $prevUnit = null;
              $nextUnit = null;
          } else {
              if ($index === 0) {
                  $prevUnit = null;
                  $nextUnit = $listUnits[$index + 1];
              } elseif ($index === count($listUnits) - 1) {
                  $prevUnit = $listUnits[$index - 1];
                  $nextUnit = null;
              } else {
                  $prevUnit = $listUnits[$index - 1];
                  $nextUnit = $listUnits[$index + 1];
              }
          }
      }
  }
@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)['topic'] . ' ' . $unitData->unit_number . ' - ' . $unitData->name }}
            </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 active" aria-current="page">
                  {{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['topic'] . ' ' . $unitData->unit_number }}
                </li>
              </ol>
            </nav>
          </div>
        </div>
      </div>
    </section>
    <div class="container-fluid">
      @include('custom_errors.session-errors')
      <div class="row lesson-content unit-exercise-content" data-chapter-id={{ $unitData->chapter_id }}
        data-unit-id={{ $unitData->id }} data-course-purchased-id={{ $coursesPurchased['course_purchased']->id }}
        data-type-course={{ $type_course_online }}>
        <div class="d-flex flex-row justify-content-between">
          @if ($prevUnit)
            <a class="btn-unit btn btn-fill-primary"
              href="{{ route('units.detail_unit', ['course_purchased_id' => $coursesPurchased['course_purchased']->id, 'chapter_id' => $prevUnit['chapter_id'], 'unit_id' => $prevUnit['unit_id']]) }}">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M9 14L4 9L9 4" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                <path d="M20 20V13C20 11.9391 19.5786 10.9217 18.8284 10.1716C18.0783 9.42143 17.0609 9 16 9H4"
                  stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
              <span
                class="fw-700 fs-16 text-center text-white text-decoration-none">{{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['previous'] }}</span>
            </a>
          @else
            <a class="btn-unit btn btn-fill-primary disabled">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M9 14L4 9L9 4" stroke="#CC3A3D" stroke-width="2" stroke-linecap="round"
                  stroke-linejoin="round" />
                <path d="M20 20V13C20 11.9391 19.5786 10.9217 18.8284 10.1716C18.0783 9.42143 17.0609 9 16 9H4"
                  stroke="#CC3A3D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
              <span
                class="fw-700 fs-16 text-center text-decoration-none">{{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['previous'] }}</span>
            </a>
          @endif

          @if ($nextUnit)
            <a class="btn-unit btn btn-fill-primary"
              href="{{ route('units.detail_unit', ['course_purchased_id' => $coursesPurchased['course_purchased']->id, 'chapter_id' => $nextUnit['chapter_id'], 'unit_id' => $nextUnit['unit_id']]) }}">
              <span
                class="fw-700 fs-16 text-center text-white text-decoration-none">{{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['next'] }}</span>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M15 14L20 9L15 4" stroke="white" stroke-width="2" stroke-linecap="round"
                  stroke-linejoin="round" />
                <path d="M4 20V13C4 11.9391 4.42143 10.9217 5.17157 10.1716C5.92172 9.42143 6.93913 9 8 9H20"
                  stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
            </a>
          @else
            <a class="btn-unit btn btn-fill-primary disabled">
              <span
                class="fw-700 fs-16 text-center text-decoration-none">{{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['next'] }}</span>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M15 14L20 9L15 4" stroke="#CC3A3D" stroke-width="2" stroke-linecap="round"
                  stroke-linejoin="round" />
                <path d="M4 20V13C4 11.9391 4.42143 10.9217 5.17157 10.1716C5.92172 9.42143 6.93913 9 8 9H20"
                  stroke="#CC3A3D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
            </a>
          @endif
        </div>
        <div>
          <span class="fs-18 text-neutral-04">{{ $unitData->content }}</span>
        </div>
        <div class="frame">
          <div class="title-content">
            {{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['exercise'] }}</div>
        </div>
        <div class="exercise-evaluation d-flex flex-column gap-3">
          <div class="d-flex flex-row justify-content-between align-items-center">
            <div class="exercise-evaluation-header invisible">
              <svg xmlns="http://www.w3.org/2000/svg" width="206" height="0" viewBox="0 0 206 56" fill="none">
                <path d="M0 0H190.244L206 29L190.244 56H0V0Z" fill="#EFF7F1" />
                <text class="normal" x="36" y="50%" dominant-baseline="middle" text-anchor="start" fill="#299241"></text>
              </svg>
            </div>
            <div class="exercise-evaluation-star invisible">
              <div class="d-flex justify-content-center gap-3">
                <i class="fa-solid fa-star icon-star-best"></i>
                <i class="fa-solid fa-star icon-star-best"></i>
                <i class="fa-solid fa-star icon-star-best"></i>
              </div>
            </div>
            <div class="text-blue fw-600 exercise-evaluation-score text-center">
              {{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['best_score'] }}
            </div>
            <a class="btn btn-repeat btn-outline-danger invisible">Repeat</a>
          </div>
          @if ($coursesPurchased['course_purchased']->course_type === CourseType::COURSE_SELF_STUDY->value)
            {{-- Level basic --}}
            <div class="d-flex flex-row justify-content-between align-items-center">
              <div class="exercise-evaluation-header">
                <svg xmlns="http://www.w3.org/2000/svg" width="206" height="56" viewBox="0 0 206 56"
                  fill="none">
                  <path d="M0 0H190.244L206 29L190.244 56H0V0Z" fill="#EFF7F1" />
                  <text class="normal" x="36" y="50%" dominant-baseline="middle" text-anchor="start"
                    fill="#299241">Mức độ Cơ bản</text>
                </svg>
              </div>
              @if (isset(getBestPointHistory(Auth::user()->id, $unitData->id, LevelExercise::NORMAL->value)->right_answer))
                <div class="exercise-evaluation-star">
                  <div class="d-flex justify-content-center gap-3">
                    <i
                      class="fa-solid fa-star icon-star-best {{ getLevelExercise(getBestPointHistory(Auth::user()->id, $unitData->id, LevelExercise::NORMAL->value)->right_answer, getBestPointHistory(Auth::user()->id, $unitData->id, LevelExercise::NORMAL->value)->total_question) >= 1 ? 'active' : '' }}"></i>
                    <i
                      class="fa-solid fa-star icon-star-best {{ getLevelExercise(getBestPointHistory(Auth::user()->id, $unitData->id, LevelExercise::NORMAL->value)->right_answer, getBestPointHistory(Auth::user()->id, $unitData->id, LevelExercise::NORMAL->value)->total_question) >= 2 ? 'active' : '' }}"></i>
                    <i
                      class="fa-solid fa-star icon-star-best {{ getLevelExercise(getBestPointHistory(Auth::user()->id, $unitData->id, LevelExercise::NORMAL->value)->right_answer, getBestPointHistory(Auth::user()->id, $unitData->id, LevelExercise::NORMAL->value)->total_question) == 3 ? 'active' : '' }}"></i>
                  </div>
                </div>
                <div class="exercise-evaluation-score text-center">
                  <span>{{ getBestPointHistory(Auth::user()->id, $unitData->id, LevelExercise::NORMAL->value)->right_answer }}
                    / </span>
                  {{ getBestPointHistory(Auth::user()->id, $unitData->id, LevelExercise::NORMAL->value)->total_question }}
                </div>
                <a id="startExercise-{{ LevelExercise::NORMAL->value }}" class="btn btn-repeat btn-outline-danger"
                  href="{{ route('units.viewExerciseQuestion') }}"
                  data-level-exercise="{{ LevelExercise::NORMAL->value }}">Repeat</a>
              @else
                <div class="exercise-evaluation-star">
                  <div class="d-flex justify-content-center gap-3">
                    <i class="fa-solid fa-star icon-star-best"></i>
                    <i class="fa-solid fa-star icon-star-best"></i>
                    <i class="fa-solid fa-star icon-star-best"></i>
                  </div>
                </div>
                <div class="exercise-evaluation-score text-center">
                  <span>0 / </span>20
                </div>
                <a id="startExercise-{{ LevelExercise::NORMAL->value }}" class="btn btn-repeat btn-outline-danger"
                  href="{{ route('units.viewExerciseQuestion') }}"
                  data-level-exercise="{{ LevelExercise::NORMAL->value }}">Do Test</a>
              @endif
            </div>
            {{-- Level medium --}}
            <div class="d-flex flex-row justify-content-between align-items-center">
              <div class="exercise-evaluation-header">
                <svg xmlns="http://www.w3.org/2000/svg" width="204" height="56" viewBox="0 0 204 56"
                  fill="none">
                  <path d="M0 0H188.397L204 29L188.397 56H0V0Z" fill="#EFF3F8" />
                  <text class="good" x="36" y="50%" dominant-baseline="middle" text-anchor="start"
                    fill="#004DA9">Mức độ Khá</text>
                </svg>
              </div>
              @if (isset(getBestPointHistory(Auth::user()->id, $unitData->id, LevelExercise::MEDIUM->value)->right_answer))
                <div class="exercise-evaluation-star">
                  <div class="d-flex justify-content-center gap-3">
                    <i
                      class="fa-solid fa-star icon-star-best {{ getLevelExercise(getBestPointHistory(Auth::user()->id, $unitData->id, LevelExercise::MEDIUM->value)->right_answer, getBestPointHistory(Auth::user()->id, $unitData->id, LevelExercise::MEDIUM->value)->total_question) >= 1 ? 'active' : '' }}"></i>
                    <i
                      class="fa-solid fa-star icon-star-best {{ getLevelExercise(getBestPointHistory(Auth::user()->id, $unitData->id, LevelExercise::MEDIUM->value)->right_answer, getBestPointHistory(Auth::user()->id, $unitData->id, LevelExercise::MEDIUM->value)->total_question) >= 2 ? 'active' : '' }}"></i>
                    <i
                      class="fa-solid fa-star icon-star-best {{ getLevelExercise(getBestPointHistory(Auth::user()->id, $unitData->id, LevelExercise::MEDIUM->value)->right_answer, getBestPointHistory(Auth::user()->id, $unitData->id, LevelExercise::MEDIUM->value)->total_question) == 3 ? 'active' : '' }}"></i>
                  </div>
                </div>
                <div class="exercise-evaluation-score text-center">
                  <span>{{ getBestPointHistory(Auth::user()->id, $unitData->id, LevelExercise::MEDIUM->value)->right_answer }}
                    / </span>
                  {{ getBestPointHistory(Auth::user()->id, $unitData->id, LevelExercise::MEDIUM->value)->total_question }}
                </div>
                <a id="startExercise-{{ LevelExercise::MEDIUM->value }}" class="btn btn-repeat btn-outline-danger"
                  href="{{ route('units.viewExerciseQuestion') }}"
                  data-level-exercise="{{ LevelExercise::MEDIUM->value }}">Repeat</a>
              @else
                <div class="exercise-evaluation-star">
                  <div class="d-flex justify-content-center gap-3">
                    <i class="fa-solid fa-star icon-star-best"></i>
                    <i class="fa-solid fa-star icon-star-best"></i>
                    <i class="fa-solid fa-star icon-star-best"></i>
                  </div>
                </div>
                <div class="exercise-evaluation-score text-center">
                  <span>0 / </span>20
                </div>
                <a id="startExercise-{{ LevelExercise::MEDIUM->value }}" class="btn btn-repeat btn-outline-danger"
                  href="{{ route('units.viewExerciseQuestion') }}"
                  data-level-exercise="{{ LevelExercise::MEDIUM->value }}">Do Test</a>
              @endif
            </div>
            {{-- Level advanced --}}
            <div class="d-flex flex-row justify-content-between align-items-center">
              <div class="exercise-evaluation-header">
                <svg xmlns="http://www.w3.org/2000/svg" width="204" height="56" viewBox="0 0 204 56"
                  fill="none">
                  <path d="M0 0H188.397L204 29L188.397 56H0V0Z" fill="#F7EFEE" />
                  <text class="very-good" x="36" y="50%" dominant-baseline="middle" text-anchor="start"
                    fill="#C71B06">Mức độ Giỏi</text>
                </svg>
              </div>
              @if (isset(getBestPointHistory(Auth::user()->id, $unitData->id, LevelExercise::ADVANCED->value)->right_answer))
                <div class="exercise-evaluation-star">
                  <div class="d-flex justify-content-center gap-3">
                    <i
                      class="fa-solid fa-star icon-star-best {{ getLevelExercise(getBestPointHistory(Auth::user()->id, $unitData->id, LevelExercise::ADVANCED->value)->right_answer, getBestPointHistory(Auth::user()->id, $unitData->id, LevelExercise::ADVANCED->value)->total_question) >= 1 ? 'active' : '' }}"></i>
                    <i
                      class="fa-solid fa-star icon-star-best {{ getLevelExercise(getBestPointHistory(Auth::user()->id, $unitData->id, LevelExercise::ADVANCED->value)->right_answer, getBestPointHistory(Auth::user()->id, $unitData->id, LevelExercise::ADVANCED->value)->total_question) >= 2 ? 'active' : '' }}"></i>
                    <i
                      class="fa-solid fa-star icon-star-best {{ getLevelExercise(getBestPointHistory(Auth::user()->id, $unitData->id, LevelExercise::ADVANCED->value)->right_answer, getBestPointHistory(Auth::user()->id, $unitData->id, LevelExercise::ADVANCED->value)->total_question) == 3 ? 'active' : '' }}"></i>
                  </div>
                </div>
                <div class="exercise-evaluation-score text-center">
                  <span>{{ getBestPointHistory(Auth::user()->id, $unitData->id, LevelExercise::ADVANCED->value)->right_answer }}
                    / </span>
                  {{ getBestPointHistory(Auth::user()->id, $unitData->id, LevelExercise::ADVANCED->value)->total_question }}
                </div>
                <a id="startExercise-{{ LevelExercise::ADVANCED->value }}" class="btn btn-repeat btn-outline-danger"
                  href="{{ route('units.viewExerciseQuestion') }}"
                  data-level-exercise="{{ LevelExercise::ADVANCED->value }}">Repeat</a>
              @else
                <div class="exercise-evaluation-star">
                  <div class="d-flex justify-content-center gap-3">
                    <i class="fa-solid fa-star icon-star-best"></i>
                    <i class="fa-solid fa-star icon-star-best"></i>
                    <i class="fa-solid fa-star icon-star-best"></i>
                  </div>
                </div>
                <div class="exercise-evaluation-score text-center">
                  <span>0 / </span>20
                </div>
                <a id="startExercise-{{ LevelExercise::ADVANCED->value }}" class="btn btn-repeat btn-outline-danger"
                  href="{{ route('units.viewExerciseQuestion') }}"
                  data-level-exercise="{{ LevelExercise::ADVANCED->value }}">Do Test</a>
              @endif
            </div>
          @else
            {{-- Aboard course --}}
            <div class="d-flex flex-row justify-content-between align-items-center">
              <div class="exercise-evaluation-header">
                <svg xmlns="http://www.w3.org/2000/svg" width="206" height="56" viewBox="0 0 206 56"
                  fill="none">
                  <path d="M0 0H190.244L206 29L190.244 56H0V0Z" fill="#EFF7F1" />
                  <text class="normal" x="36" y="50%" dominant-baseline="middle" text-anchor="start"
                    fill="#299241">Exerice</text>
                </svg>
              </div>
              @if (isset(getBestPointHistory(Auth::user()->id, $unitData->id, null)->right_answer))
                <div class="exercise-evaluation-star">
                  <div class="d-flex justify-content-center gap-3">
                    <i
                      class="fa-solid fa-star icon-star-best {{ getLevelExercise(getBestPointHistory(Auth::user()->id, $unitData->id, null)->right_answer, getBestPointHistory(Auth::user()->id, $unitData->id, null)->total_question) >= 1 ? 'active' : '' }}"></i>
                    <i
                      class="fa-solid fa-star icon-star-best {{ getLevelExercise(getBestPointHistory(Auth::user()->id, $unitData->id, null)->right_answer, getBestPointHistory(Auth::user()->id, $unitData->id, null)->total_question) >= 2 ? 'active' : '' }}"></i>
                    <i
                      class="fa-solid fa-star icon-star-best {{ getLevelExercise(getBestPointHistory(Auth::user()->id, $unitData->id, null)->right_answer, getBestPointHistory(Auth::user()->id, $unitData->id, null)->total_question) == 3 ? 'active' : '' }}"></i>
                  </div>
                </div>
                <div class="exercise-evaluation-score text-center">
                  <span>{{ getBestPointHistory(Auth::user()->id, $unitData->id, null)->right_answer }}
                    / </span>
                  {{ getBestPointHistory(Auth::user()->id, $unitData->id, null)->total_question }}
                </div>
                <a id="startExercise" class="btn btn-repeat btn-outline-danger"
                  href="{{ route('units.viewExerciseQuestion') }}" data-level-exercise="">Repeat</a>
              @else
                <div class="exercise-evaluation-star">
                  <div class="d-flex justify-content-center gap-3">
                    <i class="fa-solid fa-star icon-star-best"></i>
                    <i class="fa-solid fa-star icon-star-best"></i>
                    <i class="fa-solid fa-star icon-star-best"></i>
                  </div>
                </div>
                <div class="exercise-evaluation-score text-center">
                  <span>0 / </span>20
                </div>
                <a id="startExercise" class="btn btn-repeat btn-outline-danger"
                  href="{{ route('units.viewExerciseQuestion') }}" data-level-exercise="">Do Test</a>
              @endif
            </div>
          @endif
        </div>
        <div class="frame">
          <div class="title-content">
            {{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['slide'] }}</div>
        </div>
        <div class="course-online-slide">
          @if ($slides === null)
            <div class="text-center text-danger">
              {{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['no_slide'] }}</div>
          @else
            {{-- <iframe id="slideIframe"
              src="{{ strtolower(pathinfo($slides[0], PATHINFO_EXTENSION)) === 'pptx' ? 'http://docs.google.com/gview?url=' . Storage::url($slides[0]) . '&embedded=true' : Storage::url($slides[0]) }}"
              style="width: 100%; height: 900px;" frameborder="0"></iframe> --}}
            <div id="slide-wrapper" data-is-slide-viewed={{ $unitData->is_slide_viewed }}>
              @if (strtolower(pathinfo($slides[0], PATHINFO_EXTENSION)) === 'pdf')
                @include('open_viewpdf.open_pdf', ['filePath' => Storage::url($slides[0])])
              @elseif (strtolower(pathinfo($slides[0], PATHINFO_EXTENSION)) === 'pptx')
                <iframe id="slideIframe"
                  src="http://docs.google.com/gview?url={{ Storage::url($slides[0]) }}&embedded=true"
                  style="width: 100%; height: 900px;" frameborder="0"></iframe>
              @else
                <div class="alert alert-danger" role="alert">
                  Không mở được định dạng file này.
                </div>
              @endif
            </div>

            @if (count($slides) > 1)
              <ul class="d-flex flex-row gap-5 mt-4">
                @foreach ($slides as $index => $slide)
                  <li class="slide-item" data-index="{{ $index + 1 }}">
                    <a href="{{ $fileExtensions[$index] === 'pdf' ? Storage::url($slide) : $paths[$index] }}"
                      class="slide-link btn btn-outline-danger text-decoration-none {{ $loop->first ? 'disabled' : '' }}">Link
                      {{ $index + 1 }}</a>
                  </li>
                @endforeach
              </ul>
            @endif
          @endif
        </div>
        <div class="frame">
          <div class="title-content">
            {{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['video'] }}</div>
        </div>
        <div class="course-online-video" data-is-video-viewed={{ $unitData->is_video_viewed }}>
          @if ($link_youtubes === null && $videos === null)
            <div class="text-center text-danger">
              {{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['no_video'] }}
            </div>
          @else
            <div id="mediaContainer" style="width: 100%; height: 700px;">
              @if (!empty($videos) && is_array($videos))
                <video id="videoPlayer" controls style="width: 100%; height: 100%;">
                  <source src="{{ Storage::url($videos[0]) }}" type="video/mp4">
                  Your browser does not support the video tag.
                </video>
              @elseif (!empty($link_youtubes) && is_array($link_youtubes))
                {{-- <iframe id="linkYoutubeIframe" src="{{ $embed_links[0] ?? '' }}?enablejsapi=1"
                  style="width: 100%; height: 100%;" frameborder="0" allowfullscreen></iframe> --}}
                <div id="linkYoutubeIframe" link="{{ $embed_links[0] ?? '' }}"></div>
              @endif
            </div>

            <!-- List of buttons for videos and YouTube links -->
            <ul class="d-flex flex-row gap-5 mt-4">
              @if (!empty($videos) && is_array($videos))
                @foreach ($videos as $index => $video)
                  <li class="video-item" data-index="{{ $index + 1 }}">
                    <button class="media-link btn btn-outline-danger text-decoration-none"
                      data-video-src="{{ Storage::url($video) }}">
                      <i class="fa-solid fa-caret-right"></i> Link HD {{ $index + 1 }}
                    </button>
                  </li>
                @endforeach
              @endif
              @if (!empty($link_youtubes) && is_array($link_youtubes))
                @foreach ($embed_links as $index => $path)
                  <li class="video-item" data-index="{{ $index + 1 }}">
                    <button class="media-link btn btn-outline-danger text-decoration-none"
                      data-link-youtube="{{ $path }}">
                      <i class="fa-solid fa-caret-right"></i> Link {{ $index + 1 }}
                    </button>
                  </li>
                @endforeach
              @endif
            </ul>
          @endif
        </div>
        <div class="d-flex flex-row justify-content-between">
          @if ($prevUnit)
            <a class="btn-unit btn btn-fill-primary"
              href="{{ route('units.detail_unit', ['course_purchased_id' => $coursesPurchased['course_purchased']->id, 'chapter_id' => $prevUnit['chapter_id'], 'unit_id' => $prevUnit['unit_id']]) }}">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                fill="none">
                <path d="M9 14L4 9L9 4" stroke="white" stroke-width="2" stroke-linecap="round"
                  stroke-linejoin="round" />
                <path d="M20 20V13C20 11.9391 19.5786 10.9217 18.8284 10.1716C18.0783 9.42143 17.0609 9 16 9H4"
                  stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
              <span
                class="fw-700 fs-16 text-center text-white text-decoration-none">{{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['previous'] }}</span>
            </a>
          @else
            <a class="btn-unit btn btn-fill-primary disabled">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                fill="none">
                <path d="M9 14L4 9L9 4" stroke="#CC3A3D" stroke-width="2" stroke-linecap="round"
                  stroke-linejoin="round" />
                <path d="M20 20V13C20 11.9391 19.5786 10.9217 18.8284 10.1716C18.0783 9.42143 17.0609 9 16 9H4"
                  stroke="#CC3A3D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
              <span
                class="fw-700 fs-16 text-center text-decoration-none">{{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['previous'] }}</span>
            </a>
          @endif

          @if ($nextUnit)
            <a class="btn-unit btn btn-fill-primary"
              href="{{ route('units.detail_unit', ['course_purchased_id' => $coursesPurchased['course_purchased']->id, 'chapter_id' => $nextUnit['chapter_id'], 'unit_id' => $nextUnit['unit_id']]) }}">
              <span
                class="fw-700 fs-16 text-center text-white text-decoration-none">{{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['next'] }}</span>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                fill="none">
                <path d="M15 14L20 9L15 4" stroke="white" stroke-width="2" stroke-linecap="round"
                  stroke-linejoin="round" />
                <path d="M4 20V13C4 11.9391 4.42143 10.9217 5.17157 10.1716C5.92172 9.42143 6.93913 9 8 9H20"
                  stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
            </a>
          @else
            <a class="btn-unit btn btn-fill-primary disabled">
              <span
                class="fw-700 fs-16 text-center text-decoration-none">{{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['next'] }}</span>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                fill="none">
                <path d="M15 14L20 9L15 4" stroke="#CC3A3D" stroke-width="2" stroke-linecap="round"
                  stroke-linejoin="round" />
                <path d="M4 20V13C4 11.9391 4.42143 10.9217 5.17157 10.1716C5.92172 9.42143 6.93913 9 8 9H20"
                  stroke="#CC3A3D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
            </a>
          @endif
        </div>
      </div>

    </div>
  </section>
@endsection

@push('script')
  <script>
    var unit_id = {{ $unitData->id }};
  </script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="https://www.youtube.com/iframe_api"></script>

  @vite(['resources/js/unit.js', 'resources/js/unit/check_slide_video_progress.js'])
  <script>
    // tải API YouTube
    function loadYouTubeAPI() {
      if ($('script[src="https://www.youtube.com/iframe_api"]').length === 0) {
        var tag = document.createElement('script');
        tag.src = "https://www.youtube.com/iframe_api";
        document.head.appendChild(tag);
      }

      window.onYouTubeIframeAPIReady = function() {
        loadYouTubePlayer();
      };
    }

    var videoWrapper = $(".course-online-video");
    var isVideoViewed = $(".course-online-video").data("is-video-viewed");
    let typeCourse = $('.lesson-content').data('type-course');

    // tạo player YouTube
    function loadYouTubePlayer() {
      var youtubeDiv = document.getElementById('linkYoutubeIframe');
      if (!youtubeDiv) return;

      var videoId = youtubeDiv.getAttribute('link');

      // xóa player cũ nếu có
      if (window.player) {
        window.player.destroy();
        window.player = null;
      }

      window.player = new YT.Player('linkYoutubeIframe', {
        height: '100%',
        width: '100%',
        videoId: videoId,
        playerVars: {
          'playsinline': 1
        },
        events: {
          'onStateChange': onPlayerStateChange
        }
      });
    }

    var done = false;

    if (isVideoViewed == 0 && typeof unit_id !== "undefined") {
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          markVideoAsViewed(unit_id, typeCourse);
          $(".course-online-video").attr("data-is-video-viewed", 1);
          done = true;
        }
      }
    }

    // api thay đổi trạng thái đã xem video
    function markVideoAsViewed(unit_id, typeCourse) {
      axios.post(`/progress/video/${unit_id}`, {
          type_course: typeCourse
        }, {
          headers: {
            "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content
          }
        })
        .then(response => {
          console.log("Video marked as viewed:", response.data);
        })
        .catch(error => {
          console.error("Error marking video as viewed:", error);
        });
    }
  </script>
@endpush