{% extends "site.html" %}


{% block head %}
    {{ block.super }}
    <script>

        function clear_card_display(tod) {
            $("#" + tod + "_sun_medpass").html("&nbsp;");
            $("#" + tod + "_mon_medpass").html("&nbsp;");
            $("#" + tod + "_tue_medpass").html("&nbsp;");
            $("#" + tod + "_wed_medpass").html("&nbsp;");
            $("#" + tod + "_thu_medpass").html("&nbsp;");
            $("#" + tod + "_fri_medpass").html("&nbsp;");
            $("#" + tod + "_sat_medpass").html("&nbsp;");
        }

        function update_medpass(tod, qty) {
            $("#" + tod + "_sun_medpass").html($("#" + tod + "_sun_medpass").html() + qty);
            $("#" + tod + "_mon_medpass").html($("#" + tod + "_mon_medpass").html() + qty);
            $("#" + tod + "_tue_medpass").html($("#" + tod + "_tue_medpass").html() + qty);
            $("#" + tod + "_wed_medpass").html($("#" + tod + "_wed_medpass").html() + qty);
            $("#" + tod + "_thu_medpass").html($("#" + tod + "_thu_medpass").html() + qty);
            $("#" + tod + "_fri_medpass").html($("#" + tod + "_fri_medpass").html() + qty);
            $("#" + tod + "_sat_medpass").html($("#" + tod + "_sat_medpass").html() + qty);
        }

        function refresh_card_display() {
            clear_card_display("am");
            clear_card_display("noon");
            clear_card_display("pm");
            clear_card_display("bed");

            $("input:text[name^='drug_list_am_qty_']").each(function () {
                if (parseInt($(this).val()) > 0) {
                    var myname = $(this).attr('name');
                    var rowid = "#drug_list_row_" + myname.replace("drug_list_am_qty_", "");
                    var color = $(rowid).css("background-color");
                    var am_pass = "<span style='background-color: " + color + "; color: #000000' class='badge'>" + $(this).val() + "</span>";
                    update_medpass("am", am_pass);
                }
            });

            $("input:text[name^='drug_list_noon_qty_']").each(function () {
                if (parseInt($(this).val()) > 0) {
                    var myname = $(this).attr('name');
                    var rowid = "#drug_list_row_" + myname.replace("drug_list_noon_qty_", "");
                    var color = $(rowid).css("background-color");
                    var noon_pass = "<span style='background-color: " + color + "; color: #000000' class='badge'>" + $(this).val() + "</span>";
                    update_medpass("noon", noon_pass);
                }
            });

            $("input:text[name^='drug_list_pm_qty_']").each(function () {
                if (parseInt($(this).val()) > 0) {
                    var myname = $(this).attr('name');
                    var rowid = "#drug_list_row_" + myname.replace("drug_list_pm_qty_", "");
                    var color = $(rowid).css("background-color");
                    var pm_pass = "<span style='background-color: " + color + "; color: #000000' class='badge'>" + $(this).val() + "</span>";
                    update_medpass("pm", pm_pass);
                }
            });

            $("input:text[name^='drug_list_bed_qty_']").each(function () {
                if (parseInt($(this).val()) > 0) {
                    var myname = $(this).attr('name');
                    var rowid = "#drug_list_row_" + myname.replace("drug_list_bed_qty_", "");
                    var color = $(rowid).css("background-color");
                    var bed_pass = "<span style='background-color: " + color + "; color: #000000' class='badge'>" + $(this).val() + "</span>";
                    update_medpass("bed", bed_pass);
                }
            });
        }


        $(function () {
            $(document).tooltip();

            $("#drug-search-results").dialog({
                autoOpen: {% if show_drug_pick == True %}true{% else %}false{% endif %},
                closeOnEscape: false,
                modal: true,
                draggable: false,
                width: 1000,
                buttons: [
                    {
                        text: "Close",
                        "class": 'modal-dialog-button-right',
                        click: function () {
                            $(this).dialog("close");
                        }
                    },
                    {
                        text: "Select",
                        "class": 'modal-dialog-button-left',
                        click: function () {
                            $("#sel-drug-instance").val($("input:radio[name=drug_lookup_instance_id]:checked").val());
                            document.scanDrugForm.submit();
                            $(this).dialog("close");
                        }
                    }
                ]
            });

            refresh_card_display();

            $("input:text[name^='drug_list_am_qty_']").change(function () {
                refresh_card_display();
            });

            $("input:text[name^='drug_list_noon_qty_']").change(function () {
                refresh_card_display();
            });

            $("input:text[name^='drug_list_pm_qty_']").change(function () {
                refresh_card_display();
            });

            $("input:text[name^='drug_list_bed_qty_']").change(function () {
                refresh_card_display();
            });
        });
    </script>
{% endblock %}

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

