jQuery(document).ready(function($) {
    // Function to show the loader
    function showLoader() {
        document.getElementById('page-loader').style.display = 'flex'; // Ensure the loader is shown
    }
  
      // Expose the showLoader function globally
    window.showLoader = showLoader;

    // Function to hide the loader - might be used elsewhere or for initial page load
    function hideLoader() {
        document.getElementById('page-loader').style.display = 'none'; // Ensure the loader is hidden
    }
    // Function to initialize Cloudinary widget and handle upload success
    function setupCloudinaryWidget(editButtonId, urlFieldSelector, submitButtonSelector) {
        var widget = cloudinary.createUploadWidget({
            cloudName: "drt2tlz1j",
            uploadPreset: "giftWidget",
            show_powered_by: false,
            sources: ["local", "image_search", "url"],
            defaultSource: "local",
            googleApiKey: "AIzaSyAhy7PJXH7_3t9qbIiczK5nZHsaUOGEFMM",
            searchBySites: ["all", "unsplash.com", "pexels.com", "vecteezy.com", "forestnation.com/net/"],
            showAdvancedOptions: false,
            cropping: true,
            croppingAspectRatio: 9 / 16,
            croppingShowBackButton: true,
            multiple: false,
            folder: "gs-uploads",
            clientAllowedFormats: ["image/*", "video/*", "mp4", "mov", "webm", "webp", "gif", "jpg", "png", "svg"],
            showCompletedButton: true,
            styles: {
                palette: {
                    window: "#00000099",
                    windowBorder: "#FFFFFF",
                    tabIcon: "#009A42",
                    menuIcons: "#FFFFFF",
                    textDark: "#FFFFFF",
                    textLight: "#FFFFFF",
                    link: "#009A42",
                    action: "#009A42",
                    inactiveTabIcon: "#FFFFFF",
                    error: "#FA9B32",
                    inProgress: "#009A42",
                    complete: "#009A42",
                    sourceBg: "#00000059"
                },
                fonts: {
                    default: null,
                    "'Montserrat', sans-serif": {
                        url: "https://fonts.googleapis.com/css?family=Montserrat:400,700",
                        active: true
                    }
            }
            }
        }, (error, result) => {
            if (!error && result && result.event === "success") {
                console.log('Done! Here is the image info: ', result.info);
                var uploadedUrl = result.info.secure_url;
                
                // Fill the ACF URL field with the uploaded URL
                $(urlFieldSelector).val(uploadedUrl);
							
                // Show the loader before submitting the form
                showLoader();
                
                // Submit the ACF form
                $(submitButtonSelector).click();
            }
        });

        // Attach click event to the edit button to open the widget
        $(editButtonId).on('click', function() {
            widget.open();
        });
    }

    // Setup Cloudinary widget for each edit button, URL field, and submit button
    setupCloudinaryWidget("#slide1edit", "input[name='acf[field_65c630a53001b]']", "button[name='acf[field_65c630e33001f]']");
    setupCloudinaryWidget("#slide2edit", "input[name='acf[field_65c630c93001c]']", "button[name='acf[field_65c6311130020]']");
    setupCloudinaryWidget("#slide3edit", "input[name='acf[field_65c630cf3001d]']", "button[name='acf[field_65c6311930021]']");
    setupCloudinaryWidget("#slide4edit", "input[name='acf[field_65c630d63001e]']", "button[name='acf[field_65c6312330022]']");
});