@extends('layout.app', ['title' => 'Online Learning'])

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

@php
  use App\Enums\UserRole;
  $infor = getMenuData(); //for registering teachingClass
@endphp

@section('content')
  <section class="page-wrap col-8 col-md-9 col-xl-10 flex-grow-1 px-0 position-relative">
    <section class="banner-landing w-100 position-relative bg-custom-secondary-color">
      <div class="online-learning d-flex justify-content-between gap-3 z-index-1 position-relative">
        <div class="banner-landing-content d-flex flex-column">
          <h1 class="text-uppercase fw-900 fs-32 mb-2 text-white" id="title-banner">Khóa học online - offline</h1>
          <p class="fs-14 mb-0  text-white">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!</p>
        </div>
        @if (Auth::user()->role_id == UserRole::STUDENT->value)
          <div class="input-container d-flex flex-column">
            <form id="search-form" method="GET" action="">
              <div class="d-flex align-items-center justify-content-between">
                <input id="search-input" name="search" type="text" placeholder="Nhập mã lớp ..."
                  value="{{ request('search') }}">
                <button class="icon border-0">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                    fill="none">
                    <path
                      d="M19 11V4C19 3.46957 18.7893 2.96086 18.4142 2.58579C18.0391 2.21071 17.5304 2 17 2H4C3.46957 2 2.96086 2.21071 2.58579 2.58579C2.21071 2.96086 2 3.46957 2 4V17C2 17.5304 2.21071 18.0391 2.58579 18.4142C2.96086 18.7893 3.46957 19 4 19H11"
                      stroke="#CC3A3D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M12 12L16.166 22L17.646 17.645L22 16.166L12 12Z" stroke="#CC3A3D" stroke-width="2"
                      stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M18 18L21 21" stroke="#CC3A3D" stroke-width="2" stroke-linecap="round"
                      stroke-linejoin="round" />
                  </svg>
                </button>
              </div>
            </form>
            @if ($errors->has('search'))
              <span class="text-danger fw-600 mt-3">{{ $errors->first('search') }}</span>
            @endif
          </div>
        @endif
      </div>

      <div class="position-absolute end-0 top-0">
        <svg xmlns="http://www.w3.org/2000/svg" width="75" height="75" viewBox="0 0 175 175" fill="none">
          <path
            d="M175 175C151.2 170.9 127.4 166.9 111.1 154.3C94.8 141.7 86.1 120.6 68.9 106.1C51.8 91.5 26.2 83.6 13.3 67C0.400003 50.4 0.2 25.2 0 0H175V175Z"
            fill="#FCAF3C" />
        </svg>
      </div>
      <div class="position-absolute bottom-0 start-0">
        <svg xmlns="http://www.w3.org/2000/svg" width="75" height="75" viewBox="0 0 175 175" fill="none">
          <path
            d="M0 0C14.9 21.5 29.8 43.1 52.4 48.4C75 53.8 105.3 43 123.7 51.3C142.1 59.5 148.7 86.9 155.2 110.7C161.8 134.5 168.4 154.8 175 175H0V0Z"
            fill="#FCAF3C" />
        </svg>
      </div>
    </section>
    <section class="ap-course p-5 pt-3">
      <form id="condition-form" method="GET" action="">
        {{-- <div class="position-absolute input-container d-flex align-items-center justify-content-between">
          <input id="search-input" name="search" type="text" placeholder="Nhập mã lớp ..."
            value="{{ request('search') }}">
          <button class="icon border-0">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path
                d="M19 11V4C19 3.46957 18.7893 2.96086 18.4142 2.58579C18.0391 2.21071 17.5304 2 17 2H4C3.46957 2 2.96086 2.21071 2.58579 2.58579C2.21071 2.96086 2 3.46957 2 4V17C2 17.5304 2.21071 18.0391 2.58579 18.4142C2.96086 18.7893 3.46957 19 4 19H11"
                stroke="#CC3A3D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              <path d="M12 12L16.166 22L17.646 17.645L22 16.166L12 12Z" stroke="#CC3A3D" stroke-width="2"
                stroke-linecap="round" stroke-linejoin="round" />
              <path d="M18 18L21 21" stroke="#CC3A3D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </button>
        </div> --}}
        <div class="row justify-content-center pb-4">
          <div class="withdrawal-request-form-item col-4 col-lg-3">
            <label for="subject" class="text-secondary-color text-capitalize fw-600 mb-2">Môn Học</label>
            <select id="subject_id" class="form-select select-submit text-capitalize" name="subject" value="">
              <option class="text-muted" value="" {{ request('subject') == '' ? 'selected' : '' }}>
                Chọn môn</option>
              @foreach ($infor['subjects'] as $subject)
                <option class="text-capitalize" value="{{ $subject->id }}"
                  {{ request('subject') === (string) $subject->id ? 'selected' : '' }}>
                  {{ $subject->name }}
                </option>
              @endforeach
              @foreach ($subjectArray as $subject)
                <option class="text-capitalize" value="{{ $subject->subject_name }}"
                  {{ request('subject') === (string) $subject->subject_name ? 'selected' : '' }}>
                  {{ $subject->subject_name }}
                </option>
              @endforeach
            </select>

          </div>
          <div class="withdrawal-request-form-item col-4 col-lg-3">
            <label class="text-secondary-color text-capitalize fw-600 mb-2">Trình độ</label>
            <select class="form-select select-submit" name="grade">
              <option class="text-muted" value="" {{ request('grade') === '' ? 'selected' : '' }}>
                Chọn lớp
              </option>
              @foreach ($infor['grades'] as $grade)
                <option class="text-capitalize" value="{{ $grade->id }}"
                  {{ request('grade') === (string) $grade->id ? 'selected' : '' }}>{{ $grade->name }}</option>
              @endforeach
            </select>
          </div>
        </div>
      </form>
      <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4">
        @if (count($online_learnings) > 0)
          @foreach ($online_learnings as $online_learning)
            <div class="col">
              <div class="card h-100 newCard detailCourse p-4"
                data-detail_route="{{ route('online_learning.detail', ['id' => $online_learning->id]) }}">
                <img
                  src="{{ $online_learning->teacher_course_image != null ? Storage::url($online_learning->teacher_course_image) : asset('img/landing/avatar_course.png') }}"
                  class="card-img-top" alt="default image">
                <div class="card-body p-0">
                  <div class="d-flex justify-content-between courseInfor my-2">
                    <span class="fs-12 subject text-capitalize">
                      {{ !is_null($online_learning->subject_id) ? $online_learning->subject->name : $online_learning->subject_name }}</span>
                    @if ($online_learning->price == 0)
                      <span class="priceAbsolute bg-danger fw-bold price mb-2 p-2 text-white">Free</span>
                    @else
                      <span
                        class="priceAbsolute bg-info fw-bold price mb-2 p-2 text-white">{{ number_format($online_learning->price, 0, '.', '.') }}
                        đ</span>
                    @endif
                  </div>
                  <h5 class="fw-bold text-secondary-color">
                    {{ $online_learning->name }}
                  </h5>
                  <div class="text-des text-muted fs-13 two-lines mb-2">{!! $online_learning->description !!}</div>
                </div>
                <div class="d-flex align-self-end align-items-center justify-content-between w-100 flex-row flex-wrap">
                  <div class="userBlock-teacher">
                    <div class="userBlock d-flex align-items-center gap-1">
                      <div class="pill-avatar">
                        <img
                          src="{{ $online_learning->user->avatar ? Storage::url($online_learning->user->avatar) : asset('/img/avatardefault.jpg') }}"
                          alt="user avatar" class="userAvatar rounded-circle">
                      </div>
                      <span class="fs-14 fw-600 text-paragraph">
                        {{ $online_learning->user->fullname }}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          @endforeach
        @else
          <div class="col mx-auto text-center">
            <span class="d-flex my-3 text-center">Không tìm thấy kết quả nào</span>
          </div>
        @endif

      </div>
    </section>
  </section>
@endsection

@push('script')
  @vite(['resources/js/landing.js', 'resources/js/online_learning.js'])
  <script>
    $(".detailCourse").on('click', function() {
      window.location.href = $(this).data('detail_route');
    });
  </script>
@endpush