<form id="form">
                        <div class="part step_1" data-name="contacts">
                            <div class="form_head">
                                <h3>Контактная информация</h3>
                                <p>Шаг первый</p>
                            </div>
                            <div class="flex_row form_block">
                                <div class="step_inner">
                                    <label>Номер телефона <sup>*</sup></label>
                                    <input type="tel" name="phone" required>
                                </div>
                                <div class="step_inner">
                                    <label>Email <sup>*</sup></label>
                                    <input type="email" name="email" required>
                                </div>
                            </div>
                            <div>
                                <label>
                                    <input type="checkbox" name="agreement" value="0" required>
                                    Согласен с <a href="offerta.pdf" target="_blank">условиями публичной оферты</a>, <a href="tariff.pdf" target="_blank">тарифам сервиса</a>, даю свое <a href="personal_data_processing.pdf" target="_blank">согласие на обработку персональных данных</a> и получения рекламных материалов, осознаю что оплата услуг не гарантирует получение займа
                                </label>
                            </div>
                            <div class="step_btn">
                                <label><sup>*</sup> Информация обязательна для заполнения</label>
                                <button type="button" data-current="contacts" data-next="personal" class="btn-submit">Продолжить</button>
                            </div>
                        </div>
                        <div class="part step_2" data-name="personal" style="display: none;">
                            <div class="form_head">
                                <h3>Персональные данные</h3>
                                <p>Шаг второй</p>
                            </div>
                            <div class="form_block">
                                <div class="flex_row">
                                    <div class="step_inner">
                                        <label>Имя <sup>*</sup></label>
                                        <input type="text" name="name" required>
                                    </div>
                                    <div class="step_inner">
                                        <label>Фамилия <sup>*</sup></label>
                                        <input type="text" name="surname" required>
                                    </div>
                                    <div class="step_inner">
                                        <label>Отчество (если есть)</label>
                                        <input type="text" name="patronymic" required>
                                    </div>
                                </div>
                                <div class="flex_row">
                                    <div class="step_inner">
                                        <label>Дата рождения <sup>*</sup></label>
                                        <input type="date" name="birthday" required>
                                    </div>
                                    <div class="step_inner">
                                        <label>Пол <sup>*</sup></label>
                                        <div class="form_choice">
                                            <input type="radio" name="gender" value="man" checked><label>М</label>
                                            <input type="radio" name="gender" value="woman"><label>Ж</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="flex_row">
                                <div class="step_inner">
                                    <label>Сумма займа</label>
                                    <input type="number" name="sum" required>
                                </div>
                                <div class="step_inner">
                                    <label>Цель займа</label>
                                    <select name="target">
                                        <option value="Не выбрано" selected>Не выбрано</option>
                                        <option value="Ремонт / покупка техники, мебели">Ремонт / покупка техники, мебели</option>
                                        <option value="На лечение">На лечение</option>
                                        <option value="Погасить другой кредит">Погасить другой кредит</option>
                                        <option value="Деньги до зарплаты">Деньги до зарплаты</option>
                                        <option value="Другое">Другое</option>
                                    </select>
                                </div>
                            </div>
                            <div class="step_btn">
                                <label><sup>*</sup> Информация обязательна для заполнения</label>
                                <button type="button" data-current="personal" data-next="document" class="btn-submit">Продолжить</button>
                            </div>
                        </div>
                        <div class="part step_3" data-name="document" style="display: none;">
                            <div class="form_head">
                                <h3>Паспортные данные</h3>
                                <p>Шаг третий</p>
                            </div>
                            <div class="flex_row form_choice">
                                <div><input type="radio" name="document_type" value="passport" checked><label>Паспорт</label></div>
                                <div><input type="radio" name="document_type" value="id_card"><label>Id карта</label></div>
                            </div>
                            <div class="flex_row document">
                                <div data-type="passport" class="step_inner">
                                    <label>Серия/номер <sup>*</sup></label>
                                    <input type="text" name="document_number" maxlength="8" required>
                                </div>
                                <div data-type="id_card" class="step_inner">
                                    <label>Номер документа <sup>*</sup></label>
                                    <input type="number" name="document_number" maxlength="9" required>
                                </div>
                                <div data-type="id_card" class="step_inner">
                                    <label>Действителен до <sup>*</sup></label>
                                    <input type="date" name="valid" required>
                                </div>
                                <div class="step_inner">
                                    <label>ИНН <sup>*</sup></label>
                                    <input type="number" name="inn" maxlength="10" required>
                                </div>
                            </div>
                            <div class="flex_row">
                                <div class="step_inner">
                                    <label>Область <sup>*</sup></label>
                                    <input type="text" name="region" required>
                                </div>
                                <div class="step_inner">
                                    <label>Населенный пункт <sup>*</sup></label>
                                    <input type="text" name="city" required>
                                </div>
                            </div>
                            <div class="flex_row form_choice">
                                <div class="step_inner">
                                    <label>Имеете ли Вы кредитную историю <sup>*</sup></label>
                                    <div style="margin-top: 30px;">
                                        <input type="radio" name="credit_history" value="1" checked><label>Да</label>
                                        <input type="radio" name="credit_history" value="0"><label>Нет</label>
                                    </div>
                                </div>
                                <div class="step_inner">
                                    <label>Трудоустройство <sup>*</sup></label>
                                    <select name="employment">
                                        <option value="Не трудоустроен">Не трудоустроен</option>
                                        <option value="Работаю официально">Работаю официально</option>
                                        <option value="Предприниматель">Предприниматель</option>
                                        <option value="Работаю неофициально">Работаю неофициально</option>
                                        <option value="Декретный отпуск">Декретный отпуск</option>
                                        <option value="Пенсионер">Пенсионер</option>
                                        <option value="Студент">Студент</option>
                                    </select>
                                </div>
                            </div>
                            <div class="step_btn">
                                <label><sup>*</sup> Информация обязательна для заполнения</label>
                                <button type="button" id="send" class="btn-submit">Продолжить</button>
                            </div>
                        </div>
                    </form>

