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

  <x-navbars.sidebar_triage
    role="{{ $request->user()->role }}"
    activePage="exams"
    teacherId="{{ $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="Edit exams"
      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

      <form
        action="{{ route('teachersEditExam', $exam->id) }}"
        method="POST"
        enctype="multipart/form-data"
      >
        @csrf
        @method('PUT')

        <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">
                  Exam Information
                </h6>
              </div>
            </div>
          </div>

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

            <div class="row">

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

              <div class="col-md-12 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="{{ $subject_selected->id }}"
                    selected="selected"
                  >
                    {{ $subject_selected->subjectTitle }}
                  </option>
                </select>

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

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

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

              <div class="col-md-12 mb-3">
                <label for="floatingTextarea2">Remarks :</label>
                <textarea
                  class="form-control border border-2 p-2"
                  id="floatingTextarea2"
                  name="remarks"
                  placeholder="Please type notice remarks ... "
                  rows="4"
                  cols="50"
                >{{ old('remarks', $exam->remarks) }}</textarea>

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

              <div class="col-md-12 mb-3">
                <label for="floatingTextarea2">
                  Student involved in exam:
                </label>

                @foreach ($students as $student)
                  <div class="form-check">
                    <input
                      class="form-check-input"
                      id="exam.student_id_{{ $student->id }}"
                      name="exam.student_id_{{ $student->id }}"
                      type="checkbox"
                      {{ in_array($student->id, $exam_student_involved_id) ? 'checked' : '' }}
                    />

                    <label
                      class="form-check-label"
                      for="exam.student_id_{{ $student->id }}"
                    >
                      <span>{{ $student->lastName }}</span>,
                      <span>{{ $student->firstName }}</span>
                      <b>{{ $student->email }}</b>
                    </label>
                  </div>
                @endforeach

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

            </div>

            <button
              class="btn bg-gradient-dark"
              type="submit"
            >
              <i class="material-icons opacity-10">save</i> Save
            </button>

            <a
              class="btn bg-gradient-dark"
              href="{{ route('teacherShowExams') }}"
            >
              Cancel
            </a>

          </div>

        </div>

      </form>

    </div>

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

</x-layout>

<script>
  $('.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>
