<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 max-height-vh-100 h-100 bg-gray-100">

    <!-- Navbar -->
    <x-navbars.navs.auth
      titlePage="Create 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.store') }}"
        method="POST"
        enctype="multipart/form-data"
      >
        @csrf

        <div class="row gx-4 mb-2">
          <div class="col-auto">
            <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: block;
                                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>

            <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>

          <div class="col-auto my-auto">
            <div class="h-100">
              <h5 class="mb-1">
                {{ 'New teacher' }}
              </h5>
              <p class="font-weight-normal mb-0 text-sm">
                {{ 'Create a new teacher' }}
              </p>
            </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">New 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', '') }}"
                  placeholder="e.g. john"
                >
                @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', '') }}"
                  placeholder="e.g. ho"
                >
                @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', 'male') == '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', 'male') == '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 form-control border border-2 p-2"
                  id="dateOfBirth"
                  name="dateOfBirth"
                  type="text"
                  value="{{ old('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', '') }}"
                  placeholder="e.g. teacher@school.com ... "
                  required
                />
                @error('email')
                  <p class='text-danger inputerror'>{{ $message }} </p>
                @enderror
              </div>

              <div class="col-md-6 mb-3">
                <label class="form-label">Password :</label>
                <input
                  class="form-control border border-2 p-2"
                  name="password"
                  type="password"
                  value="{{ old('password', '') }}"
                  required
                />
                @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', '') }}</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', '') }}</textarea>

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

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

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

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

</x-layout>

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

<script>
  $(document).ready(function() {
    $('#dateOfBirth').datepicker({
      format: 'yyyy-mm-dd',
      autoclose: true,
      todayHighlight: true
    });


    $('.subject_id').select2({
      placeholder: 'Select subject',
      maximumSelectionLength: 10,
      ajax: {
        url: '{{ route('getSubjectsJson') }}',
        data: function(params) {
          var query = {
            q: params.term
          };
          return query;
        },
        processResults: function(data, params) {
          return {
            results: data.map(x => ({
              id: x.id,
              text: x.subjectTitle
            }))
          }
        }
      }
    });

  })

  function hideClearAvatarButton() {
    var clearAvatarButton = document.getElementById('clearAvatarButton');
    clearAvatarButton.style.display = "none"
  }

  function showClearAvatarButton() {
    var clearAvatarButton = document.getElementById('clearAvatarButton');
    clearAvatarButton.style.display = "block"
  }

  function avatarActionUpdate() {
    var avatarAction = document.getElementById('avatarAction');
    avatarAction.value = 'UPDATE_AVATAR';
  }

  function hideNoAvatarBox() {
    var noAvatarText = document.getElementById('noAvatarText');
    noAvatarText.style.display = 'none'
  }

  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()
  }

  function noAvatarOnClick(e) {
    var avatarInput = document.querySelector('#avatar');
    avatarInput.click()
  }
</script>
