{% extends "support.html" %}


{% block head %}
    {{ block.super }}
    <script>
        function update_date_mode() {
            let mode = $('#date_mode').val();

            if (mode === 'range') {
                $('#days_back_container').hide();
                $('#date_range_container').show();
                return;
            }

            $('#days_back_container').show();
            $('#date_range_container').hide();
        }

        function apply_filters() {
            let activity_value = $('#activity_filter').val();
            let status_value = $('#status_search').val().toLowerCase().replace(/[\s_]+/g, '_');
            let location_value = $('#location_search').val().toLowerCase().replace(/[\s_]+/g, '_');

            $('.activity_row').each(function () {
                let row = $(this);
                let is_alert = row.hasClass('alert_item');
                let is_wo = row.hasClass('wo_item');

                // allows space to function as _ when searching
                let status_text = row.find('td').eq(4).text().toLowerCase().replace(/[\s_]+/g, '_');

                let activity_match = true;
                let status_match = true;
                let location_match = true;

                if (activity_value === 'alerts') {
                    if (!is_alert) {
                        activity_match = false;
                    }
                }

                if (activity_value === 'workorders') {
                    if (!is_wo) {
                        activity_match = false;
                    }
                }

                if (activity_value === 'not_normal') {
                    if (is_wo && row.data('both-normal') === 1) {
                        activity_match = false;
                    }
                }

                if (activity_value === 'not_normal_not_alert') {
                    if (is_alert) {
                        activity_match = false;
                    }

                    if (is_wo && row.data('both-normal') === 1) {
                        activity_match = false;
                    }
                }

                if (status_value.length > 0) {
                    if (status_text.indexOf(status_value) === -1) {
                        status_match = false;
                    }
                }

                if (location_value.length > 0) {
                    let location_text = status_text;
                    if (!is_alert) {
                        location_text = row.find('td').eq(9).text().toLowerCase().replace(/[\s_]+/g, '_');
                    }

                    if (location_text.indexOf(location_value) === -1) {
                        location_match = false;
                    }
                }

                if (activity_match && status_match && location_match) {
                    row.show();
                } else {
                    row.hide();
                }
            });
        }

        $(function () {
            $(document).tooltip();

            $('#status_search').on('input', apply_filters);
            $('#location_search').on('input', apply_filters);
            $('#activity_filter').on('change', apply_filters);

            $('#date_mode').on('change', update_date_mode);

            $('#days_back').on('focus click', function () {
                $('#days_back_picker').trigger('showPicker');
            });

            $('#days_back_picker').on('change', function () {
                let selected_date = new Date($(this).val());
                let today = new Date();

                today.setHours(0,0,0,0);
                selected_date.setHours(0,0,0,0);

                let diff_ms = today - selected_date;
                let days = Math.floor(diff_ms / (1000 * 60 * 60 * 24));

                if (days >= 0) {
                    $('#days_back').val(days);
                }
            });

            apply_filters();
            update_date_mode();
        });
    </script>

    <style>
        .table > tbody > tr > td.item-cell {
            padding: 2px 2px 2px 8px;
        }

        .table tr.wo-row {
            background-color: white;
        }

        .activity_toolbar {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 6px 10px;
            background: #f2f2f2;
            border-radius: 4px;
            margin-bottom: 6px;
            flex-wrap: wrap;
        }

        .toolbar_group {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .toolbar_group label {
            font-weight: 600;
            font-size: 0.9em;
            margin-bottom: 0;
        }

        .toolbar_group select,
        .toolbar_group input {
            height: 30px;
        }

        #days_back {
            width: 60px;
        }

        .toolbar_button {
            margin-left: auto;
        }

        #days_back_picker {
            opacity: 0;
            width: 0;
            position: absolute;
        }
    </style>
{% endblock %}

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

