{% extends "site.html" %}


{% block head %}
    {{ block.super }}
    <script>
        function toggle_body_images(big) {
            $('.tab-content img').each(function() {
                var $img = $(this);
                if (big) {
                    $img.attr('width', '128');
                    $img.attr('height', '128');
                } else {
                    $img.attr('width', '64');
                    $img.attr('height', '64');
                }
            });
        }

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

            $('#tabAll').click(function(){
                 $('#tabAll a').addClass('active');
                 $('.tab-pane').each(function(i,t){
                    $('#myTab li').removeClass('active');
                    $(this).addClass('active');
                });
                toggle_body_images(false);
                $("div[id^='verify-']").each(function(i,t){
                   $(this).show();
                });
                $("tr[id^='inst-']").each(function(i,t){
                   $(this).show();
                });

            });

            $("li[name^='mp-']").click(function(e) {
                var mp_id = this.id;

                 $('#tabAll a').addClass('active');
                 $('.tab-pane').each(function(i,t){
                    $('#myTab li').removeClass('active');
                    $(this).addClass('active');
                });
                toggle_body_images(false);
                $("div[id^='verify-']").each(function(i,t){
                   var mp_list = $(this).attr("data-medpass-list");
                   var lookup = mp_id.replace("mp-", "");
                   if (mp_list.indexOf(lookup) >= 0) {
                     $(this).show();
                   } else {
                       $(this).hide();
                   }
                });
                $("tr[id^='inst-']").each(function(i,t){
                   $(this).hide();
                });
                $("tr[id$='"+mp_id+"']").each(function(i,t){
                   $(this).show();
                });


            });

            $("li[name^='drg-']").click(function (e) {
                var inst_id = $(this).attr("id").replace("drg-", "");
                $('.tab-pane').each(function(i,t){
                    $('#myTab li').removeClass('active');
                    $(this).addClass('active');
                });
                toggle_body_images(true);
                $("tr[id^='inst-']").each(function(i,t){
                   $(this).show();
                });
                $("div[id^='verify-']").each(function(i,t){
                   $(this).hide();
                });
                 $("div[id^='verify-" + inst_id + "']").each(function(i,t){
                   $(this).show();
                });

                $(this).tab('show');

            });

            $("#show-pill-image").dialog({
                autoOpen: false,
                closeOnEscape: true,
                modal: true,
                draggable: false,
                width: 1050,
                position: {my: "top", at: "top", of: window},
                open: function (event, ui) {
                    $("#mark-cup-issue-select").hide();
                    $("input[name='cup-issues']").prop('checked', false);

                    var drug_head = "<p>";
                    var drug_foot = "</p>";
                    $('#show-pill-image-content').append(drug_head);
                    $('#show-pill-image-content').append("<b>Cup Id: " + $("#current_cup_label").val() + "</b>");
                    $('#show-pill-image-content').append(drug_foot);

                    $('#show-pill-image-content').append(drug_head);
                    $('#show-pill-image-content').append("<b>Drug: " + $("#current_drug_name_number").val() + "</b> ");
                    $('#show-pill-image-content').append($("#current_drug_description").val());
                    $('#show-pill-image-content').append(drug_foot)

                    var frame_header = "<span>";
                    $('#show-pill-image-content').append(frame_header);

                    var img = $("#" + $("#current_img_id").val()).clone();
                    img.width(500);
                    $('#show-pill-image-content').append(img);

                    var pill_img_ref_id = $("#current_pill_img_instance_id").val();
                    if (pill_img_ref_id.length > 0) {
                        var ref_img = $("#pill-ref-img-" + pill_img_ref_id).clone();
                        ref_img.width(500);
                        $('#show-pill-image-content').append(ref_img);
                    }
                    var frame_footer = "</span>";
                    $('#show-pill-image-content').append(frame_footer);

                    var issue_str = $("#current_issue_text").val();
                    if (issue_str.length > 0) {
                        if ($("#current_issues_all_resolved").val() == "True") {
                            $('#show-pill-image').css("background-color", "#FFFF99");
                        } else {
                            $('#show-pill-image').css("background-color", "yellow");
                        }
                    } else {
                        $('#show-pill-image').css("background-color","");
                    }

                    var issue_list = issue_str.split(";");
                    var display_str = "<ul style=\"margin-top: 10px; \">";

                    issue_list.forEach( function (item) {
                        if (item.length > 0) {
                            display_str += "<li style=\"font-weight: bold; font-size: larger;\">" + item + "</li>";
                        }
                    });
                    display_str += "</ul>";
                    $('#show-pill-image-content').append(display_str);
                },
                buttons: [
                    {
                        text: "Close",
                        "class": 'modal-dialog-button-right',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });

            $("img[name^='pill-img-']").click(function (event) {
                $('#show-pill-image-content').html('');
                $("#current_img_id").val(event.target.id);
                $("#current_issue_text").val(event.target.attributes['data-issue-list'].value);
                $("#current_cup_id").val(event.target.attributes['data-cup-id'].value);
                $("#current_wo_task_id").val(event.target.attributes['data-wo-task-id'].value);
                $("#current_pill_img_instance_id").val(event.target.attributes['data-pill-img-instance-id'].value);
                $("#current_cup_label").val(event.target.attributes['data-cup-label'].value);
                $("#current_drug_description").val(event.target.attributes['data-drug-description'].value);
                $("#current_drug_name_number").val(event.target.attributes['data-drug-name-number'].value);
                $("#current_issues_all_resolved").val(event.target.attributes['data-issues-all-resolved'].value);
                $("#show-pill-image").dialog("open");
            });

            $("button[name^='btn-verify-']").click(function (event) {
                if ($(this).hasClass("btn-success")) {
                    $(this).removeClass("btn-success");
                    $(this).html("Verify");
                    if ($("button[name^='btn-verify-']").not(".btn-success").length > 0) {
                        $("#finish-verify-div").hide();
                    }
                } else {
                    $(this).addClass("btn-success");
                    $(this).html("Verified!");
                    if ($("button[name^='btn-verify-']").not(".btn-success").length <= 0) {
                        $("#finish-verify-div").show();
                    }
                }
            });

            $("#verify-user-select").change(function (event) {
               var user_id = $(this).val();
               if (user_id > 0) {
                   $("#btn-complete-card-verify").show();
               } else {
                   $("#btn-complete-card-verify").hide();
               }
            });

            $("#mark-cup-issue-btn").click(function (event) {
                $("#mark-cup-issue-select").show();
            });

            $("#btn-complete-card-verify").click(function (event) {
               var task_id = $(this).attr("value");
               var user_id = $("#verify-user-select").val();

               if (task_id > 0) {
                   $.post("{% url 'site:complete-md-verify-task' %}", {
                        task_id: task_id,
                        user_id: user_id,
                        csrfmiddlewaretoken: '{{csrf_token}}'
                    }, function (data) {
                        window.location.href = "{% url 'site:card-verification' %}";
                    });
               }
            });

            $("#save-cup-issue-btn").click(function (event) {
                var cup_issue = $("input[name='cup-issues']:checked").val();
                var cup_id = $("#current_cup_id").val();
                var wo_task_id = $("#current_wo_task_id").val();
                if (cup_issue.length > 0 ) {
                    if (wo_task_id > 0 && cup_id >= 0) {
                        $.post("{% url 'site:verify-mark-cup-issue' %}", {
                            task_id: wo_task_id,
                            cup_issue: cup_issue,
                            cup_id: cup_id,
                            csrfmiddlewaretoken: '{{csrf_token}}'
                        }, function (data) {
                            window.location.href = "{% url 'site:card-verification-details' %}?wo_id={{ workorder.wo_id }}";
                        });
                    }
                }
            });

        });

    </script>
{% endblock %}

