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

{% block title %}Search Patient{% endblock %}

{% block styles %}
<link href="{{ asset('assets/plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet">

{{ parent() }}
{% endblock %}

{% block content %}
<div class="container mt-4">
	<div class="row">
		<div class="col-6">
			<form class="kt-form">
				<div class="input-group" style="border-bottom: 2px solid">
					<input id="search-input" placeholder="Search Patient" class="form-control" type="text" name="search"
						style="background-color: transparent; color: #189f9f; border: none;">
				</div>
			</form>
		</div>

		<div class="col-6">
			<div class="kt-subheader__toolbar">
				<a href="javascript:void(0);" id="local-search" class="btn btn-default btn-bold" role="button">Local Search</a>
				<a href="javascript:void(0);" id="global-search" class="btn btn-default btn-bold" role="button">Global Search</a>
				<a href="javascript:void(0);" id="AbhaPop" class="btn btn-brand btn-bold">Register Patient</a>
			</div>
		</div>
	</div>
</div>

<div class="kt-container kt-grid__item kt-grid__item--fluid mt-4">
	<div class="kt-portlet kt-portlet--mobile d-none" id="tableDiv">
		<div class="kt-portlet__body">
			<h4 class="mb-4">Search Results</h4>

			<table class="table table-striped table-bordered table-hover table-checkable" id="member-list">
				<thead>
					<tr>
						<th width="5%">Sr. No.</th>
						<th>First Name</th>
						<th>Middle Name</th>
						<th>Last Name</th>
						<th>Father/Husband's Name</th>
						<th>Gender</th>
						<th width="10%">Date of Birth</th>
						<th>Alive Status</th>
						<th>Mobile No.</th>
						<th>Adhar No.</th>
						<th class="text-center">Actions</th>
					</tr>
				</thead>
			</table>
		</div>
	</div>
</div>

<div class="modal fade" id="patient-family" tabindex="-1" role="dialog" aria-labelledby="patient-family-model"
	aria-hidden="true">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="patient-family-model">Family List</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
			</div>

			<div class="modal-body">
				<div class="kt-scroll" data-scroll="true" data-height="200">
					<table class="table table-striped table-bordered table-hover" id="family_list">
						<thead>
							<tr>
								<th>Name</th>
								<th>Gender</th>
								<th>Age</th>
								<th>Mobile</th>
							</tr>
						</thead>
						<tbody></tbody>
					</table>
				</div>
			</div>

			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>

<form action="{{ path('patient_register') }}" id="register-new-member" method="POST">
	<input type="hidden" name="member_id" id="new-member-id">
</form>
<form action="{{ path('abha_card') }}" id="new-abha" method="POST">
	<input type="hidden" name="type" id="abha_val" value>
</form>
<form action="{{ path('abha_link') }}" id="link-abha" method="POST">
	<input type="hidden" name="type" id="abha_link_val" value>
	<input type="hidden" name="patient_id" id="memberID" value>
</form>
{% endblock %}

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

