{% extends "dispensing-tools-container.html" %}
{% load humanize %}

{% block head %}
{{ block.super }}
<script>
    $(function () {
        const PILLSIG_REPORT_URL = "{% url 'support:support-pillsig-report' %}";
        let report_chart_data = {{ report_list|safe }};
        let chart = null

        let sort_state = {
            key: null,
            asc: true
        }

        function jump_to_ndc(drug_number, highlight_color) {
            let row_id = '#ndc-' + drug_number.replace(/[^a-zA-Z0-9]/g, '-') + '-row'
            let row = $(row_id)

            if (!row.length) {
                return
            }

            row.children().css('background-color', highlight_color)

            let target_offset = row.offset().top - $('thead').outerHeight() - 8

            $('html, body').animate(
                { scrollTop: target_offset },
                200,
                function () {
                    setTimeout(function () {
                        row.children().css('background-color', '')
                    }, 1200)
                }
            )
        }


        function render_table() {
            let tbody = $('.time-table tbody')
            tbody.empty()

            $.each(report_chart_data, function (_, row) {
                let safe_ndc = row.drug_number.replace(/[^a-zA-Z0-9]/g, '-')

                tbody.append(`
                    <tr id="ndc-${safe_ndc}-row">
                        <td>${row.display_drug_number}</td>
                        <td>${row.drug_name}</td>
                        <td>${row.pills.toLocaleString()}</td>
                        <td>${row.frames.toLocaleString()}</td>
                        <td>${row.duration}</td>
                        <td>${row.pill_pct.toFixed(2)}%</td>
                        <td>${row.frame_pct.toFixed(2)}%</td>
                        <td>${row.ratio.toFixed(2)}</td>
                        <td>
                            <a class="btn btn-small btn-link"
                               href="${PILLSIG_REPORT_URL}?drug_number=${row.drug_number.slice(0, 9)}"
                               title="Pill Sig NDC"
                               target="_blank">
                                <i class="icon-hand-up"></i>
                            </a>
                        </td>
                    </tr>
                `)
            })
        }

        function build_dispense_chart() {
            if (chart) {
                chart.destroy()
                chart = null
            }

            let labels = []
            let pill_data = []
            let frame_data = []
            let frame_colors = []

            $.each(report_chart_data, function (_, row) {
                labels.push(row.drug_number)
                pill_data.push(row.pill_pct)
                frame_data.push(row.frame_pct)

                    if (row.frame_pct > row.pill_pct) {
                        frame_colors.push('rgba(255, 0, 0, 0.3)')
                    } else if (row.frame_pct < row.pill_pct) {
                        frame_colors.push('rgba(0, 255, 0, 0.3)')
                    } else {
                    frame_colors.push('#9ca3af')
                }
            })

            let ctx = $('#dispense-chart')[0].getContext('2d')

            chart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [
                        {
                            label: '% Pills',
                            data: pill_data,
                            backgroundColor: '#0096c3',
                            categoryPercentage: 0.8,
                            barPercentage: 1.0
                        },
                        {
                            label: '% Frames',
                            data: frame_data,
                            backgroundColor: frame_colors,
                            categoryPercentage: 0.8,
                            barPercentage: 1.0
                        }
                    ]
                },
                options: {
                    responsive: true,
                    animation: false,
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            callbacks: {
                                title: function (items) {
                                    return labels[items[0].dataIndex]
                                },
                                label: function (item) {
                                    let index = item.dataIndex
                                    let pills = pill_data[index]
                                    let frames = frame_data[index]

                                    let ratio = null
                                    if (pills && frames) {
                                        ratio = frames / pills
                                    }

                                    let lines = [
                                        `% Pills: ${pills.toFixed(2)}`,
                                        `% Frames: ${frames.toFixed(2)}`
                                    ]

                                    if (ratio !== null && isFinite(ratio)) {
                                        lines.push(`Frame / Pill Ratio: ${ratio.toFixed(2)}`)
                                    }

                                    return lines
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: 'Percentage'
                            }
                        }
                    },
                    onClick: function (evt, elements) {
                        if (!elements.length) {
                            return
                        }

                        let index = elements[0].index
                        let row = report_chart_data[index]
                        let drug_number = row.drug_number

                        let highlight_color = '#e5f0ff'
                        if (row.ratio !== null) {
                            if (row.ratio > 1) {
                                highlight_color = 'rgba(255, 0, 0, 0.3)'
                            } else if (row.ratio < 1) {
                                highlight_color = 'rgba(0, 255, 0, 0.3)'
                            }
                        }

                        jump_to_ndc(drug_number, highlight_color)
                    }
                }
            })
        }

        $('#show-chart-btn').on('click', function () {
            let wrapper = $('#report-chart-wrapper')

            wrapper.toggle()

            if (wrapper.is(':visible')) {
                build_dispense_chart()
                $(this).text('Hide Chart')
            } else {
                $(this).text('Show Chart')
            }
        })

        $('.day-filter-btn').on('click', function () {
            let days = $(this).data('days')

            $('#days-input').val(days)

            $('.day-filter-btn').removeClass('active')
            $(this).addClass('active')
        })

        $('.time-table th.sortable').on('click', function () {
            let th = $(this)
            let key = th.data('key')

            if (sort_state.key === key) {
                sort_state.asc = !sort_state.asc
            } else {
                sort_state.key = key
                sort_state.asc = true
            }

            // clear indicators
            $('.time-table th.sortable')
                .removeClass('sort-asc sort-desc')

            // apply indicator
            th.addClass(sort_state.asc ? 'sort-asc' : 'sort-desc')

            report_chart_data.sort(function (a, b) {
                let av = a[key]
                let bv = b[key]

                if (av === null) return 1
                if (bv === null) return -1

                if (typeof av === 'string') {
                    return sort_state.asc
                        ? av.localeCompare(bv)
                        : bv.localeCompare(av)
                }

                return sort_state.asc
                    ? av - bv
                    : bv - av
            })

            render_table()

            if ($('#report-chart-wrapper').is(':visible')) {
                build_dispense_chart()
            }
        })

        $('#selected_dafe').on('change', function () {
            $('#report-filter-form').submit();
        })

        $('#show-chart-btn').click();

        $(".chosen-select").chosen({
            search_contains: true
        })
    });
