<x-layout bodyClass="g-sidenav-show bg-gray-200">

  <x-navbars.sidebar_triage
    role="{{ $request->user()->role }}"
    activePage="show_schedules"
    teacher_id="{{ $current_teacher->id }}"
  >
  </x-navbars.sidebar_triage>

  <div
    class="main-content position-relative max-height-vh-100 h-100 bg-gray-100">
    <!-- Navbar -->
    <x-navbars.navs.auth
      titlePage="Schedules"
      role="{{ $request->user()->role }}"
      firstName="{{ $current_teacher->firstName }}"
      last_name="{{ $current_teacher->lastName }}"
    >
    </x-navbars.navs.auth>
    <!-- End Navbar -->

    <div class="container-fluid px-md-4 px-2">
      @if (session('status'))
        <div class="row">
          <div
            class="alert alert-warning alert-dismissible text-white"
            role="alert"
          >
            <span class="text-sm">{{ Session::get('status') }}</span>
            <button
              class="btn-close py-3 text-lg opacity-10"
              data-bs-dismiss="alert"
              type="button"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
        </div>
      @endif

      <div class="card card-plain h-100">
        <div class="card-header p-3 pb-0">
          <div class="row">
            <div class="col-md-8 d-flex align-items-center">
              <h6 class="mb-3">Schedule Information</h6>
            </div>
          </div>
        </div>

        <div class="card-body p-3">

          <form
            action="{{ route('teacherUpdateSchedule', $schedule->id) }}"
            method="POST"
            enctype="multipart/form-data"
          >
            @csrf
            @method('PUT')
            <div class="row">

              <div class="col-md-6 mb-3">
                <label class="form-label">Start time (Y-m-d) :</label>
                <input
                  class="form-control border border-2 p-2"
                  id="startTime"
                  name="startTime"
                  type="text"
                  value="{{ old('startTime', $schedule->startTime) }}"
                >
                @error('startTime')
                  <p class='text-danger inputerror'>{{ $message }} </p>
                @enderror
              </div>

              <div class="col-md-6 mb-3">
                <label class="form-label">End time (Y-m-d) :</label>
                <input
                  class="form-control border border-2 p-2"
                  id="endTime"
                  name="endTime"
                  type="text"
                  value="{{ old('endTime', $schedule->endTime) }}"
                >
                @error('endTime')
                  <p class='text-danger inputerror'>{{ $message }} </p>
                @enderror
              </div>

              <div class="col-md-6 mb-3">
                <label class="form-label">Classroom :</label>
                @if (count($schedule->classRooms) > 0)
                  <select
                    class="form-select js-example-basic-single form-control select_classroom border border-2 p-2"
                    name="class_room_id"
                    value="{{ old('classRoom', $schedule->classRooms[0]->id) }}"
                  >
                    <option
                      value="{{ $schedule->classRooms[0]->id }}"
                      selected="selected"
                    >
                      {{ $schedule->classRooms[0]->classRoomTitle }}
                    </option>
                  </select>
                @else
                  <select
                    class="form-select js-example-basic-single form-control select_classroom border border-2 p-2"
                    name="class_room_id"
                    value="{{ old('classRoom', 'no classroom assigned') }}"
                  >
                    <option
                      value="{{ 1 }}"
                      selected="selected"
                    >
                      {{ 'no classroom assigned' }}
                    </option>
                  </select>
                @endif
                @error('classRoom')
                  <p class='text-danger inputerror'>{{ $message }} </p>
                @enderror
              </div>

              <div class="col-md-6 mb-3">
                <label class="form-label">Subject :</label>
                <select
                  class="form-select js-example-basic-single form-control select_subject border border-2 p-2"
                  name="subject_id"
                >
                  <option
                    value="{{ $schedule->subjects[0]->id }}"
                    selected="selected"
                  >
                    {{ $schedule->subjects[0]->subjectTitle }}
                  </option>
                </select>
                @error('subject_id')
                  <p class='text-danger inputerror'>{{ $message }} </p>
                @enderror
              </div>

              <div class="col-md-full mb-3">
                <label class="form-label">Name :</label>
                <input
                  class="form-control border border-2 p-2"
                  name="subject"
                  type="text"
                  value="{{ old('subject', $schedule->subject) }}"
                >

                @error('subject')
                  <p class='text-danger inputerror'>{{ $message }} </p>
                @enderror
              </div>

              <div class="col-md-12 mb-3">
                <label for="floatingTextarea2">Description :</label>
                <textarea
                  class="form-control border border-2 p-2"
                  id="floatingTextarea2"
                  name="description"
                  placeholder="Please type schedule description"
                  rows="4"
                  cols="50"
                >{{ old('description', $schedule->description) }}</textarea>
                @error('description')
                  <p class='text-danger inputerror'>{{ $message }}</p>
                @enderror
              </div>

            </div>

            <button
              class="btn bg-gradient-dark"
              type="submit"
            >Save</button>
            <a
              class="btn bg-gradient-dark"
              href="{{ route('teachersListSchedule') }}"
            >Cancel</a>
          </form>

        </div>
      </div>

    </div>

    <x-footers.auth></x-footers.auth>
  </div>

</x-layout>

<style>
  .datepicker {
    border: 2px solid #dee2e6;
  }
</style>

<script>
  $(document).ready(function() {
    $('#startTime').datepicker({
      format: 'yyyy-mm-dd',
      autoclose: true,
      todayHighlight: true,
    }).change((e) => {
      console.log(e.target.value)
    });

    $('#endTime').datepicker({
      format: 'yyyy-mm-dd',
      autoclose: true,
      todayHighlight: true,
    }).change((e) => {
      startTime = $("#startTime").val();
      endTime = e.target.value;
    });


    $('.select_classroom').select2({
      placeholder: 'Select an option',
      maximumSelectionLength: 10,
      ajax: {
        url: '/listFreeClassRoom',
        data: function(params) {
          var query = {
            startTime: $("#startTime").val(),
            endTime: $("#endTime").val(),
            q: params.term
          };
          return query;
        },

        processResults: function(data, params) {
          console.log(
            data.map(x => ({
              id: x.id,
              text: x.classRoomTitle
            }))
          );
          return {
            results: data.map(x => ({
              id: x.id,
              text: x.classRoomTitle
            }))
          };
        }
      }
    });

    $('.select_subject').select2({
      placeholder: 'Select an option',
      maximumSelectionLength: 10,
      ajax: {
        url: '{{ route('getSubjectsJson') }}',
        data: function(params) {
          var query = {
            q: params.term
          };
          return query;
        },

        processResults: function(data, params) {
          console.log(
            data.map(x => ({
              id: x.id,
              text: x.subjectTitle
            }))
          );
          return {
            results: data.map(x => ({
              id: x.id,
              text: x.subjectTitle
            }))
          };
        }
      }
    });
  });
</script>
