@php
  use Carbon\Carbon;
  use App\Enums\TeacherCourseType;
  $fieldsToCheck = [
      'name',
      'subject_id',
      'grade_id',
      'date_range',
      'shifts',
      'start_time',
      'end_time',
      'teach_address',
      'teach_link',
      'price',
      'type',
      'image',
  ];
  $shouldShowModal = false;
  foreach ($fieldsToCheck as $field) {
      if ($errors->has($field)) {
          $shouldShowModal = true;
          break;
      }
  }
@endphp
@push('style')
  @vite(['resources/css/teachers/teacher_register_online_course.css'])
@endpush

@if ($shouldShowModal)
  <script>
    window.onload = function() {
      $('#registerClassNewModal').modal('show');
    };
  </script>
@endif

<div class="modal fade" id="registerClassNewModal" aria-labelledby="registerClassNewModalLabel" aria-modal="true">
  <div class="modal-dialog modal-dialog-centered modal-xl">
    <div class="modal-content modal-custom">
      <div class="modal-header border-bottom-0 mx-3">
        <div class="d-flex flex-column w-100">
          <button type="button" class="btn-close mt-2" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
      </div>
      <div class="modal-body">
        <div class="withdrawal-request-wrap d-flex flex-column flex-xl-row px-sm-3 align-items-center px-0 pb-4">
          <div class="withdrawal-request-content w-100">
            <div class="withdrawal-request-title">
              <h4 class="text-capitalize fw-600 text-secondary-color text-center">Thêm Lớp Dạy
              </h4>
            </div>
            <div class="withdrawal-request-description pt-1">
              <p class="text-red-main fw-500 fs-14 text-center">Vui lòng điền thông tin của bạn</p>
            </div>
            <div class="withdrawal-request-form fw-500 mt-3">
              <form id="handleTeacherOnlineCourse" action="{{ route('teacher_online_courses.store') }}"
                enctype="multipart/form-data" method="post">
                @csrf
                <div class="row content-register-form">
                  <div class="row mb-2">
                    <div class="withdrawal-request-form-item col-12">
                      <label for="class_name" class="text-blue-custom text-capitalize fw-500">Tên
                        Khóa Học <span class="requireStar">*</span></label>
                      <input type="text" class="form-control fw-500 w-100" name="name"
                        placeholder="Nhập tên khóa học bạn muốn đăng ký" value="{{ old('name') }}">
                      @error('name')
                        <span class="text-danger">{{ $message }}</span>
                      @enderror
                    </div>
                  </div>
                  <div class="row mb-2">
                    <div class="withdrawal-request-form-item col-lg-4">
                      <label for="subject" class="text-blue-custom text-capitalize fw-500">Môn
                        Học <span class="requireStar">*</span></label>
                      <select id="subject_id" class="form-select text-capitalize" name="subject_id" value="">
                        <option></option>
                        @foreach ($infor['subjects'] as $subject)
                          <option class="text-capitalize" value="{{ $subject->id }}"
                            {{ $subject->id == old('subject_id') ? 'selected' : '' }}>{{ $subject->name }}</option>
                        @endforeach
                      </select>
                      @error('subject_id')
                        <span class="text-danger">{{ $message }}</span>
                      @enderror

                    </div>
                    <div class="withdrawal-request-form-item col-lg-4 mt-lg-0 mt-4">
                      <label class="text-blue-custom text-capitalize fw-500">Trình
                        độ <span class="requireStar">*</span></label>
                      <select class="form-select" name="grade_id" value="{{ old('grade_id') }}">
                        <option class="text-muted" disabled selected value="">Chọn lớp</option>
                        @foreach ($infor['grades'] as $grade)
                          <option class="text-capitalize" value="{{ $grade->id }}"
                            {{ $grade->id == old('grade_id') ? 'selected' : '' }}>{{ $grade->name }}</option>
                        @endforeach
                      </select>
                      @error('grade_id')
                        <span class="text-danger">{{ $message }}</span>
                      @enderror
                    </div>
                    <div class="withdrawal-request-form-item col-lg-4 mt-lg-0 mt-4">
                      <label class="text-blue-custom text-capitalize fw-500">Copy Dữ Liệu Lớp</label>
                      <select class="form-select" name="teacher_course_copy_id"
                        value="{{ old('teacher_course_copy_id') }}">
                        <option class="text-muted" disabled selected value="">SH_000</option>
                        @foreach ($infor['teacher_online_courses'] as $teacher_online_course)
                          <option class="text-capitalize" value="{{ $teacher_online_course->id }}"
                            {{ $teacher_online_course->id == old('teacher_course_copy_id') ? 'selected' : '' }}>
                            {{ $teacher_online_course->id_code }}</option>
                        @endforeach
                      </select>
                      @error('teacher_course_copy_id')
                        <span class="text-danger">{{ $message }}</span>
                      @enderror
                    </div>
                  </div>
                  <div class="row">
                    <label for="class_name" class="text-blue-custom text-capitalize fw-500">Thời gian dạy <span
                        class="requireStar">*</span></label>
                    <div class="withdrawal-request-form-item col-12 col-lg-6">
                      <div class="form-group mb-0">
                        <div class="input-group">
                          <div class="input-group-prepend">
                            <span class="input-group-text bg-white">
                              <svg width="28" height="28" viewBox="0 0 28 28" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                  d="M18 4V8M10 4V8M5 12H23M7 6H21C22.1046 6 23 6.89543 23 8V22C23 23.1046 22.1046 24 21 24H7C5.89543 24 5 23.1046 5 22V8C5 6.89543 5.89543 6 7 6Z"
                                  stroke="#999999" stroke-linecap="round" stroke-linejoin="round" />
                                <path
                                  d="M18 4V8M10 4V8M5 12H23M7 6H21C22.1046 6 23 6.89543 23 8V22C23 23.1046 22.1046 24 21 24H7C5.89543 24 5 23.1046 5 22V8C5 6.89543 5.89543 6 7 6Z"
                                  stroke="black" stroke-opacity="0.2" stroke-linecap="round" stroke-linejoin="round" />
                                <path
                                  d="M18 4V8M10 4V8M5 12H23M7 6H21C22.1046 6 23 6.89543 23 8V22C23 23.1046 22.1046 24 21 24H7C5.89543 24 5 23.1046 5 22V8C5 6.89543 5.89543 6 7 6Z"
                                  stroke="black" stroke-opacity="0.2" stroke-linecap="round" stroke-linejoin="round" />
                              </svg>
                            </span>
                          </div>
                          <input type="text" class="form-control float-right" id="reservation" name="date_range"
                            placeholder="Chọn khoảng thời gian">
                        </div>
                        @error('date_range')
                          <span class="text-danger">{{ $message }}</span>
                        @enderror
                      </div>
                    </div>
                    <div class="withdrawal-request-form-item col-12 col-lg-6 mt-3 mt-lg-0" id="shifts-select">
                      <select id="shifts" class="" multiple="multiple" data-placeholder="Chọn buổi dạy"
                        style="width: 100%;" name="shifts[]" value="{{ old('shitfs[]') }}">
                      </select>
                      @error('shifts')
                        <span class="text-danger">{{ $message }}</span>
                      @enderror
                    </div>
                  </div>
                  <div class="row mb-2">
                    <div class="withdrawal-request-form-item col-12 col-lg-6">
                      <input type="time" class="form-control datetime-custom w-100 mt-3"
                        data-placeholder="Chọn khoảng thời gian"
                        value="{{ old('start_time') ? Carbon::createFromFormat('H:i', old('start_time'))->format('H:i') : '' }}"
                        name="start_time">
                      @error('start_time')
                        <span class="text-danger">{{ $message }}</span>
                      @enderror
                    </div>
                    <div class="withdrawal-request-form-item col-12 col-lg-6">
                      <input type="time" class="form-control datetime-custom w-100 mt-3"
                        onfocus="(this.type='time')" onblur="if(this.value===''){this.type='text'}"
                        placeholder="Chọn khoảng thời gian"
                        value="{{ old('end_time') ? Carbon::createFromFormat('H:i', old('end_time'))->format('H:i') : '' }}"
                        name="end_time">
                      @error('end_time')
                        <span class="text-danger">{{ $message }}</span>
                      @enderror
                    </div>
                  </div>
                  <div class="row mb-2">
                    <div class="withdrawal-request-form-item col-12">
                      <label class="text-blue-custom text-capitalize fw-500">Địa điểm dạy</label>
                      <input type="text" class="form-control fw-500 w-100" name="teach_address"
                        placeholder="Nhập thông tin" value="{{ old('teach_address') }}">
                      @error('teach_address')
                        <span class="text-danger">{{ $message }}</span>
                      @enderror
                    </div>
                  </div>
                  <div class="row mb-2">
                    <div class="withdrawal-request-form-item col-12">
                      <label class="text-blue-custom text-capitalize fw-500">Link dạy <span
                          class="requireStar">*</span></label>
                      <input type="text" class="form-control fw-500 w-100" name="teach_link"
                        placeholder="Nhập thông tin" value="{{ old('teach_link') }}">
                      @error('teach_link')
                        <span class="text-danger">{{ $message }}</span>
                      @enderror
                    </div>
                  </div>
                  <div class="row mb-2">
                    <div class="withdrawal-request-form-item col-12">
                      <label class="text-blue-custom text-capitalize fw-500 mb-0">
                        Trạng thái lớp <span class="requireStar">*</span></label>
                      <input type="hidden" name="type" value="{{ old('type') }}">
                      <div class="radio-button-wrap row mt-2">
                        <div class="radio-button-group col-6">
                          <input type="radio" id="nothave" name="type" class="radio-btn-custom me-2"
                            value="{{ TeacherCourseType::PUBLIC->value }}"
                            {{ old('type', TeacherCourseType::PUBLIC->value) == TeacherCourseType::PUBLIC->value ? 'checked' : '' }}>
                          <label class="fw-500 text-neutral-04 mb-0" for="nothave">Siêu học</label>
                          <div id="price-public">
                            <div class="mt-2">
                              <input type="text" class="form-control fw-500 w-100" name="price"
                                placeholder="Nhập học phí của lớp" value="{{ old('price') }}">
                              <span class="text-capitalize-none text-muted fst-italic fs-14">
                                Đây là học phí cả khóa
                              </span>
                            </div>
                            @error('price')
                              <span class="text-danger">{{ $message }}</span>
                            @enderror
                          </div>
                        </div>
                        <div class="radio-button-group col-6">
                          <input type="radio" id="have" name="type" class="radio-btn-custom me-2"
                            value="{{ TeacherCourseType::PRIVATE->value }}"
                            {{ old('type') == TeacherCourseType::PRIVATE->value ? 'checked' : '' }}>
                          <label class="fw-500 text-neutral-04 mb-0" for="have">Cá nhân</label>
                          <div id="private">
                            <div id="legal-support" class="d-flex align-items-start">
                              <input type="hidden" name="legal_support" value="0">
                              <input type="checkbox" name="legal_support" value="1"
                                class="mx-3 my-0 my-lg-auto mt-1 mt-lg-0"
                                {{ old('legal_support', '0') == '1' ? 'checked' : '' }}>
                              <div class="d-flex justify-content-between align-items-center flex-wrap w-100">
                                <span class="fw-normal text-neutral-04">Hỗ trợ pháp lý</span>
                                <a href="{{ route('teachers.legal_support_policy') }}" target="_blank"
                                  class="fs-13 text-decoration-underline">Chính sách
                                  hỗ trợ pháp lý</a>
                              </div>
                            </div>
                            <div id="price-private">
                              <div class="mt-2">
                                <input type="text" class="form-control fw-500 w-100" name="price"
                                  placeholder="Ví dụ: 1.500.000 đ/tháng" value="{{ old('price') }}">
                                <span class="text-capitalize-none text-muted fst-italic fs-14">
                                  Đây là học phí học sinh phải nộp theo từng tháng
                                </span>
                              </div>
                              @error('price')
                                <span class="text-danger">{{ $message }}</span>
                              @enderror
                            </div>
                          </div>
                        </div>
                      </div>
                      @error('type')
                        <span class="text-danger">{{ $message }}</span>
                      @enderror
                    </div>
                  </div>
                  <div class="row">
                    <div class="withdrawal-request-form-item col-12">
                      <label class="text-blue-custom text-capitalize fw-500 mb-1">
                        Hình ảnh đại diện lớp học
                      </label>
                      <input type="file" class="form-control input-file image-class" name="image"
                        value="{{ old('image') }}">
                      <div class="d-flex flex-column">
                        <img id="image" class="preview-avatar-banner preview-avatar mt-2" alt="">
                        <span class="text-capitalize-none text-muted fst-italic fs-14">
                          Bạn có thể sử dụng ảnh của bạn hoặc lớp học. Hình ảnh này sẽ hiển thị trên giao diện để học
                          sinh xem và chọn lớp.
                        </span>
                      </div>
                      @error('image')
                        <span class="text-danger">{{ $message }}</span>
                      @enderror

                    </div>
                  </div>
                </div>
                <div class="d-flex justify-content-center btn-withdrawal-request-submit">
                  <button class="prevent-submit btn-custom fw-600 fs-18 text-capitalize" type="submit">Xác
                    Nhận</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@push('script')
  <script src="{{ asset('/plugins/moment/moment.min.js') }}"></script>
  <script src="{{ asset('/plugins/daterangepicker/daterangepicker.js') }}"></script>
  <script src="{{ asset('/js/select2.min.js') }}"></script>
  <script>
    $(document).ready(function() {
      var dataMultiSelect = {!! json_encode(getMultiSelect()) !!};
      $('#shifts').select2({
        // placeholder: "Chọn buổi dạy AAAA",
        data: dataMultiSelect,
        tags: true,
      });

      $('#subject_id').select2({
        dropdownParent: $('#registerClassNewModal'),
        placeholder: "Chọn môn",
        allowClear: true,
        tags: true,
      });
    });
  </script>
  @vite('resources/js/teacher_dashboard.js')
@endpush