@extends('layout.online_learning.online_learning_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\TypeExerciseStudentEnum;
  $domain = url('/');
  $type_teacher_course = 2;
  $slides = json_decode($lessonOnlineLearningData->lesson_file);
  $link_youtubes = json_decode($lessonOnlineLearningData->lesson_video);
  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 ($listLessonOnlineLearning as $index => $listLesson) {
      if ($listLesson->id === $lessonOnlineLearningData->lesson_id) {
          if (count($listLessonOnlineLearning) === 1) {
              $prevUnit = null;
              $nextUnit = null;
          } else {
              if ($index === 0) {
                  $prevUnit = null;
                  $nextUnit = $listLessonOnlineLearning[$index + 1];
              } elseif ($index === count($listLessonOnlineLearning) - 1) {
                  $prevUnit = $listLessonOnlineLearning[$index - 1];
                  $nextUnit = null;
              } else {
                  $prevUnit = $listLessonOnlineLearning[$index - 1];
                  $nextUnit = $listLessonOnlineLearning[$index + 1];
              }
          }
      }
  }
  function getByType($type, $getBestPointHistory)
  {
      return collect($getBestPointHistory)->where('type', $type)->first();
  }
@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>
              {{ $lessonOnlineLearningData->course_name }}
            </h2>
          </div>
          <div class="banner-main-text fs-17">
            <span>Giáo viên: {{ $lessonOnlineLearningData->teacher_name }}</span>
          </div>
        </div>
      </div>
    </section>
    <div class="container-fluid">
      @include('custom_errors.session-errors')
      <div class="row lesson-content unit-exercise-content" data-chapter-id="" data-unit-id="" data-course-purchased-id=""
        data-type-course={{ $type_teacher_course }}>
        <div class="d-flex flex-row justify-content-between">
          @if ($prevUnit)
            <a class="btn-unit btn btn-fill-primary"
              href="{{ route('online_learning.lesson', ['id' => $lessonOnlineLearningData->course_id, 'lesson_id' => $prevUnit['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">Bài Trước</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">Bài Trước</span>
            </a>
          @endif

          @if ($nextUnit)
            <a class="btn-unit btn btn-fill-primary"
              href="{{ route('online_learning.lesson', ['id' => $lessonOnlineLearningData->course_id, 'lesson_id' => $nextUnit['id']]) }}">
              <span class="fw-700 fs-16 text-center text-white text-decoration-none">Bài Sau</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">Bài Sau</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 class="frame">
          <div class="title-content">Bài giảng bằng Powerpoint</div>
        </div>
        <div class="course-online-slide">
          @if ($slides === null)
            <div class="text-center text-danger">Không có slide bài giảng</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={{ $lessonOnlineLearningData->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">Video bài giảng</div>
        </div>
        <div class="course-online-video" data-is-video-viewed={{ $lessonOnlineLearningData->is_video_viewed }}>
          @if ($link_youtubes === null)
            <div class="text-center text-danger">Không có video bài giảng</div>
          @else
            <div id="mediaContainer" style="width: 100%; height: 700px;">
              @if (!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] ?? '' }}" style="width: 100%; height: 100%;">
                </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="frame">
          <div class="title-content">Bài tập</div>
        </div>
        @if (
            $teacherCourseDetail->teacher_course_exercise ||
                $teacherCourseDetail->teacher_course_test ||
                $teacherCourseDetail->teacher_course_exam)
          <div class="exercise-evaluation d-flex flex-column gap-3 px-0">
            <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="text-blue fw-600 exercise-evaluation-score text-center">Thời gian</div>
              <div class="text-blue fw-600 exercise-evaluation-score text-center">Deadline</div>
              <div class="text-blue fw-600 exercise-evaluation-score text-center">Điểm cao nhất</div>
              <div class="btn-action-custom">
                <a class="btn btn-repeat btn-outline-danger invisible">Đã hoàn thành</a>
              </div>
            </div>
            {{-- Exercise --}}
            @if ($teacherCourseDetail->teacher_course_exercise)
              <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">Bài tập về nhà</text>
                  </svg>
                </div>
                <div class="text-blue fw-600 exercise-evaluation-score text-center">
                  {{ $teacherCourseDetail->teacher_course_exercise->time }} phút</div>
                <div class="exercise-evaluation-score text-center">
                  {{ getFormatDate($teacherCourseDetail->teacher_course_exercise->deadline) }}</div>
                <div class="exercise-evaluation-score text-center">
                  <span>{{ getByType(TypeExerciseStudentEnum::EXERCISE, $getBestPointHistory)->best_score ?? 0 }} /
                  </span>{{ getByType(TypeExerciseStudentEnum::EXERCISE, $getBestPointHistory)->total_question ?? $teacherCourseDetail->teacher_course_exercise->question_number }}
                </div>
                <div class="btn-action-custom">
                  @if (checkLimitDoExercise($lessonOnlineLearningData->lesson_id, TypeExerciseStudentEnum::EXERCISE))
                    <a id="startExercise" class="btn btn-repeat btn-outline-danger disabled" href="#"
                      data-level-exercise="">Đã hoàn thành</a>
                  @elseif (checkTimeDeadline($teacherCourseDetail->teacher_course_exercise->deadline))
                    <span class="fs-6 fw-700 text-danger">Quá ngày thực hiện</span>
                  @else
                    <a id="startExercise" class="btn btn-repeat btn-outline-danger"
                      href="{{ route('online_learning.viewDoExerciseStudent', ['teacher_course_detail_id' => $lessonOnlineLearningData->lesson_id, 'type' => TypeExerciseStudentEnum::EXERCISE]) }}"
                      data-level-exercise="">Làm bài</a>
                  @endif
                </div>
                {{-- @endif --}}
              </div>
              <div class="d-flex flex-column align-items-end w-100">
                <span class="fw-500 text-paragraph fs-6">Bạn cần thực hiện các bài test này trước khi qua bài mới</span>
              </div>
            @endif
            {{-- Test --}}
            @if ($teacherCourseDetail->teacher_course_test)
              <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">Bài kiểm tra</text>
                  </svg>
                </div>
                <div class="text-blue fw-600 exercise-evaluation-score text-center">
                  {{ $teacherCourseDetail->teacher_course_test->time }} phút</div>
                <div class="exercise-evaluation-score text-center">
                  {{ getFormatDate($teacherCourseDetail->teacher_course_test->deadline) }}</div>
                <div class="exercise-evaluation-score text-center">
                  <span>{{ getByType(TypeExerciseStudentEnum::TEST, $getBestPointHistory)->best_score ?? 0 }} /
                  </span>{{ getByType(TypeExerciseStudentEnum::TEST, $getBestPointHistory)->total_question ?? $teacherCourseDetail->teacher_course_test->question_number }}
                </div>
                <div class="btn-action-custom">
                  @if (checkLimitDoExercise($lessonOnlineLearningData->lesson_id, TypeExerciseStudentEnum::TEST))
                    <a id="startExercise" class="btn btn-repeat btn-outline-danger disabled" href="#"
                      data-level-exercise="">Đã hoàn thành</a>
                  @elseif (checkTimeDeadline($teacherCourseDetail->teacher_course_test->deadline))
                    <span class="fs-6 fw-700 text-danger">Quá ngày thực hiện</span>
                  @else
                    <a id="startExercise" class="btn btn-repeat btn-outline-danger"
                      href="{{ route('online_learning.viewDoExerciseStudent', ['teacher_course_detail_id' => $lessonOnlineLearningData->lesson_id, 'type' => TypeExerciseStudentEnum::TEST]) }}"
                      data-level-exercise="">Làm bài</a>
                  @endif
                </div>
              </div>
            @endif
            {{-- Exam --}}
            @if ($teacherCourseDetail->teacher_course_exam)
              <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">Thi học kỳ</text>
                  </svg>
                </div>
                <div class="text-blue fw-600 exercise-evaluation-score text-center">
                  {{ $teacherCourseDetail->teacher_course_exam->time }} phút</div>
                <div class="exercise-evaluation-score text-center">
                  {{ getFormatDate($teacherCourseDetail->teacher_course_exam->deadline) }}</div>
                <div class="exercise-evaluation-score text-center">
                  <span>{{ getByType(TypeExerciseStudentEnum::EXAM, $getBestPointHistory)->best_score ?? 0 }} /
                  </span>{{ getByType(TypeExerciseStudentEnum::EXAM, $getBestPointHistory)->total_question ?? $teacherCourseDetail->teacher_course_exam->question_number }}
                </div>
                <div class="btn-action-custom">
                  @if (checkLimitDoExercise($lessonOnlineLearningData->lesson_id, TypeExerciseStudentEnum::EXAM))
                    <a id="startExercise" class="btn btn-repeat btn-outline-danger disabled" href="#"
                      data-level-exercise="">Đã hoàn thành</a>
                  @elseif (checkTimeDeadline($teacherCourseDetail->teacher_course_exam->deadline))
                    <span class="fs-6 fw-700 text-danger">Quá ngày thực hiện</span>
                  @else
                    <a id="startExercise" class="btn btn-repeat btn-outline-danger"
                      href="{{ route('online_learning.viewDoExerciseStudent', ['teacher_course_detail_id' => $lessonOnlineLearningData->lesson_id, 'type' => TypeExerciseStudentEnum::EXAM]) }}"
                      data-level-exercise="">Làm bài</a>
                  @endif
                </div>
              </div>
            @endif
          </div>
        @else
          <div class="text-center text-danger">Không có bài tập</div>
        @endif
        <div class="d-flex flex-row justify-content-between">
          @if ($prevUnit)
            <a class="btn-unit btn btn-fill-primary"
              href="{{ route('online_learning.lesson', ['id' => $lessonOnlineLearningData->course_id, 'lesson_id' => $prevUnit['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">Bài Trước</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">Bài Trước</span>
            </a>
          @endif

          @if ($nextUnit)
            <a class="btn-unit btn btn-fill-primary"
              href="{{ route('online_learning.lesson', ['id' => $lessonOnlineLearningData->course_id, 'lesson_id' => $nextUnit['id']]) }}">
              <span class="fw-700 fs-16 text-center text-white text-decoration-none">Bài Sau</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">Bài Sau</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 = {{ $lessonOnlineLearningData->lesson_id }};
    localStorage.removeItem('selected_answers');
    localStorage.removeItem('selected_params');
    localStorage.removeItem('minutes');
    localStorage.removeItem('seconds');
    localStorage.removeItem('subject_name');
    localStorage.removeItem('grade_name');
  </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