{% extends "support.html" %}


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

        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 () {
            $(document).tooltip();

            $("#edit-medpass").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 () {
                            var facdata = get_selected_fac_ids();
                            $("#id_med-facility_id").val(facdata['selected_fac_ids']);
                            $("#editMedpassForm").validate();
                            if ($("#editMedpassForm").valid()) {
                                document.editMedpassForm.submit();
                                $(this).dialog("close");
                            }
                        }
                    }
                ]
            });

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

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

                $.validator.addMethod(
                    "regex",
                    function(value, element, regexp) {
                        var re = new RegExp(regexp);
                        return this.optional(element) || re.test(value);
                    },
                    "Please check your input."
                );

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

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

                $("#id_med-tag").rules('add', {
                    regex: "^[a-zA-Z0-9_]+$",
                    messages: {
                        regex: "Tag can only contain numbers, letters, and underscore characters"
                    }
                })

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

                $("#id_med-display_name").rules('add', {
                    required: true,
                    messages: {
                        required: "Medpass display name cannot be blank."
                    }
                });

                $("#id_med-time_value").rules('add', {
                    required: true,
                    messages: {
                        required: "Medpass time cannot be blank."
                    }
                });

                $("#id_med-range_start").rules('add', {
                    required: true,
                    messages: {
                        required: "Medpass start time cannot be blank."
                    }
                });

                $("#id_med-range_stop").rules('add', {
                    required: true,
                    messages: {
                        required: "Medpass stop time cannot be blank."
                    }
                });

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

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

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

                $("#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 %}
    <table class="table table-bordered table-striped">
        <thead style="position: sticky; top: 0;">
        <tr class="dosis-report-header">
            <th>Description</th>
            <th>Display Name</th>
            <th>Time</th>
            <th>Format</th>
            <th>Start</th>
            <th>Stop</th>
            <th>Color</th>
            <th>Package</th>
            <th>EOM</th>
            <th>Active</th>
            <th>Is PRN</th>
            <th>Action</th>
        </tr>
        </thead>
        <tbody>
        {% for pass in medpass_list %}
            <tr>
                <td style="padding-bottom: 2px;">{{ pass.description }}</td>
                <td style="padding-bottom: 2px;">{{ pass.display_name }}</td>
                <td style="padding-bottom: 2px;">{{ pass.time_value|time:"h:i:s A" }}</td>
                <td style="padding-bottom: 2px;">{{ pass.timeformat.tag }}</td>
                <td style="padding-bottom: 2px;">{{ pass.range_start|time:"h:i:s A" }}</td>
                <td style="padding-bottom: 2px;">{{ pass.range_stop|time:"h:i:s A" }}</td>
                <td style="padding-bottom: 2px;">{{ pass.medpass_color.tag }}</td>
                <td style="padding-bottom: 2px;">{{ pass.default_package_tag }}</td>
                <td style="padding-bottom: 2px;">{{ pass.default_eom_tag }}</td>
                <td style="padding-bottom: 2px;">{{ pass.active }}</td>
                <td style="padding-bottom: 2px;">{{ pass.is_prn }}</td>
                <td><a href="{% url 'site:settings-edit-medpass' pass.id %}">
                    <i title="Edit Medpass"
                       class="icon-pencil"></i></a>&nbsp;&nbsp;&nbsp;
                    <a href="{% url 'site:settings-medpass-lookup' pass.id %}"><i title="Edit Medpass Lookups"
                                                                                  class="icon-search"></i></a></td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    <div>
            <span><button style="float: left;" type="button" name="btn-add-medpass" id="btn-add-medpass" class="btn">Add
                Medpass
            </button>
            </span>
    </div>
    <div id="edit-medpass" title="Edit Medpass" style="margin-left: 2px; font-size: 11pt;">
        <form id="editMedpassForm" name="editMedpassForm" method="POST">
            {% csrf_token %}
            <div class="alert alert-error" id="edit-medpass-validation-alert" style="display: none;">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <ul id="edit-medpass-validation-error-list">
                </ul>
            </div>
            <table style="width: 90%;">
                <tr>
                    <td class="site-drug-edit-td">Tag:
                        {% if edit_form.dosis_default.value == True %}{{ edit_form.tag.value }}
                        {% endif %}{{ edit_form.tag }}</td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">Description: {{ edit_form.description }}&nbsp;&nbsp;&nbsp;
                        Display Name: {{ edit_form.display_name }}</td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">Time: {{ edit_form.time_value }}&nbsp;&nbsp;&nbsp;
                        Format: {{ edit_form.timeformat }}&nbsp;&nbsp;&nbsp;
                        Start: {{ edit_form.range_start }}&nbsp;&nbsp;&nbsp;
                        Stop: {{ edit_form.range_stop }}</td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">Color: {{ edit_form.medpass_color }}&nbsp;&nbsp;&nbsp;
                        Default Package: {{ edit_form.default_package_tag }}</td>
                </tr>
                <tr>
                    <td>
                        Default EOM: {{ edit_form.default_eom_tag }}&nbsp;&nbsp;&nbsp;&nbsp;{{ edit_form.active }}
                        Active&nbsp;&nbsp;&nbsp;&nbsp;{{edit_form.is_prn}} Is PRN
                    </td>
                </tr>
                <tr>
                    <td>
                        Calendar Fill Flags: {{ cal_form.calendar_fill_flags }}
                    </td>
                </tr>
                <tr>
                    <td>
                        {{ edit_form.facility_id }}Facility:
                        <div class="multi-select-checkbox-container" style="height: auto;">
                            <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>
            </table>
        </form>
    </div>
{% endblock %}