{% extends "site.html" %}


{% block head %}
    {{ block.super }}
    {% include 'dispense-prepack-js-functions.html' %}
    <script>
        function activateFormValidation(fieldId, instid) {
            var prepackalert = $("#prepack-validation-alert");
            $("#scanDrugForm").validate({
                onkeyup: false,
                errorContainer: prepackalert,
                errorLabelContainer: $("ul", prepackalert),
                wrapper: 'li'
            });

            $("#id_num_cards").rules('add', {
                required: true,
                digits: true,
                range: [1, 500],
                messages: {
                    required: "Number of Cards cannot be blank.",
                    digits: "Number of Cards must be numeric.",
                    range: "Number of Cards must be between 1 and 500"
                }
            });

            $("#id_days_supply").rules('add', {
                required: true,
                digits: true,
                range: [1, 31],
                messages: {
                    required: "Days Supply cannot be blank.",
                    digits: "Days Supply must be numeric.",
                    range: "Days Supply must be between 1 and 31"
                }
            });

            $("#id_pills_per_dose").rules('add', {
                required: true,
                number: true,
                messages: {
                    required: "Pills Per Dose cannot be blank.",
                    number: "Pills Per Dose must be numeric."
                }
            });

            {% if show_calendar|upper == 'TRUE' %}
                $("#id_start_day").rules('add', {
                    required: true,
                    digits: true,
                    range: [1, 31],
                    messages: {
                        required: "Start Day cannot be blank.",
                        digits: "Start Day must be numeric.",
                        range: "Start Day must be between 1 and 31"
                    }
                });
            {% endif %}

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

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

            $("#apply_prepack").click(function (event) {
                setBasicFillPlanDisabled(false);
                $("#fill-plan-value").val(JSON.stringify(makeFillPlan()));
                $("#scanDrugForm").validate();
                if ($("#scanDrugForm").valid()) {
                    $("#do_submit_prepack").val("SUBMIT");
                    document.scanDrugForm.submit();
                }
            });
            $("#prepackEntry").show();
            $("#btn-lookup-drug-canister").hide();

            var maxval = $("#" + fieldId).val();
            $("#id_pills_per_dose").empty();
            for (var i = 0; i < parseInt(maxval); i++) {
                $("#id_pills_per_dose").append('<option value=' + String(i + 1) + '>' + String(i + 1) + '</option>');
            }
            $("#id_pills_per_dose").val("1");

            {% if card_capacity %}
                setMaxDaysSupplyRule({{ card_capacity }}, null, null);

                $("#id_package_type").change(function (event) {
                    var packtag = $(this).val();
                    $.ajax({
                        url: "{% url 'site:update-prepack-package-capacity' %}",
                        type: "POST",
                        data: {
                            csrfmiddlewaretoken: '{{csrf_token}}',
                            package_tag: packtag
                        },
                        success: function (data, status, jqXHR) {
                            setMaxDaysSupplyRule(data, packtag, {{ selected_instance }});
                        }
                    });
                });

               $("#id_package_type").trigger("change");

            {% endif %}

            $("#id_num_cards").focus();
        }

        $(function () {
            $("#prepackEntry").hide();

            $("#fill-plan-select").dialog({
                autoOpen: false,
                closeOnEscape: false,
                modal: true,
                draggable: false,
                width: 700,
                buttons: [
                    {
                        text: "Cancel",
                        "class": 'modal-dialog-button-right',
                        click: function () {
                            zeroFillPlan();
                            $("#custom-fill-plan-set").val("N");
                            setBasicFillPlanDisabled(false);
                            $("#clear-complex-fill-plan-btn").hide();
                            $(this).dialog("close");
                        }
                    },
                    {
                        text: "Set",
                        "class": 'modal-dialog-button-left',
                        click: function () {
                            /* need to store vals for submit in main form as fill plan array */
                            $("#custom-fill-plan-set").val("Y");
                            setBasicFillPlanDisabled(true);
                            $("#clear-complex-fill-plan-btn").show();
                            $(this).dialog("close");
                        }
                    }
                ]
            });

            $("#clear-complex-fill-plan-btn").click(function () {
                zeroFillPlan();
                setBasicFillPlanDisabled(false);
                $(this).hide();
            });

            $("#fill-plan-select").on('change','input[type=number]', function (event) {
                var itm = event.target.name;
                var itmval = $(this).val();
                var pillitm = itm + '-pill';
                var pillspan = '<span class="badge badge-info">&nbsp;</span>';

                switch (itmval) {
                    case "0":
                        $("#" + pillitm).html('&nbsp;');
                        break;

                    case "1":
                        $("#" + pillitm).html(pillspan);
                        break;

                    case "2":
                        $("#" + pillitm).html(pillspan + '&nbsp;' + pillspan);
                        break;

                    case "3":
                        $("#" + pillitm).html(pillspan + '&nbsp;' + pillspan + pillspan);
                        break;

                    default:
                        $("#" + pillitm).html('&nbsp;');
                        break;
                }

            });

            $("#set-complex-fill-plan-btn").click(function () {
                 $("#fill-plan-select").dialog("open");
            });

            $("#fill-plan-select").on('click', '#col_4_plus_btn', function () {
                colPlusAction('4');
            });

            $("#fill-plan-select").on('click', '#col_4_minus_btn', function () {
                colMinusAction('4');
            });

            $("#fill-plan-select").on('click', '#col_3_plus_btn', function () {
                colPlusAction('3');
            });

            $("#fill-plan-select").on('click', '#col_3_minus_btn', function () {
                colMinusAction('3');
            });

            $("#fill-plan-select").on('click', '#col_2_plus_btn', function () {
                colPlusAction('2');
            });

            $("#fill-plan-select").on('click', '#col_2_minus_btn', function () {
                colMinusAction('2');
            });

            $("#fill-plan-select").on('click', '#col_1_plus_btn', function () {
                colPlusAction('1');
            });

            $("#fill-plan-select").on('click', '#col_1_minus_btn', function () {
               colMinusAction('1');
            });

            $("#fill-plan-select").on('click', '#row_8_plus_btn', function () {
                 rowPlusAction('8');
            });

            $("#fill-plan-select").on('click', '#row_8_minus_btn', function () {
                 rowMinusAction('8');
            });

            $("#fill-plan-select").on('click', '#row_7_plus_btn', function () {
                 rowPlusAction('7');
            });

            $("#fill-plan-select").on('click', '#row_7_minus_btn', function () {
                 rowMinusAction('7');
            });

            $("#fill-plan-select").on('click', '#row_6_plus_btn', function () {
                 rowPlusAction('6');
            });

            $("#fill-plan-select").on('click', '#row_6_minus_btn', function () {
                 rowMinusAction('6');
            });

            $("#fill-plan-select").on('click', '#row_5_plus_btn', function () {
                 rowPlusAction('5');
            });

            $("#fill-plan-select").on('click', '#row_5_minus_btn', function () {
                 rowMinusAction('5');
            });

            $("#fill-plan-select").on('click', '#row_4_plus_btn', function () {
                 rowPlusAction('4');
            });

            $("#fill-plan-select").on('click', '#row_4_minus_btn', function () {
                 rowMinusAction('4');
            });

            $("#fill-plan-select").on('click', '#row_3_plus_btn', function () {
                 rowPlusAction('3');
            });

            $("#fill-plan-select").on('click', '#row_3_minus_btn', function () {
                 rowMinusAction('3');
            });

            $("#fill-plan-select").on('click', '#row_2_plus_btn', function () {
                 rowPlusAction('2');
            });

            $("#fill-plan-select").on('click', '#row_2_minus_btn', function () {
                 rowMinusAction('2');
            });

            $("#fill-plan-select").on('click', '#row_1_plus_btn', function () {
                 rowPlusAction('1');
            });

            $("#fill-plan-select").on('click', '#row_1_minus_btn', function () {
                 rowMinusAction('1');
            });

            //filter out !
            $(document).keypress(function (event) {
                if (event.charCode == 33) {  //!
                    $("#search-drug-canister-input").focus();
                    $("#search-drug-canister-input").select();
                    return false;
                } else {
                    return true;
                }
            });

            $("#search-drug-canister-input").focus();

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

            {% if selected_instance %}
                var instid = {{ selected_instance }};
                var maxFrmField = "drug_max_per_blister_" + instid;
                activateFormValidation(maxFrmField, instid);
            {% endif %}

            $("#btn-lookup-drug-canister").click(function () {
                document.scanDrugForm.submit();
            })

            $("#search-drug-canister-input").on('keyup', function (e) {
                if (e.key === 'Enter' || e.keyCode === 13) {
                    document.scanDrugForm.submit();
                }
            });

            $("#btn-reset").click(function () {
                window.location.href = "{% url 'site:dispense-prepack-fill' %}"
            });


        });
    </script>
{% endblock %}

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

