{% extends "support.html" %}


{% block head %}
    {{ block.super }}
    <script>
        function get_attrib_id(field, field_name) {
            var lookupid = field.attr("id");
            lookupid = lookupid.replace(field_name, "");
            lookupid = lookupid.replace('id_attr', "");
            return lookupid;
        }

        function jump_to_item(){
            if (window.location.hash !== ''){
                let interface_attribute = $(window.location.hash);
                $(interface_attribute.children()).css('background-color', 'lightblue');

                let targetOffset = interface_attribute.offset().top - 200;
                $('html, body').animate({ scrollTop: targetOffset }, 100);
            }
        }


        $(function () {
            $(document).tooltip();
            jump_to_item();

            $(".copyable").click(function (event) {
                const copiedSpan = $(this).find("span");
                const id = $(this).parent().attr('id');

                const textArea = document.createElement("textarea");
                textArea.value = window.location.protocol + '//' + location.host + location.pathname + '#' + id;
                history.pushState({}, '', '#' + id);
                document.body.appendChild(textArea);
                textArea.select();

                try {
                    document.execCommand('copy');
                    copiedSpan.css('display', 'inline');
                    setTimeout( function() {
                        copiedSpan.css('display', 'none');
                    }, 1000)
                } catch (err) {
                    console.error('Unable to copy to clipboard', err);
                }
                document.body.removeChild(textArea);
            });


            $("[id$='-attr_value']").change(function () {
                var attrib_id = get_attrib_id($(this), "-attr_value");
                var fieldVal = $(this).val();
                if ($(this).is(':checkbox')) {
                    if ($(this).is(':checked')) {
                        fieldVal = "TRUE";
                    } else {
                        fieldVal = "FALSE";
                    }
                }
                $.post("{% url 'support:update-pms-interface-attribute-value' %}",
                    {'csrfmiddlewaretoken': '{{csrf_token}}',
                        attr_id: attrib_id,
                        field_val: fieldVal}
                );
            });
        });
    </script>
{% endblock %}

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

{% block content %}
    <p><a href="{% url 'support:support-manage-interface' %}">Back To Manage PMIS Interface</a></p>
    <form id="pmsAttribForm" name="pmsAttribForm" method="POST">
        {% csrf_token %}
        <div>
            <table class="table-striped">
                <tr>
                    <th>Tag</th>
                    <th>Setting</th>
                    <th>Value</th>
                </tr>
                {% for attrfrm in attrib_list.attrib_forms %}
                    <tr id="{{ attrfrm.attrib_tag }}">
                        <td style="padding: 3px; margin-bottom: 5px;" class="copyable">{{ attrfrm.attrib_tag }}<span style="display: none; margin-left: -70px; padding: 5px 12px; background-color: #000000df; border-radius: 4px; color: #fff; position: absolute;">Link to Interface Attribute Copied!</span></td>
                        <td title="Current Value: {{ attrfrm.attrib_frm.attr_value.value }}" style="padding: 3px; margin-bottom: 5px;">
                            {{ attrfrm.attrib_desc }}:
                        </td>
                        <td style="padding: 3px; margin-bottom: 5px;">{{ attrfrm.attrib_frm.attr_value }}</td>
                    </tr>
                {% endfor %}
            </table>
        </div>
    </form>
{% endblock %}