{% block content %}
    <form id="sysActivityForm" name="sysActivityForm" method="POST">
        {% csrf_token %}

        <div id="dafe_select_div" class="activity_toolbar">
            <div class="toolbar_group">
                <label for="dafe_select">Tower</label>
                <select id="dafe_select" name="dafe_select">
                    {% for dafe in dafe_list %}
                        <option value="{{ dafe.id }}"
                                {% ifequal dafe.id|slugify current_dafe %}selected{% endifequal %}>
                            {{ dafe.display_name }}
                        </option>
                    {% endfor %}
                </select>
            </div>

            <div class="toolbar_group">
                <label for="date_mode">Date Mode</label>
                <select id="date_mode" name="date_mode">
                    <option value="days_back" {% if date_mode == 'days_back' %}selected{% endif %}>Days Back</option>
                    <option value="days_back_today" {% if date_mode == 'days_back_today' %}selected{% endif %}>Days Back → Today</option>
                    <option value="range" {% if date_mode == 'range' %}selected{% endif %}>Date Range</option>
                </select>
            </div>

            <div class="toolbar_group" id="days_back_container">
                <label for="days_back">Days</label>
                <input type="number" id="days_back" name="days_back" value="{{ days_back }}">
                <input type="date" id="days_back_picker">
            </div>

            <div class="toolbar_group" id="date_range_container" style="display:none;">
                <label>From</label>
                <input type="date" id="from_date" name="from_date" value="{{ from_date }}">

                <label>To</label>
                <input type="date" id="to_date" name="to_date" value="{{ to_date }}">
            </div>

            <div class="toolbar_group">
                <label for="activity_filter">Filter</label>
                <select id="activity_filter" name="activity_filter">
                    <option value="all" {% if activity_filter == 'all' %}selected{% endif %}>All</option>
                    <option value="not_normal" {% if activity_filter == 'not_normal' %}selected{% endif %}>Hide Normal Runs</option>
                    <option value="not_normal_not_alert" {% if activity_filter == 'not_normal_not_alert' %}selected{% endif %}>Hide Normal Runs + Alerts</option>
                    <option value="alerts" {% if activity_filter == 'alerts' %}selected{% endif %}>Alerts Only</option>
                    <option value="workorders" {% if activity_filter == 'workorders' %}selected{% endif %}>Runs Only</option>
                </select>
            </div>

            <div class="toolbar_group toolbar_button">
                <button class="btn btn-primary" id="select-setting-group" name="select-setting-group">
                    Show System Activity
                </button>
            </div>
        </div>

        <table id="system-activity-table" class="table table-bordered">
            <thead style="position: sticky; top: 0;">
            <tr class="dosis-report-header">
               {% include 'report-table-header.html' %}
            </tr>
            <tr class="dosis-report-header">
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th><input type="text" id="status_search" style="width: 10em;" class="search-query queue-col-search" value="" autocomplete="off"></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th><input type="text" id="location_search" style="width: 3em;" class="search-query queue-col-search" value="" autocomplete="off"></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            </thead>
            <tbody style="font-size: 10pt;">
            {% for item in result_list %}
                    <tr class="activity_row {% if item.type == 'WO' %}wo-row wo_item{% else %}dosis-yellow-background alert_item{% endif %}"
                        data-both-normal="{% if item.both_normal %}1{% else %}0{% endif %}">
                    <td class="item-cell">{{ item.timestamp|date:"m/d/Y h:i:s A" }}</td>
                    <td class="item-cell">{{ item.id }}</td>
                    <td class="item-cell">{{ item.fill_id }}</td>
                    <td class="item-cell">{{ item.pack_id }}</td>
                    {% if item.type == 'WO' %}
                        <td class="item-cell">{{ item.status }}</td>
                        <td class="item-cell">{{ item.frames }}</td>
                        <td class="item-cell">{{ item.seconds|floatformat:"-2" }}</td>
                        <td class="item-cell">{{ item.req_qty }}</td>
                        <td class="item-cell">{{ item.disp_qty }}</td>
                        <td class="item-cell">{{ item.can_pos }}</td>
                        <td class="item-cell">{{ item.serial }}</td>
                        <td class="item-cell">{{ item.drug_num }}</td>
                        <td class="item-cell">{{ item.drug_name }}</td>
                        <td class="item-cell">{{ item.shape }}</td>
                        <td class="item-cell">{{ item.color }}</td>
                    {% elif item.type == 'ALERT' %}
                        <td class="item-cell" colspan="11">{{ item.status }}</td>
                    {% endif %}
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </form>
{% endblock %}