(function ($) {
    "use strict";

    document.addEventListener("DOMContentLoaded", function () {
        if (document.querySelectorAll(".upload-file").length) {
            initFileUpload();
            checkPreExistingImages();
        }
    });

    function initFileUpload() {
        document.addEventListener("change", function (e) {
            if (e.target.classList.contains("single_file_input")) {
                handleFileChange(e.target, e.target.files[0]);
            }
        });

        document.addEventListener("click", function (e) {
            const removeBtn = e.target.closest(".remove_btn");
            const editBtn = e.target.closest(".edit_btn");
            const resetBtn = e.target.closest("button[type=reset]");
            const viewBtn = e.target.closest(".view_btn");
            if (removeBtn) {
                const card = removeBtn.closest(".upload-file");
                resetFileUpload(card);
            }
            if (viewBtn) {
                e.preventDefault();
                e.stopImmediatePropagation();
                return;
            }

            if (editBtn) {
                e.stopImmediatePropagation();
                const card = editBtn.closest(".upload-file");
                if (card) {
                    card.classList.remove("input-disabled");
                    const input = card.querySelector(".single_file_input");
                    if (input) {
                        input.click();
                    }
                }
            }

            if (resetBtn) {
                const form = resetBtn.closest("form");
                if (form) {
                    form.querySelectorAll(".upload-file").forEach(card => {
                        resetFileUpload(card);
                    });
                }
            }
        });
    }

    function checkPreExistingImages() {
        document.querySelectorAll(".upload-file").forEach(function (card) {
            const textbox = card.querySelector(".upload-file-textbox");
            const imgElement = card.querySelector(".upload-file-img");
            const removeBtn = card.querySelector(".remove_btn");
            const overlay = card.querySelector(".overlay");

            const src = imgElement?.getAttribute("src");

            if (src && src !== window.location.href && src !== "") {
                imgElement.setAttribute("data-src", src);
                if (textbox) textbox.style.display = "none";
                if (imgElement) imgElement.style.display = "block";
                if (overlay) overlay.classList.add("show");
                if (removeBtn) removeBtn.style.opacity = 1;
                card.classList.add("input-disabled");
            }
        });
    }

    function handleFileChange(input, file) {
        const card = input.closest(".upload-file");
        const textbox = card.querySelector(".upload-file-textbox");
        const imgElement = card.querySelector(".upload-file-img");
        const removeBtn = card.querySelector(".remove_btn");
        const overlay = card.querySelector(".overlay");

        const currentSrc = imgElement?.src;
        if (currentSrc && currentSrc !== '' && currentSrc !== window.location.href) {
            input.dataset.previousFileData = currentSrc;
            input.dataset.previousFileName = 'previous-file';
        }

        card.classList.add("input-disabled");

        if (file) {
            const reader = new FileReader();
            reader.onload = function (e) {
                if (textbox) textbox.style.display = "none";
                if (imgElement) {
                    imgElement.src = e.target.result;
                    imgElement.style.display = "block";
                }
                if (removeBtn) removeBtn.style.opacity = 1;
                if (overlay) overlay.classList.add("show");
            };
            reader.readAsDataURL(file);
        }
    }

    function resetFileUpload(card) {
        const input = card.querySelector(".single_file_input");
        const imgElement = card.querySelector(".upload-file-img");
        const textbox = card.querySelector(".upload-file-textbox");
        const removeBtn = card.querySelector(".remove_btn");
        const overlay = card.querySelector(".overlay");
        const defaultSrc = imgElement?.dataset.defaultSrc || "";

        if (input) input.value = "";

        if (input) {
            delete input.dataset.previousFileData;
            delete input.dataset.previousFileName;
        }

        if (defaultSrc) {
            if (imgElement) {
                imgElement.src = defaultSrc;
                imgElement.style.display = "block";
            }
            if (textbox) textbox.style.display = "none";
            if (overlay) overlay.classList.add("show");
            if (removeBtn) removeBtn.style.opacity = 1;
            card.classList.add("input-disabled");
        } else {
            if (imgElement) {
                imgElement.style.display = "none";
                imgElement.src = "";
            }
            if (textbox) textbox.style.display = "block";
            if (overlay) overlay.classList.remove("show");
            if (removeBtn) removeBtn.style.opacity = 0;
            card.classList.remove("input-disabled");
        }
    }

    function resetFileUploadAllImage(card) {
        const inputs = card.querySelectorAll(".single_file_input");
        const imgElements = card.querySelectorAll(".upload-file-img");
        const textboxes = card.querySelectorAll(".upload-file-textbox");
        const removeBtns = card.querySelectorAll(".remove_btn");
        const overlays = card.querySelectorAll(".overlay");

        // Reset all file inputs
        inputs.forEach(input => {
            input.value = "";
            delete input.dataset.previousFileData;
            delete input.dataset.previousFileName;
        });

        const defaultSrc = imgElements[0]?.dataset.defaultSrc || "";

        if (defaultSrc) {
            imgElements.forEach(img => {
                img.src = defaultSrc;
                img.classList.remove("d-none");
            });

            textboxes.forEach(textbox => {
                textbox.style.removeProperty('display');
                textbox.classList.add("d-none");
            });

            overlays.forEach(overlay => overlay.classList.add("show"));
            removeBtns.forEach(btn => btn.style.opacity = "1");

            card.classList.add("input-disabled");
        } else {
            imgElements.forEach(img => {
                img.src = "";
                img.classList.add("d-none");
            });

            textboxes.forEach(textbox => {
                textbox.style.removeProperty('display');
                textbox.classList.remove("d-none");
            });

            overlays.forEach(overlay => overlay.classList.remove("show"));
            removeBtns.forEach(btn => btn.style.opacity = "0");

            card.classList.remove("input-disabled");
        }
    }

    $(document).ready(function () {
         // --- Image Modal
         $(document).on("click", ".view_btn", function (e) {

             e.preventDefault();
             e.stopImmediatePropagation();
             let $card = $(this).closest(".upload-file, .view-img-wrap");
             let $img = $card.find("img.upload-file-img");

             let actualSrc = $img.attr("data-src") || $img.attr("src");

             if (actualSrc) {
                 let $modal = $(".imageModal").first();
                 let $modalImg = $modal.find("img.imageModal_img");
                 let $downloadBtn = $modal.find(".download_btn");

                 $modalImg.attr("src", actualSrc);
                 $downloadBtn.attr("href", actualSrc);

                 $modal.modal("show");
             }
         });

         $(document).on('click', '.remove_btn', function (e) {
             e.preventDefault();
             let bgInput = $('input[name="existing_background_image"]');
             let bgUrlInput = $('input[name="existing_background_image_url"]');
             if (bgInput.length) bgInput.val(null);
             if (bgUrlInput.length) bgUrlInput.val(null);
             let href = $(this).attr('href');
             if (href) window.location.href = href;
         })
     });

})(jQuery);
