<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dormitories - Form</title>
    <style>
        * {
            font-family: Verdana, Geneva, Tahoma, sans-serif;
        }

        button {
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            background-image: linear-gradient(to top, rgb(207, 207, 207) 16%, rgb(252, 252, 252) 79%);
            padding: 3px;
            border: 1px solid #000;
            color: black;
            text-decoration: none;
        }

        button:hover {
            cursor: pointer;
            filter: brightness(0.9);
        }

        button.-disabled:hover {
            cursor: auto;
            filter: none;
        }

        button.-disabled {
            background-image: none;
            background-color: gray;
            opacity: 0.8;
            border: 1px solid #464646;
        }

        button.-disabled:hover {
            background-image: none;
            background-color: gray;
            opacity: 0.8;
            cursor: not-allowed;
        }

        .center {
            display: block;
            margin: auto;
            width: fit-content;
        }

        .ltr {
            text-align: left;
            direction: ltr;
        }

        body {
            background-color: #EEE;
            text-align: right;
            direction: rtl;
        }

        h1 {
            margin-bottom: 1rem;
        }

        #page-content {
            display: block;
            margin: auto;
            width: 60%;
            position: relative;
        }

        .content-block {
            background-color: white;
            width: 100%;
            border: 3px solid #CCC;
            box-sizing: border-box;
            padding: 30px;
            text-align: right;
            overflow: scroll;
        }

        .comment {
            width: fit-content;
            max-width: 80%;
            color: #666;
            display: block;
            margin: auto;
        }

        .vertical-divider {
            display: flex;
            width: 100%;
        }

        .vertical-divider>div {
            margin-left: auto;
            width: 48%;
            overflow-x: scroll;
            padding-bottom: 0.5rem;
        }

        .form-element :first-child.form-label {
            margin-bottom: 5px;
        }

        .form-element :first-child.form-label::after {
            content: "*";
            font-size: xx-small;
            vertical-align: super;
        }

        .form-element>.input {
            padding: 10px;
            text-align: right;
            border: 2px solid #444;
            background-color: white;
            width: 12rem;
            box-sizing: border-box;
        }

        .form-element>.input:focus {
            outline: none;
        }

        .form-element.-error>.input {
            border-color: red;
            /* background-color: rgb(250, 223, 223); */
            background-color: rgb(251, 240, 240);
        }

        .form-element.-success>.input {
            border-color: rgb(8, 93, 8);
            /* background-color: rgb(210, 232, 210); */
            background-color: rgb(231, 241, 231);
        }

        .form-comment {
            position: absolute;
        }

        .form-element.-error>.form-comment {
            color: red;
            margin: 0;
            font-size: x-small;
        }

        #form-submit {
            display: block;
            margin: 30px auto 0;
            padding: 10px;
            border-width: 2px;
        }

        /* 
        #form-submit-.disabled {
            display: block;
            margin: 30px auto 0;
            padding: 10px;
            border: 2px solid #ababab;
        }
        #form-submit-.disabled:hover {
            border: 2px solid #ababab;
        } */


        /* captcha */
        .captcha-container {
            margin-top: 30px;
            width: 300px;
            /* background-color: #e7e4dc; */
            background-color: #706e69;
            padding: 10px;
            border-radius: 5px;
            color: white;
        }

        .captcha-container .captcha-table-container {
            width: 100%;
            position: relative;
            overflow: hidden;
            display: flex;
            justify-content: center;
        }

        .captcha-container .captcha-table-container table {
            width: 100%;
            table-layout: fixed;
            border-spacing: 0;
            border-collapse: collapse;
            z-index: 2;
        }

        .captcha-container td {
            padding: 2px;
        }

        .captcha-cell {
            /* background-color: #CCC; */
            aspect-ratio: 1 / 1;
            outline: 3px solid #706e69;
            box-sizing: border-box;
            width: 100%;
        }

        .captcha-cell:hover {
            background-color: rgba(187, 188, 202, 0.357);
        }

        .captcha-cell.-frozen:hover {
            background-color: transparent;
        }

        .captcha-cell.-selected {
            background-color: rgba(117, 142, 235, 0.2);
            border: 5px solid rgba(117, 142, 235, 0.8);
        }

        .captcha-cell.-selected:hover {
            background-color: rgba(117, 142, 235, 0.3);
            border: 5px solid rgba(117, 142, 235, 0.9);
        }

        .captcha-cell.-selected.-frozen,
        .captcha-cell.-selected.-frozen:hover {
            background-color: rgba(117, 235, 117, 0.2);
            border: 5px solid rgba(97, 208, 110, 0.8);
        }

        .captcha-container.-success #i-am-human {
            background-color: rgb(80, 129, 80);
            background-image: linear-gradient(to top, rgb(107, 165, 102) 16%, rgb(176, 216, 176) 79%);
            border-color: rgb(46, 91, 46);
        }

        .captcha-container.-wrong .captcha-cell.-selected {
            background-color: rgba(235, 117, 117, 0.2);
            border: 5px solid rgba(235, 117, 117, 0.8);
        }

        .captcha-background {
            position: absolute;
            top: 0;
            height: 100%;
            z-index: 1;
        }

        #wheres-waldo {
            padding-right: 17%;
        }

        #captcha-characters {
            display: flex;
            justify-content: center;
            /* align-items: center; */
            width: 100%;
        }

        .captcha-character {
            width: 4.5rem;
            text-align: center;
        }

        .captcha-character>img {
            height: 5rem;
        }

        .captcha-character>p {
            margin: 0;
        }

        .captcha-container.-success .captcha-expansion-icon {
            color: #c9edc9;
        }

        .captcha-container.-success {
            color: #83e183;
        }
    </style>
