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

{% block title %}
{% if name %}
Add Member/Patient in {{ name }}'s family
{% else %}
Register Head of Family
{% endif %}
{% endblock %}

{% block content %}
{{ form_start(form, { 'attr': { 'class': 'kt-form','autocomplete': 'off' }}) }}
<input type="hidden" name="auth_token" id="auth_token" value="{{token}}">
<div class="kt-subheader kt-grid__item"></div>

<div class="kt-container kt-grid__item kt-grid__item--fluid">
	<div class="kt-portlet kt-portlet--mobile" id="kt_page_portlet">
		<div class="kt-portlet__head kt-portlet__head--lg">
			<div class="kt-portlet__head-label">
				<h3 class="kt-portlet__head-title">
					{% if name %}
					Add Member/Patient in {{ name }}'s family
					{% else %}
					Register Head of Family
					{% endif %}
				</h3>
			</div>

			<div class="kt-portlet__head-toolbar">
				<div class="kt-portlet__head-wrapper">
					<a href="{{ path('patient_index') }}" class="btn btn-clean btn-icon-sm mr-2"><i class="la la-long-arrow-left"></i>Back</a>
					<a href="{{ path('abha_card') }}" class="btn btn-sucess btn-bold mr-2">Create ABHA ID</a>
					<a href="{{ app.request.uri }}" class="btn btn-secondary btn-bold mr-2">Reset</a>
					<button class="btn btn-primary btn-bold">Submit</button>
				</div>
			</div>
		</div>

		<div class="kt-portlet__body">
			{{ include('patient/_form.html.twig', {'read_only': read_only ,'hideAbha': hideAbha}) }}
		</div>
	</div>
</div>
{{ form_end(form) }}
{% endblock %}

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

<script src="{{ asset('assets/js/chained_locations.js') }}"></script>
<script>
	var arrows;
	$(document).ready(function () {
		$('[data-toggle="tooltip"]').tooltip();
		$('.kt-form').validate();
	});
	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>'
		};
	}
	$('#patient_dob').datepicker({
		rtl: KTUtil.isRTL(),
		todayHighlight: true,
		autoclose: true,
		orientation: "bottom left",
		templates: arrows,
		endDate: '+0d',
		format: 'yyyy-mm-dd'
	}).on('changeDate', function () {
		$('#patient_age').val(getAge(new Date($(this).val())));
	});

	$('.select_dropdown').selectpicker();

	function getAge(dob) {
		var today = new Date();

		return Math.floor((today - dob) / (365.25 * 24 * 60 * 60 * 1000));
	};

	$('#patient_age').change(function () {
		var today = new Date(), age = this.value;

		if (age > 0) {
			today.setFullYear(today.getFullYear() - age);

			$('#patient_dob').datepicker('update', today.toLocaleDateString('en-CA')); // locale en-CA gives Y-m-d format
		}
	});

	$(function () {
		$("input[type='file']").change(function () {
			var myid = $(this).attr("id");
			validateImage(myid);
		});
	});
	function validateImage(id) {
		var file = document.getElementById(id).files[0];
		var ext = file.type.split('/').pop().toLowerCase();
		var spanid = $('#' + id).attr('id');
		switch (ext) {
			case 'jpeg':
			case 'png':
			case 'jpg':
				flag = true;
				$("." + id).text("")
				break;
			default:
				flag = false;
		}

		if (flag == false) {
			$("." + id).text("Invalid file type.").css('color', 'red');
			return false;
		} else {
			var size = GetFileSize(id);
			if (size.toFixed(2) > 5.00) {
				$("." + id).text("Upload file size must have 5mb or less than").css('color', 'red');
				return false;
			} else {
				$("." + id).text("")
				return true;
			}
		}

		function GetFileSize(fileid) {
			fileBytes = $("#" + fileid)[0].files[0].size
			fileSize = fileBytes / 1024 / 1024;// actual file size
			return fileSize
		}
	}
</script>
{% endblock %}