{% extends "support.html" %}


{% block head %}
    {{ block.super }}
    <script>

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

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

            $("#edit-subcomponent-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 () {
                            $(this).dialog("close");
                        }
                    },
                    {
                        text: "Save",
                        "class": 'modal-dialog-button-left',
                        click: function () {
                            if ($("#editSubcomponentRuleForm").valid()) {
                                document.editSubcomponentRuleForm.submit();
                                $(this).dialog("close");
                            }
                        }
                    }
                ]
            });

            $("#confirm-dialog").dialog({
                autoOpen: false,
                closeOnEscape: false,
                model: true,
                draggable: false,
                buttons: [
                    {
                        text: "Yes",
                        "class": 'dialog-button',
                        click: function () {
                            $.post("{% url 'site:settings-delete-subcomponent-rule' %}",
                                    {
                                        'csrfmiddlewaretoken': '{{csrf_token}}',
                                        subcomponent_rule_id: $("#current_rule_id").val()
                                    },
                                    function () {
                                        window.location.href = "{% url 'site:settings-manage-subcomponent-rules' %}";
                                    });
                            $(this).dialog("close");
                        }
                    },
                    {
                        text: "No",
                        "class": 'dialog-button',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });

            $("input[id$='-active']").click(function () {
                $.post("{% url 'site:settings-update-subcomponent-rule-active' %}",
                        {
                            'csrfmiddlewaretoken': '{{csrf_token}}',
                            subcomponent_rule_id: get_subcomponent_rule_id($(this), "-active"),
                            field_val: $(this).prop("checked")
                        });
            });


            $("input[id$='-delete']").click(function () {
                if ($(this).prop("checked")) {
                    $("#current_rule_id").val($(this).val());
                    $("#confirm-dialog").dialog("open");
                    return false;
                }
            });


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

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

                $("#id_sub-host_drug_number").rules('add', {
                    digits: true,
                    messages: {
                        digits: "Host Drug Number must be numeric. No Dashes."
                    }
                });

                $("#id_sub-fix_lbl_count").rules('add', {
                    digits: true,
                    required: true,
                    messages: {
                        digits: "Fix Label Count must be numeric.",
                        required: "Fix Label Count is required."
                    }
                });

                $("#id_sub-quantity_split").rules('add', {
                    digits: true,
                    required: true,
                    messages: {
                        digits: "Quantity Split must be numeric.",
                        required: "Quantity Split is required"
                    }
                });

                $("#id_sub-max_labels").rules('add', {
                    digits: true,
                    required: true,
                    messages: {
                        digits: "Max Labels must be numeric.",
                        required: "Max Labels is required"
                    }
                });

            {% endif %}

            $("#btn-show-host-dosage").click(function () {
                $.ajax({
                        url: "{% url 'support:get-host-dosage-forms' %}",
                        type: "POST",
                        data: {
                            csrfmiddlewaretoken: '{{csrf_token}}'
                        },
                        success: function (data, status, jqXHR) {
                            $('#possible-host-dosage-forms').html(data);
                        }
                });
            });

        });
    </script>
{% endblock %}

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

{% block content %}
    <div id="confirm-dialog" title="Confirm Delete">
        <p id="confirm-action-name" name="confirm-action-name">
            Delete Subcomponent Rule?
        </p>

        <p>
            This will permanently delete this Subcomponent Rule. Do you want to continue?
        </p>
    </div>
    <input type="hidden" name="current_rule_id" id="current_rule_id" value=""/>
    <table class="table table-bordered table-striped">
        <thead>
        <tr class="dosis-report-header">
            <th>Host Drug Number</th>
            <th>Strict Match</th>
            <th>Host Dosage Form</th>
            <th>Use Quantity</th>
            <th>Fix Label Count</th>
            <th>Quantity Split</th>
            <th>Max Labels</th>
            <th>Active</th>
            <th>Delete</th>
            <th>Action</th>
        </tr>
        </thead>
        <tbody>
        {% for rule in subcomponent_rule_list %}
        <tr>
            <td style="padding-bottom: 2px;">{% if rule.host_drug_number %}{% if drugnum_type == 'NDC' and show_ndc_dashes == True %}{% if rule.host_drug_number|length > 8 %}
                        {{ rule.host_drug_number|slice:"0:5" }}-{{ rule.host_drug_number|slice:"5:9" }}{% if rule.host_drug_number|length > 10 %}-{{ rule.host_drug_number|slice:"9:11" }}{% else %}-XX
                        {% endif %}{% endif %}{% else %}{{ rule.host_drug_number }}{% endif %}{% else %}*{% endif %}</td>
            <td style="padding-bottom: 2px;">{{ rule.strict_match }}</td>
            <td style="padding-bottom: 2px;">{% if rule.host_dosage_form %}{{ rule.host_dosage_form }}{% else %}*{% endif %}</td>
            <td style="padding-bottom: 2px;">{{ rule.use_quantity }}</td>
            <td style="padding-bottom: 2px;">{{ rule.fix_lbl_count }}</td>
            <td style="padding-bottom: 2px;">{{ rule.quantity_split }}</td>
            <td style="padding-bottom: 2px;">{{ rule.max_labels }}</td>
            <td style="padding-bottom: 2px;"><input type="checkbox" id="{{ rule.id }}-active"
                                                    name="{{ rule.id }}-active"
                                                    {% if rule.active %}checked{% endif %}/></td>
            <td style="padding-bottom: 2px;"><input type="checkbox" id="{{ rule.id }}-delete"
                                                    name="{{ rule.id }}-delete" value="{{ rule.id }}"/></td>
            <td><a href="{% url 'site:settings-edit-subcomponent-rule' rule.id %}">
                <i title="Edit Subcomponent Rule"
                   class="icon-pencil"></i></a>
            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
    <div>
            <span><button style="float: left;" type="button" name="btn-add-subcomponent-rule" id="btn-add-subcomponent-rule"
                          class="btn">Add Subcomponent Rule
            </button>
            </span>
    </div>
    <div id="edit-subcomponent-rule" title="Edit Subcomponent Rule" style="margin-left: 2px; font-size: 11pt;">
        <form id="editSubcomponentRuleForm" name="editSubcomponentRuleForm" method="POST">
            {% csrf_token %}
            <div class="alert alert-error" id="edit-subcomponent-rule-validation-alert" style="display: none;">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <ul id="edit-subcomponent-rule-validation-error-list">
                </ul>
            </div>
            <table style="width: 90%;">
                <tr>
                    <td class="site-drug-edit-td">
                        Host Drug Number: {{ edit_form.host_drug_number }}&nbsp;&nbsp;&nbsp;&nbsp;
                        {{ edit_form.strict_match }} Strict NDC-11 Match?
                    </td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">
                        Host Dosage Form: {{ edit_form.host_dosage_form }}
                    </td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td"><button class="btn btn-link" type="button" id="btn-show-host-dosage" name="btn-show-host-dosage">Click to show possible host dosage forms received so far.</button></td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td"><div id="possible-host-dosage-forms"></div></td>
                </tr>
                <tr>
                    <td>
                        {{ edit_form.active }} Active
                    </td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">
                        {{ edit_form.use_quantity }} Use Quantity? &nbsp;&nbsp;&nbsp;&nbsp;
                        Fix Label Count: {{ edit_form.fix_lbl_count }}
                    </td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">
                        Quantity Split: {{ edit_form.quantity_split }}&nbsp;&nbsp;&nbsp;&nbsp;
                        Max Labels: {{ edit_form.max_labels }}
                    </td>
                </tr>
            </table>
        </form>
    </div>
{% endblock %}