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

{% block title %}Ward Management for {{ case }}{% endblock %}

{% block content %}
<div class="kt-subheader kt-grid__item"></div>

{{ form_start(form, { 'attr': { 'class': 'kt-form' }}) }}
<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">Ward Management for {{ case }}</h3>
			</div>

			<div class="kt-portlet__head-toolbar">
				<div class="kt-portlet__head-wrapper">
					<a href="{{ path('case_index') }}" class="btn btn-clean btn-icon-sm mr-2"><i
							class="la la-long-arrow-left"></i>Back</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 'parts/flash.html.twig' %}

			<div class="accordion accordion-toggle-arrow" id="manage-ward">
				<div class="card">
					<div class="card-header" id="patient-info-header">
						<div class="card-title" data-toggle="collapse" data-target="#patient-info" aria-expanded="false"
							aria-controls="patient-info">
							<i class="fa fa-user-injured fa-2x"></i>Patient Information
						</div>
					</div>

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

				<div class="card">
					<div class="card-header" id="ward-details-header">
						<div class="card-title" data-toggle="collapse" data-target="#ward-details-info"
							aria-expanded="false" aria-controls="ward-details-info">
							<i class="fa fa-procedures fa-2x"></i>Ward Details
						</div>
					</div>

					<div id="ward-details-info" class="collapse show" aria-labelledby="ward-details-label"
						data-parent="#manage-ward">
						<div class="card-body">
							<div class="form-group row">
								<label class="col-2 col-form-label font-weight-bold">Current Bed No.</label>

								<div class="col-4 form-control-plaintext pt-1">{{ ward_bed.id }}</div>
							</div>

							<div class="form-group row">
								{{ form_label(form.ward, '', {'label_attr': { 'class': 'non-req col-2 col-form-label
								font-weight-bold' }}) }}

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

							<div class="form-group row">
								{{ form_label(form.isComplications, '', {'label_attr': { 'class': 'col-2 col-form-label
								font-weight-bold' }}) }}

								<div class="col-4">
									<label class="kt-checkbox col-1 kt-checkbox--bold kt-checkbox--brand">
										{{ form_widget(form.isComplications) }}
										<span></span>
									</label>
								</div>
							</div>

							<div class="form-group row">
								{{ form_label(form.isSurgeryAdvised, '', {'label_attr': { 'class': 'col-2 col-form-label
								font-weight-bold' }}) }}

								<div class="col-4">
									<label class="kt-checkbox col-1 kt-checkbox--bold kt-checkbox--brand">
										{{ form_widget(form.isSurgeryAdvised) }}
										<span></span>
									</label>
								</div>
							</div>

							<div class="form-group row">
								{{ form_label(form.status, '', {'label_attr': { 'class': 'non-req col-2 col-form-label
								font-weight-bold' }}) }}

								<div class="col-6">
									<div class="kt-radio-inline">
										{% for child in form.status %}
										<label class="kt-radio kt-radio--bold kt-radio--brand">
											{{ form_widget(child, {'attr': { 'class': 'kt-radio' }}) }}
											{{ form_label(child, null, { 'label_attr': { 'class': 'non-req' }}) }}
											{{ form_errors(child) }}
											<span></span>
										</label>
										{% endfor %}
									</div>
								</div>
							</div>

							<div class="form-group row" id="discharge-note">
								{{ form_label(form.dischargeNote, '', {'label_attr': { 'class': 'col-2 col-form-label
								font-weight-bold' }}) }}

								<div class="col-4">
									{{ form_widget(form.dischargeNote, {'attr': { 'class': 'form-control' }}) }}
								</div>
							</div>

							<div class="form-group row" id="discharge-reason">
								{{ form_label(form.dischargeReason, '', {'label_attr': { 'class': 'col-2 col-form-label
								font-weight-bold' }}) }}

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

							<div class="form-group row" id="cause-of-death">
								{{ form_label(form.death_cause, '', {'label_attr': { 'class': 'col-2 col-form-label
								font-weight-bold' }}) }}

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

							<div class="form-group row" id="is-for-pm">
								{{ form_label(form.isForPM, '', {'label_attr': { 'class': 'col-2 col-form-label
								font-weight-bold' }}) }}

								<div class="col-4">
									<label class="kt-checkbox col-1 kt-checkbox--bold kt-checkbox--brand">
										{{ form_widget(form.isForPM) }}
										<span></span>
									</label>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="card">
					<div class="card-header" id="medicine-info-header">
						<div class="card-title" data-toggle="collapse" data-target="#medicine-info"
							aria-expanded="false" aria-controls="medicine-info">
							<i class="fa fa-prescription fa-2x"></i>Ward Prescription
						</div>
					</div>

					<div id="medicine-info" class="collapse show" aria-labelledby="medicine-info-label"
						data-parent="#manage-ward">
						<div class="card-body">
							<div class="form-group row">
								<div class="input-group col-8">
									<select name="search_ward_medicines" class="form-control" id="search-ward-medicines"
										style="width: 80%">
										<option></option>
										{% for drug in essential_drugs %}
										<option value="{{ drug.id }}">{{ drug.name }}</option>
										{% endfor %}
									</select>

									<div class="input-group-append">
										<button class="btn btn-primary" type="button"
											id="search-ward-medicines-trigger">Add Medicine</button>
									</div>
								</div>
							</div>

							<div class="form-group">
								<table class="table table-striped table-bordered" id="case-list-ward">
									<thead>
										<tr>
											<th>Type</th>
											<th>Medicine</th>
											<th>Dose</th>
											<th>Freqency</th>
											<th>Days</th>
											<th>Staff Notes</th>
											<th width="50">&nbsp;</th>
										</tr>
									</thead>
									<tbody id="ward-medicine-body">
										{% for medicine in case_ward_medicines %}
										<tr>
											<td>{{ medicine.medicine_type }}</td>
											<td id="ward-medicine-{{ medicine.medicine_id }}">
												{% if medicine.is_emergency %}
												<span
													class="kt-badge kt-badge--danger kt-badge--md mr-2 btn font-weight-bold"
													data-toggle="kt-tooltip" title="Emergency Medicine">E</span>
												{% endif %}
												{{ medicine.name }}
											</td>
											<td>{{ medicine.dose }}</td>
											<td>{{ medicine.frequency }}</td>
											<td>{{ medicine.num_days }}</td>
											<td{{ medicine.notes ? '' : ' class="text-center"' }}>{{ medicine.notes ?
												medicine.notes : '&mdash;' }}</td>
												<td class="text-center">
													<a href="{{ path('case_delete_case_ward_medicine_json', {'id': medicine.id | nzo_encrypt }) }}"
														class="del-ward-medicine-ajax" data-toggle="kt-tooltip"
														title="Delete">
														<i class="fa far fa-trash fa-2x kt-font-danger"></i>
													</a>
												</td>
										</tr>
										{% endfor %}
									</tbody>
								</table>

								<div class="form-group form-group-last">
									{{ form_label(form.ward_staff_notes, '', {'label_attr': { 'class':
									'font-weight-bold' }}) }}
									{{ form_widget(form.ward_staff_notes, {'attr': { 'class': 'form-control' }}) }}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
{{ form_end(form) }}
{% endblock %}

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

<script>
$(function() {
		var htmlPrefilter = $.htmlPrefilter,
		rdel = /<(del)(?=[\s>])[\w\W]*?<\/\1\s*>/gi;
		$.htmlPrefilter = function(html) {
			return htmlPrefilter.call(this, html).replace(rdel, "");
		};
	});
	var $wardMedicineBody = $('#ward-medicine-body');

	$('.select-picker').selectpicker();

	$('#search-ward-medicines').select2({
		placeholder: "Search Medicine",
	});

	$("input[name='ward_bed[status]']").change(function () {
		if (this.checked) {
			if (this.value == 'Discharged' || this.value == 'Referred') {
				$('#discharge-note, #discharge-reason')
					.find('label')
					.addClass('required')
					.end()
					.find('textarea, select')
					.prop('required', true)
					.end()
					.removeClass('d-none');

				$('#cause-of-death, #is-for-pm')
					.addClass('d-none')
					.find('label')
					.removeClass('required')
					.end()
					.find('textarea, select')
					.prop('required', false);
			} else if (this.value == 'Death of Patient') {
				$('#cause-of-death')
					.removeClass('d-none')
					.find('label')
					.addClass('required')
					.end()
					.find('textarea, select')
					.prop('required', true)
					.end()
					.next()
					.removeClass('d-none');

				$('#discharge-note, #discharge-reason')
					.addClass('d-none')
					.find('label')
					.removeClass('required')
					.end()
					.find('textarea, select')
					.prop('required', false);
			} else {
				$('#discharge-note, #discharge-reason, #cause-of-death, #is-for-pm')
					.addClass('d-none')
					.find('label')
					.removeClass('required')
					.end()
					.find('textarea, select')
					.prop('required', false);
			}
		}
	}).change();

	$wardMedicineBody.on('click', 'a.del-medicine', function (e) {
		e.preventDefault();

		if (confirm('Are you sure?')) {
			$(this).parent().parent().remove();
		}
	}).on('click', 'a.del-ward-medicine-ajax', function (e) {
		e.preventDefault();

		var $link = $(this);

		if (confirm('Are you sure?')) {
			$.ajax({
				url: $link.attr('href'),
				success: function () {
					$link.parent().parent().remove();
				}
			});
		}
	});

	$('#search-ward-medicines-trigger').click(function () {
		var $q = $('#search-ward-medicines');

		if (!$q.val()) {
			swal.fire({
				text: 'Please select a medicine to add!',
				type: 'info',
				animation: false,
				showCancelButton: true,
				showConfirmButton: false,
				cancelButtonText: 'Cancel',
				cancelButtonClass: 'btn btn-default',
			});

			return;
		}

		if ($wardMedicineBody.find('#ward-medicine-' + $q.val()).length) {
			swal.fire({
				text: 'Medicine is already added!',
				type: 'info',
				animation: false,
				showCancelButton: true,
				showConfirmButton: false,
				cancelButtonText: 'Cancel',
				cancelButtonClass: 'btn btn-default',
			});

			return;
		}

		$wardMedicineBody.append($.htmlPrefilter(
			'<tr>' +
			'<td>' +
			'<select class="form-control select-picker" name="ward_bed[ward_medicines][type][' + $q.val() + ']">' +
			'<option value="Capsule">Capsule</option>' +
			'<option value="Drops">Drops</option>' +
			'<option value="Injection">Injection</option>' +
			'<option value="Injection - IM">Injection - IM</option>' +
			'<option value="Injection - IV">Injection - IV</option>' +
			'<option value="Injection - Intradermal">Injection - Intradermal</option>' +
			'<option value="Lotion">Lotion</option>' +
			'<option value="Ointment">Ointment</option>' +
			'<option value="Powder">Powder</option>' +
			'<option value="Syrup">Syrup</option>' +
			'<option value="Tab">Tab</option>' +
			'</select>' +
			'</td>' +
			'<td>' + $q.find('option:selected').text() + '</td>' +
			'<td>' +
			'<select class="form-control select-picker" name="ward_bed[ward_medicines][dose][' + $q.val() + ']">' +
			'<option value="N/A">N/A</option>' +
			'<option value="1/4 Tab">1/4 Tab</option>' +
			'<option value="1/2 Tab">1/2 Tab</option>' +
			'<option value="1 Tab">1 Tab</option>' +
			'<option value="2 Tabs">2 Tabs</option>' +
			'<option value="1 Capsule">1 Capsule</option>' +
			'<option value="2 Capsules">2 Capsules</option>' +
			'<option value="0.2 ml">0.2 ml</option>' +
			'<option value="0.5 ml">0.5 ml</option>' +
			'<option value="1 ml">1 ml</option>' +
			'<option value="1.5 ml">1.5 ml</option>' +
			'<option value="2 ml">2 ml</option>' +
			'<option value="3 ml">3 ml</option>' +
			'<option value="5 ml">5 ml</option>' +
			'<option value="10 ml">10 ml</option>' +
			'<option value="100 ml">100 ml</option>' +
			'<option value="500 ml">500 ml</option>' +
			'<option value="1000 ml">1000 ml</option>' +
			'<option value="1 gm">1 gm</option>' +
			'<option value="10 gm">10 gm</option>' +
			'<option value="20 gm">20 gm</option>' +
			'<option value="50 gm">50 gm</option>' +
			'<option value="1 drop">1 drop</option>' +
			'<option value="2 drops">2 drops</option>' +
			'<option value="3 drops">3 drops</option>' +
			'</select>' +
			'</td>' +
			'<td>' +
			'<div class="form-group">' +
			'<div class="kt-radio-inline">' +
			'<label class="kt-radio kt-radio--bold kt-radio--brand">' +
			'<input type="radio" name="ward_bed[ward_medicines][frequency][' + $q.val() + ']" checked value="OD">OD' +
			'<span></span>' +
			'</label>' +
			'<label class="kt-radio kt-radio--bold kt-radio--brand">' +
			'<input type="radio" name="ward_bed[ward_medicines][frequency][' + $q.val() + ']" value="BD">BD' +
			'<span></span>' +
			'</label>' +
			'<label class="kt-radio kt-radio--bold kt-radio--brand">' +
			'<input type="radio" name="ward_bed[ward_medicines][frequency][' + $q.val() + ']" value="TID">TID' +
			'<span></span>' +
			'</label>' +
			'<label class="kt-radio kt-radio--bold kt-radio--brand">' +
			'<input type="radio" name="ward_bed[ward_medicines][frequency][' + $q.val() + ']" value="QID">QID' +
			'<span></span>' +
			'</label>' +
			'</div>' +
			'</div>' +
			'</td>' +
			'<td>' +
			'<select class="form-control select-picker" name="ward_bed[ward_medicines][num_days][' + $q.val() + ']">' +
			'<option value="1 Day">1 Day</option>' +
			'<option value="3 Days">3 Days</option>' +
			'<option value="5 Days">5 Days</option>' +
			'<option value="7 Days">7 Days</option>' +
			'<option value="15 Days">15 Days</option>' +
			'<option value="1 Month">1 Month</option>' +
			'<option value="2 Months">2 Months</option>' +
			'<option value="3 Months">3 Months</option>' +
			'</select>' +
			'</td>' +
			'<td>' +
			'<textarea name="ward_bed[ward_medicines][staff_notes][' + $q.val() + ']" class="form-control" placeholder="Staff notes for this medicine"></textarea>' +
			'<input type="hidden" name="ward_bed[ward_medicines][id][' + $q.val() + ']" id="ward-medicine-' + $q.val() + '" value="' + $q.val() + '">' +
			'</td>' +
			'<td class="text-center"><a href="javascript:void(0);" class="del-medicine"><i class="fa far fa-trash fa-2x kt-font-danger"></i></a></td>' +
			'</tr>'
		));

		$('.select-picker').selectpicker('refresh');
	});
</script>
{% endblock %}