{% extends "site.html" %}

{% block head %}
    {{ block.super }}
{% endblock %}

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

{% block content %}
<style>
    .form-error {
        color: #d9534f;
        font-size: 0.875em;
        visibility: hidden;
    }

    .input-error {
        border-color: #d9534f !important;
    }
</style>

<script>
    $(function () {
        $(document).tooltip();

        $("button[id^='reprint-manual-prepack-label-']").click(function (event) {
            if ($('#printer-select').val()) {
                $.post("{% url 'mfq:reprint-card-labels' %}", {
                    req_id: $(this).val(),
                    num_labels: 1,
                    printer_id: $('#printer-select').val(),
                    csrfmiddlewaretoken: '{{csrf_token}}'
                });
            } else {
                $('#printer-error').css('visibility', 'visible');
                $('#printer-select').addClass('input-error');
            }
        });

        $('#printer-select').on('change', function (event) {
            $('#printer-error').css('visibility', 'hidden');
            $('#printer-select').removeClass('input-error');
        })
    });
</script>

<div style="display: flex; align-items: center; float: right; flex-direction: column;">
    <select id="printer-select" name="printer-select" style="padding: 8px 12px; height: 40px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 0;">
        <option value="UNKNOWN" id="default_printer_select" disabled selected>-- Select a printer --</option>
        {% for printer in printer_list %}
            <option value="{{ printer.id }}">{{ printer.cups_name }}</option>
        {% endfor %}
    </select>
    <div id="printer-error" class="form-error">Please select a printer</div>
</div>

<form id="userActionForm" name="userActionForm" method="POST">
    {% csrf_token %}
    <table id="user-action-table" class="table table-bordered">
        <thead style="position: sticky; top: 0;">
        <tr class="dosis-report-header">
            {% include 'report-table-header.html' %}
            {% if show_print_button %}
            <th><i class="icon-th-list"></i></th>
            {% endif %}
        </tr>
        </thead>
        <tbody>
            {% for order in report_list %}
                <tr>
                    <td><a href="{% url 'site:search-ord-req-ppk-detail' order.req_id %}">{{order.req_id}}</a></td>
                    <td>{{order.fill_task_complete_dts|date:"m/d/Y h:i:s A"}}</td>
                    <td>{{order.state_dts|date:"m/d/Y h:i:s A"}}</td>
                    <td><a href="{% url 'site:search-main' %}?value={{order.non_dash_drug_number}}">{{order.drug_number}}</a></td>
                    <td>{{order.drug_name}}</td>
                    <td>{{order.original_num_cards}}</td>
                    <td>{{order.num_cards_completed}}</td>
                    <td>{{order.num_cards_accepted}}</td>
                    <td>{{order.num_cards_rejected}}</td>
                    <td>{{order.pills_per_package}}</td>
                    <td>{{order.fill_user}}</td>
                    <td>{{order.validation_user}}</td>
                    {% if show_print_button %}
                    <td><button class="btn btn-small btn-link" type="button" name="reprint-manual-prepack-label-{{order.req_id}}" id="reprint-manual-prepack-label-{{order.req_id}}" value="{{order.req_id}}" title="Reprint Pre-Pack Card Label"><i class="icon-print"></i></button></td>
                    {% endif %}
                </tr>
            {% endfor %}
        </tbody>
    </table>
</form>

{% include 'pagenav.html' %}
{% endblock %}