{% extends "support.html" %}


{% block head %}
    {{ block.super }}
    <script>
    function reenableFields() {
        $("#id_start_time").prop('disabled', false);
        $("#id_stop_time").prop('disabled', false);
        $("#rule-days-of-week :input").prop('disabled', false);
        $("#rule-days-of-month :input").prop('disabled', false);
    }

        function reset_search() {
            $('#search_order_rules').val('');
            $('#order_rules_div h3').each(function() {
                let header = $(this);
                let rows = header.next('table').find('tbody tr');

                rows.each(function() {
                    let row = $(this);
                    let cells = row.find('td');
                    row.show();

                    // restore non-highlighted text
                    cells.slice(0, 2).each(function() {
                        let cell = $(this);
                        cell.html(cell.text());
                    });
                });

                header.show();

                // close accordion section properly
                let content = header.next();
                content.hide();

                // if the accordion uses an "active" or "ui-state-active" class, remove it
                header.removeClass('active ui-state-active ui-accordion-header-active');
                header.attr('aria-expanded', 'false');
                content.removeClass('ui-accordion-content-active');
            });

            // optional: if you’re using a jQuery UI accordion, refresh it
            if ($('#order_rules_div').hasClass('ui-accordion')) {
                $('#order_rules_div').accordion('option', 'active', false);
            }
        }

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

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

            $("#edit-rule").dialog({
                {% if showAddEdit == 'Y' %}
                    autoOpen: true,
                {% else %}
                    autoOpen: false,
                {% endif %}
                closeOnEscape: false,
                modal: true,
                draggable: false,
                width: 1000,
                buttons: [
                    {
                        text: "Close",
                        "class": 'modal-dialog-button-right',
                        click: function () {
                            window.history.pushState(null, '', '/support/order_rules/manage_rules');
                            let hash = $('#jump_to_hash_value').text()
                            jump_to_item(hash);
                            $(this).dialog("close");
                        }
                    },
                    {
                        text: "Save",
                        "class": 'modal-dialog-button-left',
                        click: function () {
                            $("#editRuleForm").validate();
                            if ($("#editRuleForm").valid()) {
                                reenableFields();
                                history.pushState({}, '', 'edit_rule#' + $('#jump_to_hash_value').text());
                                document.editRuleForm.submit();
                                $(this).dialog("close");
                            }
                        }
                    }
                ]
            });

            $("#edit-tower-fillrule").dialog({
                {% if showAddEditTower == 'Y' %}
                    autoOpen: true,
                {% else %}
                    autoOpen: false,
                {% endif %}
                closeOnEscape: false,
                modal: true,
                draggable: false,
                width: 1000,
                buttons: [
                    {
                        text: "Close",
                        "class": 'modal-dialog-button-right',
                        click: function () {
                            let match = window.location.pathname.match(/order_rules\/(\d+)\/edit_tower_fill_rule/);
                            let rule_id = match ? match[1] : null;
                            let hash = 'tower_full_rule_' + rule_id
                            window.history.pushState(null, '', '/support/order_rules/manage_rules');
                            jump_to_item(hash);
                            $(this).dialog("close");
                        }
                    },
                    {
                        text: "Save",
                        "class": 'modal-dialog-button-left',
                        click: function () {
                            $("#editTowerFillRuleForm").validate();
                            if ($("#editTowerFillRuleForm").valid()) {
                                reenableFields();
                                let match = window.location.pathname.match(/order_rules\/(\d+)\/edit_tower_fill_rule/);
                                let rule_id = match ? match[1] : null;
                                let hash = 'tower_full_rule_' + rule_id
                                history.pushState({}, '', 'edit_tower_fill_rule#' + hash);
                                document.editTowerFillRuleForm.submit();
                                $(this).dialog("close");
                            }
                        }
                    }
                ]
            });

            $("#btn-add-rule").click(function () {
                window.location.href = "{% url 'support:support-add-order-rule' %}";
            });

            $("#id_day_of_week_0").click(function () {
                 if($(this).is(":checked")) {
                     $("#rule-days-of-week :input").prop("checked", false);
                     $(this).prop("checked", true);
                 }
            });

            $("#id_day_of_month_0").click(function () {
                 if($(this).is(":checked")) {
                     $("#rule-days-of-month :input").prop("checked", false);
                     $(this).prop("checked", true);
                 }
            });

            $("#id_start_time").timeEntry({
                show24Hours: false,
                showSeconds: true,
                defaultTime: '00:00:00',
                ampmPrefix: ' ',
                spinnerImage: ''
            });

            $("#id_stop_time").timeEntry({
                show24Hours: false,
                showSeconds: true,
                defaultTime: '00:00:00',
                ampmPrefix: ' ',
                spinnerImage: ''
            });

            {% if edit_form.use_active_time.value == False %}
                $("#id_start_time").prop('disabled', true);
                $("#id_stop_time").prop('disabled', true);
            {% endif %}


            $("#id_use_active_time").change(function (event) {
                if ($(this).is(":checked")) {
                    $("#id_start_time").prop('disabled', false);
                    $("#id_stop_time").prop('disabled', false);
                } else {
                    $("#id_start_time").prop('disabled', true);
                    $("#id_stop_time").prop('disabled', true);
                }
            });

            {% if edit_form.use_day_of_week.value == False %}
                $("#rule-days-of-week :input").prop('disabled', true);
            {% endif %}


            $("#id_use_day_of_week").change(function (event) {
                if ($(this).is(":checked")) {
                    $("#rule-days-of-week :input").prop('disabled', false);
                } else {
                    $("#rule-days-of-week :input").prop('disabled', true);
                }
            });

            {% if edit_form.use_day_of_month.value == False %}
                $("#rule-days-of-month :input").prop('disabled', true);
            {% endif %}


            $("#id_use_day_of_month").change(function (event) {
                if ($(this).is(":checked")) {
                    $("#rule-days-of-month :input").prop('disabled', false);
                } else {
                    $("#rule-days-of-month :input").prop('disabled', true);
                }
            });

            {% if showAddEdit == 'Y' %}
                $("#editRuleForm").validate({
                    onkeyup: false,
                    errorContainer: $("#edit-rule-validation-alert"),
                    errorLabelContainer: $("ul", $("#edit-rule-validation-alert")),
                    wrapper: 'li'
                });

                $("#id_start_time").rules('add', {
                    required: true,
                    messages: {
                        required: "Start Time cannot be blank."
                    }
                });

                $("#id_stop_time").rules('add', {
                    required: true,
                    messages: {
                        required: "Stop Time cannot be blank."
                    }
                });
            {% endif %}
        });

    function jump_to_item(hash=''){
        if (window.location.hash !== '' || hash !== ''){
            if (hash !== '') {
                hash = '#' + hash
            }
            let order_rule = hash !== '' ? $(hash) : $(window.location.hash);
            order_rule.parent().parent().parent().prevAll('h3').first().click();

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

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

    $(document).ready(function() {
        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({}, '', 'manage_rules#' + 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);
        });

        $('#search_order_rules').on('input', function() {
            let term = $(this).val();
            let lower_term = term.toLowerCase().replace(/_/g, ' ');

            if (lower_term === '') {
                reset_search()
            } else {
                $("#order_rules_div h3").each(function() {
                    let header = $(this);
                    let rows = header.next("table").find("tbody tr");
                    let hasVisible = false;

                    rows.each(function() {
                        let row = $(this);
                        let cells = row.find("td");

                        // check only tag and setting for match
                        let combined_text = cells.slice(0, 2).text().toLowerCase().replace(/_/g, ' ');

                        if (combined_text.indexOf(lower_term) > -1) {
                            row.show();
                            hasVisible = true;

                            // clear previous highlights
                            cells.slice(0, 2).each(function() {
                                let cell = $(this);
                                cell.html(cell.text());
                            });

                            // rebuild cell text with highlight
                            cells.slice(0, 2).each(function() {
                                let cell = $(this);
                                let original_text = cell.text();
                                let regex = new RegExp('(' + lower_term.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ')', 'ig');

                                // normalized version for matching only
                                let normalized_original = original_text.replace(/_/g, ' ');
                                let matches = normalized_original.match(regex);

                                if (matches) {
                                    let highlighted = '';
                                    let last_index = 0;
                                    normalized_original.replace(regex, function(match, p1, offset) {
                                        highlighted += original_text.slice(last_index, offset)
                                            + '<span class="highlight">'
                                            + original_text.slice(offset, offset + p1.length)
                                            + '</span>';
                                        last_index = offset + p1.length;
                                    });
                                    highlighted += original_text.slice(last_index);
                                    cell.html(highlighted);
                                } else {
                                    cell.html(original_text);
                                }
                            });
                        } else {
                            row.hide();
                        }
                    });

                    if (hasVisible) {
                        header.show();
                        header.next().show();
                    } else {
                        header.hide();
                        header.next().hide();
                    }
                });
            }
        });

        $('#clear_search').on('click', function() {
            reset_search()
        })
    });
    </script>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
{% endblock %}

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

