@extends('layout.app', ['title' => 'Landing page'])

@push('style')
  @vite('resources/css/animate.css')
  @vite('resources/css/landing.css')
@endpush
@php
  use App\Enums\UserRole;
  use App\Enums\SubjectExerciseEnum;
  $roleTutorTeacher =
      Auth::check() && in_array(Auth::user()->role_id, [UserRole::TUTOR->value, UserRole::TEACHER->value]);
  $roleUser = Auth::check() && in_array(Auth::user()->role_id, [UserRole::USER->value]);

  function renderImageSection($roleTutorTeacher, $image, $defaultImage, $link)
  {
      $imgSrc = isset($image) && !is_null($image) ? Storage::url($image) : asset($defaultImage);
      if ($roleTutorTeacher) {
          return "<img src='{$imgSrc}' alt='/' class='w-100'>";
      } else {
          return "<a href='{$link}'><img src='{$imgSrc}' alt='/' class='w-100'></a>";
      }
  }
@endphp
@section('content')
  @include('modals.loading')

  <section class="landing-main col-8 col-md-9 col-xl-10 flex-grow-1 px-0">
    @if (!$roleTutorTeacher)
      <!-- Slide main start-->
      <section class="slide-main-area container-fluid px-0">
        <div class="slide-main-container position-relative">
          <div class="slide-main-group d-flex w-100">
            @if (isset($bannersInfo))
              @foreach ($bannersInfo as $banner)
                @if (isset($typeHeroBannerInfo) && $typeHeroBannerInfo == 1)
                  @if ($banner->type == \App\Enums\BannerType::Banner_4->value)
                    <div class="slide-item position-relative">
                      <div class="slide-bg">
                        <img src="{{ Storage::url($banner->image) }}" alt="/" class="w-100">
                      </div>

                      <div class="slide-main-text position-absolute top-50 translate-middle-y col-10 col-lg-5">
                        <div class="slide-content position-relative z-index-1 text-secodary-color">
                          <h2 class="slide-item-text-content font-sigmar-one" data-animation="fadeInUp" data-delay=".2s">
                            {{ $banner->name }}
                          </h2>
                          <div class="d-flex flex-column" data-animation="fadeInUp" data-delay=".5s">
                            @foreach ($banner->description_array as $description)
                              <span class="fs-13 text-secodary-color mb-2">
                                <span class="me-2">
                                  <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <g clip-path="url(#clip0_990_24116)">
                                      <path
                                        d="M17.8125 10.9373C17.1875 14.0623 14.8313 17.0048 11.525 17.6623C9.91252 17.9834 8.2398 17.7876 6.74504 17.1028C5.25028 16.418 4.00969 15.279 3.1999 13.848C2.39012 12.4171 2.05243 10.7672 2.23492 9.13316C2.41741 7.49914 3.11078 5.96434 4.21629 4.74731C6.48379 2.24981 10.3125 1.56231 13.4375 2.81231"
                                        stroke="#A2BF00" stroke-width="3" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                      <path d="M7.1875 9.6875L10.3125 12.8125L17.8125 4.6875" stroke="#A2BF00"
                                        stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
                                    </g>
                                    <defs>
                                      <clipPath id="clip0_990_24116">
                                        <rect width="20" height="20" fill="white" />
                                      </clipPath>
                                    </defs>
                                  </svg>
                                </span>
                                {{ $description }}
                              </span>
                            @endforeach
                          </div>

                          <div class="slide-btn d-flex my-4" data-animation="fadeInUp" data-delay=".8s">
                            @if (!Auth::check() || url($banner->link) != route('auth.signup'))
                              <a href="{{ $banner->link }}"
                                class="btn-pill btn-pill-fill btn-register-course text-decoration-none fs-15 p-md-3 p-lg-4 p-2">
                                <span class="text text-white">
                                  {{ $banner->button_name }}
                                </span>
                                <span>
                                  <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21"
                                    viewBox="0 0 21 21" fill="none" class="mb-1">
                                    <path d="M13.0759 15.0425L17.2495 10.8689L13.0759 6.69531" stroke="white"
                                      stroke-width="1.66944" stroke-linecap="round" stroke-linejoin="round" />
                                    <path
                                      d="M3.89392 15.8755V14.2061C3.89392 13.3205 4.2457 12.4713 4.87186 11.8451C5.49802 11.219 6.34728 10.8672 7.23281 10.8672H17.2495"
                                      stroke="white" stroke-width="1.66944" stroke-linecap="round"
                                      stroke-linejoin="round" />
                                  </svg>
                                </span>
                              </a>
                            @endif
                          </div>
                        </div>
                      </div>
                    </div>
                  @endif
                @else
                  @if ($banner->type == \App\Enums\BannerType::Video_banner->value)
                    <div class="slide-item position-relative">
                      <div class="slide-bg">
                        {!! $banner->video_link !!}
                      </div>
                    </div>
                  @endif
                @endif
              @endforeach
            @endif
          </div>

          <div class="slide-next-btn position-absolute top-50 translate-middle-y">
            <button class="slick-arrow-custom" type="button">
              <img src="{{ asset('img/landing/next_icon_2.png') }}" alt="/">
            </button>
          </div>

          <div class="d-flex justify-content-center position-absolute start-50 translate-middle bottom-0 mb-3">
            <div class="btn-slide-slick-container">
            </div>
          </div>
        </div>
      </section>
      <!-- Slide main end -->
    @endif

    @if (!$roleTutorTeacher)
      <!-- Testimonial start -->
      <section class="testimonial container-fluid">
        <div class="testimonial-wrap row">
          <div class="col-6 testimonial-suggest">
            <div class="testimonial-text-label mt-3">
              <span class="content-label text-primary-color">
                góc học tập
              </span>
            </div>
            <div class="testimonial-heading pb-4">
              <div class="content-header fs-32 d-flex flex-column">
                <span class="font-sigmar-one">
                  Giải đáp câu hỏi
                </span>
                <span class="font-sigmar-one">
                  Lý thuyết - hướng dẫn
                </span>
                <span class="font-sigmar-one">
                  giải bài tập <span class="text-new-green font-sigmar-one">real time</span>
                </span>
              </div>
            </div>
            <div class="testimonial-content mt-5">
              <div class="fs-16 text-paragraph d-flex flex-column">
                <span class="text-new-blue text-uppercase fw-700 mb-2">
                  Câu trả lời giải đáp câu hỏi lý thuyết, bài tập:
                </span>
                <span class="mb-2">
                  Bạn có câu hỏi lý thuyết hoặc bài tập khó giải?
                </span>
                <span class="mb-2">
                  Hãy nhập ở phần bên, chúng tôi sẽ giúp giải đáp cho bạn tất cả các câu hỏi.
                </span>
                <span class="mb-2">
                  Bạn cũng có thể gửi câu hỏi bằng hình ảnh cho chúng tôi theo các định dạng:
                  <span class="text-red-main">.jpeg; .png; .jpg</span>
                </span>
              </div>
            </div>
          </div>
          <div class="col-6 testimonial-form">
            <div class="testimonial-form-container">
              <div class="testimonial-question">
                <form action="{{ route('answer_guides.storeTheory') }}" method="post" id="theoryQuestionForm">
                  @csrf()
                  <label class="d-block label-form-question content-label text-secondary-color ms-1">câu
                    hỏi lý thuyết</label>
                  <textarea class="d-block input-form-question w-100 ps-3" type="text" name="theoryQuestion" id="theoryQuestion"
                    placeholder="Nhập nội dung câu hỏi của bạn ....."></textarea>
                  @error('theoryQuestion')
                    <span class="text-danger">{{ $message }}</span>
                  @enderror
                  <span class="error-message-theory text-danger invisible"></span>
                  <div class="d-flex justify-content-end btn-wrap">
                    <button
                      class="custom-btn btn-custom-fill btn-send-question d-flex align-items-center {{ $roleUser ? 'checkRoleUser' : '' }}"
                      type="submit">
                      <span class="fs-6 fw-bold me-2">gửi</span>
                      <span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                          fill="none">
                          <path d="M22 2L11 13" stroke="white" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                          <path d="M22 2L15 22L11 13L2 9L22 2Z" stroke="white" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                        </svg>
                      </span>
                    </button>
                  </div>
                </form>
              </div>
              {{-- <div class="testimonial-slove-question">
                <form action="{{ route('answer_guides.storeExerciseGuide') }}" method="POST" id="exerciseForm"
                  enctype="multipart/form-data" class="exerciseForm">
                  @csrf()
                  <label class="d-block label-form-slove-question content-label text-secondary-color ms-1" for="question_content">
                    hướng dẫn giải bài tập
                  </label>
                  <textarea class="d-block input-form-slove-question w-100 ps-3" type="text" name="question_content" id="question_content"
                    placeholder="Nhập nội dung bài tập của bạn ....."></textarea>
                  @error('question_content')
                    <span class="text-danger">{{ $message }}</span>
                  @enderror
                  <span class="error-message-exercise text-danger invisible"></span>
                  <div class="d-flex justify-content-between btn-wrap">
                    <div class="custom-file-input">
                      <label for="upload-file-input">Tải file</label>
                      <input type="file" name="file" class="upfile-btn" id="upload-file-input">
                      <br>
                      <span class="fs-12 text-neutral-04">file: png, jpg</span>
                      @error('file')
                        <span class="text-danger">{{ $message }}</span>
                      @enderror
                    </div>
                    <button class="custom-btn btn-custom-fill btn-send-slove-question" type="submit" id="submitBtn">
                      <span class="fs-6 fw-bold me-2">
                        gửi
                      </span>
                      <span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                          fill="none">
                          <path d="M22 2L11 13" stroke="white" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                          <path d="M22 2L15 22L11 13L2 9L22 2Z" stroke="white" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                        </svg>
                      </span>
                    </button>
                  </div>
                </form>
              </div> --}}
              <div class="testimonial-slove-question">
                <form action="{{ route('answer_guides.storeExerciseGuide') }}" method="POST" id="exerciseForm"
                  enctype="multipart/form-data" class="exerciseForm">
                  @csrf()
                  <label class="d-block label-form-slove-question content-label text-secondary-color ms-1"
                    for="question_content">
                    hướng dẫn giải bài tập
                  </label>
                  <textarea class="d-block input-form-slove-question w-100 ps-3" name="question_content" id="question_content"
                    placeholder="Nhập câu hỏi bài tập của bạn hoặc tải file có định dạng: .jpeg; .png; .jpg"></textarea>
                  @error('question_content')
                    <span class="text-danger">{{ $message }}</span>
                  @enderror
                  <span class="error-message-exercise text-danger invisible"></span>
                  <div class="d-flex btn-wrap justify-content-between flex-column flex-xl-row gap-3">
                    <div class="solve-practice ms-1">
                      <div class="exerciseSubjectWrap p-2">
                        <select name="subject_id" id="subjectEx"
                          class="text-capitalize exerciseSubject w-100 border-0">
                          <option value="" selected>Chọn môn</option>
                          @foreach (SubjectExerciseEnum::toSelectArray() as $statusValue => $statusLabel)
                            <option value="{{ $statusValue }}" class="text-capitalize"
                              {{ old('subject_id') == $statusValue ? 'selected' : '' }}> {{ $statusLabel }}</option>
                          @endforeach
                        </select>
                      </div>
                      @error('subject_id')
                        <span class="text-danger">{{ $message }}</span>
                      @enderror
                    </div>
                    <div class="d-flex justify-content-end flex-wrap gap-3">
                      <div class="d-flex">
                        <div class="custom-btn btn-upload-file text-red-main d-flex align-items-center">
                          <span class="fs-6 fw-bold me-2" style="white-space: nowrap;">
                            tải file
                          </span>
                          <span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                              fill="none">
                              <path
                                d="M4.00012 22H18.0001C18.5306 22 19.0393 21.7893 19.4143 21.4142C19.7894 21.0391 20.0001 20.5304 20.0001 20V7.5L14.5001 2H6.00012C5.46969 2 4.96098 2.21071 4.58591 2.58579C4.21084 2.96086 4.00012 3.46957 4.00012 4V8"
                                stroke="#CC3A3D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                              <path d="M14.0001 2V8H20.0001" stroke="#CC3A3D" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" />
                              <path d="M2.00012 15H12.0001" stroke="#CC3A3D" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" />
                              <path d="M9.00012 18L12.0001 15L9.00012 12" stroke="#CC3A3D" stroke-width="2"
                                stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                          </span>
                          <input type="file" name="file" class="upfile-btn" id="upload-file-input"
                            style="display: none;">
                        </div>
                        {{-- <div id="file-name" class="mt-2 mx-1 one-line"></div> --}}
                      </div>
                      <button
                        class="d-flex custom-btn btn-custom-fill btn-send-slove-question {{ $roleUser ? 'checkRoleUser' : '' }}"
                        type="button" id="submitBtn">
                        <span class="fs-6 fw-bold me-2">gửi</span>
                        <span>
                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            fill="none">
                            <path d="M22 2L11 13" stroke="white" stroke-width="2" stroke-linecap="round"
                              stroke-linejoin="round" />
                            <path d="M22 2L15 22L11 13L2 9L22 2Z" stroke="white" stroke-width="2"
                              stroke-linecap="round" stroke-linejoin="round" />
                          </svg>
                        </span>
                      </button>
                      @error('file')
                        <span class="text-danger">{{ $message }}</span>
                      @enderror
                    </div>
                  </div>
                  <div id="file-name" class="one-line mx-1 mt-3"></div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- Testimonial end -->
    @endif

    <!--  About us start  -->
    <section class="about-us container">
      <div class="row">
        <div class="col-xl-6 px-3">
          <div class="row h-100">
            {{-- <div class="col-5 about-img">
              <div class="d-flex flex-column align-items-center justify-content-center h-100">
                <div class="d-flex justify-content-center img-contain">
                  <a href="{{ route('online_learning.index') }}">
                    <img
                      src="{{ isset($imageSection) && !is_null($imageSection->landing_page_image_1) ? Storage::url($imageSection->landing_page_image_1) : asset('img/landing/about_img_1.png') }}"
                      alt="/" class="w-100">
                  </a>
                </div>
                <div class="d-flex justify-content-center img-contain mt-4">
                  <a href="{{ route('online_learning.index') }}">
                    <img
                      src="{{ isset($imageSection) && !is_null($imageSection->landing_page_image_2) ? Storage::url($imageSection->landing_page_image_2) : asset('img/landing/about_img_2.png') }}"
                      alt="/" class="w-100">
                  </a>
                </div>
              </div>
            </div>

            <div class="col-7 d-flex align-items-center">
              <a href="{{ route('online_learning.index') }}">
                <img
                  src="{{ isset($imageSection) && !is_null($imageSection->landing_page_image_3) ? Storage::url($imageSection->landing_page_image_3) : asset('img/landing/about_img.png') }}"
                  alt="/" class="w-100">
              </a>
            </div> --}}

            <div class="col-5 about-img">
              <div class="d-flex flex-column align-items-center justify-content-center h-100">
                <div class="d-flex justify-content-center img-contain">
                  {!! renderImageSection(
                      $roleTutorTeacher,
                      $imageSection->landing_page_image_1 ?? null,
                      'img/landing/about_img_1.png',
                      route('online_learning.index'),
                  ) !!}
                </div>
                <div class="d-flex justify-content-center img-contain mt-4">
                  {!! renderImageSection(
                      $roleTutorTeacher,
                      $imageSection->landing_page_image_2 ?? null,
                      'img/landing/about_img_2.png',
                      route('online_learning.index'),
                  ) !!}
                </div>
              </div>
            </div>

            <div class="col-7 d-flex align-items-center">
              {!! renderImageSection(
                  $roleTutorTeacher,
                  $imageSection->landing_page_image_3 ?? null,
                  'img/landing/about_img.png',
                  route('online_learning.index'),
              ) !!}
            </div>
          </div>
        </div>

        <div class="col-xl-6 position-relative about-text-group">
          <div class="about-text-label">
            {{-- <span class="text-primary-color content-label">
              Về chúng tôi
            </span> --}}
          </div>

          <div class="about-text-heading">
            @if ($roleTutorTeacher)
              <div class="content-header font-sigmar-one fs-32 text-decoration-none">
                Các lớp
                <span class="text-red-main font-sigmar-one"> luyện thi chuyên đề </span>
                nổi bật của
                <span class="text-new-green font-sigmar-one">sieuhoc.com</span>
              </div>
            @else
              <a class="content-header font-sigmar-one fs-32 text-decoration-none"
                href="{{ route('online_learning.index') }}">
                Các lớp
                <span class="text-red-main font-sigmar-one"> luyện thi chuyên đề </span>
                nổi bật của
                <span class="text-new-green font-sigmar-one">sieuhoc.com</span>
              </a>
            @endif
          </div>

          <div class="text-paragraph fs-16 about-text-info mb-4">
            <p class="mb-2">
              Trung tâm giáo dục Trí Tuệ Siêu Việt: Nâng tầm kiến thức của bạn với các lớp luyện thi chuyên đề chất lượng
              cao. Đội ngũ gia sư hàng đầu, giàu kinh nghiệm sẽ đồng hành cùng bạn chinh phục mọi kỳ thi.
            </p>
            <p class="mb-2">
              Gia sư chuyên nghiệp, kiến thức sâu rộng: Khám phá thế giới tri thức cùng các lớp luyện thi chuyên đề tại
              trung tâm chúng tôi. Đảm bảo bạn sẽ đạt được kết quả tốt nhất.
            </p>
            <p class="mb-0">
              Đầu tư vào tương lai với lớp luyện thi chuyên đề: Chinh phục mọi kỳ thi quan trọng với sự hỗ trợ của các
              chuyên gia giáo dục hàng đầu. Đừng bỏ lỡ cơ hội này!
            </p>
          </div>

          <div class="about-numbers d-flex justify-content-around">
            <div class="d-flex flex-column justify-content-center align-items-center">
              <span class="text-red-main mb-2">5Y</span>
              <span class="fs-15 text-uppercase">Experience</span>
            </div>
            <div class="d-flex flex-column justify-content-center align-items-center">
              <span class="text-red-main mb-2">25+</span>
              <span class="fs-15 text-uppercase">Best team</span>
            </div>
            <div class="d-flex flex-column justify-content-center align-items-center">
              <span class="text-red-main mb-2">500+</span>
              <span class="fs-15 text-uppercase">Total client</span>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- About us end -->

    <!-- Courses start -->
    <section class="courses">
      <div class="courses-header-group mb-5 px-4">
        {{-- <div>
          <p class="position-relative content-label text-primary-color pt-3">
            Các khóa học hàng đầu
          </p>
        </div> --}}
        <p class="content-header courses-header fs-35 font-sigmar-one">
          Các
          <span class="font-sigmar-one text-new-blue">
            chương trình
            <br>
            du học sinh
          </span>
          nổi bật
        </p>
      </div>
      <div class="courses-content">
        <div class="d-flex gap-3">
          <span>
            <i class="fa-solid fa-circle-check"></i>
          </span>
          <p class="text-paragraph">Chương trình học chuẩn quốc tế, giảng dạy 100% bằng tiếng Anh: Môi trường học tập
            chuyên nghiệp, giúp bạn làm quen với phương pháp giảng dạy và đánh giá của các trường đại học nước ngoài.
          </p>
        </div>
        <div class="d-flex gap-3">
          <span>
            <i class="fa-solid fa-circle-check"></i>
          </span>
          <p class="text-paragraph">Đội ngũ giáo viên giàu kinh nghiệm, đến từ các trường đại học hàng đầu: Được hướng
            dẫn bởi những chuyên gia giáo dục hàng đầu, bạn sẽ nhanh chóng nâng cao trình độ tiếng Anh và các kỹ năng
            cần thiết để du học.</p>
        </div>
        <div class="d-flex gap-3">
          <span>
            <i class="fa-solid fa-circle-check"></i>
          </span>
          <p class="text-paragraph">Hàng ngàn học sinh đã thành công du học nhờ khóa học của chúng tôi: Chúng tôi tự
            hào khi đã giúp hàng ngàn học sinh Việt Nam đạt được ước mơ du học tại các quốc gia phát triển.</p>
        </div>
        <div class="d-flex gap-3">
          <span>
            <i class="fa-solid fa-circle-check"></i>
          </span>
          <p class="text-paragraph">Tăng cơ hội trúng tuyển vào các trường đại học danh tiếng thế giới: Với kiến thức
            và kỹ năng vững chắc, bạn sẽ tự tin chinh phục mọi kỳ thi tuyển sinh du học.</p>
        </div>
      </div>
    </section>
    <!-- Course end -->

    @if (!$roleTutorTeacher)
      <!-- Find tutor start -->
      {{-- <section class="findtutor container-fluid px-0">
        <div class="findtutor-wrap">
          <div class="findtutor-container container">
            <div class="findtutor-group">
              <div class="findtutor-header text-secondary-color mb-4 pb-2">
                <p class="font-sigmar-one mb-0 text-center">Tìm gia sư chất lượng - uy tín</p>
              </div>
              <form action="{{ route('tutors.viewFindTutors') }}" method="GET">
                <input type="hidden" name="teach_by_en" value="{{ $teach_by_en }}">
                <div class="row findtutor-content gy-3 mb-1">
                  <div class="col-lg-10">
                    <div class="row gy-2">
                      <div class="col-xl-3 col-md-6 findtutor-select findtutor-select-classes">
                        <div class="bg-white px-2">
                          <select name="grade_ids" id="grade" class="w-100 border-0">
                            <option value="" selected>Chọn lớp</option>
                            @foreach (\App\Enums\Grades::arrayGrade as $k => $v)
                              <option value="{{ $v }}">{{ $v->name() }}</option>
                            @endforeach
                          </select>
                        </div>
                      </div>
                      <div class="col-xl-3 col-md-6 findtutor-select findtutor-select-subject">
                        <div class="bg-white px-2">
                          <select name="subject_ids" id="subject" class="w-100 border-0">
                            <option value="" selected>Chọn môn</option>
                            @foreach (\App\Enums\Subject::arraySubject as $k => $v)
                              <option value="{{ $v }}">{{ $v->name() }}</option>
                            @endforeach
                          </select>
                        </div>
                      </div>
                      <div class="col-xl-3 col-md-6 findtutor-select findtutor-select-province">
                        <div class="bg-white px-2">
                          <select name="province_id" id="provinceSelect" class="w-100 border-0">
                            <option value="" selected>Tỉnh / thành phố</option>
                            @foreach ($provinces as $province)
                              <option value="{{ $province->id }}"
                                {{ $province->id == request('province_id') ? 'selected' : '' }}>
                                {{ $province->full_name }}
                              </option>
                            @endforeach
                          </select>
                        </div>
                      </div>
                      <div class="col-xl-3 col-md-6 findtutor-select findtutor-select-district">
                        <div class="bg-white px-2">
                          <select name="district_id" id="districtSelect" class="w-100 border-0">
                            <option value="{{ request('district_id') }}" selected>Chọn Quận / huyện</option>
                          </select>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-lg-2">
                    <button type="submit" class="btn-15 btn-15-fill btn-find-tutor">
                      tìm ngay
                    </button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </section> --}}
      <!-- Find tutor end -->

      <!-- Portfolio start -->
      <section class="portfolio container">
        <div class="portfolio-wrap row position-relative">
          <div class="col-xl-6 portfolio-detail">
            {{-- <div class="portfolio-text-label mt-3">
              <span class="content-label text-primary-color">
                nội dung hữu ích
              </span>
            </div> --}}
            <div class="portfolio-heading">
              <p class="content-header fs-35 font-sigmar-one">
                Mở các lớp
                <span class="font-sigmar-one text-new-blue"> tự học online </span>
                tại nhà
              </p>
            </div>
            <div class="portfolio-content">
              <p class="text-paragraph">
                Khóa học online chất lượng cao, nội dung được cập nhật liên tục: Đội ngũ giáo viên giàu kinh nghiệm sẽ
                truyền đạt kiến thức một cách sinh động, dễ hiểu và sát với chương trình học trên lớp.
              </p>
              <p class="text-paragraph">
                Phương pháp học tập hiện đại, hiệu quả cao: Với các bài giảng video chất lượng, bài tập tương tác, bạn sẽ
                nhanh chóng nắm vững kiến thức và nâng cao kỹ năng. Nâng cao điểm số, tự tin chinh phục kỳ thi: Khóa học
                online của chúng tôi được thiết kế đặc biệt để giúp bạn đạt kết quả cao trong học tập, tự tin đối mặt với
                mọi bài kiểm tra.
              </p>
              <p class="text-paragraph">
                Đầu tư cho tương lai với khóa học online chất lượng: Mở ra cánh cửa thành công với những kiến thức vững
                chắc ngay từ bây giờ.
              </p>
            </div>
            <div class="my-5">
              <a href="#" class="btn-pill btn-pill-fill btn-course text-decoration-none">Khóa học</a>
            </div>
          </div>
          <div class="col-xl-6 portfolio-subject row justify-content-end">
            <div class="portfolio-subject-container col-10">
              <div class="row">
                <div class="portfolio-subject-wrap col-6">
                  <div class="d-flex flex-column">
                    <div class="d-flex justify-content-center portfolio-subject-item portfolio-subject-math mb-2">
                      <div class="portfolio-subject-icon position-relative icon-math"></div>
                      <div class="portfolio-subject-name w-100 subject-math fw-600">
                        <span class="text-center">TOÁN</span>
                      </div>
                    </div>
                    <div class="d-flex justify-content-center portfolio-subject-item portfolio-subject-physics">
                      <div class="portfolio-subject-icon position-relative icon-physics"></div>
                      <div class="portfolio-subject-name w-100 subject-physics fw-600">
                        <span class="w-100 p-0 text-center">VẬT LÝ</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="portfolio-subject-wrap col-6">
                  <div class="d-flex flex-column">
                    <div class="d-flex justify-content-center portfolio-subject-item portfolio-subject-chemistry mb-2">
                      <div class="portfolio-subject-icon position-relative icon-chemistry"></div>
                      <div class="portfolio-subject-name w-100 subject-chemistry fw-600">
                        <span class="text-center">HÓA</span>
                      </div>
                    </div>
                    <div class="d-flex justify-content-center portfolio-subject-item portfolio-subject-biology">
                      <div class="portfolio-subject-icon position-relative icon-biology"></div>
                      <div class="portfolio-subject-name w-100 subject-biology fw-600">
                        <span class="text-center">SINH</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- Portfolio end -->
    @endif

    <!-- Why Choice Us start -->
    <section class="why-choice-us container-fluid ps-xl-0">
      <div class="why-choice-us-wrap row position-relative">
        <div class="col-xl-6 mb-sm-4 mb-xl-0 h-100">
          @if (!$footerInfo->video_intro)
            <video class="why-choice-us-video" loop="" controls="" width="90%" height="100%">
              <source type="video/mp4"
                src="https://endtest-videos.s3-us-west-2.amazonaws.com/documentation/endtest_data_driven_testing_csv.mp4">
            </video>
          @else
            @if (strpos($footerInfo->video_intro, '<iframe') !== false)
              {!! $footerInfo->video_intro !!}
            @else
              <iframe class="why-choice-us-video" width="90%" height="100%"
                src="{{ $footerInfo ? getUrlVideo($footerInfo->video_intro) : '' }}" title="YouTube video player"
                frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowfullscreen></iframe>
            @endif
          @endif
        </div>
        <div class="col-xl-6 why-choice-us-details">
          <div class="why-choice-us-text-label mt-3">
            <span class="content-label text-primary-color">
              dễ dàng tiếp thu
            </span>
          </div>
          <div class="why-choice-us-heading">
            <p class="content-header fs-35 font-sigmar-one">
              <span class="text-yellow font-sigmar-one">Video</span>
              bài giảng
            </p>
          </div>
          <div class="why-choice-us-content">
            <p class="text-paragraph fs-20">
              Thư viện bài giảng do đội ngũ Giáo Viên chất lượng đang giảng dạy tại các trường chuẩn Quốc Gia
            </p>
          </div>
          <div class="why-choice-us-reason mb-xl-5">
            <div class="row">
              <div class="whychoiceus-wrap col-6">
                <div class="why-choice-us-item d-flex">
                  <span>
                    <i class="fa-solid fa-circle-check"></i>
                  </span>
                  <span>Thời gian linh động</span>
                </div>
                <div class="why-choice-us-item d-flex">
                  <span>
                    <i class="fa-solid fa-circle-check"></i>
                  </span>
                  <span>Giáo trình và tài liệu đa dạng phong phú</span>
                </div>
              </div>
              <div class="whychoiceus-wrap col-6">
                <div class="why-choice-us-item d-flex">
                  <span>
                    <i class="fa-solid fa-circle-check"></i>
                  </span>
                  <span>Giáo viên chất lượng và uy tín</span>
                </div>
                <div class="why-choice-us-item d-flex">
                  <span>
                    <i class="fa-solid fa-circle-check"></i>
                  </span>
                  <span>Video bài giảng ngắn gọn, nội dung dễ tiếp thu</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Why Choice Us end -->

  </section>
  @include('modals.show_commonNotice')
  @include('modals.show_loading')
  @include('modals.show_banner')
  @if ($roleUser)
    @include('modals.show_notice_anwser_guide')
  @endif
