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

{% block title %} OTP Verification{% endblock %}

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

  <form action="{{ path('verify_abhanumber_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"> OTP 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="{{ txn_id }}" />

            <input type="hidden" name="auth_mode" class="auth_mode" value="{{ authMode }}" />
            <input type="hidden" name="mobileNumber" class="mobileNumber" value="{{ mobileNumber }}" />
            <input type="hidden" name="abhaNumber" class="abhaNumber" value="{{ abhaNumber }}" />
            <input type="hidden" name="aadharcardNumber" class="aadharcardNumber" value="{{ aadharcardNumber }}" />
            
            <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" />
              <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));


		$('#frmVerifyOtp').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 txn_id = $('.txn_id').val(),
				authMode = $('.auth_mode').val(),
				mobileNumber = $('.mobileNumber').val(),
				abhaNumber = $('.abhaNumber').val();
				aadharcardNumber = $('.aadharcardNumber').val();

			$.ajax({
				method: 'POST',
				url: "{{ path('abhanumber_resend_otp') }}",
				data: { txn_id: txn_id, authMode: authMode, abhaNumber: abhaNumber,aadharcardNumber: aadharcardNumber, mobileNumber: mobileNumber },
				success: function (response) {
					$('.txn_id').val(response.txn_id);
					$('.auth_mode').val(response.authMode);
					$('.abhaNumber').val(response.abhaNumber);
					$('.aadharcardNumber').val(response.aadharcardNumber);
					$('.mobileNumber').val(response.mobileNumber);

					$('.aadhaar_number_msg')
						.stop(true, true)
						.text('OTP Resent successfully')
						.css('color', response.abhaNumber === 'success' ? 'red' : 'green')
						.show(250);
				}
			});
		});

		
  </script>
{% endblock %}