@extends('layouts.iconbar-auth')
@section('content')
<style>
.capslockMessage{
  color:red;
}
.page-content {
    top: 100px;
    position: relative;
}
.form-material .form-control:-webkit-autofill~.floating-label {
  top: -1.5rem;
  font-size: .8rem;
}
</style>

<div class="page-content vertical-align-middle">
  <div class="brand">
    <img class="brand-img" src="{{ url('logo.jpg') }}" alt="...">
    <!-- <h2 class="brand-text">TC</h2> -->
  </div>
  <p>Sign into your account</p>
  <form method="post" action="{{ url('login') }}" autocomplete="off">
    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <div class="form-group form-material floating" data-plugin="formMaterial">
      <input type="email" class="form-control empty {{ $errors->has('email')?'is-invalid':'' }}" id="inputEmail" name="email" value="{{ old('email') }}">
      <label class="floating-label" for="inputEmail">Email</label>
      @if($errors->has('email'))
      <p class="invalid-feedback text-left">
        {{ $errors->first('email') }}
      </p>
      @endif
    </div>
    <div class="form-group form-material floating passwordContainer" data-message="Your capslock is on" data-plugin="formMaterial">
      <input type="password" class="form-control empty detectCapslocks {{ $errors->has('password')?'is-invalid':'' }}" id="inputPassword" name="password">
      <label class="floating-label" for="inputPassword">Password</label>
      @if($errors->has('password'))
      <p class="invalid-feedback text-left">
        {{ $errors->first('password') }}
      </p>
      @endif
    </div>

    <button type="submit" class="btn btn-primary btn-block">Sign in</button>
  </form>

  <footer class="page-copyright page-copyright-inverse">
    <p>© {{ date('Y') }}. All RIGHT RESERVED.</p>
  </footer>
</div>
@endsection

@push('scripts')
<script>
  jQuery(document).ready(function(){
    /**
      * Display a warning on capslock
      */
      $('.detectCapslocks').keypress(function(e) {
        $('.capslockMessage').remove();
            // Detect current character & shift key
            var character = e.keyCode ? e.keyCode : e.which;
            var sftKey = e.shiftKey ? e.shiftKey : ((character == 16) ? true : false);
            // Is caps lock on?
            isCapsLock = (((character >= 65 && character <= 90) && !sftKey) || ((character >= 97 && character <= 122) && sftKey));
            // Display warning and set css
            if (isCapsLock == true) {
              var parent = $(this).parents('.passwordContainer');
              $('.capslockMessage').remove();
              parent.append('<div class="capslockMessage">' + parent.data('message') + '</div>');
            }
          });
    });
  </script>
  @endpush