{% extends "support.html" %}
{% load static %}

{% block head %}
    {{ block.super }}
    <script src="{% static 'js/monaco-editor/vs/loader.js' %}"></script>
    <script src="{% static 'js/dosis-monaco-wrapper.js' %}"></script>
    <link rel="stylesheet" href="{% static 'css/dosis-monaco-wrapper.css' %}" />
    <script>
        function get_lookup_id(field, field_name) {
            var lookupid = field.attr("id");
            lookupid = lookupid.replace(field_name, "");
            return lookupid;
        }

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

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

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

            let monaco_dosis_editor = null;
            let monaco_extdb_editor = null;
            let dosis_diff_tracker = null;
            let extdb_diff_tracker = null;

            let original_extdb_sql = $('#id_extdb_sql').val();
            let original_dosisdb_sql = $('#id_d2db_sql').val();

            $('.sql-accordion-toggle').click(function() {
                let target = $($(this).data('target'));
                let icon = $(this).find('i');

                target.slideToggle(200, function() {
                    if (target.is(':visible')) {
                        icon.removeClass('icon-chevron-right').addClass('icon-chevron-down');
                        if (monaco_dosis_editor) {
                            monaco_dosis_editor.layout();
                        }
                        if (monaco_extdb_editor) {
                            monaco_extdb_editor.layout();
                        }
                    } else {
                        icon.removeClass('icon-chevron-down').addClass('icon-chevron-right');
                    }
                });
            });

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

                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);
            });

            $("input[id$='-active']").click(function () {
                $.post("{% url 'support:support-update-pms-extdb-request-lookup-active' %}",
                        {'csrfmiddlewaretoken': '{{csrf_token}}',
                            lookup_id: get_lookup_id($(this), "-active"),
                            field_val: $(this).prop("checked")});
            });

            $("#edit-pms-extdb-request-lookup").dialog({
                autoOpen: $('#id_tag').length > 0,
                closeOnEscape: false,
                modal: true,
                draggable: false,
                width: 1400,
                open: function (event, ui) {
                    $(this).closest('.ui-dialog').find('.ui-dialog-content').on('mousedown', '#monaco-d2db-sql, #monaco-extdb-sql', function (event) {
                        event.stopPropagation();
                    });
                    if (monaco_dosis_editor) {
                        monaco_dosis_editor.layout();
                    }
                    if (monaco_extdb_editor) {
                        monaco_extdb_editor.layout();
                    }
                },
                buttons: [
                    {
                        text: "Close",
                        "class": 'modal-dialog-button-right',
                        click: function () {
                            let has_changes = false;
                            if (monaco_dosis_editor && monaco_dosis_editor.getValue() !== original_dosisdb_sql) {
                                has_changes = true;
                            }
                            if (monaco_extdb_editor && monaco_extdb_editor.getValue() !== original_extdb_sql) {
                                has_changes = true;
                            }

                            if (has_changes) {
                                $("#unsaved-changes-confirm").dialog("open");
                            } else {
                                $(this).dialog("close");
                                window.location.href = "{% url 'support:support-manage-pms-extdb-request-lookup' pms.id %}?sort={{ current_sort }}";
                            }
                        }
                    },
                    {
                        text: "Revert All",
                        "class": 'modal-dialog-button-right',
                        click: function () {
                            if (dosis_diff_tracker) {
                                dosis_diff_tracker.clearZones();
                            }
                            if (extdb_diff_tracker) {
                                extdb_diff_tracker.clearZones();
                            }
                            if (monaco_dosis_editor) {
                                monaco_dosis_editor.setValue(original_dosisdb_sql);
                            }
                            if (monaco_extdb_editor) {
                                monaco_extdb_editor.setValue(original_extdb_sql);
                            }
                        }
                    },
                    {
                        text: "Save",
                        "class": 'modal-dialog-button-left',
                        click: function () {
                            $("#editExtdbRequestLookupForm").validate();
                            if ($("#editExtdbRequestLookupForm").valid()) {
                                document.editExtdbRequestLookupForm.submit();
                                $(this).dialog("close");
                            }
                        }
                    }
                ]
            });

            $("#unsaved-changes-confirm").dialog({
                autoOpen: false,
                closeOnEscape: false,
                modal: true,
                draggable: false,
                width: 400,
                buttons: [
                    {
                        text: "Stay",
                        "class": 'modal-dialog-button-left',
                        click: function () {
                            $(this).dialog("close");
                        }
                    },
                    {
                        text: "Discard Changes",
                        "class": 'modal-dialog-button-right',
                        click: function () {
                            $(this).dialog("close");
                            $("#edit-pms-extdb-request-lookup").dialog("close");
                            window.location.href = "{% url 'support:support-manage-pms-extdb-request-lookup' pms.id %}?sort={{ current_sort }}";
                        }
                    }
                ]
            });

            $("#diff-data-modal").dialog({
                autoOpen: false,
                closeOnEscape: false,
                modal: true,
                draggable: false,
                width: 1600,
                position: { my: "top", at: "top", of: window },
                buttons: [
                    {
                        text: "Close",
                        "class": 'modal-dialog-button-left',
                        click: function () {
                            $(this).dialog("close");
                            $('#diff-dosis-output').html('No Dosis DB changes made');
                            $('#diff-extdb-output').html('No External DB changes made');
                        }
                    }
                ],
                open: function () {
                    $('html, body').scrollTop(0);
                    $(this).dialog("option", "position", { my: "top", at: "top", of: window });
                    $(this).scrollTop(0);
                }
            });

            $("#btn-add-extdb-request-lookup").click(function () {
                window.location.href = "{% url 'support:support-add-pms-extdb-request-lookup' pms.id %}";
            });

            if ($('#id_tag').length) {
                $("#editExtdbRequestLookupForm").validate({
                    onkeyup: false,
                    errorContainer: $("#edit-extdb-request-lookup-validation-alert"),
                    errorLabelContainer: $("ul", $("#edit-extdb-request-lookup-validation-alert")),
                    wrapper: 'li'
                });

                $("#id_tag").keyup(function () {
                    this.value = this.value.toUpperCase();
                });

                $("#id_tag").rules('add', {
                    required: true,
                    messages: {
                        required: "External Db Request Lookup tag cannot be blank."
                    }
                });

                $("#id_description").rules('add', {
                    required: true,
                    messages: {
                        required: "External Db Request Lookup description cannot be blank."
                    }
                });

                $("#id_d2db_fields").rules('add', {
                    required: true,
                    messages: {
                        required: "External Db Request Lookup Dosis database fields cannot be blank."
                    }
                });

                $("#id_extdb_fields").rules('add', {
                    required: true,
                    messages: {
                        required: "External Db Request Lookup external database fields cannot be blank."
                    }
                });

                $("#id_proc_order").rules('add', {
                    required: true,
                    digits: true,
                    messages: {
                        required: "External Db Request Lookup processing order cannot be blank.",
                        digits: "External Db Request Lookup processing order must be numeric."
                    }
                });
            }

            require.config({
                paths: {
                    vs: "{% static 'js/monaco-editor/vs' %}"
                }
            });

            require(['vs/editor/editor.main'], function () {
                if ($('#id_d2db_sql').length) {
                    let dosis_hidden_field = $('#id_d2db_sql');
                    monaco_dosis_editor = monaco.editor.create(document.getElementById('monaco-d2db-sql'), {
                        value: dosis_hidden_field.val(),
                        language: 'sql',
                        theme: 'vs',
                        minimap: { enabled: false },
                        automaticLayout: true,
                        wordWrap: 'on',
                        scrollBeyondLastLine: false,
                        folding: false,
                        showFoldingControls: 'never',
                        stickyScroll: { enabled: false },
                        glyphMargin: true,
                    });

                    monaco_dosis_editor.onDidChangeModelContent(function () {
                        dosis_hidden_field.val(monaco_dosis_editor.getValue());
                    });

                    dosis_diff_tracker = new MonacoDiffTracker(monaco_dosis_editor, dosis_hidden_field.val());

                    let dosis_val = dosis_hidden_field.val();
                    if (!dosis_val || !dosis_val.trim()) {
                        $('#dosis-sql-section').hide();
                        $('.sql-accordion-toggle[data-target="#dosis-sql-section"]').find('i').removeClass('icon-chevron-down').addClass('icon-chevron-right');
                    }
                }

                if ($('#id_extdb_sql').length) {
                    let extdb_hidden_field = $('#id_extdb_sql');
                    monaco_extdb_editor = monaco.editor.create(document.getElementById('monaco-extdb-sql'), {
                        value: extdb_hidden_field.val(),
                        language: 'sql',
                        theme: 'vs',
                        minimap: { enabled: false },
                        automaticLayout: true,
                        wordWrap: 'on',
                        scrollBeyondLastLine: false,
                        folding: false,
                        showFoldingControls: 'never',
                        stickyScroll: { enabled: false },
                        glyphMargin: true,
                    });

                    monaco_extdb_editor.onDidChangeModelContent(function () {
                        extdb_hidden_field.val(monaco_extdb_editor.getValue());
                    });

                    extdb_diff_tracker = new MonacoDiffTracker(monaco_extdb_editor, extdb_hidden_field.val());

                    let extdb_val = extdb_hidden_field.val();
                    if (!extdb_val || !extdb_val.trim()) {
                        $('#extdb-sql-section').hide();
                        $('.sql-accordion-toggle[data-target="#extdb-sql-section"]').find('i').removeClass('icon-chevron-down').addClass('icon-chevron-right');
                    }
                }
            });
        });
    </script>
    <style>
        .sql-accordion-toggle {
            cursor: pointer;
            padding: 4px 0;
            font-weight: bold;
            user-select: none;
        }
        .sql-accordion-toggle:hover {
            color: #005e99;
        }
    </style>
{% 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="pmsExtdbRequestLookupForm" name="pmsExtdbRequestLookupForm" method="POST">
    {% csrf_token %}
    <div>
        <table class="table table-bordered table-striped">
            <thead style="position: sticky; top: 0;">
            <tr class="dosis-report-header">
                {% include 'report-table-header.html' %}
                <th><i class="icon-list"></i></th>
            </tr>
            </thead>
            <tbody>
            {% for lookup in lookup_list %}
                <tr id="{{ lookup.id }}-row">
                    <td style="padding-bottom: 2px;" class="copyable">{{ lookup.tag }}<span style="display: none; margin-left: -70px; padding: 5px 12px; background-color: #000000df; border-radius: 4px; color: #fff; position: absolute;">Link to Extdb Lookup Copied!</span></td>
                    <td style="padding-bottom: 2px;">{{ lookup.description }}</td>
                    <td style="padding-bottom: 2px;">{{ lookup.extdb_request_type}}</td>
                    <td style="padding-bottom: 2px;">{{ lookup.extdb_conn_type }}</td>
                    <td style="padding-bottom: 2px;">{% for itm in lookup.d2db_fields %}{% if not forloop.first %}, {% endif %}{{ itm }}{% endfor %}</td>
                    <td style="padding-bottom: 2px;">{% for itm in lookup.extdb_fields %}{% if not forloop.first %}, {% endif %}{{ itm }}{% endfor %}</td>
                    <td style="padding-bottom: 2px;">{{ lookup.proc_order }}</td>
                    <td style="padding-bottom: 2px;"><input type="checkbox" id="{{ lookup.id }}-active" name="{{ lookup.id }}-active" {% if lookup.active %}checked{% endif %}/></td>
                    <td><a href="{% url 'support:support-edit-pms-extdb-request-lookup' pms.id lookup.id %}?sort={{ current_sort }}">
                        <i title="Edit Extdb Request Lookup" class="icon-pencil"></i></a></td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    <div>
            <span><button style="float: left;" type="button" name="btn-add-extdb-request-lookup"
                          id="btn-add-extdb-request-lookup" class="btn">Add
                Extdb Request Lookup
            </button>
            </span>
    </div>
    </form>
    <div id="edit-pms-extdb-request-lookup" title="Edit PMIS Extdb Request Lookup" style="margin-left: 2px;">
        <form id="editExtdbRequestLookupForm" name="editExtdbRequestLookupForm" method="POST">
            {% csrf_token %}
            <div class="alert alert-error" id="edit-extdb-request-lookup-validation-alert" style="display: none;">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <ul id="edit-extdb-request-lookup-validation-error-list">
                </ul>
            </div>
            <table style="width: 100%;">
                <tr>
                    <td class="site-drug-edit-td">{{ edit_form.interface }}Tag: {{ edit_form.tag }}</td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">Description: {{ edit_form.description }}</td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">External Db Request Type: {{ edit_form.extdb_request_type }}</td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">External Db Connection Type: {{ edit_form.extdb_conn_type }}</td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">Process Order: {{ edit_form.proc_order }}&nbsp;&nbsp;&nbsp;
                    {{ edit_form.active }} Active?</td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">Dosis Db Fields: {{ edit_form.d2db_fields }}</td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">External Db Fields: {{ edit_form.extdb_fields }}</td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">
                        <div class="sql-accordion-toggle" data-target="#dosis-sql-section">
                            <i class="icon-chevron-down"></i> Dosis Db SQL:
                        </div>
                        {{ edit_form.d2db_sql.as_hidden }}
                        <div id="dosis-sql-section">
                            <div style="position: relative; width: 100%; height: 400px;">
                                <div id="monaco-d2db-sql" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid #ccc;"></div>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">
                        <div class="sql-accordion-toggle" data-target="#extdb-sql-section">
                            <i class="icon-chevron-down"></i> External Db SQL:
                        </div>
                        {{ edit_form.extdb_sql.as_hidden }}
                        <div id="extdb-sql-section">
                            <div style="position: relative; width: 100%; height: 400px;">
                                <div id="monaco-extdb-sql" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid #ccc;"></div>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </form>
    </div>

    <div id="unsaved-changes-confirm" title="Unsaved Changes" style="margin-left: 2px;">
        <div>
            <p>You have unsaved changes. Are you sure you want to close without saving?</p>
        </div>
    </div>
{% endblock %}