{% extends "support.html" %}


{% block head %}
    {{ block.super }}
    <script>
        function reenableFields() {
            $("#id_ppk-tag").val($("#id_ppk-tag").val().toUpperCase());
        }

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

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

            $("#edit-prepack-type").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 () {
                            $("#editPrepackTypeForm").validate();
                            if ($("#editPrepackTypeForm").valid()) {
                                document.editPrepackTypeForm.submit();
                                $(this).dialog("close");
                            }
                        }
                    }
                ]
            });

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

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

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

                $("#id_ppk-tag").keyup(function () {
                    this.value = this.value.toUpperCase();
                });

                $("#id_ppk-tag").rules('add', {
                    required: true,
                    messages: {
                        required: "Prepack Type tag cannot be blank."
                    }
                });

                 $("#id_ppk-description").rules('add', {
                    required: true,
                    messages: {
                        required: "Prepack Type description cannot be blank."
                    }
                });

            {% endif %}

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

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

{% block content %}
    <table class="table table-bordered table-striped">
        <thead>
        <tr class="dosis-report-header">
            <th>Tag</th>
            <th>Description</th>
            <th>Days Supply</th>
            <th>Qty Per Dose</th>
            <th>Package Type</th>
            <th>Active</th>
            <th>Action</th>
        </tr>
        </thead>
        <tbody>
        {% for type in prepack_type_list %}
            <tr>
                <td style="padding-bottom: 2px;">{{ type.tag }}</td>
                <td style="padding-bottom: 2px;">{{ type.description }}</td>
                <td style="padding-bottom: 2px;">{{ type.day_supply }}</td>
                <td style="padding-bottom: 2px;">{{ type.qty_per_dose }}</td>
                <td style="padding-bottom: 2px;">{{ type.package_type.description }}</td>
                <td style="padding-bottom: 2px;"><input type="checkbox" id="{{ type.id }}-active" name="{{ type.id }}-active" {% if type.active %}checked{% endif %}/></td>
                <td>{% if type.dosis_default == False %}<a href="{% url 'site:settings-edit-prepack-type' type.id %}">
                    <i title="Edit Prepack Type"
                       class="icon-pencil"></i></a>{% endif %}
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    <div>
            <span><button style="float: left;" type="button" name="btn-add-prepack-type" id="btn-add-prepack-type" class="btn">Add
                Prepack Type
            </button>
            </span>
    </div>
    <div id="edit-prepack-type" title="Edit Prepack Type" style="margin-left: 2px; font-size: 11pt;">
        <form id="editPrepackTypeForm" name="editPrepackTypeForm" method="POST">
            {% csrf_token %}
            <div class="alert alert-error" id="edit-prepack-type-validation-alert" style="display: none;">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <ul id="edit-prepack-type-validation-error-list">
                </ul>
            </div>
            <table style="width: 90%;">
                <tr>
                    <td class="site-drug-edit-td">Tag: {{ edit_form.tag }}</td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">Description: {{ edit_form.description }}</td>
                </tr>
                <tr>
                    <td>
                        {{ edit_form.active }} Active
                    </td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">
                        Days Supply {{ edit_form.day_supply }}&nbsp;&nbsp;&nbsp;&nbsp;
                        Quantity Per Dose {{ edit_form.qty_per_dose }}
                    </td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">
                        Package Type {{ edit_form.package_type }}
                    </td>
                </tr>
            </table>
        </form>
    </div>
{% endblock %}