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

{% block title %}Aadhaar Verification{% endblock %}

{% block content %}
	<div class="kt-subheader kt-grid__item"></div>

	<form action="{{ path('verify_otp') }}" autocomplete="off" method="post" class="kt-form" id="frmVerifyOtp">
		<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">Aadhaar Verification</h3>
					</div>

					<div class="kt-portlet__head-toolbar">
						<div class="kt-portlet__head-wrapper">
							<button type="reset" class="btn btn-secondary btn-bold mr-2">Reset</button>
							<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 required">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="type" value="{{ type  ?: 'reg'}}" />
						<input type="hidden" name="message" value="{{ message }}" />
						<input type="hidden" name="aadharNumber" class="aadharNumber" value="{{ aadharNumber }}" />

						<div class="col-lg-6 col-xl-4">
							<input type="text" id="otp" class="form-control" name="otp" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1')" maxlength="6" />

						</div>

						<div>
							<input id="timer" name="timer" class="btn btn-default timer" value="{{ timer ? timer : '00:00'  }}">
							<button type="button" disabled="disabled" class="btn btn-link resendOTP">Resend OTP</button>
						</div>
					</div>

					<div class="form-group row">
						<label class="col-2 col-form-label font-weight-bold required">Mobile Number</label>

						<div class="col-lg-6">
							<input type="text" class="form-control" name="mobile_number" id="mobile_number" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1')" maxlength="10" />
							<span class="aadhaar_number_msg text-nowrap">{{ message }}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</form>
{% endblock %}

{% block scripts %}
	{{ parent() }}

	<script src="{{ asset('assets/js/jquery.validate.min.js') }}"></script>

	<script>
		// let timerOn = true, count = 0, timerVal = $('#timer').val();
		let timerOn = true, count = 0, timerVal = $('#timer').val().substr(3, 2);

		function timer(remaining) {
			const minutes = Math.floor(remaining / 60);
			const seconds = remaining % 60;

			const formattedMinutes = minutes.toString().padStart(2, '0');
			const formattedSeconds = seconds.toString().padStart(2, '0');

			$('#timer').val(`${formattedMinutes}:${formattedSeconds}`);

			remaining -= 1;

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

			if (!timerOn) {
				return;
			}

			$('.resendOTP').prop('disabled', false);
		}

		timer(timerVal == '00' ? 60 : parseInt(timerVal, 10));

		$('#frmVerifyOtp').validate({
			rules: {
				otp: {
					required: true,
					minlength: 6,
					maxlength: 6,
					digits: true
				},
				mobile_number: {
					required: true,
					minlength: 10,
					maxlength: 10,
					digits: true
				}
			},
			messages: {
				otp: {
					required: 'Please enter OTP.',
					digits: 'Please enter digits only.'
				},
				mobile_number: {
					required: 'Please enter mobile number.',
					digits: 'Please enter digits only.'
				}
			}
		});

		$('#otp').on('blur', function () {
			if ($(this).val()) {
				$('button[type=submit]').prop('disabled', false);
			} else {
				$('button[type=submit]').prop('disabled', true);
			}
		});

		$('.resendOTP').on('click', function () {
			count += 1;

			if (count == 2) {
				$(this).hide();
			}

			$(this).prop('disabled', true);

			timer(60);

			let txnId = $('.txn_id').val(), aadharNumber = $('.aadharNumber').val();

			$.ajax({
				method: 'POST',
				url: "{{ path('resend_otp') }}",
				data: { txnId: txnId, aadharNumber: aadharNumber },
				success: function (response) {
					$('.txn_id').val(response);

					$('.aadhaar_number_msg')
						.stop(true, true)
						.text('OTP Resent successfully')
						.css('color', response === 'success' ? 'red' : 'green')
						.show(250);
				}
			});
		});
	</script>
{% endblock %}