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

    #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;
    }
</style>

<script>
    $(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();
            }
        });

        $('#num_rejected').on('input', function() {
            let max_accepted = parseInt($('#num_accepted').attr('placeholder'));
            let rejected = parseInt($(this).val()) || 0;
            let accepted = max_accepted - rejected;

            if (rejected > max_accepted) {
                $('#num_rejected').val(max_accepted);
                $('#num_accepted').val(0);
            } else if (rejected < 0) {
                $('#num_rejected').val(0);
                $('#num_accepted').val(max_accepted);
            } else {
                $('#num_accepted').val(accepted);
            }
        });

        $('#num_accepted').on('input', function() {
            let max_accepted = parseInt($('#num_accepted').attr('placeholder'));
            let accepted = parseInt($(this).val()) || 0;
            let rejected = max_accepted - accepted;

            if (accepted > max_accepted) {
                $('#num_accepted').val(max_accepted);
                $('#num_rejected').val(0);
                rejected = 0;
            } else if (accepted < 0) {
                $('#num_accepted').val(0);
                $('#num_rejected').val(max_accepted);
                rejected = max_accepted;
            } else {
                $('#num_rejected').val(rejected);
            }

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

        $('#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)
                }
            });
        })
    })
</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 %}
                <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>

                {% if report_list|length == 1 %}
                    <h3>Showing the oldest order pending validation.</h3>
                {% else %}
                    <h3>Showing {{report_list|length}} the 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>
                {% 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 class="form-row">
                    <label for="num_accepted">Accepted:</label>
                    <input type="number" id="num_accepted" name="num_accepted" placeholder="{{num_completed}}" max="{{num_completed}}" min="0">
                </div>

                <div class="form-row">
                    <label for="num_rejected">Rejected:</label>
                    <input type="number" id="num_rejected" name="num_rejected" placeholder="0" min="0" max="{{num_completed}}">
                </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 %}