@extends('layouts.authentic')

@section('content')
<!-- Start main-content -->
<div class="main-content">
  <!-- Section: home -->
  <section id="home" class="divider parallax layer-overlay overlay-dark-9" data-bg-img="{{ asset('assets/images/bg/bg1.jpg')}}" style="background-image: url(&quot;images/bg/bg1.jpg&quot;); background-position: 50% 0px;">
    <div class="display-table">
      <div class="display-table-cell">
        <div class="container">
          <div class="row">
            <div class="col-md-6 col-md-push-3">
              <div class="text-center mb-30"><h2><a href="{{ route('main')}}" class=""><img alt="" title="The Educators Academy" src="{{ asset('assets/images/logo.png')}}" width="150px"> The Educators Academy</a></h2></div>
              <div class="widget bg-lightest border-1px p-30">
                <div class="widget border-1px p-30">
                  <h3 class="widget-title mb-20 text-center">Welcome to the Portal</h3>

                    <form method="POST" action="{{ route('login') }}" id="" name="quick_contact_form" class="quick-contact-form" novalidate="novalidate">
                        @csrf
                    <div class="form-group">
                      <input type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus placeholder="Enter Email"/>

                      @error('email')
                          <span class="invalid-feedback text-danger" role="alert">
                              <strong>{{ $message }}</strong>
                          </span>
                      @enderror
                    </div>
                    <div class="form-group">
                       <input type="password"  class="form-control  @error('password') is-invalid @enderror" name="password" required autocomplete="current-password"  placeholder="Enter Password"/>
                       @error('password')
                           <span class="invalid-feedback text-danger" role="alert">
                               <strong>{{ $message }}</strong>
                           </span>
                       @enderror
                    </div>
                    <div class="form-group text-center">
                      <!-- <input name="form_botcheck" class="form-control" type="hidden" value=""> -->
                      <button type="submit" class="btn btn-danger text-center  btn-lg mt-0" data-loading-text="Please wait...">Login to Your Account</button>

                    </div>
                  </form>


                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>
<!-- end main-content -->
@endsection

@section('scripts')

<!-- Quick Contact Form Validation-->
<script type="text/javascript">
  $("#quick_contact_form").validate({
    submitHandler: function(form) {
      var form_btn = $(form).find('button[type="submit"]');
      var form_result_div = '#form-result';
      $(form_result_div).remove();
      form_btn.before('<div id="form-result" class="alert alert-success" role="alert" style="display: none;"></div>');
      var form_btn_old_msg = form_btn.html();
      form_btn.html(form_btn.prop('disabled', true).data("loading-text"));
      $(form).ajaxSubmit({
        dataType:  'json',
        success: function(data) {
          if( data.status == 'true' ) {
            $(form).find('.form-control').val('');
          }
          form_btn.prop('disabled', false).html(form_btn_old_msg);
          $(form_result_div).html(data.message).fadeIn('slow');
          setTimeout(function(){ $(form_result_div).fadeOut('slow') }, 6000);
        }
      });
    }
  });
</script>
@endsection
