{% extends "site.html" %}


{% block head %}
    {{ block.super }}
    <script>
        $(function () {
            //filter out !
            $(document).keypress(function (event) {
                if (event.charCode === 33) {  //!
                    event.preventDefault();
                    {% if show_form == False and show_new_scan == False %}
                    $("#id_canister_barcode").focus();
                    $("#id_canister_barcode").select();
                    {% elif show_form == False  %}
                    $("#id_new_canister_barcode").focus();
                    $("#id_new_canister_barcode").select();
                    {% endif %}
                } else if ((event.which && event.which === 13) || (event.keyCode && event.keyCode === 13)) {
                    if ($(document.activeElement).attr('id') === 'id_canister_barcode') {
                        event.preventDefault();
                        $("#btn-lookup-canister").click();
                    } else if ($(document.activeElement).attr('id') === 'id_new_canister_barcode') {
                        event.preventDefault();
                        $("#btn-lookup-new-canister").click();
                    }
                }
            });

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

            var canxferalert = $("#canister-transfer-validation-alert");
            $("#canisterTransferForm").validate({
                onkeyup: false,
                errorContainer: canxferalert,
                errorLabelContainer: $("ul", canxferalert),
                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."
                }
            });

            {% if show_new_scan %}
                $("#id_new_canister_barcode").rules('add', {
                    required: true,
                    rangelength: [10, 10],
                    digits: true,
                    messages: {
                        required: "New Canister Serial Number cannot be blank.",
                        rangelength: "New Canister Serial Number must be 10 digits.",
                        digits: "New Canister Serial Number must be numeric."
                    }
                });

                $('#id_canister_barcode').prop('readonly', true);
            {% endif %}

            {% if show_form %}
                $('#id_new_canister_barcode').prop('readonly', true);
            {% endif %}
        });
    </script>
{% endblock %}

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

{% block content %}
    <div class="well">
        <form id="canisterTransferForm" name="canisterTransferForm" method="POST">
            {% csrf_token %}
            <div class="alert alert-error" id="canister-transfer-validation-alert" style="display: none;">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <ul id="canister-transfer-validation-alert-list"></ul>
            </div>
            {% if scan_error_msg %}
            <div class="alert alert-error" id="canister-transfer-scan-alert">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <ul id="canister-transfer-scan-alert-list"><li>{{ scan_error_msg }}</li></ul>
            </div>
            {% endif %}
            {% if scan_warn_msg %}
                <p style="font-weight: bold; color: orange;">{{ scan_warn_msg }}</p>
            {% 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;">Broken Canister Scan</caption>
                    <tr>
                        <td class="site-drug-edit-td" colspan="4">Scan Broken Canister
                            Barcode: {{ transfer_form.canister_barcode }}
                            {% if show_new_scan == False %}
                            <button class="btn" id="btn-lookup-canister" name="btn-lookup-canister"><i
                                    class="icon-search"></i> Search
                            </button>
                            {% endif %}
                            &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>
            <div id="new-canister-info" class="replen-panel" {% if show_new_scan == False %}style="display: none;"{% endif %}>
                <table style="width: 90%; margin: 5px;">
                    <caption style="font-weight: bold; text-align: left; border-bottom: 1px solid black;">New Canister Scan
                    </caption>
                    <tr>
                        <td class="site-drug-edit-td" colspan="4">Scan New Canister
                            Barcode: {{ transfer_form.new_canister_barcode }}
                            {% if show_form == False %}
                            <button class="btn" id="btn-lookup-new-canister" name="btn-lookup-new-canister"><i
                                    class="icon-search"></i> Search
                            </button>
                            {% endif %}
                        </td>
                    </tr>
                </table>
            </div>
            {% if show_form %}
                <div id="transfer-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 Transfer Details
                    </caption>
                    <tr>
                        <td class="site-drug-edit-td" colspan="4" style="font-weight: bold; font-size: 14pt; color: red; padding-bottom: 6px;">Transferring Canister Info for Canister {{ transfer_form.canister_barcode.value }} to
                            Canister {{ transfer_form.new_canister_barcode.value }}.
                        </td>
                    </tr>
                    <tr>
                        <td class="site-drug-edit-td" colspan="4" style="font-weight: bold; font-size: 14pt; color: red;">!!!NOTE!!! This transfer is permanent and the old canister will be decommissioned and permanently unusable in our system.
                            If you are absolutely sure you wish to continue, click the transfer canister button below.</td>
                    </tr>
                    <tr>
                        <td class="site-drug-edit-td" colspan="4">
                            <button class="btn" id="btn-do-transfer" name="btn-do-transfer"><i
                                    class="icon-warning-sign"></i> Transfer Canister
                            </button>
                        </td>
                    </tr>
                </table>
            </div>
            {% include 'info-panel-drug-info.html' %}
            {% include 'info-panel-replen-history.html' %}
            {% include 'info-panel-canister-pending-fill-info.html' %}
            {% endif %}
        </form>
    </div>
{% endblock %}