@extends('layouts.admin.login')
@section('page_css')
    @parent
    <style>
      .login__input-error{
          color:red;
      }
      .login_heading{
        font-weight:700;
        color: black;
      }
      .mcat_logo_backround
      {
        background: #274DB2;
      }
    </style>
@endsection 
@section('content')
    <div class="authentication-wrapper authentication-cover authentication-bg">
      <div class="authentication-inner row">
        <!-- /Left Text -->
        <div class="d-none d-lg-flex col-lg-7 p-0">
          <div class="mcat_logo_backround auth-cover-bg d-flex justify-content-center align-items-center">
            <img alt="MCAT" src="{{ asset('images/logo/logo-admin.png') }}" style="width: 300px;height: auto;">
          </div>
        </div>
        <!-- /Left Text -->

        <!-- Login -->
        <div class="d-flex col-12 col-lg-5 align-items-center p-sm-5 p-4">
          <div class="w-px-400 mx-auto">
            <form id="login-form">
              <h2 class="login_heading">Login</h2>
              <div class="mb-3">
                <label for="email" class="form-label">Username</label>
                <input
                  type="text"
                  class="form-control"
                  id="email"
                  name="email-username"
                  placeholder="Username"
                  autofocus
                />
              </div>
              <div class="mb-3 form-password-toggle">
                <div class="d-flex justify-content-between">
                  <label class="form-label" for="password">Password</label>
                </div>
                <div class="input-group input-group-merge">
                  <input
                    type="password"
                    id="password"
                    class="form-control"
                    name="password"
                    placeholder="Password"
                    aria-describedby="password"
                  />
                  <span id="password_show" class="input-group-text cursor-pointer" style="display: none;">
                    <i class="ti ti-eye-off"></i>
                  </span>
                  <span id="password_hide" class="input-group-text cursor-pointer">
                    <i class="ti ti-eye"></i>
                  </span>
                </div>
                <div id="error-password" class="login__input-error mt-2"></div>
              </div>
              {{--
              <div class="mb-3">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="remember-me" />
                  <label class="form-check-label" for="remember-me"> Remember Me </label>
                </div>
              </div>
              --}}
            </form>
            <button id="btn-login" class="btn btn-primary d-grid w-100">Login</button>
          </div>
        </div>
        <!-- /Login -->
      </div>
    </div>
    <script>
      $(document).ready(function(){
          //login code start
          async function login()
          {
              let url = $('#login-form').data('action');
              let email = $('#email').val();
              let password = $('#password').val();
              let rememberMe = $('#remember-me').val();
              $.ajax({
                  type: "post",
                  url:url,
                  data: {"_token": "{{ csrf_token() }}",'email':email,'password':password,'remember_me':rememberMe},
                  success:function(res){
                    console.log("this is success");
                    console.log(res)
                    if(res.status){
                        location.href = res.redirect_to;
                    }else{
                      $(`#error-password`).html(res.message);
                    }
                  },
                  error:function(err){
                    console.log("this is error");
                    console.log(err);
                    $(`#error-password`).html(err.message);
                  }
              }).done(function(){

              }).fail(function(){

              });
          }
          $('#login-form').on('keyup', function(e) {
                if (e.keyCode === 13) {
                    login();
                }
          });
          $('#btn-login').on('click', function(e) {
                login();
          });
          //login code end
          //pasword hide show start
          $('#password_show').click(function(){    
                $('#password_show').hide();
                $('#password_hide').show();
                $('#password').attr('type','text');
            });
            $('#password_hide').click(function(){    
                $('#password_show').show();
                $('#password_hide').hide();
                $('#password').attr('type','password');
          });
          //password hide show end
      }); 
    </script>
    <script>
    
    </script>
@endsection
@section('core_js')
  @parent
  <script>
    
  </script>
@endsection