{% extends 'base/popup.html' %}
{% load custom_tags_and_filters %}
{% block title %}{% if form.instance.pk %}Modify staff absence{% else %}New staff absence{% endif %}{% endblock %}
{% block content %}
<form id="absence_form" class="form-horizontal" action="{% if form.instance.pk %}{% url 'edit_staff_absence' form.instance.pk %}{% else %}{% url 'create_staff_absence' %}{% endif %}?timestamp={{ page_timestamp }}" method="post">
    {% csrf_token %}
    {% if form.non_field_errors %}
        <div class="alert alert-danger">
            {{ form.non_field_errors }}
        </div>
    {% endif %}
    <div class="form-group">
        <label class="col-sm-3 control-label" for="staff_member_search">Staff</label>
        <div class="col-sm-9">
            <input type="text" id="staff_member_search" name="staff_member" class="form-control">
            <input type="button" id="selected_staff_member" class="btn btn-default" onclick="clear_staff_member_selection()" style="display:none">
        </div>
        {% if form.staff_member.errors %}
            <div class="col-sm-9 col-sm-offset-3" style="color:red">{{ form.staff_member.errors|striptags }}</div>
        {% endif %}
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label" for="absence_type">Absence type</label>
        <div class="col-sm-9">
            <select class="form-control" name="absence_type" id="absence_type">
                <option value="" disabled selected></option>
                {% for x, y in form.fields.absence_type.choices %}
                    {% if x %}
                        <option value="{{ x }}"{% if form.absence_type.value|to_int == x %} selected{% endif %}>{{ y }}</option>
                    {% endif %}
                {% endfor %}
            </select>
        </div>
        {% if form.absence_type.errors %}
            <div class="col-sm-9 col-sm-offset-3" style="color:red">{{ form.absence_type.errors|striptags }}</div>
        {% endif %}
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label" for="start_date">Start</label>
        <div class="col-sm-4">
            <input type="text" class="form-control text-center" name="start_date" id="start_date" value="{{ form.start_date.value|to_date:'m/d/Y' }}" required>
        </div>
        <label class="col-sm-1 control-label" for="end_date">End</label>
        <div class="col-sm-4">
            <input type="text" class="form-control text-center" name="end_date" id="end_date" value="{{ form.end_date.value|to_date:'m/d/Y' }}" required>
        </div>
        {% if form.start_date.errors or form.end_date.errors %}
            <div class="col-sm-4 col-sm-offset-3">{% if form.start_date.errors %}<span style="color:red">{{ form.start_date.errors|striptags }}</span>{% endif %}</div>
            <div class="col-sm-4 col-sm-offset-1">{% if form.end_date.errors %}<span style="color:red">{{ form.end_date.errors|striptags }}</span>{% endif %}</div>
        {% endif %}
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">All day</label>
        <div class="col-sm-9">
            <div class="checkbox">
                <label><input id="full_day" name="full_day" type="checkbox" {% if form.full_day.value %}checked{% endif %}> {{ form.full_day.help_text }}</label>
            </div>
        </div>
        {% if form.full_day.errors %}
            <div class="col-sm-9 col-sm-offset-3" style="color:red">{{ form.full_day.errors|striptags }}</div>
        {% endif %}
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label" for="absence_description">Description</label>
        <div class="col-sm-9">
            <textarea class="form-control" oninput="auto_size_textarea(this)" id="absence_description" name="description">{{ form.description.value|default_if_none:'' }}</textarea>
        </div>
        <div class="col-sm-9 col-sm-offset-3 italic" style="font-size: x-small">{{ form.description.help_text }}</div>
        {% if form.description.errors %}
            <div class="col-sm-9 col-sm-offset-3" style="color:red">{{ form.description.errors|striptags }}</div>
        {% endif %}
    </div>
    <div class="form-group">
        {% if form.instance.pk %}
            <div class="col-sm-5 col-sm-offset-3 text-left">
                <button type="button" class="btn btn-danger pull-left" onclick="window.location ='{% url 'delete_staff_absence' form.instance.pk %}?timestamp={{ page_timestamp }}'">Delete</button>
            </div>
        {% endif %}
        <div class="text-right {% if form.instance.pk %}col-sm-4{% else %}col-sm-12{% endif %}">
            <input type="button" class="btn btn-success" onclick="submit_form(this.form)" value="{% if form.instance.pk %}Save changes{% else %}Create staff absence{% endif %}">
        </div>
    </div>
</form>
<script>
    function absence_callback(response, status, xml_http_request)
    {
        if(response)
        {
            $("#dialog .modal-content").html(response);
            $("#dialog").modal('show');
        }
        else
        {
            window.location = '{% url 'status_dashboard_tab' 'staff' %}?timestamp={{ page_timestamp }}';
        }
    }

    function submit_form(form)
    {
        let post_data = serialize("#" + form.id);
        ajax_post(form.action, post_data, absence_callback);
    }

    let staff_member_search_jq = $('#staff_member_search');
    function select_staff_member(jquery_event, search_selection, dataset_name)
    {
        staff_member_search_jq.typeahead('val', search_selection.id).hide();
        $("#selected_staff_member").val(search_selection.name).show();
    }
    function clear_staff_member_selection()
    {
        $("#selected_staff_member").hide();
        staff_member_search_jq.typeahead('val', '').show().focus();
    }
    staff_member_search_jq.autocomplete('staff_member', select_staff_member, {{ staff_members|json_search_base }});
    {% if form.cleaned_data %}
        {% if form.cleaned_data.staff_member %}
            select_staff_member(false, {'id': '{{ form.cleaned_data.staff_member.id }}', 'name': '{{ form.cleaned_data.staff_member }}'});
        {% else %}
            clear_staff_member_selection();
        {% endif %}
    {% elif form.instance.staff_member %}
        select_staff_member(false, {'id': '{{ form.instance.staff_member.id }}', 'name': '{{ form.instance.staff_member }}'});
    {% endif %}

    let timepicker_properties =
    {
        format: 'MM/DD/YYYY',
        useCurrent: false,
        {# Setting view date according to the current week view. Javascript Date takes ms so we need to multiply by 1000 #}
        viewDate: new Date({% widthratio page_timestamp 1 1000 %})
    };
    set_start_end_datetime_pickers($('#start_date'), $('#end_date'), timepicker_properties);
    $("#dialog").one('shown.bs.modal', function()
    {
        auto_size_textarea(document.getElementById('absence_description'));
    });
</script>
{% endblock %}