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

{% block title %}ABHA Address Suggestion{% endblock %}

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

  <form action="{{ path('abha_addressverify_new') }}" method="post" class="kt-form" id="frmAadharNumber" autocomplete="off">
    <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">ABHA Address Suggestion</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>
              <button type="reset" class="btn btn-secondary btn-bold mr-2">Reset</button>
              <button type="submit" class="btn btn-primary btn-bold " id="submitBtn" >Generate Abha Address</button>
            </div>
          </div>
        </div>

        <div class="kt-portlet__body">
          {% include 'parts/flash.html.twig' %}
           <div>
            <strong>Please follow below rules for choosing your ABHA Address:</strong>
              <ol>
                
             <li>Minimum length - 8 characters</li>  
             <li>Maximum length - 18 characters</li> 
             <li>Special characters allowed - 1 dot (.) and/or 1 underscore (_)</li> 
             <li>Special character dot and underscore should be in between. Special characters cannot be in the beginning or at the end</li> 
             <li>Alphanumeric - only numbers, only letters or any combination of numbers and letters is allowed.</li>  
              </ol>
           </div>
					<div class="form-group row">

            <label class="col-2 col-form-label font-weight-bold required">ABHA Address Suggestions</label>
            <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}" />
            <input type="hidden" name="txn_id" value="{{ txnId }}" />
            <input type="hidden" name="tokens" value="{{ tokens }}" />


            <div class="input-group col-lg-6 col-xl-4">
              <input id="health_id" placeholder="Search Health Id" class="form-control" type="text"
                name="health_id" 
                
                autocomplete="off">
                
              <div class="input-group-append">
                {% if abha_env == 'sandbox' %}
                <span class="input-group-text" id="basic-addon2">{{abha_sbx}}</span>
                {% else %}
                <span class="input-group-text" id="basic-addon2">{{abha_prod}}</span>
                {% endif %}
              </div>
            </div>
            <span class="is_exists" style="position: absolute;padding-top: 40px;padding-left: 229px;"></span>
            <div class="col-md-2">
              <a href="javascript:void(0);" id="is_exists_health_id" class="btn btn-primary btn-bold"
                role="button">Abha Address Suggestion</a>
            </div>
            <br>
            <br>
            <div class="kt-radio-inline" style="padding-bottom: 20px;">
              <label for="">You Can Choose : </label>
              {% for abha_address in abhaAddressList|slice(0, 5) %}
                <label>{{ abha_address }} </label> &nbsp;&nbsp;&nbsp;&nbsp;
              {% endfor %}
            </div>
            
          </div>
        </div>
      </div>
    </div>
  </form>
{% endblock %}

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

  <script>
    
    $('.kt-radio-inline label').on('click', function () {
  const selectedValue = $(this).text().trim();
  $('#health_id').val(selectedValue);
});

// Example using jQuery UI Autocomplete
// $('#health_id').autocomplete({
//   source: {{ abhaAddressList|json_encode|raw }},
//   minLength: 2
// });

$('#health_id').on('keypress', function (e) {
  const regex = /^[a-zA-Z0-9._]+$/;
  if (!regex.test(e.key)) {
    e.preventDefault();
  }
});

let debounceTimer;
$('#is_exists_health_id').on('click', function () {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    // Existing AJAX call here
  }, 300);
});


  $(document).ready(function () {
    $("#submitBtn").prop("disabled", true);

    $('#is_exists_health_id').on('click', function () {
      var health_id = $('#health_id').val();

      // Client-side validation for ABHA Address
      if (!validateHealthId(health_id)) {
        swal.fire("", "Invalid ABHA Address. Please follow the rules.", "error");
        return false;
      }

      $("#is_exists_health_id").prop("disabled", true);
      $.ajax({
        method: "POST",
        url: "{{ path('is_abha_exists') }}",
        data: { 'health_id': health_id },
        beforeSend: function () {
          Swal.fire({
            title: 'Please Wait!',
            allowOutsideClick: false,
            onBeforeOpen: () => {
              Swal.showLoading()
            },
          });
        },
        complete: function () {
          swal.close();
        },
        success: function (response) {

          if (response == 'invalid') {
            $('.is_exists').text('Invalid ABHA Address.').css('color', 'red');
          } else if (response == 'error') {
            $('.is_exists').text('Something went wrong, please try again.').css('color', 'red');
          } else if (response == 'valid') {
            $('.is_exists').text('Health id is available').css('color', 'green');
            $("#submitBtn").prop("disabled", false);
          } else {
            $('.is_exists').text('Health id is not available').css('color', 'red');
          }
          $("#is_exists_health_id").prop("disabled", false);
        }
      });
    });

    $('.reset').on('click', function () {
      $('.is_exists').text('');
      $('#health_id').val('');
    });

    function validateHealthId(health_id) {
      // const regex = /^[a-zA-Z0-9]+([._][a-zA-Z0-9]+)?$/; // Regex for alphanumeric with 1 optional . or _ in between
      const minLength = 8;
      const maxLength = 18;

      // Check length
      if (health_id.length < minLength || health_id.length > maxLength) {
        return false;
      }

      // Check for valid format
      // if (!regex.test(health_id)) {
      //   return false;
      // }

      // Check no special characters at the start or end
      if (health_id.startsWith('.') || health_id.startsWith('_') ||
          health_id.endsWith('.') || health_id.endsWith('_')) {
        return false;
      }

      return true;
    }
  });

  
    </script>
{% endblock %}