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

{% block title %}ABHA Verification{% endblock %}

{% block content %}
<div class="kt-subheader kt-grid__item"></div>
<form action="{{ path('post_abha_link_case') }}" method="post" id="frmAadhaarNumber" 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">ABHA Verification</h3>
				</div>

				<div class="kt-portlet__head-toolbar">
					<div class="kt-portlet__head-wrapper">
						<a href="{{ app.request.uri }}" class="btn btn-secondary btn-bold mr-2">Reset</a>
						<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">
					<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
					<input type="hidden" name="type" value="{{ type }}">
					<input type="hidden" name="id" value="{{ case.id | nzo_encrypt  }}">
					<label class="col-md-3 col-form-label font-weight-bold">Do you know authentication mode?</label>
					<div class="col-lg-6 col-xl-4">
						<select class="form-control" name="auth_mode" id="auth_mode">
							<option value="auth_dont_know">Don't know</option>
						</select>
					</div>
					<div class="error"></div>
				</div>
				<div class="form-group row">
					<label class="col-3 col-form-label font-weight-bold">Abha address</label>
					<div class="col-lg-6 col-xl-4">
						<input type="text" name="abha_details" class="form-control" {{ readOnly }}
							value="{{ abhaDetail }}">
						{% if abha_env == 'sandbox' %}
						<span>e.g. "xyz{{abha_sbx}}"</span>
						{% else %}
						<span>e.g. "xyz{{abha_prod}}"</span>
						{% endif %}
					</div>
					<div class="error"></div>
				</div>
			</div>
		</div>
	</div>
</form>
<script src="{{ asset('assets/js/jquery.min.js') }}"></script>
<script>
	$(document).ready(function () {
		$('#frmAadharNumber').validate({ // initialize the plugin
			rules: {
				abha_detail: {
					required: true,
					minlength: 1,
					//maxlength: 12,
				},
				auth_mode: {
					required: true,
					minlength: 1,
					//maxlength: 12,
				},
			},
			messages: {
				abha_detail: {
					required: "Please enter abha address."
				},
				auth_mode: {
					required: "Please select mode."
				},
			}
		});
	});
</script>
{% endblock %}