{% extends "site.html" %}


{% block head %}
    {{ block.super }}
    <script>
        $(function () {
            //filter out !
            $(document).keypress(function (event) {
                if (event.charCode == 33) {  //!
                    $("#id_canister_barcode").focus();
                    $("#id_canister_barcode").select();
                    return false;
                } else {
                    return true;
                }
            });

            {% if show_form == False %}
                $("#id_canister_barcode").focus();
            {% endif %}

            var unattnalert = $("#unattention-canister-validation-alert");
            $("#unattentionCanisterForm").validate({
                onkeyup: false,
                errorContainer: unattnalert,
                errorLabelContainer: $("ul", unattnalert),
                wrapper: 'li'
            });

            $("#id_canister_barcode").rules('add', {
                required: true,
                rangelength: [10, 10],
                digits: true,
                messages: {
                    required: "Canister Serial Number cannot be blank.",
                    rangelength: "Canister Serial Number must be 10 digits.",
                    digits: "Canister Serial Number must be numeric.",
                   }
            });
        });
    </script>
{% endblock %}

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

{% block content %}
    <div class="well">
        <form id="unattentionCanisterForm" name="unattentionCanisterForm" method="POST">
            {% csrf_token %}
            <div class="alert alert-error" id="unattention-canister-validation-alert" style="display: none;">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <ul id="unattention-canister-validation-alert-list"></ul>
            </div>
            {% if error_msg %}
            <div class="alert alert-error" id="unattention-canister-alert">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <ul id="unattention-canister-alert-list">
                    <li>{{ error_msg }}</li>
                </ul>
            </div>
            {% endif %}
            <div id="canister-info" class="replen-panel">
                <table style="width: 90%; margin: 5px;">
                    <caption style="font-weight: bold; text-align: left; border-bottom: 1px solid black;">Canister Information </caption>
                    <tr>
                        <td class="site-drug-edit-td" colspan="4">Scan Canister
                            Barcode: {{ unattn_can_form.canister_barcode }}
                            <button class="btn" id="btn-lookup-canister" name="btn-lookup-canister"><i
                                    class="icon-search"></i> Search
                            </button>
                            &nbsp;&nbsp;&nbsp;
                            <button class="btn cancel" type="submit" id="btn-reset" name="btn-reset"><i
                                    class="icon-remove-circle"></i> Clear
                            </button>
                        </td>
                    </tr>
                </table>
            </div>
        {% if show_form %}
            <div>
        <table class="table table-striped table-bordered table-condensed">
            <caption style="font-weight: bold; font-size: 14pt;">Canister Information</caption>
            <thead>
            <tr style="background-color: lightblue;">
                <th>Serial Num.</th>
                <th>Quantity</th>
                <th>Pill Demand</th>
                <th>Low Level</th>
                <th>Location</th>
                <th>Status</th>
                <th>Active</th>
                <th><i class="icon-th-list"></i></th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td {% if canister.active == False %}class="inactive-cell"{% endif %}>{{ canister.serial_number }}</td>
                <td {% if canister.active == False %}class="inactive-cell"{% endif %}>{{ canister.quantity }}</td>
                <td {% if canister.active == False %}class="inactive-cell"{% endif %}>{{ canister.pill_demand }}</td>
                <td {% if canister.active == False %}class="inactive-cell"{% endif %}>{{ canister.low_level }}</td>
                <td {% if canister.active == False %}class="inactive-cell"{% endif %}>{% if canister.map.all|length <= 0 %}Shelf{% else %}{% for map in canister.map.all %}{{ map.dafe.display_name }} ({{ map.canister_position.tag }}){% endfor %}{% endif %}</td>
                <td {% if canister.active == False %}class="inactive-cell"{% endif %}>{{ canister.display_status.description }}</td>
                <td {% if canister.active == False %}class="inactive-cell"{% endif %}>{{ canister.active }}</td>
                <td {% if canister.active == False %}class="inactive-cell"{% endif %}>{% if canister.active %}
                    {% if canister.instance.authority.pharmaceutical.secured or canister.pharmaceutical.secured %}
                        <a class="btn btn-small btn-link"
                       href="{% url 'site:secure-replenishment' %}?can_id={{ canister.serial_number }}" style="color: darkorange;" title="Replenish Canister"><i
                        class="icon-refresh"></i></a>{% else %}
                        {% if show_replen_btn %}<a class="btn btn-small btn-link"
                       href="{% url 'site:replenishment' %}?can_id={{ canister.serial_number }}" title="Replenish Canister"><i
                        class="icon-refresh"></i></a>{% endif %}{% endif %}
                    {% endif %}
                </td>
            </tr>
            </tbody>
        </table>
        </div>
        <hr/>
            {% include 'info-panel-canister-fill-info.html' %}
            {% include 'info-panel-drug-info.html' %}
        <hr/>
        {% if show_unattn_btn %}
        <div id="unattention-btn-panel" class="replen-panel">
                <table style="width: 90%; margin: 5px;">
                    <caption style="font-weight: bold; text-align: left; border-bottom: 1px solid black;">Check the canister for issues and check canister ramp before clearing attention status</caption>
                    <tr>
                        <td class="site-drug-edit-td" colspan="4">
                            <button class="btn" id="btn-unattention-canister" name="btn-unattention-canister"><i
                                    class="icon-exclamation-sign"></i> Reset Canister Status
                            </button>
                        </td>
                    </tr>
                </table>
            </div>
        {% else %}
            <div id="unattention-btn-panel" class="replen-panel">
                <table style="width: 90%; margin: 5px;">
                    <caption style="font-weight: bold; text-align: left; border-bottom: 1px solid black;">Canister is currently not in an Attention status. No action needed.</caption>
                    <tr>
                        <td class="site-drug-edit-td" colspan="4">
                            &nbsp;
                        </td>
                    </tr>
                </table>
            </div>
        {% endif %}
    {% endif %}
         </form>
    </div>
{% endblock %}