{% extends "site.html" %}

{% block head %}
    {{ block.super }}
    <script>
        function formatDateTime(date) {
            let pad = n => String(n).padStart(2, '0');

            let hours = date.getHours();
            let am_pm = hours >= 12 ? 'PM' : 'AM';

            hours = hours % 12;
            if (hours === 0) {
                hours = 12;
            }

            return (
                pad(date.getMonth() + 1) + '/' +
                pad(date.getDate()) + '/' +
                date.getFullYear() + ' ' +
                pad(hours) + ':' +
                pad(date.getMinutes()) +
                am_pm
            );
        }

        function setPrintMetadata() {
            $('#time-printed').text(formatDateTime(new Date()));
        }

        function submit_cycle_count() {
            let cycle_count_skus = [];

            $('#cycle_count_table input[type="number"]').each(function () {
                let sku_id = $(this).data('prepack-card-id');
                let value = parseInt($(this).val(), 10);

                if (!isNaN(sku_id) && !isNaN(value)) {
                    cycle_count_skus.push(sku_id + ',' + value);
                }
            });

            $.ajax({
                url: "{% url 'mfq:finish-cycle-count' %}",
                method: 'POST',
                data: {
                    csrfmiddlewaretoken: '{{ csrf_token }}',
                    cycle_count_skus: cycle_count_skus
                },
                traditional: true,  // IMPORTANT: sends array correctly for Django getlist()
                success: function (response) {
                    // happy path
                    location.reload();
                },
                error: function (xhr) {
                    let msg = 'Error submitting cycle count.';
                    if (xhr.responseJSON && xhr.responseJSON.return_message) {
                        msg = xhr.responseJSON.return_message;
                    }
                    alert(msg);
                }
            });
        }

        $(function () {
            $('#btn-start-cycle-count').on('click', function () {
                let only_controls = $('#only-controls-toggle').is(':checked') ? 'TRUE' : 'FALSE';
                let whole_wall = $('#whole-wall-toggle').is(':checked') ? 'TRUE' : 'FALSE';

                $.ajax({
                    url: "{% url 'mfq:start-cycle-count' %}",
                    method: 'GET',
                    data: {
                        only_controls: only_controls,
                        whole_wall: whole_wall
                    },
                    success: function (response) {
                        if (response.return_message) {
                            $('#error_message').text(response.return_message).css('visibility', 'visible');
                        } else {
                            $('#error_message').css('display', 'none');
                            location.reload();
                        }
                    },
                    error: function (xhr, status, error) {
                        console.log(error);
                    }
                });
            });


            $('#btn-print-cycle-count').on('click', function () {
                setPrintMetadata();
                window.print();
            });

            window.onbeforeprint = function () {
                setPrintMetadata();
            };

            $('#cycle_count_table').on('input', 'input[type="number"]', function () {
                let $input = $(this);
                let raw_value = $input.val();
                let value = parseInt(raw_value, 10);
                let par_level = parseInt($input.data('par-level'), 10);
                let $warning = $input.next('.par-warning');

                if (isNaN(value)) {
                    $warning.hide();
                    return;
                }

                if (value < 0) {
                    value = 0;
                }

                // normalize value (removes leading zeros like 0007 → 7)
                $input.val(value);

                if (!isNaN(par_level) && value > (par_level * 2)) {
                    $warning.show();
                } else {
                    $warning.hide();
                }
            });

            $('#btn-submit-cycle-count').on('click', function () {
                let empty_count = 0;
                let par_warning_count = $('.par-warning:visible').length;

                $('#cycle_count_table input[type="number"]').each(function () {
                    let val = $(this).val();

                    if (val === '' || val === null) {
                        empty_count += 1;
                    }
                });

                let total_warnings = empty_count + par_warning_count;

                if (total_warnings > 0) {
                    let messages = [];

                    if (par_warning_count > 0) {
                        messages.push(
                            par_warning_count === 1
                                ? '1 item is significantly higher than par level.'
                                : par_warning_count + ' items are significantly higher than par level.'
                        );
                    }

                    if (empty_count > 0) {
                        messages.push(
                            empty_count === 1
                                ? '1 item has no value entered.'
                                : empty_count + ' items have no value entered.'
                        );
                    }

                    $('#cycle-count-warning-modal')
                        .html('<p>' + messages.join('<br>') + '</p>')
                        .dialog({
                            modal: true,
                            resizable: false,
                            draggable: false,
                            width: 600,
                            buttons: [
                                {
                                    text: 'Cancel',
                                    click: function () {
                                        $(this).dialog('close');
                                    }
                                },
                                {
                                    text: 'Submit',
                                    'class': 'modal-dialog-button-right',
                                    click: function () {
                                        $(this).dialog('close');
                                        submit_cycle_count();
                                    }
                                }
                            ]
                        });
                } else {
                    submit_cycle_count();
                }
            });

            $('#btn-cancel-cycle-count').on('click', function () {
                $.ajax({
                    url: "{% url 'mfq:cancel-cycle-count' %}",
                    type: 'POST',
                    data: {
                        csrfmiddlewaretoken: '{{ csrf_token }}'
                    },
                    success: function (response) {
                        location.reload();
                    },
                    error: function (xhr) {
                        console.error('cancel cycle count failed', xhr)
                    }
                })
            })

            $('#cycle_count_table').on('keydown', 'input[type="number"]', function (event) {
                if (event.key === 'Enter') {
                    event.preventDefault();

                    let inputs = $('#cycle_count_table input[type="number"]');
                    let current_index = inputs.index(this);

                    if (current_index !== -1) {
                        let next_index = current_index + 1;

                        if (next_index >= inputs.length) {
                            next_index = 0;
                        }

                        let next_input = inputs.eq(next_index);
                        next_input.focus();
                        next_input.select();
                    }
                }
            });
        });
    </script>

    <style>
        .cycle-count-container {
            text-align: center;
        }

        .cycle-count-actions {
            margin-top: 20px;
        }

        #btn-start-cycle-count {
            padding: 10px 18px;
            background-color: #27ae60;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
        }

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

        .no-wrap {
            white-space: nowrap;
            word-break: keep-all;
            overflow-wrap: normal;
        }

        .cycle-count-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 6px 0;
        }

        .cycle-count-metadata {
            display: flex;
            gap: 24px;
            align-items: center;
            font-size: 0.95em;
        }

        .cycle-count-actions {
            margin-left: auto;
        }

        .print-only {
            display: none;
        }

        .par-warning {
            margin-top: 4px;
            padding: 6px 10px;
            font-size: 0.85em;
            display: none;
            margin-bottom: 0;
        }

        #btn-cancel-cycle-count {
            float: left;
            margin-bottom: 24px;
        }

        #btn-submit-cycle-count {
            float: right;
            margin-bottom: 24px;
        }

        .cycle-count-warning {
            margin: 10px 0 16px 0;
            padding: 12px 16px;
            background: #ffe6e6;
            color: #a10000;
            border: 1px solid #ffb3b3;
            border-left: 6px solid #d60000;
            border-radius: 6px;
            font-weight: 500;
            box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        }

        .highlight-mismatch {
            font-weight: bolder;
            font-style: italic;
        }

        @media print {
            /* Hide non-report UI */
            .navbar,
            .site-deck,
            .pagehead,
            .sidebar-left,
            .sidebar-right,
            #btn-print-cycle-count,
            #btn-start-cycle-count,
            .checkbox-section,
            .cycle-count-submit,
            h2,
            h3 {
                display: none !important;
            }

            /* Show print-only metadata */
            .print-only {
                display: inline;
            }

            /* Header stays in normal flow */
            .cycle-count-header {
                margin-bottom: 10px;
                page-break-after: avoid;
            }

            /* Table rules */
            #cycle_count_table {
                width: 100%;
                border-collapse: collapse;
                page-break-before: avoid;
            }

            #cycle_count_table th,
            #cycle_count_table td {
                padding: 4px 6px;
                font-size: 10.5px;
                line-height: 1.2;
                vertical-align: middle;
            }

            #cycle_count_table th {
                background-color: #f0f0f0;
                font-weight: 600;
            }

            #cycle_count_table tr {
                page-break-inside: avoid;
            }

            /* Remove inputs but keep write space */
            #cycle_count_table input {
                display: none;
            }

            #cycle_count_table td:last-child {
                height: 20px;
            }

            .par-warning {
                display: none !important;
            }

            /* Remove Initial On Hand column */
            .no-print {
                display: none !important;
            }

            .dosis-report-header {
                border-left: 1px solid lightgrey;
            }

            .dosis-report-header th {
                color: black !important;
            }
        }
    </style>
{% endblock %}

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

