{% extends "mobile-index.html" %}

{% block page_title %}Pre-Pack Manager{% endblock %}

{% block head %}
    {{ block.super }}
    <script>
        $(function () {
            $('#btn-set-recommended').on('click', function () {
                let prepack_card_id = $(this).data('prepack-card-id');
                let recommended_low_level = parseInt($(this).data('low-level'), 10) || 0;
                let recommended_par_level = parseInt($(this).data('par-level'), 10) || 0;
                let recommended_crit_level = parseInt($(this).data('critical-level'), 10) || 0;

                let prepack_list = [{
                    prepack_card_id: prepack_card_id,
                    recommended_low_level: recommended_low_level,
                    recommended_par_level: recommended_par_level,
                    recommended_crit_level: recommended_crit_level,
                    source: $(this).data('source')
                }];

                $.ajax({
                    url: "{% url 'site:update-all-prepack-recommendations' %}",
                    type: 'POST',
                    data: {
                        csrfmiddlewaretoken: '{{ csrf_token }}',
                        prepack_list: JSON.stringify(prepack_list)
                    },
                    success: function () {
                        location.reload();
                    },
                    error: function () {
                        alert('Failed to set recommended levels.');
                    }
                });
            });

            // Load saved printer selection
            let saved_printer_id = localStorage.getItem('mobile_selected_printer');
            if (saved_printer_id) {
                $('#printer-select').val(saved_printer_id);
            }
            // If nothing selected (no saved value or saved value not in list), default to first
            if ($('#printer-select').val() === null) {
                $('#printer-select').prop('selectedIndex', 0);
            }

            $('#btn-printer-settings').on('click', function () {
                $('#printer-select-wrapper').slideToggle();
            });

            $('#printer-select').on('change', function () {
                localStorage.setItem('mobile_selected_printer', $(this).val());
            });

            $('#btn-print-label').on('click', function () {
                let prepack_card_id = $(this).data('prepack-card-id');
                let selected_printer = $('#printer-select').val();

                if (!selected_printer) {
                    alert('Please select a printer first.');
                    $('#printer-select-wrapper').slideDown();
                    return;
                }

                // Save selection on print too
                localStorage.setItem('mobile_selected_printer', selected_printer);

                $.ajax({
                    url: "{% url 'mfq:print-prepack-card-label' %}",
                    type: 'POST',
                    data: {
                        csrfmiddlewaretoken: '{{ csrf_token }}',
                        prepack_card_id: prepack_card_id,
                        printer: selected_printer
                    },
                    success: function (response) {
                        alert('Label sent to printer.');
                    },
                    error: function (xhr) {
                        let message = 'Failed to print label.';
                        if (xhr.responseJSON && xhr.responseJSON.return_message) {
                            message = xhr.responseJSON.return_message;
                        }
                        alert(message);
                    }
                });
            });

            $('#btn-edit-on-hand').on('click', function () {
                let current_value = parseInt($('#on-hand-display').text().trim(), 10);
                $('#on-hand-display').hide();
                $('#on-hand-edit').show();
                $('#on-hand-input').val(current_value).focus();
            });

            $('#btn-save-on-hand').on('click', function () {
                let new_value = parseInt($('#on-hand-input').val(), 10);
                if (isNaN(new_value) || new_value < 0) {
                    alert('Please enter a valid quantity.');
                    return;
                }
                let prepack_card_id = $(this).data('prepack-card-id');

                $.post("{% url 'site:update-manage-prepack-field' %}", {
                    csrfmiddlewaretoken: '{{ csrf_token }}',
                    ppk_id: prepack_card_id,
                    field_type: 'on-hand',
                    field_val: new_value
                }, function () {
                    $('#on-hand-display').text(new_value).show();
                    $('#on-hand-edit').hide();
                }).fail(function () {
                    alert('Failed to update on hand value.');
                });
            });

            $('#btn-cancel-on-hand').on('click', function () {
                $('#on-hand-edit').hide();
                $('#on-hand-display').show();
            });
        });
    </script>

    <style>
        .detail-row {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid #eee;
            font-size: 12pt;
        }
        .detail-label {
            font-weight: bold;
            color: #005e99;
        }
        .detail-value {
            text-align: right;
        }
        .level-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #eee;
            font-size: 12pt;
        }
        .level-label {
            font-weight: bold;
            color: #005e99;
            flex: 1;
        }
        .level-values {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .level-db {
            font-weight: bold;
            font-size: 14pt;
        }
        .level-qr {
            font-size: 10pt;
            color: #b1b3b5;
        }
        .level-stale {
            color: #c02025;
            font-weight: bold;
        }
        .level-stale .level-qr {
            color: #c02025;
        }
        .on-hand-value {
            font-size: 24pt;
            font-weight: bold;
            text-align: center;
            padding: 12px 0;
        }
        .on-hand-ok { color: #44ba85; }
        .on-hand-low { color: #f6d258; }
        .on-hand-critical { color: #c02025; }
        .drug-name-header {
            font-size: 14pt;
            font-weight: bold;
            color: #1a1a1a;
            text-align: center;
            padding: 6px 0 2px 0;
        }
        .drug-number-header {
            font-size: 11pt;
            color: #666;
            text-align: center;
            padding-bottom: 8px;
        }
        .action-buttons {
            padding: 10px 0;
        }
        .inactive-banner {
            background-color: #c02025;
            color: #ffffff;
            text-align: center;
            font-weight: bold;
            font-size: 12pt;
            padding: 10px;
            border-radius: 6px;
            margin-bottom: 10px;
        }
        .on-hand-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .on-hand-edit-link {
            color: #005e99;
            font-size: 16pt;
            text-decoration: none;
        }
        .on-hand-edit-container {
            display: none;
            text-align: center;
            padding: 12px 0;
        }
        .on-hand-input {
            font-size: 18pt;
            text-align: center;
            width: 100px;
            padding: 6px;
            border: 2px solid #005e99;
            border-radius: 6px;
        }
        .on-hand-edit-actions {
            margin-top: 10px;
            display: flex;
            justify-content: center;
            gap: 10px;
        }
        .print-row {
            display: flex;
            gap: 8px;
            align-items: center;
        }
        .print-row .mobile-btn {
            margin-bottom: 0;
        }
        .btn-printer-select {
            min-width: 48px;
            flex-shrink: 0;
        }
        .printer-select-dropdown {
            display: none;
            margin-bottom: 10px;
        }
        .printer-select-dropdown select {
            width: 100%;
            padding: 10px 12px;
            font-size: 12pt;
            border: 2px solid #005e99;
            border-radius: 6px;
        }
        .print-row .mobile-btn {
            width: auto;
            margin-bottom: 0;
        }
        .print-row .mobile-btn-print {
            flex: 1;
        }
        .print-row .btn-printer-select {
            min-width: 48px;
            max-width: 48px;
            padding: 12px;
        }
    </style>
{% endblock %}

{% block content %}
    {% if prepack_card_data %}

        {% if not prepack_card_data.active or not prepack_card_data.prepack_management %}
            <div class="inactive-banner">
                <i class="icon-warning-sign"></i> This item is inactive
            </div>
            <div class="mobile-stale-warning">
                <i class="icon-exclamation-sign"></i> Item should be removed from shelf
            </div>
        {% endif %}

        {% if prepack_card_data.active and prepack_card_data.prepack_management and label_is_stale %}
            <div class="mobile-stale-warning">
                <i class="icon-exclamation-sign"></i> Label Contains Old Quantity Data, Reprint Recommended
            </div>
        {% endif %}

        <div class="mobile-card">
            <div class="drug-name-header">{{ prepack_card_data.drug_name }}</div>
            <div class="drug-number-header">{{ prepack_card_data.drug_number }}</div>

            <div class="detail-row">
                <span class="detail-label">Color</span>
                <span class="detail-value">{{ prepack_card_data.color }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Shape</span>
                <span class="detail-value">{{ prepack_card_data.shape }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Package</span>
                <span class="detail-value">{{ prepack_card_data.package }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Days Supply</span>
                <span class="detail-value">{{ prepack_card_data.day_supply }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Qty Per Dose</span>
                <span class="detail-value">{{ prepack_card_data.qty_per_dose }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Auto Prepack</span>
                <span class="detail-value">{% if prepack_card_data.auto_prepack %}Yes{% else %}No{% endif %}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Manual Fill</span>
                <span class="detail-value">{% if prepack_card_data.manual_fill_only %}Yes{% else %}No{% endif %}</span>
            </div>

            {% if prepack_card_data.is_control %}
                <div class="detail-row">
                    <span class="detail-label">Control</span>
                    <span class="detail-value">Yes</span>
                </div>
            {% endif %}
            {% if prepack_card_data.is_high_cost %}
                <div class="detail-row">
                    <span class="detail-label">Brand Name</span>
                    <span class="detail-value">Yes</span>
                </div>
            {% endif %}
        </div>

        {% if prepack_card_data.active and prepack_card_data.prepack_management %}
            <div class="mobile-card">
                <div class="mobile-card-header on-hand-header">
                    <span>On Hand</span>
                    <a id="btn-edit-on-hand" href="javascript:void(0);" class="on-hand-edit-link">
                        <i class="icon-cog"></i>
                    </a>
                </div>
                <div id="on-hand-display" class="on-hand-value {% if prepack_card_data.on_hand <= prepack_card_data.critical_level %}on-hand-critical{% elif prepack_card_data.on_hand <= prepack_card_data.low_level %}on-hand-low{% else %}on-hand-ok{% endif %}">
                    {{ prepack_card_data.on_hand }}
                </div>
                <div id="on-hand-edit" class="on-hand-edit-container">
                    <input id="on-hand-input" type="number" min="0" class="on-hand-input" />
                    <div class="on-hand-edit-actions">
                        <button id="btn-save-on-hand" class="mobile-btn mobile-btn-primary" data-prepack-card-id="{{ prepack_card_id }}">
                            <i class="icon-ok"></i> Save
                        </button>
                        <button id="btn-cancel-on-hand" class="mobile-btn mobile-btn-default">
                            <i class="icon-remove"></i> Cancel
                        </button>
                    </div>
                </div>
            </div>

            <div class="mobile-card">
                <div class="mobile-card-header">Levels</div>

                <div class="level-row {% if par_outside_recommended %}level-stale{% endif %}">
                    <span class="level-label">Par</span>
                    <div class="level-values">
                        <span class="level-db">{{ prepack_card_data.par_level }}</span>
                        {% if prepack_card_data.recommended_par_level is not None %}
                            <span class="level-qr">(rec: {{ prepack_card_data.recommended_par_level }})</span>
                        {% endif %}
                    </div>
                </div>

                <div class="level-row {% if low_outside_recommended %}level-stale{% endif %}">
                    <span class="level-label">Low</span>
                    <div class="level-values">
                        <span class="level-db">{{ prepack_card_data.low_level }}</span>
                        {% if prepack_card_data.recommended_low_level is not None %}
                            <span class="level-qr">(rec: {{ prepack_card_data.recommended_low_level }})</span>
                        {% endif %}
                    </div>
                </div>

                {% if prepack_card_data.manual_fill_only %}
                    <div class="level-row {% if crit_outside_recommended %}level-stale{% endif %}">
                        <span class="level-label">Critical</span>
                        <div class="level-values">
                            <span class="level-db">{{ prepack_card_data.critical_level }}</span>
                            {% if prepack_card_data.recommended_crit_level is not None %}
                                <span class="level-qr">(rec: {{ prepack_card_data.recommended_crit_level }})</span>
                            {% endif %}
                        </div>
                    </div>
                {% endif %}
            </div>

            <div class="action-buttons">
                {% if levels_outside_recommended %}
                    <button id="btn-set-recommended" class="mobile-btn mobile-btn-warning"
                        data-prepack-card-id="{{ prepack_card_id }}"
                        data-low-level="{{ prepack_card_data.recommended_low_level }}"
                        data-par-level="{{ prepack_card_data.recommended_par_level }}"
                        data-critical-level="{% if prepack_card_data.manual_fill_only %}{{ prepack_card_data.recommended_crit_level }}{% else %}0{% endif %}"
                        data-source="{% if prepack_card_data.manual_fill_only %}MANUAL{% else %}AUTO{% endif %}">
                        <i class="icon-refresh"></i> Set to Recommended
                    </button>
                {% endif %}
                <div class="printer-select-dropdown" id="printer-select-wrapper">
                    <select id="printer-select">
                        {% for printer in printer_list %}
                            <option value="{{ printer.id }}">{{ printer.cups_name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="print-row">
                    <button id="btn-printer-settings" class="mobile-btn mobile-btn-primary btn-printer-select">
                        <i class="icon-cog"></i>
                    </button>
                    <button id="btn-print-label" class="mobile-btn mobile-btn-primary mobile-btn-print" data-prepack-card-id="{{ prepack_card_id }}">
                        <i class="icon-print"></i> Print Label
                    </button>
                </div>
            </div>
        {% endif %}

    {% else %}

        <div class="mobile-card mobile-text-center">
            <p style="font-size: 14pt; color: #c02025; font-weight: bold; margin: 20px 0;">
                <i class="icon-exclamation-sign"></i> Pre-Pack card not found
            </p>
            <p style="color: #666;">
                ID: {{ prepack_card_id|default:"None" }}
            </p>
        </div>

    {% endif %}
{% endblock %}

{% block page_footer %}
{% endblock %}