@extends('layouts.admin.login')
@section('content')
<div class="d-flex align-items-center justify-content-center bg-br-primary ht-100v">
      <div class="login-wrapper wd-300 wd-xs-350 pd-25 pd-xs-40 bg-white rounded shadow-base">
        <div class="signin-logo tx-center tx-28 tx-bold tx-inverse">
        	<span class="tx-normal"></span> Login <span class="tx-normal"></span>
        </div>
        <div class="tx-center mg-b-60">Welcome To GPC LR Admin Portal</div>
		   <p><h6 id="time"></h6></p>
		   <div id="resendOTP"></div>
		   <form role="form" method="POST" action="/gpclrmainportal/checkotp" id="otpform">
			{{ csrf_field() }}
			<div class="form-group {{ $errors->has('email') ? 'has-error' : '' }}">
			<input id="otp" type="text" class="form-control" name="otp" placeholder="Enter the code you received here." required autofocus>
			<input type ="hidden" name ="email" value="{{$email}}" id="emaillogin">
			<input type ="hidden" name ="password" id="passwordlogin" value="{{$password}}">
			@if ($errors->has('otp'))
			<span class="help-block">
				<strong>{{ $errors->first('otp') }}</strong>
			</span>
			@endif
			</div>
			<div class="form-group">
			<button class="btn btn-primary" type="submit">Send</button>
			</div>
			</form>

            <div id="resendotpform" style="display:none;">
				<form role="form" method="POST" action="resend-otp" >
				{{ csrf_field() }}
				<div class="form-group">
				<input type ="hidden" name ="password" id="passwordforotp">
				<input type="hidden" name="email" id="email">
				</div>
				<div class="form-group">
				<button class="btn btn-primary" type="submit">Resend OTP</button>
				</div>
				</form>
          </div>
		</div>
	</div><!-- login-wrapper -->
</div><!-- d-flex -->
@endsection
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    
<script>
	if ( window.history.replaceState ) {
        window.history.replaceState( null, null, window.location.href );
    }
	
	var counter = 120;
	var interval = setInterval(function(){
	 counter--;
	 var password = $('#passwordlogin').val();
	 var email = $('#emaillogin').val();
    if(counter <= 0){
     	  clearInterval(interval);
      	  $('#timer').html("<h3>Your one time password has expired</h3>");
		  $('#time').html("<h6>Your one time password has expired</h6>");  
		  $("#otpform").hide();
		  //$('#resendOTP').html("<a href='resend-otp'>Resend OTP</a>");  
		  $("#resendotpform").css("display","block");
		  $('#passwordforotp').val(password);
		  $('#email').val(email);
          return;
		}else{
	    $('#time').text('Time Remaining  : '+counter+' sec');
		}
    },1000);
</script>