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

{% block title %}Generate Demand{% 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">Generate Demand</h3>
			</div>

			<div class="kt-portlet__head-toolbar">
				<div class="kt-portlet__head-wrapper">
					<a href="{{ path('indent_request_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="form-group row">
				{{ form_label(form.demandCategory, '', {'label_attr': { 'class': 'col-3 col-form-label font-weight-bold'
				}}) }}

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

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

				<div class="col-lg-6 col-xl-4">
					<div class="kt-radio-inline">
						{% for child in form.demandSubCategory %}
						<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' }}) }}
							<span></span>
						</label>
						{% endfor %}
					</div>

					{{ form_errors(form.demandSubCategory) }}
				</div>
			</div>

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

				<div class="col-lg-6 col-xl-4">
					<div class="kt-radio-inline">
						{% for child in form.itemType %}
						<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' }}) }}
							<span></span>
						</label>
						{% endfor %}
					</div>

					{{ form_errors(form.itemType) }}
				</div>
			</div>

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

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

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

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

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

				<div class="col-lg-6 col-xl-4">
					{{ form_widget(form.labMaterial, {'attr': { 'class': 'form-control' }}) }}
					{{ form_errors(form.labMaterial) }}
				</div>
			</div>

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

				<div class="col-lg-6 col-xl-4">
					{{ form_widget(form.essentialEquipment, {'attr': { 'class': 'form-control' }}) }}
					{{ form_errors(form.essentialEquipment) }}
				</div>
			</div>

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

				<div class="col-lg-6 col-xl-4">
					{{ form_widget(form.drug, {'attr': { 'class': 'form-control' }}) }}
					{{ form_errors(form.drug) }}
				</div>
			</div>

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

				<div class="col-lg-6 col-xl-4">
					{{ form_widget(form.itemOther, {'attr': { 'class': 'form-control' }}) }}
					{{ form_errors(form.itemOther) }}
				</div>
			</div>

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

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

					{{ form_errors(form.drugType) }}
				</div>
			</div>

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

				<div class="col-lg-6 col-xl-4">
					{{ form_widget(form.strength, {'attr': { 'class': 'form-control' }}) }}
					{{ form_errors(form.strength) }}
				</div>
			</div>

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

				<div class="col-lg-6 col-xl-4">
					{{ form_widget(form.description, {'attr': { 'class': 'form-control','maxlength':'255' }}) }}
					{{ form_errors(form.description) }}
				</div>
			</div>

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

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

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

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

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

				<div class="col-lg-6 col-xl-4">
					{{ form_widget(form.basicUnit, {'attr': { 'class': 'form-control' }}) }}
					{{ form_errors(form.basicUnit) }}
				</div>
			</div>

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

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

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

				<div class="col-lg-6 col-xl-4">
					{{ form_widget(form.unitPack, {'attr': { 'class': 'form-control' }}) }}
					{{ form_errors(form.unitPack) }}
				</div>
			</div>

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

				<div class="col-lg-6 col-xl-4">
					{{ form_widget(form.estimatedPricePU, {'attr': { 'class': 'form-control','min':'1','maxlength':'10', 'oninput':"this.value = this.value.replace(/[^0-9]/g, '')"
					}}) }}
					{{ form_errors(form.estimatedPricePU) }}
				</div>
			</div>

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

				<div class="col-lg-6 col-xl-4">
					{{ form_widget(form.recdDemandUnitPack, {'attr': { 'class': 'form-control','min':'1' }}) }}
					{{ form_errors(form.recdDemandUnitPack) }}
				</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, "");
		};
	});
	$('.select-picker').selectpicker();

	$('#indent_request_drug, #indent_request_labMaterial, #indent_request_essentialEquipment')
		.append($.htmlPrefilter('<option value="Other">Other</other>'))
		.select2({
			allowClear: true,
			placeholder: "Search Items"
		})
		.change(function () {
			if (this.value == 'Other') {
				this.value = '';

				$(this).parent().prev().removeClass('required');

				$(this).select2('destroy');

				$(this).prop('required', false);

				$(this).select2({
					allowClear: true,
					placeholder: "Search Items"
				});

				$('#indent_request_itemOther').prop('required', true);

				$('.other-row')
					.find('label')
					.addClass('required')
					.end()
					.show();
			} else {
				$('#indent_request_itemOther').prop('required', false);

				$('.other-row')
					.find('label')
					.removeClass('required')
					.end()
					.hide();

				$(this).parent().prev().addClass('required');

				$(this).select2('destroy');

				$(this).prop('required', true);

				$(this).select2({
					allowClear: true,
					placeholder: "Search Items"
				});
			}
		}).change();

	$('#indent_request_groupName').change(function () {
		if (!$(this).val()) {
			$(this).val('All');
		}

		if ($.inArray($(this).val(), ['All', 'Laboratory Items', 'Consumable', 'Other Items']) !== -1) {
			$('.lab-item, .drug-lab-item')
				.find('label').addClass('required')
				.end()
				.find('input, select').prop('required', true)
				.end()
				.show();

			$('.equip-item, .drug-item')
				.hide()
				.find('label').removeClass('required')
				.end()
				.find('input, select').prop('required', false);
		} else if ($.inArray($(this).val(), ['Drug Item', 'Vaccine']) !== -1) {
			$('.drug-item, .drug-lab-item')
				.find('label').addClass('required')
				.end()
				.find('input, select').prop('required', true)
				.end()
				.show();

			$('.equip-item, .lab-item')
				.hide()
				.find('label').removeClass('required')
				.end()
				.find('input, select').prop('required', false);
		} else {
			$('.equip-item')
				.find('label').addClass('required')
				.end()
				.find('input, select').prop('required', true)
				.end()
				.show();

			$('.drug-item, .lab-item, .drug-lab-item')
				.hide()
				.find('label').removeClass('required')
				.end()
				.find('input, select').prop('required', false);
		}
	}).change();
</script>
{% endblock %}