{% extends "site.html" %}

{% block head %}
{{ block.super }}
<style>
    #workflow-left {
        flex: 2;
        padding-right: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #pending-verification-table {
        width: 100%;
    }

    #workflow-right {
        flex: 1;
        background-color: #f9f9f9;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 24px 24px;
        font-family: Arial, sans-serif;
        border-left: 1px solid #ccc;
    }

    #workflow-right h3 {
        margin-bottom: 16px;
        position: relative;
        width: 100%;
        text-align: center;
        padding-bottom: 1px;
    }

    #workflow-right h3::after {
        content: '';
        position: absolute;
        left: -24px;
        right: -24px;
        bottom: 0;
        height: 1px;
        background: black;
    }

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

    #task-input-form {
        width: 100%;
        margin-top: 20px;
    }

    #task-input-form label {
        display: block;
        font-weight: bold;
    }

    #task-input-form textarea {
        width: 100%;
        padding: 8px;
        font-size: 1em;
        margin-top: 4px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }

    fieldset#rejection-reasons-section {
        margin-top: 24px;
        padding: 16px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background-color: #fff;
    }

    fieldset legend {
        font-weight: bold;
        margin-bottom: 8px;
    }

    fieldset label {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        font-weight: normal;
    }

    fieldset input[type="checkbox"] {
        margin-right: 8px;
    }

    .form-row {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        gap: 8px;
        justify-content: center;
    }

    .form-row label {
        min-width: 80px;
        font-weight: bold;
    }

    .form-row input[type="number"] {
        width: 100px;
        padding: 6px 8px;
        font-size: 1em;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    #task-input-form button {
        margin-top: 20px;
        margin-right: 10px;
        padding: 10px 16px;
        font-size: 1em;
        border-radius: 4px;
        cursor: pointer;
    }

    #submit-btn {
        background-color: #28a745;
        color: white;
        float: right;
        border: 1px solid black;
    }

    #submit-btn:disabled {
        background-color: grey;
        cursor: not-allowed;
    }

    .card-warning {
        font-weight: bold;
        font-size: 1.2rem;
        border-radius: 16px;
        border: 1px solid grey;
        background-color: yellow;
        text-align: center;
        margin-bottom: 10px;
        padding: 10px;
    }

    #confirm-override-checkbox {
        margin-left: 6px;
        transform: scale(1.2);
        cursor: pointer;
        margin-top: -2px;
        margin-right: 4px;
    }

    #cancel-btn {
        background-color: #dc3545;
        color: white;
        border: 1px solid black;
    }

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

    .drug-details-inline {
        margin-top: 8px;
        line-height: 1.6;
    }

    .vbar {
        display: inline-block;
        width: 1px;
        height: 1.5em;
        background-color: #444;
        margin: 0 8px;
        vertical-align: middle;
    }

    .drug-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 8px;
        align-items: center;
    }

    .drug-meta a {
        color: #007bff;
        text-decoration: none;
    }

    .drug-meta a:hover {
        text-decoration: underline;
    }

    #reasons_legend {
        text-align: center;
        border-bottom: none;
        width: auto;
        padding-left: 8px;
        padding-right: 8px;
    }

    .checkbox-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 16px;
        margin-bottom: 16px;
    }

    .checkbox-item {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    #error_message {
        background-color: lightcoral;
        padding-right: 3rem;
        padding-left: 3rem;
        border-radius: 8px;
        border: 2px solid indianred;
        visibility: hidden;
        margin-bottom: 2rem;
    }

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

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

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

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

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

    .drug-item {
        white-space: nowrap;
    }

    #rejection-reason-alert {
        display: none;
    }

    #manual_lot_exp_warn {
        font-weight: bold;
        font-size: 1.2rem;
        border-radius: 16px;
        border: 1px solid grey;
        background-color: yellow;
        text-align: center;
        margin-bottom: 0;
        padding: 10px;
    }

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

    #manual_lot_exp_edit {
        font-size: 20px;
    }

    #edit_lot_exp_form {
        display: none;
        align-items: center;
        justify-content: space-around;
        width: 100%;
    }

    #edit_lot_exp_form > div {
        display: flex;
        flex-direction: column;
        margin-top: 1em;
    }
