(function($) {
    // Function to handle the custom functionality
    const addHandler = ($element) => {
        const forms = $element.find('.elementor-form');
        const submitButton = $element.find('button[type="submit"]');
        const requiredFields = forms.find('.elementor-field-type-image_radio.elementor-field-required');

        forms.each(function(formIndex) {
            
            // this code is for add a missing class in elmentor form
            let elementorMissingClass = forms.find('.elementor-labels-')  
            if(elementorMissingClass.length > 0){
                elementorMissingClass.removeClass('elementor-labels-')
                elementorMissingClass.addClass('elementor-labels-above')
            }
            
            const fields = $(this).find('.elementor-field-type-image_radio');

            if(fields.length > 0){
                fields.each(function(fieldIndex) {
                    const widgetId = $(this).find('input').attr('data-widget-id');
                    $(this).find('input').closest('.elementor-field-type-image_radio').addClass(`elementor-repeater-item-${widgetId}`);
                });
            }
        });
        submitButton.on('click', function(e) {
            let isValid = true;
            let firstErrorField = null;
        
            requiredFields.each(function() {
                const fieldWrapper = $(this);
                const inputType = fieldWrapper.find('input').attr('type');
                const inputs = fieldWrapper.find('input');
        
                let hasValue = false;
        
                if (inputType === 'radio' || inputType === 'checkbox') {
                    hasValue = inputs.is(':checked');
                }
        
                if (!hasValue) {
                    isValid = false;
        
                    if (!firstErrorField) {
                        firstErrorField = fieldWrapper;
                    }
        
                    fieldWrapper.addClass('custom-error');
        
                    if (fieldWrapper.find('.image-radio-error').length === 0) {
                        fieldWrapper.append('<div class="image-radio-error" style="color:red; font-size: 12px;">This field is required.</div>');
                    }
                } else {
                    fieldWrapper.removeClass('custom-error');
                    fieldWrapper.find('.image-radio-error').remove();
                }
            });
        
            if (!isValid) {
                e.preventDefault();
                // Scroll to first error field
                if (firstErrorField) {
                    $('html, body').animate({
                        scrollTop: firstErrorField.offset().top - 100 // offset for padding or header
                    }, 500);
                }
            }
        });        
    };

    // For frontend
    $(window).on('elementor/frontend/init', () => {
        elementorFrontend.hooks.addAction('frontend/element_ready/form.default', addHandler);
    });

})(jQuery);