{% block content %}
    <div class="well">
        <form id="scanDrugForm" name="scanDrugForm" method="POST">
            {% csrf_token %}
            <input type="hidden" id="custom-fill-plan-set" name="custom-fill-plan-set" value="N"/>
            <input type="hidden" id="fill-plan-value" name="fill-plan-value" value=""/>

            <div class="alert alert-error" id="prepack-validation-alert" style="display: none;">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <ul id="prepack-validation-alert-list">
                </ul>
            </div>
            {% if function_error %}
                <div class="alert alert-error" id="prepack-apply-alert">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    <ul id="prepack-apply-alert-list">
                        <li>{{ function_error }}</li>
                    </ul>
                </div>
            {% endif %}
            {% if show_success %}
                <h3 style="color: green;">Pre-Pack order submitted successfully.</h3>
            {% endif %}
            <label for="search-drug-canister-input">Scan Canister Barcode or 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" type="button" id="btn-lookup-drug-canister" name="btn-lookup-drug-canister"><i
                    class="icon-search"></i> Find
            </button>
            <button class="btn drug-assoc-btn cancel" type="button" id="btn-reset" name="btn-reset"><i
                    class="icon-remove-circle"></i> Clear
            </button>
            <hr/>
            <div id="drug-search-results" {% if show_drug_search != True %}
                 style="display: none;"{% endif %}>
                <div style="background-color: white;">
                    <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>Location</th>
                            <th>Quantity</th>
                            <th>Manufacturer</th>
                            <th>Shape</th>
                            <th>Color</th>
                            <th>Imprint</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for can in drug_lookup_results %}
                            <tr>
                                <td><input type="radio" name="drug_lookup_instance_id" value="{{ can.instance_id }}"
                                           {% if selected_instance|slugify == can.instance_id|slugify %}checked{% endif %}>
                                    <input type="hidden" id="drug_max_per_blister_{{ can.instance_id }}"
                                           value="{{ can.max_per_blister }}"/></td>
                                <td>{{ can.drug_number }}</td>
                                <td>{{ can.drug_name }}</td>
                                <td>{% for itm in can.location %}{% if not forloop.first %}<hr/><br/>{% endif %}
                                    {{ itm.canister_location }}<br/>
                                    {{ itm.serial_number }}{% endfor %}</td>
                                <td>{% for itm in can.quantity %}{% if not forloop.first %}<hr/><br/>{% endif %}
                                    {{ itm }}<br/>&nbsp;{% endfor %}</td>
                                <td>{{ can.manufacturer }}</td>
                                <td>{{ can.shape }}</td>
                                <td>{{ can.color }}</td>
                                <td>{{ can.imprint_front }} / {{ can.imprint_back }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
                <p>Select the drug to prepack to continue..</p>
                <hr/>
                <div id="prepackEntry" class="form-panel form-inline">
                    <label style="margin-left: 10px;" for="id_num_cards">Number of
                        Cards:&nbsp;</label>{{ prepack_form.num_cards }}
                    <label style="margin-left: 10px;"
                           for="id_priority">Priority:&nbsp;</label>{{ prepack_form.priority }}
                    <label style="margin-left: 10px;" for="id_package_type">Blister Type:&nbsp;</label>{{ prepack_form.package_type }}
                    <br/>
                    <label style="margin-left: 10px;" for="id_days_supply">Days Supply (Number of
                        Doses:&nbsp;</label>{{ prepack_form.days_supply }}
                    <label style="margin-left: 10px;" for="id_pills_per_dose">Pills Per
                        Dose:&nbsp;</label>{{ prepack_form.pills_per_dose }}
                    {% if show_calendar|upper == 'TRUE' %}
                        <label style="margin-left: 10px;" for="id_start_day">Start Day:&nbsp;</label>
                        {{ prepack_form.start_day }}
                        <label style="margin-left: 10px;" for="id_end_of_month">Last Day of Month:&nbsp;</label>
                        {{ prepack_form.end_of_month }}
                    {% else %}
                        <input type="hidden" id="id_start_day" name="start_day" value="1"/>
                        <input type="hidden" id="id_end_of_month" name="end_of_month" value="USE_31"/>
                    {% endif %}
                    {% if ppk_mgr_enabled %}
                        <label style="margin-left: 10px;" for="id_add_to_ppk_wall">Add Prepack To Wall?&nbsp;</label>
                        {{ prepack_form.add_to_ppk_wall }}
                    {% else %}
                        <input type="hidden" id="id_add_to_ppk_wall" name="add_to_ppk_wall" value=""/>
                    {% endif %}
                    &nbsp;&nbsp;&nbsp;
                    <button class="btn btn-link" type="button" id="set-complex-fill-plan-btn"
                            name="set-complex-fill-plan-btn">Custom Fill Plan
                    </button>
                    &nbsp;&nbsp;
                    <button class="btn btn-link" type="button" id="clear-complex-fill-plan-btn" style="display: none;">
                        Clear Custom Fill Plan
                    </button>
                    <br/>
                    <label style="margin-left: 10px;" for="id_batch_value">Batch
                        Id:&nbsp;</label>{{ prepack_form.batch_value }}
                    <label style="margin-left: 10px;" for="id_user_message">User Message:&nbsp;</label>{{ prepack_form.user_msg }}
                    {% if user_entry == 'TECH' or user_entry == 'BOTH' %}
                        <label style="margin-left: 10px;" for="id_req_tech">Requesting Tech:&nbsp;</label>
                        {{ prepack_form.req_tech }}
                    {% else %}
                        <input type="hidden" id="id_req_tech" name="req_tech" value="0"/>
                    {% endif %}
                    {% if user_entry == 'RPH' or user_entry == 'BOTH' %}
                        <label style="margin-left: 10px;" for="id_req_rph">Requesting RPh:&nbsp;</label>
                        {{ prepack_form.req_rph }}
                    {% else %}
                        <input type="hidden" id="id_req_rph" name="req_rph" value="0"/>
                    {% endif %}
                    <button style="float: right;" id="apply_prepack" class="btn" type="button" name="apply_prepack"><i
                            class="icon-th"></i> Submit Pre-Pack Order
                    </button>
                    <input type="hidden" id="do_submit_prepack" name="do_submit_prepack" value=""/>
                </div>
            </div>
        </form>
    </div>
    <div id="fill-plan-select" title="Specify Fill Plan">
        <div style="background-color: white;">
            <form id="selFillPlanForm" name="selFillPlanForm" method="POST">
                {% csrf_token %}
                <!--TODO: need to let user select which blister if multiple blister types available at pharmacy -->
                <table class="table" style="border-collapse: separate; border-spacing: 4px 20px;">
                    <tr>
                        <td colspan="2" class="fill-plan-head-td">
                            <button class="fill-plan-col-btn" type="button" id="col_4_plus_btn">+</button>
                            &nbsp;/&nbsp;
                            <button class="fill-plan-col-btn" type="button" id="col_4_minus_btn">-</button>
                        </td>
                        <td colspan="2" class="fill-plan-head-td">
                            <button class="fill-plan-col-btn" type="button" id="col_3_plus_btn">+</button>
                            &nbsp;/&nbsp;
                            <button class="fill-plan-col-btn" type="button" id="col_3_minus_btn">-</button>
                        </td>
                        <td colspan="2" class="fill-plan-head-td">
                            <button class="fill-plan-col-btn" type="button" id="col_2_plus_btn">+</button>
                            &nbsp;/&nbsp;
                            <button class="fill-plan-col-btn" type="button" id="col_2_minus_btn">-</button>
                        </td>
                        <td colspan="2" class="fill-plan-head-td">
                            <button class="fill-plan-col-btn" type="button" id="col_1_plus_btn">+</button>
                            &nbsp;/&nbsp;
                            <button class="fill-plan-col-btn" type="button" id="col_1_minus_btn">-</button>
                        </td>
                    </tr>
                    {% for blister in blister_layout %}
                        {% if forloop.counter0 == 0 or forloop.counter0|divisibleby:"4" %}
                            <tr>
                        {% endif %}
                    {% if blister.cup_label == 0 %}
                        <td style="border: none;">&nbsp;</td>
                        <td style="border: none;">&nbsp;</td>
                    {% else %}
                        <td class="fill-plan-label-td"><span
                                class="label label-inverse fill-plan-label">{{ blister.cup_label }}</span></td>
                        <td class="fill-plan-bubble">
                            <table class="fill-plan-pill-table">
                                <tr>
                                    <td class="fill-plan-pill-table-td"
                                        id="row{{ blister.row_number }}-{{ blister.column_number }}-pill">&nbsp;</td>
                                    <td style="border: none; padding: 2px;"><input type="number" style="width: 2em;"
                                                                                   id="row{{ blister.row_number }}-{{ blister.column_number }}"
                                                                                   name="row{{ blister.row_number }}-{{ blister.column_number }}"
                                                                                   min="0" max="{{ max_per_blister }}"
                                                                                   size="1" value="0"/></td>
                                </tr>
                            </table>
                        </td>
                    {% endif %}
                    {% if forloop.counter == 4 or forloop.counter|divisibleby:"4" %}
                        </tr>
                    {% endif %}
                    {% endfor %}
                </table>
            </form>
        </div>
    </div>
{% endblock %}