{% extends "site.html" %}


{% block head %}
    {{ block.super }}
    <script>
        $(function () {
            $(document).tooltip();

             $("button[name^='btn-cancel-task']").click(function (event) {
                 $("#submit-req-id").val(get_icon_button_value(event));
                 $("#confirm-action-name").text("Are You Absolutely Sure");
                 $("#confirm-dialog").dialog("open");
                 return false;
            });

            $("select[id^='medpass-select-']").change(function () {
                var taskid = $(this).attr("id");
                taskid = taskid.replace("medpass-select-", "");
                $.post("{% url 'site:change-task-medpass' %}",
                        {'csrfmiddlewaretoken': '{{csrf_token}}', task_id: taskid, medpass_id: $(this).val()},
                                    function() {
                                        window.location.reload(true);
                                });
            });

            $("#confirm-dialog").dialog({
                autoOpen: false,
                closeOnEscape: false,
                model: true,
                draggable: false,
                buttons: [
                    {
                        text: "Yes",
                        "class": 'dialog-button',
                        click: function () {
                            $.post("{% url 'site:cancel-order-request' %}",
                                {csrfmiddlewaretoken: '{{csrf_token}}', req_id: $("#submit-req-id").val()},
                                    function() {
                                        window.location.reload(true);
                                });
                            $(this).dialog("close");
                        }
                    },
                    {
                        text: "No",
                        "class": 'dialog-button',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });
        });
    </script>
{% endblock %}

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

{% block content %}
    <a href="{% url 'site:multidose-workorder-queue' %}">Back To Multidose Pending Work Orders</a>
    <p>&nbsp;</p>
    <div id="confirm-dialog" title="Confirm Action">
        <p id="confirm-action-name" name="confirm-action-name">
            Action Requested
        </p>

        <p>
            You are about to cancel a request. This action is permanent and cannot be undone. Are you sure?
        </p>
    </div>
    <div class="well well-large" style="height: 600px;">
        <form id="multidoseDetailForm" name="multidoseDetailForm" method="POST">
            <input type="hidden" id="submit-req-id" name="submit-req-id" value=""/>
            {% csrf_token %}
            <div>
                <table style="width: 95%;">
                    <tr style="width: 100%;">
                        <td style="width: 50%; vertical-align: top; padding-right: 20px;">
                            <p>Dispense Tasks By Medpass</p>
                            <table class="table table-bordered table-condensed">
                                <thead>
                                    <tr style="background-color: lightyellow;">
                                        <th>Medpass</th>
                                        <th>Rx Number</th>
                                        <th>Quantity</th>
                                        <th>Drug Name</th>
                                        <th>Drug Number</th>
                                        <th>Max Per Blister</th>
                                        <th><i class="icon-th-list"></i></th>
                                    </tr>
                                </thead>
                                <tbody>
                                {% for task in task_list %}
                                    {% if task.task_type == 'TASK_FILL_MANUAL' %}
                                    <tr style="background-color: {{ task.color }}">
                                        <td>{% if task.medpass_id in medpass_id_list %}<select style="width: auto; margin-bottom: 0;" id="medpass-select-{{ task.wo_task_id }}" name="medpass-select-{{ task.wo_task_id }}">
                                            {% for medpass in medpass_list %}
                                            <option value="{{ medpass.id }}"
                                                {% ifequal medpass.id task.medpass_id %}selected{% endifequal %}>{{ medpass.medpass_name }}</option>
                                            {% endfor %}</select>{% else %}{{ task.medpass_name }}{% endif %}</td>
                                        <td>{{ task.rx_number }}-{{ task.fill_instance }}</td>
                                        <td>{{ task.req_quantity|floatformat }}</td>
                                        <td>{{ task.drug_name }}</td>
                                        <td>{{ task.drug_number }}</td>
                                        <td>{{ task.max_per_blister }}</td>
                                        <td><button id="btn-cancel-task-{{ task.wo_task_id }}" name="btn-cancel-task-{{ task.wo_task_id }}" type="button"
                                            value="{{ task.req_id }}" title="Cancel Task" class="btn btn-small btn-link"><i class="icon-remove"></i></button></td>
                                    </tr>
                                    {% endif %}
                                {% 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>
                                    {% for medpass in medpass_list %}
                                    <th style="width: 25%;">{{ medpass.medpass_name }}</th>
                                    {% endfor %}
                                </tr>
                                </thead>
                                <tbody>
                                {% for plan in fill_plan_list %}
                                <tr style="height:60px;">
                                    <td><b>{{ forloop.counter }}</b></td>
                                    {% for col in plan %}
                                        <td>{% for subcol in col %}{% for rpt in subcol.fill_plan_range %}<span style='background-color: {{ subcol.color }}; color: #000000' class='badge'>&nbsp;</span>&nbsp;{% endfor %}{% endfor %}</td>
                                    {% endfor %}
                                </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>
        </form>
    </div>
{% endblock %}