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

        #plate-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;
        }

        /* Layout */
        .form-grid { display:grid; gap:1rem; }
        .form-row { display:grid; grid-template-columns: 180px 1fr; align-items:center; gap:.75rem; }
        .inline-group { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
        .at { opacity:.7; }

        /* Controls */
        #reject-job-modal select,
        #reject-job-modal input[type="text"] {
            width: 100%;
            max-width: 420px;
            height: 40px;
            padding: 0 .6rem;
            border: 1px solid #c9c9c9;
            border-radius: 6px;
            box-sizing: border-box;
        }

        /* Small screens: stack */
        @media (max-width: 520px) {
            .form-row { grid-template-columns: 1fr; }
            #reject-job-modal select,
            #reject-job-modal input[type="text"] { max-width: 100%; }
        }

        /* Optional: message */
        #reject-job-alert { margin-bottom: .75rem; }
        .muted { margin: 0 0 1rem; opacity:.8; text-align: center;}

        .form-row-date {
            display: grid;
            grid-template-columns: 1fr 1fr; /* date, 'At:', time */
            gap: 0.5rem;
            align-items: center;
        }

        .form-row-date label {
            grid-column: 1 / -1; /* label spans full width */
        }

        .form-row-date input,
        .form-row-date select {
            height: 40px;
            padding: 0 .6rem;
            border: 1px solid #c9c9c9;
            border-radius: 6px;
        }

        #error_message {
            background-color: lightcoral;
            padding-right: 3rem;
            padding-left: 3rem;
            border-radius: 8px;
            border: 2px solid indianred;
            display: none;
        }
    </style>

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

        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 (result.expMonth && result.expYear && result.lot) {
                            is_manually_entered = 'FALSE';
                        }

                        {% 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 === 'UNKNOWN' || reason === null) {
                alerts.push('Snooze Reason must be Selected');
            }

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

            let time = $('#pause-datepicker').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 quick_job = $('#quick-job-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,
                        quick_job: quick_job
                    },
                    success: function (response) {
                        let return_message = response.return_message;
                        if (return_message !== '') {
                            $('#error_message').text(return_message);
                            $('#error_message').css('display', 'inline');
                        } else {
                            $('#error_message').css('display', 'none');
                            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', 'flex');
                } else {
                    $('#reject-other-container').css('display', 'none');
                }
            })

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

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

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


            $('#btn-reject-job, #snooze-at-stock').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: 'Snooze Job',
                        click: function() {
                            // final validation check before submission
                            let alerts = validateRejection();
                            if (alerts.length === 0) {
                                let rejection = $('#reject-reason-select').val();
                                let snooze_date = $('#pause-datepicker').val();
                                let snooze_time = $('#pause-timepicker').val();
                                let other_reason = $('#other-reject-reason').val();

                                if (snooze_date && snooze_time) {
                                    let [month, day, year] = snooze_date.split('/');
                                    let time_map = {
                                        "8AM": "08:00",
                                        "NOON": "12:00",
                                        "3PM": "15:00",
                                        "6PM": "18:00"
                                    };
                                    let time = time_map[snooze_time];

                                    // Format date as YYYY-MM-DD
                                    let formatted_date = `${year}-${month}-${day}`;

                                    // Combine formatted date and time
                                    snooze_time = `${formatted_date}T${time}`;

                                    $.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);
                                        }
                                    });
                                }
                            }
                        }
                    }
                });
                $('#reject-job-modal').dialog("open");
            })

            $('#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).serializeArray();
                formData.push({ name: 'is_manually_entered', value: is_manually_entered });
                if ($("#stock-bottle-form").valid()) {
                    $.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();

                // Remove any old hidden input
                $('#split-for-log-change-hidden').remove();

                $(this).append(
                    $('<input>', {
                        type: 'hidden',
                        id: 'split-for-log-change-hidden',
                        name: 'split-for-log-change',
                        value: $('#split-for-log-change').is(':checked') ? 'TRUE' : 'FALSE'
                    })
                );

                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)
                    }
                });
            })

            $('#btn-reprint-card-labels').on('click', function(e) {
                let num_labels = parseInt($('#card-reprint-amount').val(), 10);
                let max_labels = parseInt($('#card-reprint-amount').attr('max'), 10);
                let alerts = [];

                if (isNaN(num_labels) || num_labels <= 0 || num_labels > max_labels) {
                    alerts.push(`Please enter a number between 1 and ${max_labels}.`);
                }

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

                e.preventDefault();
                let req_id = $(this).val();

                $.ajax({
                    url: "{% url 'mfq:reprint-card-labels' %}",
                    type: 'POST',
                    data: {
                        req_id: req_id,
                        num_labels: num_labels,
                        'csrfmiddlewaretoken': '{{csrf_token}}'
                    },
                    success: function(response) {
                        $('#card-reprint-amount').val('');
                        $('#reprint-card-labels-success').show();

                        setTimeout(() => {
                            $('#reprint-card-labels-success').fadeOut(400);
                        }, 3000);
                    },
                    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();
                $('#replen-validation-alert-list').empty();
                $('#stock_bottle_barcode').focus();
            })

            $("#pause-datepicker").keydown(function(event) {event.preventDefault();});
            const today = new Date();
            const lastDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);
            const daysRemaining = (lastDayOfMonth - today) / (1000 * 60 * 60 * 24);
            const numberOfMonths = daysRemaining < 7 ? 2 : 1;

            $("#pause-datepicker").datepicker({
                changeMonth: false,
                showButtonPanel: true,
                numberOfMonths: numberOfMonths,
                minDate: 1,
                maxDate: 6,
            });

            $('#num_bottles').on('input change', function() {
                const stock_bottle_quantity = Number('{{job_info.stock_bottle_quantity}}');
                const dosis_per_pkg = Number('{{job_info.dosis_per_pkg}}');
                const quantity_per_dose = Number('{{job_info.quantity_per_dose}}');

                let num_bottles = Number(this.value);

                if (num_bottles > 0 && Number.isInteger(num_bottles)) {
                    let pills_per_card = dosis_per_pkg * quantity_per_dose;
                    let num_cards = Math.floor((stock_bottle_quantity * num_bottles) / pills_per_card);
                    $('#calc_num_cards').text(num_cards);
                } else {
                    $('#calc_num_cards').text('—');
                }
            });

            $('#stock_bottle_lot, #stock_bottle_exp_year, #stock_bottle_exp_month, #stock_bottle_exp_day').on('input change', function(e) {
                // originalEvent is making sure it is from user source and not .val() trigger
                if (e.originalEvent) {
                    is_manually_entered = 'TRUE'
                }
            })
        });
    </script>
{% endblock %}

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

