{% extends "site.html" %}


{% block head %}
    {{ block.super }}
    <script>
        $(function () {
            $(document).tooltip();

            $("#reject-replen").dialog({
                autoOpen: false,
                closeOnEscape: false,
                modal: true,
                draggable: false,
                width: 1000,
                position: { my: "top", at: "top", of: window },
                open: function (event, ui) {
                    $('#reject-replen-content').html('Loading Replenishment Reject Data...');
                    $.ajax({
                        url: "{% url 'site:reject-replenishment' %}",
                        type: "POST",
                        data: {
                            csrfmiddlewaretoken: '{{csrf_token}}',
                            current_replen_id: $("#current_replen_id").val()
                        },
                        success: function (data, status, jqXHR) {
                            $('#reject-replen-content').html(data);
                        }
                    })
                },
                buttons: [
                    {
                        text: "Cancel",
                        "class": 'modal-dialog-button-right',
                        click: function () {
                            $(this).dialog("close");
                        }
                    },
                    {
                        text: "Reject",
                        "class": 'modal-dialog-button-left',
                        click: function () {
                            $("#rejectReplenForm").validate();
                            if ($("#rejectReplenForm").valid()) {
                                $("#rejectReplenForm").submit();
                                $(this).dialog("close");
                            }
                        }
                    }
                ]
            });

            $("button[id^='reject-replen-btn-']").click(function (event) {
                $("#current_replen_id").val("");
                $("#current_replen_id").val($(this).val());
                $("#reject-replen").dialog("open");
            });

            {% if select_printer_canister %}
                if (localStorage.getItem("printer-selection-verify") !== null) {
                    const select_statement = document.getElementById('printer-select');
                    select_statement.value = localStorage.getItem('printer-selection-verify');
                }
                // initial setting of local storage item, printer becomes default printer
                if (localStorage.getItem("printer-selection-verify") === null) {
                    localStorage.setItem("printer-selection-verify", $('#printer-select').val());
                }
            {% endif %}

            $("button[id^='verify-replen-btn-']").click(function (event) {
                $("#current_replen_id").val("");
                $("#current_replen_id").val($(this).val());
                $.ajax({
                    url: "{% url 'site:verify-replenishment' %}",
                    type: "GET",
                    data: {
                        page: '{{current_page}}',
                        sort: '{{current_sort}}',
                        replen_id: $(this).val(),
                        {% if select_printer_canister %}
                            printer_tag: localStorage.getItem('printer-selection-verify') || 'Default'
                        {% endif %}
                    },
                    success: function (data, status, jqXHR) {
                        window.location.href = window.location.href
                    }
                })
            });

            {% if select_printer_canister %}
                $('#printer-select').change(function (event) {
                    localStorage.setItem("printer-selection-verify", $(this).val());
                });
            {% endif %}

            $('#top_canister_serial').focus();

            $('#top_canister_serial').on('keyup', function(event) {
                if ($('#top_canister_serial').val().trim().length === 10) {
                    let serial_number = $('#top_canister_serial').val();
                    $('#id_canister_serial').val(serial_number);
                    $('#apply-filter-button').click();
                }
            })

            $('#btn-clear-canister-serial').on('click', function () {
                $('#id_canister_serial').val('');
                $('#apply-filter-button').click();
            })

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

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

{% block content %}
    <div style="display: flex; align-items: center; justify-content: space-between;">
        <div>
            <label for="top_canister_serial" style="display: inline-block;">Canister Serial:</label>
            <input type="text" name="canister_serial" style="width: 10em;" maxlength="11" id="top_canister_serial" placeholder="{{serial_number}}">
            <button id="btn-clear-canister-serial" name="btn-clear-canister-serial" title="Clear Canister Search" class="btn">Clear</button>
        </div>

        {% if error_message %}
            <div style="font-weight: bold; font-size: 1.3rem; color: red;">{{error_message}}</div>
        {% endif %}

        {% if select_printer_canister %}
        <div>
            <label for="printer-select" style="display: inline-block;">External Printer:</label>
            <select  name="printer-select" id="printer-select" style="width: auto; height: 40px; margin-bottom: 0px;">
                {% for printer in printer_list %}
                    <option value="{{ printer.tag }}">{{ printer.cups_name }}</option>
                {% endfor %}
            </select>
        </div>
        {% endif %}
    </div>
    <div>
    <form id="replensNeedingVerifyForm" name="replensNeedingVerifyForm" method="POST">
        {% csrf_token %}
        <input type="hidden" name="current_replen_id" id="current_replen_id" value=""/>
        {% include 'replens-needing-verify-rep.html' %}
    </form>
    {% include 'pagenav.html' %}
    </div>
    <div id="reject-replen" title="Reject Replenishment" style="margin-left: 2px;">
        <div id="reject-replen-content">
            Loading Replenishment Reject Data...
        </div>
    </div>
{% endblock %}