@push('script')
  @vite(['resources/css/calendar_event.css'])
@endpush

{{-- Modal calendar --}}
{{-- Start Modal --}}
<div class="modal fade" id="calendarModalTutor" tabindex="-1" aria-labelledby="calendarModalTutorLabel" aria-hidden="true"
  data-bs-dismiss="">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content p-2" id="modal-calendar">
      <div class="modal-header border-0">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body pt-0">
        <div id="calendar-data"></div>
        <div class="modal-calendar-group" id="calendar-tutor"></div>
      </div>
    </div>
  </div>
</div>
{{-- End modal --}}

<div class="modal fade" id="eventModalTutor" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <form>
        @csrf
        <div class="modal-header mx-3">
          <div class="d-flex flex-column w-100">
            <button type="button" class="btn-close my-2" data-bs-dismiss="modal" aria-label="Close"></button>
            <input type="text" name="title" placeholder="Thêm tiêu đề">
            <span class="text-danger"></span>
          </div>
        </div>
        <div class="modal-body">
          <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
            <li class="nav-item me-2" role="presentation">
              <button class="nav-link active" id="pills-content-tab" data-bs-toggle="pill"
                data-bs-target="#pills-content" type="button" role="tab" aria-controls="pills-content"
                aria-selected="true">Nội dung</button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link" id="pills-feedback-tab" data-bs-toggle="pill" data-bs-target="#pills-feedback"
                type="button" role="tab" aria-controls="pills-feedback" aria-selected="false">Đánh giá học
                sinh</button>
            </li>
          </ul>
          <div class="tab-content" id="pills-tabContent">
            <div class="tab-pane fade show active" id="pills-content" role="tabpanel"
              aria-labelledby="pills-content-tab">
              <div class="mb-3">
                <textarea class="form-control" name="content" placeholder="Thêm nội dung mô tả" rows="5"></textarea>
              </div>
              <div class="mb-3">
                <label for="recipient-name" class="col-form-label">Link dạy học</label>
                <input type="text" class="form-control" name="teach_link" placeholder="https://zoom.us/i/1983475281">
              </div>
            </div>
            <div class="tab-pane fade" id="pills-feedback" role="tabpanel" aria-labelledby="pills-feedback-tab">
              <textarea class="form-control" name="feedback" placeholder="Thêm nội dung đánh giá học sinh" rows="5"></textarea>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger m-auto">Lưu</button>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="detailEventModalTutor" tabindex="-1" aria-labelledby="exampleModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header d-flex flex-column mx-3 border-0">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        <div class="d-flex align-items-center w-100">
          <h3 name="title" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="">
            Ôn tập kiến thức thi giữa kì
          </h3>
          @if (Auth::user()->id == \App\Enums\UserRole::TUTOR->value)
            <span class="btnEdit mx-3">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_2597_33567)">
                  <path
                    d="M7.33301 2.66699H2.66634C2.31272 2.66699 1.97358 2.80747 1.72353 3.05752C1.47348 3.30756 1.33301 3.6467 1.33301 4.00033V13.3337C1.33301 13.6873 1.47348 14.0264 1.72353 14.2765C1.97358 14.5265 2.31272 14.667 2.66634 14.667H11.9997C12.3533 14.667 12.6924 14.5265 12.9425 14.2765C13.1925 14.0264 13.333 13.6873 13.333 13.3337V8.66699"
                    stroke="#DADADA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                  <path
                    d="M12.333 1.66714C12.5982 1.40193 12.9579 1.25293 13.333 1.25293C13.7081 1.25293 14.0678 1.40193 14.333 1.66714C14.5982 1.93236 14.7472 2.29207 14.7472 2.66714C14.7472 3.04222 14.5982 3.40193 14.333 3.66714L7.99967 10.0005L5.33301 10.6671L5.99967 8.00048L12.333 1.66714Z"
                    stroke="#DADADA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                </g>
                <defs>
                  <clipPath id="clip0_2597_33567">
                    <rect width="16" height="16" fill="white" />
                  </clipPath>
                </defs>
              </svg>
            </span>
          @endif
        </div>
      </div>
      <div class="modal-body">
        <div class="card mb-3 border-0 shadow-none" style="max-width: 540px;">
          <div class="row">
            <div class="col-md-1">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                xmlns="http://www.w3.org/2000/svg">
                <path d="M5.33301 4H13.9997" stroke="#212121" stroke-width="2" stroke-linecap="round"
                  stroke-linejoin="round" />
                <path d="M5.33301 8H13.9997" stroke="#212121" stroke-width="2" stroke-linecap="round"
                  stroke-linejoin="round" />
                <path d="M5.33301 12H13.9997" stroke="#212121" stroke-width="2" stroke-linecap="round"
                  stroke-linejoin="round" />
                <path d="M2 4H2.00667" stroke="#212121" stroke-width="2" stroke-linecap="round"
                  stroke-linejoin="round" />
                <path d="M2 8H2.00667" stroke="#212121" stroke-width="2" stroke-linecap="round"
                  stroke-linejoin="round" />
                <path d="M2 12H2.00667" stroke="#212121" stroke-width="2" stroke-linecap="round"
                  stroke-linejoin="round" />
              </svg>
            </div>
            <div class="col-md-11">
              <div class="card-body p-0">
                <textarea class="form-control border-0 p-0" name="content" row="5" disabled></textarea>
              </div>
            </div>
          </div>
        </div>
        <div class="card mb-3 border-0 shadow-none" style="max-width: 540px;">
          <div class="row">
            <div class="col-md-1">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_2597_33573)">
                  <path
                    d="M10.0003 4.66699H12.0003C12.4381 4.66699 12.8715 4.75321 13.2759 4.92073C13.6804 5.08824 14.0478 5.33377 14.3573 5.6433C14.6669 5.95283 14.9124 6.3203 15.0799 6.72471C15.2474 7.12913 15.3337 7.56259 15.3337 8.00033C15.3337 8.43806 15.2474 8.87152 15.0799 9.27594C14.9124 9.68036 14.6669 10.0478 14.3573 10.3573C14.0478 10.6669 13.6804 10.9124 13.2759 11.0799C12.8715 11.2474 12.4381 11.3337 12.0003 11.3337H10.0003M6.00033 11.3337H4.00033C3.56259 11.3337 3.12913 11.2474 2.72471 11.0799C2.3203 10.9124 1.95283 10.6669 1.6433 10.3573C1.01818 9.73223 0.666992 8.88438 0.666992 8.00033C0.666992 7.11627 1.01818 6.26842 1.6433 5.6433C2.26842 5.01818 3.11627 4.66699 4.00033 4.66699H6.00033"
                    stroke="#212121" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                  <path d="M5.33301 8H10.6663" stroke="#212121" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round" />
                </g>
                <defs>
                  <clipPath id="clip0_2597_33573">
                    <rect width="16" height="16" fill="white" />
                  </clipPath>
                </defs>
              </svg>

            </div>
            <div class="col-md-11">
              <div class="card-body p-0">
                <input type="text" class="form-control border-0 p-0" name="teach_link" disabled>
              </div>
            </div>
          </div>
        </div>
        <div class="card mb-3 border-0 shadow-none" style="max-width: 540px;">
          <div class="row">
            <div class="col-md-1">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_2597_33577)">
                  <path
                    d="M7.99967 10.0003C10.577 10.0003 12.6663 7.91099 12.6663 5.33366C12.6663 2.75633 10.577 0.666992 7.99967 0.666992C5.42235 0.666992 3.33301 2.75633 3.33301 5.33366C3.33301 7.91099 5.42235 10.0003 7.99967 10.0003Z"
                    stroke="#212121" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                  <path d="M5.47366 9.2596L4.66699 15.3329L8.00033 13.3329L11.3337 15.3329L10.527 9.25293"
                    stroke="#212121" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                </g>
                <defs>
                  <clipPath id="clip0_2597_33577">
                    <rect width="16" height="16" fill="white" />
                  </clipPath>
                </defs>
              </svg>
            </div>
            <div class="col-md-11">
              <div class="card-body p-0">
                <h5 class="card-title">Đánh giá học sinh</h5>
                <textarea class="form-control border-0 p-0" name="feedback" rows="5" disabled></textarea>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

@if (Auth::user()->role_id == \App\Enums\UserRole::TUTOR->value)
  <div class="modal fade" id="updateTeachingLinkModalTutor" tabindex="-1" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <form id="updateTeachingLinkForm" action="{{ route('tutors.updateTeachingLink') }}" method="post">
          @csrf
          <div class="modal-header mx-3">
            <div class="d-flex flex-column w-100">
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
          </div>
          <div class="modal-body">
            <div class="tab-content" id="pills-tabContent">
              <div class="mb-3">
                <input type="hidden" name="hire_tutor_id" value="">
                <label for="recipient-name" class="col-form-label">Link dạy học</label>
                <input type="text" class="form-control" name="teach_link"
                  placeholder="https://zoom.us/i/1983475281" value="">
                <span class="text-danger text-teaching-link-error"></span></br>
                <label for="recipient-name" class="col-form-label">Pasword</label>
                <input type="text" class="form-control" name="password" placeholder="12345678" value="">
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="submit" class="prevent-submit btn btn-danger btn-update-teaching-link m-auto">Lưu</button>
          </div>
        </form>
      </div>
    </div>
  </div>
@endif

<script>
  var role = {{ Auth::user()->role_id }}
</script>