{% extends "support.html" %}

{% block head %}
    {{ block.super }}
    <script>
        $(function () {
            $(document).tooltip();

            let error_code_list = [
                {% for ec in error_code_list %}
                    {"id": "{{ ec.id }}", "tag": "{{ ec.tag }}"}{% if not forloop.last %},{% endif %}
                {% endfor %}
            ];

            $("input[id$='-email-list']").change(function () {
                $.post("{% url 'support:support-update-alerter-rule-email-list' %}",
                        {'csrfmiddlewaretoken': '{{csrf_token}}',
                            rule_id: $(this).attr("id").replace("-email-list", ""),
                            field_val: $(this).val()});
            });

            $("input[id$='-active']").click(function () {
                $.post("{% url 'support:support-update-alerter-rule-active' %}",
                        {'csrfmiddlewaretoken': '{{csrf_token}}',
                            rule_id: $(this).attr("id").replace("-active", ""),
                            field_val: $(this).prop("checked")});
            });

            $('#editErrorCodesBtn').click(function () {
                $('#errorCodeModal').modal('show');
            });

            $('#errorCodeModalClose').click(function () {
                $('#errorCodeModal').modal('hide');
            });

            $('#errorCodeModalSave').click(function () {
                let selected_ids = $('#errorCodeModal input[type="checkbox"]:checked').map(function () {
                    return $(this).val();
                }).get();

                $.post("{% url 'support:support-update-alerter-rule-error-code-list' %}",
                    {
                        'csrfmiddlewaretoken': '{{csrf_token}}',
                        field_val: selected_ids.join(',')
                    });

                let tag_lines = selected_ids.length > 0
                    ? selected_ids.map(function (id) {
                        let match = error_code_list.find(function (ec) { return ec.id === id; });
                        return match ? match.tag : id;
                    }).join('<br>') + '<br>'
                    : 'None';

                $('#errorCodeTagDisplay').html(tag_lines);
                $('#errorCodeModal').modal('hide');
            });

            $('#alerterHelpBtn').click(function () {
                $('#alerterHelpModal').modal('show');
            });
        });
    </script>
{% endblock %}

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

{% block content %}
    <span style="font-size: 12pt; background-color: lightyellow;">
        <b>Alerter Service Enabled?</b> {% if alerter_poll_interval > 0 and alerter_status == 'active' %}Yes{% else %}No{% endif %}
        | <b>Alerter Poll Interval:</b> {{ alerter_poll_interval }}
        | <b>Alerter Systemctl Status:</b>
        {% if alerter_status == 'active' %}
            <span style="color: green;">{{ alerter_status }}</span>
        {% elif alerter_status == 'failed' %}
            <span style="color: red;">{{ alerter_status }}</span>
        {% else %}
            {{ alerter_status }}
        {% endif %}
        <a id="alerterHelpBtn" style="display: inline-block; width: 18px; height: 18px; background-color: #337ab7; color: white; border-radius: 50%; text-align: center; line-height: 18px; font-size: 11px; font-weight: bold; cursor: pointer; text-decoration: none; margin-left: 4px;">?</a>
    </span>
    <div id="alerterHelpModal" class="modal hide fade" tabindex="-1">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4>Alerter Setup Help</h4>
        </div>
        <div class="modal-body">
            <p><strong>1) Set the Poll Interval</strong><br>
            Set <code>ALERTER_POLL_INTERVAL</code> to a value greater than 0. This controls how often the alerter checks whether emails need to be sent.<br>
            <a href="/support/site_settings/#ALERTER_POLL_INTERVAL" target="_blank">ALERTER_POLL_INTERVAL</a></p>
            <hr>
            <p><strong>2) Enable the Alerter Service</strong><br>
            If the alerter is not listed as <em>active</em>, SSH into the site server and run:<br>
            <code>systemctl enable dosis-alerter && systemctl start dosis-alerter</code></p>
            <p><strong>2a) Service Still Not Active?</strong><br>
            If the service is still not active after running the above, run the following for details on why it failed:<br>
            <code>stat_alerter</code></p>
            <hr>
            <p><strong>— Disabling the Alerter —</strong></p>
            <p><strong>1) Disable the Alerter Service</strong><br>
            To disable the alerter, set <code>ALERTER_POLL_INTERVAL</code> to 0.<br>
            <a href="/support/site_settings/#ALERTER_POLL_INTERVAL" target="_blank">ALERTER_POLL_INTERVAL</a></p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
    <form id="alerterRuleManageForm" name="alerterRuleManageForm" method="POST">
    {% csrf_token %}
    <table class="table table-bordered table-striped">
        <thead style="position: sticky; top: 0;">
        <tr class="dosis-report-header">
            <th>Tag</th>
            <th>Description</th>
            <th>Email List</th>
            <th>Error Code List</th>
            <th>Active</th>
        </tr>
        </thead>
        <tbody>
        {% for rule in rule_list %}
            <tr>
                <td style="padding-bottom: 2px;">{{ rule.tag }}</td>
                <td style="padding-bottom: 2px;">{{ rule.description }}</td>
                <td style="padding-bottom: 2px;"><input type="text" id="{{ rule.id }}-email-list"
                                                        name="{{ rule.id }}-email-list" value="{% if rule.email_list %}{{ rule.email_list }}{% endif %}"
                                                        style="width: 50em;"></td>
                <td style="padding-bottom: 2px;">
                    {% if rule.tag == 'CUSTOM_ERROR_CODE_TRIGGER' %}
                        <span id="errorCodeTagDisplay">
                            {% if not rule.error_code_list %}
                                None
                            {% else %}
                                {% for ec in error_code_list %}
                                    {% if ec.id|stringformat:"s" in rule.error_code_list %}
                                        {{ ec.tag }}<br>
                                    {% endif %}
                                {% endfor %}
                            {% endif %}
                        </span>
                        <br>
                        <button type="button" id="editErrorCodesBtn" class="btn btn-xs btn-primary" style="margin-top: 6px;">
                            Edit
                        </button>
                    {% else %}
                        N/A
                    {% endif %}
                </td>
                <td style="padding-bottom: 2px;"><input type="checkbox" id="{{ rule.id }}-active" name="{{ rule.id }}-active" value="{{ rule.id }}"
                             {% if rule.active %}checked="checked"{% endif %}></td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    </form>

    {% for rule in rule_list %}
        {% if rule.tag == 'CUSTOM_ERROR_CODE_TRIGGER' %}
        <div id="errorCodeModal" class="modal hide fade" tabindex="-1">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Edit Error Codes</h4>
            </div>
            <div class="modal-body">
                {% for ec in error_code_list %}
                    <div>
                        <label>
                            <input type="checkbox"
                                   name="error-code-{{ ec.id }}"
                                   value="{{ ec.id }}"
                                   {% if ec.id|stringformat:"s" in rule.error_code_list %}checked="checked"{% endif %}>
                            {{ ec.tag }}
                        </label>
                    </div>
                {% endfor %}
            </div>
            <div class="modal-footer">
                <button type="button" id="errorCodeModalSave" class="btn btn-primary">Save</button>
                <button type="button" id="errorCodeModalClose" class="btn btn-default">Close</button>
            </div>
        </div>
        {% endif %}
    {% endfor %}
{% endblock %}