{% block content %}
    <div class="well well-large" style="height: 600px;">
        <form id="scanDrugForm" name="scanDrugForm" method="POST">
            {% csrf_token %}
            <div>
                <table style="width: 95%;">
                    <tr style="width: 100%;">
                        <td style="width: 50%; vertical-align: top; padding-right: 20px;">
                            <input type="hidden" id="sel-drug-instance" name="sel-drug-instance" value=""/>
                            <label for="search-drug-canister-input">Enter Drug Name/Number for Pre-pack: </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> Find
                            </button>
                            <button class="btn drug-assoc-btn" id="btn-remove-selected-drugs"
                                    name="btn-remove-selected-drugs"><i class="icon-remove-circle"></i> Remove Selected
                            </button>
                            <hr/>
                            <p>List of Drugs to Dispense:</p>
                            <table class="table table-bordered">
                                <thead>
                                <tr>
                                    <th>&nbsp;</th>
                                    <th>Drug Name</th>
                                    <th>Fill Plan</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for drug in drugList %}
                                    <tr id="drug_list_row_{{ drug.instance_id }}"
                                        style="background-color: {% if forloop.counter == 1 %}#FF9900{% elif forloop.counter == 2 %}#00FFFF
                                        {% elif forloop.counter == 3 %}#FF99FF{% elif forloop.counter == 4 %}#009900
                                        {% elif forloop.counter == 5 %}#FFFF00{% elif forloop.counter == 6 %}#FF3300
                                        {% else %}#FFFFFF{% endif %}">
                                        <td style="padding: 2px;"><input type="checkbox"
                                                                         name="drug_list_delete_{{ drug.instance_id }}"
                                                                         value="{{ drug.instance_id }}"/></td>
                                        <td style="padding: 2px;"><input type="hidden"
                                                                         name="drug_list_instance_id_{{ drug.instance_id }}"
                                                                         value="{{ drug.instance_id }}">
                                            <input type="hidden" name="drug_list_drug_name_{{ drug.instance_id }}"
                                                   value="{{ drug.drug_data }}"/>
                                            {{ drug.drug_data }}
                                        </td>
                                        <td style="padding: 2px;">AM: <input type="text" style="width: 2em;"
                                                                             name="drug_list_am_qty_{{ drug.instance_id }}"
                                                                             value="{{ drug.am_qty }}">
                                            NOON: <input type="text" style="width: 2em;"
                                                         name="drug_list_noon_qty_{{ drug.instance_id }}"
                                                         value="{{ drug.noon_qty }}"><br/>
                                            PM: <input type="text" style="width: 2em;"
                                                       name="drug_list_pm_qty_{{ drug.instance_id }}"
                                                       value="{{ drug.pm_qty }}">
                                            BED: <input type="text" style="width: 2em;"
                                                        name="drug_list_bed_qty_{{ drug.instance_id }}"
                                                        value="{{ drug.bed_qty }}"></td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </td>
                        <td style="width: 50%; vertical-align: top;">
                            <p>Card Map</p>
                            <table class="table table-bordered">
                                <thead>
                                <tr>
                                    <th style="width: 25px;">&nbsp;</th>
                                    <th style="width: 25%;">AM</th>
                                    <th style="width: 25%;">NOON</th>
                                    <th style="width: 25%;">PM</th>
                                    <th style="width: 25%;">BED</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr style="height:60px;">
                                    <td><b>SUN</b></td>
                                    <td id="am_sun_medpass">&nbsp;</td>
                                    <td id="noon_sun_medpass">&nbsp;</td>
                                    <td id="pm_sun_medpass">&nbsp;</td>
                                    <td id="bed_sun_medpass">&nbsp;</td>
                                </tr>
                                <tr style="height:60px;">
                                    <td><b>MON</b></td>
                                    <td id="am_mon_medpass">&nbsp;</td>
                                    <td id="noon_mon_medpass">&nbsp;</td>
                                    <td id="pm_mon_medpass">&nbsp;</td>
                                    <td id="bed_mon_medpass">&nbsp;</td>
                                </tr>
                                <tr style="height:60px;">
                                    <td><b>TUE</b></td>
                                    <td id="am_tue_medpass">&nbsp;</td>
                                    <td id="noon_tue_medpass">&nbsp;</td>
                                    <td id="pm_tue_medpass">&nbsp;</td>
                                    <td id="bed_tue_medpass">&nbsp;</td>
                                </tr>
                                <tr style="height:60px;">
                                    <td><b>WED</b></td>
                                    <td id="am_wed_medpass">&nbsp;</td>
                                    <td id="noon_wed_medpass">&nbsp;</td>
                                    <td id="pm_wed_medpass">&nbsp;</td>
                                    <td id="bed_wed_medpass">&nbsp;</td>
                                </tr>
                                <tr style="height:60px;">
                                    <td><b>THU</b></td>
                                    <td id="am_thu_medpass">&nbsp;</td>
                                    <td id="noon_thu_medpass">&nbsp;</td>
                                    <td id="pm_thu_medpass">&nbsp;</td>
                                    <td id="bed_thu_medpass">&nbsp;</td>
                                </tr>
                                <tr style="height:60px;">
                                    <td><b>FRI</b></td>
                                    <td id="am_fri_medpass">&nbsp;</td>
                                    <td id="noon_fri_medpass">&nbsp;</td>
                                    <td id="pm_fri_medpass">&nbsp;</td>
                                    <td id="bed_fri_medpass">&nbsp;</td>
                                </tr>
                                <tr style="height:60px;">
                                    <td><b>SAT</b></td>
                                    <td id="am_sat_medpass">&nbsp;</td>
                                    <td id="noon_sat_medpass">&nbsp;</td>
                                    <td id="pm_sat_medpass">&nbsp;</td>
                                    <td id="bed_sat_medpass">&nbsp;</td>
                                </tr>
                                </tbody>
                            </table>
                            <p>Number of Cards:&nbsp; <input type="text" style="width: 3em;" value="1" id="prepack-num-cards" name="prepack-num-cards"/>&nbsp;&nbsp;&nbsp;
                    <button id="apply_prepack" class="btn" name="apply_prepack"><i class="icon-th"></i> Submit Order
                    </button></p>
                        </td>
                    </tr>
                </table>
            </div>
        </form>
    </div>
    <div id="drug-search-results" title="Select Drug Instance">
        <div style="background-color: white;">
            <form id="selDrugForm" name="selDrugForm" method="POST">
                {% csrf_token %}
                <table class="table table-bordered">
                    <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>
                        <th>Manufacturer</th>
                        <th>Shape</th>
                        <th>Color</th>
                        <th>Imprint Front</th>
                        <th>Imprint Back</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for inst in drug_lookup_results %}
                        <tr>
                            <td><input type="radio" name="drug_lookup_instance_id" value="{{ inst.id }}"></td>
                            <td>{% if inst.authority.drug_number|length >= 9 %}
                                {{ inst.authority.drug_number|slice:"0:5" }}-
                                {{ inst.authority.drug_number|slice:"5:9" }}-XX
                            {% else %}{{ inst.authority.drug_number }}{% endif %}</td>
                            <td>{{ inst.authority.pharmaceutical.drug_name.label_name }} {{ inst.authority.pharmaceutical.strength.label_name }}
                                {{ inst.authority.pharmaceutical.unit.label_name }} {{ inst.authority.pharmaceutical.form.label_name }}</td>
                            <td>{{ inst.manufacturer.name }}</td>
                            <td>{{ inst.shape.name }}</td>
                            <td>{{ inst.color.name }}</td>
                            <td>{{ inst.imprint_front }}</td>
                            <td>{{ inst.imprint_back }}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </form>
        </div>
    </div>
{% endblock %}