@extends('layout.app', ['title' => 'Course Detail'])

@push('style')
  @vite(['resources/css/layout/banner_main.css', 'resources/css/course.css', 'resources/css/landing.css'])
@endpush
@php
  use Carbon\Carbon;
  $contentData = json_decode($online_learning->content, true);
@endphp
@section('content')
  <section class="page-wrap col-8 col-md-9 col-xl-10 flex-grow-1 px-0">
    @include('layout.landing_banner', [
        'title' => 'Khóa học online - offline',
        'description' =>
            'Bạn đang cần những khóa học cấp tốc để chuẩn bị cho kỳ thi sắp tới? Hãy lựa chọn những giáo viên tốt nhất cho từng chuyên đề bạn đang quan tâm!',
    ])
    <section class="ap-course-detail">
      <div class="ap-course-detail-wrap">
        <div class="d-flex flex-column flex-lg-row">
          <div class="col-12 col-lg-5 ap-course-video mb-lg-0 mb-4">
            <iframe class="w-100 h-100"
              src="{{ isset($online_learning->intro_link) ? getUrlVideo($online_learning->intro_link) : 'https://www.youtube.com/embed/by1QAoRcc-U' }}"></iframe>
          </div>
          <div class="col012 col-lg-7 ap-course-infomation">
            <div class="ap-course-slogan text-uppercase">
              <span>đăng ký học ngay </span>
            </div>
            <div class="ap-course-title text-uppercase">
              <span>{{ $online_learning->name }}</span>
            </div>
            <div class="ap-course-row-wrap row mb-3">
              <div class="col-5">
                <div class="d-flex align-items-center justify-content-start gap-2">
                  <div class="user-block">
                    <img class="iconAvatar rounded-5"
                      src="{{ $online_learning->user->avatar ? Storage::url($online_learning->user->avatar) : '/img/avatardefault.jpg' }}"
                      alt="Avatar">
                  </div>
                  <div class="d-flex flex-column">
                    <span class="fw-700">Giáo viên:</span>
                    <span class="username">{{ $online_learning->user->fullname }}</span>
                  </div>
                </div>
              </div>
              <div class="ap-course-updated-at col-7">
                <span class="fw-700">Ngày khai giảng:</span>
                <br>
                <span>{{ getFormatDate($online_learning->start_day) }}</span>
              </div>
            </div>
            <div class="row align-items-center mb-2">
              <div class="d-flex flex-column col-6">
                @if (!is_null($online_learning->teach_address))
                  <div class="d-flex ap-course-info-item mb-3">
                    <div class="bd-highlight">
                      <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>
                    </div>
                    <div class="align-self-start bd-highlight ms-3">
                      <span>Địa điểm dạy: {{ $online_learning->teach_address }}</span>
                    </div>
                  </div>
                @endif
                <div class="d-flex bd-highlight ap-course-info-item mb-3">
                  <div class="bd-highlight">
                    <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_11708)">
                        <path d="M11.1346 2.17871L1.88086 6.80558L11.1346 11.4324L20.3883 6.80558L11.1346 2.17871Z"
                          stroke="#212121" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M1.88086 16.0596L11.1346 20.6864L20.3883 16.0596" stroke="#212121" stroke-width="2"
                          stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M1.88086 11.4326L11.1346 16.0595L20.3883 11.4326" stroke="#212121" stroke-width="2"
                          stroke-linecap="round" stroke-linejoin="round" />
                      </g>
                      <defs>
                        <clipPath id="clip0_305_11708">
                          <rect width="22.209" height="22.209" fill="white" transform="translate(0.0292969 0.328125)" />
                        </clipPath>
                      </defs>
                    </svg>
                  </div>
                  <div class="align-self-start bd-highlight ms-3">
                    <span>Thời gian học:
                      {{ getFormatDateRange($online_learning->start_day, $online_learning->end_day) }}</span>

                  </div>
                </div>
                <div class="d-flex bd-highlight ap-course-info-item mb-3">
                  <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>
                  <div class="align-self-start bd-highlight ms-3">
                    <span>Đã đăng ký: {{ $online_learning->total_student_joined }}</span>
                  </div>
                </div>
                <div class="d-flex bd-highlight ap-course-info-item mb-3 align-items-center">
                  <div class="bd-highlight">
                    <i class="fa-regular fa-clock"></i>
                  </div>
                  <div class="align-self-start bd-highlight ms-3">
                    <span>Lịch học: {{ getLabelByTeacherSchedules($online_learning->teaching_day) }}
                      ({{ getLabelTimeRange($online_learning->start_time, $online_learning->end_time) }})</span>
                  </div>
                </div>
              </div>
              <div class="ap-course-price text-uppercase col-6">
                @if ($online_learning->price == 0)
                  <span class="text-red-main">Free</span>
                @else
                  <span class="text-red-main">{{ number_format($online_learning->price, 0, '.', '.') }} đ</span>
                @endif
              </div>
            </div>
          </div>
        </div>
        <div class="ap-course-description">{!! $online_learning->description !!}</div>
        @if ($contentData)
          <div class="ap-course-unit-list d-flex flex-wrap">
            @foreach ($contentData as $content)
              <div class="col-6">
                <div class="ap-course-unit-item">
                  <div class="ap-course-unit-item-wrap d-flex">
                    <img src="{{ asset('img/course/open-textbook.png') }}" alt="">
                    <div class="ap-course-unit-name ms-3">
                      Chương {{ $content['chapter_number'] }}: {{ $content['name'] }}
                    </div>

                  </div>
                </div>
                <hr>
              </div>
            @endforeach
          </div>
        @endif
        <div class="d-flex justify-content-center mt-5">
          <a href="{{ route('teacher_online_payments.show', ['teacher_online_course_id' => $online_learning->id]) }}"
            class="btn-15 btn-15-fill btn-register-course text-uppercase text-decoration-none mt-5 p-3 text-center">Đăng
            ký
            học</a>
        </div>
      </div>
    </section>
  </section>
@endsection

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