{% extends "site.html" %}


{% block head %}
    {{ block.super }}
    <script>
        let statusTimer;


        function stopQueueTimer() {
            clearInterval(statusTimer);
        }

        function enableIdleTimer() {
            $.idleTimer({{ idle_timeout }});

            $(document).bind("idle.idleTimer", function () {
                startQueueTimer();
            });

            $(document).bind("active.idleTimer", function () {
                stopQueueTimer();
            });

        }

        function disableIdleTimer() {
            $.idleTimer('destroy');
        }

        function debounce(func, wait, immediate) {
            let timeout;
            return function () {
                const context = this, args = arguments;
                const later = function () {
                    timeout = null;
                    if (!immediate) func.apply(context, args);
                };
                const callNow = immediate && !timeout;
                clearTimeout(timeout);
                timeout = setTimeout(later, wait);
                if (callNow) func.apply(context, args);
            };
        }

        function cancel_order(req_id) {
            const req_list = [req_id];
            $.ajax({
                url: "{% url 'site:label-queue-body-refresh' %}",
                type: "POST",
                data: {
                    csrfmiddlewaretoken: '{{csrf_token}}',
                    req_list: req_list.join(),
                    action: 'cancel',
                },
                success: function (data, status, jqXHR) {
                   refresh_table()
                }
            })
        }

        // refresh table with new data
        function refresh_table() {
            let postData = $("#reportFilterForm, #labelQueueForm").serializeArray();
            const urlParams = new URLSearchParams(window.location.search);
            postData[Object.keys(postData).length.toString()] = {'name': 'sort', 'value': urlParams.get('sort') || 'None'}
            disableIdleTimer();
            const loadIcon = "<tr><td colspan=\"100\" style=\"width: 100%;\"><div class=\"loader\"></div></td></tr>";
            $('#label-queue-rep-tbody').html(loadIcon);
            $.ajax({
                url: "{% url 'site:label-queue-body-refresh' %}",
                type: "POST",
                data: postData,
                success: function (data, status, jqXHR) {
                    $('#label-queue-rep-tbody').html(data);
                    $('#total-pages').html($("#current-max-page").val());

                    // reload buttons that are lost on html refresh.
                    $("button[name^='btn-show-card-preview']").click(function (event) {
                        $('#label-preview').html('Loading label preview...');
                        $("#current_req_id").val(get_icon_button_value(event));
                        $("#request-card-preview").dialog("open");
                    });

                    $("button[name^='btn-cancel-request-']").click(function (event) {
                        event.preventDefault();
                        cancel_order($(this).val());
                    });
                    enableIdleTimer();
                }
            });
        }

        function startQueueTimer() {
            statusTimer = setInterval(function () {
                refresh_table()
            }, {{ refresh_timeout }});
        }

        // when something is search for in column filter, reload table with new value
        $(function () {
            $(".search-query").keyup(debounce(function (event) {
                refresh_table()
            }, 500));
        })

        // overwrite default print-selected-label behavior
        $(function (){
            $("#btn-force-print-selected").on( "click", function(event) {
                event.preventDefault();
                const req_list = $("#labelQueueForm input:checkbox:checked").map(function() {
                                    if (this.id !== 'check-all'){
                                        return this.id.replace('sel_ord_', '');
                                    }}).get().join();
                $.ajax({
                    url: "{% url 'site:label-queue-body-refresh' %}",
                    type: "POST",
                    data: {
                        csrfmiddlewaretoken: '{{csrf_token}}',
                        req_list: req_list,
                        action: 'print',
                    },
                    success: function (data, status, jqXHR) {
                       refresh_table()
                    }
                })
            });
        })

        // overwrite default print-selected-label behavior
        $(function (){
            $("#btn-force-cancel-selected").on( "click", function(event) {
                event.preventDefault();
                const req_list = $("#labelQueueForm input:checkbox:checked").map(function() {
                                    if (this.id !== 'check-all'){
                                        return this.id.replace('sel_ord_', '');
                                    }}).get().join();
                $.ajax({
                    url: "{% url 'site:label-queue-body-refresh' %}",
                    type: "POST",
                    data: {
                        csrfmiddlewaretoken: '{{csrf_token}}',
                        req_list: req_list,
                        action: 'cancel',
                    },
                    success: function (data, status, jqXHR) {
                       refresh_table()
                    }
                })
            });
        })

        // handle if/which action boxes should be visible or not
        $(function () {
            $("#check-all").click(function () {
                $(".selordcheckbox").prop('checked', $(this).prop('checked'));
                if ($(this).prop('checked')) {
                    $("#btn-force-print-selected").show();
                    $("#btn-force-cancel-selected").show();
                } else {
                    $("#btn-force-print-selected").hide();
                    $("#btn-force-cancel-selected").hide();
                }
            });

            $("#labelQueueForm").on('change', '.selordcheckbox', function () {
                if ($("#labelQueueForm input:checkbox:checked").length > 0) {
                    $("#btn-force-print-selected").show();
                    $("#btn-force-cancel-selected").show();
                } else {
                    $("#btn-force-print-selected").hide();
                    $("#btn-force-cancel-selected").hide();
                }
            });

            $("button[name^='btn-show-card-preview']").click(function (event) {
                $('#label-preview').html('Loading label preview...');
                $("#current_req_id").val(get_icon_button_value(event));
                $("#request-card-preview").dialog("open");
            });

            $("#request-card-preview").dialog({
                autoOpen: false,
                closeOnEscape: true,
                modal: true,
                draggable: false,
                width: 700,
                open: function (event, ui) {
                    $.ajax({
                        url: "{% url 'site:label-queue-preview-labels' %}",
                        type: "POST",
                        data: {
                            csrfmiddlewaretoken: '{{csrf_token}}',
                            req_id: $("#current_req_id").val()
                        },
                        success: function (data, status, jqXHR) {
                            $('#label-preview').html(data);
                        }
                    })
                },
                position: {my: "top", at: "top", of: window},
                buttons: [
                    {
                        text: "Close",
                        "class": 'modal-dialog-button-right',
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });

            $("button[name^='btn-cancel-request-']").click(function (event) {
                event.preventDefault();
                cancel_order($(this).val());
            });
        })

        enableIdleTimer();
    </script>
{% endblock %}

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

{% block content %}
    <div id="labelQueueReportDiv">
        {% include 'topnav.html' %}
        <form id="labelQueueForm" name="labelQueueForm" method="POST">
            <input type="hidden" name="current_req_id" id="current_req_id" value=""/>
            {% csrf_token %}
            {% if pdfrender != 'True' %}
                {% if show_protected_items %}
                    <div id="multi-select-action">
                        <span style="float: right;">
                            <button id="btn-force-print-selected" name="btn-force-print-selected" class="btn" style="display: none;">Print Selected Labels</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <button id="btn-force-cancel-selected" name="btn-force-cancel-selected" class="btn" style="display: none;">Cancel Selected Labels</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            {% if not hide_print_buttons %}
                            <button id="btn-force-print-all" name="btn-force-print-all" class="btn">Print All Labels</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <button id="btn-force-print-cycle" name="btn-force-print-cycle" class="btn">Print Cycle Labels</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <button id="btn-force-print-demand" name="btn-force-print-demand" class="btn">Print Demand Labels</button>
                            {% endif %}
                        </span>
                    </div>
                {% endif %}
            {% endif %}

            <table id="label-queue-table" class="table table-bordered">
                <thead style="position: sticky; top: 0;">
                <tr class="dosis-report-header">
                    <th>{% if show_protected_items %}<input type="checkbox" name="check-all" id="check-all"/>{% endif %}</th>
                    {% include 'report-table-header.html' %}
                    {% if pdfrender != 'True' %}
                    <th><i class="icon-list"></i></th>
                    {% endif %}
                </tr>
                {% if pdfrender != 'True' %}
                <tr class="dosis-report-header">
                    <th>&nbsp;</th>
                    {% for head in report_header %}
                        <th style="padding: 2px;">{% if head.allow_col_filter %}<input type="text" class="search-query queue-col-search" style="width: {{ head.filter_length }}em;"
                                                         id="col-filter-{{ head.db_column }}" name="col-filter-{{ head.db_column }}" value="{{ head.col_filter_val }}">{% endif %}</th>
                    {% endfor %}
                    <th>&nbsp;</th>
                </tr>
                {% endif %}
                </thead>
                <tbody id="label-queue-rep-tbody">
                    {% include 'label-queue-rep-body.html' %}
                </tbody>
            </table>
        </form>
        <div id="request-card-preview" title="Card Preview" style="margin-left: 2px;">
            <div id="workorder-card-preview-content">
                <div>
                    <table style="margin: 0 auto; width: 450px; height: 250px;">
                        <tr>
                            <td id="label-preview">
                                Loading label preview...
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    {% include 'bottomnav.html' %}
    </div>
{% endblock %}