{% 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_set', "");
            return lookupid;
        }

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

            $("#site_settings_div").accordion({'collapsible': true, 'active': false, 'heightStyle': 'content'});

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


        function jump_to_item(){
            if (window.location.hash !== ''){
                let site_setting = $(window.location.hash);
                site_setting.parent().parent().parent().prevAll('h3').first().click();

                site_setting.css('background-color', 'lightblue');
                site_setting.siblings().css('background-color', 'lightblue');

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

    $(document).ready(function() {
        $('th').on('click', function() {
            const $table = $(this).closest('table');
            const columnIndex = $(this).index();
            const $tbody = $table.find('tbody');
            const $rows = $tbody.find('tr');
            const isAscending = $(this).data('order') === 'asc';

            $rows.sort(function(a, b) {
                const aValue = $(a).find('td').eq(columnIndex).text();
                const bValue = $(b).find('td').eq(columnIndex).text();

                if (!isAscending) {
                    return aValue.localeCompare(bValue);
                } else {
                    return bValue.localeCompare(aValue);
                }
            });

            $tbody.append($rows);
            $('th').removeAttr('data-order');
            $(this).data('order', isAscending ? 'desc' : 'asc');
        });

        jump_to_item();

        $(".copyable").click(function (event) {
            const copiedSpan = $(this).find("span");
            const id = $(this).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);
        });

        $("#preview-paths-div").dialog({
                autoOpen: false,
                closeOnEscape: true,
                modal: true,
                draggable: false,
                width: 1200,
                open: function (event, ui) {
                    $.ajax({
                        url: "{% url 'api:get_model_paths' %}",
                        type: "GET",
                        data: {
                            csrfmiddlewaretoken: '{{csrf_token}}',
                            source: $("#preview_type").val()
                        },
                        success: function (paths, status, jqXHR) {
                            paths.forEach(function(path) {
                                $('#preview-paths-div-content').append('<div>' + path + '</div>');
                            });
                        }
                    })
                },
                position: {my: "top", at: "top", of: window},
                buttons: [
                    {
                        text: "Close",
                        "class": 'modal-dialog-button-right',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });


            $("button[name$='-cust_col_preview_btn']").click(function (event) {
                let button_id = $(this).attr('id').split('-')[0];
                let setting_text = $('#' + button_id).next().text().toLowerCase();

                if (setting_text.includes('orders.order_requests')) {
                    $("#preview_type").val('order_requests')
                } else if (setting_text.includes('drugs.instances')) {
                    $("#preview_type").val('instances')
                } else if (setting_text.includes('pms.pms_requests')) {
                    $("#preview_type").val('pms_requests')
                } else if (setting_text.includes('orders.workorder_fulfillment')) {
                    $("#preview_type").val('workorder_fulfillment')
                } else if (setting_text.includes('orders.WorkorderTasks')) {
                    $("#preview_type").val('WorkorderTasks')
                }

                 $('#preview-paths-div-content').html('');
                 $("#preview-paths-div").dialog("open");
            });
    });
    </script>
    <style>
        th:hover {
            cursor: pointer;
        }
    </style>
{% endblock %}

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

{% block content %}
    <input type="hidden" name="preview_type" id="preview_type" value=""/>
    <div class="alert alert-info">
        When editing a Security setting, changes may take several minutes to go into effect.
    </div>
    <form id="siteSettingsForm" name="siteSettingsForm" method="POST">
        {% csrf_token %}
        <div id="site_settings_div" class="well">
        {% for group in setting_list %}
        <h3>{{ group.name }}</h3>
            <table class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th>Tag</th>
                    <th>Setting</th>
                    <th>Value</th>
                </tr>
                </thead>
                <tbody>
                {% for setfrm in group.list %}
                    <tr>
                        <td style="padding: 3px; margin-bottom: 5px;" id="{{setfrm.setting_tag}}" class="copyable">{{ setfrm.setting_tag }}<span style="display: none; margin-left: -70px; padding: 5px 12px; background-color: #000000df; border-radius: 4px; color: #fff; position: absolute;">Link to Setting Copied!</span></td>
                        <td title="Current Value: {{ setfrm.setting_frm.value.value }}" style="padding: 3px; margin-bottom: 5px;">
                            {{ setfrm.setting_desc }}:
                        </td>
                        <td style="padding: 3px; margin-bottom: 5px;">
                            {{ setfrm.setting_frm.value }}

                            {% if 'CUST_COL' in setfrm.setting_tag and 'HEADER' not in setfrm.setting_tag %}
                            <button type="button" class="btn btn-link" id="{{setfrm.setting_tag}}-cust_col_preview_btn" name="{{setfrm.setting_tag}}-cust_col_preview_btn" value="{{ setfrm.setting_desc }}" style="float: right;">
                                <i title="Preview Cust Col Values" class="icon-align-center"></i>
                            </button>
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        {% endfor %}
        </div>
        <!--button class="btn" id="apply-site-settings" name="apply-site-settings">Apply</button-->
    </form>

    <div id="preview-paths-div" title="View Cust Col paths" style="margin-left: 2px;">
        <div id="preview-paths-div-content">
            Loading path preview data...
        </div>
    </div>
{% endblock %}