{% extends "site.html" %}


{% block head %}
    {{ block.super }}
    {% include 'dispense-prepack-js-functions.html' %}
    <script>
        $(function () {

            $("#fill-plan-select").dialog({
                autoOpen: false,
                closeOnEscape: false,
                modal: true,
                draggable: false,
                width: 800,
                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");
                        }
                    }
                ]
            });

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

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

            /* these buttons need to be delegated by the fill-plan-select div since we are reloading if card is changed */
            $("#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;
                }

            });

            $("#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');
            });

            var prepackalert = $("#prepack-validation-alert");
            $("#dispensePrepackCanisterForm").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()));
                $("#dispensePrepackCanisterForm").validate();
                if ($("#dispensePrepackCanisterForm").valid()) {
                    document.dispensePrepackCanisterForm.submit();
                }
            });

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

            {% 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, {{ instance_id }});
                        }
                    });
                });

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

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

{% block content %}
    <div class="well">
        <div class="form-panel">
            <form class="form-inline" id="dispensePrepackCanisterForm" name="dispensePrepackCanisterForm" 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 %}
            {% if instance_id %}
                <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="{{ prepack_form.end_of_month.value }}"/>
                {% 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>
            {% endif %}
            </form>
        </div>
        {% include 'info-panel-canister-info.html' %}
        {% include 'info-panel-drug-info.html' %}
        {% include 'info-panel-replen-history.html' %}
    </div>
    <div id="fill-plan-select" title="Specify Fill Plan">
        {% include 'prepack-custom-fill-plan.html' %}
    </div>
{% endblock %}