{% block content %}
<div class="workflow-container">
    <div class="sidebar-left">
        {% if not engaged %}
            <div></div>
        {% else %}

        <h3 style="margin-bottom: 15px;">User Info</h3>

        <div style="display: flex; align-items: center; margin-bottom: 10px;">
            <label for="printer-change" style="margin-right: 10px; font-weight: bold;">Active Printer:</label>
            <select name="printer-change" id="printer-change" style="padding: 5px 10px; height: 38px;">
                {% for printer in printer_list %}
                    <option value="{{ printer.tag }}" {% if printer.id == active_printer.id %}selected{% endif %}>{{ printer.cups_name }}</option>
                {% endfor %}
            </select>
        </div>

        {% if show_using_prepacker %}
        <div style="margin-bottom: 15px;">
            <strong>Is using Pre-Packer: </strong>
            <span>
                {{ has_prepacker }}
            </span>
        </div>
        {% endif %}

        <div style="text-align: right; margin-bottom: 15px;">
            <button id="btn-end-manual-fill">
                End Manual Fill Session
            </button>
        </div>

            {% 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>
                    <div>Stock Bottles Needed: {{job_info.bottles_needed}}</div>
                    {% if job_info.is_half_tab %}
                        <div>Half Tabs: {{job_info.is_half_tab}}</div>
                    {% endif %}
                    {% if needs_stock_info %}
                    <div>
                        <input type="number" name="num_bottles" id="num_bottles" min="1" step="1" inputmode="numeric" style="width: 5em; margin-top: 10px;">
                        <span aria-hidden="true"> × </span>
                        <span><b>{{job_info.stock_bottle_quantity}}</b> pills/bottle = <output id="calc_num_cards">0</output> cards</span>
                    </div>
                    {% endif %}
                </div>
            {% endif %}

            {% if drug_info and expected_num_cards > 0 %}
                <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}}" target="_blank">{{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 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;">
                            <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" autocomplete="off">
                            <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" autocomplete="off" value="{{stock_info.lot}}">

                        <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" autocomplete="off">
                                    <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" autocomplete="off">
                                    <input type="text" name="stock_bottle_exp_year" id="stock_bottle_exp_year" maxlength="4" placeholder="YYYY" style="width: 4em;" aria-required="true" autocomplete="off">
                                {% 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" autocomplete="off">
                                    <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" autocomplete="off">
                                    <input type="text" name="stock_bottle_exp_year" id="stock_bottle_exp_year" maxlength="4" placeholder="YYYY" style="width: 4em;" aria-required="true" autocomplete="off">
                                {% 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" autocomplete="off">
                                    <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" autocomplete="off">
                                    <input type="text" name="stock_bottle_exp_day" id="stock_bottle_exp_day" maxlength="2" placeholder="DD" style="width: 2em;" aria-required="true" autocomplete="off">
                                {% 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" autocomplete="off">
                                <input type="text" name="stock_bottle_exp_year" id="stock_bottle_exp_year" maxlength="4" placeholder="YYYY" style="width: 4em;" aria-required="true" autocomplete="off">
                            {% endif %}

                            <label for="num_cards">Number of Cards being Filled:</label>
                            <input type="number" name="num_cards" id="num_cards" min="1" max="{{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="display: flex; justify-content: space-between;">
                            <div style="margin-top: 1.5em;">
                                <button type="button" id="snooze-at-stock">Snooze</button>
                            </div>
                            <div style="margin-top: 1.5em;">
                                <button type="submit">Submit</button>
                            </div>
                        </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 %}
        <h3 id="error_message">&nbsp;</h3>
        <h2>User not Currently Working in Manual Pre-Pack Zone.</h2>
        {% if show_using_prepacker %}
        <h3>Please Select Printer and if a Pre-Packer is being used and Press Begin</h3>
        {% else %}
        <h3>Please Select Printer and Press Begin</h3>
        {% endif %}

        <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 20px;">
            <label for="printer-select" style="font-weight: 500;">Select a Printer:</label>
            <select id="printer-select" name="printer-select" style="padding: 8px 12px; height: 40px; border: 1px solid #ccc; border-radius: 4px;">
                {% 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>

            {% if show_using_prepacker %}
            <label for="has-prepacker-toggle" style="font-weight: 500;">
                HAS PREPACKER:
                <input type="checkbox" id="has-prepacker-toggle" style="transform: scale(1.2); margin-left: 4px;">
            </label>
            {% endif %}

            <label for="quick-job-toggle" style="font-weight: 500;">
                QUICK JOB:
                <input type="checkbox" id="quick-job-toggle" style="transform: scale(1.2); margin-left: 4px;">
            </label>
        </div>

        <div>
            <button id="btn-begin-manual-fill" type="button"
                style="padding: 10px 18px; background-color: #27ae60; color: white; border: none; border-radius: 4px; font-size: 16px; cursor: pointer;">
                Begin Manual Pre-Pack Work
            </button>
        </div>
        {% elif no_work %}
        <h2>No Manual Pre-Pack 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">Snooze</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}}" target="_blank" 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 Job Ticket</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>
            <div class="alert alert-error" id="reprint-card-labels-alert" style="display: none;">
                <ul id="reprint-card-labels-alert-list"></ul>
            </div>
            <div class="alert alert-success" id="reprint-card-labels-success" style="display: none; background-color: #d4edda; color: #155724;">
                <ul id="reprint-card-labels-success-list">
                    <li>Card labels reprinted successfully.</li>
                </ul>
            </div>
            {% if not needs_stock_info %}
            <div class="reprint-container" style="display: flex; align-items: center; gap: 10px; justify-content: right;">
                <input type="number" id="card-reprint-amount" name="card-reprint-amount"
                       min="1" max="{{expected_num_cards}}"
                       placeholder="# of cards"
                       style="padding: 6px;">
                <button id="btn-reprint-card-labels" value="{{active_job}}" type="button">Reprint Card Labels</button>
            </div>
            {% endif %}
        {% endif %}


        {% if drug_info and expected_num_cards == 0 %}
            <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}}" target="_blank">{{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;">
                        <ul id="submit-cards-alert-list">
                        </ul>
                    </div>

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

                    <p style="margin-top: 10px; margin-bottom: 5px;"><strong>{{expected_num_cards}}</strong> Cards Requested.</p>
                    <label for="num_cards_filled">Number of Cards Filled:</label>
                    <input type="number" name="num_cards_filled" id="num_cards_filled" min="0" max="{{max_num_cards}}" required style="width: 15em;" aria-required="true">

                    <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 20px;">
                        <label for="split-for-log-change" style="font-weight: 500;">
                            Same Job, New Lot:
                            <input type="checkbox" id="split-for-log-change" style="transform: scale(1.2); margin-left: 4px;">
                        </label>
                    </div>

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

<div id="reject-job-modal" title="Snooze Job?" style="display:none;">
    <div class="alert alert-error" id="reject-job-alert" style="display:none;">
        <ul id="reject-job-alert-list"></ul>
    </div>

    <p class="muted">
        {% if job_purchase_date %}
            Drug Purchase for Order made at: {{job_purchase_date|date:"m/d/Y"}}
        {% else %}
            No Purchase Order Found for this Request
        {% endif %}
    </p>

    <form class="form-grid">
        <div class="form-row">
            <label for="reject-reason-select">Snooze Reason:</label>
            <select name="reject-reason-select" id="reject-reason-select">
                <option value="UNKNOWN" disabled selected>-- Select a Reason --</option>
                {% for rejection in rejection_options_list %}
                    <option value="{{ rejection.tag }}">{{ rejection.display_name }}</option>
                {% endfor %}
            </select>
        </div>

        <div class="form-row-date">
            <label for="pause-datepicker">Snooze Until:</label>
            <input type="text" id="pause-datepicker" placeholder="MM/DD/YYYY" autocomplete="off" inputmode="none">
            <select id="pause-timepicker" autocomplete="new-password">
                <option value="8AM">8:00 AM</option>
                <option value="NOON">Noon</option>
                <option value="3PM">3:00 PM</option>
                <option value="6PM">6:00 PM</option>
            </select>
        </div>

        <div class="form-row" id="reject-other-container" style="display:none;">
            <label for="other-reject-reason">Custom Snooze Reason:</label>
            <input type="text" id="other-reject-reason" placeholder="Other">
        </div>
    </form>
</div>
{% endblock %}