@extends('layouts.template')
@section('content')
<form class="form w-100" id="" method="post" action="{{route('forgot.verify')}}">
	@csrf 
	<div class="mb-10 text-center">
		<!--begin::Title-->
		<h1 class="text-dark mb-3">Verify OTP</h1>
	</div>	
	<span style="font-size: 15px;">Kode OTP telah di kirim ke ********</span>
	<div class="fv-row mb-7" style="margin-top:10px">
		<label class="form-label fw-bolder text-dark fs-6">Masukkan Kode OTP</label>
		<input class="form-control form-control-lg form-control-solid" type="text" placeholder="" name="otp_code" autocomplete="off"required />
		<br>
		@foreach($get_user as $g)
		<input class="form-control form-control-lg form-control-solid" type="hidden" placeholder="" name="username" autocomplete="off" readonly value="{{$g}}" />
		@endforeach
	</div>
	<div class="text-center">
		<button type="submit" id="kt_sign_up_submit" class="btn btn-lg btn-primary">
			<span class="indicator-label">verify</span>
		</button>
		<br>
		<br>
		<div id="wrap" style="">
			Kirim Ulang Kode OTP(<span id="timer-otp"></span>)
		</div>
		
		<a href="{{route('forgot.index')}}" style="display:none;" id="send-ulang-otp">Request Kode OTP</a>
	</div>
</form>
@endsection
<script type="text/javascript">
	window.onload = function() {
        var timeleft = 180;
        var downloadTimer = setInterval(function () {
            document.getElementById("timer-otp").innerHTML = timeleft;
            timeleft -= 1;
            if (timeleft <= 0) {
                clearInterval(downloadTimer);
                var d = document.getElementById("wrap");
                var btn = document.getElementById("send-ulang-otp");
                btn.style.display = "block";
                d.style.display="none";
            }
        }, 1000);
    }
</script>