ccah-assessment/assets/js/main.js

document.addEventListener("DOMContentLoaded", function () {
    const form = document.getElementById("assessment-form");
    const submitButton = form.querySelector("button[type='submit']");

    // Function to toggle "Other" text fields when checkboxes are selected
    function toggleOtherField(checkbox, textFieldId) {
        const textField = document.getElementById(textFieldId);
        textField.style.display = checkbox.checked ? "block" : "none";
    }

    // Function to toggle dependent fields based on selection
    function toggleDependentField(selectElement, valueToShow, dependentFieldId) {
        const field = document.getElementById(dependentFieldId);
        field.style.display = selectElement.value === valueToShow ? "block" : "none";
    }

    // Track form changes to prevent unnecessary submissions
    let formChanged = false;

    form.addEventListener("input", function () {
        formChanged = true;
        submitButton.disabled = false;
    });

        // Handle form submission via AJAX
		form.addEventListener("submit", function (event) {
			event.preventDefault();
	
			if (!formChanged) {
				showMessage("danger", "No changes detected. Please update the form before submitting.");
				return;
			}
	
			submitButton.disabled = true;
			showMessage("info", "Submitting...");
	
			const formData = new FormData(form);
	
			fetch("../submit.php", {
				method: "POST",
				body: formData
			})
			.then(response => response.json())
			.then(data => {
				if (data.success) {
					showMessage("success", data.success);
					formChanged = false;
					submitButton.disabled = true;
				} else {
					showMessage("danger", data.error || "An error occurred.");
					submitButton.disabled = false;
				}
			})
			.catch(() => {
				showMessage("danger", "Network error. Please try again.");
				submitButton.disabled = false;
			});
		});
	
		// Function to show messages on the form
		function showMessage(type, text) {
			let messageBox = document.getElementById("form-message");
			if (!messageBox) {
				messageBox = document.createElement("div");
				messageBox.id = "form-message";
				messageBox.className = "alert mt-3 d-none";
				form.appendChild(messageBox);
			}
			messageBox.innerHTML = text;
			messageBox.classList.remove("alert-success", "alert-danger", "alert-info", "d-none");
			messageBox.classList.add(type === "success" ? "alert-success" : "alert-danger");
		}
	

    // Prepopulate the form if returning user
    function prepopulateForm() {
		fetch("../load-responses.php")
		.then(response => response.json())
		.then(data => {
			if (data.error) {
				console.warn("Error loading responses:", data.error);
				return;
			}
	
			Object.keys(data).forEach(key => {
				let field = document.querySelector(`[name="${key}"]`);
				if (field) {
					if (field.type === "checkbox") {
						let values = JSON.parse(data[key] || "[]");
						values.forEach(value => {
							let checkbox = document.querySelector(`[name="${key}"][value="${value}"]`);
							if (checkbox) checkbox.checked = true;
						});
					} else {
						field.value = data[key];
					}
				}
			});
	
			console.log("Form preloaded successfully.");
		})
		.catch(error => console.error("Failed to load form responses:", error));
	}
	
	// Run prepopulation after DOM is loaded
	document.addEventListener("DOMContentLoaded", prepopulateForm);
	

    // Save form data to localStorage on change
    form.addEventListener("input", function () {
        let formData = {};
        new FormData(form).forEach((value, key) => {
            formData[key] = value;
        });
        localStorage.setItem("assessmentData", JSON.stringify(formData));
    });

	fetch("../load-responses.php?token=" + new URLSearchParams(window.location.search).get("token"))
    .then(response => response.json())
    .then(data => {
        if (data.error) {
            document.getElementById("auth-message").style.display = "block";
        } else {
            document.getElementById("assessment-form").style.display = "block";
            if (data.is_board_member == 1) {
                document.getElementById("board-member-section").style.display = "block";
                document.getElementById("board-member-image").src = data.board_member_image;
            }
            // Fetch board member data
fetch("../board-member.php")
.then(response => response.json())
.then(data => {
	if (data.is_board_member) {
		document.getElementById("board-member-questions").style.display = "block";
	}
})
.catch(error => console.error("Failed to load board member data:", error));

prepopulateForm();

        }
    })
    .catch(error => {
        console.error("Failed to validate token:", error);
        document.getElementById("auth-message").style.display = "block";
    });

});