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

{% block title %}ABHA Mobile Authentication{% endblock %}

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

  <form action="{{ path('generate_mobile_otp') }}" method="POST" class="kt-form" id="mobile-auth-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">ABHA Mobile Authentication</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"> Mobile Number</label>
            <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}" />
            <input type="hidden" name="txn_id" value="{{ txnId }}" />
            <input type="hidden" name="type" value="{{ type }}" />
            <input type="hidden" name="tokens" value="{{ tokens }}" />
            <input type="hidden" name="mobile_number" value="{{ mobile_number }}" />

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

           
          </div>
        </div>
      </div>
    </div>
  </form>
{% endblock %}

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

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

  <script>
    $('#mobile-auth-form').validate({
      rules: {
        mobile_number: {
          required: true,
          minlength: 10,
          maxlength: 10,
          digits: true
        }
      },
      messages: {
        mobile_number: {
          required: 'Please enter mobile number.',
          digits: 'Please enter digits only.'
        }
      }
    })
  </script>
{% endblock %}