jQuery(document).ready(function ($) {

	// Disable all social icons customization controls for free users
	if (window.flIsPremium === false && typeof wp !== 'undefined' && wp.customize) {
		wp.customize.bind('ready', function () {
			const parentDoc = (typeof parent !== 'undefined' && parent.document) ? parent.document : document;
			const api = wp.customize;

			// Add free-user class to social icons sections
			const socialSections = [
				'#sub-accordion-section-fl_social_icons_design_section',
				'#sub-accordion-section-fl_social_icons_icons_section',
				'#sub-accordion-section-fl_social_icons_position_section'
			];

			socialSections.forEach(function (sectionId) {
				const section = $(parentDoc).find(sectionId);
				if (section.length) {
					section.addClass('fl-free-user');

					// Disable all controls in this section
					section.find('.customize-control').each(function () {
						const control = $(this);

						// Disable all inputs
						control.find('input, button, select').prop('disabled', true).attr('readonly', true);

						// Prevent clicks on color pickers
						control.find('.wp-picker-container, .wp-color-picker, .color-picker-hex').off('click').on('click', function (e) {
							e.preventDefault();
							e.stopPropagation();
							return false;
						});

						// Prevent clicks on icon selectors
						control.find('.fl_bg_holder, .floating_icon_holder').off('click').on('click', function (e) {
							e.preventDefault();
							e.stopPropagation();
							return false;
						});

						// Prevent clicks on radio buttons
						control.find('input[type="radio"]').off('click change').on('click change', function (e) {
							e.preventDefault();
							e.stopPropagation();
							return false;
						});

						// Prevent range slider changes
						control.find('input[type="range"]').off('input change').on('input change', function (e) {
							e.preventDefault();
							e.stopPropagation();
							return false;
						});

						// Prevent checkbox changes
						control.find('input[type="checkbox"]').off('click change').on('click change', function (e) {
							e.preventDefault();
							e.stopPropagation();
							return false;
						});
					});
				}
			});

			// Also disable controls when sections are opened
			api.bind('expanded', function (section) {
				if (section && section.id) {
					const sectionIds = [
						'fl_social_icons_design_section',
						'fl_social_icons_icons_section',
						'fl_social_icons_position_section'
					];

					if (sectionIds.indexOf(section.id) !== -1) {
						const section = $(parentDoc).find('#sub-accordion-section-' + section.id);
						if (section.length) {
							section.addClass('fl-free-user');
							section.find('.customize-control input, .customize-control button, .customize-control select').prop('disabled', true);
						}
					}
				}
			});
		});
	}

	jQuery(document).on("click", "#customize-control-fl_left_icon .fl_bg_holder", function ($) {
		jQuery('#customize-control-fl_left_icon .fl_bg_holder').removeClass('floating_icon_slected');
		jQuery(this).addClass('floating_icon_slected');

	});
	jQuery(document).on("click", "#customize-control-fl_right_icon .fl_bg_holder", function ($) {
		jQuery('#customize-control-fl_right_icon .fl_bg_holder').removeClass('floating_icon_slected');
		jQuery(this).addClass('floating_icon_slected');

	});
	jQuery(document).on("click", "#customize-control-fl_random_icon .fl_bg_holder", function ($) {
		jQuery('#customize-control-fl_random_icon .fl_bg_holder').removeClass('floating_icon_slected');
		jQuery(this).addClass('floating_icon_slected');

	});
	jQuery(document).on("click", "#customize-control-fl_up_icon .fl_bg_holder", function ($) {
		jQuery('#customize-control-fl_up_icon .fl_bg_holder').removeClass('floating_icon_slected');
		jQuery(this).addClass('floating_icon_slected');

	});
	jQuery(document).on("click", "#customize-control-fl_down_icon .fl_bg_holder", function ($) {
		jQuery('#customize-control-fl_down_icon .fl_bg_holder').removeClass('floating_icon_slected');
		jQuery(this).addClass('floating_icon_slected');
	});

	// Update range value display in real-time when slider moves
	jQuery(document).on('input change', 'input[type="range"]', function () {
		const rangeInput = jQuery(this);
		const valueDisplay = rangeInput.siblings('.cs-range-value');
		if (valueDisplay.length) {
			valueDisplay.text(rangeInput.val());
		}
	});
});	