@extends('layout.app', ['title' => 'Tự học online'])

@push('style')
  @vite(['resources/css/layout/banner_main.css', 'resources/css/curriculum.css'])
@endpush
@php
  use App\Enums\PromotionStatus;
  use App\Enums\UserRole;
  $auth = Auth::user();
  function getCoursePrice($course_prices, int $package_time_id, int $grade_id)
  {
      $data = collect($course_prices)
          ->where('package_time_id', $package_time_id)
          ->where('grade_id', $grade_id)
          ->first();
      return $data;
  }
  function getCoursePriceDiscount($course_prices, int $package_time_id, int $grade_id): int
  {
      $course_price = getCoursePrice($course_prices, $package_time_id, $grade_id);
      if ($course_price->discount_status == PromotionStatus::ACTIVE->value) {
          return $course_price->price - ($course_price->price * $course_price->discount) / 100;
      }
      return $course_price->price;
  }
@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>
        <img src="{{ asset('img/promotion/banner_promotion.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>Chương trình {{ $courseSelfStudy->subject->name }}</h2>
          </div>
          <div class="banner-main-text fs-17">
            <p>Những khóa học tốt nhất trang bị đầy đủ kiến thức mà bạn có thể tự học tại nhà!</p>
          </div>
        </div>
      </div>
    </section>
    <section class="curriculum-detail">
      @if ($unit_total > 0)
        <div class="curriculum-detail-wrap">
          <div class="d-flex flex-column flex-lg-row">
            <div class="col-12 col-lg-6 curriculum-video mb-4 mb-lg-0">
              <iframe class="w-100 h-100"
                src="{{ $courseSelfStudy->intro_video ? getUrlVideo($courseSelfStudy->intro_video) : 'https://www.youtube.com/embed/by1QAoRcc-U' }}"></iframe>
            </div>
            <div class="col-12 col-lg-6 curriculum-infomation">
              <div class="curriculum-slogan text-uppercase">
                <span>đăng ký học ngay</span>
              </div>
              <div class="curriculum-title text-uppercase">
                <span>{{ $courseSelfStudy->subject->name }} - {{ $courseSelfStudy->grade->name }}</span>
              </div>
              <div class="curriculum-row-wrap row">
                <div class="curriculum-updated-at col-5">
                  <span class="fw-700">Cập nhật:</span>
                  <br>
                  <span>{{ getFormatDateDb($courseSelfStudy->updated_at) }}</span>
                </div>
                <div class="d-flex flex-column col-7">
                  <div class="curriculum-info-item mb-3">
                    <svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 23 23"
                      fill="none">
                      <path
                        d="M3.73047 18.4335C3.73047 17.82 3.9742 17.2316 4.40806 16.7977C4.84191 16.3639 5.43034 16.1201 6.0439 16.1201H18.5364"
                        stroke="#212121" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                      <path
                        d="M6.0439 2.23926H18.5364V20.7467H6.0439C5.43034 20.7467 4.84191 20.503 4.40806 20.0691C3.9742 19.6353 3.73047 19.0468 3.73047 18.4333V4.55269C3.73047 3.93913 3.9742 3.3507 4.40806 2.91685C4.84191 2.48299 5.43034 2.23926 6.0439 2.23926V2.23926Z"
                        stroke="#212121" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                    <span>Số bài giảng: {{ $unit_total }}</span>
                  </div>
                  <div class="curriculum-info-item">
                    <svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 23 23"
                      fill="none">
                      <g clip-path="url(#clip0_305_11709)">
                        <path
                          d="M15.761 19.8506V17.9998C15.761 17.0181 15.3711 16.0766 14.6769 15.3825C13.9827 14.6883 13.0413 14.2983 12.0596 14.2983H4.65657C3.67487 14.2983 2.73338 14.6883 2.03922 15.3825C1.34506 16.0766 0.955078 17.0181 0.955078 17.9998V19.8506"
                          stroke="#212121" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        <path
                          d="M8.35774 10.5968C10.402 10.5968 12.0592 8.93962 12.0592 6.89534C12.0592 4.85106 10.402 3.19385 8.35774 3.19385C6.31346 3.19385 4.65625 4.85106 4.65625 6.89534C4.65625 8.93962 6.31346 10.5968 8.35774 10.5968Z"
                          stroke="#212121" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        <path
                          d="M21.3132 19.8509V18.0001C21.3126 17.18 21.0396 16.3833 20.5372 15.7351C20.0347 15.0869 19.3312 14.624 18.5371 14.4189"
                          stroke="#212121" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        <path
                          d="M14.8359 3.31445C15.6321 3.51831 16.3379 3.98137 16.8418 4.63062C17.3458 5.27987 17.6193 6.07838 17.6193 6.90027C17.6193 7.72216 17.3458 8.52068 16.8418 9.16993C16.3379 9.81918 15.6321 10.2822 14.8359 10.4861"
                          stroke="#212121" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                      </g>
                      <defs>
                        <clipPath id="clip0_305_11709">
                          <rect width="22.209" height="22.209" fill="white" transform="translate(0.0292969 0.417969)" />
                        </clipPath>
                      </defs>
                    </svg>
                    <span>Đã đăng ký: {{ collect($courseSelfStudy->course_purchased)->count() }}</span>
                  </div>
                </div>
              </div>
              <p class="curriculum-description">{{ $courseSelfStudy->description }}</p>
            </div>
          </div>
          <div class="curriculum-courses d-flex justify-content-center flex-wrap">
            @foreach ($package_times as $package_time)
              @if (!is_null(getCoursePrice($package_time->course_prices, $package_time->id, $grade_id)))
                <div class="curriculum-course-item d-flex flex-column align-items-center justify-content-center m-4 p-4">
                  <p class="text-dark fs-25 fw-bold font-family-Montserrat text-uppercase m-0 px-3 py-2 text-center">
                    Khóa học
                    <br>
                    {{ $package_time->time }} tháng
                  </p>
                  <div class="py-4">
                    @if (
                        $auth->role_id == UserRole::USER->value &&
                            $newStudentPromotion &&
                            $newStudentPromotion->time == $package_time->time)
                      <div class="btn-4 btn-4-fill mb-2 gap-1 p-1">
                        <div
                          class="d-flex align-items-center justify-content-center border-1 discount gap-1 border-white p-2">
                          <span class="d-flex">
                            <svg width="33" height="33" viewBox="0 0 33 33" fill="none"
                              xmlns="http://www.w3.org/2000/svg">
                              <path
                                d="M25.6427 16.5V27.9286H7.357V16.5M16.4999 27.9286V10.7857M16.4999 10.7857H11.357C10.5992 10.7857 9.87252 10.4847 9.3367 9.94886C8.80088 9.41304 8.49986 8.68632 8.49986 7.92855C8.49986 7.17079 8.80088 6.44407 9.3367 5.90825C9.87252 5.37243 10.5992 5.07141 11.357 5.07141C15.357 5.07141 16.4999 10.7857 16.4999 10.7857ZM16.4999 10.7857H21.6427C22.4005 10.7857 23.1272 10.4847 23.663 9.94886C24.1988 9.41304 24.4999 8.68632 24.4999 7.92855C24.4999 7.17079 24.1988 6.44407 23.663 5.90825C23.1272 5.37243 22.4005 5.07141 21.6427 5.07141C17.6427 5.07141 16.4999 10.7857 16.4999 10.7857ZM5.07129 10.7857H27.9284V16.5H5.07129V10.7857Z"
                                stroke="white" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                          </span>
                          <span class="fs-20 fw-700 d-flex">Free</span>
                        </div>
                      </div>
                    @else
                      @if (getCoursePrice($package_time->course_prices, $package_time->id, $grade_id)->discount_status ==
                              PromotionStatus::ACTIVE->value)
                        <div class="btn-4 btn-4-fill mb-2 gap-1 p-1">

                          <div
                            class="d-flex align-items-center justify-content-center border-1 discount gap-1 border-white p-2">
                            <span class="d-flex">
                              <svg width="33" height="33" viewBox="0 0 33 33" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                  d="M25.6427 16.5V27.9286H7.357V16.5M16.4999 27.9286V10.7857M16.4999 10.7857H11.357C10.5992 10.7857 9.87252 10.4847 9.3367 9.94886C8.80088 9.41304 8.49986 8.68632 8.49986 7.92855C8.49986 7.17079 8.80088 6.44407 9.3367 5.90825C9.87252 5.37243 10.5992 5.07141 11.357 5.07141C15.357 5.07141 16.4999 10.7857 16.4999 10.7857ZM16.4999 10.7857H21.6427C22.4005 10.7857 23.1272 10.4847 23.663 9.94886C24.1988 9.41304 24.4999 8.68632 24.4999 7.92855C24.4999 7.17079 24.1988 6.44407 23.663 5.90825C23.1272 5.37243 22.4005 5.07141 21.6427 5.07141C17.6427 5.07141 16.4999 10.7857 16.4999 10.7857ZM5.07129 10.7857H27.9284V16.5H5.07129V10.7857Z"
                                  stroke="white" stroke-linecap="round" stroke-linejoin="round" />
                              </svg>
                            </span>
                            <span class="fs-20 fw-700 d-flex">Giảm
                              {{ getCoursePrice($package_time->course_prices, $package_time->id, $grade_id)->discount }}
                              %</span>
                          </div>
                        </div>
                      @endif
                      @if (getCoursePrice($package_time->course_prices, $package_time->id, $grade_id)->month_gift_status ==
                              PromotionStatus::ACTIVE->value)
                        <div class="btn-4 btn-4-fill gap-1 p-1">

                          <div
                            class="d-flex align-items-center justify-content-center border-1 discount gap-1 border-white p-2">
                            <span class="d-flex">
                              <svg width="33" height="33" viewBox="0 0 33 33" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                  d="M25.6427 16.5V27.9286H7.357V16.5M16.4999 27.9286V10.7857M16.4999 10.7857H11.357C10.5992 10.7857 9.87252 10.4847 9.3367 9.94886C8.80088 9.41304 8.49986 8.68632 8.49986 7.92855C8.49986 7.17079 8.80088 6.44407 9.3367 5.90825C9.87252 5.37243 10.5992 5.07141 11.357 5.07141C15.357 5.07141 16.4999 10.7857 16.4999 10.7857ZM16.4999 10.7857H21.6427C22.4005 10.7857 23.1272 10.4847 23.663 9.94886C24.1988 9.41304 24.4999 8.68632 24.4999 7.92855C24.4999 7.17079 24.1988 6.44407 23.663 5.90825C23.1272 5.37243 22.4005 5.07141 21.6427 5.07141C17.6427 5.07141 16.4999 10.7857 16.4999 10.7857ZM5.07129 10.7857H27.9284V16.5H5.07129V10.7857Z"
                                  stroke="white" stroke-linecap="round" stroke-linejoin="round" />
                              </svg>
                            </span>
                            <span class="fs-20 fw-700 d-flex">+
                              {{ getCoursePrice($package_time->course_prices, $package_time->id, $grade_id)->month_gift }}
                              tháng</span>
                          </div>
                        </div>
                      @endif

                      <div class="d-flex justify-content-center align-items-center my-3 flex-row gap-2">
                        @if (getCoursePrice($package_time->course_prices, $package_time->id, $grade_id)->discount_status ==
                                PromotionStatus::ACTIVE->value)
                          <span class="text-neutral-07 fs-13 text-decoration-line-through">
                            {{ number_format(getCoursePrice($package_time->course_prices, $package_time->id, $grade_id)->price, 0, '.', '.') }}
                            Vnd
                          </span>
                          <span class="text-red-main fs-16 fw-600">
                            {{ number_format(getCoursePriceDiscount($package_time->course_prices, $package_time->id, $grade_id), 0, '.', '.') }}
                            Vnd
                          </span>
                        @else
                          <span class="text-red-main fs-16 fw-600">
                            {{ number_format(getCoursePrice($package_time->course_prices, $package_time->id, $grade_id)->price, 0, '.', '.') }}
                            Vnd
                          </span>
                        @endif
                      </div>
                    @endif
                  </div>
                  <div class="w-100">
                    <a href="{{ route('payment_course_self_studies.show', ['course_id' => $courseSelfStudy->id, 'course_price_id' => getCoursePrice($package_time->course_prices, $package_time->id, $grade_id)->id]) }}"
                      class="fs-14 fw-semibold text-uppercase btnRegister py-2">Đăng
                      ký học</a>
                  </div>
                </div>
              @endif
            @endforeach
          </div>
          <div class="text-center fw-500 fs-4 pt-3">Chi tiết nội dung khóa học</div>
          @if ($courseSelfStudy->chapters)
            <div class="curriculum-unit-list">
              <div class="column" id="column1"></div>
              <div class="column" id="column2"></div>
              <div class="column" id="column3"></div>
            </div>

            @foreach ($courseSelfStudy->chapters->sortBy('chapter_number') as $chapter)
              <div class="unit-list" id="unitList{{ $loop->index }}">
                <div class="curriculum-unit-item">
                  <div class="curriculum-unit-item-wrap d-flex align-items-start gap-2" data-bs-toggle="collapse"
                    href="#collapseUnit{{ $loop->index }}" role="button" aria-expanded="false"
                    aria-controls="collapseUnit{{ $loop->index }}">
                    <img src="{{ asset('/img/course/open-textbook.png') }}" alt="">
                    <div class="unitTitle">
                      <span class="text-chapter-number fw-500 text-primary-color"> Chương
                        {{ $chapter->chapter_number }}: </span>
                      <span class="text-chapter-content text-capitalize text-primary-color pb-2">
                        {{ $chapter->name }}
                      </span>
                    </div>
                  </div>
                </div>
                <div class="collapse ps-4" id="collapseUnit{{ $loop->index }}">
                  @if ($chapter->units)
                    @foreach ($chapter->units->sortBy('unit_number') as $unit)
                      <div class="sub-item d-flex align-items-start gap-2">
                        <img src="{{ asset('/img/course/brush-and-pencil.png') }}" alt="">
                        <div>
                          <span class="fw-700 text-neutral-04"> Bài {{ $unit->unit_number }}: </span>
                          <span class="text-neutral-04">
                            {{ $unit->name }}
                          </span>
                        </div>
                      </div>
                    @endforeach
                  @endif
                </div>
                <hr>
              </div>
            @endforeach
          @endif
        </div>
      @else
        <div class="d-flex justify-content-center mt-3">
          <p>Không tìm thấy kết quả nào</p>
        </div>
      @endif
    </section>
  </section>
@endsection

@push('script')
  @vite('resources/js/curriculum.js')
@endpush