{% load static %}
{% load custom_tags_and_filters %}
{% block extrahead %}
    <script type="text/javascript" src="{% static "pickadate/picker.js" %}"></script>
    <script type="text/javascript" src="{% static "pickadate/picker.date.js" %}"></script>
    <script type="text/javascript" src="{% static "pickadate/picker.time.js" %}"></script>
    <link rel="stylesheet" type="text/css" href="{% static "pickadate/default.css" %}" />
    <link rel="stylesheet" type="text/css" href="{% static "pickadate/default.date.css" %}" />
    <link rel="stylesheet" type="text/css" href="{% static "pickadate/default.time.css" %}" />
{% endblock %}
<div class="row" style="margin-top:30px">
    <div class="col-xs-offset-3 col-xs-6"
         onclick="tool_information('{% url 'kiosk_tool_information' tool.id customer.id back %}')">
        <div class="alert alert-warning" style="text-align:center; margin-bottom:0; font-size:x-large">Go back</div>
    </div>
</div>
<h2>Create a new reservation</h2>
<form id="tool_reservation" method="post">
    {% csrf_token %}
    <input type="hidden" name="back" value="{{ back }}">
    <input type="hidden" name="tool_id" value="{{ tool.id }}">
    <input type="hidden" name="project_id" value="{{ project.id }}">
    <input type="hidden" name="customer_id" value="{{ customer.id }}">
    <h4>When would you like to reserve the {{ tool }}?</h4>
    <div class="form-group">
        <input type="text"
               id="start_date"
               name="start_date"
               aria-label="Reservation start date"
               class="form-control"
               placeholder="Choose a start date"
               required>
    </div>
    <div class="form-group">
        <input type="text"
               id="start"
               name="start"
               aria-label="Reservation start time"
               class="form-control"
               placeholder="Choose a start time"
               required>
    </div>
    <div class="form-group">
        <input type="text"
               id="end_date"
               name="end_date"
               aria-label="Reservation end date"
               class="form-control"
               placeholder="Choose an end date"
               required>
    </div>
    <div class="form-group">
        <input type="text"
               id="end"
               name="end"
               aria-label="Reservation end time"
               class="form-control"
               placeholder="Choose an end time"
               required>
    </div>
    <div class="form-group text-center" style="margin-top:40px">
        {% button type="save" submit=False style="text-align:center; margin-bottom:0; font-size:x-large" onclick="reserve_tool()" value="Create the reservation" %}
    </div>
</form>
<div style="height:350px"></div>
<script>
	let unavailable_times = [];
	{% for item in tool_reservation_times %}
	unavailable_times.push([{{ item.start|date:"U" }},{{ item.end|date:"U" }}]);
	{% endfor %}
	let start_date_picker = $('#start_date').pickadate(
    {
        format: "{{ pickadate_date_format }}",
        formatSubmit: "yyyy-mm-dd",
        firstDay: 1,
        hiddenName: true,
        onSet: function(event)
        {
            let date = start_date_picker.pickadate('picker').get('select', '{{ pickadate_date_format }}');
            end_date_picker.pickadate('picker').set('select', date);
            refresh_times();
        }
    });
	let end_date_picker = $('#end_date').pickadate({format: "{{ pickadate_date_format }}", formatSubmit: "yyyy-mm-dd", firstDay: 1, hiddenName: true, onSet: refresh_times});
	let start_time_picker = $('#start').pickatime({interval: 15, format: "{{ pickadate_time_format }}", formatSubmit: "H:i", hiddenName: true, formatLabel: format_labels(true)});
	let end_time_picker = $('#end').pickatime({interval: 15, format: "{{ pickadate_time_format }}", formatSubmit: "H:i", hiddenName: true, formatLabel: format_labels(false)});
	// set initial date
	if ('{{ start_date|default_if_none:'' }}')
    {
		start_date_picker.pickadate('picker').set('select', '{{ start_date }}', {format: '{{ pickadate_date_format }}'});
	}
	function refresh_times()
    {
		start_time_picker.pickatime('picker').render();
		end_time_picker.pickatime('picker').render();
	}
	function format_labels(is_start)
    {
        return function format_label(time)
        {
            let date_picker = is_start ? start_date_picker : end_date_picker;
            if (date_picker.pickadate('picker').get('select') && unavailable_times.length > 0)
            {
                let date_selected = date_picker.pickadate('picker').get('select').pick; // selected date in milliseconds
                let time_selected = time.pick * 60 * 1000; // time in milliseconds
                let date_time_selected = (date_selected + time_selected)/1000; // back to seconds to compare with python timestamp
                for (let i=0 ; i < unavailable_times.length; i++)
                {
                    let times = unavailable_times[i];
                    let start = times[0];
                    let end = times[1];
                    if (date_time_selected >= start && date_time_selected < end)
                    {
                        return '<sp !an>{{ pickadate_time_format }}</sp !an> <sm !all> !alre!ad!y re!serve!d</sm !all>';
                    }
                }
            }
            return '{{ pickadate_time_format }}';
        }
    }
	revert(120)
</script>
