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

{% block title %}{{ page_title }}{% endblock %}

{% block content %}
<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">
		<div class="kt-portlet__head kt-portlet__head--lg">
			<div class="kt-portlet__head-label">
				<h3 class="kt-portlet__head-title">{{ page_title }}</h3>
			</div>

			<div class="kt-portlet__head-toolbar">
				<div class="kt-portlet__head-wrapper">
					<a href="{{ path(back_route) }}" class="btn btn-clean btn-icon-sm"><i
							class="la la-long-arrow-left"></i>Back</a>
				</div>
			</div>
		</div>

		<div class="kt-portlet__body">
			{% include 'parts/flash.html.twig' %}

			<div class="accordion accordion-toggle-arrow" id="case-details">
				<div class="card">
					<div class="card-header" id="patient-info-header">
						<div class="card-title collapsed" data-toggle="collapse" data-target="#patient-info"
							aria-expanded="true" aria-controls="patient-info">
							Patient Information
						</div>
					</div>

					<div id="patient-info" class="collapse" aria-labelledby="patient-info-label"
						data-parent="#case-details">
						<div class="card-body">
							{{ render(controller('App\\Controller\\PatientController::personalInfo', { 'id':
							tests[0].patient_id })) }}
						</div>
					</div>
				</div>

				<div class="card">
					<div class="card-header" id="collect-sample-header">
						<div class="card-title" data-toggle="collapse" data-target="#collect-sample"
							aria-expanded="true" aria-controls="collect-sample">
							Collect Samples
						</div>
					</div>

					<div id="collect-sample" class="show" aria-labelledby="collect-sample-label"
						data-parent="#case-details">
						<div class="card-body">
							<div class="row">
								<div class="col-5">
									{{ form_start(form, {'attr': { 'class': 'kt-form' }}) }}
									<div class="form-group row">
										{{ form_label(form.type, '', {'label_attr': { 'class': 'col-form-label col-3'
										}}) }}

										<div class="col-7">
											{{ form_widget(form.type, {'attr': { 'class': 'form-control select-picker'
											}}) }}
											{{ form_errors(form.type) }}
										</div>

										<button class="btn btn-primary btn-bold">Submit</button>
									</div>
									{{ form_end(form) }}
								</div>

								<div class="col-7">
									<table class="table table-striped table-bordered">
										<thead>
											<tr>
												<th>Type</th>
												<th>Sample No.</th>
												<th class="text-center">Action</th>
											</tr>
										</thead>
										<tbody>
											{% for sample in samples %}
											<tr>
												<td>{{ sample.type }}</td>
												<td>{{ sample.number }}</td>
												<td class="text-center">
													<a href="{{ path(delete_route, { 'id': sample.id | nzo_encrypt }) }}"
														class="actions" data-toggle="kt-tooltip" title="Delete"
														onclick="return confirm('Are you sure?');">
														<i class="fa far fa-trash fa-2x kt-font-danger"></i>
													</a>
												</td>
											</tr>
											{% else %}
											<td colspan="3" class="text-center">No records found</td>
											{% endfor %}
										</tbody>
									</table>
								</div>
							</div>

							<div class="kt-portlet__foot">
								<div class="kt-form__actions text-right">
									<button type="reset" class="btn btn-brand">Print Labels</button>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="card">
					<div class="card-header" id="tests-to-do-header">
						<div class="card-title collapsed" data-toggle="collapse" data-target="#tests-to-do"
							aria-expanded="true" aria-controls="tests-to-do">
							Tests to be done
						</div>
					</div>

					<div id="tests-to-do" class="collapse" aria-labelledby="tests-to-do-label"
						data-parent="#case-details">
						<div class="card-body">
							<form id="add-sample-form" class="kt-form" method="post"
								action="{{ path(action_route, { 'lab_case_id': case_id | nzo_encrypt  }) }}">
								<table class="table table-striped table-bordered">
									<thead>
										<tr>
											<th>Test Name</th>
											<th>Method</th>
											<th>Normal Range</th>
											<th width="20%">Sample No.</th>
										</tr>
									</thead>
									<tbody>
										{% for test in tests %}
										<tr>
											<td>{{ test.test_name }}</td>
											<td>
												<ul>
													{% for method in test.method_names|split(',') %}
													<li>{{ method }}</li>
													{% else %}
													<li>&mdash;</li>
													{% endfor %}
												</ul>

												<input type="hidden" name="tests[{{ loop.index }}]"
													value="{{ test.id }}">
											</td>
											<td>
												<ul>
													{% for range in test.normal_range|split(',') %}
													<li>{{ range }}</li>
													{% else %}
													<li>&mdash;</li>
													{% endfor %}
												</ul>
											</td>
											<td>
												<div class="form-group">
													<select name="samples[{{ loop.index }}]"
														class="select-picker form-control lab-case-tests" required>
														<option value="">Select Sample</option>
														{% for sample in samples %}
														<option value="{{ sample.id }}" {{
															(sample.id==test.lab_case_sample_id) ? ' selected' : '' }}>
															{{ sample.number }}</option>
														{% endfor %}
													</select>
												</div>
											</td>
										</tr>
										{% else %}
										<td colspan="6" class="text-center">No records found</td>
										{% endfor %}
									</tbody>
								</table>

								<div class="kt-portlet__foot">
									<div class="kt-form__actions text-right">
										{% if tests %}
										<input type="submit" class="btn btn-brand">
										{% endif %}
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
{% endblock %}

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

<script>
	$('.select-picker').selectpicker();

	$('#add-sample-form').on('submit', function (e) {
		e.preventDefault();

		var isValid = true, form = this;

		$(this).find('select.lab-case-tests').each(function () {
			if (!$(this).val()) {
				isValid = false;
			}
		});

		if (isValid) {
			swal.fire({
				title: 'Are you sure?',
				text: "You won't be able to revert this!",
				type: 'info',
				showCancelButton: true,
				confirmButtonText: 'Yes, submit it!'
			}).then(function (result) {
				if (result.value) {
					form.submit();
				}
			});
		} else {
			swal.fire({
				title: 'An error occurred!',
				text: 'Plese enter all sample details!',
				type: 'error'
			});
		}
	});
</script>
{% endblock %}