document.addEventListener("DOMContentLoaded", function () {
    const fileInput = document.querySelector(".input-file");
    const uploadedImage = document.querySelector(".show-image");
    const resetButton = document.querySelector(".image-reset");

    // Check if the necessary elements exist before proceeding
    if (fileInput && uploadedImage && resetButton) {
        const resetImage = uploadedImage.src;

        fileInput.addEventListener("change", function () {
            if (fileInput.files && fileInput.files[0]) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    uploadedImage.src = e.target.result;
                };
                reader.readAsDataURL(fileInput.files[0]);
            }
        });

        resetButton.addEventListener("click", function () {
            fileInput.value = null;
            uploadedImage.src = resetImage;
        });
    }

    const secondaryInput = document.querySelector(".input-secondary");
    const uploadedSecondary = document.querySelector(".show-secondary");
    const resetSecondaryButton = document.querySelector(".secondary-reset");

    if (secondaryInput && uploadedSecondary && resetSecondaryButton) {
        const resetSecondaryImage = uploadedSecondary.src;

        secondaryInput.addEventListener("change", function () {
            if (secondaryInput.files && secondaryInput.files[0]) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    uploadedSecondary.src = e.target.result;
                };
                reader.readAsDataURL(secondaryInput.files[0]);
            }
        });

        resetSecondaryButton.addEventListener("click", function () {
            secondaryInput.value = null;
            uploadedSecondary.src = resetSecondaryImage;
        });
    }
});