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

{% block title %}NCD Form P{% endblock %}

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

	<form action="{{ path('p_form_report') }}" method="POST" 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">NCD Form P</h3>
					</div>

					<div class="kt-portlet__head-toolbar">
						<div class="kt-portlet__head-wrapper">
							<a href="{{ path('dashboard') }}" class="btn btn-clean btn-icon-sm"><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="form-group row">
						<label class="col-xl-2 col-lg-2 col-form-label font-weight-bold required">Date Range</label>

						<div class="col-xl-10 col-lg-10 row">
							<div class="input-group" id="from-to-dates">
								<input type="text" name="range" class="form-control" readonly placeholder="Select Date Range">

								<div class="input-group-append">
									<span class="input-group-text"><i class="la la-calendar-check-o"></i></span>
								</div>
							</div>
						</div>
					</div>

					<div class="form-group row">
						<label class="col-xl-2 col-lg-2 col-form-label font-weight-bold required">Diseases</label>

						<div class="col-xl-10 col-lg-10">
							<div class="row border-bottom border-secondary">
								<label class="col-lg-4 kt-checkbox kt-checkbox--bold kt-checkbox--brand">
									<input type="checkbox" id="select-all-none">Select All
									<span></span>
								</label>

								<label class="col-lg-4 kt-checkbox kt-checkbox--bold kt-checkbox--brand">
									<input type="checkbox" id="select-reg-none">Select Regular
									<span></span>
								</label>

								{% for disease in regular %}
									<label class="col-lg-4 kt-checkbox kt-checkbox--bold kt-checkbox--brand">
										<input type="checkbox" name="diseases[]" value="{{ disease.ids }}">{{ disease.name|raw }}
										<span></span>
									</label>
								{% endfor %}
							</div>

							<div class="row mt-2">
								{% for disease in extended %}
									<label class="col-lg-4 kt-checkbox kt-checkbox--bold kt-checkbox--primary">
										<input type="checkbox" name="diseases[]" value="{{ disease.ids }}">{{ disease.name|raw }}
										<span></span>
									</label>
								{% endfor %}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</form>
{% endblock %}

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

	<script>
		$('#select-all-none').click(function() {
			$("input[name='diseases[]'], #select-reg-none").prop('checked', $(this).prop('checked'));
		});

		$('#select-reg-none').click(function() {
			$('.kt-checkbox--brand :checkbox:not(#select-all-none)').prop('checked', $(this).prop('checked'));
		});

		$('#from-to-dates').daterangepicker({
		  buttonClasses: 'btn',
		  applyClass: 'btn-primary',
		  cancelClass: 'btn-secondary',
		  format: 'yyyy-mm-dd',
			maxDate: new Date()
		}, function(start, end, label) {
		  $('#from-to-dates .form-control').val( start.format('YYYY-MM-DD') + ' / ' + end.format('YYYY-MM-DD'));
		});
	</script>
{% endblock %}