</style>

<script>
    function debounce(fn, delay) {
        let timer;
        return function() {
            let context = this;
            let args = arguments;
            clearTimeout(timer);
            timer = setTimeout(function() {
                fn.apply(context, args);
            }, delay);
        };
    }

    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 () {
        $("#search-workorder-input").focus();

        $("#search-workorder-input").keypress(function (event) {
            let key = event.which;
            if (key === 13)  // the enter key code
            {
               $("#btn-submit-wo-id").click();
                return false;
            }
            $("#search-workorder-input").focus();
        });

        $("#btn-submit-wo-id").click(function (event) {
            let wo_id = $('#search-workorder-input').val();
            $.ajax({
                url: "{% url 'mfq:start-verification' %}",
                method: 'POST',
                data: {
                    csrfmiddlewaretoken: '{{csrf_token}}',
                    wo_id: wo_id,
                },
                success: function(response) {
                    let return_message = response.return_message;
                    if (return_message !== '') {
                        $('#error_message').text(return_message);
                        $('#error_message').css('visibility', 'visible');
                    } else {
                        $('#error_message').css('visibility', 'hidden');
                        location.reload();
                    }
                },
                error: function(xhr, status, error) {
                    console.log(error)
                }
            });
        })

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

        $('#submit-btn').click(function (event) {
            let accepted = $('#num_accepted').val();
            let rejected = $('#num_rejected').val();
            let notes = $('#notes').val();

            let checkedReasons = [];
            $('input[name="reasons"]:checked').each(function() {
                checkedReasons.push($(this).val());
            });

            if (checkedReasons.length === 0  && rejected > 0) {
                $("#rejection-reason-alert").show();
            } else {
                $.ajax({
                    url: "{% url 'mfq:submit-verification' %}",
                    method: 'POST',
                    data: {
                        csrfmiddlewaretoken: '{{csrf_token}}',
                        accepted: accepted,
                        rejected: rejected,
                        notes: notes,
                        checkedReasons: JSON.stringify(checkedReasons),
                    },
                    success: function(response) {
                        location.reload();
                    },
                    error: function(xhr, status, error) {
                        console.log(error)
                    }
                })
            }
        })

        $('input[name="reasons"]').on('change', function() {
            if ($('input[name="reasons"]:checked').length > 0) {
                $("#rejection-reason-alert").hide();
            } else {
                $("#rejection-reason-alert").show();
            }
        });

        $('#num_rejected').on('input', function() {
            let val = parseInt($(this).val()) || 0;
            if (val > 0) {
                $('#rejection-reasons-section').show();
            } else {
                $('#rejection-reasons-section').hide();
            }
        });

        $('#confirm-override-checkbox').off('change').on('change', function() {
            if ($(this).is(':checked')) {
                $('#submit-btn').prop('disabled', false);
            } else {
                $('#submit-btn').prop('disabled', true);
            }
        });

        const updateValues = debounce(function(e) {
            const max_completed = parseInt('{{ num_completed }}') || 0;
            const max_num_cards = parseInt('{{ max_num_cards }}') || max_completed;
            let accepted = parseInt($('#num_accepted').val()) || 0;
            let rejected_val = $('#num_rejected').val();
            let rejected = rejected_val ? parseInt(rejected_val) || 0 : 0;

            let total_entered = accepted + rejected;
            if (total_entered > max_num_cards) {
                $('#card-warning').show();
                $('#submit-btn').prop('disabled', true);
                $('#confirm-override-checkbox').prop('checked', false)
            } else {
                $('#card-warning').hide();
                $('#submit-btn').prop('disabled', false);
            }

            // enforce integer-only input
            if (e.target.value && !Number.isInteger(Number(e.target.value))) {
                e.target.value = Math.floor(Number(e.target.value));
            }

            if (e.target.id === 'num_rejected') {
                if (rejected < 0) {
                    $('#num_rejected').val(0);
                    rejected = 0;
                }

                if (rejected > 0) {
                    $('#rejection-reasons-section').show();
                } else {
                    $('#rejection-reasons-section').hide();
                }

                if (rejected > max_completed) {
                    // only set accepted if no value currently in field
                    if (!$('#num_accepted').val()) {
                        $('#num_accepted').val(0);
                    }
                } else if (!$('#num_accepted').val()) {
                    $('#num_accepted').val(max_completed - rejected);
                }

            } else if (e.target.id === 'num_accepted') {
                if (accepted < 0) {
                    $('#num_accepted').val(0);
                    accepted = 0;
                }

                if (accepted > max_completed) {
                    // only set rejected to 0 if no value currently in the field
                    if (!rejected_val) {
                        $('#num_rejected').val(0);
                    }
                } else if (!rejected_val) {
                    $('#num_rejected').val(max_completed - accepted);
                }

                if (parseInt($('#num_rejected').val()) > 0) {
                    $('#rejection-reasons-section').show();
                } else {
                    $('#rejection-reasons-section').hide();
                }
            }
        }, 350);

        $('#num_rejected, #num_accepted').on('input', updateValues);

        $('#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 printer_id = $('#printer-select').val();
            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 (!printer_id || printer_id === 'UNKNOWN') {
                alerts.push('Please select a printer.');
            }

            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,
                    printer_id: printer_id,
                    'csrfmiddlewaretoken': '{{csrf_token}}'
                },
                success: function(response) {
                    $('#card-reprint-amount').val('');
                    $('#printer-select').val('UNKNOWN');
                    $('#reprint-card-labels-success').show();

                    setTimeout(() => {
                        $('#reprint-card-labels-success').fadeOut(400);
                    }, 3000);
                },
                error: function(xhr, status, error) {
                    console.log(error)
                }
            });
        })

        let replenalert = $("#replen-validation-alert");
        let validate_form = $("#stock-bottle-form").validate({
            onkeyup: false,
            ignore: [],
            errorContainer: replenalert,
            errorLabelContainer: "#replen-validation-alert-list",
            wrapper: 'li',
            onfocusout: function (el) { $(el).valid(); validate_form.form(); }, // keep summary live
        });

        $('#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')
                {% elif replen_show_day_format == 'MM-DD-YYYY' %}
                    $('#stock_bottle_exp_year')
                {% 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')
                {% elif replen_show_day_format == 'MM-DD-YYYY' %}
                    $('#stock_bottle_exp_year')
                {% 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')
                {% elif replen_show_day_format == 'MM-DD-YYYY' %}
                    $('#stock_bottle_exp_day')
                {% elif replen_show_day_format == 'YYYY-MM-DD' %}
                    $('#stock_bottle_exp_day')
                {% 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')
                {% elif replen_show_day_format == 'MM-DD-YYYY' %}
                    $('#stock_bottle_exp_day')
                {% elif replen_show_day_format == 'YYYY-MM-DD' %}
                    $('#stock_bottle_exp_day')
                {% 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) {
                    return false;
                }
                if (event.which == 109 || event.which == 173 || event.which == 191 || event.which == 220 || event.which == 111) {  //-,/,\
                    return false;
                }
            });
        {% endif %}

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

        $('#save_manual_lot_exp_edit').on('click', function(e) {
            e.preventDefault();

            let form = $('#stock-bottle-form');
            // not entirely sure validation is 100% working, so double check validation here
            if (!form.valid()) {
                $("#replen-validation-alert").show();
                return;
            }

            if ($('#replen-validation-alert-list').children().length === 0) {
                $.ajax({
                    url: "{% url 'mfq:edit-lot-and-expiration' %}",
                    type: 'POST',
                    data: {
                        csrfmiddlewaretoken: '{{ csrf_token }}',
                        stock_bottle_lot: $('#stock_bottle_lot').val(),
                        stock_bottle_exp_day: $('#stock_bottle_exp_day').val(),
                        stock_bottle_exp_month: $('#stock_bottle_exp_month').val(),
                        stock_bottle_exp_year: $('#stock_bottle_exp_year').val()
                    },
                    success: function(response) {
                        location.reload();
                    },
                    error: function(xhr, status, error) {
                        console.log(error)
                    }
                });
            }
        });

        $('#manual_lot_exp_edit').on('click', function(){
            $('#edit_lot_exp_form').css('display', 'flex');
        })
    })