{% block pagehead %}
    <h3 class="site-deck" style="text-align: center;">Card {% if verify_task_id %}Verification {% endif %}Details: {{ title_id }}</h3>
{% endblock %}

{% block content %}
    {% if ref_url == 'orders-dispensed' %}
    <a href="{% url 'site:report-multidose-orders-dispensed' %}">Back To 360 Orders Dispensed</a>
    {% elif ref_url == 'fill-discrepancy' %}
    <a href="{% url 'site:report-multidose-fill-discrepancy-report' %}">Back To 360 Fill Discrepancies</a>
    {% else %}
    <a href="{% url 'site:card-verification' %}">Back To Card Verification</a>
    {% endif %}
    <br/>{% if workorder.mfs_filled_by_user.id > 0 %}
    <p>Filled By: {{ workorder.mfs_filled_by_user.first_name }} {{ workorder.mfs_filled_by_user.last_name }}{% endif %}</p>
    <form id="cardVerificationForm" name="cardVerificationForm" method="POST">
        {% csrf_token %}
        <input type="hidden" name="current_img_id" id="current_img_id" value=""/>
        <input type="hidden" name="current_issue_text" id="current_issue_text" value=""/>
        <input type="hidden" name="current_cup_id" id="current_cup_id" value=""/>
        <input type="hidden" name="current_wo_task_id" id="current_wo_task_id" value=""/>
        <input type="hidden" name="current_pill_img_instance_id" id="current_pill_img_instance_id" value=""/>
        <input type="hidden" name="current_cup_label" id="current_cup_label" value=""/>
        <input type="hidden" name="current_drug_description" id="current_drug_description" value=""/>
        <input type="hidden" name="current_drug_name_number" id="current_drug_name_number" value=""/>
        <input type="hidden" name="current_issues_all_resolved" id="current_issues_all_resolved" value=""/>
    <ul class="nav nav-pills" style="margin-bottom: 0;" id="myTab">
        <li id="tabAll" class="md-verify-pill-mnu active"><a href="#" data-toggle="tab">
             <b>ALL DRUGS</b></a></li>
        {% for key, val in medpass_list.items reversed %}
            <li class="md-verify-pill-mnu" id="mp-{{ key }}" name="mp-{{ key }}"><a href="#" data-toggle="tab">
                 <b>ALL {{ val }}</b></a></li>
        {% endfor %}
    </ul>
    <ul class="nav nav-pills" style="margin-bottom: 0;" id="myTab">
        {% for itm in task_list %}
        <li class="md-verify-pill-mnu" id="drg-{{ itm.instance_id }}" name="drg-{{ itm.instance_id }}"><a href="#" data-toggle="tab">
            <table style="width: 525px;">
                <tr>
                    <td style="width: 70px;">{% if itm.use_stock_img %}<img id="pill-ref-img-{{ itm.instance_id }}" src="{% url 'site:get-pill-image' itm.instance_id %}" alt="No Image Uploaded" width="64" height="64"/>{% else %}{% for image in itm.tab_image %}<img src="data:image/png;base64,{{ image }}" width="64" height="64">&nbsp;&nbsp;{% endfor %}{% endif %}</td>
                    <td style="padding-left: 6px; vertical-align: top;">
                        <table style="height: 30px; margin-left: 0; margin-right: auto;">
                            <tr>
                              <td rowspan="2"><b>{{ itm.drug_name }}</b> ({{ itm.drug_number }})</td>
                            </tr>
                            <tr>&nbsp;</tr>
                            <tr>
                                <td>RX: {{ itm.rx_number }}-{{ itm.fill_instance }}</td>
                            </tr>
                        </table>

                        </td>
                </tr>
            </table></a></li>
        {% endfor %}
    </ul>
    <hr style="width: 100%; margin-top: 6px; margin-bottom: 6px; color: grey; background-color: grey; border: 1px solid darkgrey;"/>
    {% if verify_task_id %}
    <div id="finish-verify-div" style="display: none; background-color: lightgreen; margin-top: 5px; margin-bottom: 5px; padding-top: 3px; padding-bottom: 0px; padding-left: 10px;">
        <b>All Fill Tasks Verified. <br/>Select Verifying User:
        <select id="verify-user-select" name="verify-user-select" style="width: auto;"><option value="0">&nbsp;</option>
            {% for user in user_list %}
            <option value="{{ user.id }}">{{ user.first_name }} {{ user.last_name }}</option>
            {% endfor %}</select></b>&nbsp;&nbsp;&nbsp;
        <button class="btn btn-large" type="button" id="btn-complete-card-verify" name="btn-complete-card-verify"
        value="{{ verify_task_id }}" style="display: none;">Verify Card</button></div>
     {% elif card_verified %}
        <div id="already-verified-div" style="background-color: lightgrey; margin-top: 5px; margin-bottom: 5px; padding-top: 3px; padding-bottom: 0px; padding-left: 10px;">
            <h3>Card Already Verified</h3></div>
        {% else %}
        <div id="not-verifiable-div" style="background-color: yellow; margin-top: 5px; margin-bottom: 5px; padding-top: 3px; padding-bottom: 0px; padding-left: 10px;">
            <h3>Card Not Able to be Verified</h3></div>
    {% endif %}
    <div class="tab-content">
        {% for itm in task_list %}
        <div class="tab-pane active" id="verify-{{ itm.instance_id }}" data-medpass-list="{{ itm.filled_medpass_list }}">
            <div {% if card_verified %}style="background-color: lightgrey;"{% endif %}>{% if verify_task_id %}<button type="button" id="btn-verify-{{ itm.instance_id }}" name="btn-verify-{{ itm.instance_id }}"
                         class="btn btn-large">Verify</button> &nbsp;&nbsp;{% endif %}<b>{{ itm.drug_name }} ({{ itm.drug_number }})</b> &nbsp;
                {{ itm.manufacturer }} / {{ itm.shape }} / {{ itm.color }} / {{ itm.imprint_front }} {{ itm.imprint_back }}</div>
                {% if itm.substitution_flag %}<div style="background-color: yellow;"><b>SUBSTITUTED FOR: {{ itm.sub_drug_name }} ({{itm.sub_drug_number }})</b></div>{% endif %}
            <div class="sigtext" {% if card_verified %}style="background-color: lightgrey;"{% endif %}>{{ itm.sig_text }}</div>
            <table class="table main-table" style="border-collapse: separate; border-spacing: 4px 0px; width: auto;">
            {% if has_row_label %}
                <tr>
                    {% if has_col_label %}
                        <th>&nbsp;</th>
                    {% endif %}
                    {% for data in itm.fill_data %}
                        {% if data.cup_id < max_rows %}
                            <th>&nbsp;</th>
                        <th><b>{{ data.row_label }}</b></th>
                        {% endif %}
                    {% endfor %}
                </tr>
            {% endif %}

            {% for data in itm.fill_data %}
                {% if forloop.counter0 == 0 or forloop.counter0|divisibleby:max_rows %}
                    <tr id="inst-{{ itm.instance_id }}-mp-{{ data.column_number }}">{% if has_col_label %}
                    {% if forloop.counter0 == 0 or forloop.counter0|divisibleby:max_rows %}<td><b>{{ data.column_label }}</b></td>
                    {% endif %}{% endif %}
                {% endif %}
                <td class="fill-plan-label-td">&nbsp;</td>
                <td class="fill-plan-bubble">
                    <table class="fill-plan-pill-table">
                        <tr>
                            <td style="font-face: bold; font-size: larger; vertical-align: middle; text-align: center;
                                    {% if data.issues %}{% if data.all_resolved %}background-color: #FFFF99;{% else %}background-color: yellow;{% endif %}{% endif %}"
                                class="fill-plan-pill-table-td" id="row{{ data.cup_id }}-pill">{% if data.expected_qty %}{{ data.expected_qty|floatformat:"-1" }}{% endif %}</td>
                            <td style="border: none; padding: 2px;{% if data.issues %}{% if data.all_resolved %}background-color: #FFFF99;{% else %}background-color: yellow;{% endif %}{% endif %}">{% if data.images %}{% for image in data.images %}<img id="pill-img-{{ itm.instance_id }}-{{ data.cup_id }}-{{ forloop.counter0 }}"
                                name="pill-img-{{ itm.instance_id }}-{{ data.cup_id }}-{{ forloop.counter0 }}"
                                src="data:image/png;base64,{{ image }}" width="64" height="64" data-cup-id="{{ data.cup_id }}"
                                data-wo-task-id="{{ itm.wo_task_id }}" data-cup-label="{{ data.row_label }}-{{ data.column_label }}"
                                data-drug-description="{{ itm.manufacturer }} / {{ itm.shape }} / {{ itm.color }} / {{ itm.imprint_front }} {{ itm.imprint_back }}"
                                data-drug-name-number="{{ itm.drug_name }} ({{ itm.drug_number }})"
                                data-issues-all-resolved="{{ data.all_resolved }}"
                                data-pill-img-instance-id="{% if itm.use_stock_img %}{{ itm.instance_id }}{% endif %}"
                                data-issue-list="{% if data.issues %}{% for issue in data.issues %}{{ issue.issue_type.description }}{% if issue.resolved %} [RESOLVED]{% endif %};{% endfor %}{% endif %}">&nbsp;&nbsp;
                                {% endfor %}
                            {% else %}<img src="{{ STATIC_URL }}/img/cellspacer.png" width="64" height="64">{% endif %}</td>
                        </tr>
                    </table>
                </td>
            {% if forloop.counter == max_rows or forloop.counter|divisibleby:max_rows %}
                </tr>
            {% endif %}
            {% endfor %}

        </table>
        </div>
        {% endfor %}
    </div>
    </form>
    <div id="show-pill-image" title="Card Drug Image Zoom" style="margin-left: 2px;">
        <div id="show-pill-image-content">
            Loading Card Drug Image...
        </div>
        <form id="frmMarkCupIssue" class="form-horizontal" method="post">
            <div id="mark-cup-issue">
                <button type="button" id="mark-cup-issue-btn" class="btn">Mark Cup Issue</button>
                <div id="mark-cup-issue-select" class="control-group" style="display: none;">
                    <div class="controls">
                        <label class="radio">
                            <input type="radio" id="cup-issue-too-many" name="cup-issues" value="too-many"> Too Many Pills in Cup
                        </label>
                    </div>
                    <div class="controls">
                        <label class="radio">
                            <input type="radio" id="cup-issue-too-few" name="cup-issues" value="too-few"> Too Few Pills in Cup
                        </label>
                    </div>
                    <div class="controls">
                        <label class="radio" for="cup-issue-bad-img">
                            <input type="radio" id="cup-issue-bad-img" name="cup-issues" value="bad-img"> Chute Image Bad/Incorrect
                        </label>
                        <button type="button" id="save-cup-issue-btn" name="save-cup-issue-btn" class="btn" value="">Save</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
{% endblock %}