@extends('includes.master')


@section('content')

<div class="wizard-main">
 <div id="particles-js"></div><br><br>
	<div class="container">
		  <div class="row">
				<div class="col-lg-6 login-sec  mx-auto">
					<div class="login-sec-bg">
						<h2 class="text-center">User Signup</h2>
				            <form action="{{ url('/verify-otp') }}" method="POST">
				              @csrf
				              <h3 class="text-center p-2">Verify OTP</h3>   
								<fieldset class="form-input">
                                  @include('includes.alerts')
                                                      {{-- $user->otp --}}
							     <input type="number" value="" name="otp" class="form-control required" id="otp" pattern="/^-?\d+\.?\d*$/" onKeyPress="if(this.value.length==4) return false;" style="text-align: center" placeholder="0000"/>

				                 <p class="text-danger" id="timeOut"> Wait 
								   <span id="timerMsg" class="text-danger text-center mt-2"></span>
                                   seconds to resend OTP
								 </p>

								  <span id="resendBtn" class="text-center mt-2" style="display:none;">
									  <a href="{{ url('resend-otp?aadharNumber='.$aadharNumber) }}" class="badge bg-danger text-center text-decoration-none text-light">Resend OTP</a>
								  </span>
				                  
				                  <input type="hidden" name="aadhaar_no" value="{{ $aadharNumber }}" >
				                 <button class="btn btn-warning mt-3 form-control" id="verifyBtn">VERIFY OTP</button>
				                 </fieldset>                
				            </form>
					</div>
				</div>			
			</div>
	  </div>
</div>


@endsection
@section('js')
<script src="{{ asset('wizard/js/jquery.min.js') }}"></script>


{{-- Script for resend otp timer --}}
<script type="text/javascript">
 var minutes = 0;
 var seconds = 60;

var countdownTimer = setInterval(function(){
  var formattedSeconds = seconds < 10 ? "0" + seconds : seconds;
  document.getElementById("timerMsg").innerHTML = "00:" + formattedSeconds;
  
  if (minutes === 0 && seconds === 0) {
    clearInterval(countdownTimer);
    document.getElementById("timeOut").style.display = "none";
    document.getElementById("resendBtn").style.display = "block";
    document.getElementById("verifyBtn").style.display = "none";

  } else if (seconds === 0) {
    minutes--;
    seconds = 59;
  } else {
    seconds--;
  }
}, 1000);
</script>


<script type="text/javascript">
var successMessage = $(".alert-success,.alert-danger");
if (successMessage.length) {
    successMessage.fadeIn();
    setTimeout(function () {
        successMessage.fadeOut();
    }, 3000); // 3000 milliseconds = 3 seconds
}
</script>
@endsection