</script>

<style>
    #dispensing-tools-header-tabs {
        margin-bottom: 0;
    }

    #dispensing-tools-wrapper {
        display: flex;
        width: 100%;
        flex-direction: column;
    }

    /* report filters at top */
    .report-filters {
        display: flex;
        align-items: center;
        gap: 24px;
        padding: 12px 16px;
        margin-bottom: 24px;
        background: #f9fafb;
        border-radius: 10px;
        border: 1px solid #e5e7eb;
    }

    .day-filters {
        display: flex;
        gap: 10px;
    }

    .day-filter-btn {
        padding: 6px 16px;
        border-radius: 999px;
        border: 1px solid #d1d5db;
        background: #ffffff;
        color: #374151;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.15s ease-in-out;
    }

    .day-filter-btn:hover {
        background: #eef2ff;
        border-color: #c7d2fe;
    }

    .day-filter-btn.active {
        background: #4f46e5;
        color: #ffffff;
        border-color: #4f46e5;
        box-shadow: 0 2px 6px rgba(79, 70, 229, 0.35);
    }

    .percentage-filter {
        display: flex;
        align-items: center;
        gap: 8px;
        padding-left: 8px;
        border-left: 1px solid #e5e7eb;
    }

    .percentage-filter label {
        display: flex;
        align-items: baseline;
        gap: 6px;
        font-size: 13px;
        font-weight: 500;
        color: #374151;
        margin-bottom: 0;
    }

    .percentage-filter input {
        width: 72px;
        padding: 4px 8px;
        border-radius: 6px;
        border: 1px solid #d1d5db;
    }

    .dafe-filter {
        display: flex;
        align-items: center;
        gap: 8px;
        padding-left: 8px;
        border-left: 1px solid #e5e7eb;
    }

    .dafe-filter label {
        display: flex;
        align-items: baseline;
        gap: 6px;
        font-size: 13px;
        font-weight: 500;
        color: #374151;
        margin-bottom: 0;
    }

    .dafe-filter select {
        padding: 4px 8px;
        border-radius: 6px;
        border: 1px solid #d1d5db;
        background: #ffffff;
        min-width: 140px;
    }

    .apply-filters-btn {
        margin-left: auto;
        padding: 7px 18px;
        border-radius: 8px;
        border: none;
        background: #0096c3;
        color: #ffffff;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.15s ease-in-out;
    }

    .apply-filters-btn:hover {
        background: #0077a3;
    }

    #show-chart-btn {
        padding: 7px 18px;
        border-radius: 8px;
        border: 1px solid #d1d5db;
        background: #ffffff;
        color: #374151;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.15s ease-in-out;
    }

    #show-chart-btn:hover {
        background: #eef2ff;
        border-color: #c7d2fe;
    }

    #show-chart-btn.active {
        background: #4f46e5;
        color: #ffffff;
        border-color: #4f46e5;
        box-shadow: 0 2px 6px rgba(79, 70, 229, 0.35);
    }

    /* chart stuff */
    .chart-legend {
        display: flex;
        gap: 24px;
        margin-bottom: 12px;
        align-items: center;
        justify-content: center;
    }

    .chart-legend-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        font-weight: 500;
        color: #374151;
    }

    .legend-swatch {
        width: 24px;
        height: 12px;
        border-radius: 2px;
    }

    .legend-swatch.pills {
        background: #0096c3;
    }

    .legend-swatch.frames {
        background: linear-gradient(
            135deg,
            rgba(255, 0, 0, 0.3) 50%,
            rgba(0, 255, 0, 0.3) 50%
        );
    }

    .chart-legend-note {
        display: flex;
        justify-content: center;
        margin-bottom: 12px;
        font-size: 12px;
        font-weight: 500;
        color: #6b7280;
    }

    .chart-legend-note .slow {
        color: #dc2626;
    }

    .chart-legend-note .fast {
        color: #16a34a;
    }

    th.sortable {
        cursor: pointer;
        user-select: none;
        position: relative;
        padding-right: 18px;
    }

    th.sortable::after {
        content: '';
        position: absolute;
        right: 6px;
        opacity: 0.4;
    }

    th.sortable.sort-asc::after {
        content: '▲';
        opacity: 0.9;
    }

    th.sortable.sort-desc::after {
        content: '▼';
        opacity: 0.9;
    }
