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

{% block body %}
<!-- BEGIN: Subheader -->
<div class="m-subheader">
    <div class="d-flex align-items-center">
        <div class="mr-auto">
            <h3 class="m-subheader__title">Analytics - Forecasting</h3>
        </div>
    </div>
</div>
<!-- END: Subheader -->
<div class="m-content">
    <!--Begin::Section-->
    <div class="row">
        <div class="col-xl-12">
            <div class="m-portlet m-portlet--mobile">
                <div class="m-portlet__head">
                    <div class="m-portlet__head-caption">
                        <div class="m-portlet__head-title">
                            <span class="m-portlet__head-icon">
                                <i class="fa fa-building"></i>
                            </span>
                            <h3 class="m-portlet__head-text">
                                Forecasting Variables
                            </h3>
                        </div>
                    </div>
                </div>
                <form id="row-form" class="m-form m-form--fit m-form--label-align-right m-form--group-seperator-dashed" method="post" action="{{ url('analytics_forecast_submit') }}">

                    <div class="m-portlet__body">
                        <div class="form-group m-form__group row no-border">
                            <div class="col-lg-6">
                                <label data-field="shift_schedule">Shift Schedule</label>
                                <select id="shift_schedule" class="form-control m-input" name="shift_schedule">
                                    {% for key, schedule in shift_schedules %}
                                        <option value="{{ key }}">{{ schedule }}</option>
                                    {% endfor %}
                                </select>
                                <div class="form-control-feedback hide" data-field="shift_schedule"></div>
                            </div>
                        </div>
                        <div class="form-group m-form__group row no-border">
                           <div class="col-lg-6">
                               <label data-field="time_from">Restrict Time From</label>
                               <div class="input-group">
                                   <input type="time" name="time_from" id="time_from" class="form-control m-input" value="">
                               </div>
                               <div class="form-control-feedback hide" data-field="date_from"></div>
                           </div>
                           <div class="col-lg-6">
                               <label data-field="time_to">Restrict Time To</label>
                               <div class="input-group">
                                   <input type="time" name="time_to" id="time_to" class="form-control m-input" value="">
                               </div>
                               <div class="form-control-feedback hide" data-field="date_from"></div>
                           </div>
                        </div>
                        <div class="form-group m-form__group row no-border">
                           <div class="col-lg-6">
                               <label data-field="date_from">Date From</label>
                               <div class="input-group date dp">
                                   <input type="text" name="date_from" id="date_from" class="form-control m-input" value="{{ "now"|date('d M Y') }}" readonly placeholder="Select a date" >
                                   <span class="input-group-addon">
                                       <i class="la la-calendar glyphicon-th"></i>
                                   </span>
                               </div>
                               <div class="form-control-feedback hide" data-field="date_from"></div>
                           </div>
                           <div class="col-lg-6">
                                <label data-field="date_to">Date To</label>
                                <div class="input-group date dp">
                                    <input type="text" name="date_to" id="date_to" class="form-control m-input" value="{{ "now"|date('d M Y') }}" readonly placeholder="Select a date" >
                                    <span class="input-group-addon">
                                        <i class="la la-calendar glyphicon-th"></i>
                                    </span>
                                </div>
                                <div class="form-control-feedback hide" data-field="date_to"></div>
                            </div>
                        </div>

                        {% for hub_id in default_hubs %}
                        <div class="row no-border" style="padding-left: 30px; padding-right: 30px; padding-bottom: 10px;">
                            <div class="col-lg-6">
                                <select name="hub_ids[]" class="form-control m-input">
                                {% for key, label in hub_list %}
                                    <option value="{{ key }}" {{ hub_id == key ? ' selected' : ''}}>{{ label }}</option>
                                {% endfor %}
                                </select>
                                <div class="form-control-feedback hide" data-field="name"></div>
                            </div>
                            <div class="col-lg-3">
                                <input type="text" name="distances[]" class="form-control m-input" value="5000">
                                <div class="form-control-feedback hide" data-field="branch"></div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    <div class="m-portlet__foot m-portlet__foot--fit">
                        <div class="m-form__actions m-form__actions--solid m-form__actions--right">
                            <div class="row">
                                <div class="col-lg-12">
                                    <button type="submit" class="btn btn-success">Submit</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}


{% block scripts %}

<script>

$(function() {
	// datepicker
	$(".dp").datepicker({
		format: "dd M yyyy",
		todayHighlight: true,
		autoclose: true,
		pickerPosition: 'top-left',
		bootcssVer: 3,
		clearBtn: true
	});
});
</script>
{% endblock %}