{% extends "site.html" %}

{% block head %}
    {{ block.super }}
    <script>

    function updateHeader(element, itm_disp, row_id) {
        let element_disp = itm_disp;

        $(row_id).removeClass("maintlog-red");
        let status = $(row_id).parent().children("tr.maintlog-red").length;

        if (status > 0) {
            element.removeClass("maintlog-blue");
            element.addClass("maintlog-red");
            element_disp = element_disp + "&nbsp;&nbsp;&nbsp;&nbsp; " + status + " maintenance items are overdue!";
        } else {
            element.removeClass("maintlog-red");
            element.addClass("maintlog-blue");
        }

        element.html(element_disp);
    }

    $(function () {
        $("#maint-groups-div").accordion({'collapsible': true, 'active': false, 'heightStyle': 'content'});

        $("#sel_no_sec_user").on('change', function() {
            if (this.value.length > 0) {
                $("button[id$='-mark-done']").prop("disabled",false);
                $("input[id$='-notes']").prop("disabled",false);
            } else {
                $("button[id$='-mark-done']").prop("disabled",true);
                $("input[id$='-notes']").prop("disabled",true);
            }
        });

        $(document).on("click", "button[id$='-mark-done']", function(event) {
            let ids = $(this).attr("id").replace("-mark-done", "");
            let id_arr = ids.split("-");
            let note_field = $("input[id='" + ids + "-notes']");
            let itm_disp = $(this).val();
            $.post("{% url 'site:mark-maintenance-task-complete' %}",
                {'csrfmiddlewaretoken': '{{csrf_token}}',
                    dafe_id: id_arr[0],
                    maint_log_task_id: id_arr[1],
                    notes: note_field.val(),
                    no_sec_user_id: $("#sel_no_sec_user").val()
                },
                    function(response) {
                        let row_id = "#" + id_arr[0] + "-" + id_arr[1] + "-row";
                        $(row_id).html(response);
                        updateHeader($("#" + id_arr[0] + "-header"), itm_disp, row_id);
                    }
                );
        });
    });
    </script>
{% endblock %}

{% block pagehead %}
    {% include 'pagehead.html' %}
{% endblock %}

{% block content %}
    <form id="maintRecordForm" name="maintRecordForm" method="POST">
        {% csrf_token %}
        {% if not security_enabled %}
            <div id="maint_user_no_sec"><select style="width: auto;" id="sel_no_sec_user" name="sel_no_sec_user">
                <option value="">--Select a User--</option>
                {% for user in no_sec_user_list %}
                    <option value="{{ user.id }}">{{ user.username }}</option>
                {% endfor %}
            </select></div>
        {% endif %}
        <div id="maint-groups-div" class="well well-small">
            {% for itm in report_list %}
                <h3 id="{{ itm.id }}-header" style="font-size: x-large" {% if itm.overdue_items > 0 %}class="maintlog-red"{% else %}class="maintlog-blue"{% endif %}>{{ itm.display_name }}
                {% if itm.overdue_items > 0 %}&nbsp;&nbsp;&nbsp;&nbsp; {{ itm.overdue_items }} maintenance items are overdue!{% endif %}
                </h3>
                <div>
                    <table class="table table-bordered">
                        <caption style="font-weight:bold; font-size: 12pt;">Maintenance Tasks</caption>
                        <thead>
                            <tr>
                                <th>Task</th>
                                <th>Frequency</th>
                                <th>Last Completed Date</th>
                                <th>Last Completed By</th>
                                <th>Next Due</th>
                                <th>Previous Notes</th>
                                <th>Notes</th>
                                <th><i class="icon-th-list"></i></th>
                            </tr>
                        </thead>
                        <tbody>
                        {% for task in itm.tasks %}
                            <tr id="{{ itm.id }}-{{ task.id }}-row" {% if task.is_overdue %}class="maintlog-red"{% endif %}>
                            {% include "record-maint-activity-body.html" %}
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% endfor %}
        </div>
    </form>
{% endblock %}