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

{% block title %}Add Case{% endblock %}

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

{{ form_start(form, { 'attr': { 'style': 'class: kt-form'}}) }}
<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">Add 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="row">
				<div class="col-6">
					<div class="form-group row">
						{{ form_label(form.patient, '', {'label_attr': { 'class': 'col-3 col-form-label
						font-weight-bold' }}) }}

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

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

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

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

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

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

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

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

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

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

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

				<div class="col-6">
					<div class="form-group row">
						<label class="col-3 col-form-label font-weight-bold">Payment</label>

						<div class="col-9">
							<div class="kt-radio-inline">
								<label class="kt-radio">
									<input type="radio" id="pay-chrg" name="pay_type" class="kt-radio" value="chrg"
										checked>
									<label for="pay-chrg">Chargeable</label>
									<span></span>
								</label>

								<label class="kt-radio">
									<input type="radio" id="pay-free" name="pay_type" class="kt-radio" value="free">
									<label for="pay-free">Free</label>
									<span></span>
								</label>
							</div>
						</div>
					</div>

					<div class="form-group row" id="free-reason">
						<label class="col-3 col-form-label font-weight-bold">Reason</label>

						<div class="col-9">
							<input type="text" class="form-control">
						</div>
					</div>

					<div class="form-group row chargeable-fields">
						<label class="col-3 col-form-label font-weight-bold">Amount</label>

						<div class="col-9">
							<input type="number" class="form-control amount" min="1" maxlength="10" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
						</div>
					</div>

					<div class="form-group row chargeable-fields">
						<label class="col-3 col-form-label font-weight-bold">Lumpsum Amount</label>

						<div class="col-9">
							<input type="number" class="form-control lumpsum_amount" min='1' maxlength="10" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
						</div>
					</div>

					<div class="form-group row chargeable-fields">
						<label class="col-3 col-form-label font-weight-bold">Mode of Payment</label>

						<div class="col-9">
							<div class="kt-radio-inline">
								<label class="kt-radio">
									<input type="radio" id="mod-cash" name="mod_pay" class="kt-radio" value="cash">
									<label for="mod-cash">Cash</label>
									<span></span>
								</label>

								<label class="kt-radio">
									<input type="radio" id="mod-upi" name="mod_pay" class="kt-radio" value="upi">
									<label for="mod-upi">UPI</label>
									<span></span>
								</label>

								<label class="kt-radio">
									<input type="radio" id="mod-nb" name="mod_pay" class="kt-radio" value="nb">
									<label for="mod-nb">Net Banking</label>
									<span></span>
								</label>

								<label class="kt-radio">
									<input type="radio" id="mod-cdc" name="mod_pay" class="kt-radio" value="cdc">
									<label for="mod-cdc">Credit/Debit Card</label>
									<span></span>
								</label>
							</div>
						</div>
					</div>

					<div class="form-group row">
						<label class="col-3 col-form-label font-weight-bold">Notify By</label>

						<div class="col-9">
							<div class="kt-checkbox-inline">
								<label class="kt-checkbox">
									<input type="checkbox" id="notif-sms" name="notif_by" class="kt-checkbox"
										value="sms">
									<label for="notif-sms">SMS</label>
									<span></span>
								</label>

								<label class="kt-checkbox">
									<input type="checkbox" id="notif-wa" name="notif_by" class="kt-checkbox" value="wa">
									<label for="notif-wa">WhatsApp</label>
									<span></span>
								</label>

								<label class="kt-checkbox">
									<input type="checkbox" id="notif-email" name="notif_by" class="kt-checkbox"
										value="email">
									<label for="notif-email">Email</label>
									<span></span>
								</label>
							</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 $symptom = $('#case_symptoms').select2({
		allowClear: true
	}), path = '{{ asset('uploads/patient_photos/') }}';

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

	$('#case_diseaseCategory').select2({
		allowClear: true
	});

	$('#case_patient').select2({
		allowClear: true,
		templateResult: function (elm) {
			var elmText = '';

			if (!elm.id) {
				return elm.text;
			}

			if (!$(elm.element).data('photo')) {
				elmText = '<i class="fa fa-user-injured fa-4x mr-2"></i>';
			} else {
				elmText = '<img src="' + path + $(elm.element).data('photo') + '" alt="Photo" width="50" height="50" class="mr-2">';
			}

			if ($(elm.element).data('abha')) {
				elmText = elmText + $(elm.element).data('abha') + ' - ';
			}

			return $('<span class="align-middle">' + elmText + elm.text + '</span>');
		}
	});

	$('#case_diseaseCategory').change(function () {
		var $diseaseCategory = $(this);

		$.ajax({
			url: '{{ path('case_symptom_json') }}',
			type: 'GET',
			dataType: 'JSON',
			data: {
				category_id: $diseaseCategory.val()
			},
			success: function (symptoms) {
				$symptom.select2('destroy');
				$symptom.html('');

				$symptom.select2();

				$.each(symptoms, function (key, symptom) {
					$symptom.append($.htmlPrefilter(new Option(symptom.name, symptom.id, false, false)));
				});

				$symptom.trigger('change');
			}
		});
	});

	$("input[name='pay_type']").change(function () {
		if (this.checked && this.value == 'free') {
			$('#free-reason').removeClass('d-none');

			$('.chargeable-fields').addClass('d-none');
		} else {
			$('#free-reason').addClass('d-none');

			$('.chargeable-fields').removeClass('d-none');
		}
	}).change();
</script>
{% endblock %}