{% 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>

{% if show_print_button %}
<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>
{% endif %}

<form id="userActionForm" name="userActionForm" method="POST">
    {% csrf_token %}
    {% include 'report-completed-prepacks-rep.html' %}
</form>

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