{% block content %}
<div class='cycle-count-container'>
    {% if prepack_cards|length == 0 %}
        {% if number_skus_needing_count == 0 %}
            <h2>No SKUs need counting at this time.</h2>
        {% else %}
            <h3 id='error_message'>&nbsp;</h3>
            <h2>No Active Cycle Count</h2>
            <h3>Press start to begin a new cycle count</h3>

            <div class='checkbox-section center-job-type'>
                <div>
                    <div class='checkbox-group'>Options:</div>
                    {% if show_controls %}
                    <label for='only-controls-toggle' class='checkbox-label'>
                        <input type='checkbox' id='only-controls-toggle' autocomplete='off'>
                        Controls Only
                    </label>
                    {% endif %}
                    <label for='whole-wall-toggle' class='checkbox-label'>
                        <input type='checkbox' id='whole-wall-toggle' autocomplete='off'>
                        Count Entire Pre-Pack Wall
                    </label>
                </div>
            </div>

            <div class='cycle-count-actions'>
                <button id='btn-start-cycle-count' type='button'>
                    Start Cycle Count
                </button>
            </div>
        {% endif %}
    {% else %}
        <div class='cycle-count-header'>
            <div class='cycle-count-metadata'>
                <span>
                    <strong>Time Cycle Count Started:</strong>
                    {{ time_started|date:'m/d/Y h:iA' }}
                </span>

                <span>
                    <strong>Started By:</strong>
                    {{ starting_user_initials }}
                </span>

                <span class='print-only'>
                    <strong>Time Printed:</strong>
                    <span id='time-printed'></span>
                </span>

                <span class='print-only'>
                    <strong>Printed By:</strong>
                    {{ current_user_initials }}
                </span>
            </div>

            <div class='cycle-count-actions'>
                <button id='btn-print-cycle-count' type='button'>
                    Print Cycle Count
                </button>
            </div>
        </div>
        {% if is_stale %}
            <div class='cycle-count-warning'>
                <strong>Warning:</strong> Cycle Count Started more than 2 Hours Ago.  Please Ensure Worksheet is up to Date Before Entering Data.
            </div>
        {% endif %}
        <table id="cycle_count_table" class="table table-bordered">
            <thead style="position: sticky; top: 0;">
                <tr class="dosis-report-header">
                    <th>Drug</th>
                    <th>Drug #</th>
                    <th>Last Adjusted</th>
                    <th>Package Type</th>
                    <th>Qty / Dose</th>
                    <th>Day Supply</th>
                    <th class='no-print'>Par Level</th>
                    <th class='no-print'>Initial On Hand</th>
                    <th>Current On Hand</th>
                </tr>
            </thead>
            <tbody>
                {% for card in prepack_cards %}
                    <tr>
                        <td>{{ card.drug_name }}</td>
                        <td class='no-wrap'>{{ card.drug_number }}</td>
                        <td>
                            {% if card.last_on_hand_adjustment_dts %}
                                {{ card.last_on_hand_adjustment_dts|date:'m/d/Y h:iA' }}
                            {% else %}
                                N/A
                            {% endif %}
                        </td>
                        <td class='no-wrap'>{{ card.prepack_type__package_type__description }}</td>
                        <td class="{% if card.prepack_type__qty_per_dose != 1.0 %}highlight-mismatch{% endif %}">
                            {{ card.prepack_type__qty_per_dose }}
                        </td>

                        <td class="{% if card.prepack_type__day_supply != default_prepack_size %}highlight-mismatch{% endif %}">
                            {{ card.prepack_type__day_supply }}
                        </td>
                        <td class='no-print'>{{ card.par_level }}</td>
                        <td class='no-print'>{{ card.initial_on_hand }}</td>
                        <td>
                            <input type='number' name='current_on_hand_{{ card.id }}' data-prepack-card-id='{{ card.id }}' data-par-level='{{ card.par_level }}' min='0' step='1' autocomplete='off'>
                            <div class='par-warning alert alert-warning'><strong>Notice:</strong> Value significantly larger than expected par level</div>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
        <div class='cycle-count-submit'>
            <button id='btn-cancel-cycle-count' type='button'>
                Cancel Cycle Count
            </button>
            <button id='btn-submit-cycle-count' type='button'>
                Submit Cycle Count
            </button>
        </div>
        <div id='cycle-count-warning-modal' title='Confirm Submission' style='display:none;'></div>
    {% endif %}
</div>
{% endblock %}