{{define "Zapis"}}

<div class="zap">
    <input required id="ONAME" placeholder="Фамилия Имя Отчество" type="text" />
    <input required id="OCAUSE" placeholder="Причина обращения" type="text" />
    <input required id="passport" placeholder="Номер паспорта" type="text" />
    <input required id="OPHONE" placeholder="Номер телефона" type="text" />
    <input required id="ODATE" type="date" />
    <select required class="time" id="OTIME"
        >Время</select
    >
    <div class="voice">
        Согласие на обработку персональных данных
        <input type="checkbox" id="accept" />
    </div>

    <button id="ButtonOrderQuery" disabled>Записаться на приём</button>
</div>
<script>
    let passport = document.querySelector("#passport");

    if (passport) {
        passport.onkeydown = function (event) {
            if (
                event.keyCode == 8 ||
                event.keyCode == 9 ||
                event.keyCode == 13 ||
                event.keyCode == 46
            ) {
                return;
            }

            if (event.keyCode > 47 && event.keyCode < 58) {
                if (11 <= this.value.length) {
                    event.preventDefault();
                    return;
                }
                let index = this.value.indexOf(" ");
                if (index != -1) {
                    this.value =
                        this.value.slice(0, index) +
                        this.value.slice(index + 1);
                }
                if (this.value.length > 3) {
                    this.value =
                        this.value.slice(0, 4) + " " + this.value.slice(4);
                }
            } else {
                event.preventDefault();
            }
        };
    }

    let accept = document.querySelector("#accept");
    if (accept) {
        accept.onchange = function () {
            let btn = document.querySelector(".zap button");
            if (btn) {
                let valid = document.querySelectorAll(".zap input:invalid");
                if (this.checked && valid.length == 0) {
                    btn.disabled = false;
                } else {
                    btn.disabled = true;
                }
            }
        };
    }

    ///////////////////////////

    function OrderQuery() {
        /**
         * @type {HTMLInputElement}
         */
        var ONAME = document.querySelector("#ONAME");
        /**
         * @type {HTMLInputElement}
         */
        var OCAUSE = document.querySelector("#OCAUSE");
        /**
         * @type {HTMLInputElement}
         */
        var OPHONE = document.querySelector("#OPHONE");
        /**
         * @type {HTMLInputElement}
         */
        var OPASSPORT = document.querySelector("#passport");
        /**
         * @type {HTMLSelectElement}
         */
        var ODATE = document.querySelector("#ODATE");
        /**
         * @type {HTMLSelectElement}
         */
        var OTIME = document.querySelector("#OTIME");

        if (ONAME.value.split(" ").length != 3) {
            VKKOWork.Messenger.Show("Вы ввели Фамили/Имя/Отчество неверно");
            return;
        }
        if (OCAUSE.value.length == 0) {
            VKKOWork.Messenger.Show("Введите причину обращения");
            return;
        }
        if (OPHONE.value.length < 11) {
            VKKOWork.Messenger.Show("Вы ввели номер телефона неверно");
            return;
        }
        if (ODATE.value.length == 0) {
            VKKOWork.Messenger.Show("Вы не выбрали дату");
            return;
        }
        if (OTIME.value.length == 0) {
            VKKOWork.Messenger.Show("Вы не выбрали время");
            return;
        }
        VKKOWork.XHR.POST(
            function (r) {
                if ("Error" in r && r.Error == null) {
                    VKKOWork.Messenger.Show("Операция успешно выполнена");
                } else {
                    VKKOWork.Messenger.Show("Ошибка: " + r.Error);
                }
            },
            "/order-insert",
            {
                Name: ONAME.value,
                Cause: OCAUSE.value,
                Phone: OPHONE.value,
                Passport: passport.value,
                Date: ODATE.value,
                Time: OTIME.value * 1,
            }
        );

        OTIME.selectedIndex = -1;
        OPASSPORT.value = ODATE.value = OPHONE.value = OCAUSE.value = ONAME.value = "";
    }
    
    let times = [
        "13:00",
        "13:36",
        "14:12",
        "14:48",
        "15:24",
    ];

    function loadTime() {
        let date = document.querySelector("#ODATE");

        if (!date) {
            return;
        }

        VKKOWork.XHR.POST(
            function (result) {
                if ("Time" in result && result.Time != null) {
                    let time = document.querySelector("#OTIME");
                    if (time) {
                        while (time.children.length > 0) {
                            time.children[0].remove();
                        }

                        for (let t of result.Time) {
                            let option = document.createElement("option");
                            option.value = t;
                            option.text = times[t];
                            time.append(option);
                        }
                    }
                }
            },
            "/order-select-time",
            { Date: date.value }
        );
    }

    /**
     * @type {HTMLButtonElement}
     */
    var Button = document.querySelector("#ButtonOrderQuery");
    if (Button) {
        Button.onclick = OrderQuery;
    }

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

            /**
             * @type {HTMLTableElement}
             */
            var ManageOrderPacient = document.querySelector(
                "#ManageOrderPacient"
            );

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

            //o."ID", o."Name", o."Reseption", o."Snils", o."Phone", a."Date", a."Time", a."Doctor"

            ManageOrderPacient.innerHTML =
                "<tr><th>Дата</th><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.Doctor +
                    "</td><td>" +
                    order.Name +
                    "</td><td>" +
                    order.Phone +
                    "</td><td>" +
                    order.Snils +
                    "</td><td>" +
                    (order.Reseption == true ? "Первичный" : "Вторичный") +
                    "</td>";

                ManageOrderPacient.append(row);
            }
            ManageOrderPacient.selectedIndex = -1;
        }, "/order-select");
    }

    var __DateSel = document.querySelector("#ODATE");
    __DateSel.onchange = loadTime;
</script>
{{end}}