{% block content %}
    <div style="padding-bottom: 10px; padding-top: 10px;">
        <input type="text" placeholder="Search all order rules" id="search_order_rules" style="margin-bottom: 0;"/>
        <button type="button" id="clear_search">Clear</button>
    </div>
    <div id="order_rules_div" class="well well-small">
    {% for group in rule_list %}
        <h3>{{ group.name }}</h3>

        {% if group.name != 'Tower Fill Rules' %}
            <table class="table table-bordered table-striped">
                <thead>
                <tr class="dosis-report-header">
                    <th>Rule Type</th>
                    <th>Description</th>
                    <th>Tower</th>
                    <th>Value</th>
                    <th>Active</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody>
                {% for rule in group.list %}
                    <tr>
                        <td style="padding-bottom: 2px;" id="{{rule.rule_type}}" class="copyable">{{ rule.rule_type }}</td>
                        <td style="padding-bottom: 2px;">{{ rule.rule_type.description }}</td>
                        <td style="padding-bottom: 2px;">{{ rule.dafe.display_name }}</td>
                        <td style="padding-bottom: 2px;">{{ rule.value }}</td>
                        <td style="padding-bottom: 2px;">{{ rule.active }}</td>
                        <td>
                            <a href="{% url 'support:support-edit-order-rule' rule.id %}"><i title="Edit Order Rule" class="icon-pencil"></i></a>
