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

{% block title %}Aadhaar Number Authentication{% endblock %}

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

	<form action="{{ path('abha_num_generate_otp') }}" method="post" id="frmAadharNumber" class="kt-form">
    <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 Number Authentication</h3>
          </div>

          <div class="kt-portlet__head-toolbar">
            <div class="kt-portlet__head-wrapper">
              <a href="{{ path('abha_address_num_verification') }}" class="btn btn-clean btn-icon-sm mr-2"><i class="la la-long-arrow-left"></i>Back</a>
              <button type="reset" class="btn btn-secondary btn-bold mr-2">Reset</button>
              <button type="submit" class="btn btn-primary btn-bold g-recaptcha" data-sitekey="{{ gg_recaptcha_site_key }}">Next</button>
            </div>
          </div>
        </div>

        <div class="kt-portlet__body">
          {% include 'parts/flash.html.twig' %}

					<div class="form-group row">
            <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}" />
            <input type="hidden" name="type" value="{{ type }}" />
            <input type="hidden" name="auth_mode" value="auth_viaaadhaar" />
          
          </div>
          <div class="form-group   selectbutton">
          
            <div class="form-group">
              <label for="maskedAadhaarInput" class="font-weight-bold required">Aadhaar Number</label>
              <div class="position-relative">
                <!-- Display input -->
                <input
                  type="text"
                  id="maskedAadhaarInput"
                  class="form-control"
                  maxlength="12"
                  placeholder="Enter Aadhaar Number"
                />
                <!-- Hidden actual value -->
                <input
                  type="hidden"
                  id="aadharNumberInput"
                  name="aadharcard_number"
                  value=""
                />
                <!-- Toggle button -->
                <i
                  class="fa fa-eye"
                  id="toggleButton"
                  style="position: absolute; right: 10px; top: 10px; cursor: pointer;"
                  title="Show Aadhaar"
                ></i>
              </div>
            </div>
            
        </div>
      </div>
    </div>
  </form>
{% endblock %}

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

	<script src="https://www.google.com/recaptcha/api.js?render={{ gg_recaptcha_site_key }}" async defer></script>
	<script src="{{ asset('assets/js/jquery.validate.min.js') }}"></script>

	<script>
		$('.g-recaptcha').click(function (e) {
			e.preventDefault();

			grecaptcha.ready(function () {
				grecaptcha.execute('{{gg_recaptcha_site_key}}', { action: 'submit' }).then(function (token) {
					$('#frmAadharNumber').submit();
				});
			});
		});

    $(document).ready(function () {
  let isMasked = true; // State to track if the Aadhaar number is masked

  // Function to mask all but the last 4 digits
  function maskAadhaar(value) {
    return value.replace(/.(?=.{4})/g, '*');
  }

  // Event listener for input change
  $('#maskedAadhaarInput').on('input', function () {
    const inputValue = $(this).val().replace(/\D/g, ''); // Allow only digits
    if (inputValue.length > 12) {
      $(this).val(inputValue.substring(0, 12)); // Limit to 12 digits
    }
    $('#aadharNumberInput').val(inputValue); // Update hidden field

    // Automatically mask when the user enters 12 digits
    if (inputValue.length === 12 && isMasked) {
      $(this).val(maskAadhaar(inputValue)); // Mask value
      $('#toggleButton').show(); // Show the toggle button
    } else if (inputValue.length < 12) {
      $('#toggleButton').show(); // Hide the toggle button if incomplete
    }
  });

  // Toggle visibility between masked and unmasked
  $('#toggleButton').on('click', function () {
    const inputField = $('#maskedAadhaarInput');
    const hiddenField = $('#aadharNumberInput');
    const actualValue = hiddenField.val();

    if (isMasked) {
      // Show unmasked value
      inputField.val(actualValue);
      $(this).removeClass('fa-eye').addClass('fa-eye-slash').attr('title', 'Hide Aadhaar');
    } else {
      // Mask the value
      inputField.val(maskAadhaar(actualValue));
      $(this).removeClass('fa-eye-slash').addClass('fa-eye').attr('title', 'Show Aadhaar');
    }
    isMasked = !isMasked; // Toggle the state
  });

  // Initialize: Hide the toggle button and set default input state
  $('#toggleButton').show(); // Hide button when there's no input
});

	</script>
  <script src="https://www.google.com/recaptcha/api.js?render={{gg_recaptcha_site_key}}" async defer></script>
	<script>
		jQuery(document).ready(function () {
			jQuery('.g-recaptcha').click(function (e) {
				e.preventDefault();
				grecaptcha.ready(function () {
					grecaptcha.execute('{{gg_recaptcha_site_key}}', { action: 'submit' }).then(function (token) {
						jQuery('#frmForgotten').submit();
						jQuery('.kt-login__btn-primary').attr("disabled",true);
					});
				});
			});
		});
	</script>
{% endblock %}