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

{% block title %}Schedule of Medicines for {{ ward_bed.case }}{% 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">Schedule of Medicines for {{ ward_bed.case }}</h3>
				</div>

				<div class="kt-portlet__head-toolbar">
					<div class="kt-portlet__head-wrapper">
						<a href="{{ path('ot_ward_index') }}" class="btn btn-clean btn-icon-sm"><i class="la la-long-arrow-left"></i>Back</a>
						<a href="{{ path('ot_consent', {'id': ward_bed.id | nzo_encrypt}) }}" class="btn btn-brand btn-bold ml-2" target="_blank">Other Hospital History</a>
					</div>
				</div>
			</div>

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

				{% include '_ward_partials/_create_schedule.html.twig' %}
			</div>
		</div>
	</div>
{% endblock %}

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

	<script>
		$('#medicine-for-schedule').on('change', function() {
			var $this = $(this), frequency = $this.find('option:selected').data('frequency');

			$('.kt_timepicker').val('');
			$('.timepicker .row').hide();

			if(this.value && this.value > 0) {
				$('#medicine-name').html($this.find('option:selected').data('name'));
				$('#medicine_dose').html($this.find('option:selected').data('size'));
				$('#medicine_type').html($this.find('option:selected').data('type'));
				$('#staff-note').html($this.find('option:selected').data('note'));

				if(frequency === 'OD') {
					$('.timepicker .row:lt(1)').find('input').prop('required', true).end().show();
				} else if(frequency === 'BD') {
					$('.timepicker .row:lt(2)').find('input').prop('required', true).end().show();
				} else if(frequency === 'TID') {
					$('.timepicker .row:lt(3)').find('input').prop('required', true).end().show();
				} else {
					$('.timepicker .row:lt(4)').find('input').prop('required', true).end().show();
				}

				$('#medicine-details').removeClass('d-none');
			} else {
				$('#medicine-details').addClass('d-none');

				$('.timepicker .row input').prop('required', false);
			}
		}).selectpicker();

    $('.kt_timepicker').timepicker({
      minuteStep: 1,
      defaultTime: '',
      showSeconds: false,
      showMeridian: true,
      snapToStep: true
    });

    $('.remove_schedule').on('click', function() {
    	var cwmId = $(this).data('medicine');

    	swal.fire({
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        type: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Yes, delete the schedule!'
      }).then(function(result) {
        if (result.value) {
	  			window.location = "{{ path('ot_ward_remove_schedule') }}/?cwm_id=" + cwmId + "&bed_id={{ ward_bed.id }}";
        }
      });
    });
	</script>
{% endblock %}