@endsection

@push('script')
  @vite(['resources/js/landing.js', 'resources/js/exercise-guide.js', 'resources/js/validate_answer_guide.js', 'resources/js/register.js'])
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      localStorage.removeItem('selected_params');
      const roleUser = {{ $roleUser ? 'true' : 'false' }};

      $(".detailCourse").on('click', function() {
        window.location.href = $(this).data('detail_route');
      });

      function updateFileName() {
        const input = document.getElementById('upload-file-input');
        const fileNameDisplay = document.getElementById('file-name');
        if (input.files.length > 0) {
          fileNameDisplay.textContent = `${input.files[0].name}`;
        } else {
          fileNameDisplay.textContent = '';
        }
      }
      document.querySelector('.btn-upload-file').addEventListener('click', function(e) {
        document.getElementById('upload-file-input').click();
      });

      document.getElementById('upload-file-input').addEventListener('change', function() {
        updateFileName();
      });

      document.querySelectorAll('.checkRoleUser').forEach(function(element) {
        element.addEventListener('click', function(event) {
          if (roleUser) {
            event.preventDefault();
            $('#upgradeModal').modal('show');
          }
        });
      });

      document.querySelectorAll('.btn-close').forEach(function(element) {
        element.addEventListener('click', function() {
          $('#upgradeModal').modal('hide');
        });
      });

      if (roleUser) {
        document.getElementById('upgradeButton').addEventListener('click', function() {
          window.location.href = "{{ route('landingpage') }}";
        });
      }
    })
  </script>
  <script>
    @if (session('logout'))
      localStorage.removeItem("selectedRoomId");
      localStorage.clear();
    @endif
  </script>
  <script>
    // Show modal on page load
    // $(document).ready(function() {
    //   @if ($bannerAd != null && !session('verifiedMessage'))
    //     $('#bannerModal').modal('show');
    //   @endif
    // });
    // $(document).on('click', '.close', function() {
    //   $('#bannerModal').modal('hide');
    // });
  </script>
  <script>
    // window.onload = function() {
    //   const loadingScreen = document.getElementById('loading-screen');
    //   if (loadingScreen) {
    //     loadingScreen.classList.add('hide');
    //     setTimeout(() => loadingScreen.style.display = 'none', 500);
    //   }
    // }

    window.appFlags = {
      showBanner: @json($bannerAd != null && !session('verifiedMessage')),
      showNotice: @json(session('verifiedMessage') ||
              session('expiredToken') ||
              isset($_GET['verifiedMessage']) ||
              isset($_GET['expiredToken']))
    };

    window.onload = function() {
      const loadingScreen = document.getElementById('loading-screen');
      if (loadingScreen) {
        loadingScreen.classList.add('hide');
        setTimeout(() => {
          // loadingScreen.style.display = 'none';

          // Hiển thị banner modal sau khi loading tắt
          // @if ($bannerAd != null && !session('verifiedMessage'))
          //   $('#bannerModal').modal('show');
          // @endif

          if (window.appFlags?.showBanner) {
            $('#bannerModal').modal('show');
          }

          if (window.appFlags?.showNotice) {
            $('#commonNoticeModal').modal('show');
          }

        }, 600);
      }
    }

    $(document).on('click', '.close', function() {
      $('#bannerModal, #commonNoticeModal').modal('hide');
    });
  </script>
@endpush