<x-layout bodyClass="bg-gray-200">

  <main class="main-content mt-0">
    <div
      class="page-header align-items-start min-vh-100"
      style="background-image: url('/img/sign_in_bg.jpg');"
    >

      <span class="mask bg-gradient-dark opacity-6"></span>

      <div class="container mt-5">
        <div class="row signin-margin">
          <div class="col-lg-4 col-md-8 col-12 mx-auto">
            <div class="card z-index-0 fadeIn3 fadeInBottom">

              <div
                class="card-header position-relative mt-n4 z-index-2 mx-3 p-0">
                <div
                  class="bg-gradient-primary shadow-primary border-radius-lg py-3 pe-1"
                >
                  <h4
                    class="font-weight-bolder mb-0 mt-2 text-center text-white"
                  >
                    Sign in
                  </h4>
                </div>
              </div>

              @if ($show_login_hints)
                <div class="d-flex flex-column justify-content-center m-4">
                  <div class="d-flex justify-content-center">
                    <pre>john_ho@school.com / john_ho</pre>
                  </div>
                  <div class="d-flex justify-content-center">
                    <pre>amy_tsui@school.com / amy_tsui</pre>
                  </div>
                  <div class="d-flex justify-content-center">
                    <pre>david_chan@school.com / david_chan</pre>
                  </div>
                  <div class="d-flex justify-content-center">
                    <pre>debug@school.com / debug</pre>
                  </div>
                  <div class="d-flex justify-content-center">
                    <pre>to hide this, modify -> $show_login_hints</pre>
                  </div>
                </div>
              @endif

              <div class="card-body">
                <form
                  class="text-start"
                  role="form"
                  method="POST"
                  action="{{ route('login') }}"
                >
                  @csrf

                  <div class="input-group input-group-outline mt-3">
                    <label class="form-label">Email :</label>
                    <input
                      class="form-control"
                      name="email"
                      type="email"
                      value="{{ '' }}"
                    >
                  </div>
                  @error('email')
                    <p class='text-danger inputerror'>{{ $message }} </p>
                  @enderror

                  <div class="input-group input-group-outline mt-3">
                    <label class="form-label">Password :</label>
                    <input
                      class="form-control"
                      name="password"
                      type="password"
                      value="{{ '' }}"
                    >
                  </div>
                  @error('password')
                    <p class='text-danger inputerror'>{{ $message }} </p>
                  @enderror

                  <div
                    class="form-check form-switch d-flex align-items-center my-3"
                  >
                    <input
                      class="form-check-input"
                      id="rememberMe"
                      type="checkbox"
                    >
                    <label
                      class="form-check-label mb-0 ms-2"
                      for="rememberMe"
                    >Remember me</label>
                  </div>

                  <div class="text-center">
                    <button
                      class="btn bg-gradient-primary w-100 my-4 mb-2"
                      type="submit"
                    >Sign
                      in</button>
                  </div>

                  <p class="mt-4 text-center text-sm">
                    Don't have an account?
                    <a
                      class="text-primary text-gradient font-weight-bold ps-1"
                      href="{{ route('register') }}"
                    >Sign up</a>
                  </p>

                  <p class="text-center text-sm">
                    Forgot your password? Reset your password
                    <a
                      class="text-primary text-gradient font-weight-bold ps-1"
                      href="{{ route('verify') }}"
                    >here</a>
                  </p>
                </form>
              </div>

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

      <x-footers.guest></x-footers.guest>
    </div>
  </main>

  @push('js')
    <script src="{{ asset('assets') }}/js/jquery.min.js"></script>
    <script>
      $(function() {

        var text_val = $(".input-group input").val();
        if (text_val === "") {
          $(".input-group").removeClass('is-filled');
        } else {
          $(".input-group").addClass('is-filled');
        }
      });
    </script>
  @endpush

</x-layout>
