@extends('layout.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/courses/list_unit.css', 'resources/css/unit/unit_detail.css'])
@endpush

@php
  use App\Enums\CourseType;

  function getColorAccordingStudyProgress($chapter_id): array
  {
      $countLearningResult = countLearningResultByChapterId(Auth::user()->id, $chapter_id);
      $countUnit = countUnitByChapterId($chapter_id);

      if ($countLearningResult == 0) {
          $data = [
              'bg' => '',
              'border' => '',
          ];
      } elseif ($countLearningResult < $countUnit) {
          $data = [
              'bg' => 'learning',
              'border' => 'border-learning',
          ];
      } else {
          $data = [
              'bg' => 'completed',
              'border' => 'border-completed',
          ];
      }
      return $data;
  }
@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>{{ $coursesPurchased['grade_name'] }} - {{ $coursesPurchased['subject_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="{{ route('students.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item breadcrumb-unit capitalize-first active" aria-current="page">
                  {{ $coursesPurchased['subject_name'] }} - {{ $coursesPurchased['grade_name'] }}</li>
              </ol>
            </nav>
          </div>
        </div>
      </div>
    </section>
    <div class="container-fluid">
      <div class="row mt-5">
        <div class="col-12 col-md-12 col-xl-12 list-unit-wrapper px-0">
          <div class="d-flex flex-column align-items-start position-relative gap-5 pb-md-5">
            <div class="d-flex align-items-start justify-content-around w-100">
              <div class="d-flex flex-column">
                <div class="mb-3">
                  <a class="btn-red-main btn btn-fill-primary {{ $coursesPurchased['course_purchased']->course_status == 0 ? 'disabled' : '' }}"
                    href="{{ $coursesPurchased['course_purchased']->course_type === CourseType::COURSE_SELF_STUDY->value
                        ? route('course_self_studies.detail', [
                            'grade_id' => $coursesPurchased['course_purchased']->grade_id,
                            'subject_id' => $coursesPurchased['course_purchased']->subject_id,
                        ])
                        : route('course_aboard_studies.detail', ['course_id' => $coursesPurchased['course_purchased']->course_id]) }}">
                    <span class="fw-700 fs-16 text-center text-white">
                      {{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['btn_add_course'] }}
                    </span>
                    <span>
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25"
                        fill="none">
                        <path
                          d="M19 11.8066V4.80664C19 4.27621 18.7893 3.7675 18.4142 3.39243C18.0391 3.01735 17.5304 2.80664 17 2.80664H4C3.46957 2.80664 2.96086 3.01735 2.58579 3.39243C2.21071 3.7675 2 4.27621 2 4.80664V17.8066C2 18.3371 2.21071 18.8458 2.58579 19.2209C2.96086 19.5959 3.46957 19.8066 4 19.8066H11"
                          stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M12 12.8066L16.166 22.8066L17.646 18.4516L22 16.9726L12 12.8066Z" stroke="white"
                          stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M18 18.8066L21 21.8066" stroke="white" stroke-width="2" stroke-linecap="round"
                          stroke-linejoin="round" />
                      </svg>
                    </span>
                  </a>
                </div>
                <span
                  class="fs-16 text-heading-color">{{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['course_end'] }}:
                  <strong
                    class="text-danger">{{ \Carbon\Carbon::parse($coursesPurchased['course_purchased']->time_end)->format('d/m/Y') }}</strong>
                </span>
              </div>
              <a class="btn-red-main btn btn-fill-primary"
                href="{{ route('units.viewStudyNotebook', ['id' => $coursesPurchased['course_purchased']->id]) }}">
                <span class="fw-700 fs-16 text-center text-white">
                  {{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['study_notebook'] }}
                </span>
                <span>
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                    fill="none">
                    <path
                      d="M10.7999 21.5998H4.79989C3.47441 21.5998 2.39989 20.5253 2.3999 19.1998L2.4 4.79989C2.4 3.47441 3.47452 2.3999 4.79999 2.3999H15.6003C16.9257 2.3999 18.0003 3.47442 18.0003 4.7999V9.5999M17.3999 17.3489V17.2857M6.60028 7.1999H13.8003M6.60028 10.7999H13.8003M6.60028 14.3999H10.2003M21.5999 17.3999C21.5999 17.3999 20.6037 20.3396 17.3999 20.2882C14.1961 20.2369 13.1999 17.3999 13.1999 17.3999C13.1999 17.3999 14.1557 14.4089 17.3999 14.4089C20.6441 14.4089 21.5999 17.3999 21.5999 17.3999Z"
                      stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                  </svg>
                </span>
              </a>
            </div>
            <div
              class="d-flex justify-content-center w-100 {{ checkIsExpiredCourseByEndDate($coursesPurchased['course_purchased']->time_end) ? 'disabled' : '' }}">
              <div id="chapter-group">
                <div id="chapter-center" class="chapter center">
                  <div class="subject-wrapper"></div>
                  <div class="subject">
                    {{ $coursesPurchased['subject_name'] }}<br>{{ $coursesPurchased['grade_name'] }}
                  </div>
                </div>
                @foreach ($coursesPurchased['chapters'] as $chapter)
                  <div id="chapter-{{ $chapter['chapters']['chapter_number'] }}" class="chapter around">
                    <div class="chapter-content position-relative"
                      data-target="#popover-{{ $chapter['chapters']['chapter_number'] }}">
                      <div
                        class="ellipse {{ getColorAccordingStudyProgress($chapter['chapters']['chapter_id'])['bg'] }}">
                      </div>
                      {{-- <img class="element-removebg" src="{{ asset('img/curriculum/circle-chapter1.png') }}" />
                      <div class="chapter-description ">
                        <div class="d-flex flex-column justify-content-center">
                          <span
                            class="fw-700 fs-20 text-center">{{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['unit'] . ' ' . $chapter['chapters']['chapter_number'] }}</span>
                        </div>
                      </div> --}}
                      <div class="element-removebg"></div>
                      <div class="chapter-description">
                        <div class="d-flex flex-column justify-content-center">
                          <span
                            class="fw-700 fs-20 text-center">{{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['unit'] . ' ' . $chapter['chapters']['chapter_number'] }}</span>
                        </div>
                      </div>
                    </div>
                    <div
                      class="unit-group d-flex flex-column hidden {{ getColorAccordingStudyProgress($chapter['chapters']['chapter_id'])['border'] }}"
                      id="popover-{{ $chapter['chapters']['chapter_number'] }}" popover>
                      <div class="unit-list w-100" id={{ $chapter['chapters']['chapter_number'] }}>
                        <div class="chapter-item">
                          <div class="d-flex flex-column justify-content-center">
                            <span
                              class="fw-500 fs-16">{{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['unit'] . ' ' . $chapter['chapters']['chapter_number'] }}</span>
                            <span class="fw-500 fs-16 pb-3">{{ $chapter['chapters']['chapter_name'] }}</span>
                          </div>
                        </div>
                        <div class="unit-list-item d-flex flex-column gap-3 px-lg-3 w-100">
                          @foreach ($chapter['units'] as $unit)
                            @if ($unit['unit_number'] == null)
                              <div class="text-danger fs-13">
                                {{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['no_lesson'] }}
                              </div>
                            @else
                              <div class="unit d-flex flex-row align-items-center pb-3 gap-3 w-100">
                                <div class="circular-progress" data-inner-circle-color="white"
                                  data-percentage="{{ getPercentageLearningResult(Auth::user()->id, $unit['unit_id'], $coursesPurchased['course_purchased']->course_type) }}">
                                  <div class="inner-circle"></div>
                                  <span class="percentage"></span>
                                </div>
                                <a class="unit-content fw-500 fs-13 text-decoration-none {{ getPercentageLearningResult(Auth::user()->id, $unit['unit_id'], $coursesPurchased['course_purchased']->course_type) > 0 ? 'text-completed' : '' }}"
                                  href="{{ route('units.detail_unit', ['course_purchased_id' => $coursesPurchased['course_purchased']->id, 'chapter_id' => $chapter['chapters']['chapter_id'], 'unit_id' => $unit['unit_id']]) }}">
                                  {{ checkIsCourseSeftStudy($coursesPurchased['course_purchased']->course_type)['topic'] . ' ' . $unit['unit_number'] . ': ' . $unit['unit_name'] }}
                                </a>
                              </div>
                            @endif
                          @endforeach
                        </div>
                      </div>
                    </div>
                  </div>
                @endforeach
              </div>
            </div>
            <div class="d-flex align-items-center justify-content-evenly w-100">
              <button id="prev-button" class="btn btn-list-unit btn-danger rounded-circle">
                <i class="fas fa-arrow-left"></i>
              </button>
              <div id="pagination-dots"></div>
              <button id="next-button" class="btn btn-list-unit btn-danger rounded-circle">
                <i class="fas fa-arrow-right"></i>
              </button>
            </div>
          </div>

        </div>
        @include('layout.leaderboard', ['isListUnit' => true])
      </div>
    </div>
  </section>
@endsection

@push('script')
  @vite(['resources/js/list_unit.js', 'resources/js/circle_chart.js'])
@endpush