document.addEventListener("DOMContentLoaded", function () {
    const form = document.getElementById("personalDetailsForm");
    const submitBtn = document.getElementById("submit-btn");
    const inputs = form.querySelectorAll(
        'input[type="text"],input[type="email"],input[type="file"]'
    );

    submitBtn.disabled = true;

    function isFormChanged() {
        for (const input of inputs) {
            const initial = input.dataset.initial;
            const current =
                input.type === "file" ? input.files.length > 0 : input.value;

            if (initial !== undefined && current !== initial) {
                return true;
            }
        }
        return false;
    }

    inputs.forEach((input) => {
        input.addEventListener("input", () => {
            submitBtn.disabled = !isFormChanged();
        });

        if (input.type === "file") {
            input.addEventListener("change", () => {
                submitBtn.disabled = !isFormChanged();
            });
        }
    });
});

function setDataUser() {
    const dataUser = document.getElementById("data-user").value;
    const data = JSON.parse(dataUser);
    const usernameElement = document.getElementById("username");
    const fullnameElement = document.getElementById("name");
    const emailElement = document.getElementById("email");
    const submitBtn = document.getElementById("submit-btn");

    submitBtn.disabled = true;
    usernameElement.value = data.username;
    fullnameElement.value = data.name;
    emailElement.value = data.email;
}

function previewImage(event) {
    var input = event.target;
    var reader = new FileReader();

    reader.onload = function () {
        var previewImg = document.getElementById("preview-img");

        previewImg.src = reader.result;
    };

    if (input.files && input.files[0]) {
        reader.readAsDataURL(input.files[0]);
    }
}