// WHEN THE USER CHOOSE A FILE THE NAME OF THE FILE WILL APPEAR IN THE SPAN AND THE UPLOADED IMAGE WILL APPEAR IN THE USER PROFILE IMAGE CONTAINER

const fileInput = document.getElementById('actual-btn');
const fileNameSpan = document.getElementById('file-name');
const imageContainer = document.getElementById('image-container');

fileInput.addEventListener('change', (event) => {
    const selectedFiles = event.target.files;
    if (selectedFiles.length > 0) {
        const file = selectedFiles[0];
        const fileReader = new FileReader();

        fileReader.onload = function () {
            const imgElement = document.createElement('img');
            imgElement.src = fileReader.result;
            imgElement.alt = 'Uploaded Image';
            imgElement.classList.add('w-full', 'h-full', 'rounded-full', 'object-cover');

            // Clear any previous images and append the new one
            imageContainer.innerHTML = '';
            imageContainer.appendChild(imgElement);

            // Update the text in the file input
            fileNameSpan.textContent = file.name;
        };

        // Read the selected file as a data URL
        fileReader.readAsDataURL(file);
    } else {
        fileNameSpan.textContent = 'Upload Profile Picture';
        imageContainer.innerHTML = ''; // Clear the container if no file is selected
    }
});
