{% extends "support.html" %}


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

        function update_setting_val(obj) {
            var setting_id = get_setting_id(obj, "-value");
            var fieldVal = obj.val();
            if (obj.is(':checkbox')) {
                if (obj.is(':checked')) {
                    fieldVal = "TRUE";
                } else {
                    fieldVal = "FALSE";
                }
            }
            $.post("{% url 'support:update-printer-setting-value' %}",
                    {
                        'csrfmiddlewaretoken': '{{csrf_token}}',
                        setting_id: setting_id,
                        field_val: fieldVal
                    }
            );
        }

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

            $("[id$='-value']").change(function () {
                update_setting_val($(this));
            });

            $("[id$='-value-updbtn']").click(function () {
                var setid = get_setting_id($(this), "-value-updbtn");
                update_setting_val($("#id_prt" + setid + "-value"));
            });

            $("[id$='-value']").each(function () {
                if ($(this).is("select")) {
                    if ($(this).children('option').length == 1) {
                        var setting_id = get_setting_id($(this), "-value");
                        $("#id_prt" + setting_id + "-value-updbtn").show();
                    }
                }
            });

            let parsedUrl = new URL(window.location.href);
            let printer_setting = parsedUrl.searchParams.get('printer_setting');
            $('#printer-setting-table td').each(function() {
                if ($(this).text() === printer_setting) {
                    $(this).css('background-color', 'lightblue')
                    $(this).siblings().css('background-color', 'lightblue');
                    let targetOffset = $(this).offset().top;
                    $('html, body').animate({ scrollTop: targetOffset }, 100);
                }
            });
        });
    </script>
{% endblock %}

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

{% block content %}
    <form id="printSettingsForm" name="printSettingsForm" method="POST">
        {% csrf_token %}
        <div>
            <table id="printer-setting-table" class="table-striped">
                <tr>
                    <th>Tag</th>
                    <th>Setting</th>
                    <th>Value</th>
                </tr>
                {% for prtfrm in setting_list.setting_forms %}
                    <tr>
                        <td style="padding: 3px; margin-bottom: 5px;">{{ prtfrm.setting_tag }}</td>
                        <td title="Current Value: {{ prtfrm.setting_frm.value.value }}"
                            style="padding: 3px; margin-bottom: 5px;">
                            {{ prtfrm.setting_desc }}:
                        </td>
                        <td style="padding: 3px; margin-bottom: 5px;">{{ prtfrm.setting_frm.value }}</td>
                        <td style="padding: 3px; margin-bottom: 5px;">
                            <button type="button" style="display: none;" id="id_{{ prtfrm.setting_frm.value.html_name }}-updbtn"
                                    name="{{ prtfrm.setting_frm.value.html_name }}-updbtn">Update
                            </button>
                        </td>
                    </tr>
                {% endfor %}
            </table>
        </div>
        <!--button class="btn" id="apply-print-settings" name="apply-print-settings">Apply</button-->
    </form>
{% endblock %}