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

  <x-navbars.sidebar_triage
    role="{{ $request->user()->role }}"
    activePage="teachers"
  >
  </x-navbars.sidebar_triage>

  <div class="main-content position-relative h-100 bg-gray-100">
    <!-- Navbar -->
    <x-navbars.navs.auth
      titlePage="Edit teacher"
      role="{{ $request->user()->role }}"
      firstName="{{ $request->user()->name }}"
    >
    </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('teachers.update', $teacher->id) }}"
        method="POST"
        enctype="multipart/form-data"
      >
        @csrf
        @method('PUT')

        <div class="row gx-4 mb-2">
          <div class="col-auto">
            <div
              style="display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 1rem;"
            >
              <img
                id="preview-avatar"
                src="#"
                alt="Preview Image"
                style="display: none; width: 150px; height: 150px; margin-top: 10px;"
                onclick="previewAvatarOnClick(event)"
              />

              <div
                id="noAvatarText"
                style="
                                    display: none;
                                    width: 150px; height: 150px;
                                    margin-top: 10px;
                                    padding:1rem;
                                    border-width: 3px;
                                    border-style: dotted;
                                    border-radius: 10px;
                                    border-color: gray;
                                    cursor:pointer;
                                "
                onclick="noAvatarOnClick(event)"
              >
                <div
                  style="width: 100%; height: 100%;
                                    display: flex;
                                    flex-direction: column;
                                    justify-content: center;
                                    align-items: center;"
                >
                  <i
                    class="fa fa-plus-circle fa-2x"
                    aria-hidden="true"
                  ></i>
                  <div>no avatar</div>
                  <div>(click to add)</div>
                </div>
              </div>

              @if ($teacher->avatar)
                <img
                  id="original-avatar"
                  src="{{ '/avatars/' . $teacher->avatar }}"
                  alt="User Avatar"
                  style="width: 150px; height: 150px;"
                  onclick="originalAvatarOnClick(event)"
                />
              @endif

              <input
                class="form-control-file"
                id="avatar"
                name="avatar"
                type="file"
                style="display: none;"
                onchange="previewImage(event)"
              />

              <input
                id="avatarAction"
                name="avatarAction"
                type="hidden"
                value="NO_CHANGE"
              />

              <div>
                <button
                  class="btn bg-gradient-dark"
                  id="clearAvatarButton"
                  type="button"
                  onclick="clearAvatarOnClick(event)"
                >
                  clear Avatar
                </button>
              </div>

            </div>
          </div>

          <div class="col-auto my-auto">
            <div class="h-100">
              <h5 class="mb-1">
                {{ join(',', [$teacher->firstName, $teacher->lastName]) }}
              </h5>
            </div>
          </div>
        </div>

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

          <div class="card-body p-3">
            <div class="row">
              <div class="col-md-6 mb-3">
                <label class="form-label">First name :</label>
                <input
                  class="form-control border border-2 p-2"
                  name="firstName"
                  type="text"
                  value="{{ old('firstName', $teacher->firstName) }}"
                >
                @error('firstName')
                  <p class='text-danger inputerror'>{{ $message }} </p>
                @enderror
              </div>

              <div class="col-md-6 mb-3">
                <label class="form-label">Last name :</label>
                <input
                  class="form-control border border-2 p-2"
                  name="lastName"
                  type="text"
                  value="{{ old('lastName', $teacher->lastName) }}"
                >
                @error('lastName')
                  <p class='text-danger inputerror'>{{ $message }} </p>
                @enderror
              </div>

              <div class="col-md-6 mb-3">
                <label class="form-label">Gender :</label>

                <div class="form-check">
                  <input
                    class="form-check-input"
                    id="gender_male"
                    name="gender"
                    type="radio"
                    value="male"
                    {{ old('gender', $teacher->gender) == 'male' ? 'checked' : '' }}
                  >
                  <label
                    class="form-check-label"
                    for="gender_male"
                  > Male
                  </label>

                  <input
                    class="form-check-input"
                    id="gender_female"
                    name="gender"
                    type="radio"
                    value="female"
                    {{ old('gender', $teacher->gender) == 'female' ? 'checked' : '' }}
                  >
                  <label
                    class="form-check-label"
                    for="gender_female"
                  > Female
                  </label>
                </div>

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

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

              <div class="col-md-6 mb-3">
                <label class="form-label">Email :</label>
                <input
                  class="form-control border border-2 p-2"
                  name="email"
                  type="email"
                  value="{{ old('email', $teacher->email) }}"
                  placeholder="e.g. teacher@school.com ... "
                  readonly
                />
                @error('email')
                  <p class='text-danger inputerror'>{{ $message }} </p>
                @enderror
              </div>

              <div class="col-md-6 mb-3">
                <label class="form-label">Reset password :</label>
                <input
                  class="form-control border border-2 p-2"
                  name="password"
                  type="password"
                  value="{{ old('password', '') }}"
                />
                @error('password')
                  <p class='text-danger inputerror'>{{ $message }} </p>
                @enderror
              </div>

              <div class="col-md-12 mb-3">
                <label for="floatingTextarea2">Contact :</label>
                <textarea
                  class="form-control border border-2 p-2"
                  id="floatingTextarea2"
                  name="contact"
                  placeholder="teacher contact address"
                  rows="4"
                  cols="50"
                >{{ old('contact', $teacher->contact) }}</textarea>

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

              <div class="col-md-12 mb-3">
                <label for="floatingTextarea2">Skills :</label>
                <textarea
                  class="form-control border border-2 p-2"
                  id="floatingTextarea2"
                  name="skills"
                  placeholder="teacher skill set"
                  rows="4"
                  cols="50"
                >{{ old('skills', $teacher->skills) }}</textarea>

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

              <div class="col-md-6 mb-3">
                <label class="form-label">
                  Subjects
                </label>

                @foreach ($schedules as $schedule)
                  <div class="form-check">
                    <input
                      class="form-check-input"
                      id="flexCheckDefault"
                      name="schedules.schedule_id_{{ $schedule->id }}"
                      type="checkbox"
                      {{ in_array($schedule->id, $teacher_selected_subject_id) ? 'checked' : '' }}
                    />

                    @if (count($schedule->subjects) > 0)
                      <label
                        class="form-check-label"
                        for="flexCheckDefault"
                      >
                        <b>{{ $schedule->subjects[0]->subjectTitle }}</b>
                        (course duration: {{ $schedule->startTime }} ~
                        {{ $schedule->endTime }})
                      </label>
                    @else
                      <label
                        class="form-check-label"
                        for="flexCheckDefault"
                      >
                        <b>{{ 'no subject assigned' }}</b>
                        (course duration: {{ $schedule->startTime }} ~
                        {{ $schedule->endTime }})
                      </label>
                    @endif
                  </div>
                @endforeach

                @error('subject')
                  <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="/teachers"
            >
              Cancel
            </a>
          </div>
        </div>
      </form>
    </div>

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

