<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="auth/fonts/icomoon/style.css">

    <link rel="stylesheet" href="auth/css/owl.carousel.min.css">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="auth/css/bootstrap.min.css">
    
    <!-- Style -->
    <link rel="stylesheet" href="auth/css/style.css">

    <title>STJAK College Login</title>
  </head>
  <body>
  

  <div class="d-md-flex half">
    <div class="bg" style="background-image: url('auth/images/bg.jpg');"></div>
    <div class="contents">

      <div class="container">
        <div class="row align-items-center justify-content-center">
          <div class="col-md-12">
            <div class="form-block mx-auto">
              <div class="text-center mb-5">
                    <div class="text-center">
						        <img src="logo/StJohnCollegeLogo-03.png" alt="Logo" class="img-fluid" width="132" height="132" data-tilt />
					  </div>
                    <br>
              <h3>Login to <strong>Training Portal</strong></h3>
              @if(Session::get('error'))
               <div class="alert alert-danger">
                  {{ Session::get('error') }}
               </div>
              @endif

              @if(Session::has('success'))
							<div class="alert alert-success">{{Session::get('success')}}</div>
						@endif

						@if($errors->any())
							<div class="alert alert-danger">
								<ul>
									@foreach($errors->all() as $error)
										<li>{{ $error }}</li>
									@endforeach
								</ul>
							</div>
						@endif
              
              </div>
              <form action="{{ route('login') }}" method="post">
                @csrf
                <div class="form-group first">
                  <label for="username">Username/Email</label>
                  <input type="text" class="form-control" placeholder="Key in your registered email" name="email" value="{{ old('email') }}" id="username" required>
                             @error('email')
                                    <span class="invalid-feedback" role="alert">
                                         <strong>{{ $message }}</strong>
                                    </span>
                             @enderror
                </div>
                <div class="form-group last mb-3">
                  <label for="password">Password</label>
                  <input type="password" class="form-control" name="password" placeholder="Enter your valid password" id="password" required>
                          @error('password')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                          @enderror
                </div>
                
                <div class="d-sm-flex mb-5 align-items-center">
                  <label class="control control--checkbox mb-3 mb-sm-0"><span class="caption">Remember me</span>
                    <input type="checkbox" checked="checked"/>
                    <div class="control__indicator"></div>
                  </label>
                  <span class="ml-auto"><a href="{{ route('password.request') }}" class="forgot-pass">Forgot Password</a></span> 
                </div>      

                <input type="submit" value="Log In" class="btn btn-block btn-success">

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

    <script src="auth/js/jquery-3.3.1.min.js"></script>
    <script src="auth/js/popper.min.js"></script>
    <script src="auth/js/bootstrap.min.js"></script>
    <script src="auth/js/main.js"></script>
    <script type="text/javascript" src="auth/js/vanilla-tilt.js"></script>
  </body>
</html>