{% extends "support.html" %}


{% block head %}
    {{ block.super }}
    <script>
        $(function () {
            $(document).tooltip();
            var $build_type_choice = $('#id_build_type');
            var $prior_sn_field = $('#prior_dafe_sn_field');
            var hide_prior_sn_val = 'new';

            $("#edit-dafe").dialog({
                {% if showAddEdit == 'Y' %}
                    autoOpen: true,
                {% else %}
                    autoOpen: false,
                {% endif %}
                closeOnEscape: false,
                modal: true,
                draggable: false,
                width: 1000,
                close: function () {
                    window.location.href = "{% url 'support:support-equipment-status' %}";
                },
                buttons: [
                    {
                        text: "Close",
                        "class": 'modal-dialog-button-right',
                        click: function () {
                            $(this).dialog("close");
                        }
                    },
                    {
                        text: "Save",
                        "class": 'modal-dialog-button-left',
                        click: function () {
                            $("#editDafeForm").validate();
                            if ($("#editDafeForm").valid()) {
                                document.editDafeForm.submit();
                                $(this).dialog("close");
                            }
                        }
                    }
                ]
            });

            $("#dafe-operating-status").dialog({
                {% if showStatus == 'Y' %}
                    autoOpen: true,
                {% else %}
                    autoOpen: false,
                {% endif %}
                closeOnEscape: true,
                modal: true,
                draggable: false,
                width: 1000,
                close: function () {
                    window.location.href = "{% url 'support:support-equipment-status' %}";
                },
                buttons: [
                    {
                        text: "Close",
                        "class": 'modal-dialog-button-right',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });

            $("#dafe-process-status").dialog({
                {% if showProcessStatus == 'Y' %}
                    autoOpen: true,
                {% else %}
                    autoOpen: false,
                {% endif %}
                closeOnEscape: true,
                modal: true,
                draggable: false,
                width: 1000,
                close: function () {
                    window.location.href = "{% url 'support:support-equipment-status' %}";
                },
                buttons: [
                    {
                        text: "Close",
                        "class": 'modal-dialog-button-right',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });

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

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

                $("#id_editdafe-display_name").rules('add', {
                    required: true,
                    messages: {
                        required: "Dafe Display Name cannot be blank."
                    }
                });
            {% endif %}

            $('#new_canister_dafe').on('change', function(){
                if ($(this).val() === 'No Change'){
                    $('#change_canister_warn').css('display', 'none');
                    $('#change_canister_warn').css('border-top', 'none');
                    $('#change_canister_warn').css('border-left', 'none');
                    $('#change_canister_warn').css('border-right', 'none');

                    $('#change_canister_default_dafe').css('border-left', 'none');
                    $('#change_canister_default_dafe').css('border-right', 'none');
                    $('#change_canister_default_dafe').css('border-bottom', 'none');
                } else {
                    $('#change_canister_warn').css('display', 'table-row');
                    $('#change_canister_warn').css('border-top', '1px solid green');
                    $('#change_canister_warn').css('border-left', '1px solid green');
                    $('#change_canister_warn').css('border-right', '1px solid green');

                    $('#change_canister_default_dafe').css('border-left', '1px solid green');
                    $('#change_canister_default_dafe').css('border-right', '1px solid green');
                    $('#change_canister_default_dafe').css('border-bottom', '1px solid green');
                }
            });

            function toggleOtherField() {
                var selected = $build_type_choice.val();
                var shouldHide = selected === hide_prior_sn_val;

                $prior_sn_field.toggle(!shouldHide);
            }

            $build_type_choice.on('change', toggleOtherField);
            toggleOtherField(); // initial state

            $('#btn-show-inactive').on('click', function () {
                $('tr.hidden').toggle();

                let button = $(this);
                if (button.text() === 'Show Inactive Dafe(s)') {
                    button.text('Hide Inactive Dafe(s)');
                } else {
                    button.text('Show Inactive Dafe(s)');
                }
            });
        });
    </script>
    <style>
        .hidden {
            display: none;
        }

        table.table tr.hidden td {
            background-color: #b1b3b5;
            color: #5B5B5B;
        }

        @keyframes flash_red {
            0% { background-color: #f8d7da; }
            50% { background-color: lightcoral; }
            100% { background-color: #f8d7da; }
        }

        table.table tr.flash-danger td {
            animation: flash_red 2s infinite;
        }
    </style>
{% 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><a class="sortable-table-header" href="?sort={% if current_sort != 'tag' %}tag{% else %}-tag{% endif %}">Tag&nbsp;{% if current_sort == 'tag' %}<i class="icon-chevron-down"></i>{% elif current_sort == '-tag' %}<i class="icon-chevron-up"></i>{% endif %}</a></th>
            <th><a class="sortable-table-header" href="?sort={% if current_sort != 'description' %}description{% else %}-description{% endif %}">Description&nbsp;{% if current_sort == 'description' %}<i class="icon-chevron-down"></i>{% elif current_sort == '-description' %}<i class="icon-chevron-up"></i>{% endif %}</a></th>
            <th><a class="sortable-table-header" href="?sort={% if current_sort != 'display_name' %}display_name{% else %}-display_name{% endif %}">Display Name&nbsp;{% if current_sort == 'display_name' %}<i class="icon-chevron-down"></i>{% elif current_sort == '-display_name' %}<i class="icon-chevron-up"></i>{% endif %}</a></th>
            <th><a class="sortable-table-header" href="?sort={% if current_sort != 'dafe_sn' %}dafe_sn{% else %}-dafe_sn{% endif %}">Serial Num.&nbsp;{% if current_sort == 'dafe_sn' %}<i class="icon-chevron-down"></i>{% elif current_sort == '-dafe_sn' %}<i class="icon-chevron-up"></i>{% endif %}</a></th>
            <th><a class="sortable-table-header" href="?sort={% if current_sort != 'dafe_type__tag' %}dafe_type__tag{% else %}-dafe_type__tag{% endif %}">Type&nbsp;{% if current_sort == 'dafe_type__tag' %}<i class="icon-chevron-down"></i>{% elif current_sort == '-dafe_type__tag' %}<i class="icon-chevron-up"></i>{% endif %}</a></th>
            <th><a class="sortable-table-header" href="?sort={% if current_sort != 'site_ip' %}site_ip{% else %}-site_ip{% endif %}">Site IP&nbsp;{% if current_sort == 'site_ip' %}<i class="icon-chevron-down"></i>{% elif current_sort == '-site_ip' %}<i class="icon-chevron-up"></i>{% endif %}</a></th>
            <th><a class="sortable-table-header" href="?sort={% if current_sort != 'allow_filling' %}allow_filling{% else %}-allow_filling{% endif %}">Allow Filling&nbsp;{% if current_sort == 'allow_filling' %}<i class="icon-chevron-down"></i>{% elif current_sort == '-allow_filling' %}<i class="icon-chevron-up"></i>{% endif %}</a></th>
            <th><a class="sortable-table-header" href="?sort={% if current_sort != 'active' %}active{% else %}-active{% endif %}">Active&nbsp;{% if current_sort == 'active' %}<i class="icon-chevron-down"></i>{% elif current_sort == '-active' %}<i class="icon-chevron-up"></i>{% endif %}</a></th>
            <th><a class="sortable-table-header" href="?sort={% if current_sort != 'updatable' %}updatable{% else %}-updatable{% endif %}">Updatable&nbsp;{% if current_sort == 'updatable' %}<i class="icon-chevron-down"></i>{% elif current_sort == '-updatable' %}<i class="icon-chevron-up"></i>{% endif %}</a></th>
            <th>Action</th>
        </tr>
        </thead>
        <tbody>
        {% for dafe in equip_list %}
            <tr {% if not dafe.active %}class="hidden"{% endif %}>
                <td style="padding-bottom: 2px;">{{ dafe.tag }}</td>
                <td style="padding-bottom: 2px;">{{ dafe.description }}</td>
                <td style="padding-bottom: 2px;">{{ dafe.display_name }}</td>
                <td style="padding-bottom: 2px;">{{ dafe.dafe_sn }}</td>
                <td style="padding-bottom: 2px;">{{ dafe.dafe_type.tag }}</td>
                <td style="padding-bottom: 2px;">{{ dafe.site_ip }}</td>
                <td style="padding-bottom: 2px;">{{ dafe.allow_filling }}</td>
                <td style="padding-bottom: 2px;">{{ dafe.active }}</td>
                <td style="padding-bottom: 2px;">{{ dafe.updatable }}</td>
                <td><a href="{% url 'support:support-edit-dafe' dafe.id %}"><i title="Edit Tower"
                                                                               class="icon-pencil"></i></a>&nbsp;&nbsp;&nbsp;
                    <a href="{% url 'support:support-show-dafe-operating-status' dafe.id %}"><i title="Tower Status"
                                                                                                class="icon-info-sign"></i></a>&nbsp;&nbsp;&nbsp;
                    <a href="{% url 'support:support-show-dafe-process-status' dafe.id %}"><i
                            title="Dafe Process Status"
                            class="icon-cog"></i></a>&nbsp;&nbsp;&nbsp;
                    <a href="{% url 'support:support-show-dafe-blister-fill-status' dafe.id %}"><i
                            title="Dafe Blister Fill/Pack Status"
                            class="icon-camera"></i></a>&nbsp;&nbsp;&nbsp;
                    {% if dafe.tag != 'SYSTEM' %}
                    <a href="{% url 'support:show-regmark-errors' dafe.id %}"><i
                            title="Canister Alignment Images"
                            class="icon-align-center"></i></a>{% endif %}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    <!--div>
            <span><button style="float: left;" type="button" name="btn-add-dafe" id="btn-add-dafe"
                          class="btn">Add Dafe
            </button>
            </span>
    </div-->
    <div>
            <span><button style="float: right;" type="button" name="btn-show-inactive" id="btn-show-inactive" class="btn">Show Inactive Dafe(s)</button></span>
    </div>
    <div id="edit-dafe" title="Edit Dafe" style="margin-left: 2px;">
        <form id="editDafeForm" name="editDafeForm" method="POST">
            {% csrf_token %}
            <div class="alert alert-error" id="edit-dafe-validation-alert" style="display: none;">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <ul id="edit-dafe-validation-error-list">
                </ul>
            </div>
            <table style="width: 90%;">
                {% if add_mode == False %}
                <tr>
                    <td class="site-drug-edit-td">Tag:
                        {{ edit_form.tag.value }}
                            <input type="hidden" name="tag" value="{{ edit_form.tag.value }}"/></td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">Description: {{ edit_form.description }}</td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">Display Name:
                        {{ edit_form.display_name }}&nbsp;&nbsp;&nbsp;{{ edit_form.active }}
                            Active</td>
                </tr>
                <tr id="change_canister_warn" style="display: none;"><td class="site-drug-edit-td"><span style="color: red;">*If Changed Incorrectly, Canisters have to be Changed Back Manually*</span></td></tr>
                {% if alt_dafe_list %}
                    <tr id="change_canister_default_dafe">
                        <td class="site-drug-edit-td">Move canisters from {{ edit_form.tag.value }} to:
                            <select name="new_canister_dafe" id="new_canister_dafe">
                                {% for alt_dafe in alt_dafe_list %}
                                    <option value="{{alt_dafe}}">{{alt_dafe}}</option>
                                {% endfor %}
                            </select>
                        </td>
                    </tr>
                {% endif %}
                <tr>
                    <td class="site-drug-edit-td">Allow Filling?: {{ edit_form.allow_filling }}</td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">Updatable?: {{ edit_form.updatable }}</td>
                </tr>
                {% endif %}
                <tr>
                    <td class="site-drug-edit-td">Serial Num: {{ edit_form.dafe_sn }}</td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">Dashboard Display Order (Larger number is Higher in Dashboard): {{ edit_form.display_order }}</td>
                </tr>
                {% if add_mode == False %}
                <tr>
                    <td class="site-drug-edit-td">Type: {{ edit_form.dafe_type }}</td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">Build Type: {{ edit_form.build_type }}</td>
                </tr>
                <tr id="prior_dafe_sn_field">
                    <td class="site-drug-edit-td">Prior Serial Num: {{ edit_form.prior_dafe_sn }}</td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">Site IP: {{ edit_form.site_ip }}</td>
                </tr>
                    {% for vpn in vpn_form_list %}
                        <tr>
                            <td class="site-drug-edit-td">{{ vpn.description }}: {{ vpn.vpn_form.vpn_ip }}</td>

                        </tr>
                    {% endfor %}
                <tr>
                    <td class="site-drug-edit-td">Canister Label Printer: {{ edit_form.printer_canister }}</td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">Return To Shelf Label Printer: {{ edit_form.printer_return_to_shelf }}</td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td" style="color: red; font-weight: bold;">
                        Warning: tower must be rebooted after changing the pill environment.
                    </td>
                </tr>
                <tr>
                    <td class="site-drug-edit-td">Pill Environment: {{ edit_form.pill_environment }}</td>
                </tr>
                {% endif %}
            </table>
        </form>
    </div>
    <div id="dafe-operating-status" title="Dafe Operating Status {{dafe_tag}}" style="margin-left: 2px;">
        <table class="table table-condensed">
            <tr>
            {% for stat in dafe_status %}
                 <td style="margin: 1px; padding: 1px;">
                    <table style="width: 100%;">
                        <tr class="info{% if stat.key == 'IS_GOOD_24V' and stat.status != 'TRUE' or stat.key == 'IS_GOOD_48V' and stat.status != 'TRUE' or stat.key == 'DOOR_STATUS_BSF' and stat.status == 'OPEN' or stat.key == 'DOOR_STATUS_LSU' and stat.status == 'OPEN' %} flash-danger{% endif %}">
                            <td><b>{{ stat.key }}</b></td>
                        </tr>
                        <tr>
                            <td>{{ stat.status }}</td>
                        </tr>
                    </table>
                 {% if forloop.counter|divisibleby:3 %}</tr><tr>{% endif %}
            {% endfor %}
            </tr>
        </table>
    </div>
    <div id="dafe-process-status" title="Dafe Process Status {{dafe_tag}}" style="margin-left: 2px;">
        <table class="table table-condensed">
            <tr>
            {% for proc in dafe_proc_status %}
                <td style="margin: 1px; padding: 1px;">
                    <table style="width: 100%;">
                        <tr class="info">
                            <td><b>{{ proc.key }}</b></td>
                        </tr>
                        <tr>
                            <td>{{ proc.status }}</td>
                        </tr>
                    </table>
                 {% if forloop.counter|divisibleby:2 %}</tr><tr>{% endif %}
            {% endfor %}
        </tr>
        </table>
    </div>
{% endblock %}