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

{% block head %}
{{ block.super }}
<script>
    $(function () {
        // filter and reload report
        $('.day-filter-btn').on('click', function () {
            let days = $(this).data('days');

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

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

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

        $('#status-filter-select').on('change', function () {
            let selected_status = $(this).val();

            if (!selected_status) {
                $('.status-block').show();
                return;
            }

            $('.status-block').each(function () {
                let heading = $(this).find('h2').text().trim();
                $(this).toggle(heading === selected_status);
            });
        });

        // searching tables
        $('.queue-col-search').on('input', function () {
            let $active_input = $(this);
            let col_index = $active_input.closest('th').index();
            let search_value = $active_input.val().toLowerCase();
            let $active_table = $active_input.closest('table');

            $('.queue-col-search').each(function () {
                if ($(this).closest('th').index() === col_index && this !== $active_input[0]) {
                    $(this).val(search_value);
                }
            });

            $('.status-table').each(function () {
                let $table = $(this);
                let visible_rows = 0;

                $table.find('tbody tr').each(function () {
                    let cell_text = $(this).find('td').eq(col_index).text().toLowerCase();
                    let match = cell_text.indexOf(search_value) !== -1;

                    $(this).toggle(match);

                    if (match) {
                        visible_rows += 1;
                    }
                });

                if (visible_rows === 0 && !$table.is($active_table)) {
                    $table.closest('.status-block').hide();
                } else {
                    $table.closest('.status-block').show();
                }
            });
        });

        // trigger manually to make sure that it filters based upon selected value on page load
        $('#status-filter-select').trigger('change');

        $(".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;
    }

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

    th > h2 {
        text-align: center;
        margin-top: 0;
        margin-bottom: 0;
    }

    /* Column search inputs */
    .status-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);
    }

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

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

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

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

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

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

    .chosen-select {
        width: 280px;
    }
</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>
                    Min Count
                    <input type="number" name="min_count" min="1" step="1" value="{{ min_count }}">
                </label>
            </div>

            <div class="status-filter">
                <label>
                    Status
                        <select id="status-filter-select" name="status-filter-select" class="chosen-select">
                            <option value="" {% if not status_filter %}selected{% endif %}>All</option>
                            {% for status in status_list %}
                                <option value="{{ status }}" {% if status == status_filter %}selected{% endif %}>
                                    {{ status }}
                                </option>
                            {% endfor %}
                        </select>
                </label>
            </div>

            <button type="submit" class="apply-filters-btn">
                Apply
            </button>
        </div>
    </form>
    {% for status, rows in status_report.items %}
        {% if rows|length > 0 %}
            <div class="status-block">
                <table class="status-table table table-bordered">
                    <colgroup>
                        <col style='width: 15%'>
                        <col style='width: 20%'>
                        <col style='width: 40%'>
                        <col style='width: 15%'>
                        <col style='width: 10%'>
                    </colgroup>
                    <thead style="position: sticky; top: 0;">
                        <tr class="dosis-report-header">
                            <th colspan="5">
                                <h2>{{ status }}</h2>
                            </th>
                        </tr>
                        <tr class="dosis-report-header">
                            <th>Canister</th>
                            <th>Canister Current Drug Number</th>
                            <th>Canister Current Drug Name</th>
                            <th>Total Count</th>
                            <th></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 type="text" class="queue-col-search"></th>
                            <th></th>
                            <th><i class="icon-th-list"></i></th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in rows %}
                            <tr>
                                <td><a href="{% url 'site:canister-detail-info' row.canister_id %}" title="Canister Details" target="_blank">{{ row.serial_number }}</a></td>
                                <td>{{ row.display_drug_number }}</td>
                                <td>{{ row.drug_name }}</td>
                                <td>{{ row.count }}</td>
                                <td>
                                    <a class="btn btn-small btn-link"
                                       href="{% url 'support:support-fill-request-report' %}?clear_filters=true&canister_serial={{row.serial_number}}&fill_status={{status}}&days={{days}}"
                                       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={{row.drug_number|slice:':9'}}"
                                       title="Pill Sig NDC"
                                       target="_blank">
                                        <i class="icon-hand-up"></i>
                                    </a>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% endif %}
    {% endfor %}
</div>
{% endblock %}