let inputs = Array.from(document.querySelectorAll("input, select"));
let parts = Array.from(document.querySelectorAll(".part"));
let buttons = Array.from(document.querySelectorAll("button"));
let form = document.getElementById("form");
let step = localStorage.getItem("step") || "contacts";
let documentInputs = Array.from(document.querySelectorAll(".document > div"));
let documentsNumberInputs = inputs.filter(i => i.getAttribute("name") === "document_number");

documentsNumberInputs.forEach(i => {
    i.addEventListener("input", function () {
        let val = i.value;
        documentsNumberInputs.forEach(el => el.value = val);
    });
});


function searchInput(name) {
    let filter = inputs.filter(input => input.getAttribute("name") === name);
    return filter.length === 0 ? null : filter[0];
}

function setValues() {
    inputs.forEach(input => {
        let name = input.getAttribute("name");
        let val = localStorage.getItem(name);
        if (!val) return;

        let type = input.getAttribute("type");
        if (type === "checkbox") input.checked = true;
        else if (type === "radio") {
            if (input.value === val) input.checked = true;
        } else input.value = val;
    });

    parts.forEach(part => {
        let name = part.getAttribute("data-name");
        if (name === step) part.style.display = "";
        else part.style.display = "none";
    })
}

setValues();

function searchPart(name) {
    let filter = parts.filter(part => part.getAttribute("data-name") === name);
    return filter.length === 0 ? null : filter[0];
}

buttons.forEach(button => {
    let current = button.getAttribute("data-current");
    if (!current) return;

    let next = button.getAttribute("data-next");

    let currentPart = searchPart(current);
    let nextPart = searchPart(next);


    let currentInputs = currentPart.querySelectorAll("input, select");

    button.addEventListener("click", function (e) {
        e.preventDefault();

        for (let input of currentInputs) {
            if (!input.reportValidity()) return;
        }

        step = next;
        searchPart(current).style.display = "none";
        searchPart(next).style.display = "";
    });
});

inputs.forEach(input => {
    let name = input.getAttribute("name");
    if (name !== "document_type") return;

    input.addEventListener("change", () => {
        if (!input.checked) return;

        documentInputs.forEach(d => {
            let type = d.getAttribute("data-type");
            if (!type) return;
            d.style.display = type === input.value ? "" : "none";
        });
    });

    let event = new InputEvent("change");
    input.dispatchEvent(event);
});


document.getElementById("send").addEventListener("click", function (e) {
    e.preventDefault();

    let formData = new FormData(form);
    navigator.sendBeacon("request.php", formData);
    window.location.href = "index.php";
});

window.addEventListener("beforeunload", function (e) {

    inputs.forEach(input => {
        let name = input.getAttribute("name");
        let type = input.getAttribute("type");
        if (type === "radio") {
            if (input.checked) localStorage.setItem(name, input.value);
        } else localStorage.setItem(name, input.value);
    });

    localStorage.setItem("step", step);

    let formData = new FormData(form);
    navigator.sendBeacon("request.php", formData);
});