{% extends "site.html" %}


{% block head %}
    {{ block.super }}
    <script>
        $(function () {
            //filter out !
            $(document).keypress(function (event) {
                if (event.charCode == 33) {  //!
                    var searchDrug = $("#search-drug-canister-input");
                    searchDrug.focus();
                    searchDrug.select();
                    $("#canister-barcode-entered").val("True");
                    return false;
                } else {
                    return true;
                }
            });

             $("#confirm-dialog").dialog({
                autoOpen: false,
                closeOnEscape: false,
                model: true,
                draggable: false,
                buttons: [
                    {
                        text: "Continue",
                        "class": 'dialog-button',
                        click: function () {
                            $("#remove-assoc-val").val(true);
                            $("#associateDrugForm").submit();
                            $(this).dialog("close");
                        }
                    },
                    {
                        text: "Cancel",
                        "class": 'dialog-button',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });

            $("#btn-remove-associated-drug").click(function (event) {
               $("#confirm-dialog").dialog("open");
               return false;
            });

            $("input[name='drug_lookup_auth_id']").click(function (event) {
                $("#btn-associate-drug").removeAttr("disabled");
                $("#btn-list-canisters").removeAttr("disabled");
            });

            $("input[name='authority_list']").click(function (event) {
                if ($("input[name='authority_list']:checkbox:checked").length > 0) {
                    $("#noAssociatedErrorDiv").show();
                } else {
                    $("#noAssociatedErrorDiv").hide();
                }
                document.associateDrugForm.submit();
            });

            $("#btn-drug-lookup-reset").click(function (event) {
                $("#drug-lookup").val("");
                $("#btn-drug-lookup").click();
            });

        {% if show_canister_association != True %}
            $("#search-drug-canister-input").focus();
        {% else %}
            {% if current_canister == None or current_canister.pharmaceutical.id <= 0 %}
                var druglookup = $("#drug-lookup");
                druglookup.focus();
            {% endif %}
        {% endif %}
        });

        const x = {{ drug_active_status | safe }};
        $(document).ready ( function(){
            for (const [key, value] of Object.entries(x)) {
                if(value === false){
                    document.querySelector("[value=" + CSS.escape(key) + "]").parentElement.classList.add('inactive-cell');
                }
            };
        });
    </script>
{% endblock %}

{% block pagehead %}
    {% include 'pagehead.html' %}
{% endblock %}
{% block content %}
    <div id="confirm-dialog" title="Confirm Action">
        <p id="confirm-action-name" name="confirm-action-name">
            Action Requested
        </p>

        <p>
           Warning! Clicking continue will disassociate any and all allowed drug numbers and reduce the canister quantity to 0.
           Before continuing, be sure to remove all pills from the canister.
        </p>
    </div>
    <div class="well">
        <form id="associateDrugForm" name="associateDrugForm" method="POST">
            {% csrf_token %}
            <input type="hidden" id="remove-assoc-val" name="remove-assoc-val" value=""/>
            <label for="search-drug-canister-input">Scan or Enter Canister Barcode to Associate: </label>
            <input type="text" id="search-drug-canister-input" name="search-drug-canister-input" style="width: 15em;"
                   value="{{ search_val }}">&nbsp;&nbsp;
            <button class="btn drug-assoc-btn" id="btn-lookup-drug-canister" name="btn-lookup-drug-canister"><i
                    class="icon-search"></i> Search
            </button>
            &nbsp;&nbsp;&nbsp;
            <button class="btn drug-assoc-btn" id="btn-reset" name="btn-reset"><i class="icon-remove-circle"></i> Clear
            </button>
            <input type="hidden" id="canister-barcode-entered" name="canister-barcode-entered"
                   value="{{ canister_barcode_entered }}"/>
            {% if show_canister_association != True %}
                <input type="hidden" id="load-initial-values-flag" name="load-initial-values-flag"
                       value="Y"/>{% endif %}
            {% if is_decommissioned != True and canister_inactive != True %}
            <hr/>
            <div id="current-canister-association" {% if show_canister_association != True %}
                 style="display: none;"{% endif %}>
                {% if current_canister != None and current_canister.pharmaceutical.id > 0 %}
                    <table style="margin: 5px;">
                    <caption style="font-weight: bold; text-align: left; border-bottom: 1px solid black;">Current Pharmaceutical Associated to Canister
                    </caption>
                        <tr>
                            <td class="site-drug-edit-td">{{ current_canister.pharmaceutical.drug_name.label_name }}
                            {{ current_canister.pharmaceutical.strength.label_name }} {{ current_canister.pharmaceutical.unit.label_name }}
                            {{ current_canister.pharmaceutical.form.label_name }}</td>
                            <td style="width: 50px;">&nbsp;</td>
                            <td class="site-drug-edit-td" style="text-align: right;">
                                {% if current_canister.instance.id > 0 %}{% if current_canister.instance.shape or current_canister.instance.color %}
                                    ({{ current_canister.instance.shape.name }}, {{ current_canister.instance.color.name }}){% endif %}{% endif %}</td>
                        </tr>
                        <tr>
                            <td class="site-drug-edit-td">{% if current_canister.instance.id > 0 %}{{ current_canister.instance.manufacturer.name }}{% endif %}</td>
                            <td>&nbsp;</td>
                            <td class="site-drug-edit-td" style="text-align: right;">
                               {% if current_canister.instance.id > 0 %} {% if current_canister.instance.front_imprint or current_canister.instance.back_imprint %}
                                    {{ current_canister.instance.front_imprint }},
                                    {{ current_canister.instance.back_imprint }}{% endif %}{% endif %}</td>
                        </tr>
                    </table>
                    <br/>
                    <div id="noAssociatedErrorDiv" {% if not show_no_associated %}style="display: none;"{% endif %}>
                    <h3 class="dosis-warn-heading">No Drug Numbers Currently Allowed for this Canister!</h3>
                    </div>
                    <p>List of Allowed Drug Numbers:</p>
                    <div id="canister-authority-list">
                        {% for field in drug_num_list_form %}
                            {{ field }}
                        {% endfor %}
                    </div>
                    <button type="button" class="btn drug-assoc-btn" id="btn-remove-associated-drug"
                            name="btn-remove-associated-drug">Remove Associated Drug
                    </button>&nbsp;&nbsp;&nbsp;
                    {% if show_replen %}
                        <button class="btn drug-assoc-btn" id="btn-replenish" name="btn-replenish">Replenish</button>
                    {% endif %}
                {% else %}
                    {% if search_val|slice:":1" == '2' %}
                    <p>
                        BP Cassette Id: <input type="text" id="bp-canister-num" name="bp-canister-num" value="{{ current_canister.bp_cassette_id }}" style="width: 3em;">
                    </p>
                    {% endif %}
                    <div style="background-color: yellow; padding: 8px; margin: 3px;">
                        <p style="font-weight: bold; font-size: 14pt;">No Drug Currently Associated to this
                            Canister.</p>

                        <p>Scan the stockbottle barcode, enter the ndc number, or enter the drug name of the drug to
                            associate
                            to this canister:</p>
                        <input type="text" id="drug-lookup" name="drug-lookup" value="{{ drug_lookup_val }}"
                               style="width: 15em;">&nbsp;&nbsp;
                        <button class="btn drug-assoc-btn" name="btn-drug-lookup" id="btn-drug-lookup"><i
                                class="icon-search"></i> Find Drug
                        </button>
                        &nbsp;&nbsp;&nbsp;
                        <button class="btn drug-assoc-btn" id="btn-drug-lookup-reset" name="btn-drug-lookup-reset" type="button"><i
                                class="icon-remove-circle"></i> Clear
                        </button>
                        <br/>

                        <div style="width: 800px; background-color: white;">
                            <table class="table table-bordered table-condensed">
                                <caption style="font-size: 12pt; background-color: lightyellow;">Drug Lookup Results
                                </caption>
                                <thead>
                                <tr style="background-color: lightgreen;">
                                    <th>&nbsp;</th>
                                    <th>Drug Number</th>
                                    <th>Drug Name</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for auth in drug_lookup_results %}
                                    {% if auth.active %}
                                        <tr>
                                            <td><input type="radio" name="drug_lookup_auth_id" value="{{ auth.auth_id }}" data-active="{{ auth.active }}">
                                            </td>
                                            <td>{{ auth.drug_number }}</td>
                                            <td>{{ auth.drug_name }}</td>
                                        </tr>
                                    {% else %}
                                        <tr>
                                            <td class="inactive-cell"><input type="radio" name="drug_lookup_auth_id" value="{{ auth.auth_id }}" data-active="{{ auth.active }}">
                                            </td>
                                            <td class="inactive-cell">{{ auth.drug_number }}</td>
                                            <td class="inactive-cell">{{ auth.drug_name }}</td>
                                        </tr>
                                    {% endif %}
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        <p>Select the drug to associate to the canister and click the Associate button.</p>
<!--                        <div style="display:none" class="alert alert-error" id="inactive-drug-alert">-->
<!--                            <button type="button" class="close" data-dismiss="alert">×</button>-->
<!--                            <label class="error" style="display: block;" for="id_form-0-stock_bottle_barcode">This drug is currently marked as inactive</label>-->
<!--                        </div>-->
                        {% if drug_lookup_results|length > 0 %}
                            <div style="display: flex;">
                                <div style="text-align: center; padding-right: 2vw; padding-left: 1vw;">
                                    <label for="canister_default_dafe" style="font-weight: bold; border-bottom: 2px solid black;">Default Dafe</label>
                                    <select id="canister_default_dafe" name="canister_default_dafe" style="width: auto;">
                                    {% for dafe in dafe_list %}
                                        <option value="{{ dafe.id }}" {% if current_canister.default_dafe.id == dafe.id %}selected{% endif %}>{% if dafe.tag == 'UNKNOWN' %}Unknown{% else %}{{ dafe.display_name }}{% endif %}</option>
                                    {% endfor %}
                                    </select>
                                </div>

                                <div style="text-align: center; padding-right: 2vw;">
                                    <label for="canister_fill_type" style="font-weight: bold; border-bottom: 2px solid black;">Allowed Req. Type</label>
                                    <select id="canister_fill_type" name="canister_fill_type" style="width: auto;">
                                    {% for itm in fill_type_list %}
                                        <option value="{{ itm }}" {% if itm == current_canister.fill_type_allowed %}selected{% endif %}>{{ itm }}</option>
                                    {% endfor %}
                                    </select>
                                </div>

                                {% if show_half_tab %}
                                    <div style="text-align: center; padding-right: 2vw;">
                                        <label for="canister_frac_tab" style="font-weight: bold; border-bottom: 2px solid black;">Frac. Tab.</label>
                                        <select id="canister_frac_tab" name="canister_frac_tab" style="width: auto;">
                                        {% if current_canister == None %}
                                            <option value="WHOLE TABLET" selected>WHOLE TABLET</option>
                                            <option value="HALF TABLET">HALF TABLET</option>
                                        {% else %}
                                            {% for itm in frac_tab_list %}
                                                <option value="{{ itm }}" {% if current_canister.pill_fraction != 1 and itm == 'HALF TABLET'%}selected
                                                {% elif current_canister.pill_fraction == 1 and itm == 'WHOLE TABLET' or current_canister == None%}selected{% endif %}>{{ itm }}</option>
                                            {% endfor %}
                                        {% endif %}
                                        </select>
                                    </div>
                                {% endif %}
                            </div>
                        {% endif %}
                        <button class="btn drug-assoc-btn" name="btn-associate-drug" id="btn-associate-drug" disabled style="margin-left: 1vw;"><i
                                class="icon-cog"></i> Associate
                        </button>
                    </div>
                {% endif %}
            </div>
            {% elif is_decommissioned == True %}
            <h3 style="color: red;">This canister has been decommissioned!</h3>
            {% elif canister_inactive == True %}
            <h3 style="color: red;">This canister is not currently active. Please make it active before associating a drug.</h3>
            {% else %}
            <h3 style="color: yellow;">Either the rules of logic have ceased to exist or the programmer who wrote this did something wrong.</h3>
            {% endif %}
        </form>
    </div>
{% endblock %}