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

{% block head %}
{{ block.super }}
<script>
    const FILL_REQUEST_URL = "{% url 'support:support-fill-request-report' %}";
    const PILL_SIG_URL = "{% url 'support:support-pillsig-report' %}";
    let ndc_data = {{ ndc_json|safe }};

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

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

    function format_datetime(value) {
        let d = new Date(value)

        return d.toLocaleString(undefined, {
            year: 'numeric',
            month: 'short',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
        })
    }

    function get_location_class(total, non_normal) {
        if (!total || total === 0) {
            return 'can-grey'
        }

        let bad_pct = (non_normal / total) * 100

        if (bad_pct > 5) {
            return 'can-red'
        }
        if (bad_pct >= 2) {
            return 'can-orange'
        }
        return 'can-blue'
    }


    function with_bad_pct(list) {
        return list.map(function (item) {
            let total = item.total || 0
            let non_normal = item.non_normal || 0

            item.bad_pct = total > 0
                ? (non_normal / total) * 100
                : 0

            return item
        }).sort(function (a, b) {
            return b.bad_pct - a.bad_pct
        })
    }


    function render_tower_map_html(ndc, tower) {
        let tower_data = ndc_data[ndc].towers[tower]
        let locations = tower_data.locations

        let html = ''

        for (let row of ['A', 'B', 'C', 'D', 'E']) {
            html += '<div class="map-row" style="white-space: nowrap">'

            for (let col = 1; col <= 12; col++) {
                let location = row + col
                let loc = locations[location]

                let total = loc ? loc.total : 0
                let non_normal = loc ? loc.non_normal : 0
                let oldest = loc ? loc.oldest_fill : null
                let newest = loc ? loc.newest_fill : null
                let cls = get_location_class(total, non_normal)

                html += `
                    <div class="canister col btn ${cls}"
                         data-location="${location}"
                         data-total="${total}"
                         data-non-normal="${non_normal}"
                         data-oldest="${oldest || ''}"
                         data-newest="${newest || ''}"
                         style="padding-left: 2px; padding-right: 2px; margin: 2px;">
                        <div class="name">${location}</div>
                        <i class="icon-white icon-2x"></i>
                    </div>
                `
            }

            html += '</div>'
        }

        return html
    }

    function render_ndc_summary() {
        let rows = []

        $.each(ndc_data, function (_, data) {
            let total = data.total || 0
            let non_normal = data.non_normal || 0

            let bad_pct = total > 0
                ? (non_normal / total) * 100
                : 0

            rows.push({
                display_drug_number: data.display_drug_number,
                drug_name: data.drug_name,
                total: total,
                normal: data.normal,
                non_normal: non_normal,
                bad_pct: bad_pct
            })
        })

        // worst first
        rows.sort(function (a, b) {
            return b.total - a.total
        })

        let body = $('#ndc-summary-body').empty()

        rows.forEach(function (row) {
            body.append(`
                <tr>
                    <td>${row.display_drug_number}</td>
                    <td>${row.drug_name}</td>
                    <td>${row.total}</td>
                    <td>${row.normal}</td>
                    <td>${row.non_normal}</td>
                    <td>${row.bad_pct.toFixed(2)}%</td>
                    <td>
                        <button class="btn btn-small view-towers"
                                data-ndc="${row.display_drug_number}"
                                data-drug-name="${row.drug_name}">
                            Towers
                        </button>
                        <button class="btn btn-small view-canisters"
                                data-ndc="${row.display_drug_number}"
                                data-drug-name="${row.drug_name}">
                            Canisters
                        </button>
                    </td>
                </tr>
            `)
        })
    }

    function render_tower_view(ndc) {
        let towers = []

        $.each(ndc_data[ndc].towers, function (tower, data) {
            towers.push({
                tower: tower,
                total: data.total,
                normal: data.normal,
                non_normal: data.non_normal
            })
        })

        towers = with_bad_pct(towers)

        towers.sort(function (a, b) {
            return b.total - a.total
        })

        let html = `
            <table class="table table-bordered table-striped">
                <thead style="position: sticky; top: 0;">
                    <tr class="dosis-report-header">
                        <th>Tower</th>
                        <th>Total Fills</th>
                        <th>Normal Fills</th>
                        <th>Error Fills</th>
                        <th>Error Rate</th>
                        <th>View</th>
                    </tr>
                </thead>
                <tbody>
        `

        towers.forEach(function (t) {
            html += `
                <tr class="tower-row">
                    <td>${t.tower}</td>
                    <td>${t.total}</td>
                    <td>${t.normal}</td>
                    <td>${t.non_normal}</td>
                    <td>${t.bad_pct.toFixed(2)}%</td>
                    <td>
                        <button class="btn btn-small toggle-tower-map"
                                data-ndc="${ndc}"
                                data-tower="${t.tower}">
                            Map
                        </button>
                    </td>
                </tr>
                <tr class="tower-map-row" style="display:none;">
                    <td colspan="6">
                        <div class="tower-map-layout">
                            <div class="tower-map-container"></div>

                            <div class="location-detail empty">
                                <div class="location-detail-title">
                                    Select a location
                                </div>

                                <div class="location-detail-body">
                                    <div>Total Runs: —</div>
                                    <div>Normal Runs: —</div>
                                    <div>Error Runs: —</div>
                                    <div>Error Rate: —</div>
                                </div>
                            </div>
                        </div>
                        <div class="tower-map-controls">
                            <label>
                                Min runs:
                                <input
                                    type="range"
                                    class="min-runs-slider"
                                    min="1"
                                    step="1"
                                >
                                <span class="min-runs-value"></span>
                            </label>
                        </div>
                    </td>
                </tr>
            `
        })

        html += '</tbody></table>'
        return html;
    }


    function render_canister_map_html(ndc, tower, serial) {
        let locations = ndc_data[ndc].towers[tower].locations
        let html = ''

        for (let row of ['A', 'B', 'C', 'D', 'E']) {
            html += '<div class="map-row" style="white-space: nowrap">'

            for (let col = 1; col <= 12; col++) {
                let location = row + col
                let loc = locations[location]
                let can = loc && loc.canisters
                    ? loc.canisters[serial]
                    : null

                let total = can ? can.total : 0
                let non_normal = can ? can.non_normal : 0
                let oldest = can ? can.oldest_fill : null
                let newest = can ? can.newest_fill : null

                let cls = get_location_class(total, non_normal)

                html += `
                    <div class="canister col btn ${cls}"
                         data-location="${location}"
                         data-total="${total}"
                         data-non-normal="${non_normal}"
                         data-oldest="${oldest || ''}"
                         data-newest="${newest || ''}"
                         style="padding-left:2px;padding-right:2px;margin:2px;">
                        <div class="name">${location}</div>
                        <i class="icon-white icon-2x"></i>
                    </div>
                `
            }

            html += '</div>'
        }

        return html
    }

    function render_canister_dafe_rows(canister, ndc) {
        let rows = Object.values(canister.by_dafe)

        rows.sort(function (a, b) {
            return b.total - a.total
        })

        let html = ''

        rows.forEach(function (r) {
            let bad_pct = r.total > 0
                ? (r.non_normal / r.total) * 100
                : 0

            html += `
                <tr class="canister-dafe-row"
                    data-ndc="${ndc}"
                    data-tower="${r.dafe}"
                    data-serial="${canister.serial}">
                    <td style="padding-left:32px;">
                        ↳ ${r.dafe}
                    </td>
                    <td>${r.total}</td>
                    <td>${r.normal}</td>
                    <td>${r.non_normal}</td>
                    <td>${bad_pct.toFixed(2)}%</td>
                    <td>
                        <button class="btn btn-small toggle-canister-map">
                            Map
                        </button>
                    </td>
                </tr>

                <tr class="canister-map-row" style="display:none;">
                    <td colspan="6">
                        <div class="tower-map-layout">
                            <div class="tower-map-container"></div>

                            <div class="location-detail empty">
                                <div class="location-detail-title">
                                    Select a location
                                </div>
                                <div class="location-detail-body"></div>
                            </div>
                        </div>

                        <div class="tower-map-controls">
                            <label>
                                Min runs:
                                <input type="range"
                                       class="min-runs-slider"
                                       min="1"
                                       step="1">
                                <span class="min-runs-value"></span>
                            </label>
                        </div>
                    </td>
                </tr>
            `
        })

        return html
    }

    function render_canister_view(ndc) {
        let canister_map = {}

        $.each(ndc_data[ndc].towers, function (tower, t) {
            let dafe_id = t.dafe_id

            $.each(t.locations, function (_, loc) {
                $.each(loc.canisters, function (serial, c) {
                    if (!canister_map[serial]) {
                        canister_map[serial] = {
                            serial: serial,
                            total: 0,
                            normal: 0,
                            non_normal: 0,
                            by_dafe: {}
                        }
                    }

                    let entry = canister_map[serial]
                    entry.total += c.total
                    entry.normal += c.normal
                    entry.non_normal += c.non_normal

                    if (!entry.by_dafe[dafe_id]) {
                        entry.by_dafe[dafe_id] = {
                            dafe: tower,
                            dafe_id: dafe_id,
                            total: 0,
                            normal: 0,
                            non_normal: 0
                        }
                    }

                    entry.by_dafe[dafe_id].total += c.total
                    entry.by_dafe[dafe_id].normal += c.normal
                    entry.by_dafe[dafe_id].non_normal += c.non_normal
                })
            })
        })

        let rows = Object.values(canister_map).sort(function (a, b) {
            return b.total - a.total
        })

        let html = `
            <table class="table table-bordered table-striped">
                <thead style="position: sticky; top: 0;">
                    <tr class="dosis-report-header">
                        <th>Canister</th>
                        <th>Total Fills</th>
                        <th>Normal Fills</th>
                        <th>Error Fills</th>
                        <th>Error Rate</th>
                        <th>View</th>
                    </tr>
                </thead>
                <tbody>
        `

        rows.forEach(function (r) {
            let bad_pct = r.total > 0
                ? (r.non_normal / r.total) * 100
                : 0

            html += `
                <tr class="canister-row">
                    <td>${r.serial}</td>
                    <td>${r.total}</td>
                    <td>${r.normal}</td>
                    <td>${r.non_normal}</td>
                    <td>${bad_pct.toFixed(2)}%</td>
                    <td>
                        <button class="btn btn-small toggle-canister"
                                data-serial="${r.serial}">
                            <i class="icon-plus"></i>
                        </button>
                    </td>
                </tr>
                ${render_canister_dafe_rows(r, ndc)}
            `
        })

        html += '</tbody></table>'
        return html
    }

    function reset_location_detail(scope) {
        scope.find('.location-detail')
            .addClass('empty')
            .find('.location-detail-title')
            .text('Select a location')

        scope.find('.location-detail-body').html(`
            <div>Total Runs: —</div>
            <div>Normal Runs: —</div>
            <div>Error Runs: —</div>
            <div>Error Rate: —</div>
        `)
    }

    function open_ndc_modal(title, html) {
        $('#ndc-modal-title').text(title)
        $('#ndc-modal-body').html(html)
        $('#ndc-modal').removeClass('hidden')
    }

    function close_ndc_modal() {
        $('#ndc-modal').addClass('hidden')
        $('#ndc-modal-body').empty()
    }

    function get_cell_value(row, index) {
        return $(row).children('td').eq(index).text().trim()
    }

    function compare_values(a, b, is_numeric, asc) {
        if (is_numeric) {
            a = parseFloat(a.replace('%', '')) || 0
            b = parseFloat(b.replace('%', '')) || 0
        }
        if (a < b) {
            return asc ? -1 : 1
        }
        if (a > b) {
            return asc ? 1 : -1
        }
        return 0
    }

    $(function () {
        let table = $('#ndc-app table')
        let tbody = table.find('tbody')

        // ---------- SORTING ----------
        table.find('th.sortable').each(function (index) {
            let th = $(this)
            th.data('asc', false)

            th.on('click', function () {
                let asc = !th.data('asc')
                th.data('asc', asc)

                table.find('.sort-indicator').text('')
                th.find('.sort-indicator').text(asc ? ' ▲' : ' ▼')

                let rows = tbody.find('tr').get()
                let is_numeric = index >= 2

                rows.sort(function (a, b) {
                    let a_val = get_cell_value(a, index)
                    let b_val = get_cell_value(b, index)
                    return compare_values(a_val, b_val, is_numeric, asc)
                })

                $.each(rows, function (_, row) {
                    tbody.append(row)
                })
            })
        })

        // ---------- COLUMN SEARCH ----------
        table.find('.queue-col-search').on('input', function () {
            let inputs = table.find('.queue-col-search')

            tbody.find('tr').each(function () {
                let row = $(this)
                let visible = true

                inputs.each(function (index) {
                    let value = $(this).val().toLowerCase()
                    if (!value) {
                        return
                    }

                    let cell_text = row.children('td').eq(index).text().toLowerCase()
                    if (!cell_text.includes(value)) {
                        visible = false
                    }
                })

                row.toggle(visible)
            })
        })

        render_ndc_summary();

        $(document).on('click', '.view-towers', function () {
            let ndc = $(this).data('ndc')
            let drug_name = $(this).data('drug-name')
            let html = render_tower_view(ndc)
            let title = ndc + ' : ' + drug_name + ' : Towers'
            open_ndc_modal(title, html)
        })

        $(document).on('click', '.view-canisters', function () {
            let ndc = $(this).data('ndc')
            let drug_name = $(this).data('drug-name')
            let html = render_canister_view(ndc)
            let title = ndc + ' : ' + drug_name + ' : Canisters'
            open_ndc_modal(title, html)
        })

        $(document).on('click', '.toggle-canister', function (e) {
            e.preventDefault()

            let button = $(this)
            let icon = button.find('i')
            let row = button.closest('tr')

            let is_open = row.hasClass('expanded')

            // close ALL open canisters and maps first
            $('tr.canister-row.expanded').each(function () {
                let r = $(this)

                r.removeClass('expanded')

                // hide dafe rows
                r.nextUntil('tr.canister-row', '.canister-dafe-row').hide()

                // hide any open maps under those dafe rows
                r.nextUntil('tr.canister-row', '.canister-map-row')
                    .hide()
                    .find('.tower-map-container')
                    .empty()

                r.find('.toggle-canister i')
                    .removeClass('icon-minus')
                    .addClass('icon-plus')
            })

            // if this one was already open, we're done
            if (is_open) {
                return
            }

            // open this canister
            row.addClass('expanded')
            row.nextUntil('tr.canister-row', '.canister-dafe-row').show()
            icon.removeClass('icon-plus').addClass('icon-minus')
        })

        $(document).on('click', '.toggle-tower-map', function () {
            let btn = $(this)
            let ndc = btn.data('ndc')
            let tower = btn.data('tower')

            let tower_row = btn.closest('tr')
            let map_row = tower_row.next('.tower-map-row')
            let container = map_row.find('.tower-map-container')

            // collapse if already open
            if (map_row.is(':visible')) {
                map_row.hide()
                container.empty()
                return
            }

            // close any other open maps
            $('.tower-map-row').hide().find('.tower-map-container').empty()

            // render map
            let map_container = map_row.find('.tower-map-container')
            map_container.html(render_tower_map_html(ndc, tower))
            map_row.attr('data-ndc', ndc).attr('data-tower', tower)

            // determine max total for slider
            let max_total = 1
            map_container.find('.canister').each(function () {
                let total = Number($(this).data('total')) || 0
                if (total > max_total) {
                    max_total = total
                }
            })
            let slider = map_row.find('.min-runs-slider')
            let default_min = Number($('#min-count').val()) || 1

            slider.attr('max', max_total)

            // clamp default to max
            let initial_value = default_min > max_total
                ? max_total
                : default_min

            slider.val(initial_value)
            map_row.find('.min-runs-value').text(initial_value)
            // apply filtering immediately
            slider.trigger('change')

            reset_location_detail(map_row)
            map_row.show()
        })


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

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

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

        $('#ndc-modal-close').on('click', close_ndc_modal)
        $('.ndc-modal-backdrop').on('click', close_ndc_modal)
        $(document).on('keydown', function (e) {
            if (e.key === 'Escape') {
                close_ndc_modal()
            }
        })

        $(document).on('click', '.canister', function () {
            let canister = $(this)

            let map_row = canister.closest('.tower-map-row, .canister-map-row')
            map_row.find('.canister').css('box-shadow', 'none')

            // ignore empty locations, but reset details
            if (canister.hasClass('can-grey')) {
                reset_location_detail(map_row)
                map_row.find('.canister').css('box-shadow', 'none')
                return
            }

            canister.css('box-shadow', '0px 0px 3px 4px orange')

            let location = canister.data('location')
            let total = Number(canister.data('total')) || 0
            let non_normal = Number(canister.data('non-normal')) || 0
            let normal = total - non_normal
            let bad_pct = total > 0 ? (non_normal / total) * 100 : 0
            let oldest = format_datetime(canister.data('oldest'))
            let newest = format_datetime(canister.data('newest'))

            let ndc = map_row.data('ndc')
            let tower = map_row.data('tower')
            let serial = map_row.data('serial')

            let days = Number($('#days-input').val()) || 0
            let drug_number = ndc_data[ndc].drug_number.slice(0, 9)
            let dafe_id = ndc_data[ndc].towers[tower].dafe_id

            let base_params = {
                clear_filters: 'true',
                dafe_id: dafe_id,
                location: location,
                drug_number: drug_number,
                days: days
            }

            let base_sig_params = {
                clear_filters: 'true',
                dafe_id: dafe_id,
                drug_number: drug_number
            }

            if (serial) {
                base_params.canister_serial = serial
                base_sig_params.canister_serial = serial
            }

            let url = build_fill_request_url(base_params)

            let url_not_normal = build_fill_request_url({
                ...base_params,
                fill_status: 'NOT_NORMAL'
            })

            let url_pill_sig = build_pill_sig_url(base_sig_params)

            let detail = map_row.find('.location-detail')

            detail.removeClass('empty')
            detail.find('.location-detail-title').text(`Location ${location}${serial ? ' – Canister ' + serial : ''}`)

            detail.find('.location-detail-body').html(`
                <div>Total Runs: ${total}</div>
                <div>Normal Runs: ${normal}</div>
                <div>Error Runs: ${non_normal}</div>
                <div>Error Rate: ${bad_pct.toFixed(2)}%</div>
                <div>Oldest Fill: ${oldest}</div>
                <div>Newest Fill: ${newest}</div>

                <div style="margin-top: 12px;">
                    <a href="${url}" class="btn btn-small btn-primary" target="_blank">
                        View Fill Requests
                    </a>
                </div>
                <div style="margin-top: 8px;">
                    <a href="${url_not_normal}" class="btn btn-small btn-danger" target="_blank">
                        View Error Fill Requests
                    </a>
                </div>
                <div style="margin-top: 8px;">
                    <a href="${url_pill_sig}" class="btn btn-small btn-primary" target="_blank">
                        View Pill Sigs
                    </a>
                </div>
            `)
        })

        $(document).on('input change', '.min-runs-slider', function () {
            let slider = $(this)
            let min_runs = Number(slider.val())

            // works for BOTH tower-map-row and canister-map-row
            let scope = slider.closest('.tower-map-row, .canister-map-row')

            slider.closest('.tower-map-controls')
                .find('.min-runs-value')
                .text(min_runs)

            scope.find('.canister').each(function () {
                let canister = $(this)

                // never dim empty locations
                if (canister.hasClass('can-grey')) {
                    canister.css('opacity', '1')
                    return
                }

                let total = Number(canister.data('total')) || 0

                if (total < min_runs) {
                    canister.css('opacity', '0.40')
                } else {
                    canister.css('opacity', '1')
                }
            })
        })

        $(document).on('click', '.toggle-canister-map', function () {
            let btn = $(this)
            let dafe_row = btn.closest('tr.canister-dafe-row')
            let map_row = dafe_row.next('.canister-map-row')

            let ndc = dafe_row.data('ndc')
            let tower = dafe_row.data('tower')
            let serial = dafe_row.data('serial')

            let map_container = map_row.find('.tower-map-container')

            // collapse
            if (map_row.is(':visible')) {
                map_row.hide()
                map_container.empty()
                return
            }

            // close any other open canister maps
            $('.canister-map-row').hide().find('.tower-map-container').empty()

            // render map
            map_container.html(
                render_canister_map_html(ndc, tower, serial)
            )

            map_row
                .attr('data-ndc', ndc)
                .attr('data-tower', tower)
                .attr('data-serial', serial)

            // slider setup
            let max_total = 1
            map_container.find('.canister').each(function () {
                let total = Number($(this).data('total')) || 0
                if (total > max_total) {
                    max_total = total
                }
            })

            let slider = map_row.find('.min-runs-slider')
            let default_min = Number($('#min-count').val()) || 1
            let initial_value = default_min > max_total ? max_total : default_min

            slider.attr('max', max_total).val(initial_value)
            map_row.find('.min-runs-value').text(initial_value)

            slider.trigger('change')

            reset_location_detail(map_row)
            map_row.show()
        })
    });
