<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="../styles/main.css">
    <script src="../scripts/jquery.min.js"></script>
    <script src="../scripts/helpPopup.js"></script>
    <title>Регистрация</title>
    <style>
        body {
            background-color: #EEEFF5;
        }
    </style>
</head>
<body>
    <header>
        <h1>Бюро пропусков</h1>
        <nav>
            <div class="dropdown">
                <a class="help-button" onclick="toggleDropdown('dropdownHelp-1')">Техническая поддержка</a>               
                <div id="dropdownHelp-1" class="dropdown-help">
                    <a href="tel:83477527706">8 (34775) 2-77-06</a>
                    <a href="tel:89174023516">8 (917) 402-35-16</a>
                </div>
              </div>
            <div class="dropdown">
                <a class="help-button" onclick="toggleDropdown('dropdownHelp-2')">Инструкции</a>               
                <div id="dropdownHelp-2" class="dropdown-help dropdown-manual">
                    <a href="/docs/manual.pdf" target="_blank">Текст</a>
                    <a href="https://drive.google.com/file/d/1CxrAgr2brQclZqtbbreSUU9tN-jsNTwf/view?usp=sharing" target="_blank">Видео</a>
                </div>
              </div>
            <a href="/signin">Войти</a>
            <a href="/signup">Зарегистрироваться</a>
        </nav>
    </header>
    
    <form class="main-form" id="signup-form">
        <h1>Регистрация</h1>
        <div class="radio-inputs">
            <label class="radio">
                <input autocomplete="off" type="radio" id="person-radio" name="account-type" value="guest" checked>
                <span class="name">Физ лицо</span>
            </label>
            <label class="radio">
                <input autocomplete="off" type="radio" id="legal-radio" name="account-type" value="legal">
                <span class="name">Юр лицо</span>
            </label>
          </div>


          <div class="inputs" id="person-inputs">
            <div class="input-area">
                <label for="surname-input">Фамилия*</label>
                <input type="text" id="surname-input">
            </div>
            <div class="input-area">
                <label for="firstname-input">Имя*</label>
                <input type="text" id="firstname-input">
            </div>
            <div class="input-area">
                <label for="secondname-input">Отчество (при наличии)</label>
                <input type="text" id="secondname-input">
            </div>
            <div class="input-area">
                <label for="born-input">Дата рождения*</label>
                <input type="date" id="born-input">
            </div>
            <div class="input-area">
                <label for="phone-input">Номер телефона</label>
                <input type="text" id="phone-input">
            </div>
        </div>

        <div style="display: none;" class="inputs" id="legal-inputs">
            <div class="input-area">
                <label for="name-input">Наименование организации*</label>
                <input type="text" id="name-input">
            </div>
            <div class="input-area">
                <label for="inn-input">ИНН*</label>
                <input maxlength="10" type="text" id="inn-input">
            </div>
            <div class="input-area">
                <label for="ogrn-input">ОГРН*</label>
                <input maxlength="13" type="text" id="ogrn-input">
            </div>
            <div class="input-area">
                <label for="legaladdress-input">Юридический адрес*</label>
                <input type="text" id="legaladdress-input">
            </div>
            <div class="input-area">
                <label for="address-input">Фактический адрес*</label>
                <input type="text" id="address-input">
            </div>
            <div class="input-area">
                <label for="contact-input">Имя контактного лица</label>
                <input type="text" id="contact-input">
            </div>
            <div class="input-area">
                <label for="contactphone-input">Номер телефона контактного лица</label>
                <input type="text" id="contactphone-input">
            </div>
        </div>
        <div class="input-area">
            <label for="email-input">Email*</label>
            <input type="text" id="email-input" required>
        </div>
        <div class="input-area">
            <label for="password-input">Пароль*</label>
            <input type="password" id="password-input" new-password required>
        </div>
        <div class="input-area">
            <label for="repeatpassword-input">Повторите пароль*</label>
            <input type="password" id="repeatpassword-input" required>
        </div>
        <div class="form-info">
            <p>Длина пароля должна быть не менее 8 символов.
                Пароль должен состоять из букв латинского алфавита (A-z),
                арабских цифр (0-9) и специальных символов ((пробел)!"#$%&amp;()*+,-./:;&lt;=&gt;?@[\]^`{|}~)</p>
        </div>
        <button style="margin-top: 15px;" type="submit" id="signup-button">Регистрация</button>
        <button onclick="location.href='/signin'" type="button" class="bright">Авторизация</button>
    </form>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const signupForm = document.getElementById("signup-form");

            signupForm.addEventListener("submit", async function(event) {
                event.preventDefault();
                $('#signup-button').addClass('inactive');

                if (document.getElementById('person-radio').checked) {
                    const formrole = "guest";
                    const firstname = $('#firstname-input').val();
                    const surname = $('#surname-input').val();
                    const secondname = $('#secondname-input').val();
                    const born = $('#born-input').val();
                    const phone = $('#phone-input').val();
                    if (!$('#firstname-input').val() || !$('#surname-input').val() || !$('#born-input').val()) {
                        alert("Пожалуйста, заполните все поля, помеченные звёздочкой.")
                        $('#signup-button').removeClass('inactive');
                        return;
                    }

                    const email = $('#email-input').val();
                    const password = $('#password-input').val();
                    const repeatPassword = $('#repeatpassword-input').val();

                    if (password.length < 8) {
                        alert('Длина пароля должна быть не менее 8 символов')
                        $('#signup-button').removeClass('inactive');
                        return;
                    }

                    // Проверяем, совпадают ли пароли
                    if (password !== repeatPassword) {
                        alert("Пароли не совпадают");
                        $('#signup-button').removeClass('inactive');
                        return;
                    }

                        // Отправляем запрос на сервер для авторизации
                        const response = await fetch("{{API_SERVER}}/signup", {
                            method: "POST",
                            headers: {
                                "Content-Type": "application/json"
                            },
                            body: JSON.stringify({ firstname, surname, secondname, born, phone, email, password, formrole })
                        });
                        if (response.status === 201) {
                            const data = await response.json();
                            const token = data.token;

                            document.cookie = "token=" + token;

                            window.location.href = "/";
                            $('#signup-button').removeClass('inactive');
                        } else if (response.status === 400) {
                            alert("Такой Email уже зарегистрирован");
                            $('#signup-button').removeClass('inactive');
                        } else {
                            alert("Ошибка авторизации");
                            $('#signup-button').removeClass('inactive');
                        }
                } else if (document.getElementById('legal-radio').checked) {
                    const formrole = "legal";
                    const name = $('#name-input').val();
                    const inn = $('#inn-input').val();
                    const ogrn = $('#ogrn-input').val();
                    const legaladdress = $('#legaladdress-input').val();
                    const address = $('#address-input').val();
                    const phone = $('#contactphone-input').val();
                    const contact = $('#contact-input').val();
                    if (!$('#name-input').val() || !$('#inn-input').val() || !$('#ogrn-input').val() || !$('#legaladdress-input').val()) {
                        alert("Пожалуйста, заполните все поля, помеченные звёздочкой.")
                        $('#signup-button').removeClass('inactive');
                        return;
                    }

                    const email = $('#email-input').val();
                    const password = $('#password-input').val();
                    const repeatPassword = $('#repeatpassword-input').val();

                    if (password.length < 8) {
                        alert('Длина пароля должна быть не менее 8 символов')
                        $('#signup-button').removeClass('inactive');
                        return;
                    }

                    // Проверяем, совпадают ли пароли
                    if (password !== repeatPassword) {
                        alert("Пароли не совпадают");
                        $('#signup-button').removeClass('inactive');
                        return;
                    }

                    // Отправляем запрос на сервер для авторизации
                    const response = await fetch("{{API_SERVER}}/signup", {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json"
                        },
                        body: JSON.stringify({ name, inn, ogrn, legaladdress, address, phone, email, contact, password, formrole })
                    });

                    if (response.status === 201) {
                        const data = await response.json();
                        const token = data.token;

                        document.cookie = "token=" + token;

                        window.location.href = "/";
                        $('#signup-button').removeClass('inactive');
                    } else if (response.status === 400) {
                        alert("Такой Email уже зарегистрирован");
                        $('#signup-button').removeClass('inactive');
                    } else {
                        alert("Ошибка авторизации");
                        $('#signup-button').removeClass('inactive');
                    }
                }
            });
        });

    </script>
    <script src="https://rawgit.com/RobinHerbots/Inputmask/5.x/dist/jquery.inputmask.js"></script>
    <script>
        $(document).ready(function(){
      
            $('#phone-input').inputmask({"mask": "+7 (999) 999-9999"});
            $('#contactphone-input').inputmask({"mask": "+7 (999) 999-9999"});
      
        });
      </script>
      <script>
        const radioInputs = document.querySelectorAll('input[name="account-type"]');
        const personInputs = document.getElementById('person-inputs');
        const legalInputs = document.getElementById('legal-inputs');
    
        radioInputs.forEach(input => {
            input.addEventListener('change', function() {
                if (this.checked) {
                    if (this.value === "guest") {
                        personInputs.style.display = 'flex';
                        legalInputs.style.display = 'none';
                    } else if (this.value === "legal") {
                        personInputs.style.display = 'none';
                        legalInputs.style.display = 'flex';
                    }
                }
            });
        });
    </script>
</body>
</html>