{% extends "facility-rules-container.html" %}


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

        function get_fac_id(field, field_name) {
            var lookupid = field.attr("id");
            lookupid = lookupid.replace(field_name, "");
            return $("#" + lookupid + '-id').val();
        }

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

            $("#tab-facility-management").attr("class", "active");

            $("#add-facility").dialog({
                autoOpen: false,
                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 () {
                            //remove non ascii characters from fields before validation
                            $('#id_addfac-label_id').val($('#id_addfac-label_id').val().replace(/[^\x00-\x7F]/g, ''))
                            $('#id_addfac-label_name').val($('#id_addfac-label_name').val().replace(/[^\x00-\x7F]/g, ''))
                            $('#id_addfac-description').val($('#id_addfac-description').val().replace(/[^\x00-\x7F]/g, ''))
                            $("#addFacilityForm").validate();
                            if ($("#addFacilityForm").valid()) {
                                document.addFacilityForm.submit();
                                $(this).dialog("close");
                            }
                        }
                    }
                ]
            });

            $("input[id$='-label_id']").change(function () {
                // regex replaces any character outside the range of 0-127 (ascii) with no character
                $.post("{% url 'site:settings-update-facility-field' %}",
                        {'csrfmiddlewaretoken': '{{csrf_token}}',
                            fac_id: get_fac_id($(this), "-label_id"),
                            field_type: 'label_id',
                            field_val: $(this).val().replace(/[^\x00-\x7F]/g, '')});
            });

            $("input[id$='-label_name']").change(function () {
                $.post("{% url 'site:settings-update-facility-field' %}",
                        {'csrfmiddlewaretoken': '{{csrf_token}}',
                            fac_id: get_fac_id($(this), "-label_name"),
                            field_type: 'label_name',
                            field_val: $(this).val().replace(/[^\x00-\x7F]/g, '')});
            });

            $("input[id$='-description']").change(function () {
                $.post("{% url 'site:settings-update-facility-field' %}",
                        {'csrfmiddlewaretoken': '{{csrf_token}}',
                            fac_id: get_fac_id($(this), "-description"),
                            field_type: 'description',
                            field_val: $(this).val().replace(/[^\x00-\x7F]/g, '')});
            });

            $("input[id$='-active']").click(function () {
                $.post("{% url 'site:settings-update-facility-field' %}",
                        {'csrfmiddlewaretoken': '{{csrf_token}}',
                            fac_id: get_fac_id($(this), "-active"),
                            field_type: 'active',
                            field_val: $(this).prop("checked")});
            });

            $("#btn-add-facility").click(function () {
                $("#add-facility").dialog("open");
            });

            $("#btn-add-facility-bottom").click(function () {
                $("#add-facility").dialog("open");
            });

            $("#addFacilityForm").validate({
                onkeyup: false,
                errorContainer: $("#add-facility-validation-alert"),
                errorLabelContainer: $("ul", $("#add-facility-validation-alert")),
                wrapper: 'li'
            });

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

            $("#id_addfac-label_name").rules('add', {
                required: true,
                messages: {
                    required: "Facility Label Name cannot be blank."
                }
            });


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

{% block sub-content %}
    <div>
            <span><button style="float: left; margin-bottom: 20px;" type="button" name="btn-add-facility" id="btn-add-facility" class="btn">
                Add
                Facility
            </button>
            </span>
    </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-th-list"></i></th>
        </tr>
        </thead>
        <tbody>
        {% for fac in facility_form_list %}
            <tr>
                <td style="padding-bottom: 2px;">{{ fac.facform.id }}{{ fac.facform.label_id }}</td>
                <td style="padding-bottom: 2px;">{{ fac.facform.label_name }}</td>
                <td style="padding-bottom: 2px;">{{ fac.facform.description }}</td>
                <td style="padding-bottom: 2px;">{% for lookup in fac.lookup %}{% if not forloop.first %}; {% endif %}{{ lookup }}{% endfor %}</td>
                <td style="padding-bottom: 2px;">{{ fac.facform.active }}</td>
                <td style="padding-bottom: 2px;"><a href="{% url 'site:settings-customer-facility-label-info' fac.facform.id.value %}"><i title="Edit Facility Label Info"
                                                                                        class="icon-film"></i></a>&nbsp;&nbsp;&nbsp;
                     <a href="{% url 'site:settings-customer-facility-lookup' fac.facform.id.value %}"><i title="Edit Facility Interface Lookups"
                                                                                        class="icon-search"></i></a>&nbsp;&nbsp;&nbsp;
                <a href="{% url 'site:settings-facility-sub-rule' fac.facform.id.value %}"><i title="Edit Facility Sub Rules"
                                                                                        class="icon-globe"></i></a></td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    {% include 'pagenav.html' %}
    <div>
            <span><button style="float: left;" type="button" name="btn-add-facility-bottom" id="btn-add-facility-bottom" class="btn">
                Add
                Facility
            </button>
            </span>
    </div>
    <div id="add-facility" title="Add Facility" style="margin-left: 2px; font-size: 11pt;">
        <form id="addFacilityForm" name="addFacilityForm" method="POST">
            {% csrf_token %}
            <input type="hidden" id="add_facility_flag" name="add_facility_flag" value="ADD"/>
            <input type="hidden" name="{{ add_facility_form.active.html_name }}" value="True"/>
            <div class="alert alert-error" id="add-facility-validation-alert" style="display: none;">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <ul id="add-facility-validation-error-list">
                </ul>
            </div>
            <table style="width: 90%;">
                <tr>
                    <td class="site-drug-edit-td">Facility Id: {{ add_facility_form.label_id }}</td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">Facility Name: {{ add_facility_form.label_name }}</td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">Description: {{ add_facility_form.description }}</td>
                </tr>
            </table>
        </form>
    </div>
{% endblock %}