{% extends "site.html" %}

{% block head %}
    {{ block.super }}
    <script>
        const PREPACK_ACTION_LOG_URL = "{% url 'site:prepack-card-action-log' %}";
        let daily_graph_data = {{ daily_graph_data_json|safe }};
        let daily_chart_instance = null;
        let daily_packaged_chart_instance = null;

        let render_daily_chart = function() {
            let canvas = document.getElementById('daily_chart_canvas');
            if (!canvas) {
                return;
            }

            if (daily_chart_instance) {
                daily_chart_instance.destroy();
            }

            let labels = daily_graph_data.map(function(item) {
                let parts = item.day.split('-');
                return parts[1] + '/' + parts[2];
            });

            let consumed_data = daily_graph_data.map(function(item) {
                return item.total_consumed || 0;
            });

            let missed_delta_data = daily_graph_data.map(function(item) {
                return item.total_missed || 0;
            });

            daily_chart_instance = new Chart(canvas.getContext('2d'), {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [
                        {
                            label: 'Consumed',
                            data: consumed_data,
                            backgroundColor: '#2e7d32',
                            stack: 'daily'
                        },
                        {
                            label: 'Missed (PPM)',
                            data: missed_delta_data,
                            backgroundColor: '#ef6c00',
                            stack: 'daily'
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: true,
                    plugins: {
                        title: {
                            display: true,
                            text: 'Performance by Day (for SKUs in mPPM)',
                            font: {size: 14}
                        },
                        legend: {
                            position: 'bottom'
                        },
                        tooltip: {
                            callbacks: {
                                footer: function(items) {
                                    let total = 0;
                                    items.forEach(function(item) {
                                        total += item.parsed.y;
                                    });
                                    return 'Total: ' + total;
                                }
                            }
                        }
                    },
                    scales: {
                        x: {stacked: true},
                        y: {stacked: true, beginAtZero: true}
                    }
                }
            });
        };

        let render_daily_packaged_chart = function() {
            let canvas = document.getElementById('daily_packaged_chart_canvas');
            if (!canvas) {
                return;
            }

            if (daily_packaged_chart_instance) {
                daily_packaged_chart_instance.destroy();
            }

            let labels = daily_graph_data.map(function(item) {
                let parts = item.day.split('-');
                return parts[1] + '/' + parts[2];
            });

            let packaged_data = daily_graph_data.map(function(item) {
                return item.total_packaged || 0;
            });

            daily_packaged_chart_instance = new Chart(canvas.getContext('2d'), {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [
                        {
                            label: 'Packaged',
                            data: packaged_data,
                            backgroundColor: '#2e7d32'
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: true,
                    plugins: {
                        title: {
                            display: true,
                            text: 'Packaged by Day (for SKUs in mPPM)',
                            font: {size: 14}
                        },
                        legend: {
                            position: 'bottom'
                        }
                    },
                    scales: {
                        x: {},
                        y: {beginAtZero: true}
                    }
                }
            });
        };

        function build_prepack_action_log_url(params) {
            let query = $.param(params)
            return PREPACK_ACTION_LOG_URL + '?' + query
        }

        $(function() {
            let format_number = function(value) {
                return value.toLocaleString('en-US', {maximumFractionDigits: 0});
            };

            let format_dollars = function(value) {
                return '$' + value.toLocaleString('en-US', {maximumFractionDigits: 0});
            };

            let recalculate = function() {
                let mfq_cards_per_hour = parseFloat($('#mfq_cards_per_hour').val()) || 0;
                let bypass_cards_per_hour = parseFloat($('#bypass_cards_per_hour').val()) || 0;
                let technician_labor = parseFloat($('#technician_labor').val()) || 0;
                let tech_batch_setup_minutes = parseFloat($('#tech_batch_setup_minutes').val()) || 0;
                let rph_batch_validation_minutes = parseFloat($('#rph_batch_validation_minutes').val()) || 0;
                let rph_labor = parseFloat($('#rph_labor').val()) || 0;

                let can_compute_hours = mfq_cards_per_hour > 0 && bypass_cards_per_hour > 0;

                $('.cards-cell').each(function() {
                    let $cards_cell = $(this);
                    let $row = $cards_cell.closest('tr');
                    let cards = parseFloat($cards_cell.data('cards')) || 0;

                    let hours = 0;
                    if (can_compute_hours) {
                        hours = (cards / bypass_cards_per_hour) - (cards / mfq_cards_per_hour);
                    }
                    let dollars = hours * technician_labor;

                    $row.find('.hours-cell').text(format_number(hours));
                    $row.find('.dollars-cell').text(format_dollars(dollars));
                });

                let batches_too_soon = parseFloat($('#batches_too_soon_value').data('batches')) || 0;

                let tech_batch_hours = (batches_too_soon * tech_batch_setup_minutes) / 60;
                let tech_batch_dollars = tech_batch_hours * technician_labor;
                $('#tech_batch_hours').text(format_number(tech_batch_hours));
                $('#tech_batch_dollars').text(format_dollars(tech_batch_dollars));

                let rph_batch_hours = (batches_too_soon * rph_batch_validation_minutes) / 60;
                let rph_batch_dollars = rph_batch_hours * rph_labor;
                $('#rph_batch_hours').text(format_number(rph_batch_hours));
                $('#rph_batch_dollars').text(format_dollars(rph_batch_dollars));
            };

            $('.prepack-report-inputs input[type=number]').on('input change', recalculate);
            recalculate();

            $('#show_days_between_batches_modal').on('click', function() {
                $('#days_between_batches_modal').show();
            });

            $('.custom-modal-close, .custom-modal-backdrop').on('click', function() {
                $(this).closest('.custom-modal').hide();
            });

            $(document).on('click', '.btn-view-action-log', function() {
                let $button = $(this);

                let drug_number = $button.data('drug-number');
                let days_supply = $button.data('days-supply');
                let qty_per_dose = $button.data('qty-per-dose');
                let package_type_id = $button.data('package-type-id');

                if (drug_number) {
                    drug_number = drug_number.replace(/-/g, '');
                }

                let filter_start_date = $('#filter_start_date').val();
                let days = moment().diff(moment(filter_start_date), 'days') + 19

                let url = build_prepack_action_log_url({
                    drug_number: drug_number,
                    days_supply: days_supply,
                    qty_per_dose: qty_per_dose,
                    package_type_id: package_type_id,
                    days: days,
                    clear_filters: true,
                    page: 'ALL'
                });

                window.open(url, '_blank');
            });

            let filter_initial_values = {
                start_date: $('#filter_start_date').val(),
                end_date: $('#filter_end_date').val(),
                sku_limit: $('#filter_sku_limit').val(),
                limit_by_alt_id: $('#filter_limit_by_alt_id').is(':checked')
            };

            let check_filter_changes = function() {
                let changed = (
                    $('#filter_start_date').val() !== filter_initial_values.start_date
                    || $('#filter_end_date').val() !== filter_initial_values.end_date
                    || $('#filter_sku_limit').val() !== filter_initial_values.sku_limit
                    || $('#filter_limit_by_alt_id').is(':checked') !== filter_initial_values.limit_by_alt_id
                );

                if (changed) {
                    $('#filter_warning').show();
                } else {
                    $('#filter_warning').hide();
                }
            };

            $('#filter_start_date, #filter_end_date, #filter_sku_limit').on('blur', check_filter_changes);
            $('#filter_limit_by_alt_id').on('change', check_filter_changes);

            $('#filter_start_date').on('change', function() {
                let start_date = $(this).val();
                let end_date = $('#filter_end_date').val();

                if (start_date && end_date && start_date > end_date) {
                    $('#filter_end_date').val(start_date);
                }

                check_filter_changes();
            });

            $('#filter_recalculate').on('mousedown', function(e) {
                e.preventDefault();
                let params = new URLSearchParams(window.location.search);
                params.set('start_date', $('#filter_start_date').val());
                params.set('end_date', $('#filter_end_date').val());
                params.set('sku_limit', $('#filter_sku_limit').val());
                params.set('limit_by_alt_id', $('#filter_limit_by_alt_id').is(':checked') ? 'true' : 'false');
                params.set('mfq_cards_per_hour', $('#mfq_cards_per_hour').val());
                params.set('bypass_cards_per_hour', $('#bypass_cards_per_hour').val());
                params.set('tech_hourly_cost', $('#technician_labor').val());
                params.set('rph_hourly_cost', $('#rph_labor').val());
                params.set('batch_setup_min', $('#tech_batch_setup_minutes').val());
                params.set('validation_min', $('#rph_batch_validation_minutes').val());
                window.location.search = params.toString();
            });

            let today = new Date();
            let month_select = $('#filter_month_shortcut');
            let month_names = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

            for (let i = 0; i < 6; i++) {
                let d = new Date(today.getFullYear(), today.getMonth() - i, 1);
                let month_name = month_names[d.getMonth()];
                let option = $('<option>');

                option.val(d.getFullYear() + '-' + (d.getMonth() + 1));
                option.text(month_name + ' ' + d.getFullYear());
                month_select.append(option);
            }

            $('#filter_month_shortcut').on('change', function() {
                let month_value = $(this).val();
                if (!month_value) {
                    return;
                }

                let parts = month_value.split('-');
                let year = parseInt(parts[0], 10);
                let month = parseInt(parts[1], 10);

                let first_day = new Date(year, month - 1, 1);
                let last_day = new Date(year, month, 0);

                let format_date = function(date_obj) {
                    let yyyy = date_obj.getFullYear();
                    let mm = String(date_obj.getMonth() + 1).padStart(2, '0');
                    let dd = String(date_obj.getDate()).padStart(2, '0');
                    return yyyy + '-' + mm + '-' + dd;
                };

                $('#filter_start_date').val(format_date(first_day));
                $('#filter_end_date').val(format_date(last_day));
                check_filter_changes();
            });

            $(window).on('scroll', function() {
                let scroll_top = $(window).scrollTop();
                let max_top = 120;
                let min_top = 20;
                let scroll_range = 100;

                let new_top = Math.max(min_top, max_top - scroll_top * (max_top - min_top) / scroll_range);
                $('.prepack-report-inputs').css('top', new_top + 'px');
            });

            $('#show_daily_chart_modal').on('click', function() {
                $('#daily_chart_modal').show();
                render_daily_packaged_chart();
                render_daily_chart();
            });
        });
    </script>

    <style>
        .prepack-report {
            width: 720px;
            margin: 6px auto;
            background: #ffffff;
            border: 1px solid #c8c8c8;
            border-radius: 4px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
            font-family: Arial, Helvetica, sans-serif;
            color: #333;
            overflow: hidden;
        }

        @media (max-width: 1360px) {
            .prepack-report {
                margin: 30px 30px 30px 30px;
            }
        }

        .prepack-report-title {
            text-align: center;
            font-size: 16px;
            font-weight: bold;
            padding: 14px 20px;
            background: #3a6ea5;
            color: #ffffff;
            border-bottom: 1px solid #2b557f;
            letter-spacing: 0.3px;
        }

        .prepack-report-section {
            padding: 6px 20px 14px 20px;
        }

        .prepack-report-subheader {
            font-size: 13px;
            font-weight: bold;
            text-transform: uppercase;
            color: #ffffff;
            background: #5a5a5a;
            padding: 8px 20px;
            margin-top: 4px;
            letter-spacing: 0.5px;
        }

        .prepack-report-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }

        .prepack-report-table td,
        .prepack-report-table th {
            padding: 7px 4px;
            border-bottom: 1px solid #ececec;
        }

        .prepack-report-table tr:last-child td {
            border-bottom: none;
        }

        .prepack-report-table th {
            text-align: right;
            font-size: 11px;
            text-transform: uppercase;
            color: #777;
            font-weight: 600;
            letter-spacing: 0.4px;
            border-bottom: 2px solid #c8d4e3;
        }

        .prepack-report-table th.label-col {
            text-align: left;
        }

        .prepack-report-table .label-indent {
            padding-left: 22px;
            color: #555;
        }

                .prepack-report-table .label-indent-2 {
            padding-left: 44px;
            color: #666;
        }

        .prepack-report-table .value {
            text-align: right;
            white-space: nowrap;
            font-variant-numeric: tabular-nums;
            font-weight: 600;
            width: 110px;
        }

        .prepack-report-table .percent {
            display: inline-block;
            min-width: 52px;
            margin-right: 10px;
            padding: 2px 6px;
            background: #eaf1f9;
            color: #2b557f;
            border-radius: 3px;
            font-size: 12px;
            font-weight: 600;
            text-align: center;
        }

        .prepack-report-table .value .percent + .value {
            display: inline-block;
            width: 40px;
            text-align: right;
            /* override the outer .value width */
            white-space: nowrap;
        }

        .prepack-report-table tr.total-row td {
            background: #f4f7fb;
            font-weight: bold;
            color: #1f1f1f;
            border-top: 1px solid #c8d4e3;
            border-bottom: 1px solid #c8d4e3;
        }

        .prepack-report-table tr.highlight-row td {
            background: #fff4d6;
            font-weight: bold;
            color: #1f1f1f;
            border-top: 1px solid #e5c96a;
            border-bottom: 1px solid #e5c96a;
        }

        .prepack-report-table tr.info-row td {
            font-style: italic;
            color: #777;
            text-align: right;
        }

        .prepack-report-table tr.info-row td.label-indent {
            text-align: left;
        }

        .prepack-report-table tr.utilization-row td {
            background: #3a6ea5;
            color: #ffffff;
            font-weight: bold;
            font-size: 14px;
            padding: 10px 4px;
            border: none;
        }

        .prepack-report-table tr.utilization-row .value {
            font-size: 15px;
        }

        .prepack-report-inputs {
            position: fixed;
            top: 120px;
            right: 30px;
            width: 320px;
            background: #f4f7fb;
            border: 1px solid #dde4ee;
            border-radius: 4px;
            padding: 14px 16px;
            font-size: 12px;
            color: #444;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
            z-index: 100;
            max-height: calc(100vh - 80px);
            overflow-y: auto;
        }

        .prepack-report-inputs-title {
            font-size: 11px;
            font-weight: bold;
            text-transform: uppercase;
            color: #555;
            letter-spacing: 0.4px;
            padding-bottom: 8px;
            margin-bottom: 10px;
            border-bottom: 1px solid #dde4ee;
        }

        .prepack-report-inputs .input-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }

        .prepack-report-inputs .input-row:last-child {
            margin-bottom: 0;
        }

        .prepack-report-inputs .input-label {
            color: #555;
            flex: 1;
            padding-right: 8px;
        }

        .prepack-report-inputs input[type='number'] {
            width: 60px;
            padding: 3px 6px;
            border: 1px solid #b8c4d3;
            border-radius: 3px;
            font-size: 12px;
            text-align: right;
        }

        .filter-warning {
            margin-top: 8px;
            padding: 6px 8px;
            background: #fff4d6;
            border: 1px solid #e5c96a;
            border-radius: 3px;
            font-size: 11px;
            color: #7a5e1a;
        }

        .filter-recalculate-btn {
            margin-top: 8px;
            width: 100%;
            padding: 6px 10px;
            background: #3a6ea5;
            color: #ffffff;
            border: 1px solid #2b557f;
            border-radius: 3px;
            font-size: 12px;
            font-weight: bold;
            cursor: pointer;
        }

        .filter-recalculate-btn:hover {
            background: #2b557f;
        }

        .prepack-report-inputs input[type='date'] {
            padding: 3px 6px;
            border: 1px solid #b8c4d3;
            border-radius: 3px;
            font-size: 12px;
        }

    /*    Batches too soon modal    */
        .detail-button {
            margin-left: 8px;
            padding: 2px 8px;
            font-size: 11px;
            border: 1px solid #b8c4d3;
            border-radius: 3px;
            background: #f4f7fb;
            color: #2b557f;
            cursor: pointer;
        }

        .detail-button:hover {
            background: #eaf1f9;
        }

        .custom-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1000;
        }

        .custom-modal-backdrop {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.45);
        }

        .custom-modal-content {
            position: relative;
            width: 1400px;
            max-width: 95%;
            max-height: 85vh;
            margin: 40px auto;
            background: #ffffff;
            border-radius: 4px;
            overflow: hidden;
            box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);
            z-index: 1001;
        }

        .custom-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            background: #3a6ea5;
            color: #ffffff;
            font-weight: bold;
        }

        .custom-modal-close {
            border: none;
            background: transparent;
            color: #ffffff;
            font-size: 22px;
            cursor: pointer;
            line-height: 1;
        }

        .custom-modal-body {
            overflow-y: auto;
            max-height: calc(85vh - 52px);
            padding: 0 6px 16px 16px;
        }

        .modal-detail-table th,
        .modal-detail-table td {
            text-align: left;
            vertical-align: top;
        }

        .modal-detail-table td.value,
        .modal-detail-table th.value {
            text-align: right;
        }

        .table-bordered {
            border-top: 0;
        }

        .modal-detail-table td.text-center {
            text-align: center;
        }

    /*    Daily Charts    */
        .custom-modal-content.modal-large {
            width: 1200px;
            max-height: 95vh;
            margin: 10px auto;
            display: flex;
            flex-direction: column;
        }

        .custom-modal-content.modal-large .custom-modal-body {
            flex: 1;
            min-height: 0;
            max-height: none;
            padding: 20px;
        }

        .chart-spacer {
            height: 24px;
        }
    </style>
{% endblock %}

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

