{{define "PageZap"}}

<i onclick="printTable()" class="fas fa-print prnt"></i></button>
<table id="ManageOrderPacient"></table>
<div class="filt"> 
    <p> Выберите дату для отображения списка
    </p>
    <p>
        <input type="date" id="OrderListDate">
</div>

<script>
let times = [
    "13:00",
    "13:36",
    "14:12",
    "14:48",
    "15:24",
];

    document.addEventListener("DOMContentLoaded", function() {
        /**
         * 
         * @type {HTMLInputElement}
         */
        let OrderListDate = document.querySelector("#OrderListDate");
        if (OrderListDate) {
            OrderListDate.onchange = getOrderList;
            OrderListDate.value = (new Date()).toISOString().slice(0, 10);
            OrderListDate.dispatchEvent(new MouseEvent("change"));
        }
    });
    function getOrderList() {
        VKKOWork.XHR.POST(function (data) {
            /**
             * @type {HTMLTableElement}
             */
             var ManageOrderPacient = document.querySelector(
                "#ManageOrderPacient"
            );

            while (ManageOrderPacient.children.length > 0) {
                ManageOrderPacient.children[0].remove();
            }

            if (data != null && "Data" in data && data.Data != null) {
                data = data.Data;
            } else {
                VKKOWork.Messenger.Show("Данные не были получены");
                return;
            }

            //o."ID", o."Name", o."Passport", o."Phone", o."Cause", a."Date", a."Time"

            ManageOrderPacient.innerHTML =
                "<tr><th>Дата</th><th>Время</th><th>Причина обращения</th><th>Посетитель</th><th>Телефон</th><th>Паспорт</th></tr>";

            for (const order of data) {
                let row = document.createElement("tr");
                row.innerHTML =
                    "<td>" +
                    order.Date.slice(0, 10) +
                    "</td><td>" +
                    times[order.Time] +
                    "</td><td>" +
                    order.Cause +
                    "</td><td>" +
                    order.Name +
                    "</td><td>" +
                    order.Phone +
                    "</td><td>" +
                    order.Passport +
                    "</td>";

                ManageOrderPacient.append(row);
            }
            ManageOrderPacient.selectedIndex = -1;
        }, "/order-select", {Date: this.value});
    }
</script>


{{end}}