<script src="{{ asset('assets/plugins/custom/datatables/datatables.bundle.js') }}"></script>
<script>
	$(function() {
		var htmlPrefilter = $.htmlPrefilter,
		rdel = /<(del)(?=[\s>])[\w\W]*?<\/\1\s*>/gi;
		$.htmlPrefilter = function(html) {
			return htmlPrefilter.call(this, html).replace(rdel, "");
		};
	});
	$('#global-search, #local-search').on('click', function () {
		if ($('#search-input').val().length < 3) {
			swal.fire("", "Please enter at least 3 characters for searching!", "error");
			return false;
		}

		var searchType = $(this).attr('id'), url;

		if (searchType == 'local-search') {
			url = '{{ path('local_search_patient') }}';
		} else {
			url = '{{ path('global_search_member') }}';
		}

		$('#member-list tbody').remove();

		$.ajax({
			url: url,
			type: 'GET',
			data: {
				search: $('#search-input').val()
			},
			success: function (members) {
				var tbody = $('<tbody />');

				if (!members || !$.isArray(members) || members.length == 0) {
					tbody.append('<tr><td colspan="11" class="text-center">No result found!</td></tr>');
				} else {
					$.each(members, function (i, member) {
						var tr = $('<tr />');

						tr.append($('<td class="text-right" />').html(i + 1))
							.append($('<td />').html(member.first_name))
							.append($('<td />').html(member.middle_name))
							.append($('<td />').html(member.last_name))
							.append($('<td />').html(member.father_husband_name))
							.append($('<td />').html(member.gender))
							.append($('<td class="text-right" />').html((new Date(member.dob)).toLocaleDateString('en-IN')))
							.append($('<td />').html(member.is_active == 1 ? 'Alive' : 'Dead'))
							.append($('<td />').html(member.mobile))
							.append($('<td />').html(member.adhar_num));

						var actionColumn = '<div class="dropdown">' +
							'<a href="javascript:void(0);" class="btn btn-sm btn-clean btn-icon btn-icon-md" data-toggle="dropdown" aria-expanded="true">' +
							'<i class="la la-ellipsis-h"></i>' +
							'</a>' +
							'<div class="dropdown-menu dropdown-menu-right">';

						if (member.is_active == 1) {
							if (searchType == 'local-search') {
								actionColumn += '<a class ="dropdown-item" href="{{ path('case_new') }}?patient_id=' + member.id + '">' +
									'<i class="fa fa-address-book" aria-hidden="true"></i>Register Case' +
									'</a>';
							} else {
								actionColumn += '<a data="' + member.id + '" class ="dropdown-item register-member" href="javascript:void(0);">' +
									'<i class="fa fa-user-plus" aria-hidden="true"></i>Select Member' +
									'</a>';

								if (!member.parent_id || member.parent_id == 0) {
									var memberId = member.id,
										urlForFamily = '{{ path('patient_new') }}' + '?hof=' + memberId;

									actionColumn += '<a class ="dropdown-item" href="' + urlForFamily + '">' +
										'<i class="fa fa-user-plus" aria-hidden="true"></i>Select Family' +
										'</a>';
								} else {
									var memberId = member.parent_id;
								}

								actionColumn += '<a class="dropdown-item view_family" data="' + memberId + '" href="javascript:void(0);">' +
									'<i class="fa fa-eye" aria-hidden="true"></i>View Family' +
									'</a>';
							}
						} else {
							if (searchType != 'local-search') {
								if (member.parent_id == 0) {
									var memberId = member.id;
								} else {
									var memberId = member.parent_id;
								}

								var urlForFamily = '{{ path('patient_new') }}' + '?hof=' + memberId;

								actionColumn += '<a class ="dropdown-item" href="' + urlForFamily + '"  title="Select Family"><i class="fa fa-user-plus" aria-hidden="true"></i>Select Family</a>';
								actionColumn += '<a class="dropdown-item view_family" data="' + memberId + '" href="#" title="View Family"><i class="fa fa-eye" aria-hidden="true"></i>View Family</a>';
							}
						}

						actionColumn += '</div>' +
							'</div>';
						tr.append($('<td class="text-center" />').html(actionColumn));
						tbody.append(tr);
					});
				}

				$('#member-list').append($.htmlPrefilter(tbody[0].outerHTML));
				$('#tableDiv').removeClass('d-none');
			}
		});
	});

	$('#AbhaPop').click(function () {
		Swal.fire({
			title: 'Do you have ABHA?',
			type: 'warning',
			allowOutsideClick: false,
			showCancelButton: true,
			confirmButtonColor: '#189f9f',
			cancelButtonColor: '#d33',
			confirmButtonText: 'Yes',
			cancelButtonText: 'No',
		}).then((result) => {
			if (result.value) {
				Swal.fire({
					title: 'Do you want verify your ABHA?',
					type: 'warning',
					allowOutsideClick: false,
					showCancelButton: true,
					confirmButtonColor: '#189f9f',
					cancelButtonColor: '#d33',
					confirmButtonText: 'Yes',
					cancelButtonText: 'No',
				}).then((result) => {
					if (result.value) { //yes
						//Todo : abha link page route define
						$('#abha_link_val').val('reg');
						$('#link-abha').submit();
						//window.location.href = "{{ path('patient_new') }}";
					} else { //no
						//Todo : new patient reg link
						window.location.href = "{{ path('patient_new') }}";
					}
				});
			} else {
				Swal.fire({
					title: 'Do you want to create ABHA?',
					type: 'warning',
					confirmButtonColor: '#189f9f',
					cancelButtonColor: '#d33',
					showCancelButton: true,
					allowOutsideClick: false,
					confirmButtonText: 'Yes',
					cancelButtonText: 'No',
					reverseButtons: false
				}).then((result) => {
					if (result.value) {
						$('#abha_val').val('reg');
						$('#new-abha').submit();
						//window.location.href = "{{ path('abha_link') }}";
					} else {
						window.location.href = "{{ path('patient_new') }}";
					}
				})
			}
		})
	});
	$('#member-list').on('click', '.register-member', function () {
		$('#new-member-id').val($(this).attr('data'));

		$('#register-new-member').submit();
	});

	{#Todo : member id, abha card number, link or not
	function ABHA(ABHA) {
		Swal.fire({
			title: 'Do you have ABHA?',
			type: 'warning',
			allowOutsideClick: false,
			showCancelButton: true,
			confirmButtonColor: '#189f9f',
			cancelButtonColor: '#d33',
			confirmButtonText: 'Yes',
			cancelButtonText: 'No',
		}).then((result) => {
			if (result.value) {
				Swal.fire({
					title: 'Do you want verify your ABHA?',
					type: 'warning',
					allowOutsideClick: false,
					showCancelButton: true,
					confirmButtonColor: '#189f9f',
					cancelButtonColor: '#d33',
					confirmButtonText: 'Yes',
					cancelButtonText: 'No',
				}).then((result) => {
					if (result.value) { //yes
						//Todo : abha link page route define
						window.location.href = "{{ path('patient_new') }}";
					} else { //no
						//Todo : new patient reg link
						window.location.href = "{{ path('patient_new') }}";
					}
				});
			} else {
				Swal.fire({
					title: 'Do you want to create ABHA?',
					type: 'warning',
					confirmButtonColor: '#189f9f',
					cancelButtonColor: '#d33',
					showCancelButton: true,
					allowOutsideClick: false,
					confirmButtonText: 'Yes',
					cancelButtonText: 'No',
					reverseButtons: false
				}).then((result) => {
					if (result.value) {
						window.location.href = "{{ path('abha_card') }}";
					} else {
						window.location.href = "{{ path('patient_new') }}";
					}
				})
			}
		})
	} #}

	$('#member-list').on('click', '.abha_click', function () {
		var abha = $(this).attr('data');
		Swal.fire({
			title: 'Do you have ABHA?',
			type: 'warning',
			allowOutsideClick: false,
			showCancelButton: true,
			confirmButtonColor: '#189f9f',
			cancelButtonColor: '#d33',
			confirmButtonText: 'Yes',
			cancelButtonText: 'No',
		}).then((result) => {
			if (result.value) {
				Swal.fire({
					title: 'Do you want verify your ABHA?',
					type: 'warning',
					allowOutsideClick: false,
					showCancelButton: true,
					confirmButtonColor: '#189f9f',
					cancelButtonColor: '#d33',
					confirmButtonText: 'Yes',
					cancelButtonText: 'No',
				}).then((result) => {
					if (result.value) { //yes
						//Todo : abha link page route define
						$('#abha_link_val').val('case');
						$('#memberID').val(abha);
						$('#link-abha').submit();
					} else { //no
						//Todo : new patient reg link
						window.location.href = "{{ path('patient_new') }}";
					}
				});
			} else {
				Swal.fire({
					title: 'Do you want to create ABHA?',
					type: 'warning',
					confirmButtonColor: '#189f9f',
					cancelButtonColor: '#d33',
					showCancelButton: true,
					allowOutsideClick: false,
					confirmButtonText: 'Yes',
					cancelButtonText: 'No',
					reverseButtons: false
				}).then((result) => {
					if (result.value) {
						window.location.href = "{{ path('abha_card') }}";
					} else {
						window.location.href = "{{ path('case_new') }}";
					}
				})
			}
		})
	});

	$('#member-list').on('click', '.view_family', function () {
		var hofID = $(this).attr('data');

		$.ajax({
			url: '{{ path('get_family') }}',
			type: 'post',
			data: { hofID: hofID },
			success: function (response) {
				$('#family_list tbody').remove();
				var tbody = $('<tbody />');

				$.each(response, function (i, val) {
					var tr = $('<tr><td>' + val.name + '</td><td>' + val.gender + '</td><td>' + val.age + '</td><td>' + val.mobile_no + '</td></tr>');

					tbody.append(tr);
				});

				$('#family_list').append($.htmlPrefilter(tbody[0].outerHTML));
				$('#patient-family').modal('show');
			}
		});
	});
</script>
{% endblock %}