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

{% block head %}
{{ block.super }}
<script>
    $(function () {
        let active_status_filter = null;
        let debounce_timer = null;
        let $exception_input = $('#exception_filter');

        function row_matches_status($row) {
            if (!active_status_filter) {
                return true;
            }

            if (active_status_filter === 'DUSTY') {
                return $row.data('dusty') === 1;
            }

            if (active_status_filter === 'NEVER_RAN') {
                return $row.data('never-ran') === 1;
            }

            return $row.data('status') === active_status_filter;
        }

        function row_matches_search($row) {
            let matches = true;

            $('.queue-col-search').each(function () {
                let $input = $(this);
                let query = $input.val().trim().toLowerCase();

                if (!query) {
                    return;
                }

                let col_index = $input.closest('th').index();
                let cell_text = $row.children('td').eq(col_index).text().toLowerCase();

                if (cell_text.indexOf(query) === -1) {
                    matches = false;
                    return false;
                }
            });

            return matches;
        }


        function apply_all_filters() {
            $('#report-table tbody tr').each(function () {
                let $row = $(this);
                let visible = row_matches_status($row) && row_matches_search($row);
                $row.toggle(visible);
            });
        }

        /* ---------- Status filter buttons ---------- */
        $('#status-filters button').on('click', function () {
            let filter = $(this).data('filter');

            if (active_status_filter === filter) {
                active_status_filter = null;
                $('#status-filters button').removeClass('active');
            } else {
                active_status_filter = filter;
                $('#status-filters button').removeClass('active');
                $(this).addClass('active');
            }

            apply_all_filters();
        });

        /* ---------- Column search (debounced) ---------- */
        $('.queue-col-search').on('input', function () {
            clearTimeout(debounce_timer);

            debounce_timer = setTimeout(function () {
                apply_all_filters();
            }, 150);
        });


        /* ---------- Exception buttons ---------- */
        $('#exception-filters button').on('click', function () {
            let value = $(this).data('exception');

            $exception_input.val(value);
            $exception_input.trigger('input');
        });


        /* ---------- clear button ---------- */
        $('#clear-col-filters').on('click', function () {
            $('.queue-col-search').val('');
            $('#status-filters button').removeClass('active');
            active_status_filter = null;
            $('.queue-col-search').first().trigger('input');
        });


        /* ---------- Sort headers ---------- */
        let sort_state = {
            column_index: null,
            direction: 'asc'
        };

        function get_cell_value($row, index) {
            let text = $row.children('td').eq(index).text().trim();

            // percentage
            if (text.endsWith('%')) {
                return parseFloat(text.replace('%', '')) || 0;
            }

            // number
            if (!isNaN(text) && text !== '') {
                return parseFloat(text);
            }

            return text.toLowerCase();
        }

        $('#report-table thead').on('click', 'th.sortable', function () {
            let $th = $(this);
            let index = $th.index();
            let $tbody = $('#report-table-body');
            let $rows = $tbody.children('tr').get();

            // toggle direction
            if (sort_state.column_index === index) {
                sort_state.direction = sort_state.direction === 'asc' ? 'desc' : 'asc';
            } else {
                sort_state.column_index = index;
                sort_state.direction = 'asc';
            }

            // reset header states
            $('th.sortable')
                .removeClass('sorted-asc sorted-desc');

            $th.addClass(
                sort_state.direction === 'asc' ? 'sorted-asc' : 'sorted-desc'
            );

            $rows.sort(function (a, b) {
                let a_val = get_cell_value($(a), index);
                let b_val = get_cell_value($(b), index);

                if (a_val < b_val) return sort_state.direction === 'asc' ? -1 : 1;
                if (a_val > b_val) return sort_state.direction === 'asc' ? 1 : -1;
                return 0;
            });

            $.each($rows, function (_, row) {
                $tbody.append(row);
            });
        });
    });