</style>
{% endblock %}

{% block sub-content %}
<div id="dispensing-tools-wrapper">
    <form id="report-filter-form" method="get">
        <div class="report-filters">
            <div class="day-filters">
                {% for d in day_options %}
                    <button
                        type="button"
                        class="day-filter-btn {% if days == d %}active{% endif %}"
                        data-days="{{ d }}"
                    >
                        {{ d }} days
                    </button>
                {% endfor %}
                <input type="hidden" name="days" id="days-input" value="{{ days }}">
            </div>

            <div class="percentage-filter">
                <label>
                    % Pills OR % Frames ≥
                    <input
                        type="number"
                        name="percentage_limit"
                        min="0"
                        step="0.1"
                        value="{{ percentage_limit }}"
                    >
                </label>
            </div>

            <div class="dafe-filter">
                <label>
                    Tower:
                    <select id="selected_dafe" name="selected_dafe" class="chosen-select">
                        <option value="ALL" {% if selected_dafe == 'ALL' %}selected{% endif %}>
                            All
                        </option>
                        {% for dafe in dafe_list %}
                            <option value="{{ dafe }}" {% if selected_dafe == dafe %}selected{% endif %}>
                                {{ dafe }}
                            </option>
                        {% endfor %}
                    </select>
                </label>
            </div>

            <button type="button" id="show-chart-btn" class="apply-filters-btn">
                Show Chart
            </button>

            <button type="submit" class="apply-filters-btn">
                Apply
            </button>
        </div>
    </form>

    <div id="report-chart-wrapper" style="display: none; margin-bottom: 24px;">
        <div class="chart-legend">
            <div class="chart-legend-item">
                <span class="legend-swatch pills"></span>
                % Pills
            </div>
            <div class="chart-legend-item">
                <span class="legend-swatch frames"></span>
                % Frames
            </div>
        </div>
        <div class="chart-legend-note">
            <span class="slow">red</span>&nbsp;=&nbsp;slower than expected
            &nbsp;•&nbsp;
            <span class="fast">green</span>&nbsp;=&nbsp;faster than expected
        </div>
        <canvas id="dispense-chart"></canvas>
    </div>

    <table class="time-table table table-bordered table-striped">
        <thead style="position: sticky; top: 0;">
            <tr class="dosis-report-header">
                <th class="sortable" data-key="drug_number">Drug Name</th>
                <th class="sortable" data-key="drug_name">Drug Name</th>
                <th class="sortable" data-key="pills">Total Pills</th>
                <th class="sortable" data-key="frames">Total Frames</th>
                <th data-key="duration_seconds">Time Taken</th>
                <th class="sortable" data-key="pill_pct">% Pills</th>
                <th class="sortable" data-key="frame_pct">% Frames</th>
                <th class="sortable" data-key="ratio">Frame to Pill Ratio</th>
                <th><i class="icon-th-list"></i></th>
            </tr>
        </thead>
        <tbody>
            {% for row in report_list %}
                <tr id="ndc-{{ row.drug_number|slugify }}-row">
                    <td>{{ row.display_drug_number }}</td>
                    <td>{{ row.drug_name }}</td>
                    <td>{{ row.pills|intcomma }}</td>
                    <td>{{ row.frames|intcomma }}</td>
                    <td>{{ row.duration }}</td>
                    <td>{{ row.pill_pct|floatformat:2 }}%</td>
                    <td>{{ row.frame_pct|floatformat:2 }}%</td>
                    <td>{{ row.ratio|floatformat:2 }}</td>
                    <td>
                        <a class="btn btn-small btn-link"
                           href="{% url 'support:support-pillsig-report' %}?drug_number={{row.drug_number|slice:':9'}}"
                           title="Pill Sig NDC"
                           target="_blank">
                            <i class="icon-hand-up"></i>
                        </a>
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}