document.addEventListener('DOMContentLoaded', (event) => {
    const form = document.querySelector('form');
    const formElements = form.elements;

    // Load saved form state
    loadFormState(formElements);

    // Save form state on change
    form.addEventListener('change', () => {
        saveFormState(formElements);
    });
});

function saveFormState(elements) {
    const formState = {};
    for (let element of elements) {
        if (element.name) {
            if (element.type === 'select-multiple') {
                formState[element.name] = Array.from(element.selectedOptions).map(option => option.value);
            } else {
                formState[element.name] = element.value;
            }
        }
    }
    localStorage.setItem('formState', JSON.stringify(formState));
}

function loadFormState(elements) {
    const formState = JSON.parse(localStorage.getItem('formState'));
    if (formState) {
        for (let element of elements) {
            if (element.name && formState[element.name]) {
                if (element.type === 'select-multiple') {
                    Array.from(element.options).forEach(option => {
                        option.selected = formState[element.name].includes(option.value);
                    });
                } else {
                    element.value = formState[element.name];
                }
            }
        }
    }
}