{% extends "support.html" %}


{% block head %}
    {{ block.super }}
    <script>
        var editmedpass_idx = 1;

        function get_lookup_id(field, field_name) {
            var lookupid = field.attr("id");
            lookupid = lookupid.replace(field_name, "");
            return lookupid;
        }

        function get_selected_fac_ids() {
            var data = {'selected_fac_ids': []};

            if ($("#0-facility-chk").prop('checked')) {
                data['selected_fac_ids'].push($("#0-facility-chk").val());
            }
            $(".medpass-facility:checkbox:checked").each(function () {
                data['selected_fac_ids'].push($(this).val());
            });

            return data;
        }

        function addFillPatternValidation(target) {
            target.rules('add', {
                required: true,
                messages: {
                    required: "Fill Pattern value is required."
                }
            });
        }

        function do_add_medpass_row() {
            var newrow = $("#edit-medpass-info-table tr:last").clone();
            var rowId = "medpass-edit-row-new-" + editmedpass_idx.toString();
            newrow.attr("id", rowId);
            var medpass_sel = newrow.find("select[id^='medpass-']");
            medpass_sel.attr("id", "medpass-new-" + editmedpass_idx.toString());
            medpass_sel.attr("name", "medpass-new-" + editmedpass_idx.toString());
            medpass_sel.find('option:selected').removeAttr("selected");
            var fillpattern_txt = newrow.find("input[id^='fill-pattern-']");
            var fillpattern_name = "fill-pattern-new-" + editmedpass_idx.toString();
            fillpattern_txt.attr("id", fillpattern_name);
            fillpattern_txt.attr("name", fillpattern_name);
            fillpattern_txt.val('');
            var ordreqtype_sel = newrow.find("select[id^='order-req-type-']");
            ordreqtype_sel.attr("id", "order-req-type-new-" + editmedpass_idx.toString());
            ordreqtype_sel.attr("name", "order-req-type-new-" + editmedpass_idx.toString());
            ordreqtype_sel.find('option:selected').removeAttr("selected");
            var del_btn = newrow.find("button");
            del_btn.attr("id", "del-row-new-" + editmedpass_idx.toString());
            del_btn.attr("name", "del-row-new-" + editmedpass_idx.toString());
            del_btn.show();

            editmedpass_idx++;
            $("#edit-medpass-info-table tbody").append(newrow);
            addFillPatternValidation($("#" + fillpattern_name));

            // activate delete button for new buttons, with different logic for new vs old buttons
            $("button[id^='del-row-']").on('click', function() {
                if ($(this).attr('id').indexOf('new') >= 0){
                    const medpass_idx = $(this).attr('id').split('-').pop();
                    $('#medpass-edit-row-new-' + medpass_idx).remove();
                } else {
                    const medpass_idx = $(this).attr('id').split('-').pop();
                    $('#medpass-edit-row-' + medpass_idx).remove();
                }
            });
        }

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

            $("input[id$='-active']").click(function () {
                $.post("{% url 'support:support-update-pms-medpass-action-lookup-active' %}",
                        {'csrfmiddlewaretoken': '{{csrf_token}}',
                            lookup_id: get_lookup_id($(this), "-active"),
                            field_val: $(this).prop("checked")});
            });
            
            $("button[id^='del-row-']").on('click', function() {
                const medpass_idx = $(this).attr('id').split('-').pop();
                $('#medpass-edit-row-' + medpass_idx).remove();
            });

            $("#edit-pms-medpass-action-lookup").dialog({
                {% if showAddEdit == 'Y' %}
                    autoOpen: true,
                {% else %}
                    autoOpen: false,
                {% endif %}
                closeOnEscape: false,
                modal: true,
                draggable: false,
                width: 1300,
                buttons: [
                    {
                        text: "Close",
                        "class": 'modal-dialog-button-right',
                        click: function () {
                            $(this).dialog("close");
                            window.location.href = "{% url 'support:support-manage-pms-medpass-action-lookup' pms.id %}?sort={{ current_sort }}";
                        }
                    },
                    {
                        text: "Save",
                        "class": 'modal-dialog-button-left',
                        click: function () {
                            var facdata = get_selected_fac_ids();
                            $("#id_facility_id").val(facdata['selected_fac_ids']);
                            $("#editMedpassActionLookupForm").validate();
                            if ($("#editMedpassActionLookupForm").valid()) {
                                document.editMedpassActionLookupForm.submit();
                                $(this).dialog("close");
                            }
                        }
                    }
                ]
            });

            $("#add-medpass-link").click(function () {
                do_add_medpass_row();
            });

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

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

                $("#id_instance").rules('add', {
                    required: true,
                    number: true,
                    messages: {
                        required: "Instance value is required.",
                        number: "Instance value must be numeric."
                    }
                });

                $("#id_search_order").rules('add', {
                    required: true,
                    number: true,
                    digits: true,
                    min: 0,
                    messages: {
                        required: "Search Order value is required.",
                        number: "Search Order value must be numeric.",
                        digits: "Search Order value can only be numbers.",
                        min: "Search Order value must be non negative."
                    }
                });

                $("#id_test_value").rules('add', {
                    required: true,
                    messages: {
                        required: "Test Value is required."
                    }
                });

                 $("input[id^='id_fill-pattern']").each(function () {
                    addFillPatternValidation($(this));
                });

                 $("#0-facility-chk").click(function () {
                    if ($(this).prop('checked')) {
                        $(".medpass-facility").prop('checked', false);
                    }
                });

                $(".medpass-facility").click(function () {
                    if ($(".medpass-facility:checkbox:checked").length > 0) {
                        $("#0-facility-chk").prop('checked', false);
                    }
                });

            {% endif %}

        });
    </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="pmsMedpassActionLookupForm" name="pmsMedpassActionLookupForm" 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>
                    <td style="padding-bottom: 2px;">{{ lookup.lookup_type }}</td>
                    <td style="padding-bottom: 2px;">{{ lookup.data_tag }}</td>
                    <td style="padding-bottom: 2px;">{{ lookup.group_tag }}</td>
                    <td style="padding-bottom: 2px;">{{ lookup.instance }}</td>
                    <td style="padding-bottom: 2px;">{{ lookup.test_value }}</td>
                    <td style="padding-bottom: 2px;">{{ lookup.search_order }}</td>
                    <td style="padding-bottom: 2px;">{{ lookup.action }}</td>
                    <td style="padding-bottom: 2px;"><input type="checkbox" id="{{ lookup.id }}-active" name="{{ lookup.id }}-active" {% if lookup.active %}checked{% endif %}/></td>
                    <td>{% if lookup.lookup_type.id == 0 %}<a href="{% url 'support:support-edit-pms-medpass-action-lookup' pms.id lookup.id %}?sort={{ current_sort }}">
                        <i title="Edit Medpass Action Lookup" class="icon-pencil"></i></a>{% endif %}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    <div>
            <span><button style="float: left;" type="button" name="btn-add-medpass-action-lookup"
                          id="btn-add-medpass-action-lookup" class="btn">Add
                Medpass Action Lookup
            </button>
            </span>
    </div>
    </form>
    <div id="edit-pms-medpass-action-lookup" title="Edit PMIS Medpass Action Lookup" style="margin-left: 2px;">
        <form id="editMedpassActionLookupForm" name="editMedpassActionLookupForm" method="POST">
            {% csrf_token %}
            <div class="alert alert-error" id="edit-medpass-action-lookup-validation-alert" style="display: none;">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <ul id="edit-medpass-action-lookup-validation-error-list">
                </ul>
            </div>
            <table style="width: 90%;">
                <tr>
                    <td class="site-drug-edit-td">{{ edit_form.interface }}{{ edit_form.lookup_type }}{{ edit_form.medpass_id }}{{ edit_form.fill_pattern }}
                        {{ edit_form.order_req_type_id }}{{ edit_form.facility_id }}Data Tag: {{ edit_form.data_tag }}</td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">Group Tag: {{ edit_form.group_tag }}&nbsp;&nbsp;&nbsp;
                        Instance: {{ edit_form.instance }}</td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">Search Order: {{ edit_form.search_order }}&nbsp;&nbsp;&nbsp;
                    Test Value: {{ edit_form.test_value }}&nbsp;&nbsp;&nbsp;
                    {{ edit_form.active }} Active?</td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">
                        Action: {{ edit_form.action }}
                    </td>
                </tr>
                <tr>
                    <td>
                        Facility:
                        <div class="multi-select-checkbox-container">
                        <input type="checkbox" id="0-facility-chk" name="0-facility-chk" value="0"
                                   {% if 0 in edit_form.facility_id.value %}checked{% endif %}/> All<br/>
                            {% for fac in facility_list %}
                                <input class="medpass-facility" type="checkbox" id="{{ fac.id }}-facility-chk"
                                       name="{{ fac.id }}-facility-chk" value="{{ fac.id }}"
                                       {% if fac.id in edit_form.facility_id.value %}checked{% endif %}/>
                                {% firstof fac.label_id fac.label_name %}<br/>
                            {% endfor %}
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table id="edit-medpass-info-table" style="width: 95%;">
                            <caption style="width: 100%; text-align: left; font-weight: bold; border-bottom:1px solid black;">
                                <span style="text-align: left;">Medpass Info</span>
                                <span style="float: right; text-align: right;">
                                    {% if add_mode != 'Y' %}
                                    <button type="button" id="add-medpass-link"><i class="icon-plus-sign-alt"></i>Add Medpass</button>
                                    {% endif %}
                                </span>
                            </caption>
                            <thead>
                            <tr>
                                <th align="left">Medpass</th>
                                <th align="left">Fill Pattern</th>
                                <th align="left">Order Req Type</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for medpass in medpassData %}
                                <tr id="medpass-edit-row-{{ medpass.id }}">
                                    <td class="site-drug-edit-td"><select style="width: auto;"
                                                         id="medpass-{{ medpass.id }}"
                                                         name="medpass-{{ medpass.id }}">
                                        {% for choice in medpass_list %}
                                            <option value="{{ choice.id }}"
                                                {% if choice.id == medpass.medpass_id %}selected{% endif %}>{{ choice.tag }}</option>
                                        {% endfor %}</select></td>
                                    <td class="site-drug-edit-td"><input type="text" id="fill-pattern-{{ medpass.id }}"
                                                                         name="fill-pattern-{{ medpass.id }}"
                                                                         style="width: 10em;"
                                                                         value="{{ medpass.fill_pattern }}" required></td>
                                    <td class="site-drug-edit-td"><select style="width: auto;"
                                                         id="order-req-type-{{ medpass.id }}"
                                                         name="order-req-type-{{ medpass.id }}">
                                        {% for choice in order_req_type_list %}
                                            <option value="{{ choice.id }}"
                                                {% if choice.id == medpass.ord_req_type_id %}selected{% endif %}>{{ choice.tag }}</option>
                                        {% endfor %}</select>
                                    </td>
                                    <td class="site-drug-edit-td"><button type="button" id="del-row-{{ medpass.id }}" name="del-row-{{ medpass.id }}"
                                                                          {% if forloop.first %}style="display: none;"{% endif %}><i class="icon-remove"></i></button></td>
                                </tr>
                            {% empty %}
                                <tr id="medpass-edit-row-1">
                                    <td class="site-drug-edit-td"><select style="width: auto;"
                                                         id="medpass-1"
                                                         name="medpass-1">
                                        {% for choice in medpass_list %}
                                            <option value="{{ choice.tag }}">{{ choice.tag }}</option>
                                        {% endfor %}</select></td>
                                    <td class="site-drug-edit-td"><input type="text" id="fill-pattern-1"
                                                                         name="fill-pattern-1"
                                                                         style="width: 10em;"
                                                                         value="{{ medpass.fill_pattern }}" required></td>
                                    <td class="site-drug-edit-td"><select style="width: auto;"
                                                         id="order-req-type-1"
                                                         name="order-req-type-1">
                                        {% for choice in order_req_type_list %}
                                            <option value="{{ choice.tag }}">{{ choice.tag }}</option>
                                        {% endfor %}</select>
                                    </td>
                                    <td class="site-drug-edit-td"><button type="button" id="del-row-1" name="del-row-1"
                                                                          style="display: none;"><i class="icon-remove"></i></button></td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </td>
                </tr>
            </table>
        </form>
    </div>
{% endblock %}