{% extends 'base.html' %}
{% load custom_tags_and_filters %}
{% load static %}
{% block title %}
    {% if form.instance.id %}
        Modify buddy request
    {% else %}
        New buddy request
    {% endif %}
{% endblock %}
{% block extrahead %}
    <script type="text/javascript" src="{% static "datetimepicker/bootstrap-datetimepicker.js" %}"></script>
    <link rel="stylesheet" type="text/css" href="{% static "datetimepicker/bootstrap-datetimepicker.css" %}" />
{% endblock %}
{% block content %}
    <h1 class="form-group">
        {% if form.instance.id %}
            Modify buddy request
        {% else %}
            New buddy request
        {% endif %}
    </h1>
    <form class="well"
          action="{% if form.instance.id %}{% url 'edit_buddy_request' form.instance.id %}{% else %}{% url 'create_buddy_request' %}{% endif %}"
          method="post">
        {% if form.non_field_errors %}<div class="alert alert-danger">{{ form.non_field_errors }}</div>{% endif %}
        {% csrf_token %}
        <div class="form-group">
            <div class="row">
                <div class="col-sm-2">
                    <label for="start">Start date</label>
                    {% if form.start.errors %}- <span style="color:red">{{ form.start.errors|striptags }}</span>{% endif %}
                    <input type="text"
                           class="form-control text-center"
                           name="start"
                           id="start"
                           value="{{ form.start.value|input_date_format }}"
                           required>
                </div>
                <div class="col-sm-2">
                    <label for="end">End date</label>
                    {% if form.end.errors %}- <span style="color:red">{{ form.end.errors|striptags }}</span>{% endif %}
                    <input type="text"
                           class="form-control text-center"
                           name="end"
                           id="end"
                           value="{{ form.end.value|input_date_format }}"
                           required>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="area_search">Area</label>
            {% if form.area.errors %}- <span style="color:red">{{ form.area.errors|striptags }}</span>{% endif %}
            <input type="text" id="area_search" name="area" class="form-control">
            <input type="button"
                   id="selected_area"
                   class="btn btn-default"
                   onclick="clear_area_selection()"
                   style="display:none">
        </div>
        <div class="form-group">
            <label for="description">Description</label>
            {% if form.description.errors %}- <span style="color:red">{{ form.description.errors|striptags }}</span>{% endif %}
            <textarea class="form-control"
                      rows="3"
                      name="description"
                      id="description"
                      maxlength="{{ form.fields.description.max_length }}"
                      placeholder="Describe your request"
                      required>{{ form.description.value|default_if_none:"" }}</textarea>
        </div>
        <div class="text-right">{% button type="save" value=form.instance.id|yesno:"Save changes,Create buddy request" %}</div>
    </form>
    <script>
		let timepicker_properties =
		{
			format: '{{ date_input_js_format }}',
            useCurrent: false
		};

		function select_area(jquery_event, search_selection, dataset_name)
		{
			$('#area_search').typeahead('val', search_selection.id).hide();
			$("#selected_area").val(search_selection.name).show();
		}
		function clear_area_selection()
		{
			$("#selected_area").hide();
			$('#area_search').typeahead('val', '').show().focus();
		}
		function on_load()
		{
			$('#area_search').autocomplete('area', select_area, {{ areas|json_search_base }});
            {% if form.cleaned_data %}
                {% if form.cleaned_data.area %}
                    select_area(false, {'id': '{{ form.cleaned_data.area.id }}', 'name': '{{ form.cleaned_data.area.name }}'});
                {% else %}
                    clear_area_selection();
                {% endif %}
            {% elif form.instance.id and form.instance.area %}
				select_area(false, {'id': '{{ form.instance.area.id }}', 'name': '{{ form.instance.area.name }}'});
			{% elif areas|length_is:1 %}
				let auto_select_area = {'id': '{{ areas.0.id }}', 'name': '{{ areas.0.name }}'};
				select_area(false, auto_select_area);
			{% endif %}
            set_start_end_datetime_pickers($('#start'), $('#end'), timepicker_properties);
		}

		$(on_load);
	
    </script>
{% endblock %}