</script>
{% endblock %}

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

{% block content %}
{{pending_verification_list}}
<div id="workflow-container">
    <div id="workflow-left">
        {% if not has_verify_job %}
            {% if report_list|length > 0 %}
                {% if user_can_verify %}
                    <h2>Scan Workorder ID on card to begin validation</h2>
                    <h3 id="error_message">&nbsp;</h3>
                    <div style="display: flex; width: 30em; justify-content: flex-start; padding-bottom: 2vh; align-items: baseline;">
                        <label for="search-workorder-input" style="font-size: 1vw; padding-right: 1.5vh; margin-left: -2vh; white-space: nowrap;"><b>Scan/Enter Work Order Id:</b></label>
                        <input type="text" id="search-workorder-input" name="search-workorder-input" style="width: 8em;" value="{% if wo_id %}{{ wo_id }}{% endif %}">
                        <button type="button" id="btn-submit-wo-id" style="margin-left: 1em;">Submit</button>
                    </div>
                {% endif %}

                {% if report_list|length == 1 %}
                    <h3>Showing the oldest order pending validation.</h3>
                {% else %}
                    <h3>Showing the {{report_list|length}} oldest orders pending validation.</h3>
                {% endif %}
                <div id="pending-verification-table">
                    <table id="user-action-table" class="table table-bordered">
                        <thead style="position: sticky; top: 0;">
                        <tr class="dosis-report-header">
                            {% include 'report-table-header.html' %}
                        </tr>
                        </thead>
                        <tbody>
                            {% for order in report_list %}
                                <tr>
                                    <td><a href="{% url 'site:search-ord-req-ppk-detail' order.req_id %}" target="_blank">{{order.req_id}}</a></td>
                                    <td>{{order.receive_dts}}</td>
                                    <td><a href="{% url 'site:search-main' %}?value={{order.non_dash_drug_number}}" target="_blank">{{order.drug_number}}</a></td>
                                    <td>{{order.drug_name}}</td>
                                    <td>{{order.num_cards}}</td>
                                    <td>{{order.pills_per_package}}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% else %}
                <h2>No Workorders need validation at this time</h2>
            {% endif %}
        {% else %}
            {% if blister_layout %}
                <hr style="margin: 0px;"/>
                <table style="margin: 0 auto; 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-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 id="workflow-right">
        {% if has_verify_job %}
            {% if job_ticket_id != 0 %}
                <h3>Job Ticket</h3>
                <div class="image-container" style="width: 360px; height: 200px;">
                    <img style="border: 1px solid black;" src="{% url 'site:load-label-preview-image' job_ticket_id %}" alt="Job Ticket Preview Image"/>
                </div>

                {%if req_id != 0%}
                    <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>
                    <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="{{num_completed}}"
                               placeholder="# of cards"
                               style="padding: 6px;">
                        <div>
                        <select id="printer-select" name="printer-select" style="padding: 8px 12px; height: 40px; border: 1px solid #ccc; border-radius: 4px;">
                            <option value="UNKNOWN" id="default_printer_select" disabled selected>-- Select a printer --</option>
                            {% for printer in printer_list %}
                                <option value="{{ printer.id }}">{{ printer.cups_name }}</option>
                            {% endfor %}
                        </select>
                        </div>
                        <button id="btn-reprint-card-labels" value="{{req_id}}" type="button">Reprint Card Labels</button>
                    </div>
                    {% if has_manual_lot_exp %}
                        <div id="manual_lot_exp_div">
                            <p id="manual_lot_exp_warn">Lot and/or Expiration Date were Manually Entered.</p>
                            <button id="manual_lot_exp_edit" class="btn btn-large btn-link"><i class="icon-pencil"></i></button>
                        </div>

                        <form class="stock-bottle-form" id="stock-bottle-form" style="width: 100%;">
                            <div class="alert alert-error" id="replen-validation-alert" style="display: none;">
                                <ul id="replen-validation-alert-list">
                                </ul>
                            </div>
                            <div id="edit_lot_exp_form">
                                <div>
                                    <strong>Lot:</strong>
                                    <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>

                                <div>
                                    <strong>Expiration Date:</strong>

                                    <div>
                                        {% 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" value="{{stock_info.lot_expiration_day}}">
                                                <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" value="{{stock_info.lot_expiration_month}}">
                                                <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" value="{{stock_info.lot_expiration_year}}">
                                            {% 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" value="{{stock_info.lot_expiration_month}}">
                                                <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" value="{{stock_info.lot_expiration_day}}">
                                                <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" value="{{stock_info.lot_expiration_year}}">
                                            {% 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" value="{{stock_info.lot_expiration_year}}">
                                                <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" value="{{stock_info.lot_expiration_month}}">
                                                <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" value="{{stock_info.lot_expiration_day}}">
                                            {% 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" value="{{stock_info.lot_expiration_month}}">
                                            <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" value="{{stock_info.lot_expiration_year}}">
                                        {% endif %}
                                    </div>
                                </div>

                                <button id="save_manual_lot_exp_edit" style="margin-top: 2em;" type="submit">Save Edits</button>
                            </div>
                        </form>
                    {% endif %}
                {% endif %}
            {% endif %}
            <h3>Drug Info</h3>
            <div id="drug_info">
                <div class="drug-meta">
                    <strong>Drug Name:</strong> {{drug_info.drug_name}} <span class="vbar"></span>
                    <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 class="drug-details-inline">
                    <span class="drug-item">Shape: {{drug_info.shape}} <span class="vbar"></span></span>
                    <span class="drug-item">Color: {{drug_info.color}} <span class="vbar"></span></span>
                    <span class="drug-item">Imprint Front: {{drug_info.imprint_front}} <span class="vbar"></span></span>
                    <span class="drug-item">Imprint Back: {{drug_info.imprint_back}} <span class="vbar"></span></span>
                    <span class="drug-item">Hazardous Drug: {{drug_info.usp_800}}</span>
                </div>
            </div>
            <div id="task-input-form">
                <div id="card-warning" class="card-warning" style="display:none;">
                    Number of cards exceeds normal overage allowed.
                    <label style="font-weight:normal; padding-top: 5px; margin-bottom: 0;">
                        <input type="checkbox" id="confirm-override-checkbox"> Confirm RPH quantity override
                    </label>
                </div>
                <p style="margin-top: 10px; margin-bottom: 5px; text-align: center;"><strong>{{num_completed}}</strong> Cards Completed.</p>
                <div class="form-row">
                    <label for="num_accepted">Accepted:</label>
                    <input type="number" id="num_accepted" name="num_accepted" min="0" step="1">
                </div>

                <div class="form-row">
                    <label for="num_rejected">Rejected:</label>
                    <input type="number" id="num_rejected" name="num_rejected" min="0" step="1">
                </div>

                <fieldset id="rejection-reasons-section" style="display: none;">
                    <legend id="reasons_legend">Reasons for Rejection</legend>
                    <div class="alert alert-error" id="rejection-reason-alert" style="display: none;">
                        <ul id="rejection-reason-alert-list">
                            <li>At least one Reason must be selected.</li>
                        </ul>
                    </div>
                    <div class="checkbox-grid">
                        {% for reason in rejection_reasons %}
                            <label class="checkbox-item">
                                <input type="checkbox" name="reasons" value="{{reason.id}}">
                                {{reason.display_name}}
                            </label>
                        {% endfor %}
                    </div>

                    <label for="notes">Notes about issue(s)</label>
                    <textarea id="notes" name="notes" rows="4" cols="40"></textarea>
                </fieldset>

                <button type="button" id="cancel-btn">Cancel</button>
                <button type="button" id="submit-btn">Submit</button>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}