{% extends 'base.html.twig' %}

{% block title %}Mobile Verification{% endblock %}

{% block content %}
<div class="kt-subheader kt-grid__item"></div>
<form action="{{ path('verify_mobile_otp') }}" method="post" class="kt-form" id="frmMobileOTP">
	<div class="kt-container kt-grid__item kt-grid__item--fluid">
		<div class="kt-portlet kt-portlet--mobile">
			<div class="kt-portlet__head kt-portlet__head--lg">
				<div class="kt-portlet__head-label">
					<h3 class="kt-portlet__head-title">Mobile Verification</h3>
				</div>

				<div class="kt-portlet__head-toolbar">
					<div class="kt-portlet__head-wrapper">
						<a href="{{ path('abha_card') }}" class="btn btn-clean btn-icon-sm mr-2"><i
								class="la la-long-arrow-left"></i>Back</a>
						<a href="{{ app.request.uri }}" class="btn btn-secondary btn-bold mr-2">Reset</a>
						<button type="submit" class="btn btn-primary btn-bold">Next</button>
					</div>
				</div>
			</div>

			<div class="kt-portlet__body">
				{% include 'parts/flash.html.twig' %}
				<div class="form-group row">
					<label class="col-2 col-form-label font-weight-bold">OTP</label>
					<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
					<input type="hidden" name="txn_id" class="txn_id" value="{{ txnId }}">
					<input type="hidden" name="mobile" class="mobile" value="{{ mobile }}">
					<input type="hidden" name="type" value="{{ type }}">
					<div class="col-lg-6 col-xl-4">
						<input type="text" class="form-control" name="otp" id="otp"
							oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1')"
							maxlength="6">
						<span class="aadhaar_number_msg"></span>
					</div>
					<div class="">
						<span id="timer" class="btn btn-default timer"></span>
						<button disabled="disabled" class="btn btn-link resendOTP">Resend OTP</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</form>
<script src="{{ asset('assets/js/jquery.min.js') }}"></script>
<script>
	$(document).ready(function () {
		timer(90);
		let timerOn = false;
		var count = 0;
		$('#frmMobileOTP').validate({ // initialize the plugin
			rules: {
				otp: {
					required: true,
					minlength: 6,
					maxlength: 6,
					digits: true
				},
			},
			messages: {
				otp: {
					required: "Please enter otp.",
					digits: "Please enter only digits.",
				},
			}
		});
		$('#otp').on('blur', function () {
			if ($(this).val() != '') {
				$('button[type=submit]').attr('disabled', false);
			} else {
				$('button[type=submit]').attr('disabled', false);
			}
		});
		$('.resendOTP').on('click', function () {
			count += 1;
			if (count == 2) {
				$(this).hide();
			}
			$(this).attr('disabled', true);
			timer(90); // TODO when click on resent otp btn that start the timer
			var txnId = $('.txn_id').val();
			var mobile = $('.mobile').val();
			$.ajax({
				method: "POST",
				url: "{{ path('mobileOTP') }}",
				data: { 'txnId': txnId, 'mobile': mobile },
				success: function (response) {
					setTimeout(function () {
						if (response == 'invalid') {
							$('.aadhaar_number_msg').text('Invalid OTP.').css('color', 'red');
						} else if (response == 'success') {
							$('.aadhaar_number_msg').text('OTP sent successfully.').css('color', 'green');
						} else if (response == 'bad_request') {
							$('.aadhaar_number_msg').text('Bad request, check request before retrying').css('color', 'red');
						} else if (response == 'no_found') {
							$('.aadhaar_number_msg').text('Not found').css('color', 'red');
						}
					}, 2500);
				}
			});
		});
	});
	let timerOn = true;
	function timer(remaining) {
		var m = Math.floor(remaining / 60);
		var s = remaining % 60;

		m = m < 10 ? '0' + m : m;
		s = s < 10 ? '0' + s : s;
		document.getElementById('timer').innerHTML = m + ':' + s;
		remaining -= 1;

		if (remaining >= 0 && timerOn) {
			setTimeout(function () {
				timer(remaining);
			}, 1000);
			return;
		}

		if (!timerOn) {
			// Do validate stuff here
			return true;
		}

		$('.resendOTP').attr('disabled', false);
	}
</script>
{% endblock %}