profile.js

let backButton = document.getElementById('backButton');
let profNameInput = document.getElementById('profNameInput');
let profStatusInput = document.getElementById('profStatusInput');
let profNameColorInput = document.getElementById('profNameColorInput');
let profPicInput = document.getElementById('profPicInput');
let saveSettings = document.getElementById('saveSettingsButton');
let savePic = document.getElementById('savePic');


profNameInput.value = localStorage.getItem('profName');
profStatusInput.value = localStorage.getItem('profStatus');
profNameColorInput.value = localStorage.getItem('profNameColor');

function saveProfileImageLocally() {
    if (profPicInput.files && profPicInput.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            localStorage.setItem("userProfilePic", reader.result);
        }
        reader.readAsDataURL(profPicInput.files[0]); 
    }
}

function profUpdate() {
    localStorage.setItem('profName', profNameInput.value);
    localStorage.setItem('profStatus', profStatusInput.value);
    localStorage.setItem('profNameColor', profNameColorInput.value);
}

saveSettings.addEventListener("click", function(e) {
	e.preventDefault();
	profUpdate();
	saveSettings.style.backgroundColor = "#ad6e36";
	saveSettings.innerText = 'Changes Saved!';
	setTimeout(function() {
		saveSettings.innerText = 'Save Changes';
		saveSettings.style.backgroundColor = "#ca7121";
	}, 1500);
	
});



/*window.addEventListener("beforeunload", function(e) {
	checkForUnsavedChanges();
})*/


function checkForUnsavedChanges() {
	if (
		profNameInput.value !== localStorage.getItem('profName')
		||
		profStatusInput.value !== localStorage.getItem('profStatus')
		||
		profNameColorInput.value !== localStorage.getItem('profNameColor')
		//add a picture function here later
		) {
			
			let answer = confirm('There are unsaved changes to your profile. Are you sure you want to leave?');
			if (answer) {
				window.location.href = "index.html";
			}
	} else {
		window.location.href = "index.html";
	}
}

savePic.addEventListener("click", function() {
	saveProfileImageLocally();
	savePic.style.backgroundColor = "#ad6e36";
	savePic.innerText = 'Changes Saved!';
	setTimeout(function() {
		savePic.innerText = 'Save Changes';
		savePic.style.backgroundColor = "#ca7121";
	}, 1500);
});