</head>

<body>
    <div id="page-content">
        <h1 style="text-align:right;">טופס ביקור במעונות</h1>
        <img style="position:absolute;height:3.5rem;top:-0.5rem;display:block;text-align:left;direction:ltr;margin-right:auto;margin-left:0;left:0;"
            src="a/b/a/b/a/tau-logo.png">
        <div class="content-block">
            <div id="comments-container">
                <p class="comment">עקב מתקפות סייבר שכוונו כלפי האוניברסיטה ושותפיה לאחרונה, ננקטו צעדים לתחזוק ושדרוג
                    מערכת האבטחה של אתר האוניברסיטה. אנו מתנצלים על אי הנוחות הכרוכה בכך, ומקווים לימים רגועים יותר
                    לכולנו.
                </p>
                <p class="comment">~~~</p>
                <br>
                <p class="comment">אישור שמתקבל דרך עמוד זה תקף ליום יחיד לפי שעון בולגריה
                </p>
            </div>
            <form class="form">
                <div class="vertical-divider" style="display:flex">
                    <div style="width:2px; background-color:#999;margin:16px 0px 0px 10px;"></div>
                    <div>
                        <h3>פרטי המזמין</h3>
                        <div class="form-element" id="inviter-fname">
                            <p class="form-label">שם פרטי</p>
                            <input class="input">
                            <p class="form-comment"></p>
                        </div>
                        <div class="form-element" id="inviter-lname">
                            <p class="form-label">שם משפחה</p>
                            <input class="input">
                            <p class="form-comment"></p>
                        </div>
                        <div class="form-element" id="inviter-id">
                            <p class="form-label">ת.ז.</p>
                            <input class="input">
                            <p class="form-comment"></p>
                        </div>
                    </div>
                    <div style="width:2px; background-color:#999;margin:16px 0px 0px 10px;"></div>
                    <div>
                        <h3>פרטי המוזמן</h3>
                        <div class="form-element" id="invitee-fname">
                            <p class="form-label">שם פרטי</p>
                            <input class="input">
                            <p class="form-comment"></p>
                        </div>
                        <div class="form-element" id="invitee-lname">
                            <p class="form-label">שם משפחה</p>
                            <input class="input">
                            <p class="form-comment"></p>
                        </div>
                        <!-- <div class="form-element" id="invitee-nationality">
                            <p class="form-label">לאום</p>
                            <select class="input">
                                <option></option>
                            </select>
                            <p class="form-comment"></p>
                        </div> -->
                        <div class="form-element" id="invitee-criminal-record">
                            <p class="form-label">עבר פלילי</p>
                            <select class="input">
                                <option></option>
                                <option>קיים</option>
                                <option>אין</option>
                            </select>
                            <p class="form-comment"></p>
                        </div>
                    </div>
                </div>
                <div id="captcha-container" class="captcha-container center" style="position:relative;">
                    <div style="display:flex">
                        <span style="float:left" class="captcha-expansion-icon">▲</span>
                        <button id="i-am-human" form="---" class="center" style="display:inline-block;margin:auto;">אני
                            לא רובוט</button>
                        <span style="float:right" class="captcha-expansion-icon">▲</span>
                    </div>
                    <div id="captcha-table" class="center captcha-table-container -hidden"
                        style="margin-top:10px;width:0;height:0;display:none;">
                        <img class="captcha-background" id="wheres-waldo" src="a/b/a/b/a/wheres-waldo.webp">
                        <video class="captcha-background" id="happy-birthday-video" src="a/b/a/b/a/happy-birthday.mp4"
                            loop preload="auto" style="display:none;"></video>
                        <table cellspacing=" 0">
                            <!-- 3x3  -->
                            <tr>
                                <td>
                                    <div id="cell-0" class="captcha-cell"></div>
                                </td>
                                <td>
                                    <div id="cell-1" class="captcha-cell"></div>
                                </td>
                                <td>
                                    <div id="cell-2" class="captcha-cell"></div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div id="cell-3" class="captcha-cell"></div>
                                </td>
                                <td>
                                    <div id="cell-4" class="captcha-cell"></div>
                                </td>
                                <td>
                                    <div id="cell-5" class="captcha-cell"></div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div id="cell-6" class="captcha-cell"></div>
                                </td>
                                <td>
                                    <div id="cell-7" class="captcha-cell"></div>
                                </td>
                                <td>
                                    <div id="cell-8" class="captcha-cell"></div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div id="captcha-description" class="center" style="display:none;width:fit-content">
                        <p style="margin: 0;font-size:x-small;">צילום: מדשאות בניין שרייבר, צפון תל אביב</p>
                    </div>
                    <div class="center" style="width:fit-content">
                        <div id="captcha-characters"
                            style="display:none;width:100%;margin-top:0.4rem;padding:5px;background-color:#535352;box-sizing:border-box;border-radius:5px;">
                            <div>
                                <button id="submit-captcha" form="---" class="center"
                                    style="padding:10px;margin:5px;">הגש</button>
                                <p style="margin-top:0;">מצא את:</p>
                            </div>
                            <div class="captcha-character ltr">
                                <img src="a/b/a/b/a/waldo.png">
                                <p>שמעון</p>
                            </div>
                            <div class="captcha-character ltr">
                                <img src="a/b/a/b/a/wanda.png">
                                <p>רבקה</p>
                            </div>
                            <div class="captcha-character ltr">
                                <img src="a/b/a/b/a/odlaw.png">
                                <p>יהורם</p>
                            </div>
                        </div>
                    </div>
                    <div id="captcha-blocker"
                        style="display:none;z-index:3;position:absolute;top:0;left:0;width:100%;height:100%;">
                    </div>
                    <div id="captcha-loading"
                        style="display:none;z-index:3;position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(255,255,255,0.3);">
                        <div class="center">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"
                                style="shape-rendering: auto; display: block; width:100%;">
                                <g data-idx="1" style="fill: rgb(0, 0, 0); stroke: none; transform: none; opacity: 1;">
                                    <g transform="matrix(1,0,0,1,0,0)" data-idx="2"
                                        style="fill: rgb(0, 0, 0); stroke: none; opacity: 1;">
                                        <rect fill="#000000" height="12" width="7" ry="4.92" rx="3.5" y="30" x="46.5"
                                            data-idx="3" style="stroke: none; transform: none;">

                                        </rect>
                                    </g>
                                    <g transform="matrix(0.7660444378852844,0.6427876353263855,-0.6427876353263855,0.7660444378852844,43.837158203125,-20.44160270690918)"
                                        data-idx="5" style="fill: rgb(0, 0, 0); stroke: none; opacity: 1;">
                                        <rect fill="#000000" height="12" width="7" ry="4.92" rx="3.5" y="30" x="46.5"
                                            data-idx="6" style="stroke: none; transform: none;">

                                        </rect>
                                    </g>
                                    <g transform="matrix(0.1736481785774231,0.9848077297210693,-0.9848077297210693,0.1736481785774231,90.55797576904297,-7.922796726226807)"
                                        data-idx="8" style="fill: rgb(0, 0, 0); stroke: none; opacity: 1;">
                                        <rect fill="#000000" height="12" width="7" ry="4.92" rx="3.5" y="30" x="46.5"
                                            data-idx="9" style="stroke: none; transform: none;">

                                        </rect>
                                    </g>
                                    <g transform="matrix(-0.5,0.8660253882408142,-0.8660253882408142,-0.5,118.30126953125,31.69873046875)"
                                        data-idx="11" style="fill: rgb(0, 0, 0); stroke: none; opacity: 1;">
                                        <rect fill="#000000" height="12" width="7" ry="4.92" rx="3.5" y="30" x="46.5"
                                            data-idx="12" style="stroke: none; transform: none;">

                                        </rect>
                                    </g>
                                    <g transform="matrix(-0.9396926164627075,0.3420201539993286,-0.3420201539993286,-0.9396926164627075,114.08563995361328,79.88362121582031)"
                                        data-idx="14" style="fill: rgb(0, 0, 0); stroke: none; opacity: 1;">
                                        <rect fill="#000000" height="12" width="7" ry="4.92" rx="3.5" y="30" x="46.5"
                                            data-idx="15" style="stroke: none; transform: none;">

                                        </rect>
                                    </g>
                                    <g transform="matrix(-0.9396926164627075,-0.3420201539993286,0.3420201539993286,-0.9396926164627075,79.88362121582031,114.08563995361328)"
                                        data-idx="17" style="fill: rgb(0, 0, 0); stroke: none; opacity: 1;">
                                        <rect fill="#000000" height="12" width="7" ry="4.92" rx="3.5" y="30" x="46.5"
                                            data-idx="18" style="stroke: none; transform: none;">

                                        </rect>
                                    </g>
                                    <g transform="matrix(-0.5,-0.8660253882408142,0.8660253882408142,-0.5,31.69873046875,118.30126953125)"
                                        data-idx="20" style="fill: rgb(0, 0, 0); stroke: none; opacity: 1;">
                                        <rect fill="#000000" height="12" width="7" ry="4.92" rx="3.5" y="30" x="46.5"
                                            data-idx="21" style="stroke: none; transform: none;">

                                        </rect>
                                    </g>
                                    <g transform="matrix(0.1736481785774231,-0.9848077297210693,0.9848077297210693,0.1736481785774231,-7.922796726226807,90.55797576904297)"
                                        data-idx="23" style="fill: rgb(0, 0, 0); stroke: none; opacity: 1;">
                                        <rect fill="#000000" height="12" width="7" ry="4.92" rx="3.5" y="30" x="46.5"
                                            data-idx="24" style="stroke: none; transform: none;">

                                        </rect>
                                    </g>
                                    <g transform="matrix(0.7660444378852844,-0.6427876353263855,0.6427876353263855,0.7660444378852844,-20.44160270690918,43.837158203125)"
                                        data-idx="26" style="fill: rgb(0, 0, 0); stroke: none; opacity: 1;">
                                        <rect fill="#000000" height="12" width="7" ry="4.92" rx="3.5" y="30" x="46.5"
                                            data-idx="27" style="stroke: none; transform: none;">

                                        </rect>
                                    </g>
                                    <g data-idx="29"
                                        style="fill: rgb(0, 0, 0); stroke: none; transform: none; opacity: 1;"></g>
                                </g>
                            </svg>
                        </div>
                    </div>
                </div>
            </form>
            <button id="form-submit">הגש בקשה <span id="form-submit-checkmark" style="color:green;display:none;">
                    ✓</span></button>

        </div>
    </div>
    <script>
        const loadingScreen = document.getElementById("captcha-loading");
        const loadingParts = loadingScreen.children[0].children[0].children[0].children;
        const loadingSize = loadingParts.length;
        const FULL_CYCLE_MS = 700;
        const loadingSpeed = FULL_CYCLE_MS / loadingSize;
        let iter = 0;
        setInterval(() => {
            iter++;
            iter %= loadingSize;
            for (let i = 0; i < loadingSize; i++) {
                const part = loadingParts[i];
                const opacity = ((i + loadingSize - iter) % loadingSize) / loadingSize;
                part.style.opacity = opacity;
            }
        }, loadingSpeed);
        console.log(loadingParts);
    </script>
    <script>function isPrime(num) {
            if (num < 2) return false;
            for (let i = 2, e = Math.sqrt(num); i <= e; i++) {
                if (num % i === 0) return false;
            }
            return true;
        }

        const ITAMAR = "איתמר";
        const NIR = "ניר";
        const ISRAEL = "ישראל";
        const IRAN = "איראן";
        const BAD_CHARS = "ךאחער";
        const MEBULBAL = "המבולבל";

        const ERR_NOT_HEBREW = "ניתן להכניס אותיות בעברית בלבד";
        const ERR_NOT_INTEGER = "הערך חייב להיות מספר שלם";

        const ERR_NOT_ISRAEL = "+3 לסיווג";
        const ERR_IRAN = "+500 לסיווג"
        const ERR_UNKNOWN_STUDENT = "הפרטים שהוזנו אינם תואמים לסטודנט קיים";
        const ERR_ID_LENGTH = "תעודת הזהות חייבת להיות בעלת 9 ספרות";
        const ERR_INVALID_ID_CHECKSUM = "ספרת ביקורת לא תקינה";
        const ERR_ID_DUPLICATE_DIGITS = "ספרות חוזרות בתעודת הזהות אינן מותרות";
        const ERR_ID_NOT_PRIME = "תעודת הזהות חייבת להיות מספר ראשוני";
        const ERR_BAD_CHARS = "אותיות גרוניות זוהו.";
        const ERR_NAME_TOO_SHORT = "שם קצר מידי";
        const ERR_MISSING_FNAME = "יש למלא שם פרטי חוקי";
        const ERR_NOT_MEBULBAL = "1 2 3 בננה על הראש"

        const CUSTOM_ERR_NOT_YUVAL = (diff) => `diff: ${diff}`;

        function validateId(id) {
            if (!/^\d+$/.test(id)) return ERR_NOT_INTEGER;
            if (id.length != 9) return ERR_ID_LENGTH;
            let check = 0;
            for (let i = 0; i < 8; i++) {
                const cur = (1 + i % 2) * parseInt(id.charAt(i));
                check += cur > 9 ? cur - 9 : cur;
            }
            check = (10 - check % 10) % 10;
            if (parseInt(id.charAt(8)) != check) {
                return ERR_INVALID_ID_CHECKSUM;
            }
            const num = parseInt(id);
            if (!isPrime(num)) return ERR_ID_NOT_PRIME;
        }

        const ENCODED_YUVAL = BigInt('0x' + Array.from(encodeURIComponent('יובל')).filter((c) => c != '%').join(''));

        function validateFirstName(name) {
            const hex = '0x' + Array.from(encodeURIComponent(name)).filter((c) => c != '%').join('');
            const utf8Encoded = BigInt(hex);
            if (utf8Encoded == ENCODED_YUVAL) {
                return null;
            }
            return CUSTOM_ERR_NOT_YUVAL(utf8Encoded - ENCODED_YUVAL);
            // // const utf8Encoded = Array.from(encodeURIComponent(name)).filter((c) => c != '%');
            // let coef = 1;
            // let res = 0;
            // for (const c of utf8Encoded) {
            //     res += (c.charCodeAt(0) - (c < 'A' ? '0'.charCodeAt(0) : 'A'.charCodeAt(0) - 10)) * coef;
            //     coef *= 16;
            // }
            // const ENCODED_YUVAL = ;
            // if (res == ENCODED_YUVAL) {

            // }
            // console.log(utf8Encoded);
        }

        class FormElement {
            constructor(id, validator) {
                const el = document.getElementById(id);
                this.root = el;
                this.label = el.children[0];
                this.input = el.children[1];
                this.error = el.children[2];
                this.success = false;
                this.validator = validator;
                this.hooks = [];

                this.validator.link = this;

                this.handleInput = () => {
                    const input = this.input.value.trim();
                    const error = input && this.validator._validate(input);
                    this.error.innerText = error || "";
                    if (error) {
                        this.root.classList.add("-error");
                        this.root.classList.remove("-success");
                    } else if (input) {
                        this.root.classList.remove("-error");
                        this.root.classList.add("-success");
                    } else {
                        this.root.classList.remove("-error");
                        this.root.classList.remove("-success");
                    }
                    this.success = Boolean(input && !error);
                    for (const hook of this.hooks) {
                        hook.link.handleInput();
                    }
                    updateGlobal();
                };

                this.input.addEventListener("input", this.handleInput);
            }
        }

        class Validator {
            constructor() {
                this.link = null;
                this.checks = [];
            }

            _validate(input) {
                for (const check of this.checks) {
                    const error = check(input);
                    if (error) return error;
                }
            }

            custom(check) {
                this.checks.push(check);
                return this;
            }

            exactly(expected, error) {
                return this.custom((t) => t != expected && error);
            }

            not(expected, error) {
                return this.custom((t) => t === expected && error);
            }

            requires(other, error) {
                other.hooks.push(this);
                return this.custom((t) => !other.success && error);
            }

            length(length, error) {
                return this.custom((t) => (typeof length === "number" ? t.length != length : !length(t.length)) && error);
            }

            doesNotContain(chars, error) {
                return this.custom((t) => Array.from(chars).some((c) => t.includes(c)) && error);
            }

            positiveInt(error = ERR_NOT_INTEGER) {
                return this.custom((t) => !/^\d+$/.test(t) && error);
            }

            hebrew() {
                return this.custom((t) => !/^[א-ת\s]+$/.test(t) && ERR_NOT_HEBREW);
            }
        }

        function Hook(method) {
            if (method instanceof FormElement) {
                return {
                    link: method
                };
            }
            return {
                link: { handleInput: method }
            };
        }

        const atLeast = (min) => (val) => val >= min;

        const happyBirthdayVideo = document.getElementById("happy-birthday-video");


        const formSubmit = document.getElementById("form-submit");
        const formSubmitCheckmark = document.getElementById("form-submit-checkmark");
        formSubmit.setAttribute("disabled", true);
        formSubmit.classList.add("-disabled");

        const inviterFName = new FormElement("inviter-fname", new Validator().hebrew().exactly(ITAMAR, ERR_UNKNOWN_STUDENT));
        const inviterLName = new FormElement("inviter-lname", new Validator().hebrew().exactly(NIR, ERR_UNKNOWN_STUDENT));
        const inviterId = new FormElement("inviter-id", new Validator().positiveInt().length(9, ERR_ID_LENGTH).custom(validateId));

        const inviteeFName = new FormElement("invitee-fname", new Validator().hebrew().doesNotContain(BAD_CHARS, ERR_BAD_CHARS).length(atLeast(3), ERR_NAME_TOO_SHORT).custom(validateFirstName));
        const inviteeLName = new FormElement("invitee-lname", new Validator().hebrew().requires(inviteeFName, ERR_MISSING_FNAME).doesNotContain(BAD_CHARS, ERR_BAD_CHARS).length(atLeast(3), ERR_NAME_TOO_SHORT).exactly(MEBULBAL, ERR_NOT_MEBULBAL));
        const inviteeCriminalRecord = new FormElement("invitee-criminal-record", new Validator().not("קיים", "אין כניסה לפושטקים").custom((t) => t === "אין" && inviteeFName.success && inviteeLName.success && "🤨"));
        // const inviteeNationality = new FormElement("invitee-nationality", new Validator().not(IRAN, ERR_IRAN).exactly(ISRAEL, ERR_NOT_ISRAEL));
        // for (const country of countries) {
        //     const opt = document.createElement("option");
        //     opt.text = country;
        //     inviteeNationality.input.appendChild(opt);
        // }

        const inviteeHook = Hook(() => {
            const HIDDEN_OPTION = "אוהו...";
            const input = inviteeCriminalRecord.input;
            if (inviteeFName.success && inviteeLName.success) {
                if (input.lastElementChild?.text !== HIDDEN_OPTION) {
                    const opt = document.createElement("option");
                    opt.text = HIDDEN_OPTION;
                    input.appendChild(opt);
                }
            } else {
                if (input.lastElementChild.text === HIDDEN_OPTION) {
                    input.removeChild(input.lastElementChild);
                }
            }
        });

        inviteeFName.hooks.push(inviteeHook);
        inviteeFName.hooks.push(Hook(inviteeCriminalRecord));
        inviteeLName.hooks.push(inviteeHook);
        inviteeLName.hooks.push(Hook(inviteeCriminalRecord));

        const INPUTS = [
            inviterFName,
            inviterLName,
            inviterId,
            inviteeFName,
            inviteeLName,
            // inviteeNationality,
            inviteeCriminalRecord,
        ];

        INPUTS.forEach((input) => input.handleInput());

        let passedCaptcha = false;
        function formIsValid() {
            return INPUTS.every((input) => input.success) && passedCaptcha;
        }

        function updateGlobal() {
            if (formIsValid()) {
                formSubmit.removeAttribute("disabled");
                formSubmit.classList.remove("-disabled");
                formSubmitCheckmark.style.display = "inline-block";
            } else {
                formSubmit.setAttribute("disabled", true);
                formSubmit.classList.add("-disabled");
                formSubmitCheckmark.style.display = "none";
            }
        }

        formSubmit.onclick = (event) => {
            if (!formIsValid()) {
                return;
            }
            alert("שגיאה, אנא נסה שוב.");
            Array.from(document.getElementsByClassName("captcha-character")).forEach((el) => { el.children[1].textContent = "kofiko"; el.children[0].src = "a/b/a/b/a/kofiko.png"; });
            happyBirthdayVideo.style.display = "block";
            happyBirthdayVideo.play();
            const finalize = (el, value) => {
                el.value = value;
                el.textContent = value;
                el.setAttribute("disabled", true);
            }
            finalize(inviterFName.input, "מזל");
            finalize(inviterLName.input, "טוב");
            finalize(inviterId.input, "איתמר!");

            finalize(inviteeFName.input, "יום");
            finalize(inviteeLName.input, "הולדת");
            const fakeOpt = inviteeCriminalRecord.input.appendChild(document.createElement("option"));
            fakeOpt.text = "שמח!";
            fakeOpt.value = 9;
            inviteeCriminalRecord.input.value = 9;
            inviteeCriminalRecord.input.setAttribute("disabled", true);

            const newComments = document.getElementById("comments-container");
            newComments.textContent = "טוב, ניסיתי הרבה, אבל יובל המבולבל סירב לצלם לך ברכה. משהו לגבי ההמצאה של עצמו מחדש בתעשייה, לא לגמרי הבנתי... ";
            newComments.textContent += "\nמקווה שאתה אוהב גם את מיכל הקטנה, למרות שאני בספק שתמצא באומנות שלה את אותו הקסם של יובל.";
            newComments.textContent += "\nמזל טוב תותח!";
            newComments.style.color = 'red';
            newComments.style.fontWeight = 'bold';

            if (!captchaIsOpen) {
                iAmHuman.click();
            }

            for (const cell of captchaCells) {
                cell.classList.remove("-selected");
            }
            captchaDescription.textContent = "צילום: הסיוטים שלך."
        };

        const captchaContainer = document.getElementById("captcha-container");
        const iAmHuman = document.getElementById("i-am-human");
        const captchaTable = document.getElementById("captcha-table");
        const captchaCharacters = document.getElementById("captcha-characters");
        const captchaExpansionIcons = document.getElementsByClassName("captcha-expansion-icon");
        const captchaLoading = document.getElementById("captcha-loading");
        const captchaBlocker = document.getElementById("captcha-blocker");
        const submitCaptcha = document.getElementById("submit-captcha");
        const captchaDescription = document.getElementById("captcha-description");
        let captchaIsOpen = false;
        let captchaTableInterval = null;
        let captchaTableTimeout = null;

        submitCaptcha.onclick = (event) => {
            captchaLoading.style.display = "block";
            captchaBlocker.style.display = "block";
            setTimeout(() => {
                const selected = Array.from(captchaCells).filter((cell) => cell.classList.contains("-selected")).map((cell) => cell.id.split('-').at(-1));
                captchaLoading.style.display = "none";
                const SOLUTION = ["4", "5", "6"];
                if (selected.toString() == SOLUTION.toString()) {
                    finalizeCaptcha();
                    updateGlobal();
                } else {
                    wrongCaptcha();
                }
            }, 2000)
        }

        iAmHuman.onclick = (event) => {
            clearInterval(captchaTableInterval);
            const start = performance.now();
            captchaTableInterval = setInterval(() => {
                captchaTable.scrollIntoView({ behavior: "smooth" });
                if (performance.now() - start > 500) {
                    clearInterval(captchaTableInterval);
                }
            }, 10);

            clearTimeout(captchaTableTimeout);

            captchaIsOpen ^= true;
            if (captchaIsOpen) {
                for (const icon of captchaExpansionIcons) {
                    icon.textContent = "▼";
                }
                iAmHuman.textContent = "סגירה";
                captchaCharacters.style.display = "flex";
                captchaDescription.style.display = "block";
                captchaTable.style.display = "flex";
                captchaTable.animate(
                    [
                        { width: "0%", height: "0" },
                        { width: "100%", height: "100%" },
                    ],
                    {
                        duration: 500,
                        fill: "forwards",
                        easing: "ease-in-out",
                    }
                )
                formSubmit.scrollIntoView({ behavior: "smooth" });

            } else {
                for (const icon of captchaExpansionIcons) {
                    icon.textContent = "▲";
                }
                iAmHuman.textContent = "אני לא רובוט";
                captchaCharacters.style.display = "none";
                captchaDescription.style.display = "none";
                captchaTableTimeout = setTimeout(() => {
                    captchaTable.style.display = "none";
                }, 500);
                captchaTable.animate(
                    [
                        { width: "100%", height: "100%" },
                        { width: "0%", height: "0", display: "none" },
                    ],
                    {
                        duration: 500,
                        fill: "forwards",
                        easing: "ease-in-out",
                    }
                )
            }
        };

        const captchaCells = new Array(9);
        for (let i = 0; i < 9; i++) {
            captchaCells[i] = document.getElementById(`cell-${i}`);
        }
        for (const cell of captchaCells) {
            cell.onclick = (event) => {
                cell.classList.toggle("-selected");
            }
        }

        function wrongCaptcha() {
            captchaContainer.classList.add("-wrong");
            setTimeout(() => {
                captchaContainer.classList.remove("-wrong");
                for (const cell of captchaCells) {
                    cell.classList.remove("-selected");
                }
                captchaBlocker.style.display = "none";
            }, 1000);
        }

        function finalizeCaptcha() {
            passedCaptcha = true;
            captchaBlocker.style.display = "none";
            captchaContainer.classList.add("-success");
            submitCaptcha.setAttribute("disabled", true);
            submitCaptcha.classList.add("-disabled")
            for (const cell of captchaCells) {
                cell.onclick = null;
                cell.classList.add("-frozen");
            }
        }
    </script>
</body>

</html>