</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);
    }

    .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;
    }

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

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

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

    /* NDC Modal popup*/
    .ndc-modal.hidden {
        display: none;
    }

    .ndc-modal {
        position: fixed;
        inset: 0;
        z-index: 9999;
    }

    .ndc-modal-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
    }

    .ndc-modal-content {
        position: relative;
        background: #ffffff;
        width: 90%;
        max-width: 1200px;
        max-height: 90vh;
        margin: 5vh auto;
        border-radius: 10px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .ndc-modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        border-bottom: 1px solid #e5e7eb;
    }

    .ndc-modal table {
        table-layout: fixed;
        width: 100%;
    }

    .ndc-modal thead {
        position: relative;
        z-index: 2;
    }

    .ndc-modal tbody {
        position: relative;
        z-index: 1;
    }

    #ndc-modal-body {
        padding: 0 16px 16px;
        overflow-y: auto;
    }

    /* canister map data */
    .tower-map-layout {
        display: flex;
        gap: 24px;
        justify-content: center;
    }

    .location-detail {
        min-width: 260px;
        padding: 12px 14px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background: #f9fafb;
        font-size: 13px;
    }

    .location-detail.empty {
        opacity: 0.6;
    }

    .location-detail-title {
        font-weight: 600;
        margin-bottom: 10px;
    }

    .canister-dafe-row {
        background-color: #f9fafb;
        font-size: 13px;
    }

    .canister-dafe-row td {
        border-top: none;
    }

    .canister-dafe-row {
        display: none;
        background-color: #f9fafb;
        font-size: 13px;
    }

    th.sortable {
        cursor: pointer;
        user-select: none;
    }

    .sort-indicator {
        font-size: 11px;
        margin-left: 4px;
        opacity: 0.7;
    }

    /* Column search inputs */
    #report-table thead tr th input.queue-col-search {
        width: 90%;
        margin: 0;
        border-radius: 15px;
        padding: 4px 4px 4px 8px;
    }

    .queue-col-search:focus {
        outline: none;
        border-color: #ffffff;
        background-color: #ffffff;
    }

    .queue-col-search::placeholder {
        color: rgba(0, 0, 0, 0.4);
    }
