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

{% block title %}Apply for Leave{% endblock %}

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

	{{ form_start(form, { 'attr': { 'class': 'kt-form','autocomplete':'off' }}) }}
		<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">Apply for Leave</h3>
					</div>

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

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

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

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

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

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

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

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

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

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

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

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

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

						<div class="col-lg-6 col-xl-4">
							{{ form_widget(form.notes, {'attr': { 'class': 'form-control','maxlength':'255','minlength':'10', 'onkeydown':"return /[0-9a-zA-Z ]/i.test(event.key)"}}) }}
							{{ form_errors(form.notes) }}
						</div>
					</div>
				</div>
	  	</div>
		</div>
	{{ form_end(form) }}
{% endblock %}

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

	<script>
    var arrows;

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

    if (KTUtil.isRTL()) {
      arrows = {
        leftArrow: '<i class="la la-angle-right"></i>',
        rightArrow: '<i class="la la-angle-left"></i>'
      };
    } else {
      arrows = {
        leftArrow: '<i class="la la-angle-left"></i>',
        rightArrow: '<i class="la la-angle-right"></i>'
      };
    }

    $('#staff_leave_history_startDate, #staff_leave_history_endDate').datepicker({
      rtl: KTUtil.isRTL(),
      autoclose: true,
      todayHighlight: true,
      orientation: "bottom left",
      templates: arrows,
      startDate: '+0d',
      format: 'yyyy-mm-dd'
    });

    $('#staff_leave_history_isHalfLeave').change(function() {
    	if (this.checked) {
    		$('#period-row')
    			.find('label').addClass('required')
    			.end()
    			.find('select').prop('required', true)
    			.end()
    			.show();
    	} else {
    		$('#period-row')
    			.hide()
    			.find('label').removeClass('required')
    			.end()
    			.find('select').prop('required', false);
    	}
    }).change();
	</script>
{% endblock %}