{% extends "site.html" %}

{% block head %}
    {{ block.super }}
    <style>
        .container-fluid {
            padding-right: 0;
            padding-left: 0;
        }

        .sidebar-left,
        .sidebar-right {
            width: 20%;
            padding-left: 1rem;
            padding-right: 1rem;
            background-color: #f4f4f4;
            box-sizing: border-box;
            border-right: 1px solid #ccc;
            border-left: 1px solid #ccc;
            position: relative;
        }

        .main-content {
            width: 60%;
            padding-left: 1rem;
            padding-right: 1rem;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .pause-container {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        #drug_info div {
            margin: 4px 0;
            font-size: 0.95em;
        }

        #drug_info {
            text-align: left;
            margin-bottom: 20px;
            font-size: 0.95em;
        }

        .sidebar-right h3,
        .sidebar-left h3 {
            position: relative;
            text-align: center;
            margin: 0;
            padding-left: 0;
            padding-right: 0;
        }

        .sidebar-right h3::after,
        .sidebar-left h3::after {
            content: '';
            position: absolute;
            left: -1rem;
            right: -1rem;
            bottom: 0;
            height: 1px;
            background: black;
        }

        .image-container {
            padding-top: 1rem;
            padding-bottom: .5rem;
        }

        .reprint-container {
            text-align: right;
        }

        #btn-accept-job {
            background-color: #28a745;
            color: white;
            border-radius: 8px;
            font-size: 2rem;
            height: 20%;
        }

        #btn-reject-job {
            background-color: #dc3545;
            color: white;
            border-radius: 8px;
            font-size: 2rem;
            height: 20%;
        }

        #header-section {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
        }


        html, body {
            height: 100%;
            margin: 0;
            display: flex;
            flex-direction: column;
        }

        body > .container-fluid {
            display: flex;
            flex: 1 1 auto;
        }

        .container-fluid > .row-fluid {
            display: flex;
            flex: 1 1 auto;
        }

        .workflow-container {
            flex: 1 1 auto;
            display: flex;
            flex-direction: row;
        }

        #card-label-main {
            display: none;
        }

        #card-preview {
            display: none;
        }

        .fill-plan-label {
            min-width: 1.1rem;
            text-align: center;
        }

        #back-message, #front-message {
            color: #555;
            font-style: italic;
        }

        #card-label-main {
            margin-top: 8px;
        }

        #card-label-alt {
            width: 360px;
            height: 200px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            font-family: sans-serif;
            padding: 8px;
            box-sizing: border-box;
            margin-top: 8px
        }

        #barcode-clear {
            margin-bottom: 10px;
        }
    </style>

    <script>
        let inputTimeout;
        let special_key_code = '';
        let log_message = '';

        function toLocalDatetimeInputValue(date) {
            let pad = n => String(n).padStart(2, '0');
            return `${date.getFullYear()}-${pad(date.getMonth()+1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
        }

        function turnYellow(field) {
            field.css('background-color','yellow');
            field.css('color','');
            field.css('font-weight','bold');
        }

        function turnRed(field) {
            field.css('background-color','red');
            field.css('color','white');
            field.css('font-weight','bold');
        }

        function normalField(field) {
            field.css('background-color','');
            field.css('color','');
            field.css('font-weight','');
        }

        function checkExpDateWarning(month, year) {
            if (!month || !year) return false;

            const expdate = new Date(parseInt(year), parseInt(month) - 1, 1);
            const sixMonthsFromNow = new Date();
            sixMonthsFromNow.setMonth(sixMonthsFromNow.getMonth() + 6);
            return expdate > new Date() && expdate < sixMonthsFromNow;
        }

        function checkExpDateExpired(month, year) {
            if (!month || !year) return false;

            const expdate = new Date(parseInt(year), parseInt(month) - 1, 1);
            return expdate <= new Date();
        }

        function checkExp(monthfield, yearfield) {
            if (checkExpDateWarning(monthfield.val(), yearfield.val()) === true) {
                turnYellow(monthfield);
                turnYellow(yearfield);
            } else if (checkExpDateExpired(monthfield.val(), yearfield.val()) === true) {
                turnRed(monthfield);
                turnRed(yearfield);
            } else {
                normalField(monthfield);
                normalField(yearfield);
            }
        }

        function validateSbBarcode(barcode) {
            $.ajax({
                url: "{% url 'site:replen-load-stock-bottle-data' %}",
                type: "POST",
                data: {
                    barcode: barcode,
                    instance_id: $('#instance_id').val(),
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                success: function(data) {
                    const result = data[0];

                    if (result.sbBarcode) {
                        $('#stock_bottle_barcode').val(result.sbBarcode);
                    }

                    if (result.bcMatch === true) {
                        if (result.lot) {
                            $('#stock_bottle_lot').val(result.lot);
                        }

                        if (result.expMonth && result.expYear) {
                            $('#stock_bottle_exp_month').val(result.expMonth);
                            $('#stock_bottle_exp_year').val(result.expYear);
                            checkExp($('#stock_bottle_exp_month'), $('#stock_bottle_exp_year'));
                        }

                        {% if replen_show_day %}
                        if (result.expDay) {
                            $('#stock_bottle_exp_day').val(result.expDay);
                        }
                        {% endif %}

                        if (!result.lot) {
                            $('#stock_bottle_lot').focus();
                        }
                    }
                }
            });
        }


        function validateRejection() {
            let alerts = [];

            let reason = $('#reject-reason-select').val();
            if (reason === 'UJR_MFQ_SNOOZED_REQUEST_OTHER') {
                if ($('#other-reject-reason').val() === '') {
                    alerts.push('Custom Rejection Reason must not be blank');
                }
            }

            let time = $('#pause-time').val();
            if (time === '') {
                alerts.push('Time must not be blank');
            }


            if (alerts.length > 0) {
                let $list = $('#reject-job-alert-list').empty();
                alerts.forEach(msg => $list.append('<li>' + msg + '</li>'));
                $('#reject-job-alert').show();
            } else {
                $('#reject-job-alert-list').empty();
                $('#reject-job-alert').hide();
            }

            return alerts;
        }


        $(function () {
            $("#reject-job-modal").dialog({
                autoOpen: false,
                closeOnEscape: true,
                modal: true,
                draggable: false,
                width: 500,
                open: function (event, ui) {

                },
                position: {my: "center", at: "center", of: window},
                buttons: [
                    {
                        text: "Close",
                        "class": 'modal-dialog-button-right',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });

            $('#btn-begin-manual-fill').on('click', function(){
                let has_prepacker = $('#has-prepacker-toggle').is(':checked') ? 'TRUE' : 'FALSE';
                let printer_tag = $("#printer-select").val();

                $.ajax({
                    url: "{% url 'mfq:begin-mfq-session' %}",
                    method: "POST",
                    data: {
                        csrfmiddlewaretoken: '{{csrf_token}}',
                        has_prepacker: has_prepacker,
                        printer_tag: printer_tag
                    },
                    success: function (response) {
                        location.reload();
                    },
                    error: function (xhr, status, error) {
                        console.log(error);
                    }
                });
            })

            $('#btn-end-manual-fill').on('click', function(){
                $.ajax({
                    url: "{% url 'mfq:end-mfq-session' %}",
                    method: "POST",
                    data: {
                        csrfmiddlewaretoken: '{{csrf_token}}',
                    },
                    success: function (response) {
                        location.reload();
                    },
                    error: function (xhr, status, error) {
                        console.log(error);
                    }
                });
            })

            $('#reject-reason-select').on('change', function(){
                validateRejection()

                if ($(this).val() === 'UJR_MFQ_SNOOZED_REQUEST_OTHER') {
                    $('#reject-other-container').css('display', 'inline-block');
                } else {
                    $('#reject-other-container').css('display', 'none');
                }
            })

            $('#pause-time').on('change', function(){
                validateRejection()
            })

            $('#other-reject-reason').on('keyup', function(){
                validateRejection()
            })


            $('#btn-reject-job').on('click', function(){
                $('#reject-job-modal').dialog('option', 'buttons', {
                    "Close": {
                        class: 'modal-dialog-button-float-left',
                        text: 'Close',
                        click: function() {
                            $(this).dialog("close");
                        }
                    },
                    "Confirm": {
                        class: 'modal-dialog-button-float-right',
                        text: 'Reject Job',
                        click: function() {
                            // final validation check before submission
                            let alerts = validateRejection();
                            if (alerts.length === 0) {
                                let rejection = $('#reject-reason-select').val();
                                let snooze_time = $('#pause-time').val();
                                let other_reason = $('#other-reject-reason').val();

                                $.ajax({
                                    url: "{% url 'mfq:reject-mfq-job' %}",
                                    method: "POST",
                                    data: {
                                        csrfmiddlewaretoken: '{{csrf_token}}',
                                        rejection: rejection,
                                        snooze_time: snooze_time,
                                        other_reason: other_reason,
                                    },
                                    success: function (response) {
                                        location.reload();
                                    },
                                    error: function (xhr, status, error) {
                                        console.log(error);
                                    }
                                });
                            }
                        }
                    }
                });

                let now = new Date();
                let min = new Date(now.getTime() + 60 * 60 * 1000);
                let max = new Date(now.getTime() + 5 * 24 * 60 * 60 * 1000);

                $('#pause-time').attr('min', toLocalDatetimeInputValue(min));
                $('#pause-time').attr('max', toLocalDatetimeInputValue(max));

                $('#reject-job-modal').dialog("open");
            })

            $('#pause-time').on('click', function(){
                $('#pause-time')[0].showPicker();
            })

            $('#btn-accept-job').on('click', function(){
                $.ajax({
                    url: "{% url 'mfq:accept-mfq-job' %}",
                    method: "POST",
                    data: {
                        csrfmiddlewaretoken: '{{csrf_token}}',
                    },
                    success: function (response) {
                        // TODO: change into non reload function
                        location.reload();
                    },
                    error: function (xhr, status, error) {
                        console.log(error);
                    }
                });
            })

            $('#stock_bottle_barcode').on('keyup', function (e) {
                let input_box = $(this);
                let input_text = $(this).val();

                log_message = log_message + ' || ' + e.key + ' up';

                if (e.key === 'Alt') {
                    // logger.debug('Alt keyup: ' + special_key_code)
                    if (special_key_code.indexOf('29') > -1){
                        input_text += String.fromCharCode(29);
                        input_box.val(input_text);
                    }
                    special_key_code = '';
                }

                if (e.key === 'Control') {
                    // logger.debug('Control keyup: ' + special_key_code)
                    if (special_key_code.indexOf(']') > -1){
                        input_text += String.fromCharCode(29);
                        input_box.val(input_text);
                    }
                    special_key_code = '';
                }

                if (e.key === 'F8') {
                    input_text += String.fromCharCode(29);
                    input_box.val(input_text);
                }
            })


            $('#stock_bottle_barcode').on('keydown', function (e) {
                if (log_message === ''){
                    log_message = e.key;
                } else {
                    log_message = log_message + ' || ' + e.key;
                }

                clearTimeout(inputTimeout);
                let input_box = $(this);
                let input_text = $(this).val();

                if (e.altKey) {
                    if (e.key !== 'Alt'){
                        special_key_code += e.key;
                    }
                }

                if (e.ctrlKey){
                    if (e.key !== 'Control') {
                        special_key_code += e.key;
                    }
                }

                if (special_key_code.length > 5) {
                //     logger.debug('Alt keyup alt_code > 5: ' + alt_code)
                }

                inputTimeout = setTimeout(function() {
                    if (input_text.length > 30) {
                        // logger.debug('Keydown + Keyups: ' + log_message);
                        log_message = '';
                        input_box.blur();
                        return false;
                    }
                }, 250);

                if (e.which === 13) { //Enter key's keycode
                    //blur to trigger change event
                    $(this).blur();
                    return false;
                }
            });

            $('#stock_bottle_barcode').change(function (event) {
                validateSbBarcode($(this).val())
            });

            let replenalert = $("#replen-validation-alert");
            let stock_bottle_validator = $("#stock-bottle-form").validate({
                onkeyup: false,
                errorContainer: replenalert,
                errorLabelContainer: $("ul", replenalert),
                wrapper: 'li'
            });

            $('#stock_bottle_barcode').rules('add', {
                required: true,
                remote: {
                    url: "{% url 'site:replen-check-stock-bottle' %}",
                    type: "post",
                    data: {
                        instance_id: function () {
                            return $("#instance_id").val();
                        },
                        'csrfmiddlewaretoken': '{{csrf_token}}'
                    }
                },
                messages: {
                    required: "Stock Bottle Barcode cannot be blank.",
                    remote: jQuery.validator.format("{0} is not a valid barcode for this drug.")
                }
            });

            $('#stock_bottle_lot').rules('add', {
                required: true,
                messages: {
                    required: "Lot Number cannot be blank."
                }
            });

            {% if replen_show_day %}
            $('#stock_bottle_exp_day').rules('add', {
                required: true,
                digits: true,
                range: [1, 31],
                messages: {
                    required: "Expiration Date Day cannot be blank.",
                    digits: "Expiration Date Day must be numeric.",
                    range: "Expiration Date Day must be between 1 and 31"
                }
            });

            $('#stock_bottle_exp_day').keyup(function (event) {
                if (this.value.length === this.maxLength) {
                    {% if replen_show_day_format == 'DD-MM-YYYY' %}
                        $('#stock_bottle_exp_month').focus();
                    {% elif replen_show_day_format == 'MM-DD-YYYY' %}
                        $('#stock_bottle_exp_year').focus();
                    {% endif %}
                    return false;
                }
                if (event.which == 109 || event.which == 173 || event.which == 191 || event.which == 220 || event.which == 111) {  //-,/,\
                    {% if replen_show_day_format == 'DD-MM-YYYY' %}
                        $('#stock_bottle_exp_month').focus();
                    {% elif replen_show_day_format == 'MM-DD-YYYY' %}
                        $('#stock_bottle_exp_year').focus();
                    {% endif %}
                    return false;
                }
            });
            {% endif %}

            $('#stock_bottle_exp_month').rules('add', {
                required: true,
                digits: true,
                range: [1, 12],
                messages: {
                    required: "Expiration Date Month cannot be blank.",
                    digits: "Expiration Date Month must be numeric.",
                    range: "Expiration Date Month must be between 1 and 12"
                }
            });

            $('#stock_bottle_exp_month').keyup(function (event) {
                if (this.value.length === this.maxLength) {
                    {% if replen_show_day_format == 'DD-MM-YYYY' %}
                        $('#stock_bottle_exp_year').focus();
                    {% elif replen_show_day_format == 'MM-DD-YYYY' %}
                        $('#stock_bottle_exp_day').focus();
                    {% elif replen_show_day_format == 'YYYY-MM-DD' %}
                        $('#stock_bottle_exp_day').focus();
                    {% endif %}
                    return false;
                }
                if (event.which == 109 || event.which == 173 || event.which == 191 || event.which == 220 || event.which == 111) {  //-,/,\
                    {% if replen_show_day_format == 'DD-MM-YYYY' %}
                        $('#stock_bottle_exp_year').focus();
                    {% elif replen_show_day_format == 'MM-DD-YYYY' %}
                        $('#stock_bottle_exp_day').focus();
                    {% elif replen_show_day_format == 'YYYY-MM-DD' %}
                        $('#stock_bottle_exp_day').focus();
                    {% endif %}
                    return false;
                }
            });

            $('#stock_bottle_exp_month').blur(function (event) {
                checkExp($('#stock_bottle_exp_month'), $('#stock_bottle_exp_year'));
            });

            $('#stock_bottle_exp_year').rules('add', {
                required: true,
                digits: true,
                min: 2000,
                messages: {
                    required: "Expiration Date Year cannot be blank.",
                    digits: "Expiration Date Year must be numeric.",
                    min: "Expiration Date Year must be larger than 2000."
                }
            });

            {% if replen_show_day_format == 'YYYY-MM-DD' %}
                $('#stock_bottle_exp_year').keyup(function (event) {
                    if (this.value.length === this.maxLength) {
                        $('#stock_bottle_exp_month').focus();
                        return false;
                    }
                    if (event.which == 109 || event.which == 173 || event.which == 191 || event.which == 220 || event.which == 111) {  //-,/,\
                        $('#stock_bottle_exp_month').focus();
                        return false;
                    }
                });
            {% endif %}

            $('#stock_bottle_exp_year').blur(function (event) {
                checkExp($('#stock_bottle_exp_month'), $('#stock_bottle_exp_year'));
            });

            $('#stock-bottle-form').on('submit', function(e) {
                e.preventDefault();
                let formData = $(this).serialize();

                if ($('#replen-validation-alert-list').children().length === 0) {
                    $.ajax({
                        url: "{% url 'mfq:scan-stock-bottle' %}",
                        type: 'POST',
                        data: formData,
                        success: function(response) {
                            location.reload();
                        },
                        error: function(xhr, status, error) {
                            console.log(error)
                        }
                    });
                }
            });

            $('#submit-cards-form').on('submit', function(e) {
                e.preventDefault();
                let formData = $(this).serialize();

                $.ajax({
                    url: "{% url 'mfq:finish-mfq-job' %}",
                    type: 'POST',
                    data: formData,
                    success: function(response) {
                        location.reload();
                    },
                    error: function(xhr, status, error) {
                        console.log(error)
                    }
                });
            });

            $('#btn-reprint-job-ticket').on('click', function(e) {
                e.preventDefault();
                let req_id = $(this).val()

                $.ajax({
                    url: "{% url 'mfq:reprint-job-ticket' %}",
                    type: 'POST',
                    data: {
                        req_id: req_id,
                        'csrfmiddlewaretoken': '{{csrf_token}}'
                    },
                    success: function(response) {
                        console.log('success')
                    },
                    error: function(xhr, status, error) {
                        console.log(error)
                    }
                });
            })

            $('#printer-change').on('change', function() {
                let new_printer_tag = $(this).val();

                $.ajax({
                    url: "{% url 'mfq:change-active-printer' %}",
                    type: 'POST',
                    data: {
                        new_printer_tag: new_printer_tag,
                        'csrfmiddlewaretoken': '{{csrf_token}}'
                    },
                    success: function(response) {
                        console.log('success')
                    },
                    error: function(xhr, status, error) {
                        console.log(error)
                    }
                });
            })

            if ($('#stock_bottle_barcode').length) {
                $('#stock_bottle_barcode').focus();
            }

            $('.switch-view').on('click', function () {
                let parent = $(this).closest('div');
                if (parent.attr('id') === 'front-message') {
                    $('#back-message').css('display', 'inline');
                    $('#front-message').css('display', 'none');
                    $('#reversed-card-preview').css('display', 'inline');
                    $('#card-preview').css('display', 'none');
                    // $('#card-label-side').show();
                    $('#card-label-main').css('display', 'none');
                    $('#card-label-alt').css('display', 'flex');
                } else if (parent.attr('id') === 'back-message') {
                    $('#back-message').css('display', 'none');
                    $('#front-message').css('display', 'inline');
                    $('#reversed-card-preview').css('display', 'none');
                    $('#card-preview').css('display', 'inline');
                    // $('#card-label-side').hide();
                    $('#card-label-main').css('display', 'inline');
                    $('#card-label-alt').css('display', 'none');
                }
            });

            $('#barcode-clear').on('click', function () {
                stock_bottle_validator.resetForm();
                $('#stock_bottle_barcode').focus();
            })
        });
    </script>
{% endblock %}

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

{% block content %}
<div class="workflow-container">
    <div class="sidebar-left">
        {% if not engaged %}
        <div>
            <label for="printer-select" style="display: inline-block;">Select a Printer:</label>
            <select  name="printer-select" id="printer-select" style="width: auto; height: 40px; margin-bottom: 0px;">
                {% if active_printer.id == 0 %}
                    <option value="UNKNOWN" id="default_printer_select" disabled selected>-- Select a printer --</option>
                {% endif %}
                {% for printer in printer_list %}
                    <option value="{{ printer.tag }}">{{ printer.cups_name }}</option>
                {% endfor %}
            </select>
        </div>
        <div>
            <label>
                setting HAS_PREPACKER:
                <input type="checkbox" id="has-prepacker-toggle">
            </label>
        </div>
        <div>
            <button id="btn-begin-manual-fill" type="button">Begin Manual PrePack Work</button>
        </div>
        {% else %}
            <h3>User Info</h3>

            <div>
                <label for="printer-change" style="display: inline-block;"><strong>Active Printer:</strong></label>
                <select  name="printer-change" id="printer-change" style="width: auto; height: 40px; margin-bottom: 0px;">
                    {% for printer in printer_list %}
                        <option value="{{ printer.tag }}" {% if printer.id == active_printer.id %}selected{% endif%}>{{ printer.cups_name }}</option>
                    {% endfor %}
                </select>
            </div>

            <div><strong>Is using PrePacker:</strong> {{ has_prepacker }}</div>

            <button id="btn-end-manual-fill">End Manual Fill Session</button>

            {% if offered_job != 0 %}
                <h3>Current Offered Job</h3>
                <div>Request ID: <a href="{% url 'site:search-ord-req-ppk-detail' offered_job %}" target="_blank">{{offered_job}}</a></div>
            {% elif active_job != 0 %}
                <h3>Current Active Job</h3>
                <div>Request ID: <a href="{% url 'site:search-ord-req-ppk-detail' active_job %}" target="_blank">{{active_job}}</a></div>
            {% endif %}

            {% if job_info %}
                <div id="job_info">
                    <div>Number of Cards: {{job_info.num_cards}}</div>
                    <div>Quantity Per Dose: {{job_info.quantity_per_dose}}</div>
                    <div>Blister Per Card: {{job_info.dosis_per_pkg}}</div>
                    <div>Total Pills Needed: {{job_info.request_quantity}}</div>
                    {% if job_info.is_half_tab %}
                        <div>Half Tabs: {{job_info.is_half_tab}}</div>
                    {% endif %}
                </div>
            {% endif %}

            {% if needs_stock_info %}
                <h3>Scan Stock Bottle Info</h3>
                <form class="stock-bottle-form" id="stock-bottle-form">
                    <fieldset>
                         <div class="alert alert-error" id="replen-validation-alert" style="display: none;">
                            <button type="button" class="close" data-dismiss="alert">&times;</button>
                            <ul id="replen-validation-alert-list">
                            </ul>
                        </div>

                        <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
                        <input type="hidden" id="instance_id" name="instance_id" value="{{instance.id}}">

                        <label for="stock_bottle_barcode">Barcode:</label>
                        <div>
                            <input type="text" name="stock_bottle_barcode" id="stock_bottle_barcode" maxlength="70" style="width: 15em;" aria-required="true">
                            <button id="barcode-clear" type="reset">Clear</button>
                        </div>

                        <label for="stock_bottle_lot">Lot:</label>
                        <input type="text" name="stock_bottle_lot" id="stock_bottle_lot" maxlength="15" style="width: 10em;" aria-required="true">

                        <div style="margin-top: 1em;">
                            <strong>Expiration Date:</strong><br>

                            {% if replen_show_day %}
                                {% if replen_show_day_format == 'DD-MM-YYYY' %}
                                    <input type="text" name="stock_bottle_exp_day" id="stock_bottle_exp_day" maxlength="2" placeholder="DD" style="width: 2em; margin-right: 0.5em;" aria-required="true">
                                    <input type="text" name="stock_bottle_exp_month" id="stock_bottle_exp_month" maxlength="2" placeholder="MM" style="width: 2em; margin-right: 0.5em;" aria-required="true">
                                    <input type="text" name="stock_bottle_exp_year" id="stock_bottle_exp_year" maxlength="4" placeholder="YYYY" style="width: 4em;" aria-required="true">
                                {% elif replen_show_day_format == 'MM-DD-YYYY' %}
                                    <input type="text" name="stock_bottle_exp_month" id="stock_bottle_exp_month" maxlength="2" placeholder="MM" style="width: 2em; margin-right: 0.5em;" aria-required="true">
                                    <input type="text" name="stock_bottle_exp_day" id="stock_bottle_exp_day" maxlength="2" placeholder="DD" style="width: 2em; margin-right: 0.5em;" aria-required="true">
                                    <input type="text" name="stock_bottle_exp_year" id="stock_bottle_exp_year" maxlength="4" placeholder="YYYY" style="width: 4em;" aria-required="true">
                                {% elif replen_show_day_format == 'YYYY-MM-DD' %}
                                    <input type="text" name="stock_bottle_exp_year" id="stock_bottle_exp_year" maxlength="4" placeholder="YYYY" style="width: 4em; margin-right: 0.5em;" aria-required="true">
                                    <input type="text" name="stock_bottle_exp_month" id="stock_bottle_exp_month" maxlength="2" placeholder="MM" style="width: 2em; margin-right: 0.5em;" aria-required="true">
                                    <input type="text" name="stock_bottle_exp_day" id="stock_bottle_exp_day" maxlength="2" placeholder="DD" style="width: 2em;" aria-required="true">
                                {% endif %}
                            {% else %}
                                <input type="text" name="stock_bottle_exp_month" id="stock_bottle_exp_month" maxlength="2" placeholder="MM" style="width: 2em; margin-right: 0.5em;" aria-required="true">
                                <input type="text" name="stock_bottle_exp_year" id="stock_bottle_exp_year" maxlength="4" placeholder="YYYY" style="width: 4em;" aria-required="true">
                            {% endif %}

                            <label for="num_cards">Number of Cards being Filled:</label>
                            <input type="number" name="num_cards" id="num_cards" min="1" max="{{num_cards}}" value="{{num_cards}}" placeholder="{{num_cards}}" style="width: 10em;" aria-required="true">

                            <div>
                                <label for="override_labels" style="display:inline;">Print Labels?</label>
                                <input type="checkbox" name="override_labels" id="override_labels" style="display:inline;" {% if not has_prepacker or prepacker_print_labels %}checked{% endif %}>
                            </div>
                        </div>

                        <div style="margin-top: 1.5em;">
                            <button type="submit">Submit</button>
                        </div>
                    </fieldset>
                </form>
            {% endif %}

            {% if stock_info %}
                <h3>Stock Info</h3>
                <div id="stock_info">
                    <div>Barcode: {{stock_info.barcode}}</div>
                    <div>Lot: {{stock_info.lot}}</div>
                    <div>Lot Expiration: {{stock_info.lot_expiration}}</div>
                    <div>Pills Per Bottle: {{stock_info.quantity}}</div>
                </div>
            {% endif %}
        {% endif %}
    </div>

    <div class="main-content">
        {% if not engaged %}
        <h2>User not Currently Working in Manual Prepack Zone.</h2>
        <h3>Please Select Printer and if a PrePacker is being used and Press Engage</h3>
        {% elif no_work %}
        <h2>No Manual Prepack Work Pending at this Time.</h2>
        {% else %}
            {% if blister_layout %}
                <div id="header-section">
                    {% if not has_active_job %}
                        <button id="btn-reject-job" type="button">Reject</button>
                    {% endif %}
                    <table id="card-label-main" style="width: 360px; height: 200px;">
                        <tr>
                            <td>
                                <img style="border: 1px solid black;" src="{% url 'site:load-label-preview-image' wo_id %}" alt="Label Preview Image"/>
                            </td>
                        </tr>
                    </table>
                    <div id="card-label-alt">
                        <div style="font-size: 20px; font-weight: bold; margin-bottom: 4px;">
                            {{drug_info.drug_name}}
                        </div>
                        <div style="font-size: 15px; margin-bottom: 8px;">
                            <a href="{% url 'site:search-main' %}?value={{drug_info.non_dash_drug_number}}" style="color: #007bff; text-decoration: none;">
                                {{drug_info.drug_number}}
                            </a>
                        </div>
                    </div>
                    {% if not has_active_job %}
                        <button id="btn-accept-job" type="button">Accept</button>
                    {% endif %}
                </div>

                <div id="front-back-container">
                    <div id="back-message">Viewing back of card, <span class="switch-view" style="cursor: pointer; color: blue; text-decoration: underline;">click to flip card.</span></div>
                    <div id="front-message" style="display: none;">Viewing front of card, <span class="switch-view" style="cursor: pointer; color: blue; text-decoration: underline;">click to flip card.</span></div>
                </div>

                <div id="reversed-card-preview" title="Card Preview">
                    <div style="background-color: white;">
                        <table class="table" style="border-collapse: separate; border-spacing: 4px 20px; margin-bottom: 0px;">
                            {% for blister in reversed_blister_layout %}
                                {% if forloop.counter0 == 0 or forloop.counter0|divisibleby:"4" %}
                                    <tr>
                                {% endif %}
                            {% if blister.cup_label == 0 %}
                                <td style="border: none;">&nbsp;</td>
                                <td style="border: none;">&nbsp;</td>
                            {% else %}
                                <td class="fill-plan-label-td"><span class="label label-inverse fill-plan-label">{{ blister.cup_label }}</span></td>
                                <td class="fill-plan-bubble">
                                    <table class="fill-plan-pill-table">
                                        <tr>
                                            <td class="fill-plan-pill-table-td"
                                                id="reversed-row{{ blister.row_number }}-{{ blister.column_number }}-pill">{% if blister.pill_qty > 0 %}
                                                {% with ''|center:blister.pill_qty as range %}{% for pill in range %}<span class="badge badge-info">&nbsp;</span>{% if forloop.counter0 == 0 %}&nbsp;{% endif %}{% endfor %}{% endwith %}{% else %}&nbsp;{% endif %}</td>
                                        </tr>
                                    </table>
                                </td>
                            {% endif %}
                            {% if forloop.counter == 4 or forloop.counter|divisibleby:"4" %}
                                </tr>
                            {% endif %}
                            {% endfor %}
                        </table>
                    </div>
                </div>

                <div id="card-preview" title="Card Preview">
                    <div style="background-color: white;">
                        <table class="table" style="border-collapse: separate; border-spacing: 4px 20px; margin-bottom: 0px;">
                            {% for blister in blister_layout %}
                                {% if forloop.counter0 == 0 or forloop.counter0|divisibleby:"4" %}
                                    <tr>
                                {% endif %}
                            {% if blister.cup_label == 0 %}
                                <td style="border: none;">&nbsp;</td>
                                <td style="border: none;">&nbsp;</td>
                            {% else %}
                                <td class="fill-plan-label-td"><span class="label label-inverse fill-plan-label">{{ blister.cup_label }}</span></td>
                                <td class="fill-plan-bubble">
                                    <table class="fill-plan-pill-table">
                                        <tr>
                                            <td class="fill-plan-pill-table-td"
                                                id="row{{ blister.row_number }}-{{ blister.column_number }}-pill">{% if blister.pill_qty > 0 %}
                                                {% with ''|center:blister.pill_qty as range %}{% for pill in range %}<span class="badge badge-info">&nbsp;</span>{% if forloop.counter0 == 0 %}&nbsp;{% endif %}{% endfor %}{% endwith %}{% else %}&nbsp;{% endif %}</td>
                                        </tr>
                                    </table>
                                </td>
                            {% endif %}
                            {% if forloop.counter == 4 or forloop.counter|divisibleby:"4" %}
                                </tr>
                            {% endif %}
                            {% endfor %}
                        </table>
                    </div>
                </div>
            {% endif %}
        {% endif %}
    </div>

    <div class="sidebar-right">
        {% if job_ticket_id != 0 %}
            <h3>Job Ticket</h3>
            <div class="image-container"><img style="border: 1px solid black;" src="{% url 'site:load-label-preview-image' job_ticket_id %}" alt="Label Preview Image"/></div>
            <div class="reprint-container">
                <button id="btn-reprint-job-ticket" value="{%if offered_job != 0%}{{offered_job}}{%elif active_job != 0%}{{active_job}}{%endif%}" type="button">Reprint Label</button>
            </div>

            <div id="card-label-side" class="image-container"><img style="border: 1px solid black;" src="{% url 'site:load-label-preview-image' wo_id %}" alt="Label Preview Image"/></div>
        {% endif %}


        {% if drug_info %}
            <h3>Drug Info</h3>
            <div id="drug_info">
                <div><span><strong>Drug Name:</strong> {{drug_info.drug_name}}</span></div>
                <div><strong>Drug Number: </strong><a href="{% url 'site:search-main' %}?value={{drug_info.non_dash_drug_number}}">{{drug_info.drug_number}}</a></div>
                <div>Shape: {{drug_info.shape}}</div>
                <div>Color: {{drug_info.color}}</div>
                <div>Imprint Front: {{drug_info.imprint_front}}</div>
                <div>Imprint Back: {{drug_info.imprint_back}}</div>
                {% if drug_info.usp_800|upper == 'TRUE' %}
                    <div>Hazardous Drug: {{drug_info.usp_800}}</div>
                {% endif %}
            </div>
        {% endif %}

        {% if has_prepacker %}
            <h3>Plate Info</h3>
            <div id="plate-info">
                <div><strong>Plate Number: </strong>{{drug_info.plate_number}}</div>
                <div><strong>Plate Option: </strong>{{drug_info.plate_option}}</div>
            </div>
        {% endif %}

        {% if expected_num_cards > 0 %}
            <h3>Submit Cards as Complete</h3>
            <form class="submit-cards-form" id="submit-cards-form">
                <fieldset>
                     <div class="alert alert-error" id="submit-cards-alert" style="display: none;">
                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                        <ul id="submit-cards-alert-list">
                        </ul>
                    </div>

                    <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">

                    <label for="num_cards_filled">Number of Cards Filled:</label>
                    <input type="number" name="num_cards_filled" id="num_cards_filled" min="0" max="{{expected_num_cards}}" placeholder="{{expected_num_cards}}" required style="width: 15em;" aria-required="true">

                    <div style="margin-top: 1.5em;">
                        <button type="submit">Submit</button>
                    </div>
                </fieldset>
            </form>
        {% endif %}
    </div>
</div>

<div id="reject-job-modal" title="Reject Job?" style="margin-left: 2px; display:none;">
    <div class="alert alert-error" id="reject-job-alert" style="display: none;">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <ul id="reject-job-alert-list"></ul>
    </div>
    <div>
        <label for="reject-reason-select" style="display: inline-block;">Rejection Reason:</label>
        <select  name="reject-reason-select" id="reject-reason-select" style="width: auto; height: 40px; margin-bottom: 0px;">
            {% if active_printer.id == 0 %}
                <option value="UNKNOWN" id="reject-unknown" disabled selected>-- Select a Rejection Reason --</option>
            {% endif %}
            {% for rejection in rejection_options_list %}
                <option value="{{ rejection.tag }}">{{ rejection.display_name }}</option>
            {% endfor %}
        </select>

        <div class="pause-container">
            <label for="pause-time">Snooze Until:</label>
            <input type="datetime-local" id="pause-time">
        </div>

        <div id="reject-other-container" style="display: none;">
            <label for="other-reject-reason">Custom Rejection Reason</label>
            <input type="text" id="other-reject-reason" placeholder="Other"/>
        </div>
    </div>

</div>
{% endblock %}