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

@push('style')
  @vite(['resources/css/layout/banner_main.css', 'resources/css/course.css'])
@endpush

@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>AP Physics 2</h2>
          </div>
          <div class="banner-main-text fs-17">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper
              mattis,
              pulvinar dapibus leo.</p>
          </div>
        </div>
      </div>
    </section>
    <section class="ap-course-detail">
      <div class="ap-course-detail-wrap">
        <div class="d-flex">
          <div class="col-6 ap-course-video">
            <iframe class="w-100 h-100" src="https://www.youtube.com/embed/by1QAoRcc-U"></iframe>
          </div>
          <div class="col-6 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>Ap physics 2 </span>
            </div>
            <div class="ap-course-row-wrap row">
              <div class="ap-course-updated-at col-6">
                <span class="fw-700">Cập nhật:</span>
                <br>
                <span>25/09/2023</span>
              </div>
              <div class="d-flex flex-column col-6">
                <div class="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">
                    <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: 19</span>
                </div>
                <div class="ap-course-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ý: 350</span>
                </div>
              </div>
            </div>
            <p class="ap-course-description">Video bài giảng áp dụng phương thức hiện đại, trực quan, ngắn
              ngọn,
              cực kỳ
              dễ
              hiểu. Nội dung luyện tập các bài Test phong phú, bám sát nội dung.</p>
          </div>
        </div>


        <div class="ap-courses d-flex justify-content-center flex-nowrap">
          <div class="ap-course-item d-flex flex-column align-items-center justify-content-center p-4 m-4">
            <p class="text-center text-dark fs-25 fw-bold font-family-Montserrat  m-0 px-3 py-2">
              Khóa học
              <br>
              3 tháng
            </p>
            <div class="py-4">
              <div class=" btn-4 btn-4-fill  gap-1 p-1 ">
                <div class="d-flex align-items-center justify-content-center border-1 border-white p-2 gap-1 discount">
                  <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 30%</span>
                </div>

              </div>

              <div class="d-flex justify-content-center align-items-center my-3 flex-row gap-2">
                <span class="text-neutral-07 fs-13 text-decoration-line-through">
                  200.000 Vnd
                </span>
                <span class="text-red-main fs-16 fw-600">
                  140.000 Vnd
                </span>
              </div>
            </div>
            <div class="btn-register-course d-flex w-100">
              <div class="btn-10 w-100 d-flex justify-content-center align-items-center px-4 py-2 ">
                <span class="fs-14 fw-semibold text-uppercase">Đăng ký học</span>
              </div>
            </div>
          </div>
          <div class="ap-course-item d-flex flex-column align-items-center justify-content-center p-4 m-4">
            <p class="text-center text-dark fs-25 fw-bold font-family-Montserrat  m-0 px-3 py-2">
              Khóa học
              <br>
              6 tháng
            </p>
            <div class="py-4">
              <div class=" btn-4 btn-4-fill p-1 ">
                <div class="d-flex align-items-center justify-content-center border-white gap-1 p-2 discount">
                  <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 30%</span>
                </div>

              </div>

              <div class="d-flex justify-content-center align-items-center my-3 flex-row gap-2">
                <span class="text-neutral-07 fs-13 text-decoration-line-through">
                  200.000 Vnd
                </span>
                <span class="text-red-main fs-16 fw-600">
                  140.000 Vnd
                </span>
              </div>
            </div>
            <div class="btn-register-course d-flex w-100">
              <div class="btn-10 w-100 d-flex justify-content-center align-items-center px-4 py-2 ">
                <span class="fs-14 fw-semibold text-uppercase">Đăng ký học</span>
              </div>
            </div>
          </div>
          <div class="ap-course-item d-flex flex-column align-items-center justify-content-center p-4 m-4">
            <p class="text-center text-dark fs-25 fw-bold font-family-Montserrat  m-0 px-3 py-2">
              Khóa học
              <br>
              12 tháng
            </p>
            <div class="py-4">
              <div class=" btn-4 btn-4-fill  gap-1 p-1 ">
                <div class="d-flex align-items-center justify-content-center border-1 border-white p-2 gap-1 discount">
                  <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">+ 2 tháng</span>
                </div>

              </div>

              <div class="d-flex justify-content-center align-items-center my-3 flex-row gap-2">
                {{-- <span class="text-neutral-07 fs-13 text-decoration-line-through">
                                    200.000 Vnd
                                </span> --}}
                <span class="text-red-main fs-16 fw-600 ">
                  140.000 Vnd
                </span>
              </div>
            </div>
            <div class="btn-register-course d-flex w-100">
              <div class="btn-10 w-100 d-flex justify-content-center align-items-center px-4 py-2 ">
                <span class="fs-14 fw-semibold text-uppercase">Đăng ký học</span>
              </div>
            </div>
          </div>

        </div>
        <div class="ap-course-unit-list row">
          <div class="col-6 px-4">
            <div class="ap-course-unit-item">
              <div class="ap-course-unit-item-wrap " data-bs-toggle="collapse" href="#collapse1" role="button"
                aria-expanded="false" aria-controls="collapse1">
                <img src="{{ asset('img/course/open-textbook.png') }}" alt="">
                <span class="ps-2 fw-700"> Unit 1: </span>
                <span class="uppercase text-uppercase pb-2">
                  Charge and Coulomb’s Law Charge and Coulomb’s Law Charge and Coulomb’s Law
                </span>
              </div>
            </div>
            <div class="collapse ps-3" id="collapse1">
              <div class="sub-item ">
                <img src="{{ asset('img/course/brush-and-pencil.png') }}" alt="">
                <span class="fw-700 ps-2"> Topic 1: </span>
                <span class="text-secondary ">
                  Charge and Coulomb’s Law
                </span>
              </div>
              <div class="sub-item ">
                <img src="{{ asset('img/course/brush-and-pencil.png') }}" alt="">
                <span class="fw-700 ps-2"> Topic 1: </span>
                <span class="text-secondary ">
                  Charge and Coulomb’s Law Charge and Coulomb’s Law Charge and Coulomb’s Law
                </span>
              </div>
              <div class="sub-item ">
                <img src="{{ asset('img/course/brush-and-pencil.png') }}" alt="">
                <span class="fw-700 ps-2"> Topic 1: </span>
                <span class="text-secondary ">
                  Charge and Coulomb’s Law
                </span>
              </div>
            </div>
            <hr>
          </div>
          <div class="col-6 px-4">
            <div class="ap-course-unit-item">
              <div class="ap-course-unit-item-wrap " data-bs-toggle="collapse" href="#collapse2" role="button"
                aria-expanded="false" aria-controls="collapse2">
                <img src="{{ asset('img/course/open-textbook.png') }}" alt="">
                <span class="ps-2 fw-700"> Unit 2: </span>
                <span class="uppercase text-uppercase pb-2">
                  Charge and Coulomb’s Law Charge and Coulomb’s Law Charge and Coulomb’s Law
                </span>
              </div>
            </div>
            <div class="collapse ps-3" id="collapse2">
              <div class="sub-item ">
                <img src="{{ asset('img/course/brush-and-pencil.png') }}" alt="">
                <span class="fw-700 ps-2"> Topic 1: </span>
                <span class="text-secondary ">
                  Charge and Coulomb’s Law
                </span>
              </div>
              <div class="sub-item ">
                <img src="{{ asset('img/course/brush-and-pencil.png') }}" alt="">
                <span class="fw-700 ps-2"> Topic 1: </span>
                <span class="text-secondary ">
                  Charge and Coulomb’s Law Charge and Coulomb’s Law Charge and Coulomb’s Law
                </span>
              </div>
              <div class="sub-item ">
                <img src="{{ asset('img/course/brush-and-pencil.png') }}" alt="">
                <span class="fw-700 ps-2"> Topic 1: </span>
                <span class="text-secondary ">
                  Charge and Coulomb’s Law
                </span>
              </div>
            </div>
            <hr>
          </div>
        </div>
        {{-- <div class="d-flex justify-content-center">
                    <button class="btn-15 btn-15-fill btn-register-course text-uppercase text-center">Đăng ký học</button>
                </div> --}}
      </div>
    </section>
  </section>
@endsection

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