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

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

{% block content %}
<div class="kt-subheader kt-grid__item"></div>
<form action="{{ path('abha_exists') }}" 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</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>
						<a href="{{ app.request.uri }}" class="btn btn-secondary btn-bold mr-2">Reset</a>
						<button type="submit" class="btn btn-primary btn-bold" id="submitBtn">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">ABHA Address</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="step" value="{{ step }}">
					<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"
							oninput="this.value = this.value.replace(/[^0-9a-zA-Z]/g, '').replace(/(\..*)\./g, '$1')"
							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">Search</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</form>
{% endblock %}
{% block scripts %}
{{ parent() }}

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

	$('#is_exists_health_id').on('click', function () {
		var health_id = $('#health_id').val();
		if (health_id.length <= 6) {
			swal.fire("", "Please enter minimum 6 characters for searching!", "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('Please enter minimum 6 characters for searching.').css('color', 'red');
				} else if (response == 'error') {
					$('.is_exists').text('Something want wrong please try again.').css('color', 'red');
				} else if (response == false) {
					$('.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('');
		});
	});
</script>
{% endblock %}