{% block content %}

<div class='prepack-report-inputs'>
    <div class='prepack-report-inputs-title'>Report Filters</div>
    <div class='input-row'>
        <span class='input-label'>Start date</span>
        <input type='date' id='filter_start_date' value='{{ start_date }}'>
    </div>
    <div class='input-row'>
        <span class='input-label'>End date</span>
        <input type='date' id='filter_end_date' value='{{ end_date }}'>
    </div>
    <div class='input-row'>
        <span class='input-label'>Month:</span>
        <select id='filter_month_shortcut'>
            <option value=''>-- Select --</option>
        </select>
    </div>
    <div class='input-row'>
        <span class='input-label'>SKU limit</span>
        <input type='number' id='filter_sku_limit' value='{{ sku_limit }}' min='1' step='1'>
    </div>
    <div class='input-row'>
        <span class='input-label'>Group by Alt ID</span>
        <input type='checkbox' id='filter_limit_by_alt_id' {% if limit_by_alt_id %}checked{% endif %}>
    </div>
    <div id='filter_warning' class='filter-warning' style='display: none;'>
        Click Recalculate to apply filter changes.
    </div>
    <button type='button' id='filter_recalculate' class='filter-recalculate-btn'>Recalculate</button>

    <div class='prepack-report-inputs-title' style='margin-top: 14px;'>Report Inputs</div>
    <div class='input-row'>
        <span class='input-label'>MFQ cards/hr</span>
        <input type='number' id='mfq_cards_per_hour' value='{{mfq_cards_per_hour}}' min='1'>
    </div>
    <div class='input-row'>
        <span class='input-label'>Bypass cards/hr</span>
        <input type='number' id='bypass_cards_per_hour' value='{{bypass_cards_per_hour}}' min='1'>
    </div>
    <div class='input-row'>
        <span class='input-label'>Technician labor $/hr</span>
        <input type='number' id='technician_labor' value='{{tech_hourly_cost}}' min='0' step='1'>
    </div>
    <div class='input-row'>
        <span class='input-label'>Tech batch setup (min)</span>
        <input type='number' id='tech_batch_setup_minutes' value='{{batch_setup_min}}' min='0' step='1'>
    </div>
    <div class='input-row'>
        <span class='input-label'>RPh batch validation (min)</span>
        <input type='number' id='rph_batch_validation_minutes' value='{{validation_min}}' min='0' step='1'>
    </div>
    <div class='input-row'>
        <span class='input-label'>RPh labor $/hr</span>
        <input type='number' id='rph_labor' value='{{rph_hourly_cost}}' min='0' step='1'>
    </div>
