{% extends "site.html" %}

{% block head %}
    <script>
        let SHOW_L_AND_X_ON_HMI = {{show_L_X | lower}};
        let CANISTER_MAP_DISPLAY_DRUG_INITIALS = {{display_drug_initials | lower}}
        let HMI_CYCLE_AND_DEMAND_ICONS = {{display_cycle_and_demand_icons | lower}}
        let SELECTED_CANISTER = '';

        // canister map json is provided manually on first load to prevent potential race condition in which:
        // update_canister_map is run before ajax success for get_canister_map
        let CANISTER_MAP = JSON.parse('{{canister_map|escapejs}}');

        function get_material_status() {
            $.ajax({
                url: "{% url 'L60:get-material-status' %}",
                type: 'GET',
                dataType: 'json',
                data: {
                    dafe_tag: '{{ unit.tag }}'
                },
                success: function (material_status) {
                    const status_elements = ['lids_status', 'labels_status', 'output_status', 'blisters_status'];
                    for (const i in status_elements) {
                        let status_element = $('#' + status_elements[i]);
                        status_element.removeClass('material-status-ok');
                        status_element.removeClass('material-status-warn');
                        status_element.removeClass('material-status-error');
                        status_element.addClass('material-status-' + material_status[status_elements[i].split('_')[0]]);
                    }
                }
            })
        }

        function get_canister_map() {
            dosis_api.get("{% url 'api:canister_map' %}", {tower_name: '{{unit.tag}}'}).then(response => {
                CANISTER_MAP = response;
            });
        }
        get_canister_map();


        // update global variable for if L X and E should be shown on HMI
        function get_SHOW_L_AND_X_ON_HMI() {
            dosis_api.get("{% url 'api:site_settings' %}", {site_setting: 'SHOW_L_AND_X_ON_HMI'}).then(response => {
                SHOW_L_AND_X_ON_HMI = response[0]['value'] === 'TRUE';
            })
        }
        get_SHOW_L_AND_X_ON_HMI();

        // update global variable for if drug initials should be displayed on screen
        function get_CANISTER_MAP_DISPLAY_DRUG_INITIALS() {
            dosis_api.get("{% url 'api:site_settings' %}", {site_setting: 'CANISTER_MAP_DISPLAY_DRUG_INITIALS'}).then(response => {
                CANISTER_MAP_DISPLAY_DRUG_INITIALS = response[0]['value'] === 'TRUE';
            })
        }
        get_CANISTER_MAP_DISPLAY_DRUG_INITIALS();

        // update global variable for if drug initials should be displayed on screen
        function get_HMI_CYCLE_AND_DEMAND_ICONS() {
            dosis_api.get("{% url 'api:site_settings' %}", {site_setting: 'HMI_CYCLE_AND_DEMAND_ICONS'}).then(response => {
                HMI_CYCLE_AND_DEMAND_ICONS = response[0]['value'] === 'TRUE';
            })
        }
        get_HMI_CYCLE_AND_DEMAND_ICONS();

        function open_canister_info(canister) {
            let can_data_id = $(canister).attr('data-id');

            if (can_data_id !== 'None') {
                $.ajax({
                    url: "{% url 'site:canister-info' 'FF' %}".replace('FF', can_data_id),
                    async: false
                }).done(function (d) {
                    $('.canister-status-content').replaceWith(d);
                });
                $('.canister').css('box-shadow', '2px 2px 1px #cccccc');
                $(canister).css('box-shadow', '0px 0px 3px 4px orange');
                SELECTED_CANISTER = $(canister).attr('id');
            } else {
                $('.canister').css('box-shadow', '2px 2px 1px #cccccc');
                $('.canister-status-content').replaceWith('<div class="canister-status-content"></div>');
            }
        }

        function update_canister_map() {
            let canister_map = CANISTER_MAP;
            for (const i in canister_map) {
                // index of 3 and 9 are used due to lack of potential conflict ie between 1 and 12 if first char is used
                if (canister_map[i]['location'].slice(1, 2) === '3') {
                    if (canister_map[i]['is_locked']) {
                        $('#row-lock-' + canister_map[i]['location'].slice(0, 1) + '-left-unlocked').hide();
                        $('#row-lock-' + canister_map[i]['location'].slice(0, 1) + '-left-locked').show();
                    } else {
                        $('#row-lock-' + canister_map[i]['location'].slice(0, 1) + '-left-locked').hide();
                        $('#row-lock-' + canister_map[i]['location'].slice(0, 1) + '-left-unlocked').show();
                    }
                } else if (canister_map[i]['location'].slice(1, 2) === '9') {
                    if (canister_map[i]['is_locked']) {
                        $('#row-lock-' + canister_map[i]['location'].slice(0, 1) + '-right-unlocked').hide();
                        $('#row-lock-' + canister_map[i]['location'].slice(0, 1) + '-right-locked').show();
                    } else {
                        $('#row-lock-' + canister_map[i]['location'].slice(0, 1) + '-right-locked').hide();
                        $('#row-lock-' + canister_map[i]['location'].slice(0, 1) + '-right-unlocked').show();
                    }
                }

                const canister_location = canister_map[i]['location'];
                // items in canister map should be in order from A1 -> E12, but also comes with id
                const canister_element = $('#' + canister_location);
                // Remove classes that start with "can-" from the element
                canister_element.removeClass(function (index, className) {
                    return (className.match(/\bcan-\S+/g) || []).join(' ');
                });

                // Remove blue/orange circle from non-attention & broken canisters
                if (canister_map[i]['display_status'].slice(0, 9) !== 'ATTENTION' || canister_map[i]['display_status'] !== 'BROKEN') {
                    $('#' + canister_location + '_ATTENTION').hide();
                    $('#' + canister_location + '_BROKEN').hide();
                }

                // remove/show half tab icon on map
                if (canister_map[i]['pill_fraction'] === 1 || canister_map[i]['pill_fraction'] === null) {
                    $('#' + canister_location + '_HALF_TAB').hide();
                } else {
                    $('#' + canister_location + '_HALF_TAB').show();
                }

                // change color of canister
                if (canister_map[i]['display_status'] === 'NOT_COMMISSIONED') {
                    canister_element.addClass('can-black');
                } else if (canister_map[i]['display_status'].slice(0, 2) === 'OK') {
                    canister_element.addClass('can-blue');
                } else if (canister_map[i]['display_status'].slice(0, 3) === 'LOW') {
                    canister_element.addClass('can-yellow');
                } else if (canister_map[i]['display_status'].slice(0, 6) === 'DEMAND') {
                    canister_element.addClass('can-orange');
                } else if (canister_map[i]['display_status'].slice(0, 5) === 'EMPTY') {
                    canister_element.addClass('can-red');
                } else if (canister_map[i]['display_status'].slice(0, 9) === 'ATTENTION') {
                    $('#' + canister_location + '_ATTENTION').show();
                    canister_element.addClass('can-light-grey');
                } else if (canister_map[i]['display_status'] === 'BROKEN') {
                    $('#' + canister_location + '_BROKEN').show();
                } else if (canister_map[i]['display_status'].slice(0, 6) === 'VERIFY') {
                    canister_element.addClass('can-pink');
                } else {
                    canister_element.addClass('can-grey');
                    if (SELECTED_CANISTER === canister_location){
                        $('.canister').css('box-shadow', '2px 2px 1px #cccccc');
                        $('.canister-status-content').replaceWith('<div class="canister-status-content"></div>');
                    }
                }


                // hide everything first
                $('#' + canister_location + '_WORK').hide();
                $('#' + canister_location + '_PREPACK').hide();
                $('#' + canister_location + '_CYCLE').hide();
                $('#' + canister_location + '_DEMAND').hide();

                // show icons that need to be shown
                if (HMI_CYCLE_AND_DEMAND_ICONS) {
                    if (canister_map[i]['demand_card_demand'] > 0) {
                        $('#' + canister_location + '_DEMAND').show();
                    } else if (canister_map[i]['cycle_card_demand'] > 0) {
                        $('#' + canister_location + '_CYCLE').show();
                    } else if (canister_map[i]['display_status'].includes('PREPACK')) {
                        $('#' + canister_location + '_PREPACK').show();
                    }
                } else {
                    if (canister_map[i]['display_status'].includes('WORK')) {
                        $('#' + canister_location + '_WORK').show();

                    } else if (canister_map[i]['display_status'].includes('PREPACK')) {
                        $('#' + canister_location + '_PREPACK').show();
                    }
                }

                // Change text on canister map
                if (canister_map[i]['display_status'].includes('HOLD')) {
                    $('#' + canister_location + '_CAN_STATUS').text('H');
                } else if (canister_map[i]['display_status'].includes('TNG')) {
                    $('#' + canister_location + '_CAN_STATUS').text('T');
                } else if (SHOW_L_AND_X_ON_HMI) {
                    if (canister_map[i]['display_status'].includes('LOW')) {
                        $('#' + canister_location + '_CAN_STATUS').text('L');
                    } else if (canister_map[i]['display_status'].includes('DEMAND')) {
                        $('#' + canister_location + '_CAN_STATUS').text('X');
                    } else if (canister_map[i]['display_status'].includes('EMPTY')) {
                        $('#' + canister_location + '_CAN_STATUS').text('E');
                    } else {
                        $('#' + canister_location + '_CAN_STATUS').text('');
                    }
                } else {
                    if (CANISTER_MAP_DISPLAY_DRUG_INITIALS) {
                        if (canister_map[i]['display_status'].slice(0, 9) !== 'ATTENTION' && canister_map[i]['display_status'] !== 'BROKEN'){
                            if (canister_map[i]['drug_name'] !== '') {
                                $('#' + canister_location + '_CAN_STATUS').text(canister_map[i]['drug_name'].charAt(0) + canister_map[i]['drug_name'].slice(1,2).toLowerCase());
                            } else {
                                $('#' + canister_location + '_CAN_STATUS').text('');
                            }
                        } else {
                            $('#' + canister_location + '_CAN_STATUS').text('');
                        }
                    } else {
                        $('#' + canister_location + '_CAN_STATUS').text('');
                    }
                }

                // Change serial and id in the data portion
                if (canister_map[i]['canister_id'] === null) {
                    canister_element.attr("data-id", 'None');
                } else {
                    canister_element.attr("data-id", canister_map[i]['canister_id']);
                }

                if (canister_map[i]['serial_number'] === null) {
                    canister_element.attr("data-serial", 'None');
                } else {
                    canister_element.attr("data-serial", canister_map[i]['serial_number']);
                }
            }
        }

        // canister map div looks cramped on monitors less than 1366x768
        // take some of the white space on the right and use it for the canister map
        function reactive_canister_map_resize(){
            let canister_map_div = $('#canister_map_div');
            if($(window).width() < 1367){
                canister_map_div.removeClass('span6');
                canister_map_div.addClass('span8');
            } else {
                canister_map_div.removeClass('span8')
                canister_map_div.addClass('span6');
            }
        }

        $(function () {
            update_canister_map();
            reactive_canister_map_resize();

            setInterval(function () {
                get_canister_map();
                update_canister_map();
            }, 1500)
            /*1.5 seconds*/

            setInterval(function() {
                get_material_status();
            }, 6000)
            // 6 seconds

            setInterval(function() {
                get_SHOW_L_AND_X_ON_HMI();
                get_CANISTER_MAP_DISPLAY_DRUG_INITIALS();
                get_HMI_CYCLE_AND_DEMAND_ICONS();
            }, 30000)
            // 30 seconds

            $(window).resize(function(){
                reactive_canister_map_resize();
            });


            setInterval(function () {
                $.ajax({
                    url: "{% url 'site:l60-cabinet-status-refresh' unit.tag %}",
                    type: "POST",
                    data: {
                        csrfmiddlewaretoken: '{{csrf_token}}'
                    },
                    success: function (data, status, jqXHR) {
                        $('#cabinet-status-div').html(data);
                    }
                })
            }, 5000);
            /*5 seconds*/


            $("#l60-alerts").dialog({
                autoOpen: false,
                closeOnEscape: true,
                modal: true,
                draggable: false,
                width: 1200,
                position: {my: "top", at: "top", of: window},
                open: function (event, ui) {
                    $('#l60-alerts-content').html('Loading alerts...');
                    $.ajax({
                        url: "{% url 'site:l60-alerts' %}",
                        type: "POST",
                        data: {
                            csrfmiddlewaretoken: '{{csrf_token}}',
                            current_dafe_id: $("#current_dafe_id").val()
                        },
                        success: function (data, status, jqXHR) {
                            $('#l60-alerts-content').html(data);
                        }
                    })
                },
                buttons: [
                    {
                        text: "Close",
                        "class": 'modal-dialog-button-right',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });

            $("#l60-current-blister").dialog({
                autoOpen: false,
                closeOnEscape: true,
                modal: true,
                draggable: false,
                width: 1200,
                position: {my: "top", at: "top", of: window},
                open: function (event, ui) {
                    $('#l60-current-blister-content').html('Loading current blister info...');
                    $.ajax({
                        url: "{% url 'site:l60-current-blister' %}",
                        type: "POST",
                        data: {
                            csrfmiddlewaretoken: '{{csrf_token}}',
                            current_dafe_id: $("#current_dafe_id").val()
                        },
                        success: function (data, status, jqXHR) {
                            $('#l60-current-blister-content').html(data);
                        }
                    })
                },
                buttons: [
                    {
                        text: "Close",
                        "class": 'modal-dialog-button-right',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });


            $("#legend-details").dialog({
                autoOpen: false,

                closeOnEscape: true,
                modal: true,
                draggable: false,
                width: 550,
                buttons: [
                    {
                        text: "Close",
                        "class": 'modal-dialog-button-right',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });

            $("#legend").click(function () {
                $("#legend-details").dialog("open");
            })

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

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

{% block navigation %}
    <div class="span3" style="display: flex; flex-direction: column;">
        &nbsp;
        <div class="well" id="cabinet-status-div">
            {% include 'l60-cabinet-status.html' %}
        </div>
        <ul class="nav nav-list">
            <li>
                <div class="canister-status-content"></div>
            </li>
        </ul>
    </div>
{% endblock %}

{% block content %}
    <form id="frmCabinetStatus" name="frmCabinetStatus" method="POST">
    <input type="hidden" name="current_dafe_id" id="current_dafe_id" value=""/>
    <div id="canister_map_div" class="span6" style="display: flex; flex-direction: column; align-items: center;">
        {% include 'l60-canister-map.html' %}
        <div id="legend" title="Click to view expanded legend." style="display: flex; flex-direction: column; align-items: center; margin-top: 1vh;">
                <table style="width: 80%; table-layout: fixed;">
                    <tr>
                        <td style="width: 50px;"><strong> Legend: </strong></td>
                        <td>
                            <div class="legend-canister btn can-blue"></div>
                        </td>
                        <td>OK</td>
                        <td>
                            <div class="legend-canister btn can-yellow">
                                {% if show_L_X %}
                                    <div class="trainstatus">L</div>
                                {% endif %}
                            </div>
                        </td>
                        <td>Low<br/>Quantity</td>
                        <td>
                            <div class="legend-canister btn can-orange">
                                {% if show_L_X %}
                                    <div class="trainstatus">X</div>
                                {% endif %}
                            </div>
                        </td>
                        <td>Demand<br/>Exceeded</td>
                        <td>
                            <div class="legend-canister btn can-red">
                                {% if show_L_X %}
                                    <div class="trainstatus">E</div>
                                {% endif %}
                            </div>
                        </td>
                        <td>Replenish</td>
                        <td>
                            <div class="legend-canister btn can-pink"></div>
                        </td>
                        <td>Replen Verify<br/>Pending</td>
                        <td>
                            <div class="legend-canister btn can-grey"></div>
                        </td>
                        <td>Vacant</td>
                        <td>
                            <div class="legend-canister btn can-black"></div>
                        </td>
                        <td>No<br/>Drug</td>
                    </tr>
                </table>
                <table style="width: 80%; table-layout: fixed;">
                    <tr>
                        <td style="width: 50px;">&nbsp;</td>
                        <td><img height='14' width='14' src="{{ STATIC_URL }}img/blue_circle.png"/></td>
                        <td>Needs<br/>Attention</td>
                        <td><img height='14' width='14' src="{{ STATIC_URL }}img/orange_circle.png"/></td>
                        <td>Canister<br/>Broken</td>
                        {% if display_cycle_and_demand_icons %}
                            <td>&nbsp;<b>C</b>&nbsp;</td>
                            <td>Cycle<br/>Pending</td>
                            <td>&nbsp;<b>D</b>&nbsp;</td>
                            <td>Demand<br/>Pending</td>
                        {% else %}
                            <td><img width="14" height="14" src="{{ STATIC_URL }}img/rx_icon.png"/></td>
                            <td>Work<br/>Pending</td>
                        {% endif %}
                        <td>&nbsp;<b>P</b>&nbsp;</td>
                        <td>Pre-Pack<br/>Only Pending</td>
                        <td>&nbsp;<b>H</b>&nbsp;</td>
                        <td>Drug<br/>Deactivated</td>
                        <td>&nbsp;<b>T</b>&nbsp;</td>
                        <td>Needs<br/>Training</td>
                        <td>&nbsp;<b>&#189;</b>&nbsp;</td>
                        <td>Half-Tabs<br/>in use</td>
                    </tr>
                </table>
            </div>
        <div id="legend-details" title="Canister Display Legend">
            <table>
                <tr>
                    <td>
                        <div class="canister btn can-blue"></div>
                    </td>
                    <td>&nbsp;OK</td>
                    <td style="width: 40px;">&nbsp;</td>
                    <td><img height='36' width='36' src="{{ STATIC_URL }}img/blue_circle.png"/></td>
                    <td>&nbsp;Needs Attention</td>
                </tr>
                <tr>
                    <td>
                        <div class="canister btn can-yellow">
                            {% if show_L_X %}
                                <div class="letterstatus">L</div>
                            {% endif %}
                        </div>
                    </td>
                    <td>&nbsp;Low Quantity</td>
                    <td style="width: 40px;">&nbsp;</td>
                     <td><img height='36' width='36' src="{{ STATIC_URL }}img/orange_circle.png"/></td>
                    <td>&nbsp;Canister Broken</td>
                </tr>
                <tr>
                    <td>
                        <div class="canister btn can-orange">
                            {% if show_L_X %}
                                <div class="letterstatus">X</div>
                            {% endif %}
                        </div>
                    </td>
                    <td>&nbsp;Demand Exceeded</td>
                    <td style="width: 40px;">&nbsp;</td>
                    {% if display_cycle_and_demand_icons %}
                        <td>
                            <div style="display: flex; flex-direction: column; align-items: center;">
                                <div style="font-size: 24pt; font-weight: bold; padding-bottom: 12px;">C</div>
                                <div style="font-size: 24pt; font-weight: bold;">D</div>
                            </div>
                        </td>
                        <td>
                            <div style="display: flex; flex-direction: column;">
                                <div>&nbsp;Cycle Pending</div>
                                <div>&nbsp;Demand Pending</div>
                            </div>
                        </td>
                    {% else %}
                        <td><img width="36" height="36" src="{{ STATIC_URL }}img/rx_icon.png"/></td>
                        <td>&nbsp;Work Pending</td>
                    {% endif %}
                </tr>
                <tr>
                    <td>
                        <div class="canister btn can-red">
                            {% if show_L_X %}
                                <div class="letterstatus">E</div>
                            {% endif %}
                        </div>
                    </td>
                    <td>&nbsp;Replenish</td>
                    <td style="width: 40px;">&nbsp;</td>
                    <td style="font-size: 24pt; font-weight: bold;">P</td>
                    <td>&nbsp;Pre-Pack Only Pending</td>
                </tr>
                 <tr>
                    <td>
                        <div class="canister btn can-pink"></div>
                    </td>
                    <td>&nbsp;Replenish Verify Pending</td>
                    <td style="width: 40px;">&nbsp;</td>
                    <td style="font-size: 24pt; font-weight: bold;">H</td>
                    <td>&nbsp;Drug Deactivated</td>
                </tr>
                <tr>
                    <td>
                        <div class="canister btn can-grey"></div>
                    </td>
                    <td>&nbsp;Vacant</td>
                    <td style="width: 40px;">&nbsp;</td>
                    <td style="font-size: 24pt; font-weight: bold;">T</td>
                    <td>&nbsp;Needs Training</td>
                </tr>
                <tr>
                    <td>
                        <div class="canister btn can-black"></div>
                    </td>
                    <td>&nbsp;No Drug</td>
                    <td style="width: 40px;">&nbsp;</td>
                    <td style="font-size: 24pt; font-weight: bold;">&#189;</td>
                    <td>Half-Tabs in use</td>
                </tr>
            </table>
        </div>
    </div>
    <div id="l60-alerts" title="Alerts" style="margin-left: 2px;">
        <div id="l60-alerts-content">
            Loading Current Alerts...
        </div>
    </div>
    <div id="l60-current-blister" title="Current Blister in Filling/Packing" style="margin-left: 2px;">
        <div id="l60-current-blister-content">
            Loading Current Blister Info...
        </div>
    </div>
    </form>
{% endblock %}