<!--                            <a href="{% url 'support:support-copy-order-rule' rule.id %}"><i title="Copy Order Rule" class="icon-plus"></i></a>-->
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        {% else %}
            <table class="table table-bordered table-striped">
                <thead>
                <tr class="dosis-report-header">
                    <th>Tower</th>
                    <th>RX Type</th>
                    <th>Facilities</th>
                    <th>Custom SQL</th>
                    <th>Comments</th>
                    <th>Active</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody>
                    {% for rule in group.list %}
                        <tr>
                            <td style="padding-bottom: 2px;" id="tower_full_rule_{{rule.id}}" class="copyable">{{ rule.dafe }}</td>
                            <td style="padding-bottom: 2px;">{{ rule.rx_type }}</td>
                            <td style="padding-bottom: 2px;">{{ rule.facilities }}</td>
                            <td style="padding-bottom: 2px;">{{ rule.custom_sql }}</td>
                            <td style="padding-bottom: 2px;">{{ rule.custom_sql_comments }}</td>
                            <td style="padding-bottom: 2px;">{{ rule.active }}</td>
                            <td><a href="{% url 'support:support-edit-tower-fill-rule' rule.id %}"><i title="Edit Tower Fill Rule" class="icon-pencil"></i></a></td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% endif %}
    {% endfor %}
    </div>
    <br/>
    {% if add_list|length > 0 %}
    <div>
            <span><button style="float: left;" type="button" name="btn-add-rule" id="btn-add-rule"
                          class="btn">Add Order Rule
            </button>
            </span>
    </div>
    {% endif %}

    <div id="edit-rule" title="{% if do_copy %}Copy{% else %}Edit{% endif %} Order Rule"
         style="margin-left: 2px;{% if do_copy %} background-color: yellow;{% endif %}">
        <form id="editRuleForm" name="editRuleForm" method="POST">
            {% csrf_token %}
            <div class="alert alert-error" id="edit-rule-validation-alert" style="display: none;">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <ul id="edit-rule-validation-error-list">
                </ul>
            </div>
            <table style="width: 90%;">
                <tr>
                    <td class="site-drug-edit-td">Rule Type: {% if add_mode == True %}{{ edit_form.rule_type }}{% else %}
                     {% for value, text in edit_form.rule_type.field.choices %}
                        {% if value == edit_form.rule_type.value %}
                            <span id="jump_to_hash_value">{{ text }}</span>
                        <input type="hidden" name="rule_type" value="{{ value }}"/>
                        {% endif %}
                    {% endfor %}{% endif %}</td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">Tower: {{ edit_form.dafe }}{% if add_mode == False %}
                    &nbsp;&nbsp;&nbsp;{{ edit_form.active }} Active{% else %}<input type="hidden" name="active" value="True"/>{% endif %}
                    </td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td" style="padding-top: 8px;">Value: {{ edit_form.value }}&nbsp;&nbsp;&nbsp;&nbsp;
                    Search Order: {{ edit_form.search_order }}</td>
                </tr>
                <tr><td>{{ edit_form.use_active_time }} Use Active Time?&nbsp;&nbsp;&nbsp;
                Start Time: {{ edit_form.start_time }}&nbsp;&nbsp;&nbsp;Stop Time: {{ edit_form.stop_time }}</td></tr>
                <tr><td>{{ edit_form.use_day_of_week }} Use Day Of Week?</td></tr>
                <tr><td><div id="rule-days-of-week">{{ edit_form.day_of_week }}</div></td></tr>
                <tr><td>{{ edit_form.use_day_of_month }} Use Day Of Month?</td></tr>
                <tr><td><div id="rule-days-of-month">{{ edit_form.day_of_month }}</div></td></tr>
            </table>
        </form>
    </div>

    <div id="edit-tower-fillrule" title="Edit Order Rule" style="margin-left: 2px;">
        <form id="editTowerFillRuleForm" name="editTowerFillRuleForm" method="POST">
            {% csrf_token %}
            <div class="alert alert-error" id="edit-tower-rule-validation-alert" style="display: none;">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <ul id="edit-tower-rule-validation-error-list">
                </ul>
            </div>
            <table style="width: 100%">
                <tr>
                    <td></td>
                    <td>DAFE: <strong>{{tower_rule_edit_form.dafe_tag}}</strong></td>
                </tr>
                <tr>
                    <td>Active: </td>
                    <td>{{tower_rule_edit_form.active}}</td>
                </tr>
                <tr>
                    <td>RX Type: </td>
                    <td>{{tower_rule_edit_form.rx_type}}</td>
                </tr>
                <tr>
                    <td>Custom SQl: </td>
                    <td>{{tower_rule_edit_form.custom_sql}}</td>
                </tr>
                <tr>
                    <td>Custom SQl Comments: </td>
                    <td>{{tower_rule_edit_form.custom_sql_comments}}</td>
                </tr>
                <tr>
                    <td>Facilities: </td>
                    <td>{{tower_rule_edit_form.facilities}}</td>
                </tr>
            </table>
        </form>
    </div>
{% endblock %}