{% extends "site.html" %}

{% block head %}
    <script>
        $(function () {
            var rowcanistertimer;
            rowcanistertimer = setInterval(function () {
                $.ajax({
                    url: "{% url 'site:l60-cabinet-refresh' unit.tag %}",
                    type: "POST",
                    data: {
                        csrfmiddlewaretoken: '{{csrf_token}}'
                    },
                    success: function (data, status, jqXHR) {
                        $('#canister_map_div_ajax').html(data);
                    }
                })
            }, 5000);
            /*5 seconds*/

            var cabinetstatustimer;
            cabinetstatustimer = 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">
        &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="span9">
        <div id="canister_map_div_ajax">
            {% include 'l60-canister-map.html' %}
        </div>
        <div id="legend" title="Click to view expanded legend.">
                <table style="width: 550px;">
                    <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"></div>
                        </td>
                        <td>Low<br/>Quantity</td>
                        <td>
                            <div class="legend-canister btn can-orange"></div>
                        </td>
                        <td>Demand<br/>Exceeded</td>
                        <td>
                            <div class="legend-canister btn can-red"></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: 550px;">
                    <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>
                        <td><img width="14" height="14" src="{{ STATIC_URL }}img/rx_icon.png"/></td>
                        <td>Work<br/>Pending</td>
                        <td>&nbsp;<b>P</b>&nbsp;</td>
                        <td>Prepack<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"></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"></div>
                    </td>
                    <td>&nbsp;Demand Exceeded</td>
                    <td style="width: 40px;">&nbsp;</td>
                    <td><img width="36" height="36" src="{{ STATIC_URL }}img/rx_icon.png"/></td>
                    <td>&nbsp;Work Pending</td>
                </tr>
                <tr>
                    <td>
                        <div class="canister btn can-red"></div>
                    </td>
                    <td>&nbsp;Replenish</td>
                    <td style="width: 40px;">&nbsp;</td>
                    <td style="font-size: 24pt; font-weight: bold;">P</td>
                    <td>&nbsp;Prepack 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 %}