</div>

<div class='prepack-report'>
    <div class='prepack-report-title'>
        {{ report_sub_title }}
    </div>

    <div class='prepack-report-section'>
        <table class='prepack-report-table'>
            <tr>
                <td>Cards per Month at SKU #{{ sku_limit }}{% if limit_by_alt_id %} (Alt ID Group){% endif %}</td>
                <td class='value'>{{ cards_per_month_at_sku_limit }}</td>
            </tr>
            <tr>
                <td>Total SKUs in PPM - Tower</td>
                <td class='value'>{{ skus_in_tower }}</td>
            </tr>
            <tr>
                <td>Total SKUs in PPM - Manual</td>
                <td class='value'>{{ skus_in_mfq }}</td>
            </tr>
            <tr>
                <td>Total SKUs of Top {{ sku_limit }}{% if limit_by_alt_id %} Alt ID Groups{% else %} SKUs{% endif %} in PPM</td>
                <td class='value'>
                    <span class='percent'>{{ percent_ppm_skus_in_top }}%</span>
                    <span class='value'>{{ top_skus_in_ppm }}</span>
                </td>
            </tr>
            <tr>
                <td>Brand SKUs in PPM</td>
                <td class='value'>
                    <span class='percent'>{{ percent_brand_skus_in_ppm }}%</span>
                    <span class='value'>{{ brand_skus_in_ppm }}</span>
                </td>
            </tr>
            <tr>
                <td>Brand SKUs in Top {{ sku_limit }}{% if limit_by_alt_id %} Alt ID Groups{% else %} SKUs{% endif %}</td>
                <td class='value'>{{ brand_skus_top_skus }}</td>
            </tr>
            <tr>
                <td>Control SKUs in PPM</td>
                <td class='value'>
                    <span class='percent'>{{ percent_control_skus_in_ppm }}%</span>
                    <span class='value'>{{ control_skus_in_ppm }}</span>
                </td>
            </tr>
            <tr>
                <td>Control SKUs in Top {{ sku_limit }}{% if limit_by_alt_id %} Alt ID Groups{% else %} SKUs{% endif %}</td>
                <td class='value'>{{ control_skus_top_skus }}</td>
            </tr>
        </table>
    </div>

    <div class='prepack-report-subheader'>
        Current Impact of Pre-Packs (Top {{ sku_limit }} {% if limit_by_alt_id %}Alt ID Groups{% else %}SKUs{% endif %})
    </div>

    <div class='prepack-report-section'>
        <table class='prepack-report-table'>
            <thead>
                <tr>
                    <th class='label-col'></th>
                    <th>Cards</th>
                    <th>Hours</th>
                    <th>Labor Savings</th>
                </tr>
            </thead>
            <tbody>
                <tr class='total-row'>
                    <td>Total Pre-Pack Cards Consumed</td>
                    <td class='value cards-cell' data-cards='{{ total_consumed }}'>{{ total_consumed }}</td>
                    <td class='value hours-cell'></td>
                    <td class='value dollars-cell'></td>
                </tr>
                <tr>
                    <td class='label-indent'>Brand Pre-Pack Cards Consumed</td>
                    <td class='value cards-cell' data-cards='{{ high_cost_consumed }}'>{{ high_cost_consumed }}</td>
                    <td class='value hours-cell'></td>
                    <td class='value dollars-cell'></td>
                </tr>
                <tr>
                    <td class='label-indent'>Controls Pre-Pack Cards Consumed</td>
                    <td class='value cards-cell' data-cards='{{ control_consumed }}'>{{ control_consumed }}</td>
                    <td class='value hours-cell'></td>
                    <td class='value dollars-cell'></td>
                </tr>
                <tr>
                    <td class='label-indent'>Other Pre-Pack Cards Consumed</td>
                    <td class='value cards-cell' data-cards='{{ other_consumed }}'>{{ other_consumed }}</td>
                    <td class='value hours-cell'></td>
                    <td class='value dollars-cell'></td>
                </tr>

                <tr class='total-row'>
                    <td>Total Missed Card Opportunities</td>
                    <td class='value cards-cell' data-cards='{{ total_missed }}'>{{ total_missed }}</td>
                    <td class='value hours-cell'></td>
                    <td class='value dollars-cell'></td>
                </tr>

                <tr>
                    <td class='label-indent'>Missed from PPM SKUs</td>
                    <td class='value cards-cell' data-cards='{{ ppm_missed }}'>{{ ppm_missed }}</td>
                    <td class='value hours-cell'></td>
                    <td class='value dollars-cell'></td>
                </tr>
                <tr>
                    <td class='label-indent label-indent-2'>Brand</td>
                    <td class='value cards-cell' data-cards='{{ ppm_high_cost_missed }}'>{{ ppm_high_cost_missed }}</td>
                    <td class='value hours-cell'></td>
                    <td class='value dollars-cell'></td>
                </tr>
                <tr>
                    <td class='label-indent label-indent-2'>Controls</td>
                    <td class='value cards-cell' data-cards='{{ ppm_control_missed }}'>{{ ppm_control_missed }}</td>
                    <td class='value hours-cell'></td>
                    <td class='value dollars-cell'></td>
                </tr>
                <tr>
                    <td class='label-indent label-indent-2'>Other</td>
                    <td class='value cards-cell' data-cards='{{ ppm_other_missed }}'>{{ ppm_other_missed }}</td>
                    <td class='value hours-cell'></td>
                    <td class='value dollars-cell'></td>
                </tr>

                <tr>
                    <td class='label-indent'>Missed from Non-PPM SKUs</td>
                    <td class='value cards-cell' data-cards='{{ non_ppm_missed }}'>{{ non_ppm_missed }}</td>
                    <td class='value hours-cell'></td>
                    <td class='value dollars-cell'></td>
                </tr>
                <tr>
                    <td class='label-indent label-indent-2'>Brand</td>
                    <td class='value cards-cell' data-cards='{{ non_ppm_high_cost_missed }}'>{{ non_ppm_high_cost_missed }}</td>
                    <td class='value hours-cell'></td>
                    <td class='value dollars-cell'></td>
                </tr>
                <tr>
                    <td class='label-indent label-indent-2'>Controls</td>
                    <td class='value cards-cell' data-cards='{{ non_ppm_control_missed }}'>{{ non_ppm_control_missed }}</td>
                    <td class='value hours-cell'></td>
                    <td class='value dollars-cell'></td>
                </tr>
                <tr>
                    <td class='label-indent label-indent-2'>Other</td>
                    <td class='value cards-cell' data-cards='{{ non_ppm_other_missed }}'>{{ non_ppm_other_missed }}</td>
                    <td class='value hours-cell'></td>
                    <td class='value dollars-cell'></td>
                </tr>

                <tr class='utilization-row'>
                    <td>Pre-Pack Utilization Ratio</td>
                    <td class='value'>{{ utilization_ratio }}%</td>
                    <td class='value'></td>
                    <td class='value'>
                        <button type='button' id='show_daily_chart_modal' class='detail-button' style='margin-left: 12px;'>
                            View Daily Chart
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class='prepack-report-subheader'>
        Current Pre-Pack Production Efficiency (All SKUs in MFQ)
    </div>

    <div class='prepack-report-section'>
        <table class='prepack-report-table'>
            <thead>
                <tr>
                    <th class='label-col'></th>
                    <th>Batches</th>
                    <th>Hours</th>
                    <th>Labor Savings</th>
                </tr>
            </thead>
            <tbody>
                <tr class='total-row'>
                    <td>Batches Produced</td>
                    <td class='value'>{{ total_batches }}</td>
                    <td class='value'></td>
                    <td class='value'></td>
                </tr>
                <tr class='highlight-row'>
                    <td>Batches Too Soon</td>
                    <td class='value' id='batches_too_soon_value' data-batches='{{ batches_too_soon }}'>{{ batches_too_soon }}</td>
                    <td class='value'></td>
                    <td class='value'></td>
                </tr>
                <tr>
                    <td class='label-indent'>Missed Efficiency Opportunities - Technicians</td>
                    <td class='value'>{{ batches_too_soon }}</td>
                    <td class='value' id='tech_batch_hours'></td>
                    <td class='value' id='tech_batch_dollars'></td>
                </tr>
                <tr>
                    <td class='label-indent'>Missed Efficiency Opportunities - RPh</td>
                    <td class='value'>{{ batches_too_soon }}</td>
                    <td class='value' id='rph_batch_hours'></td>
                    <td class='value' id='rph_batch_dollars'></td>
                </tr>
                <tr class='info-row'>
                    <td class='label-indent'>
                        Avg Days Demand per Batch
                        <button type='button' id='show_days_between_batches_modal' class='detail-button'>
                            Details
                        </button>
                    </td>
                    <td class='value'>{{ average_days_between_batches|floatformat:1 }}</td>
                    <td class='value'></td>
                    <td class='value'></td>
                </tr>
                <tr class='utilization-row'>
                    <td>Pre-Packing Efficiency Ratio</td>
                    <td class='value'>{{ prepacking_efficiency_ratio }}%</td>
                    <td class='value'></td>
                    <td class='value'></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<div id='days_between_batches_modal' class='custom-modal' style='display: none;'>
    <div class='custom-modal-backdrop'></div>
    <div class='custom-modal-content'>
        <div class='custom-modal-header'>
            <span>Days Between Batches Details</span>
            <button type='button' class='custom-modal-close' aria-label='Close'>&times;</button>
        </div>

        <div class='custom-modal-body'>
            <table class='table table-bordered modal-detail-table'>
                <thead style='position: sticky; top: 0; background: #fff; z-index: 2;'>
                    <tr class='dosis-report-header'>
                        <th>Drug Number</th>
                        <th>Drug Name</th>
                        <th>Par Level</th>
                        <th>Days Supply</th>
                        <th>Qty / Dose</th>
                        <th>Package Description</th>
                        <th>Alt ID</th>
                        <th>High Cost</th>
                        <th>Control</th>
                        <th>Gap Days</th>
                        <th><i class="icon-th-list"></i></th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in days_between_batches %}
                        <tr>
                            <td>{{ item.drug_number }}</td>
                            <td>{{ item.drug_name_full }}</td>
                            <td>{{ item.par_level }}</td>
                            <td class='text-right'>{{ item.days_supply }}</td>
                            <td class='text-right'>{{ item.qty_per_dose }}</td>
                            <td>{{ item.package_type_description }}</td>
                            <td>{{ item.alternate_id|default:'-' }}</td>
                            <td class='text-center'>
                                {% if item.is_high_cost %}
                                    <span style='color: green;'>&#10004;</span>
                                {% endif %}
                            </td>

                            <td class='text-center'>
                                {% if item.is_control %}
                                    <span style='color: green;'>&#10004;</span>
                                {% endif %}
                            </td>
                            <td class='text-right'>{{ item.gap_days|floatformat:2 }}</td>
                            <td class='text-center'>
                                <button
                                    type='button'
                                    class='btn btn-small btn-link btn-view-action-log'
                                    title='View Pre-Pack Action Log'
                                    data-drug-number='{{ item.drug_number }}'
                                    data-days-supply='{{ item.days_supply }}'
                                    data-qty-per-dose='{{ item.qty_per_dose }}'
                                    data-package-type-id='{{ item.package_type_id }}'
                                >
                                    <i class='icon-eye-open'></i>
                                </button>
                            </td>
                        </tr>
                    {% empty %}
                        <tr>
                            <td colspan='9' style='text-align: center;'>No detail records found.</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<div id='daily_chart_modal' class='custom-modal' style='display: none;'>
    <div class='custom-modal-backdrop'></div>
    <div class='custom-modal-content modal-large'>
        <div class='custom-modal-header'>
            <span>Daily Performance (All SKUs in mPPM)</span>
            <button type='button' class='custom-modal-close' aria-label='Close'>&times;</button>
        </div>
        <div class='custom-modal-body'>
            <canvas id='daily_packaged_chart_canvas' height='120'></canvas>
            <div class='chart-spacer'></div>
            <canvas id='daily_chart_canvas' height='120'></canvas>
        </div>
    </div>
</div>
{% endblock %}