@extends('layouts.iconbar-auth')

@section('content')
<style>
.capslockMessage{
  color:red;
}
.form-material .form-control:-webkit-autofill~.floating-label {
  top: -1.5rem;
  font-size: .8rem;
}
</style>

<div class="page-content">
  <div class="page-brand-info">
    <!-- <p class="font-size-20">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua.</p> -->
  </div>

  <div class="page-login-main">
    <div class="brand hidden-md-up">
      <img class="brand-img" src="{{ url('iconbar/assets/images/logo-colored@2x.png') }}" alt="...">
      <h3 class="brand-text font-size-40">TC</h3>
    </div>
    <h3 class="font-size-24">Sign In</h3>
    <!-- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</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">
          {{ $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">
          {{ $errors->first('password') }}
        </p>
        @endif
      </div>

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

@push('scripts')
<script>
  jQuery(document).ready(function(){
        /**
         * Display a warning on capslock
         */
         $('.detectCapslocks').keypress(function(e) {
          console.log('g')
          $('.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