</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="count-filter">
                <label>
                    Default Slider Value
                    <input id="min-count" type="number" name="min_count" min="1" step="1" value="{{ min_count }}">
                </label>
            </div>

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

    <div id="ndc-app">
        <table id="report-table" class="table table-bordered table-striped">
            <thead style="position: sticky; top: 0;">
                <tr class="dosis-report-header">
                    <th class="sortable">NDC<span class="sort-indicator"></span></th>
                    <th class="sortable">Drug<span class="sort-indicator"></span></th>
                    <th class="sortable">Total Fills<span class="sort-indicator"></span></th>
                    <th class="sortable">Normal Fills<span class="sort-indicator"></span></th>
                    <th class="sortable">Error Fills<span class="sort-indicator"></span></th>
                    <th class="sortable">Error Rate<span class="sort-indicator"></span></th>
                    <th>View</th>
                </tr>
                <tr class="dosis-report-header">
                    <th><input type="text" class="queue-col-search"></th>
                    <th><input type="text" class="queue-col-search"></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
            </thead>
            <tbody id="ndc-summary-body"></tbody>
        </table>
    </div>
</div>

<div id="ndc-modal" class="ndc-modal hidden">
    <div class="ndc-modal-backdrop"></div>

    <div class="ndc-modal-content">
        <div class="ndc-modal-header">
            <h4 id="ndc-modal-title"></h4>
            <button type="button" id="ndc-modal-close" class="btn btn-small">
                ✕
            </button>
        </div>

        <div id="ndc-modal-body"></div>
    </div>
</div>

{% endblock %}