{% extends "site.html" %}
{% load forms_extra %}

{% block head %}
    {{ block.super }}
    <script>
    let inputTimeout;
    let special_key_code = '';
    let log_message = '';
    let replen_submitted = false;
    let auto_submit_can_barcode = false;
    {% if enforce_max_per_canister%}
    {% if current_drug.max_canister_quantity %}
    function validate_max_per_canister() {
        var totalqty = 0;
        $("input[name$='-quantity']").each(function () {
            if ($.isNumeric($(this).val())) {
                totalqty += parseInt($(this).val());
            }
        });

        if (totalqty <= {{current_drug.max_canister_quantity|subtract:canister_qty}}){
            $("#apply_replenishment").prop('disabled', true);
            if (document.getElementById('id_canister_cleaned').checked || document.getElementById('dusty-drug-check').style['display'] === 'none'){
                $("#apply_replenishment").prop('disabled', false);
            }
            $("#total-quantity-alert").hide();
        } else if (totalqty <= {{current_drug.max_canister_quantity}} && document.getElementById('id_canister_empty').checked){
            $("#apply_replenishment").prop('disabled', true);
            if (document.getElementById('id_canister_cleaned').checked || document.getElementById('dusty-drug-check').style['display'] === 'none'){
                $("#apply_replenishment").prop('disabled', false);
            }
            $("#total-quantity-alert").hide();
        } else {
            $("#apply_replenishment").prop('disabled', true);
            $("#total-quantity-alert").show();
        }
    }

    $(document).ready(function() {
        document.onclick=function(){validate_max_per_canister();};

        // this validation occurs whenever anything changes in any quantity box
        $("input[name$='-quantity']").each(function () {
            $(this).on('input', function() {
                validate_max_per_canister();
            });
        })
        // intial validation on page load
        validate_max_per_canister();
    })
    {% endif %}
    {% endif %}

    function setFormDisplay(disp) {
        if (disp) {
            $("#canister-empty-cell").hide();
            $("#drug-info").hide();
            $("#replen-info").hide();
            $("#stock-bottle-info").hide();
            {% if select_printer_canister %}
                $("#printer-select").hide();
                $("#ext-print-txt").hide();
            {% endif %}
            $("#id_canister_barcode").focus();
        } else {
            $("#canister-empty-cell").show();
            $("#drug-info").show();
            $("#replen-info").show();
            $("#stock-bottle-info").show();
            $("#replen-footer").show();
            {% if select_printer_canister %}
                $("#ext-print-txt").show();
                $("#printer-select").show();
                if (localStorage.getItem("printer-selection-replen") !== null) {
                    var select_statement = document.getElementById('printer-select');
                    select_statement.value = localStorage.getItem('printer-selection-replen');
                }
            {% endif %}
            {% if show_pack_barcode %}
                var maxid = $("#id_form-TOTAL_FORMS").val() - 1;
                $("#id_form-" + maxid + "-stock_bottle_barcode").focus();
            {% else %}
                $("#drug_num_select-0").focus();
            {% endif %}
        }
    }

    function turnYellow(field) {
        field.css('background-color','yellow');
        field.css('color','');
        field.css('font-weight','bold');
    }

    function turnRed(field) {
        field.css('background-color','red');
        field.css('color','white');
        field.css('font-weight','bold');
    }

    function normalField(field) {
        field.css('background-color','');
        field.css('color','');
        field.css('font-weight','');
    }

    function updateTotalQuantity() {
        //update total quantity entered
        var totalqty = 0;
        $("input[name$='-quantity']").each(function () {
            if ($.isNumeric($(this).val())) {
                totalqty += parseInt($(this).val());
            }
        });
        $("#total-replen-quantity").html("Total Qty: " + totalqty);
    }

    function checkExpDateWarning(month, year) {
        var retval = false;

        if (month.length > 0 && year.length > 0) {
            var zMonth = parseInt(month) - 1;
            var expdate = new Date(parseInt(year), zMonth, 1);
            var sixMonth = new Date();
            sixMonth.setMonth(sixMonth.getMonth() + 6);
            var curdate = new Date();

            if (expdate > curdate) {
                if (sixMonth > expdate) {
                    retval = true;
                }
            }
        }
        return retval;
    }

    function checkExpDateExpired(month, year) {
        var retval = false;

        if (month.length > 0 && year.length > 0) {
            var zMonth = parseInt(month) - 1;
            var expdate = new Date(parseInt(year), zMonth, 1);
            var curdate = new Date();

            if (expdate <= curdate) {
                retval = true;
            }
        }
        return retval;
    }

    function expDateWarning() {
        var retval = false;

        {% if warn_exp_date|upper == 'TRUE' %}
            $("input[name$='-exp_date_month']").each(function () {
                var yearfield = this.name.replace("-exp_date_month", "-exp_date_year");
                if (checkExpDateWarning($(this).val(), $("input[name='" + yearfield + "']").val()) == true) {
                    retval = true;
                }
            });
        {% endif %}

        return retval;
    }

    function checkExp(monthfield, yearfield) {
        if (checkExpDateWarning(monthfield.val(), yearfield.val()) == true) {
            turnYellow(monthfield);
            turnYellow(yearfield);
        } else if (checkExpDateExpired(monthfield.val(), yearfield.val()) == true) {
            turnRed(monthfield);
            turnRed(yearfield);
        } else {
            normalField(monthfield);
            normalField(yearfield);
        }
    }

    function validateSbBarcode(fieldid, barcodeval, formValidator) {
        $.post("{% url 'site:replen-load-stock-bottle-data' %}", { barcode: barcodeval,
                    instance_id: function () {
                        return $("#selected_instance_id").val();
                    },
                    csrfmiddlewaretoken: '{{csrf_token}}'}, function (data) {
                    if (data[0].sbBarcode != null) {
                        $("input[name='" + fieldid + "-stock_bottle_barcode']").val(data[0].sbBarcode);
                        formValidator.element($("input[name='" + fieldid + "-stock_bottle_barcode']"));
                    }
                    if (data[0].bcMatch == true) {
                        if (data[0].quantity != null) {
                            {% if auto_populate_qty %}
                                if ($("input[name='" + fieldid + "-quantity']").val() != null) {
                                    $("input[name='" + fieldid + "-quantity']").val(data[0].quantity);
                                }
                                updateTotalQuantity();
                            {% endif %}
                        }
                        if (data[0].lot != null) {
                            $("input[name='" + fieldid + "-lot']").val(data[0].lot);
                        }
                        if (data[0].expMonth != null && data[0].expYear != null) {
                            $("input[name='" + fieldid + "-exp_date_month']").val(data[0].expMonth);
                            $("input[name='" + fieldid + "-exp_date_year']").val(data[0].expYear);
                            checkExp($("input[name='" + fieldid + "-exp_date_month']"), $("input[name='" + fieldid + "-exp_date_year']"));
                        }
                        {% if replen_show_day %}
                        if (data[0].expDay != null) {
                            $("input[name='" + fieldid + "-exp_date_day']").val(data[0].expDay);
                        }
                        {% endif %}
                        if (data[0].lot == null) {
                            $("input[name='" + fieldid + "-lot']").focus();
                        } else {
                            $("input[name='" + fieldid + "-quantity']").focus();
                        }
                    }
                });
    }

    $(function () {
        var formValidator;
        //filter out !
        $(document).keypress(function (event) {
            if (event.charCode == 33) {  //!
                $("#id_canister_barcode").focus();
                $("#id_canister_barcode").select();
                auto_submit_can_barcode = true;
                return false;
            } else {
                return true;
            }
        });

        $("#dialog-confirm").dialog({
            autoOpen: false,
            resizable: false,
            height: 200,
            width: 400,
            modal: true,
            buttons: {
                "Replenish": function () {
                    $("#apply_replen").val("APPLY");
                    document.replenishmentForm.submit();
                    $(this).dialog("close");
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });

        {% if auto_capitalize %}
            $("input[name$='-lot']").keyup(function (event) {
                $("input[name$='-lot']").each(function () {
                    $(this).val($(this).val().toUpperCase())
                });
            });
        {% endif %}

        $("input[name$='-stock_bottle_barcode']").on('keyup', function (e) {
            let input_box = $(this);
            let input_text = $(this).val();

            log_message = log_message + ' || ' + e.key + ' up';

            if (e.key === 'Alt') {
                // logger.debug('Alt keyup: ' + special_key_code)
                if (special_key_code.indexOf('29') > -1){
                    input_text += String.fromCharCode(29);
                    input_box.val(input_text);
                }
                special_key_code = '';
            }

            if (e.key === 'Control') {
                // logger.debug('Control keyup: ' + special_key_code)
                if (special_key_code.indexOf(']') > -1){
                    input_text += String.fromCharCode(29);
                    input_box.val(input_text);
                }
                special_key_code = '';
            }

            if (e.key === 'F8') {
                input_text += String.fromCharCode(29);
                input_box.val(input_text);
            }
        })


        $("input[name$='-stock_bottle_barcode']").on('keydown', function (e) {
            if (log_message === ''){
                log_message = e.key;
            } else {
                log_message = log_message + ' || ' + e.key;
            }

            clearTimeout(inputTimeout);
            let input_box = $(this);
            let input_text = $(this).val();

            if (e.altKey) {
                if (e.key !== 'Alt'){
                    special_key_code += e.key;
                }
            }

            if (e.ctrlKey){
                if (e.key !== 'Control') {
                    special_key_code += e.key;
                }
            }

            if (special_key_code.length > 5) {
            //     logger.debug('Alt keyup alt_code > 5: ' + alt_code)
            }

            inputTimeout = setTimeout(function() {
                if (input_text.length > 30) {
                    // logger.debug('Keydown + Keyups: ' + log_message);
                    log_message = '';
                    input_box.blur();
                    return false;
                }
            }, 250);

            if (e.which === 13) { //Enter key's keycode
                //blur to trigger change event
                $(this).blur();
                return false;
            }
        });

        $('#id_canister_barcode').on('keyup', function (e) {
            // if issues occur, then can do a check for if e is !, and if so, then allow for auto-click
            let input_text = $(this).val();
            // auto submit on 10th character
            if (input_text.length === 10 && auto_submit_can_barcode) {
                $('#btn-lookup-canister').click();
            }
        });

        $("input[name$='-stock_bottle_barcode']").change(function (event) {
            $(this).val($(this).val().trim());
            var fieldid = this.name.replace("-stock_bottle_barcode", "");
            var strIndex = this.name.indexOf("-0-");
            if(strIndex == -1) {    //not found
                //copy matching row
                var chkBarcodeVal = $(this).val();
                var copyId = "";
                $("input[name$='-stock_bottle_barcode']").each(function (index, element) {
                    if ($(this).val().trim() == chkBarcodeVal) {
                        copyId = element.name.replace("-stock_bottle_barcode", "");
                        return false;
                    }
                });
                if (copyId.length > 0) {
                    {% if auto_populate_qty %}
                        $("input[name='" + fieldid + "-quantity']").val($("input[name='" + copyId + "-quantity']").val());
                    {% endif %}
                    $("input[name='" + fieldid + "-lot']").val($("input[name='" + copyId + "-lot']").val());
                    $("input[name='" + fieldid + "-exp_date_month']").val($("input[name='" + copyId + "-exp_date_month']").val());
                    $("input[name='" + fieldid + "-exp_date_year']").val($("input[name='" + copyId + "-exp_date_year']").val());
                    checkExp($("input[name='" + fieldid + "-exp_date_month']"), $("input[name='" + fieldid + "-exp_date_year']"));
                }
                validateSbBarcode(fieldid, chkBarcodeVal, formValidator);
                updateTotalQuantity();
            } else {
                validateSbBarcode(fieldid, $(this).val(), formValidator);
            }
        });

        $("#id_reset_ran_empty").click(function (event) {
            setFormDisplay($('#id_reset_ran_empty').prop('checked'));
        });

        $("#id_canister_empty").click(function (event) {
            $("#replenishmentForm").validate().cancelSubmit = true;
            $("#replenishmentForm").submit();
        });

        {% if show_form == True and selected_instance_id != None %}
            {% if success_reset_ran_empty %}
                $('#id_reset_ran_empty').prop('checked', false);
            {% endif %}
            setFormDisplay(false);
            updateTotalQuantity();
        {% else %}
            $("#id_canister_barcode").focus();
        {% endif %}

        $("button[name^='del-stock-bottle-row-']").click(function (event) {
            $("#" + get_icon_button_name(event).replace("del-", "")).remove();
            var totalrows = $("#id_form-TOTAL_FORMS").val();
            totalrows--;
            $("#id_form-TOTAL_FORMS").val(totalrows);
            $("#total-stock-bottle-rows").html("Bottles: " + totalrows);
            updateTotalQuantity();
        });

        $("input[name$='-quantity']").change(function (event) {
            updateTotalQuantity();
        });

        var replenalert = $("#replen-validation-alert");
        formValidator = $("#replenishmentForm").validate({
            onkeyup: false,
            errorContainer: replenalert,
            errorLabelContainer: $("ul", replenalert),
            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."
            }
        });

        $("input[name$='-stock_bottle_barcode']").each(function () {
            $(this).rules('add', {
                required: true,
                remote: {
                    url: "{% url 'site:replen-check-stock-bottle' %}",
                    type: "post",
                    data: {
                        instance_id: function () {
                            return $("#selected_instance_id").val();
                        },
                        'csrfmiddlewaretoken': '{{csrf_token}}'
                    }
                },
                messages: {
                    required: "Stock Bottle Barcode cannot be blank.",
                    remote: jQuery.validator.format("{0} is not a valid barcode for this drug.")
                }
            });
        });

        $("input[name$='-quantity']").each(function () {
            $(this).rules('add', {
                required: true,
                min: 1,
                digits: true,
                messages: {
                    required: "Quantity cannot be blank.",
                    min: "Quantity must be greater than 0.",
                    digits: "Quantity must be numeric."
                }
            });
        });

        $("input[name$='-lot']").each(function () {
            $(this).rules('add', {
                required: true,
                messages: {
                    required: "Lot Number cannot be blank."
                }
            });
        });

        {% if replen_show_day %}
        $("input[name$='-exp_date_day']").each(function () {
            $(this).rules('add', {
                required: true,
                digits: true,
                range: [1, 31],
                messages: {
                    required: "Expiration Date Day cannot be blank.",
                    digits: "Expiration Date Day must be numeric.",
                    range: "Expiration Date Day must be between 1 and 31"
                }
            });

            $(this).keyup(function (event) {
                if (this.value.length === this.maxLength) {
                    {% if replen_show_day_format == 'DD-MM-YYYY' %}
                        let nextfield = this.name.replace("-exp_date_day", "-exp_date_month");
                        $("input[name='" + nextfield + "']").focus();
                    {% elif replen_show_day_format == 'MM-DD-YYYY' %}
                        let nextfield = this.name.replace("-exp_date_day", "-exp_date_year");
                        $("input[name='" + nextfield + "']").focus();
                    {% endif %}
                    return false;
                }
                if (event.which == 109 || event.which == 173 || event.which == 191 || event.which == 220 || event.which == 111) {  //-,/,\
                    {% if replen_show_day_format == 'DD-MM-YYYY' %}
                        let nextfield = this.name.replace("-exp_date_day", "-exp_date_month");
                        $("input[name='" + nextfield + "']").focus();
                    {% elif replen_show_day_format == 'MM-DD-YYYY' %}
                        let nextfield = this.name.replace("-exp_date_day", "-exp_date_year");
                        $("input[name='" + nextfield + "']").focus();
                    {% endif %}
                    return false;
                }
            });
        });
        {% endif %}

        $("input[name$='-exp_date_month']").each(function () {
            $(this).rules('add', {
                required: true,
                digits: true,
                range: [1, 12],
                messages: {
                    required: "Expiration Date Month cannot be blank.",
                    digits: "Expiration Date Month must be numeric.",
                    range: "Expiration Date Month must be between 1 and 12"
                }
            });

            $(this).keyup(function (event) {
                if (this.value.length == this.maxLength) {
                    {% if replen_show_day_format == 'DD-MM-YYYY' %}
                        let nextfield = this.name.replace("-exp_date_month", "-exp_date_year");
                        $("input[name='" + nextfield + "']").focus();
                    {% elif replen_show_day_format == 'MM-DD-YYYY' %}
                        let nextfield = this.name.replace("-exp_date_month", "-exp_date_day");
                        $("input[name='" + nextfield + "']").focus();
                    {% elif replen_show_day_format == 'YYYY-MM-DD' %}
                        let nextfield = this.name.replace("-exp_date_month", "-exp_date_day");
                        $("input[name='" + nextfield + "']").focus();
                    {% endif %}
                    return false;
                }
                if (event.which == 109 || event.which == 173 || event.which == 191 || event.which == 220 || event.which == 111) {  //-,/,\
                    {% if replen_show_day_format == 'DD-MM-YYYY' %}
                        let nextfield = this.name.replace("-exp_date_month", "-exp_date_year");
                        $("input[name='" + nextfield + "']").focus();
                    {% elif replen_show_day_format == 'MM-DD-YYYY' %}
                        let nextfield = this.name.replace("-exp_date_month", "-exp_date_day");
                        $("input[name='" + nextfield + "']").focus();
                    {% elif replen_show_day_format == 'YYYY-MM-DD' %}
                        let nextfield = this.name.replace("-exp_date_month", "-exp_date_day");
                        $("input[name='" + nextfield + "']").focus();
                    {% endif %}
                    return false;
                }
            });

            var yearfield = this.name.replace("-exp_date_month", "-exp_date_year");
            $(this).blur(function (event) {
                checkExp($(this), $("input[name='" + yearfield + "']"));
            });

            checkExp($(this), $("input[name='" + yearfield + "']"));
        });

        $("input[name$='-exp_date_year']").each(function () {
            $(this).rules('add', {
                required: true,
                digits: true,
                min: 2000,
                messages: {
                    required: "Expiration Date Year cannot be blank.",
                    digits: "Expiration Date Year must be numeric.",
                    min: "Expiration Date Year must be larger than 2000."
                }
            });

            {% if replen_show_day_format == 'YYYY-MM-DD' %}
                $(this).keyup(function (event) {
                    if (this.value.length == this.maxLength) {
                        let nextfield = this.name.replace("-exp_date_year", "-exp_date_month");
                        $("input[name='" + nextfield + "']").focus();
                        return false;
                    }
                    if (event.which == 109 || event.which == 173 || event.which == 191 || event.which == 220 || event.which == 111) {  //-,/,\
                        let nextfield = this.name.replace("-exp_date_year", "-exp_date_month");
                        $("input[name='" + nextfield + "']").focus();
                        return false;
                    }
                });
            {% endif %}

            var monthfield = this.name.replace("-exp_date_year", "-exp_date_month");
            $(this).blur(function (event) {
                checkExp($("input[name='" + monthfield + "']"), $(this));
            });

            checkExp($("input[name='" + monthfield + "']"), $(this));
        });

        {% if user_entry == 'TECH' or user_entry == 'BOTH' %}
            $("#id_replen_tech").rules('add', {
                required: true,
                messages: {
                    required: "Replenishment Tech cannot be blank."
                }
            });
        {% endif %}

        {% if user_entry == 'RPH' or user_entry == 'BOTH' %}
            $("#id_replen_rph").rules('add', {
                required: true,
                messages: {
                    required: "Replenishment RPh cannot be blank."
                }
            });
        {% endif %}

        $("input[name='replen_drug_instances']").click(function (event) {
            document.replenishmentForm.submit();
        });

        $("#apply_replenishment").click(function (event) {
            {% if enforce_max_per_canister%}
                {% if current_drug.max_canister_quantity %}
                //last attempt validation at max per canister
                var totalqty = 0;
                $("input[name$='-quantity']").each(function () {
                    if ($.isNumeric($(this).val())) {
                        totalqty += parseInt($(this).val());
                    }
                });
                if (totalqty <= {{current_drug.max_canister_quantity|subtract:canister_qty}} || (totalqty <= {{current_drug.max_canister_quantity}} && document.getElementById('id_canister_empty').checked)){
                    $("#replenishmentForm").validate();
                    if ($("#replenishmentForm").valid()) {
                        if (expDateWarning() == true) {
                            $("#dialog-confirm").dialog("open");
                        } else {
                            $("#apply_replen").val("APPLY");
                            if (!replen_submitted) {
                                replen_submitted = true;
                                document.replenishmentForm.submit();
                            }
                        }
                    }
                } else {
                    $("#apply_replenishment").prop('disabled', true);
                    $("#total-quantity-alert").show();
                }
                {% else %}
                $("#replenishmentForm").validate();
                if ($("#replenishmentForm").valid()) {
                    if (expDateWarning() == true) {
                        $("#dialog-confirm").dialog("open");
                    } else {
                        $("#apply_replen").val("APPLY");
                        if (!replen_submitted) {
                            replen_submitted = true;
                            document.replenishmentForm.submit();
                        }
                    }
                }
            {% endif %}
            {% else %}
                $("#replenishmentForm").validate();
                if ($("#replenishmentForm").valid()) {
                    if (expDateWarning() == true) {
                        $("#dialog-confirm").dialog("open");
                    } else {
                        $("#apply_replen").val("APPLY");
                        if (!replen_submitted) {
                            replen_submitted = true;
                            document.replenishmentForm.submit();
                        }
                    }
                }
            {% endif %}
        });

        $("button[name='add-stock-bottle-row']").click(function (event) {
            $("#replenishmentForm").validate();
            if ($("#replenishmentForm").valid()) {
                $("#add_sb_row").val("ADD");
                document.replenishmentForm.submit();
            }
        });

        $("#id_canister_cleaned").click(function (event) {
            if ($(this).prop("checked") == true) {
                $("#apply_replenishment").prop('disabled', false);
            } else {
                $("#apply_replenishment").prop('disabled', true);
            }
        });

        {% if current_drug %}{% if current_drug.dusty_drug %}
            $("#dusty-drug-check").show();
            if ($("#id_canister_cleaned").prop("checked") == true) {
                $("#apply_replenishment").prop('disabled', false);
            } else {
                $("#apply_replenishment").prop('disabled', true);
            }
        {% endif %}{% endif %}

        {% if select_printer_canister %}
            $('#printer-select').change(function (event) {
                localStorage.setItem("printer-selection-replen", $(this).val());
            });
        {% endif %}
    });
    </script>
{% endblock %}

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

{% block content %}
    <div id="dialog-confirm" title="Expiration Date less than 6 months">
        <p><span class="ui-icon ui-icon-alert"></span>Expiration Date entered
            is less than 6 months away. Are you sure you want to continue?</p>
    </div>

    <div class="well">
        <form id="replenishmentForm" name="replenishmentForm" method="POST">
            {% csrf_token %}
            <div class="alert alert-error" id="replen-validation-alert" style="display: none;">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <ul id="replen-validation-alert-list">
                </ul>
            </div>
            {% if function_error %}
            <div class="alert alert-error" id="replen-apply-alert">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <ul id="replen-apply-alert-list">
                    <li>{{ function_error }}</li>
                </ul>
            </div>
            {% endif %}
            {% if enforce_max_per_canister%}
            <div class="alert alert-error" id="total-quantity-alert" style="display: none">
                <p>Total quantity exceeds maximum allowed for this canister</p>
            </div>
            {% endif %}
            {% if current_drug %}{% if current_drug.dusty_drug %}
            <div class="alert alert-info" id="replen-clean-alert">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <ul id="replen-clean-alert-list">
                    <li>This canister contains a drug that requires cleaning of the ramp for every replenishment.
                        Please clean the canister ramp and click Canister Has Been Cleaned checkbox below to acknowledge.</li>
                </ul>
            </div>
            {% endif %}{% 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: {{ replen_form.canister_barcode }}
                            {% if show_form == 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>{% if expired %}&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-weight: bold; color: red;">Canister Has Expired!</span>{% endif %}
                        </td>
                    </tr>
                    <tr {% if show_form == False %}style="display: none;"{% endif %}>
                        <td class="site-drug-edit-td">Low Level: {{ low_level }}</td>
                        <td class="site-drug-edit-td">Quantity / Pending: {{ canister_qty }} / {{ canister_demand }}</td>
                        <td class="site-drug-edit-td">
                            {% if success_reset_ran_empty %}
                                <p style="color: green; font-size: 1.5vh;">Ran Empty Reset for canister {{current_canister_barcode}}</p>
                            {% endif %}
                            {% if allow_reset_ran_empty %}{% if current_drug %}{{ replen_form.reset_ran_empty }}&nbsp; Reset "Ran Empty"{% else %}&nbsp;{% endif %}{% else %}&nbsp;{% endif %}
                        </td>
                        <td class="site-drug-edit-td" id="canister-empty-cell">{% if force_canister_empty %}
                            <input type="hidden" name="{{ replen_form.canister_empty.name }}"
                            id="{{ replen_form.canister_empty.id_for_label }}"
                            value="True"><input type="checkbox" disabled readonly checked>
                            {% else %}{{ replen_form.canister_empty }}{% endif %}&nbsp;
                            Canister is Completely Empty
                        </td>
                    </tr>
                </table>
            </div>
            <div>
                <table>
                    <tr>
                        {% if fractional_dose %}
                        <td style="width: 15rem;">
                            <svg viewBox="0 0 200 100">
                                <rect x="6" y="6" width="188" height="88" rx="24" ry="24" fill="black"/>
                                <rect x="10" y="10" width="180" height="80" rx="20" ry="20" fill="orange" stroke="white" stroke-width="2"/>

                                <!-- 1/2 Icon-->
                                <g transform="translate(25, 28) scale(.23)">
                                    <text x="100" y="120" text-anchor="middle" dominant-baseline="middle" font-family="Arial" font-size="14vw" font-weight="bold" fill="black">&#189;</text>
                                </g>

                                <text x="40%" y="40%" text-anchor="start" dominant-baseline="middle" font-family="Arial" font-size="1vw" fill="black">Fractional</text>
                                <text x="40%" y="65%" text-anchor="start" dominant-baseline="middle" font-family="Arial" font-size="1vw" fill="black">Tab Needed</text>
                            </svg>
                        </td>
                        {% endif %}
                        {% if current_drug %}
                            {% if current_drug.usp_800 %}
                            <td style="width: 15rem;">
                                <svg viewBox="0 0 200 100">
                                    <rect x="6" y="6" width="188" height="88" rx="24" ry="24" fill="black"/>
                                    <rect x="10" y="10" width="180" height="80" rx="20" ry="20" fill="yellow" stroke="white" stroke-width="2"/>

                                    <!-- HD Icon-->
                                    <g transform="translate(25, 28) scale(.23)">
                                        <circle cx="90" cy="100" r="130" fill="yellow" stroke="black" stroke-width="12"/>
                                        <text x="95" y="120" text-anchor="middle" dominant-baseline="middle" font-family="Arial" font-size="1180%" font-weight="bold" fill="black">HD</text>
                                    </g>

                                    <text x="39%" y="33%" text-anchor="start" dominant-baseline="middle" font-family="Arial" font-size="100%" font-weight="bold" fill="black" text-decoration="underline">Hazardous Drug</text>
                                    <text x="40%" y="50%" text-anchor="start" dominant-baseline="middle" font-family="Arial" font-size="60%" fill="black">Observe all Special</text>
                                    <text x="40%" y="60%" text-anchor="start" dominant-baseline="middle" font-family="Arial" font-size="60%" fill="black">Handling, Administration,</text>
                                    <text x="40%" y="70%" text-anchor="start" dominant-baseline="middle" font-family="Arial" font-size="60%" fill="black">and Disposal Requirements</text>
                                </svg>
                            </td>
                            {% endif %}
                        {% endif %}
                    </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 - {% if current_drug %}{% if drugnum_type == 'NDC' %}{{ current_drug.drug_number|slice:"0:5" }}-
                            {{ current_drug.drug_number|slice:"5:9" }}{% else %}{{ current_drug.drug_number }}{% endif %}{% endif %}
                    </caption>
                    {% if current_drug %}
                        {% if current_drug.instance_id is not defined %}
                            <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>
                            {% if current_drug.max_canister_quantity %}
                                <td>&nbsp;Max per Canister: {{current_drug.max_canister_quantity}}</td>
                            {% endif %}
                        {% else %}
                            <tr>
                                <td class="site-drug-edit-td inactive-cell">{{ current_drug.drug_name }} {{ current_drug.strength }} {{ current_drug.unit }} {{ current_drug.form }}</td>
                                <td class="site-drug-edit-td inactive-cell" style="text-align: right;">
                                    {% if current_drug.shape or current_drug.color %}
                                        ({{ current_drug.shape }}, {{ current_drug.color }}){% endif %}</td>
                            </tr>
                        {% endif %}
                    {% else %}
                        <div style="background-color: white;">
                            <table class="table table-bordered table-condensed">
                                <caption style="font-size: 12pt; background-color: lightyellow;">Select a Drug Instance
                                    for {{ pharm_canister.0.drug_name }} {{ pharm_canister.0.strength }} {{ pharm_canister.0.unit }} {{ pharm_canister.0.form }}</caption>
                                <thead>
                                <tr style="background-color: lightgreen;">
                                    <th>&nbsp;</th>
                                    <th>Drug Number</th>
                                    <th>Manufacturer</th>
                                    <th>Color</th>
                                    <th>Shape</th>
                                    <th>Front</th>
                                    <th>Back</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for inst in drug_info %}
                                    <tr>
                                        <td><input type="radio" name="replen_drug_instances"
                                                   value="{{ inst.instance_id }}"></td>
                                        <td>{% if drugnum_type == 'NDC' %}{{ inst.drug_number|slice:"0:5" }}-{{ inst.drug_number|slice:"5:9" }}
                                        {% else %}{{ inst.drug_number }}{% endif %}</td>
                                        <td>{{ inst.manufacturer }}</td>
                                        <td>{{ inst.color }}</td>
                                        <td>{{ inst.shape }}</td>
                                        <td>{{ inst.front_imprint }}</td>
                                        <td>{{ inst.back_imprint }}</td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% endif %}
                </table>
            </div>
        {% if current_replen_info %}
            <div id="replen-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;">Current Replenishment Info</caption>
                <thead>
                    <tr style="background-color: lightgreen;">
                        <th style="text-align: left;">Replenishment Date</th>
                        <th style="text-align: left;">Lot</th>
                        <th style="text-align: left;">Exp. Date</th>
                        <th style="text-align: left;">Quantity</th>
                        <th style="text-align: left;">Tech Initials</th>
                        <th style="text-align: left;">Rph Initials</th>
                    </tr>
                </thead>
                <tbody>
                {% for replen in current_replen_info %}
                    <tr>
                        <td class="site-drug-edit-td">{{ replen.replenishment_date|date:"m/d/Y h:i:s A" }}</td>
                        <td class="site-drug-edit-td">{{ replen.lot }}</td>
                        <td class="site-drug-edit-td">{{ replen.lot_expiration|date:"m/Y" }}</td>
                        <td class="site-drug-edit-td">{{ replen.quantity }}</td>
                        <td class="site-drug-edit-td">{% if replen.user_replen %}{% if replen.user_replen.initials != 'UNK' %}{{ replen.user_replen.initials }}{% endif %}{% endif %}</td>
                        <td class="site-drug-edit-td">{% if replen.user_check %}{% if replen.user_check.initials != 'UNK' %}{{ replen.user_check.initials }}{% endif %}{% endif %}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            </div>
        {% endif %}
            <div id="stock-bottle-info" class="replen-panel"
                 {% if show_form == False or selected_instance_id == None %}style="display: none;"{% endif %}>
                {{ stock_bottle_form.management_form }}
                <table class="table table-condensed" style="width: 90%; margin: 5px;">
                    <caption style="font-weight: bold; text-align: left; border-bottom: 1px solid black;">Stock Bottle
                        Information
                    </caption>
                    <thead>
                    <tr>
                        {% if show_pack_barcode %}
                            <th>Barcode</th>{% else %}
                            <th>Drug Number
                            </th>{% endif %}
                        <th>Quantity</th>
                        <th>Lot</th>
                        <th colspan="2">Expiration</th>
                        <th>&nbsp;</th>
                        <th>&nbsp;</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for sbform in stock_bottle_form %}
                        <tr id="stock-bottle-row-{{ forloop.counter0 }}">
                            {% if show_pack_barcode %}
                                <td>{{ sbform.stock_bottle_barcode }}</td>
                            {% else %}
                                <td><select style="width: auto;" id="drug_num_select-{{ forloop.counter0 }}"
                                            name="drug_num_select-{{ forloop.counter0 }}">
                                    {% for drugnum in drug_num_list %}
                                        <option value="{{ drugnum.0 }}" {% for key,itm in drug_num_selected.items %}
                                                {% if forloop.parentloop.parentloop.counter0|slugify in key %}{% ifequal itm|slugify drugnum.0|slugify %}selected
                                                {% endifequal %}{% endif %}
                                        {% endfor %}>{{ drugnum.1 }}</option>
                                    {% endfor %}</select></td>{% endif %}
                            <td>{{ sbform.quantity }}</td>
                            <td>{{ sbform.lot }}</td>
                            {% if replen_show_day %}
                                {% if replen_show_day_format == 'DD-MM-YYYY' %}
                                    <td>{{ sbform.exp_date_day }}&nbsp;&nbsp;<b>/</b>&nbsp;&nbsp;{{ sbform.exp_date_month }}&nbsp;&nbsp;<b>/</b>&nbsp;&nbsp;{{ sbform.exp_date_year }}</td>
                                {% elif replen_show_day_format == 'MM-DD-YYYY' %}
                                    <td>{{ sbform.exp_date_month }}&nbsp;&nbsp;<b>/</b>&nbsp;&nbsp;{{ sbform.exp_date_day }}&nbsp;&nbsp;<b>/</b>&nbsp;&nbsp;{{ sbform.exp_date_year }}</td>
                                {% elif replen_show_day_format == 'YYYY-MM-DD' %}
                                    <td>{{ sbform.exp_date_year }}&nbsp;&nbsp;<b>/</b>&nbsp;&nbsp;{{ sbform.exp_date_month }}&nbsp;&nbsp;<b>/</b>&nbsp;&nbsp;{{ sbform.exp_date_day }}</td>
                                {% endif %}
                            {% else %}
                                <td>{{ sbform.exp_date_month }}&nbsp;&nbsp;<b>/</b>&nbsp;&nbsp;{{ sbform.exp_date_year }}</td>
                            {% endif %}
                            <td>
                                <button name="add-stock-bottle-row" type="button"><i class="icon-plus-sign-alt"></i>
                                </button>
                            </td>
                            {% if forloop.counter > 1 %}
                                <td>
                                    <button type="button" id="del-stock-bottle-row-{{ forloop.counter0 }}"
                                            name="del-stock-bottle-row-{{ forloop.counter0 }}"><i
                                            class="icon-minus-sign"></i></button>
                                </td>
                            {% else %}
                                <td>&nbsp;</td>
                            {% endif %}
                        </tr>
                    {% endfor %}
                    {% if user_entry != 'NONE' %}
                        <tr>
                            {% if user_entry == 'TECH' or user_entry == 'BOTH' %}
                                <td>Tech: {{ replen_form.replen_tech }}</td>{% if user_entry == 'TECH' %}<input type="hidden" id="id_replen_rph" name="replen_rph" value="0"/>{% endif %}
                            {% endif %}
                            {% if user_entry == 'RPH'  or user_entry == 'BOTH' %}
                                <td>RPh: {{ replen_form.replen_rph }}</td>{% if user_entry == 'TECH' %}<input type="hidden" id="id_replen_tech" name="replen_tech" value="0"/>{% endif %}
                            {% endif %}
                            <td colspan="{% if user_entry == 'TECH' or user_entry == 'RPH' %}6{% elif user_entry == 'BOTH' %}5{% endif %}">
                                &nbsp;</td>
                        </tr>
                    {% else %}
                        <input type="hidden" id="id_replen_tech" name="replen_tech" value="0"/>
                        <input type="hidden" id="id_replen_rph" name="replen_rph" value="0"/>
                    {% endif %}
                    </tbody>
                </table>
            </div>
            <div id="apply-btn-panel" class="replen-panel">
                <table id="replen-footer" style="display: none; width: 90%; margin: 5px;">
                    <tr>
                        <td id="total-stock-bottle-rows" class="site-drug-edit-td" style="float: left;">
                            Bottles: {{ stock_bottle_form|length }}</td>
                        <td id="total-replen-quantity" class="site-drug-edit-td" style="float: left;">Total Qty: 0</td>
                        <td class="site-drug-edit-td" style="text-align: right;">
                            <span id="dusty-drug-check" class="site-drug-edit-td" style="display: none; text-align: right;">
                                {{ replen_form.canister_cleaned }}&nbsp;Canister has been Cleaned&nbsp;&nbsp;
                            </span>
                            {% if select_printer_canister %}
                                <span name="ext-print-txt" id="ext-print-txt" style="font-size: 1.25em">External Printer:</span>
                                <select  name="printer-select" id="printer-select" style="width: auto; height: 40px; margin-bottom: 0px;">
                                    {% for printer in printer_list %}
                                        <option value="{{ printer.tag }}">{{ printer.cups_name }}</option>
                                    {% endfor %}
                                </select>
                                <span style="width: 75px; display:inline-block;">&nbsp;</span>
                            {% endif %}
                            <button class="btn" id="apply_replenishment" name="apply_replenishment" type="button"
                                    style="width: 150px; height: 40px;"><i
                                    class="icon-refresh"></i> Apply
                            </button>
                        </td>
                    </tr>
                </table>
            </div>
            <input type="hidden" id="selected_instance_id" name="selected_instance_id"
                   value="{{ selected_instance_id }}"/>
            <input type="hidden" id="apply_replen" name="apply_replen" value=""/>
            <input type="hidden" id="add_sb_row" name="add_sb_row" value=""/>
        </form>
    </div>
{% endblock %}