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

{% block title %}

{% if modes == 'DEMOGRAPHICS' %}
Demographic
{% elseif modes == 'AADHAAR_OTP' %}
Aadhaar OTP
{% else %}
Mobile OTP
{% endif %}

{% endblock %}

{% block content %}
<div class="kt-subheader kt-grid__item"></div>
<form action="{{ path('link_verify_otp') }}" autocomplete="off" method="post" class="kt-form" id="frmVerifyOtp">
	<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">
				{% if modes == 'DEMOGRAPHICS' %}
				<div class="kt-portlet__head-label">
					<h3 class="kt-portlet__head-title">Demographic</h3>
				</div>
				{% elseif modes == 'AADHAAR_OTP' %}
				<div class="kt-portlet__head-label">
					<h3 class="kt-portlet__head-title">Aadhaar OTP</h3>
				</div>
				{% else %}
				<div class="kt-portlet__head-label">
					<h3 class="kt-portlet__head-title">Mobile OTP</h3>
				</div>
				{% endif %}
				<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' %}
				<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
				<input type="hidden" name="txn_id" value="{{ tnxId }}">
				<input type="hidden" name="type" value="{{ type }}">
				<input type="hidden" name="abha_details" class="abha_details" value="{{abha_details}}">
				<input type="hidden" name="modes" class="modes" value="{{modes}}">
				{% if modes == 'DEMOGRAPHICS' %}
					<div class="form-group row">
						<label class="col-2 col-form-label font-weight-bold required">Name</label>
						<div class="col-lg-6 col-xl-4">
							<input type="text" id="name" class="form-control" name="name" required="required" maxlength="25"
								{{ (abhaData[0] is defined) and (abhaData[0].name) ? 'readonly="true"' :'' }}
								value="{{ (abhaData[0] is defined) and (abhaData[0].name) ? abhaData[0].name: ''}}">
						</div>
					</div>
					<div class="form-group row">
						<label class="col-2 col-form-label font-weight-bold required">Gender</label>
						<div class="col-5">
							<div class="kt-radio-inline">
								<label class="kt-radio">
									<input type="radio" id="genderM" name="gender" required="required" class="kt-radio"
									{{ (abhaData[0] is defined) and (abhaData[0].gender) ? 'disabled="true"' :'' }}
										value="M"
										checked="{{ (abhaData[0] is defined) and (abhaData[0].gender == 'male') ? 'checked':'' }}">
									<label class="non-req required" for="genderM">Male</label>
									<span></span>
								</label>
								<label class="kt-radio">
									<input type="radio" id="genderF" name="gender"
										required="required" class="kt-radio" value="F"
										checked="{{ (abhaData[0] is defined) and (abhaData[0].gender == 'female') ? 'checked':'' }}">
									<label class="non-req required" for="genderF">Female</label>
									<span></span>
								</label>
								<label class="kt-radio">
									<input type="radio" id="genderO" name="gender" required="required" class="kt-radio"
										value="O"
										{{ (abhaData[0] is defined) and (abhaData[0].gender) ? 'disabled="true"' :'' }}
										{{ (abhaData[0] is defined) and (abhaData[0].gender == 'other') ? 'checked="checked"':'' }}>
									<label class="non-req required" for="genderO">Other</label>
									<span></span>
								</label>
							</div>

						</div>
					</div>
					<div class="form-group row">
						<label class="col-2 col-form-label font-weight-bold required" for="patient_dob">Date of
							birth</label>
						<div class="col-lg-6 col-xl-4">
							<input type="text" name="dob"
								value="{{ (abhaData[0] is defined) and (abhaData[0].dob) ? abhaData[0].dob : '' }}"
								id="{{ (abhaData[0] is defined) and (abhaData[0].dob) ? '':'patientDob' }}"
								readonly="{{ (abhaData[0] is defined) and (abhaData[0].dob) ? 'true':'' }}"
								required="required" class="form-control dob" oninput="this.value =
							this.value.replace(/[^]/g, '')">

						</div>
					</div>
					<div class="form-group row">
						<label class="col-2 col-form-label font-weight-bold">Mobile no.</label>
						<div class="col-lg-6 col-xl-4">
							<input type="number" id="mobile" class="form-control"
								value="{{ (abhaData[0] is defined) and (abhaData[0].mobile) ? abhaData[0].mobile : '' }}" {{
								(abhaData[0] is defined) and (abhaData[0].mobile) ? 'readonly="true"' :'' }} name="mobile"
								minlength="10" maxlength="10">
						</div>
					</div>
				{% else %}
				<div class="form-group row">
					<label class="col-2 col-form-label font-weight-bold">OTP
					</label>
					<div class="col-lg-6 col-xl-4">
						<input type="number" id="otp" class="form-control" name="otp" maxlength="6">
					</div>
				</div>
				{% endif %}
			</div>
		</div>
	</div>
</form>
<script src="{{ asset('assets/js/jquery.min.js') }}"></script>
<script>
	$(document).ready(function () {
		$('#frmVerifyOtp').validate({ // initialize the plugin
			rules: {
				otp: {
					required: true,
					minlength: 1
				},
			},
			messages: {
				otp: {
					required: "Please enter OTP",
				},
			}
		});
		if (KTUtil.isRTL()) {
			arrows = {
				leftArrow: '<i class="la la-angle-right"></i>',
				rightArrow: '<i class="la la-angle-left"></i>'
			};
		} else {
			arrows = {
				leftArrow: '<i class="la la-angle-left"></i>',
				rightArrow: '<i class="la la-angle-right"></i>'
			};
		}
		$('#patientDob').datepicker({
			rtl: KTUtil.isRTL(),
			todayHighlight: true,
			autoclose: true,
			orientation: "bottom left",
			templates: arrows,
			endDate: '+0d',
			format: 'yyyy-mm-dd'
		});
	});
</script>
{% endblock %}