</script>

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

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

    #tables-container {
        width: 84%;
        display: flex;
        gap: 12px;
    }

    /* STYLE table rows */
    tr.good {
        background-color: rgba(0, 255, 0, .3);
    }

    tr.warning {
        background-color: rgba(255, 165, 0, .3);
    }

    tr.critical {
        background-color: rgba(255, 0, 0, .3);
    }

    tr.never-ran {
        background-color: rgba(224, 224, 224);
    }

    .table tbody tr > td.dusty {
        background-color: #fff9c4;
    }

    .table tbody tr.warning > td:not(.dusty) {
        background-color: inherit;
    }

    /* Buttons above table */
    .status-bar {
        display: flex;
        gap: 12px;
        margin-bottom: 12px;
        margin-top: 12px;
        justify-content: center;
    }

    .status-btn {
        min-width: 90px;
        padding: 10px 12px;
        border-radius: 6px;
        border: 2px solid transparent;
        font-weight: 600;
        text-align: center;
        cursor: pointer;
        background-color: rgba(0, 0, 0, 0.03);
    }

    .status-btn.good {
        background-color: rgba(0, 255, 0, 0.35);
        border-color: rgba(0, 180, 0, 0.9);
    }

    .status-btn.warning {
        background-color: rgba(255, 165, 0, 0.35);
        border-color: rgba(220, 140, 0, 0.9);
    }

    .status-btn.critical {
        background-color: rgba(255, 0, 0, 0.35);
        border-color: rgba(200, 0, 0, 0.9);
    }

    .status-btn.dusty {
        background-color: #fff9c4;
        border-color: #d4b106;
    }

    .status-btn.never-ran {
        background-color: rgba(224, 224, 224, 0.6);
        border-color: rgba(160, 160, 160, 0.9);
    }

    .status-btn.active {
        border-width: 4px;
        transform: translateY(-1px);
    }

    .status-btn:hover {
        filter: brightness(0.95);
    }

    /* Table Sorting */
    th.sortable {
        cursor: pointer;
        user-select: none;
    }

    th.sortable .sort-indicator {
        margin-left: 6px;
        font-size: 0.8em;
        opacity: 0.6;
    }

    th.sortable.sorted-asc .sort-indicator::after {
        content: '▲';
    }

    th.sortable.sorted-desc .sort-indicator::after {
        content: '▼';
    }

    /* 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);
    }

    /* Exception buttons */
    .exception-bar {
        display: flex;
        gap: 8px;
        margin: 8px 0 12px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .exception-bar button {
        padding: 4px 8px;
        font-size: 0.85em;
        border-radius: 4px;
        border: 1px solid #ccc;
        background-color: #f8f9fa;
        cursor: pointer;
    }

    /* Clear Button */
    .clear-filters-cell {
        text-align: center;
        vertical-align: middle;
    }

    .clear-filters-btn {
        border: 1px solid rgba(255, 255, 255, 0.6);
        background-color: rgba(255, 255, 255, 0.9);
        color: #444;
        padding: 3px 6px;
        border-radius: 4px;
        cursor: pointer;
    }

    .clear-filters-btn:hover {
        background-color: #ffffff;
        border-color: #ffffff;
        color: #000;
    }
</style>
{% endblock %}

{% block sub-content %}
<div id="dispensing-tools-wrapper">
    <div id="status-filters" class="status-bar">
        <button data-filter="GOOD" class="status-btn good">
            {{ status_counts.GOOD }}<br>Good
        </button>
        <button data-filter="DUSTY" class="status-btn dusty">
            {{ status_counts.DUSTY }}<br>Dusty
        </button>
        <button data-filter="WARNING" class="status-btn warning">
            {{ status_counts.WARNING }}<br>Warning
        </button>
        <button data-filter="CRITICAL" class="status-btn critical">
            {{ status_counts.CRITICAL }}<br>Critical
        </button>
        <button data-filter="NEVER_RAN" class="status-btn never-ran">
            {{ status_counts.NEVER_RAN }}<br>Did Not Run
        </button>
    </div>

    <div id="exception-filters" class="exception-bar">
        <button data-exception="Automation Prohibited">Automation Prohibited</button>
        <button data-exception="Automation Discouraged">Automation Discouraged</button>
        <button data-exception="Legacy">Legacy Only</button>
        <button data-exception="Dusty">Dusty</button>
        <button data-exception="Control Issues">Control Issues</button>
        <button data-exception="Detection Issues">Detection Issues</button>
        <button data-exception="Vib">Vib</button>
    </div>

    <table id="report-table" class="table table-bordered">
        <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 Name<span class="sort-indicator"></span></th>
                <th class="sortable">Exceptions<span class="sort-indicator"></span></th>
                <th class="sortable">Notes<span class="sort-indicator"></span></th>
                <th class="sortable">Alternative NDCs<span class="sort-indicator"></span></th>
                <th class="sortable">Good<span class="sort-indicator"></span></th>
                <th class="sortable">Good %<span class="sort-indicator"></span></th>
                <th class="sortable">Vib Min<span class="sort-indicator"></span></th>
                <th class="sortable">Vib Max<span class="sort-indicator"></span></th>
                <th class="sortable">Vib Matches Exception<span class="sort-indicator"></span></th>
                <th class="sortable">Total Runs<span class="sort-indicator"></span></th>
                <th class="sortable">Canister<span class="sort-indicator"></span></th>
                <th class="sortable">Dafe<span class="sort-indicator"></span></th>
                <th><i class="icon-th-list"></i></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><input id="exception_filter" 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>
                <th><input type="text" class="queue-col-search"></th>
                <th></th>
                <th><input type="text" class="queue-col-search"></th>
                <th><input type="text" class="queue-col-search"></th>
                <th>
                    <button id="clear-col-filters"
                            type="button"
                            title="Clear column filters"
                            class="clear-filters-btn">
                        <i class="icon-remove"></i>
                    </button>
                </th>
            </tr>
        </thead>
        <tbody id="report-table-body">
            {% for item in drug_exception_sig_list %}
            <tr
                class="{% if item.never_ran %}never-ran{% elif item.status == 'GOOD' %}good{% elif item.status == 'WARNING' %}warning{% else %}critical{% endif %}"
                data-status="{{ item.status }}"
                data-dusty="{{ item.is_dusty|yesno:'1,0' }}"
                data-never-ran="{{ item.never_ran|yesno:'1,0' }}"
            >
                <td data-drug-number="{{ item.drug_number }}">{{ item.display_drug_number }}</td>
                <td>{{ item.drug_name }}</td>
                <td class="{% if item.is_dusty %}dusty{% endif %}">
                    {% if item.exceptions %}
                        <ul class="exception-list">
                            {% for exc in item.exceptions %}
                                <li>{{ exc }}</li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                </td>
                <td>{{ item.notes }}</td>
                <td>
                    {% if item.alternative_ndcs %}
                        <ul class="ndc-list">
                            {% for ndc in item.alternative_ndcs %}
                                <li>{{ ndc }}</li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                </td>
                <td>{{ item.good_count }}</td>
                <td>{{ item.good_percent }}</td>
                <td>{{ item.vib_min }}</td>
                <td>{{ item.vib_max }}</td>
                <td>{{ item.vib_match }}</td>
                <td>{{ item.total_runs }}</td>
                <td><a href="{% url 'site:canister-detail-info' item.canister_id %}" title="Canister Details" target="_blank">{{ item.serial_number }}</a></td>
                <td>{{ item.dafe }}</td>
                <td>
                    <a class="btn btn-small btn-link"
                       href="{% url 'support:support-pillsig-report' %}?clear_filters=true&canister_serial={{item.serial_number}}&dafe_id={{item.dafe_id}}"
                       title="Edit Pill Sig"
                       target="_blank">
                        <i class="icon-wrench"></i>
                    </a>
                    <a class="btn btn-small btn-link"
                       href="{% url 'support:support-fill-request-report' %}?clear_filters=true&canister_serial={{item.serial_number}}&dafe_id={{item.dafe_id}}"
                       title="View Fill Requests"
                       target="_blank">
                        <i class="icon-list"></i>
                    </a>
                    <a class="btn btn-small btn-link"
                       href="{% url 'support:support-pillsig-report' %}?clear_filters=true&drug_number={{item.drug_number|slice:':9'}}"
                       title="Pill Sig NDC"
                       target="_blank">
                        <i class="icon-hand-up"></i>
                    </a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}