{% extends "site.html" %}


{% block head %}
    {{ block.super }}
    <script>
        $(function () {
            let max_can_quantity = {% if max_can_quantity %}{{max_can_quantity}}{% else %}Infinity{% endif %}
            let currentCanisterQty = "{% if current_qty %}{{ current_qty }}{% else %}0{% endif %}";
            //filter out !
            $(document).keypress(function (event) {
                if (event.charCode === 33) {  //!
                    $("#id_canister_barcode").focus();
                    $("#id_canister_barcode").select();
                    return false;
                } else {
                    if (event.key === "Enter") {
                        if ($('#id_canister_barcode').is(':focus')) {
                            return true
                        } else {
                            event.preventDefault();
                        }
                    } else {
                        return true;
                    }
                }
            });

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

            if (currentCanisterQty > max_can_quantity) {
                $('#btn-adjust-inventory').prop('disabled', true);
                $('#max-per-can-error').css('display', 'table-row');
            }

            $("#id_qty_adjust").on('input', function(event) {
                let adjVal = this.value;
                let total = 0;
                if (adjVal === '-') {
                    adjVal = 0;
                }
                if (adjVal.length > 0) {
                    if (adjVal.substring(0,1) === "-") {
                        total = parseInt(currentCanisterQty) - parseInt(adjVal.replace("-",""));
                    } else {
                        total = parseInt(currentCanisterQty) + parseInt(adjVal);
                    }

                    if (total < 0) {
                        total = 0;
                    }

                    if (total > max_can_quantity){
                        $('#btn-adjust-inventory').prop('disabled', true);
                        $('#max-per-can-error').css('display', 'table-row');
                    } else {
                        $('#btn-adjust-inventory').prop('disabled', false);
                        $('#max-per-can-error').css('display', 'none');
                    }
                    $("#id_new_canister_qty").val(total);
                } else {
                    $("#id_new_canister_qty").val(currentCanisterQty);
                }
            });

            $("#id_new_canister_qty").on('input', function(event) {
                let totalVal = this.value;
                let adj = 0;

                if (totalVal < 0) {
                    totalVal = 0;
                    $("#id_new_canister_qty").val(totalVal);
                }

                if (totalVal === '-') {
                    totalVal = 0
                    $("#id_new_canister_qty").val('');
                }

                if (totalVal.length > 0) {
                    adj = parseInt(totalVal) - parseInt(currentCanisterQty);
                    $("#id_qty_adjust").val(adj);
                } else {
                    $("#id_qty_adjust").val('');
                }
                if (totalVal > max_can_quantity){
                    $('#btn-adjust-inventory').prop('disabled', true);
                    $('#max-per-can-error').css('display', 'table-row');
                } else {
                    $('#btn-adjust-inventory').prop('disabled', false);
                    $('#max-per-can-error').css('display', 'none');
                }
            });

            let invadjalert = $("#inventory-adjust-validation-alert");
            $("#inventoryAdjustForm").validate({
                onkeyup: false,
                errorContainer: invadjalert,
                errorLabelContainer: $("ul", invadjalert),
                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="inventoryAdjustForm" name="inventoryAdjustForm" method="POST">
            {% csrf_token %}
            <div class="alert alert-error" id="inventory-adjust-validation-alert" style="display: none;">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <ul id="inventory-adjust-validation-alert-list"></ul>
            </div>
            <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: {{ inv_adj_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>
            <div id="drug-info" class="replen-panel" {% if show_form == False %}style="display: none;"{% endif %}>
                <table style="width: 90%; margin: 5px;">
                    <caption style="font-weight: bold; text-align: left; border-bottom: 1px solid black;">Drug Information
                    </caption>
                    {% if current_drug %}
                        <tr>
                            <td class="site-drug-edit-td">{{ current_drug.drug_name }} {{ current_drug.strength }} {{ current_drug.unit }} {{ current_drug.form }}</td>
                            <td class="site-drug-edit-td" style="text-align: right;">{% if current_drug.shape or current_drug.color %}
                                    ({{ current_drug.shape }}, {{ current_drug.color }}){% endif %}</td>
                        </tr>
                        <tr>
                            <td class="site-drug-edit-td">{{ current_drug.manufacturer }}</td>
                            <td class="site-drug-edit-td" style="text-align: right;">
                                {% if current_drug.front_imprint or current_drug.back_imprint %}
                                    {{ current_drug.front_imprint }},
                                    {{ current_drug.back_imprint }}{% endif %}</td>
                        </tr>
                    {% endif %}
                </table>
            </div>
            <div id="inventory-adjust-div" class="replen-panel" {% if show_form == False %}style="display: none;"{% endif %}>
                <table style="width: 90%; margin: 5px;">
                    <caption style="font-weight: bold; text-align: left; border-bottom: 1px solid black;">Canister Quantity Adjustment</caption>
                    <tr style="display: flex; padding-top: 1vh;">
                        <td class="site-drug-edit-td" style="width: 33%;">
                            <b>Current Canister Quantity: {{ current_qty }}</b>
                            {% if max_can_quantity %}
                                <br><b style="padding-top: 1vh;">Max Canister Quantity: {{ max_can_quantity }}</b>
                            {% endif %}
                        </td>
                        {% if show_btn_zero == False %}
                          <td class="site-drug-edit-td" style="width: 30%;"><b>+/- Quantity Adjustment: </b>{{ inv_adj_form.qty_adjust }}</td>
                          <td class="site-drug-edit-td" style="width: 40%;"><b>= New Canister Quantity: </b>{{ inv_adj_form.new_canister_qty }}</td>
                        {% endif %}
                    </tr>
                    <tr id="max-per-can-error" style="display: none">
                        <td colspan="3" style="text-align: center;"><span style="color: red; font-size: 2vh;">Adjusted Quantity exceeds max per canister!</span></td>
                    </tr>
                    <tr>
                          {% if show_btn_zero == False %}
                            <td colspan="3" style="text-align: right;"><button class="btn" id="btn-adjust-inventory" name="btn-adjust-inventory">Apply</button></td>
                          {% else %}
                            <td colspan="3" style="text-align: right;"><button class="btn" id="btn-adjustzero-inventory" name="btn-adjustzero-inventory">ZERO CANISTER QUANTITY</button></td>
                          {% endif %}
                    </tr>
                </table>
            </div>
         </form>
    </div>
{% endblock %}