{% extends "site.html" %}


{% block head %}
    {{ block.super }}
    <script>
        $(function () {
            $("#card-barcode-input").focus();

            $(document).keypress(function (event) {
               if ((event.which && event.which == 13) || (event.keyCode && event.keyCode == 13)) {
                    $("#btn-verify-card").click();
                    return false;
                } else {
                    return true;
                }
            });

            $("#btn-reset").click(function () {
                $("#card-barcode-input").val("");
            });

            $("#btn-verify-card").click(function () {
                var wo_id = $("#card-barcode-input").val();
                window.location.href = "{% url 'site:card-verification-details' %}?wo_id=" + wo_id;
            });

             $("#confirm-cancel-dialog").dialog({
                autoOpen: false,
                closeOnEscape: false,
                model: true,
                draggable: false,
                buttons: [
                    {
                        text: "Yes",
                        "class": 'dialog-button',
                        click: function () {
                            var wo_id = $("#form_submit_button").val().replace("btn-cancel-wo-", "");
                            $.post("{% url 'site:cancel-automation-wo' %}", {
                                csrfmiddlewaretoken: '{{csrf_token}}', wo_id: wo_id},
                                function() {
                                        window.location.reload(true);
                                }
                            );
                            $(this).dialog("close");
                        }
                    },
                    {
                        text: "No",
                        "class": 'dialog-button',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });

            $("[id^='btn-cancel-all-pat-wo-']").click(function () {
                $("#confirm-cancel-all-action-name").text("Cancel All of a Patient's Workorders");
                $("#form_submit_button").val($(this).attr("id"));
                $("#confirm-cancel-all-patient-name").text($(this).val());
                $("#confirm-cancel-all-dialog").dialog("open");
            });

            $("button[name^='btn-cancel-wo']").click(function (event) {
                var wo_id = $(this).attr("id").replace("btn-cancel-wo-", "");
                $("#confirm-cancel-action-name").text("Cancel a Multidose Card");
                $("#form_submit_button").val($(this).attr("id"));
                $("#confirm-cancel-patient-name").text($(this).val());
                $("#confirm-cancel-wo-id").text("This will cancel active workorder " + wo_id + " for patient:");
                $("#confirm-cancel-dialog").dialog("open");
            });
        });
    </script>
{% endblock %}

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

{% block content %}
    <div class="well">
        <form id="cardVerificationForm" name="cardVerificationForm" method="POST">
            {% csrf_token %}
            <input type="hidden" name="form_submit_button" id="form_submit_button" value=""/>
            <label for="card-barcode-input">Scan or Enter Work Order Id or Select from List: </label>
            <input type="text" id="card-barcode-input" name="card-barcode-input" style="width: 10em;">&nbsp;&nbsp;
            <button type="button" class="btn drug-assoc-btn" id="btn-verify-card" name="btn-verify-card"><i
                    class="icon-th-large"></i> Show Card Details
            </button>
            &nbsp;&nbsp;&nbsp;
            <button type="button" class="btn drug-assoc-btn" id="btn-reset" name="btn-reset"><i class="icon-remove-circle"></i> Clear
            </button>
            <hr/>
            <h4>Cards Ready to be Verified</h4>
            <table id="replens-needing-verify-table" class="table table-bordered table-striped">
                <thead>
                    <tr class="dosis-report-header">
                        {% include 'report-table-header.html' %}
                        <th><i class="icon-th-list"></i></th>
                    </tr>
                </thead>
                <tbody>
                {% for card in report_list %}
                    <tr style="background-color: white;">
                        <td style="padding-bottom: 2px;">{{ card.wo_id }}</td>
                        <td style="padding-bottom: 2px;">{{ card.pat_last_name }}</td>
                        <td style="padding-bottom: 2px;">{{ card.pat_first_name }}</td>
                        <td style="padding-bottom: 2px;">{{ card.dts_state|date:"m/d/Y h:i:s A" }}</td>
                        <td><a class="btn btn-small btn-link" href="{% url 'site:card-verification-details' %}?wo_id={{ card.wo_id }}" title="Verify Card"><i class="icon-ok"></i></a>&nbsp;&nbsp;&nbsp;
                        <button id="btn-cancel-wo-{{ card.wo_id }}" name="btn-cancel-wo-{{ card.wo_id }}" type="button"
                                            value="{{ card.pat_last_name }},{{ card.pat_first_name }}" title="Cancel Work Order" class="btn btn-small btn-link"><i class="icon-remove"></i></button></td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </form>
    </div>
    {% include 'pagenav.html' %}
    <div id="confirm-cancel-dialog" title="Confirm Action">
        <p id="confirm-cancel-action-name" name="confirm-cancel-action-name">
            Action Requested
        </p>

        <p id="confirm-cancel-wo-id" name="confirm-cancel-wo-id">
            Workorder
        </p>
        <p id="confirm-cancel-patient-name" name="confirm-cancel-patient-name">
            Patient
        </p>
        <p>
            Are you sure you want to do this?
        </p>
    </div>
{% endblock %}