</x-layout>

<script>
  function clearAvatarOnClick(event) {
    var avatarInput = document.getElementById('avatar');
    avatarInput.value = null

    showNoAvatarBox();
    hidePreviewAvatarBox();
    hideClearAvatarButton();
    avatarActionClear();

    try {
      hideOriginalAvatarBox();

    } catch (error) {
      console.log('original avatar may not exist, skipping');
    }

  }

  function previewImage(event) {
    var input = event.target;
    var reader = new FileReader();
    reader.onload = function() {
      var img = document.getElementById("preview-avatar");
      img.src = reader.result;
      img.style.display = "block";
    };
    reader.readAsDataURL(input.files[0]);
    avatarActionUpdate();

    try {
      hideOriginalAvatarBox();
    } catch (error) {
      console.log('original-avatar may not exist, skipping')
    }

    hideNoAvatarBox()
    showClearAvatarButton()
  }

  window.addEventListener('DOMContentLoaded', () => {
    avatarActionNoChange();
  });

  @if ($teacher->avatar)
    window.addEventListener('DOMContentLoaded', () => {
      showClearAvatarButton();
    });
  @else
    // no avatar on window refresh
    window.addEventListener('DOMContentLoaded', () => {
      showNoAvatarBox()
      hideClearAvatarButton();
    });
  @endif
</script>
