{% 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">
							<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" class="type" value="{{ type }}">
						<input type="hidden" name="tokens" class="tokens" value="{{ tokens }}">
						<input type="hidden" name="mobile_number" class="mobile_number" value="{{ mobile_number }}" />

						<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 text-nowrap">{{ message }}</span>
						</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>
			</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().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));


		$('#frmMobileOTP').validate({
			rules: {
				otp: {
					required: true,
					minlength: 6,
					maxlength: 6,
					digits: true
				},
			},
			messages: {
				otp: {
					required: "Please enter OTP.",
					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(), mobile_number = $('.mobile_number').val();

			$.ajax({
				method: "POST",
				url: "{{ path('mobileOTP') }}",
				data: { 'txnId': txnId, 'mobile_number': mobile_number },
				success: function (response) {
			      console.log(response)
					$('.txn_id').val(response.txnId)
					$('.aadhaar_number_msg')
						.stop(true, true)
						.text('OTP Resent successfully.')
						.css('color', response.txnId === 'success' ? 'red' : 'green')
						.show(250);
				}
			});
		});
	</script>
{% endblock %}