<?php
/**
 * Admin Class.
 *
 * @package Custom_Animated_Preloader
 */

// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

/**
 * Class SWAP_Admin.
 */
class SWAP_Admin {

	/**
	 * Constructor.
	 */
	public function __construct() {
		add_action( 'admin_menu', array( $this, 'add_admin_menu' ) );
		add_action( 'admin_init', array( $this, 'register_settings' ) );
		add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_admin_assets' ) );
		add_action( 'wp_ajax_swap_search_pages', array( $this, 'ajax_search_pages' ) );
		add_action( 'wp_ajax_swap_ajax_save', array( $this, 'ajax_save_settings' ) );
	}

	/**
	 * Add admin menu.
	 */
	public function add_admin_menu() {
		$parent_slug = 'smartwait-animated-preloader';
		$capability = 'manage_options';

		add_menu_page(
			__( 'SmartWait Animated Preloader', 'smartwait-animated-preloader' ),
			__( 'SmartWait', 'smartwait-animated-preloader' ),
			$capability,
			$parent_slug,
			array( $this, 'render_settings_page' ),
			'dashicons-hourglass',
			80
		);

		add_submenu_page(
			$parent_slug,
			__( 'Overview', 'smartwait-animated-preloader' ),
			__( 'Overview', 'smartwait-animated-preloader' ),
			$capability,
			$parent_slug,
			array( $this, 'render_settings_page' )
		);

		add_submenu_page(
			$parent_slug,
			__( 'General Settings', 'smartwait-animated-preloader' ),
			__( 'General', 'smartwait-animated-preloader' ),
			$capability,
			'swap-general',
			array( $this, 'render_settings_page' )
		);

		add_submenu_page(
			$parent_slug,
			__( 'Ready Preloader', 'smartwait-animated-preloader' ),
			__( 'Ready Preloader', 'smartwait-animated-preloader' ),
			$capability,
			'swap-style',
			array( $this, 'render_settings_page' )
		);

		add_submenu_page(
			$parent_slug,
			__( 'Logo Preloader', 'smartwait-animated-preloader' ),
			__( 'Logo Preloader', 'smartwait-animated-preloader' ),
			$capability,
			'swap-logo',
			array( $this, 'render_settings_page' )
		);

		add_submenu_page(
			$parent_slug,
			__( 'Custom Text Preloader', 'smartwait-animated-preloader' ),
			__( 'Custom Text Preloader', 'smartwait-animated-preloader' ),
			$capability,
			'swap-text',
			array( $this, 'render_settings_page' )
		);

		add_submenu_page(
			$parent_slug,
			__( 'Progress & Percentage', 'smartwait-animated-preloader' ),
			__( 'Progress & Percentage', 'smartwait-animated-preloader' ),
			$capability,
			'swap-progress',
			array( $this, 'render_settings_page' )
		);
	}

	/**
	 * Register settings.
	 */
	public function register_settings() {
		register_setting(
			'swap_settings_group',
			'swap_settings',
			array(
				'sanitize_callback' => array( $this, 'sanitize_settings' ),
			)
		);
	}

	/**
	 * Sanitize settings.
	 *
	 * @param array $input Input settings.
	 * @return array Sanitized settings.
	 */
	public function sanitize_settings( $input ) {
		$sanitized = array();

		// 1. Display Control.
		$allowed_types = array( 'none', 'style', 'logo', 'text', 'progress_timing' );
		$sanitized['active_preloader_type'] = isset( $input['active_preloader_type'] ) && in_array( $input['active_preloader_type'], $allowed_types ) ? $input['active_preloader_type'] : 'none';
		$sanitized['display_rule']          = isset( $input['display_rule'] ) ? sanitize_key( $input['display_rule'] ) : 'whole_site';
		$sanitized['excluded_pages']        = isset( $input['excluded_pages'] ) ? sanitize_text_field( $input['excluded_pages'] ) : '';
		$sanitized['user_exclusion']        = isset( $input['user_exclusion'] ) ? 'yes' : 'no';
		$sanitized['device_targeting']      = isset( $input['device_targeting'] ) && is_array( $input['device_targeting'] ) ? array_map( 'sanitize_key', $input['device_targeting'] ) : array();
		if ( isset( $input['show_delay_seconds'] ) ) {
			$sanitized['show_delay'] = absint( floatval( $input['show_delay_seconds'] ) * 1000 );
		} elseif ( isset( $input['show_delay'] ) ) {
			$sanitized['show_delay'] = absint( $input['show_delay'] );
		} else {
			$sanitized['show_delay'] = 0;
		}
		$sanitized['hide_delay']            = isset( $input['hide_delay'] ) ? absint( $input['hide_delay'] ) : 0;
		$sanitized['excluded_url_patterns'] = isset( $input['excluded_url_patterns'] ) ? sanitize_textarea_field( $input['excluded_url_patterns'] ) : '';
		
		// 2. Animation Types.
		$sanitized['spinner_type']      = isset( $input['spinner_type'] ) ? sanitize_key( $input['spinner_type'] ) : 'tpl-1';
		$sanitized['loader_color']      = isset( $input['loader_color'] ) ? sanitize_hex_color( $input['loader_color'] ) : '#ffffff';
		$sanitized['style_size']        = isset( $input['style_size'] ) ? absint( $input['style_size'] ) : 50;
		$sanitized['style_wait_anim']   = isset( $input['style_wait_anim'] ) && 'yes' === $input['style_wait_anim'] ? 'yes' : 'no';
		$sanitized['template_category'] = isset( $input['template_category'] ) ? sanitize_key( $input['template_category'] ) : 'minimal';
		$sanitized['premium_template']  = isset( $input['premium_template'] ) ? sanitize_key( $input['premium_template'] ) : '';

		// 3. Background.
		$sanitized['bg_choice']       = 'custom'; // Always use custom settings now.
		$sanitized['bg_color_type']   = isset( $input['bg_color_type'] ) && in_array( $input['bg_color_type'], array( 'black', 'white' ) ) ? $input['bg_color_type'] : 'black';
		$sanitized['bg_opacity']      = isset( $input['bg_opacity'] ) ? absint( $input['bg_opacity'] ) : 100;
		$sanitized['bg_type']         = isset( $input['bg_type'] ) ? sanitize_key( $input['bg_type'] ) : 'solid';
		$sanitized['bg_custom_color']   = isset( $input['bg_custom_color'] ) ? sanitize_hex_color( $input['bg_custom_color'] ) : '#000000';
		$sanitized['bg_gradient_start'] = isset( $input['bg_gradient_start'] ) ? sanitize_hex_color( $input['bg_gradient_start'] ) : '#0074ad';
		$sanitized['bg_gradient_end']   = isset( $input['bg_gradient_end'] ) ? sanitize_hex_color( $input['bg_gradient_end'] ) : '#7dd3fc';
		$sanitized['bg_gradient_angle'] = isset( $input['bg_gradient_angle'] ) ? absint( $input['bg_gradient_angle'] ) : 135;
		$sanitized['bg_image_url']      = isset( $input['bg_image_url'] ) ? esc_url_raw( $input['bg_image_url'] ) : '';
		$sanitized['bg_image_size']     = isset( $input['bg_image_size'] ) ? sanitize_text_field( $input['bg_image_size'] ) : 'cover';
		$sanitized['bg_image_position'] = isset( $input['bg_image_position'] ) ? sanitize_text_field( $input['bg_image_position'] ) : 'center center';
		$sanitized['bg_video_url']      = isset( $input['bg_video_url'] ) ? esc_url_raw( $input['bg_video_url'] ) : '';
		$sanitized['bg_blur']           = isset( $input['bg_blur'] ) ? absint( $input['bg_blur'] ) : 0;

		// 4. Branding.
		$sanitized['logo_url']       = isset( $input['logo_url'] ) ? esc_url_raw( $input['logo_url'] ) : '';
		$sanitized['logo_animation'] = isset( $input['logo_animation'] ) ? sanitize_key( $input['logo_animation'] ) : 'none';
		$sanitized['logo_height']    = isset( $input['logo_height'] ) ? absint( $input['logo_height'] ) : 0;
		$sanitized['logo_spacing']   = isset( $input['logo_spacing'] ) ? absint( $input['logo_spacing'] ) : 20;
		$sanitized['logo_anim_speed'] = isset( $input['logo_anim_speed'] ) ? absint( $input['logo_anim_speed'] ) : 1000;
		$sanitized['logo_wait_anim']  = isset( $input['logo_wait_anim'] ) && 'yes' === $input['logo_wait_anim'] ? 'yes' : 'no';

		// 5. Text & Typography.
		$sanitized['show_loading_text'] = isset( $input['show_loading_text'] ) && 'yes' === $input['show_loading_text'] ? 'yes' : 'no'; // Kept for default merge
		$sanitized['loading_text']      = isset( $input['loading_text'] ) ? sanitize_text_field( $input['loading_text'] ) : 'Loading...';
		$sanitized['text_animation']    = isset( $input['text_animation'] ) ? sanitize_key( $input['text_animation'] ) : 'none';
		$sanitized['text_anim_speed']   = isset( $input['text_anim_speed'] ) ? absint( $input['text_anim_speed'] ) : 1000;
		$sanitized['text_wait_anim']    = isset( $input['text_wait_anim'] ) && 'yes' === $input['text_wait_anim'] ? 'yes' : 'no';
		$sanitized['font_family']       = isset( $input['font_family'] ) ? sanitize_text_field( $input['font_family'] ) : 'Arial, sans-serif';
		$sanitized['font_size']         = isset( $input['font_size'] ) ? absint( $input['font_size'] ) : 16;
		$sanitized['font_weight']       = isset( $input['font_weight'] ) ? sanitize_text_field( $input['font_weight'] ) : 'normal';
		$sanitized['text_color']        = isset( $input['text_color'] ) ? sanitize_hex_color( $input['text_color'] ) : '#000000';
		$sanitized['use_normal_text']   = isset( $input['use_normal_text'] ) && 'yes' === $input['use_normal_text'] ? 'yes' : 'no';
		$sanitized['use_readymade_text'] = isset( $input['use_readymade_text'] ) && 'yes' === $input['use_readymade_text'] ? 'yes' : 'no';
		$sanitized['readymade_text_style'] = isset( $input['readymade_text_style'] ) ? sanitize_key( $input['readymade_text_style'] ) : 'l1';
		$sanitized['custom_font_url']   = isset( $input['custom_font_url'] ) ? esc_url_raw( $input['custom_font_url'] ) : '';
		$sanitized['show_percentage']    = isset( $input['show_percentage'] ) && 'yes' === $input['show_percentage'] ? 'yes' : 'no';
		$sanitized['show_progress_bar']  = isset( $input['show_progress_bar'] ) && 'yes' === $input['show_progress_bar'] ? 'yes' : 'no';
		$sanitized['progress_bar_type']  = isset( $input['progress_bar_type'] ) ? sanitize_key( $input['progress_bar_type'] ) : 'linear';
		$sanitized['progress_bar_color'] = isset( $input['progress_bar_color'] ) ? sanitize_hex_color( $input['progress_bar_color'] ) : '#ffffff';
		$sanitized['progress_bar_height'] = isset( $input['progress_bar_height'] ) ? absint( $input['progress_bar_height'] ) : 4;
		$sanitized['percentage_color']     = isset( $input['percentage_color'] ) ? sanitize_hex_color( $input['percentage_color'] ) : '#ffffff';
		$sanitized['percentage_font_size'] = isset( $input['percentage_font_size'] ) ? absint( $input['percentage_font_size'] ) : 24;

		// 7. Animation & Timing.
		$sanitized['fade_out_speed']    = isset( $input['fade_out_speed'] ) ? absint( $input['fade_out_speed'] ) : 500;
		$sanitized['min_display_time']  = isset( $input['min_display_time'] ) ? absint( $input['min_display_time'] ) : 1000;
		$sanitized['transition_effect'] = isset( $input['transition_effect'] ) ? sanitize_key( $input['transition_effect'] ) : 'fade';

		// 8. Admin & Developer.
		$sanitized['enable_live_preview'] = isset( $input['enable_live_preview'] ) ? 'yes' : 'no';
		$sanitized['custom_css']          = isset( $input['custom_css'] ) ? sanitize_textarea_field( $input['custom_css'] ) : '';
		$sanitized['script_loading']      = isset( $input['script_loading'] ) && in_array( $input['script_loading'], array( 'header', 'footer' ) ) ? $input['script_loading'] : 'footer';

		// 9. Pro Feature Gating — reset Pro values to defaults if not on Pro plan.
		if ( ! SWAP_Helpers::is_pro() ) {
			$defaults = SWAP_Helpers::get_default_settings();

			// Force free template only.
			if ( ! in_array( $sanitized['spinner_type'], SWAP_Helpers::FREE_TEMPLATES, true ) ) {
				$sanitized['spinner_type'] = $defaults['spinner_type'];
			}

			// Force free text animation only.
			if ( ! in_array( $sanitized['text_animation'], SWAP_Helpers::FREE_TEXT_ANIMATIONS, true ) ) {
				$sanitized['text_animation'] = $defaults['text_animation'];
			}

			// Disable Pro-only toggles.
			$sanitized['style_wait_anim']    = 'no';
			$sanitized['logo_wait_anim']     = 'no';
			$sanitized['text_wait_anim']     = 'no';
			$sanitized['show_percentage']    = 'no';
			$sanitized['use_readymade_text'] = 'no';

			// Force solid background (gradient/image are Pro).
			$sanitized['bg_type'] = 'solid';
		}

		return $sanitized;
	}

	/**
	 * AJAX save settings (no page reload).
	 */
	public function ajax_save_settings() {
		// Security checks.
		if ( ! isset( $_POST['nonce'] ) || ! wp_verify_nonce( sanitize_text_field( wp_unslash( $_POST['nonce'] ) ), 'swap_admin_nonce' ) ) {
			wp_send_json_error( array( 'message' => 'Invalid nonce.' ) );
		}
		if ( ! current_user_can( 'manage_options' ) ) {
			wp_send_json_error( array( 'message' => 'Permission denied.' ) );
		}

		// Parse the serialized form data.
		$form_data = array();
		if ( isset( $_POST['form_data'] ) ) {
			// phpcs:ignore WordPress.Security.ValidatedSanitizedInput.InputNotSanitized -- Re-sanitized later by sanitize_settings().
			parse_str( wp_unslash( $_POST['form_data'] ), $form_data );
		}

		// Extract swap_settings from form data.
		$input = isset( $form_data['swap_settings'] ) ? $form_data['swap_settings'] : array();

		// Run through the existing sanitize function.
		$sanitized = $this->sanitize_settings( $input );

		// Save to database.
		update_option( 'swap_settings', $sanitized );

		wp_send_json_success( array( 'message' => 'Settings saved successfully.' ) );
	}

	/**
	 * Enqueue admin assets.
	 *
	 * @param string $hook Current admin page hook.
	 */
	public function enqueue_admin_assets( $hook ) {
		if ( strpos( $hook, 'smartwait-animated-preloader' ) === false && strpos( $hook, 'swap-' ) === false ) {
			return;
		}

		wp_enqueue_media();
		wp_enqueue_style( 'swap-admin-css', SWAP_URL . 'resources/css/admin.css', array(), SWAP_VERSION );
		wp_enqueue_style( 'swap-frontend-css', SWAP_URL . 'resources/css/frontend.css', array(), SWAP_VERSION );
		wp_enqueue_style( 'swap-spinners-css', SWAP_URL . 'resources/css/spinners.css', array(), SWAP_VERSION );
		wp_enqueue_script( 'swap-admin-js', SWAP_URL . 'resources/js/admin.js', array( 'jquery' ), SWAP_VERSION, true );
		wp_localize_script( 'swap-admin-js', 'swap_vars', array(
			'ajaxurl' => admin_url( 'admin-ajax.php' ),
			'nonce'   => wp_create_nonce( 'swap_admin_nonce' ),
			'isPro'   => SWAP_Helpers::is_pro(),
		) );
	}

	/**
	 * Render background controls for sidebar.
	 *
	 * Reusable block of Background Opacity, Background Styling, and Background Color
	 * controls shown in every preloader tab sidebar.
	 *
	 * @param array $settings Current plugin settings.
	 */
	private function render_sidebar_bg_controls( $settings ) {
		$is_pro = SWAP_Helpers::is_pro();
		?>
		<input type="hidden" name="swap_settings[bg_choice]" value="custom">
		<!-- Background Opacity (sidebar) -->
		<div class="swap-sidebar-section swap-bg-sync-block">
			<div class="swap-sidebar-section-header">
				<strong><?php esc_html_e( 'Background Opacity', 'smartwait-animated-preloader' ); ?></strong>
			</div>
			<div class="swap-opacity-control-wrap">
				<div class="swap-range-wrap">
					<input type="range" name="swap_settings[bg_opacity]" class="swap-range-slider swap-bg-opacity-range" min="0" max="100" value="<?php echo esc_attr( $settings['bg_opacity'] ); ?>">
				</div>
				<div class="swap-number-box">
					<input type="text" class="swap-bg-opacity-text" value="<?php echo esc_attr( $settings['bg_opacity'] ); ?>%" readonly>
				</div>
			</div>
			<div class="swap-range-labels">
				<span><?php esc_html_e( 'Transparent', 'smartwait-animated-preloader' ); ?></span>
				<span><?php esc_html_e( 'Opaque', 'smartwait-animated-preloader' ); ?></span>
			</div>
		</div>

		<!-- Background Styling (sidebar) -->
		<div class="swap-sidebar-section swap-bg-sync-block <?php echo ! $is_pro ? esc_attr( 'swap-pro-locked' ) : ''; ?>">
			<div class="swap-sidebar-section-header">
				<strong><?php esc_html_e( 'Background Styling', 'smartwait-animated-preloader' ); ?></strong>
				<span class="swap-badge-pro" style="font-size:10px;"><?php esc_html_e( 'Pro', 'smartwait-animated-preloader' ); ?></span>
			</div>
			<div class="swap-mode-toggles swap-mode-toggles-compact">
				<label class="swap-mode-btn <?php echo $settings['bg_type'] === 'solid' ? esc_attr( 'active' ) : ''; ?>">
					<input type="radio" name="swap_settings[bg_type]" value="solid" <?php checked( $settings['bg_type'], 'solid' ); ?>>
					<span class="dashicons dashicons-art"></span> <?php esc_html_e( 'Solid', 'smartwait-animated-preloader' ); ?>
				</label>
				<label class="swap-mode-btn <?php echo $settings['bg_type'] === 'gradient' ? esc_attr( 'active' ) : ''; ?>">
					<input type="radio" name="swap_settings[bg_type]" value="gradient" <?php checked( $settings['bg_type'], 'gradient' ); ?>>
					<span class="dashicons dashicons-images-alt2"></span> <?php esc_html_e( 'Gradient', 'smartwait-animated-preloader' ); ?>
				</label>
				<label class="swap-mode-btn <?php echo $settings['bg_type'] === 'image' ? esc_attr( 'active' ) : ''; ?>">
					<input type="radio" name="swap_settings[bg_type]" value="image" <?php checked( $settings['bg_type'], 'image' ); ?>>
					<span class="dashicons dashicons-format-image"></span> <?php esc_html_e( 'Image', 'smartwait-animated-preloader' ); ?>
				</label>
			</div>

			<!-- Solid -->
			<div class="swap-bg-mode-content" data-mode="solid" style="<?php echo $settings['bg_type'] === 'solid' ? '' : esc_attr( 'display:none;' ); ?>">
				<div class="swap-setting-row-compact">
					<label><?php esc_html_e( 'Background Color', 'smartwait-animated-preloader' ); ?></label>
					<div class="swap-color-picker-wrap">
						<input type="color" name="swap_settings[bg_custom_color]" value="<?php echo esc_attr( $settings['bg_custom_color'] ); ?>" class="swap-color-input swap-bg-color-sync">
						<input type="text" value="<?php echo esc_attr( $settings['bg_custom_color'] ); ?>" class="swap-input swap-hex-input swap-bg-hex-sync">
					</div>
				</div>
			</div>

			<!-- Gradient -->
			<div class="swap-bg-mode-content" data-mode="gradient" style="<?php echo $settings['bg_type'] === 'gradient' ? '' : esc_attr( 'display:none;' ); ?>">
				<div class="swap-setting-row-compact">
					<label><?php esc_html_e( 'Gradient Builder', 'smartwait-animated-preloader' ); ?></label>
					<div class="swap-gradient-builder">
						<div class="swap-gradient-colors">
							<input type="color" name="swap_settings[bg_gradient_start]" value="<?php echo esc_attr( isset( $settings['bg_gradient_start'] ) ? $settings['bg_gradient_start'] : '#0074ad' ); ?>" title="Start Color" class="swap-bg-grad-start-sync">
							<input type="color" name="swap_settings[bg_gradient_end]" value="<?php echo esc_attr( isset( $settings['bg_gradient_end'] ) ? $settings['bg_gradient_end'] : '#7dd3fc' ); ?>" title="End Color" class="swap-bg-grad-end-sync">
						</div>
						<div class="swap-gradient-angle">
							<span class="dashicons dashicons-update"></span>
							<input type="number" name="swap_settings[bg_gradient_angle]" value="<?php echo esc_attr( isset( $settings['bg_gradient_angle'] ) ? $settings['bg_gradient_angle'] : 135 ); ?>" class="swap-input-tiny swap-bg-angle-sync" min="0" max="360">
							<span class="unit">°</span>
						</div>
					</div>
				</div>
			</div>

			<!-- Image -->
			<div class="swap-bg-mode-content" data-mode="image" style="<?php echo $settings['bg_type'] === 'image' ? '' : esc_attr( 'display:none;' ); ?>">
				<div class="swap-image-upload-area swap-bg-image-upload">
					<input type="hidden" name="swap_settings[bg_image_url]" class="swap-bg-image-url-sync" value="<?php echo esc_attr( $settings['bg_image_url'] ); ?>">
					<div class="swap-upload-placeholder">
						<div class="swap-upload-icon"><span class="dashicons dashicons-cloud-upload"></span></div>
						<p><?php esc_html_e( 'Drop image here or', 'smartwait-animated-preloader' ); ?> <span class="swap-link"><?php esc_html_e( 'browse', 'smartwait-animated-preloader' ); ?></span></p>
					</div>
					<div class="swap-image-preview" style="<?php echo empty( $settings['bg_image_url'] ) ? esc_attr( 'display:none;' ) : 'background-image:url(' . esc_url( $settings['bg_image_url'] ) . ');'; ?>">
						<button type="button" class="swap-remove-image"><span class="dashicons dashicons-no"></span></button>
					</div>
				</div>

				<!-- Image Display Settings -->
				<div class="swap-image-display-settings" style="margin-top: 10px; <?php echo empty( $settings['bg_image_url'] ) ? esc_attr( 'display:none;' ) : ''; ?>">
					<div class="swap-setting-row-compact">
						<label><?php esc_html_e( 'Image Size', 'smartwait-animated-preloader' ); ?></label>
						<?php
						$size_options = array(
							'cover'   => __( 'Cover (Fill)', 'smartwait-animated-preloader' ),
							'contain' => __( 'Contain (Fit)', 'smartwait-animated-preloader' ),
							'auto'    => __( 'Auto', 'smartwait-animated-preloader' ),
						);
						$current_size = ! empty( $settings['bg_image_size'] ) ? $settings['bg_image_size'] : 'cover';
						?>
						<div class="swap-custom-dropdown" data-target="swap_settings[bg_image_size]">
							<input type="hidden" name="swap_settings[bg_image_size]" class="swap-bg-image-size-sync" value="<?php echo esc_attr( $current_size ); ?>">
							<div class="swap-dd-trigger">
								<span class="swap-dd-text"><?php echo esc_html( isset( $size_options[ $current_size ] ) ? $size_options[ $current_size ] : $size_options['cover'] ); ?></span>
								<span class="dashicons dashicons-arrow-down-alt2"></span>
							</div>
							<ul class="swap-dd-options">
								<?php foreach ( $size_options as $val => $label ) : ?>
									<li data-value="<?php echo esc_attr( $val ); ?>" class="<?php echo $current_size === $val ? esc_attr( 'selected' ) : ''; ?>">
										<?php echo esc_html( $label ); ?>
										<?php if ( $current_size === $val ) : ?><span class="dashicons dashicons-yes"></span><?php endif; ?>
									</li>
								<?php endforeach; ?>
							</ul>
						</div>
					</div>
					<div class="swap-setting-row-compact" style="margin-top: 8px;">
						<label><?php esc_html_e( 'Position', 'smartwait-animated-preloader' ); ?></label>
						<?php
						$pos_options = array(
							'center center' => __( 'Center', 'smartwait-animated-preloader' ),
							'top center'    => __( 'Top', 'smartwait-animated-preloader' ),
							'bottom center' => __( 'Bottom', 'smartwait-animated-preloader' ),
							'left center'   => __( 'Left', 'smartwait-animated-preloader' ),
							'right center'  => __( 'Right', 'smartwait-animated-preloader' ),
						);
						$current_pos = ! empty( $settings['bg_image_position'] ) ? $settings['bg_image_position'] : 'center center';
						?>
						<div class="swap-custom-dropdown" data-target="swap_settings[bg_image_position]">
							<input type="hidden" name="swap_settings[bg_image_position]" class="swap-bg-image-position-sync" value="<?php echo esc_attr( $current_pos ); ?>">
							<div class="swap-dd-trigger">
								<span class="swap-dd-text"><?php echo esc_html( isset( $pos_options[ $current_pos ] ) ? $pos_options[ $current_pos ] : $pos_options['center center'] ); ?></span>
								<span class="dashicons dashicons-arrow-down-alt2"></span>
							</div>
							<ul class="swap-dd-options">
								<?php foreach ( $pos_options as $val => $label ) : ?>
									<li data-value="<?php echo esc_attr( $val ); ?>" class="<?php echo $current_pos === $val ? esc_attr( 'selected' ) : ''; ?>">
										<?php echo esc_html( $label ); ?>
										<?php if ( $current_pos === $val ) : ?><span class="dashicons dashicons-yes"></span><?php endif; ?>
									</li>
								<?php endforeach; ?>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<?php
	}

	/**
	 * Render settings page.


				<!-- Global Custom Color Picker Modal -->
				<div id="swap-global-picker-modal" class="swap-global-modal" style="display:none;">
					<div class="swap-global-modal-content">
						<div class="swap-gm-header">
							<h3><?php esc_html_e( 'Custom Color', 'smartwait-animated-preloader' ); ?></h3>
							<button type="button" class="swap-gm-close"><span class="dashicons dashicons-no-alt"></span></button>
						</div>
						<!-- Complex Picker Structure -->
						<div class="swap-cp-saturation">
							<div class="swap-cp-white"></div>
							<div class="swap-cp-black"></div>
							<div class="swap-cp-cursor"></div>
						</div>
						<div class="swap-cp-controls">
							<div class="swap-cp-sliders">
								<div class="swap-cp-hue"><div class="swap-cp-hue-cursor"></div></div>
							</div>
							<div class="swap-cp-bottom-row">
								<div class="swap-cp-tool-icon" id="swap-cp-eyedropper"><span class="dashicons dashicons-eyedropper"></span></div>
								<div class="swap-cp-preview"></div>
								<div class="swap-cp-inputs">
									<input type="text" class="swap-cp-hex" maxlength="7" value="#ffffff">
									<span class="swap-cp-label">HEX</span>
								</div>
							</div>
						</div>
						<div class="swap-gm-actions">
							<button type="button" class="swap-gm-done"><?php esc_html_e( 'Select Color', 'smartwait-animated-preloader' ); ?></button>
						</div>
					</div>
					<div class="swap-global-overlay"></div>
				</div>
	 */
	public function render_settings_page() {
		$settings = SWAP_Helpers::get_settings();
		$is_pro   = SWAP_Helpers::is_pro();
		// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Only checking page parameter for UI tab routing.
		$current_page = isset( $_GET['page'] ) ? sanitize_text_field( wp_unslash( $_GET['page'] ) ) : 'smartwait-animated-preloader';

		// Map WordPress page slug to our internal tab ID
		$tab_map = array(
			'smartwait-animated-preloader' => 'dashboard',
			'swap-general'             => 'general',
			'swap-style'               => 'style',
			'swap-logo'                => 'logo',
			'swap-text'                => 'text',
			'swap-progress'            => 'progress-timing',
		);

		$active_tab = isset( $tab_map[ $current_page ] ) ? $tab_map[ $current_page ] : 'dashboard';
		?>
		<div class="swap-dashboard-wrap">
			<div class="swap-layout-container">
				
				<!-- Top Navigation Bar -->
				<header class="swap-header">
					<div class="swap-header-left">
						<div class="swap-logo-icon">
							<span class="dashicons dashicons-rocket"></span>
						</div>
						<h2><?php esc_html_e( 'SmartWait Animated Preloader', 'smartwait-animated-preloader' ); ?></h2>
					</div>
					<div class="swap-header-right">
						<a href="#" class="swap-btn-primary-header"><?php esc_html_e( 'Go Pro', 'smartwait-animated-preloader' ); ?></a>
						<div class="swap-user-avatar">
							<span class="dashicons dashicons-admin-users"></span>
						</div>
					</div>
				</header>

				<!-- Horizontal Tab Navigation -->
				<nav class="swap-nav-bar">
					<div class="swap-nav-scroll">
						<a href="<?php echo esc_url( admin_url( 'admin.php?page=smartwait-animated-preloader' ) ); ?>" class="swap-nav-item <?php echo 'dashboard' === $active_tab ? esc_attr( 'active' ) : ''; ?>">
							<p><?php esc_html_e( 'Overview', 'smartwait-animated-preloader' ); ?></p>
						</a>
						<a href="<?php echo esc_url( admin_url( 'admin.php?page=swap-general' ) ); ?>" class="swap-nav-item <?php echo 'general' === $active_tab ? esc_attr( 'active' ) : ''; ?>">
							<p><?php esc_html_e( 'General', 'smartwait-animated-preloader' ); ?></p>
						</a>
						<a href="<?php echo esc_url( admin_url( 'admin.php?page=swap-style' ) ); ?>" class="swap-nav-item <?php echo 'style' === $active_tab ? esc_attr( 'active' ) : ''; ?>">
							<p><?php esc_html_e( 'Ready Preloader', 'smartwait-animated-preloader' ); ?></p>
						</a>
						<a href="<?php echo esc_url( admin_url( 'admin.php?page=swap-logo' ) ); ?>" class="swap-nav-item <?php echo 'logo' === $active_tab ? esc_attr( 'active' ) : ''; ?>">
							<p><?php esc_html_e( 'Logo Preloader', 'smartwait-animated-preloader' ); ?></p>
						</a>
						<a href="<?php echo esc_url( admin_url( 'admin.php?page=swap-text' ) ); ?>" class="swap-nav-item <?php echo 'text' === $active_tab ? esc_attr( 'active' ) : ''; ?>">
							<p><?php esc_html_e( 'Custom Text Preloader', 'smartwait-animated-preloader' ); ?></p>
						</a>
						<a href="<?php echo esc_url( admin_url( 'admin.php?page=swap-progress' ) ); ?>" class="swap-nav-item <?php echo 'progress-timing' === $active_tab ? esc_attr( 'active' ) : ''; ?>">
							<p><?php esc_html_e( 'Progress & Percentage', 'smartwait-animated-preloader' ); ?></p>
						</a>
					</div>
				</nav>

				<!-- Main Content Area -->
				<form method="post" action="options.php" class="swap-main">
					<?php settings_fields( 'swap_settings_group' ); ?>
					<input type="hidden" name="swap_settings[active_preloader_type]" id="swap-active-type" value="<?php echo esc_attr( isset( $settings['active_preloader_type'] ) ? $settings['active_preloader_type'] : 'none' ); ?>">
					
					<!-- Dashboard Tab (Overview) -->
				<div id="tab-dashboard" class="swap-tab-content <?php echo 'dashboard' === $active_tab ? esc_attr( 'active' ) : ''; ?>">
					<div class="swap-grid-layout">
						<!-- Left Column (Main) -->
						<div class="swap-col-main">

							<!-- Welcome Section -->
							<section class="swap-welcome-card">
								<div class="swap-welcome-inner">
									<div class="swap-welcome-text">
										<h1><?php esc_html_e( 'Welcome to SmartWait Animated Preloader', 'smartwait-animated-preloader' ); ?></h1>
										<p><?php esc_html_e( 'Speed up your site\'s perceived performance with a beautiful loading experience. Get started by configuring your first preloader in just a few clicks.', 'smartwait-animated-preloader' ); ?></p>
										<a href="<?php echo esc_url( admin_url( 'admin.php?page=swap-general' ) ); ?>" class="swap-btn-primary">
											<?php esc_html_e( 'Get Started', 'smartwait-animated-preloader' ); ?> <span class="dashicons dashicons-arrow-right-alt2"></span>
										</a>
									</div>
									<div class="swap-welcome-illustration">
										<div class="swap-illustration-box">
											<span class="dashicons dashicons-star-filled"></span>
										</div>
									</div>
								</div>
							</section>

							<!-- Getting Started Guide -->
							<section class="swap-guide-card">
								<h2><?php esc_html_e( 'How to Start', 'smartwait-animated-preloader' ); ?></h2>
								<div class="swap-steps">
									<!-- Step 1 (Active/Filled) -->
									<div class="swap-step-item">
										<div class="swap-step-track">
											<div class="swap-step-num filled">1</div>
											<div class="swap-step-line"></div>
										</div>
										<div class="swap-step-body">
											<div class="swap-step-header">
												<h3><?php esc_html_e( 'Enable Preloader', 'smartwait-animated-preloader' ); ?></h3>
												<span class="dashicons dashicons-controls-repeat swap-step-icon"></span>
											</div>
											<p><?php esc_html_e( 'Activate the plugin globally on your site to start seeing the loading animations.', 'smartwait-animated-preloader' ); ?></p>
										</div>
									</div>
									<!-- Step 2 -->
									<div class="swap-step-item">
										<div class="swap-step-track">
											<div class="swap-step-num outlined">2</div>
											<div class="swap-step-line"></div>
										</div>
										<div class="swap-step-body">
											<div class="swap-step-header">
												<h3><?php esc_html_e( 'Choose a Template', 'smartwait-animated-preloader' ); ?></h3>
												<span class="dashicons dashicons-grid-view swap-step-icon"></span>
											</div>
											<p><?php esc_html_e( 'Select from our library of high-quality animations that match your brand\'s style.', 'smartwait-animated-preloader' ); ?></p>
										</div>
									</div>
									<!-- Step 3 -->
									<div class="swap-step-item">
										<div class="swap-step-track">
											<div class="swap-step-num outlined">3</div>
											<div class="swap-step-line"></div>
										</div>
										<div class="swap-step-body">
											<div class="swap-step-header">
												<h3><?php esc_html_e( 'Customize Style', 'smartwait-animated-preloader' ); ?></h3>
												<span class="dashicons dashicons-art swap-step-icon"></span>
											</div>
											<p><?php esc_html_e( 'Adjust colors, fonts, and timing to perfectly align with your brand identity.', 'smartwait-animated-preloader' ); ?></p>
										</div>
									</div>
									<!-- Step 4 (Last - no line) -->
									<div class="swap-step-item swap-step-last">
										<div class="swap-step-track">
											<div class="swap-step-num outlined">4</div>
										</div>
										<div class="swap-step-body">
											<div class="swap-step-header">
												<h3><?php esc_html_e( 'Save Changes', 'smartwait-animated-preloader' ); ?></h3>
												<span class="dashicons dashicons-saved swap-step-icon"></span>
											</div>
											<p><?php esc_html_e( 'Apply your settings and preview the final loading experience on your site.', 'smartwait-animated-preloader' ); ?></p>
										</div>
									</div>
								</div>
							</section>
						</div>

						<!-- Right Column (Sidebar) -->
						<aside class="swap-col-sidebar">
							<!-- More from Shois WP -->
							<div class="swap-more-apps-card">
								<h2>
									<span class="dashicons dashicons-screenoptions swap-apps-icon"></span>
									<?php esc_html_e( 'More from Shois WP', 'smartwait-animated-preloader' ); ?>
								</h2>
								<div class="swap-more-apps-list">
									<div class="swap-app-item">
										<div class="swap-app-icon green"><span class="dashicons dashicons-search"></span></div>
										<div class="swap-app-details">
											<p class="swap-app-name"><?php esc_html_e( 'Smart SEO Pro', 'smartwait-animated-preloader' ); ?></p>
											<a href="#" class="swap-app-link"><?php esc_html_e( 'Install Now', 'smartwait-animated-preloader' ); ?></a>
										</div>
									</div>
									<div class="swap-app-item">
										<div class="swap-app-icon amber"><span class="dashicons dashicons-shield"></span></div>
										<div class="swap-app-details">
											<p class="swap-app-name"><?php esc_html_e( 'Smart Security', 'smartwait-animated-preloader' ); ?></p>
											<a href="#" class="swap-app-link"><?php esc_html_e( 'Install Now', 'smartwait-animated-preloader' ); ?></a>
										</div>
									</div>
									<div class="swap-app-item">
										<div class="swap-app-icon blue"><span class="dashicons dashicons-performance"></span></div>
										<div class="swap-app-details">
											<p class="swap-app-name"><?php esc_html_e( 'Smart Optimizer', 'smartwait-animated-preloader' ); ?></p>
											<a href="#" class="swap-app-link"><?php esc_html_e( 'Install Now', 'smartwait-animated-preloader' ); ?></a>
										</div>
									</div>
								</div>
							</div>

							<!-- Upgrade Card -->
							<div class="swap-upgrade-card">
								<h3><?php esc_html_e( 'Upgrade to Pro', 'smartwait-animated-preloader' ); ?></h3>
								<p><?php esc_html_e( 'Unlock premium templates, custom CSS, and priority support.', 'smartwait-animated-preloader' ); ?></p>
								<ul>
									<li><span class="dashicons dashicons-yes-alt"></span> <?php esc_html_e( '50+ Premium Templates', 'smartwait-animated-preloader' ); ?></li>
									<li><span class="dashicons dashicons-yes-alt"></span> <?php esc_html_e( 'Advanced Animation Controls', 'smartwait-animated-preloader' ); ?></li>
									<li><span class="dashicons dashicons-yes-alt"></span> <?php esc_html_e( 'No Branding', 'smartwait-animated-preloader' ); ?></li>
								</ul>
								<button type="button" class="swap-btn-upgrade"><?php esc_html_e( 'Learn More', 'smartwait-animated-preloader' ); ?></button>
							</div>
						</aside>
					</div>

					<!-- Support & Resources Footer -->
					<div class="swap-resources-grid">
						<a href="https://wordpress.org/plugins/smartwait-animated-preloader/" class="swap-resource-card" target="_blank" rel="noopener noreferrer">
							<div class="swap-resource-icon"><span class="dashicons dashicons-book"></span></div>
							<div>
								<h4><?php esc_html_e( 'Documentation', 'smartwait-animated-preloader' ); ?></h4>
								<p><?php esc_html_e( 'Detailed guides and API docs', 'smartwait-animated-preloader' ); ?></p>
							</div>
						</a>
						<a href="https://wordpress.org/support/plugin/smartwait-animated-preloader/" class="swap-resource-card" target="_blank" rel="noopener noreferrer">
							<div class="swap-resource-icon"><span class="dashicons dashicons-format-chat"></span></div>
							<div>
								<h4><?php esc_html_e( 'Community Forum', 'smartwait-animated-preloader' ); ?></h4>
								<p><?php esc_html_e( 'Get help from other users', 'smartwait-animated-preloader' ); ?></p>
							</div>
						</a>
						<a href="#" class="swap-resource-card">
							<div class="swap-resource-icon"><span class="dashicons dashicons-businessman"></span></div>
							<div>
								<h4><?php esc_html_e( 'Priority Support', 'smartwait-animated-preloader' ); ?></h4>
								<p><?php esc_html_e( 'Direct line for Pro users', 'smartwait-animated-preloader' ); ?></p>
							</div>
						</a>
					</div>


				</div>

					<!-- Settings Tabs (Hidden by default via JS/CSS) -->
					
					<!-- 1. General Tab -->
					<div id="tab-general" class="swap-tab-content <?php echo 'general' === $active_tab ? esc_attr( 'active' ) : ''; ?>">
						<div class="swap-grid-2-col">
							<div class="swap-grid-main">

						<!-- Main Settings Card -->
						<div class="swap-modern-card">

							<!-- Live Preview (Moved Up) -->
							<div class="swap-setting-row swap-setting-row-border">
								<div class="swap-setting-label-col">
									<h3><?php esc_html_e( 'Live Preview', 'smartwait-animated-preloader' ); ?></h3>
									<p><?php esc_html_e( 'Show the preloader to logged-in admins for testing purposes.', 'smartwait-animated-preloader' ); ?></p>
								</div>
								<div class="swap-setting-field-col">
									<div class="swap-toggle-card">
										<div class="swap-toggle-info">
											<span class="swap-toggle-label"><?php esc_html_e( 'Enable Admin Live Preview', 'smartwait-animated-preloader' ); ?></span>
											<span class="swap-toggle-hint"><?php esc_html_e( 'Preview while logged in', 'smartwait-animated-preloader' ); ?></span>
										</div>
										<label class="switch">
											<input type="checkbox" name="swap_settings[enable_live_preview]" value="yes" <?php checked( $settings['enable_live_preview'], 'yes' ); ?>>
											<span class="slider round"></span>
										</label>
									</div>
								</div>
							</div>

							<!-- Visibility Rules Group -->
							<div class="swap-visibility-rules-group">
								<div class="swap-section-title-row" style="margin-bottom: 20px;">
									<h4 style="margin:0; font-size:16px; color: var(--swap-primary);"><?php esc_html_e( 'Display Rules', 'smartwait-animated-preloader' ); ?></h4>
								</div>
								
								<!-- Logged-in Users -->
								<div class="swap-setting-row swap-setting-row-border">
									<div class="swap-setting-label-col">
										<h3><?php esc_html_e( 'Logged-in Users', 'smartwait-animated-preloader' ); ?></h3>
										<p><?php esc_html_e( 'Choose whether to show the preloader to authenticated visitors.', 'smartwait-animated-preloader' ); ?></p>
									</div>
									<div class="swap-setting-field-col">
										<div class="swap-toggle-card">
											<div class="swap-toggle-info">
												<span class="swap-toggle-label"><?php esc_html_e( 'Hide for Logged-in Users', 'smartwait-animated-preloader' ); ?></span>
												<span class="swap-toggle-hint"><?php esc_html_e( 'Recommended for admin workflow', 'smartwait-animated-preloader' ); ?></span>
											</div>
											<label class="switch">
												<input type="checkbox" name="swap_settings[user_exclusion]" value="yes" <?php checked( $settings['user_exclusion'], 'yes' ); ?>>
												<span class="slider round"></span>
											</label>
										</div>
									</div>
								</div>

							<!-- Device Visibility -->
							<div class="swap-setting-row swap-setting-row-border">
								<div class="swap-setting-label-col">
									<h3><?php esc_html_e( 'Device Visibility', 'smartwait-animated-preloader' ); ?></h3>
									<p><?php esc_html_e( 'Enable or disable based on visitor\'s device.', 'smartwait-animated-preloader' ); ?></p>
								</div>
								<div class="swap-setting-field-col">
									<?php $devices = $settings['device_targeting'] ?: array(); ?>
									<div class="swap-device-grid">
										<label class="swap-device-card <?php echo empty( $devices ) ? esc_attr( 'active' ) : ''; ?>">
											<input type="checkbox" name="swap_settings[device_targeting][]" value="all" <?php checked( empty( $devices ) || in_array( 'all', $devices, true ) ); ?> class="swap-device-input">
											<span class="dashicons dashicons-networking swap-device-icon"></span>
											<span class="swap-device-name"><?php esc_html_e( 'All Devices', 'smartwait-animated-preloader' ); ?></span>
											<span class="swap-device-status"><?php esc_html_e( 'Enabled', 'smartwait-animated-preloader' ); ?></span>
										</label>
										<label class="swap-device-card <?php echo in_array( 'desktop', $devices, true ) ? esc_attr( 'active' ) : ''; ?>">
											<input type="checkbox" name="swap_settings[device_targeting][]" value="desktop" <?php checked( in_array( 'desktop', $devices, true ) ); ?> class="swap-device-input">
											<span class="dashicons dashicons-desktop swap-device-icon"></span>
											<span class="swap-device-name"><?php esc_html_e( 'Desktop', 'smartwait-animated-preloader' ); ?></span>
											<span class="swap-device-status"><?php echo in_array( 'desktop', $devices, true ) ? esc_html__( 'Enabled', 'smartwait-animated-preloader' ) : esc_html__( 'Disabled', 'smartwait-animated-preloader' ); ?></span>
										</label>
										<label class="swap-device-card <?php echo in_array( 'tablet', $devices, true ) ? esc_attr( 'active' ) : ''; ?>">
											<input type="checkbox" name="swap_settings[device_targeting][]" value="tablet" <?php checked( in_array( 'tablet', $devices, true ) ); ?> class="swap-device-input">
											<span class="dashicons dashicons-tablet swap-device-icon"></span>
											<span class="swap-device-name"><?php esc_html_e( 'Tablet', 'smartwait-animated-preloader' ); ?></span>
											<span class="swap-device-status"><?php echo in_array( 'tablet', $devices, true ) ? esc_html__( 'Enabled', 'smartwait-animated-preloader' ) : esc_html__( 'Disabled', 'smartwait-animated-preloader' ); ?></span>
										</label>
										<label class="swap-device-card <?php echo in_array( 'mobile', $devices, true ) ? esc_attr( 'active' ) : ''; ?>">
											<input type="checkbox" name="swap_settings[device_targeting][]" value="mobile" <?php checked( in_array( 'mobile', $devices, true ) ); ?> class="swap-device-input">
											<span class="dashicons dashicons-smartphone swap-device-icon"></span>
											<span class="swap-device-name"><?php esc_html_e( 'Mobile', 'smartwait-animated-preloader' ); ?></span>
											<span class="swap-device-status"><?php echo in_array( 'mobile', $devices, true ) ? esc_html__( 'Enabled', 'smartwait-animated-preloader' ) : esc_html__( 'Disabled', 'smartwait-animated-preloader' ); ?></span>
										</label>
									</div>
								</div>
							</div>

							</div>

						</div>

						<!-- Advanced / Developer Settings Card -->
						<div class="swap-modern-card" style="margin-top: 32px;">

						</div>

						</div> <!-- .swap-grid-main -->

						<!-- Right Column: General Sidebar -->
						<div class="swap-grid-sidebar">
							<div class="swap-modern-card swap-style-sidebar-card">
								<div class="swap-style-sidebar-brand">
									<button type="submit" class="swap-sidebar-save-btn">
										<span class="dashicons dashicons-cloud-saved"></span>
										<?php esc_html_e( 'Save Settings', 'smartwait-animated-preloader' ); ?>
									</button>
								</div>

								<!-- Display Settings Sidebar -->
								<div class="swap-sidebar-section" style="margin-top: 20px; border-top: 1px solid var(--swap-border); padding-top: 20px;">
									<h4 style="margin:0 0 15px; font-size:14px;"><?php esc_html_e( 'Display Settings', 'smartwait-animated-preloader' ); ?></h4>
									
									<!-- Display Delay -->
									<div class="swap-sidebar-sub-row" style="margin-bottom: 15px;">
										<div class="swap-flex-between" style="margin-bottom: 5px;">
											<label style="font-size:12px; font-weight:600;"><?php esc_html_e( 'Display Delay', 'smartwait-animated-preloader' ); ?></label>
											<span style="font-size:11px; color:#64748b;"><?php esc_html_e( 'Wait before showing', 'smartwait-animated-preloader' ); ?></span>
										</div>
										<div class="swap-number-input-wrap">
											<input type="number" name="swap_settings[show_delay]" value="<?php echo esc_attr( $settings['show_delay'] ); ?>" class="swap-input swap-input-number" min="0" step="100">
											<span class="swap-number-unit"><?php esc_html_e( 'ms', 'smartwait-animated-preloader' ); ?></span>
										</div>
									</div>

									<!-- Script Loading -->
									<div class="swap-sidebar-sub-row" style="margin-bottom: 15px;">
										<label style="font-size:12px; font-weight:600; display:block; margin-bottom: 5px;"><?php esc_html_e( 'Script Loading', 'smartwait-animated-preloader' ); ?></label>
										<div class="swap-custom-dropdown" id="swap-script-loading-dropdown" style="width:100%;">
											<input type="hidden" name="swap_settings[script_loading]" id="SWAP_script_loading" value="<?php echo esc_attr( $settings['script_loading'] ); ?>">
											<div class="swap-dropdown-trigger">
												<span class="swap-dropdown-text">
													<?php
													$labels = array(
														'footer' => 'Footer (Better performance)',
														'header' => 'Header (Fastest)',
													);
													echo isset( $labels[ $settings['script_loading'] ] ) ? esc_html( $labels[ $settings['script_loading'] ] ) : 'Footer (Better performance)';
													?>
												</span>
												<span class="dashicons dashicons-arrow-down-alt2"></span>
											</div>
											<ul class="swap-dropdown-options">
												<li data-value="footer" class="<?php echo $settings['script_loading'] === 'footer' ? esc_attr( 'selected' ) : ''; ?>">
													<span>Footer (Better performance)</span>
													<?php if ( $settings['script_loading'] === 'footer' ) : ?>
														<span class="dashicons dashicons-yes"></span>
													<?php endif; ?>
												</li>
												<li data-value="header" class="<?php echo $settings['script_loading'] === 'header' ? esc_attr( 'selected' ) : ''; ?>">
													<span>Header (Fastest)</span>
													<?php if ( $settings['script_loading'] === 'header' ) : ?>
														<span class="dashicons dashicons-yes"></span>
													<?php endif; ?>
												</li>
											</ul>
										</div>
									</div>
								</div>

								<!-- Exclude Pages Section (Sidebar) -->
								<div class="swap-sidebar-section" style="margin-top: 20px; border-top: 1px solid var(--swap-border); padding-top: 20px;">
									<h4 style="margin:0 0 10px; font-size:14px;"><?php esc_html_e( 'Exclude Pages', 'smartwait-animated-preloader' ); ?></h4>
									<div class="swap-exclude-section" style="padding:0; margin:0; border:none; box-shadow:none;">
										<div class="swap-exclude-search-wrap" style="margin-bottom:10px;">
											<span class="dashicons dashicons-search"></span>
											<input type="text" id="swap-page-search" class="swap-input swap-exclude-search-input" placeholder="<?php esc_attr_e( 'Search pages...', 'smartwait-animated-preloader' ); ?>" autocomplete="off" style="font-size:12px;">
											<ul id="swap-search-results" class="swap-search-results"></ul>
										</div>
										<div class="swap-tags-container" id="swap-exclude-tags" style="margin-bottom:10px; max-height: 100px; overflow-y: auto;">
											<?php
											$excluded_ids = array_filter( array_map( 'trim', explode( ',', $settings['excluded_pages'] ) ) );
											foreach ( $excluded_ids as $id ) {
												if ( is_numeric( $id ) && get_post( $id ) ) {
													printf(
														'<span class="swap-pill" data-id="%1$s">%2$s <span class="dashicons dashicons-no-alt"></span></span>',
														esc_attr( $id ),
														esc_html( get_the_title( $id ) )
													);
												} elseif ( ! empty( $id ) ) {
													printf(
														'<span class="swap-pill" data-id="%1$s">%1$s <span class="dashicons dashicons-no-alt"></span></span>',
														esc_attr( $id )
													);
												}
											}
											?>
										</div>
										<div class="swap-exclude-id-section" style="padding-top:0;">
											<label style="font-size:11px; font-weight:600; color:#64748b; margin-bottom:5px; display:block;"><?php esc_html_e( 'EXCLUDE BY ID', 'smartwait-animated-preloader' ); ?></label>
											<div class="swap-exclude-id-wrap">
												<span class="swap-id-hash">#</span>
												<input type="text" name="swap_settings[excluded_pages]" id="swap-excluded-ids" value="<?php echo esc_attr( $settings['excluded_pages'] ); ?>" class="swap-input swap-exclude-id-input" placeholder="<?php esc_attr_e( 'e.g., 12, 45', 'smartwait-animated-preloader' ); ?>" style="font-size:12px;">
											</div>
										</div>
									</div>
								</div>

								<!-- Sidebar Custom CSS (Moved from Main) -->
								<div class="swap-sidebar-section" style="margin-top: 20px; border-top: 1px solid var(--swap-border); padding-top: 20px;">
									<div class="swap-section-title-row" style="margin-bottom: 10px;">
										<h4 style="margin:0; font-size:14px;"><?php esc_html_e( 'Custom CSS', 'smartwait-animated-preloader' ); ?></h4>
										<span class="swap-pro-badge" style="font-size:10px;"><?php esc_html_e( 'PRO', 'smartwait-animated-preloader' ); ?></span>
									</div>
									<div class="swap-code-editor-wrap" style="box-shadow: none; border: 1px solid var(--swap-border);">
										<div class="swap-code-editor-header">
											<div class="swap-code-dots">
												<span class="dot red"></span>
												<span class="dot yellow"></span>
												<span class="dot green"></span>
											</div>
											<span class="swap-code-filename">style.css</span>
										</div>
										<textarea name="swap_settings[custom_css]" class="swap-code-textarea" rows="10" style="min-height: 150px;" placeholder="<?php esc_attr_e( '/* Add your custom styles here */', 'smartwait-animated-preloader' ); ?>"><?php echo esc_textarea( $settings['custom_css'] ); ?></textarea>
									</div>
									<p style="font-size:11px; color:#64748b; margin-top:8px;"><?php esc_html_e( 'Override preloader styling.', 'smartwait-animated-preloader' ); ?></p>
								</div>
							</div>
						</div> <!-- .swap-grid-sidebar -->
					</div> <!-- .swap-grid-2-col -->
				</div>

					<!-- 2. Style Tab -->
					<div id="tab-style" class="swap-tab-content <?php echo 'style' === $active_tab ? 'active' : ''; ?>">

						<!-- Tab Header -->
						<div class="swap-tab-header">
							<h2><?php esc_html_e( 'Ready Preloader', 'smartwait-animated-preloader' ); ?></h2>
							<p class="swap-tab-subtitle"><?php esc_html_e( 'Choose a loading animation template and customize background settings.', 'smartwait-animated-preloader' ); ?></p>
						</div>

						<div class="swap-grid-2-col">
							<!-- Left Column: Settings -->
							<div class="swap-grid-main">

								<!-- Template Cards Grid -->
								<div class="swap-template-grid">
									<?php
									$free_templates = array(
										'tpl-1'  => __( 'Dot Reveal', 'smartwait-animated-preloader' ),
										'tpl-2'  => __( 'Dancing Dots', 'smartwait-animated-preloader' ),
										'tpl-3'  => __( 'Dot Squeeze', 'smartwait-animated-preloader' ),
										'tpl-4'  => __( 'Dot Orbit', 'smartwait-animated-preloader' ),
										'tpl-5'  => __( 'Dot Wave', 'smartwait-animated-preloader' ),
										'tpl-6'  => __( 'Dot Carousel', 'smartwait-animated-preloader' ),
										'tpl-7'  => __( 'Dot Exchange', 'smartwait-animated-preloader' ),
										'tpl-8'  => __( 'Bar Bounce', 'smartwait-animated-preloader' ),
										'tpl-9'  => __( 'Bar Cascade', 'smartwait-animated-preloader' ),
										'tpl-10' => __( 'Bar Matrix', 'smartwait-animated-preloader' ),
										'tpl-11' => __( 'Bar Shuffle', 'smartwait-animated-preloader' ),
										'tpl-12' => __( 'Walking Dots', 'smartwait-animated-preloader' ),
										'tpl-13' => __( 'Ring Spin', 'smartwait-animated-preloader' ),
										'tpl-14' => __( 'Triangle Fold', 'smartwait-animated-preloader' ),
										'tpl-15' => __( 'Diamond Pulse', 'smartwait-animated-preloader' ),
										'tpl-16' => __( 'Box Fold', 'smartwait-animated-preloader' ),
										'tpl-17' => __( 'Pinwheel', 'smartwait-animated-preloader' ),
										'tpl-18' => __( 'Triangle Dance', 'smartwait-animated-preloader' ),
										'tpl-19' => __( 'Block Progress', 'smartwait-animated-preloader' ),
										'tpl-20' => __( 'Dot Progress', 'smartwait-animated-preloader' ),
										'tpl-21' => __( 'Dot Bounce Wave', 'smartwait-animated-preloader' ),
										'tpl-22' => __( 'Dot Zigzag', 'smartwait-animated-preloader' ),
										'tpl-23' => __( 'Conic Zigzag', 'smartwait-animated-preloader' ),
										'tpl-24' => __( 'Ball Bounce', 'smartwait-animated-preloader' ),
										'tpl-25' => __( 'Glow Ring', 'smartwait-animated-preloader' ),
										'tpl-26' => __( 'Dual Glow Ring', 'smartwait-animated-preloader' ),
										'tpl-27' => __( '3D Cube', 'smartwait-animated-preloader' ),
										'tpl-28' => __( 'Circle Pulse', 'smartwait-animated-preloader' ),
										'tpl-29' => __( 'Bar Slide', 'smartwait-animated-preloader' ),
										'tpl-30' => __( 'Ripple', 'smartwait-animated-preloader' ),
										'tpl-31' => __( 'Triple Ripple', 'smartwait-animated-preloader' ),
										'tpl-32' => __( 'Pac-Man', 'smartwait-animated-preloader' ),
										'tpl-33' => __( 'Gyroscope', 'smartwait-animated-preloader' ),
										'tpl-34' => __( 'Puzzle Conic', 'smartwait-animated-preloader' ),
										'tpl-35' => __( 'Puzzle Bars', 'smartwait-animated-preloader' ),
										'tpl-36' => __( 'Puzzle Bars Tall', 'smartwait-animated-preloader' ),
										'tpl-37' => __( 'Puzzle Wave', 'smartwait-animated-preloader' ),
										'tpl-38' => __( 'Pill Toggle', 'smartwait-animated-preloader' ),
										'tpl-39' => __( 'Ring Orbit', 'smartwait-animated-preloader' ),
										'tpl-40' => __( 'Block Chase', 'smartwait-animated-preloader' ),
										'tpl-41' => __( 'Block Flip', 'smartwait-animated-preloader' ),
										'tpl-42' => __( 'Grid Trail', 'smartwait-animated-preloader' ),
										'tpl-43' => __( 'Eyes Blink', 'smartwait-animated-preloader' ),
										'tpl-44' => __( 'Eyes Look', 'smartwait-animated-preloader' ),
										'tpl-45' => __( 'Eyes Spin', 'smartwait-animated-preloader' ),
										'tpl-46' => __( 'Square Draw', 'smartwait-animated-preloader' ),
										'tpl-47' => __( 'Grid Chain', 'smartwait-animated-preloader' ),
										'tpl-48' => __( 'Snake Trail', 'smartwait-animated-preloader' ),
										'tpl-49' => __( 'Triple Bounce', 'smartwait-animated-preloader' ),
										'tpl-50' => __( 'Triple Wave', 'smartwait-animated-preloader' ),
										'tpl-51' => __( 'Triple Origin', 'smartwait-animated-preloader' ),
										'tpl-52' => __( 'Dot Spiral', 'smartwait-animated-preloader' ),
										'tpl-53' => __( 'Triangle Spin', 'smartwait-animated-preloader' ),
										'tpl-54' => __( 'Cross Burst', 'smartwait-animated-preloader' ),
										'tpl-55' => __( 'Blob Morph', 'smartwait-animated-preloader' ),
									);
									$free_keys = SWAP_Helpers::FREE_TEMPLATES;
									// Eyes Blink(tpl-43), Eyes Look(tpl-44), Eyes Spin(tpl-45), Blob Morph(tpl-55), Triple Wave(tpl-50), Triple Ripple(tpl-31), Box Fold(tpl-16), Walking Dots(tpl-12), Dot Exchange(tpl-7), Dot Carousel(tpl-6)
									$specific_pro_keys = array( 'tpl-43', 'tpl-44', 'tpl-45', 'tpl-55', 'tpl-50', 'tpl-31', 'tpl-16', 'tpl-12', 'tpl-7', 'tpl-6' );
									shuffle( $specific_pro_keys ); // Randomize the specific pro keys
									
									$sorted_templates = array();
									
									// 1. Free templates first (in defined order)
									foreach ( $free_keys as $k ) {
										if ( isset( $free_templates[ $k ] ) ) {
											$sorted_templates[ $k ] = $free_templates[ $k ];
										}
									}
									
									// 2. Specific PRO templates (randomized order)
									foreach ( $specific_pro_keys as $k ) {
										if ( isset( $free_templates[ $k ] ) ) {
											$sorted_templates[ $k ] = $free_templates[ $k ];
										}
									}
									
									// 3. The rest of the PRO templates
									foreach ( $free_templates as $k => $v ) {
										if ( ! in_array( $k, $free_keys, true ) && ! in_array( $k, $specific_pro_keys, true ) ) {
											$sorted_templates[ $k ] = $v;
										}
									}
									$free_templates = $sorted_templates;

									$allowed_html = array( 'div' => array( 'class' => array() ) );

									foreach ( $free_templates as $slug => $label ) :
										$is_selected = ( $settings['spinner_type'] === $slug );
										$is_pro_tpl  = ! in_array( $slug, $free_keys, true );
										$locked      = ( $is_pro_tpl && ! $is_pro );
										?>
										<label class="swap-tmpl-card <?php echo $is_selected ? esc_attr( 'swap-tmpl-selected' ) : ''; ?> <?php echo $locked ? esc_attr( 'swap-pro-locked' ) : ''; ?>">
											<input type="radio" name="swap_settings[spinner_type]" value="<?php echo esc_attr( $slug ); ?>" <?php checked( $settings['spinner_type'], $slug ); ?> <?php echo $locked ? 'disabled' : ''; ?>>
											<div class="swap-tmpl-preview">
												<?php echo wp_kses( SWAP_Helpers::get_spinner_html( $slug ), $allowed_html ); ?>
												<?php if ( $is_selected ) : ?>
													<div class="swap-tmpl-check">
														<span class="dashicons dashicons-yes-alt"></span>
														<?php esc_html_e( 'Selected', 'smartwait-animated-preloader' ); ?>
													</div>
												<?php endif; ?>
											</div>
											<div class="swap-tmpl-footer">
												<span class="swap-tmpl-name">
													<?php echo esc_html( $label ); ?>
													<?php if ( $is_pro_tpl ) : ?>
														<span class="swap-badge-pro" style="transform: scale(0.8); margin-left: 2px;"><?php esc_html_e( 'PRO', 'smartwait-animated-preloader' ); ?></span>
													<?php endif; ?>
												</span>
											</div>
										</label>
									<?php endforeach; ?>
								</div>

								<!-- Hidden Loader Color Input -->
								<input type="hidden" id="swap-lc-hex" name="swap_settings[loader_color]" value="<?php echo esc_attr( $settings['loader_color'] ); ?>">

								<!-- Unified Color Picker Popover -->
								<div id="swap-lc-popover" class="swap-lc-popover" style="display:none;">
									<div class="swap-cp-wrapper">
										<!-- VIEW 1: PRESETS -->
										<div class="swap-lc-view-presets">
										<div class="swap-lc-popover-header"><span><?php esc_html_e( 'Pick Color', 'smartwait-animated-preloader' ); ?></span></div>
										<div class="swap-lc-presets">
											<button type="button" class="swap-lc-preset" data-color="#000000" style="background:#000000;" title="Black"></button>
											<button type="button" class="swap-lc-preset" data-color="#ffffff" style="background:#ffffff;" title="White"></button>
											<button type="button" class="swap-lc-preset" data-color="#f43f5e" style="background:#f43f5e;" title="Red"></button>
											<button type="button" class="swap-lc-preset" data-color="#3b82f6" style="background:#3b82f6;" title="Blue"></button>
											<button type="button" class="swap-lc-preset" data-color="#10b981" style="background:#10b981;" title="Green"></button>
											<button type="button" class="swap-lc-preset" data-color="#f59e0b" style="background:#f59e0b;" title="Yellow"></button>
											<!-- Toggle Custom View -->
											<button type="button" class="swap-lc-custom-trigger" title="<?php esc_attr_e( 'Custom Color', 'smartwait-animated-preloader' ); ?>">
												<span class="dashicons dashicons-admin-customizer"></span>
											</button>
										</div>
										<div class="swap-cp-actions">
											<button type="button" class="swap-lc-done"><?php esc_html_e( 'Done', 'smartwait-animated-preloader' ); ?></button>
										</div>
										</div>
										<!-- VIEW 2: CUSTOM PICKER (Hidden) -->
										<div class="swap-lc-view-custom" style="display:none;">
										<div class="swap-gm-header">
											<button type="button" class="swap-lc-back" title="Back"><span class="dashicons dashicons-arrow-left-alt2"></span></button>
											<h3><?php esc_html_e( 'Custom', 'smartwait-animated-preloader' ); ?></h3>
										</div>
										<div class="swap-cp-saturation">
											<div class="swap-cp-white"></div>
											<div class="swap-cp-black"></div>
											<div class="swap-cp-cursor"></div>
										</div>
										<div class="swap-cp-controls">
											<div class="swap-cp-sliders">
												<div class="swap-cp-hue"><div class="swap-cp-hue-cursor"></div></div>
											</div>
											<div class="swap-cp-bottom-row">
												<div class="swap-cp-tool-icon" id="swap-cp-eyedropper"><span class="dashicons dashicons-eyedropper"></span></div>
												<div class="swap-cp-preview"></div>
												<div class="swap-cp-inputs">
													<input type="text" class="swap-cp-hex" maxlength="7" value="#ffffff">
													<span class="swap-cp-label">HEX</span>
												</div>
											</div>
										</div>
										<div class="swap-gm-actions">
											<button type="button" class="swap-lc-select-custom"><?php esc_html_e( 'Select Color', 'smartwait-animated-preloader' ); ?></button>
										</div>
										</div>
									</div>
								</div>

							</div>

							<!-- Right Column: Overview-Style Sidebar -->
							<div class="swap-grid-sidebar">
								<div class="swap-modern-card swap-style-sidebar-card">

									<!-- Branding -->
									<div class="swap-style-sidebar-brand">

										<button type="submit" class="swap-sidebar-save-btn">
											<span class="dashicons dashicons-cloud-saved"></span>
											<?php esc_html_e( 'Save Changes', 'smartwait-animated-preloader' ); ?>
										</button>
									</div>

									<!-- Info box (shown when switching types) -->
									<div class="swap-type-info-box" style="display:none;">
										<span class="dashicons dashicons-info"></span>
										<span class="swap-type-info-text"></span>
									</div>

									<!-- Status (hidden by default, shown temporarily on save) -->
									<div class="swap-style-sidebar-status" id="swap-save-status" style="display:none;">
										<span class="dashicons dashicons-yes-alt"></span>
										<span><?php esc_html_e( 'All settings are currently up to date', 'smartwait-animated-preloader' ); ?></span>
									</div>

									<!-- Enable Toggle: Style -->
									<div class="swap-style-sidebar-toggle">
										<strong><?php esc_html_e( 'Enable Ready Preloader', 'smartwait-animated-preloader' ); ?></strong>
										<label class="swap-switch">
											<input type="checkbox" class="swap-type-toggle" data-type="style" <?php checked( isset( $settings['active_preloader_type'] ) ? $settings['active_preloader_type'] : 'none', 'style' ); ?>>
											<span class="swap-slider"></span>
										</label>
									</div>

									<!-- Live Preview -->
									<div class="swap-style-sidebar-preview">
										<a href="<?php echo esc_url( home_url( '/' ) ); ?>" target="_blank" class="swap-preview-link">
											<span class="dashicons dashicons-visibility"></span>
											<?php esc_html_e( 'Live Preview', 'smartwait-animated-preloader' ); ?>
											<span class="dashicons dashicons-external"></span>
										</a>
										<p class="swap-preview-hint"><?php esc_html_e( 'Opening preview will launch your homepage in a new tab.', 'smartwait-animated-preloader' ); ?></p>
									</div>

									<div class="swap-sidebar-text-settings" style="margin-top: 20px; padding-top: 15px; border-top: 1px solid #e2e8f0;">
										<!-- Wait for Loop -->
										<div class="swap-section-block" style="margin-bottom: 20px;">
											<div class="swap-flex-between" style="align-items:center;">
												<label class="swap-field-label" style="margin-bottom:0; font-size: 13px; display:inline-flex; align-items:center;">
													<?php esc_html_e( 'Wait for Loop', 'smartwait-animated-preloader' ); ?>
													<span class="swap-badge-pro"><?php esc_html_e( 'PRO', 'smartwait-animated-preloader' ); ?></span>
													<span class="dashicons dashicons-info" title="<?php esc_attr_e( 'Ensure animation completes at least one cycle.', 'smartwait-animated-preloader' ); ?>" style="font-size:14px; color:#ccc; vertical-align:middle; cursor:help; margin-left:5px;"></span>
												</label>
												<label class="switch" style="transform: scale(0.85); transform-origin: right center;">
													<input type="checkbox" name="swap_settings[style_wait_anim]" value="yes" <?php checked( $settings['style_wait_anim'], 'yes' ); ?> <?php echo ! $is_pro ? 'disabled' : ''; ?>>
													<span class="slider round"></span>
												</label>
											</div>
										</div>

										<!-- Size Slider -->
										<div class="swap-section-block" style="margin-bottom: 20px;">
											<div class="swap-flex-between">
												<label class="swap-field-label" style="font-size: 13px;"><?php esc_html_e( 'Size (px)', 'smartwait-animated-preloader' ); ?></label>
												<span class="swap-value-display" id="swap-style-size-val" style="font-size: 13px; font-weight:600; color:var(--swap-primary); background:var(--swap-primary-light); padding:2px 6px; border-radius:4px;"><?php echo esc_html( $settings['style_size'] ); ?>px</span>
											</div>
											<input type="range" name="swap_settings[style_size]" id="swap-style-size-range" class="swap-range-slider" min="10" max="200" value="<?php echo esc_attr( $settings['style_size'] ); ?>">
										</div>
									</div>

									<?php $this->render_sidebar_bg_controls( $settings ); ?>

								</div>
							</div>
						</div>
						
					</div>

					<!-- 4. Logo Preloader Tab -->
					<div id="tab-logo" class="swap-tab-content <?php echo 'logo' === $active_tab ? esc_attr( 'active' ) : ''; ?>">
						<div class="swap-grid-2-col">
							<div class="swap-grid-main">

								<!-- Logo Settings Card -->
								<div class="swap-modern-card">
									<div class="swap-card-header-row">
										<h3>
											<span class="dashicons dashicons-format-image" style="color: var(--swap-primary);"></span>
											<?php esc_html_e( 'Logo Settings', 'smartwait-animated-preloader' ); ?>
										</h3>
									</div>

									<!-- Logo Branding -->
									<div class="swap-section-block">
										<label class="swap-field-label"><?php esc_html_e( 'Logo Branding', 'smartwait-animated-preloader' ); ?></label>
										<div class="swap-image-upload-area swap-logo-upload-area">
											<input type="hidden" name="swap_settings[logo_url]" id="swap-logo-url" value="<?php echo esc_attr( $settings['logo_url'] ); ?>">
											<div class="swap-upload-placeholder">
												<div class="swap-upload-icon"><span class="dashicons dashicons-cloud-upload"></span></div>
												<p><?php esc_html_e( 'Drop logo here or', 'smartwait-animated-preloader' ); ?> <span class="swap-link"><?php esc_html_e( 'browse', 'smartwait-animated-preloader' ); ?></span></p>
												<span class="swap-upload-hint"><?php esc_html_e( 'Recommended: PNG or SVG with transparent background.', 'smartwait-animated-preloader' ); ?></span>
											</div>
											<div class="swap-image-preview" id="swap-logo-preview" style="<?php echo empty( $settings['logo_url'] ) ? 'display:none;' : 'background-image:url(' . esc_url( $settings['logo_url'] ) . '); background-size: contain; background-repeat: no-repeat;'; ?>">
												<button type="button" class="swap-remove-image" id="swap-logo-remove-btn"><span class="dashicons dashicons-no"></span></button>
											</div>
										</div>
									</div>

									<!-- Logo Size -->
									<div class="swap-section-block">
										<div class="swap-flex-between">
											<label class="swap-field-label"><?php esc_html_e( 'Logo Size (px)', 'smartwait-animated-preloader' ); ?></label>
											<span class="swap-value-display" id="swap-logo-size-val"><?php echo esc_html( $settings['logo_width'] ); ?>px</span>
										</div>
										<input type="range" name="swap_settings[logo_width]" id="swap-logo-size-range" class="swap-range-slider" min="20" max="400" value="<?php echo esc_attr( $settings['logo_width'] ); ?>">
									</div>

									<!-- Logo Animation -->
								<div class="swap-section-block">
									<label class="swap-field-label"><?php esc_html_e( 'Logo Animation', 'smartwait-animated-preloader' ); ?></label>
									<div class="swap-custom-dropdown" data-target="swap_settings[logo_animation]">
										<input type="hidden" name="swap_settings[logo_animation]" value="<?php echo esc_attr( $settings['logo_animation'] ); ?>">
										<div class="swap-dd-trigger">
											<span class="swap-dd-text"><?php
												$la_labels = array( 'none' => __( 'None', 'smartwait-animated-preloader' ), 'fade' => __( 'Fade In', 'smartwait-animated-preloader' ), 'slide' => __( 'Slide In', 'smartwait-animated-preloader' ), 'zoom' => __( 'Zoom', 'smartwait-animated-preloader' ), 'pulse' => __( 'Pulse Loop', 'smartwait-animated-preloader' ) );
												echo esc_html( isset( $la_labels[ $settings['logo_animation'] ] ) ? $la_labels[ $settings['logo_animation'] ] : $la_labels['none'] );
											?></span>
											<span class="dashicons dashicons-arrow-down-alt2"></span>
										</div>
										<ul class="swap-dd-options">
											<?php foreach ( $la_labels as $val => $label ) : ?>
												<li data-value="<?php echo esc_attr( $val ); ?>" class="<?php echo $settings['logo_animation'] === $val ? esc_attr( 'selected' ) : ''; ?>">
													<?php echo esc_html( $label ); ?>
													<?php if ( $settings['logo_animation'] === $val ) : ?><span class="dashicons dashicons-yes"></span><?php endif; ?>
												</li>
											<?php endforeach; ?>
										</ul>
									</div>
								
								<!-- Logo Animation Speed & Wait -->
								<div class="swap-two-col-fields" style="margin-top:10px;">
									<div class="swap-section-block">
										<label class="swap-field-label"><?php esc_html_e( 'Animation Speed (ms)', 'smartwait-animated-preloader' ); ?></label>
										<div class="swap-input-with-suffix">
											<input type="number" name="swap_settings[logo_anim_speed]" value="<?php echo esc_attr( $settings['logo_anim_speed'] ); ?>" class="swap-input swap-input-full" min="100" max="5000" step="100">
											<span class="swap-input-suffix"><?php esc_html_e( 'ms', 'smartwait-animated-preloader' ); ?></span>
										</div>
									</div>
									<div class="swap-section-block">
										<div class="swap-flex-between" style="height:100%; align-items:end; padding-bottom:12px;">
											<label class="swap-field-label" style="margin-bottom:0; display:inline-flex; align-items:center;">
												<?php esc_html_e( 'Wait for Loop', 'smartwait-animated-preloader' ); ?>
												<span class="swap-badge-pro"><?php esc_html_e( 'PRO', 'smartwait-animated-preloader' ); ?></span>
												<span class="dashicons dashicons-info" title="<?php esc_attr_e( 'Ensure logo animation completes at least one cycle.', 'smartwait-animated-preloader' ); ?>" style="font-size:16px; color:#ccc; vertical-align:middle; cursor:help; margin-left:5px;"></span>
											</label>
											<label class="switch">
												<input type="checkbox" name="swap_settings[logo_wait_anim]" value="yes" <?php checked( $settings['logo_wait_anim'], 'yes' ); ?> <?php echo ! $is_pro ? 'disabled' : ''; ?>>
												<span class="slider round"></span>
											</label>
										</div>
									</div>
								</div>
								</div>

							</div>

							</div>

							<!-- Right Column: Logo Sidebar -->
							<div class="swap-grid-sidebar">
								<div class="swap-modern-card swap-style-sidebar-card">
									<div class="swap-style-sidebar-brand">

										<button type="submit" class="swap-sidebar-save-btn"><span class="dashicons dashicons-cloud-saved"></span><?php esc_html_e( 'Save Changes', 'smartwait-animated-preloader' ); ?></button>
									</div>
									<div class="swap-type-info-box" style="display:none;"><span class="dashicons dashicons-info"></span><span class="swap-type-info-text"></span></div>
									<div class="swap-style-sidebar-status" id="swap-save-status-logo" style="display:none;"><span class="dashicons dashicons-yes-alt"></span><span><?php esc_html_e( 'All settings are currently up to date', 'smartwait-animated-preloader' ); ?></span></div>
									<div class="swap-style-sidebar-toggle">
										<strong><?php esc_html_e( 'Enable Logo Preloader', 'smartwait-animated-preloader' ); ?></strong>
										<label class="swap-switch">
											<input type="checkbox" class="swap-type-toggle" data-type="logo" <?php checked( isset( $settings['active_preloader_type'] ) ? $settings['active_preloader_type'] : 'none', 'logo' ); ?>>
											<span class="swap-slider"></span>
										</label>
									</div>


									<div class="swap-style-sidebar-preview">
										<a href="<?php echo esc_url( home_url( '/' ) ); ?>" target="_blank" class="swap-preview-link"><span class="dashicons dashicons-visibility"></span><?php esc_html_e( 'Live Preview', 'smartwait-animated-preloader' ); ?><span class="dashicons dashicons-external"></span></a>
										<p class="swap-preview-hint"><?php esc_html_e( 'Opening preview will launch your homepage in a new tab.', 'smartwait-animated-preloader' ); ?></p>
									</div>

									<?php $this->render_sidebar_bg_controls( $settings ); ?>

								</div>
							</div>
						</div>
					</div>

					<!-- 5. Custom Text Tab -->
					<div id="tab-text" class="swap-tab-content <?php echo 'text' === $active_tab ? esc_attr( 'active' ) : ''; ?>">
						<div class="swap-grid-2-col">
							<div class="swap-grid-main">

							<!-- Text Settings Card -->
							<div class="swap-modern-card">
								<div class="swap-card-header-row">
									<h3>
										<span class="dashicons dashicons-editor-textcolor" style="color: var(--swap-primary);"></span>
										<?php esc_html_e( 'Text Settings', 'smartwait-animated-preloader' ); ?>
									</h3>
								</div>

								<!-- Loading Text -->
								<div class="swap-section-block">
									<label class="swap-field-label"><?php esc_html_e( 'Loading Text', 'smartwait-animated-preloader' ); ?></label>
									<input type="text" name="swap_settings[loading_text]" value="<?php echo esc_attr( $settings['loading_text'] ); ?>" class="swap-input swap-input-full" placeholder="<?php esc_attr_e( 'Hang tight, we\'re loading...', 'smartwait-animated-preloader' ); ?>">
								</div>

								<!-- Normal Text Styles Toggle Section -->
								<div class="swap-normal-text-style-section" style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #e2e8f0;">
									<div class="swap-section-header-flex">
										<h4 style="margin:0; font-size:16px; font-weight:700; color:var(--swap-text);"><?php esc_html_e( 'Normal Text Style', 'smartwait-animated-preloader' ); ?></h4>
										<label class="switch">
											<input type="checkbox" name="swap_settings[use_normal_text]" id="swap-use-normal-toggle" value="yes" <?php checked( $settings['use_normal_text'], 'yes' ); ?>>
											<span class="slider round"></span>
										</label>
									</div>
									<p class="swap-field-hint" style="margin: 5px 0 20px;"><?php esc_html_e( 'Enable this to configure classic text animations and styles.', 'smartwait-animated-preloader' ); ?></p>
								</div>

								<!-- Normal Text Settings (Wrapper to hide when reading readymade) -->
								<div id="swap-normal-text-settings" style="<?php echo 'yes' === $settings['use_normal_text'] ? '' : esc_attr( 'display:none;' ); ?>">
									<!-- Text Animation + Font Weight (Side by Side) -->
									<div class="swap-two-col-fields">
										<div class="swap-section-block">
											<label class="swap-field-label"><?php esc_html_e( 'Text Animation', 'smartwait-animated-preloader' ); ?></label>
											<div class="swap-custom-dropdown" data-target="swap_settings[text_animation]">
												<input type="hidden" name="swap_settings[text_animation]" value="<?php echo esc_attr( $settings['text_animation'] ); ?>">
												<div class="swap-dd-trigger">
													<span class="swap-dd-text"><?php
														$ta_labels = array( 
															'none'       => __( 'None', 'smartwait-animated-preloader' ), 
															'typewriter' => __( 'Typewriter', 'smartwait-animated-preloader' ), 
															'fade'       => __( 'Fade In', 'smartwait-animated-preloader' ), 
															'bounce'     => __( 'Bounce', 'smartwait-animated-preloader' ),
															'pulse'      => __( 'Pulse', 'smartwait-animated-preloader' ),
															'slide'      => __( 'Slide Up', 'smartwait-animated-preloader' ),
															'zoom'       => __( 'Zoom In', 'smartwait-animated-preloader' ),
															'flip'       => __( 'Flip', 'smartwait-animated-preloader' ),
															'wobble'     => __( 'Wobble', 'smartwait-animated-preloader' ),
															'glow'       => __( 'Glow / Neon', 'smartwait-animated-preloader' ),
															'blur'       => __( 'Blur In', 'smartwait-animated-preloader' )
														);
														echo esc_html( isset( $ta_labels[ $settings['text_animation'] ] ) ? $ta_labels[ $settings['text_animation'] ] : $ta_labels['none'] );
													?></span>
													<span class="dashicons dashicons-arrow-down-alt2"></span>
												</div>
												<ul class="swap-dd-options">
													<?php 
													$free_anims = array( 'none', 'fade', 'bounce' );
													
													// Output Free Options First
													foreach ( $free_anims as $val ) :
														if ( isset( $ta_labels[ $val ] ) ) :
															$label = $ta_labels[ $val ];
													?>
														<li data-value="<?php echo esc_attr( $val ); ?>" class="<?php echo $settings['text_animation'] === $val ? 'selected' : ''; ?>">
															<?php echo esc_html( $label ); ?>
															<?php if ( $settings['text_animation'] === $val ) : ?><span class="dashicons dashicons-yes"></span><?php endif; ?>
														</li>
													<?php 
														endif;
													endforeach;

													// Output PRO Options Next
													foreach ( $ta_labels as $val => $label ) : 
														if ( ! in_array( $val, $free_anims, true ) ) :
													?>
														<li data-value="<?php echo esc_attr( $val ); ?>" class="<?php echo $settings['text_animation'] === $val ? esc_attr( 'selected' ) : ''; ?> <?php echo ! $is_pro ? esc_attr( 'swap-pro-locked' ) : ''; ?>">
															<?php echo esc_html( $label ); ?>
															<span class="swap-badge-pro" style="transform: scale(0.8); margin-left: 2px;"><?php esc_html_e( 'PRO', 'smartwait-animated-preloader' ); ?></span>
															<?php if ( $settings['text_animation'] === $val ) : ?><span class="dashicons dashicons-yes"></span><?php endif; ?>
														</li>
													<?php 
														endif;
													endforeach; 
													?>
												</ul>
											</div>
										</div>
										<div class="swap-section-block">
											<label class="swap-field-label"><?php esc_html_e( 'Font Weight', 'smartwait-animated-preloader' ); ?></label>
											<div class="swap-custom-dropdown" data-target="swap_settings[font_weight]">
												<input type="hidden" name="swap_settings[font_weight]" value="<?php echo esc_attr( $settings['font_weight'] ); ?>">
												<div class="swap-dd-trigger">
													<span class="swap-dd-text"><?php
														$fw_labels = array( 'normal' => __( 'Normal', 'smartwait-animated-preloader' ), 'bold' => __( 'Bold', 'smartwait-animated-preloader' ), '300' => __( 'Light', 'smartwait-animated-preloader' ) );
														echo esc_html( isset( $fw_labels[ $settings['font_weight'] ] ) ? $fw_labels[ $settings['font_weight'] ] : $fw_labels['normal'] );
													?></span>
													<span class="dashicons dashicons-arrow-down-alt2"></span>
												</div>
												<ul class="swap-dd-options">
													<?php foreach ( $fw_labels as $val => $label ) : ?>
														<li data-value="<?php echo esc_attr( $val ); ?>" class="<?php echo $settings['font_weight'] === $val ? 'selected' : ''; ?>">
															<?php echo esc_html( $label ); ?>
															<?php if ( $settings['font_weight'] === $val ) : ?><span class="dashicons dashicons-yes"></span><?php endif; ?>
														</li>
													<?php endforeach; ?>
												</ul>
											</div>
										</div>
									</div>
								</div> <!-- Ensure we close normal-text-settings here -->



								<!-- Font Family -->
								<div class="swap-section-block">
									<label class="swap-field-label"><?php esc_html_e( 'Font Family', 'smartwait-animated-preloader' ); ?></label>
									<?php
									$preset_fonts = array(
										''           => __( 'System Default', 'smartwait-animated-preloader' ),
										'Inter'      => 'Inter',
										'Roboto'     => 'Roboto',
										'Poppins'    => 'Poppins',
										'Open Sans'  => 'Open Sans',
										'Montserrat' => 'Montserrat',
										'Lato'       => 'Lato',
										'Outfit'     => 'Outfit',
										'Nunito'     => 'Nunito',
										'Raleway'    => 'Raleway',
										'Oswald'     => 'Oswald',
									);
									$current_font   = $settings['font_family'];
									$is_preset      = array_key_exists( $current_font, $preset_fonts );
									$is_custom_file = ! empty( $settings['custom_font_url'] );
									$display_text   = $is_preset ? $preset_fonts[ $current_font ] : ( $current_font ? $current_font : __( 'System Default', 'smartwait-animated-preloader' ) );
									?>
									<div class="swap-custom-dropdown swap-font-dropdown" data-target="swap_settings[font_family]">
										<input type="hidden" name="swap_settings[font_family]" value="<?php echo esc_attr( $current_font ); ?>">
										<div class="swap-dd-trigger">
											<span class="swap-dd-text" style="<?php echo $current_font ? 'font-family: ' . esc_attr( $current_font ) . ', sans-serif;' : ''; ?>"><?php echo esc_html( $display_text ); ?></span>
											<span class="dashicons dashicons-arrow-down-alt2"></span>
										</div>
										<ul class="swap-dd-options">
											<?php foreach ( $preset_fonts as $val => $label ) : ?>
												<li data-value="<?php echo esc_attr( $val ); ?>" data-font="<?php echo esc_attr( $val ); ?>" class="<?php echo $current_font === $val ? esc_attr( 'selected' ) : ''; ?>" style="<?php echo $val ? 'font-family: ' . esc_attr( $val ) . ', sans-serif;' : ''; ?>">
													<?php echo esc_html( $label ); ?>
													<?php if ( $current_font === $val ) : ?><span class="dashicons dashicons-yes"></span><?php endif; ?>
												</li>
											<?php endforeach; ?>
											<li class="swap-dd-divider"></li>
											<li class="swap-dd-upload-font" data-value="__upload__">
												<span class="dashicons dashicons-upload"></span>
												<?php esc_html_e( 'Upload Custom Font', 'smartwait-animated-preloader' ); ?>
											</li>
										</ul>
									</div>
									<!-- Custom Font Upload (hidden, shown when Upload is chosen) -->
									<div class="swap-custom-font-upload" id="swap-custom-font-area" style="<?php echo $is_custom_file ? '' : 'display:none;'; ?>">
										<input type="hidden" name="swap_settings[custom_font_url]" id="swap-custom-font-url" value="<?php echo esc_attr( isset( $settings['custom_font_url'] ) ? $settings['custom_font_url'] : '' ); ?>">
										<div class="swap-custom-font-file">
											<span class="dashicons dashicons-media-text"></span>
											<span class="swap-font-filename" id="swap-font-filename"><?php echo $is_custom_file ? esc_html( basename( $settings['custom_font_url'] ) ) : esc_html__( 'No file selected', 'smartwait-animated-preloader' ); ?></span>
											<button type="button" class="swap-btn-upload-sm" id="swap-upload-font-btn">
												<span class="dashicons dashicons-cloud-upload"></span>
												<?php esc_html_e( 'Browse', 'smartwait-animated-preloader' ); ?>
											</button>
										</div>
										<span class="swap-upload-hint"><?php esc_html_e( 'Supported: .woff, .woff2, .ttf, .otf', 'smartwait-animated-preloader' ); ?></span>
									</div>
								</div>

								<!-- Readymade Styles Section -->
								<div class="swap-readymade-styles-section" style="margin-top: 30px; border-top: 1px solid #e2e8f0; padding-top: 30px;">
									<div class="swap-section-header-flex">
										<h4 style="margin:0; font-size:16px; font-weight:700; color:var(--swap-text);"><?php esc_html_e( 'Readymade Text Styles', 'smartwait-animated-preloader' ); ?></h4>
										<label class="switch">
											<input type="checkbox" name="swap_settings[use_readymade_text]" id="swap-use-readymade-toggle" value="yes" <?php checked( $settings['use_readymade_text'], 'yes' ); ?>>
											<span class="slider round"></span>
										</label>
									</div>
									<p class="swap-field-hint" style="margin: 5px 0 20px;"><?php esc_html_e( 'Enable this to use premium CSS-only text animations.', 'smartwait-animated-preloader' ); ?></p>

									<div id="swap-readymade-grid-wrap" style="<?php echo 'yes' === $settings['use_readymade_text'] ? '' : esc_attr( 'display:none;' ); ?>">
										<input type="hidden" name="swap_settings[readymade_text_style]" id="swap-readymade-style-hidden" value="<?php echo esc_attr( $settings['readymade_text_style'] ); ?>">
										<div class="swap-readymade-grid">
											<?php for ( $i = 1; $i <= 20; $i++ ) : $style_id = 'l' . $i; ?>
												<div class="swap-readymade-item <?php echo $settings['readymade_text_style'] === $style_id ? esc_attr( 'active' ) : ''; ?> <?php echo ! $is_pro ? esc_attr( 'swap-pro-locked' ) : ''; ?>" data-style="<?php echo esc_attr( $style_id ); ?>">
													<div class="swap-readymade-preview">
														<div class="swap-text-loader-<?php echo esc_attr( $style_id ); ?>" data-text="<?php echo esc_attr( $settings['loading_text'] ); ?>" style="--loader-color: #000000; font-size: 16px;"><?php echo esc_html( $settings['loading_text'] ); ?></div>
													</div>
													<div class="swap-readymade-label">
														<?php
														/* translators: %d: Style number */
														echo esc_html( sprintf( __( 'Style %d', 'smartwait-animated-preloader' ), (int) $i ) );
														?>
														<span class="swap-badge-pro" style="transform: scale(0.8); margin-left: 2px;"><?php esc_html_e( 'PRO', 'smartwait-animated-preloader' ); ?></span>
													</div>
												</div>
											<?php endfor; ?>
										</div>
									</div>
								</div>
								</div>

							</div>

							<!-- Right Column: Text Sidebar -->
							<div class="swap-grid-sidebar">
								<div class="swap-modern-card swap-style-sidebar-card">
									<div class="swap-style-sidebar-brand">

										<button type="submit" class="swap-sidebar-save-btn"><span class="dashicons dashicons-cloud-saved"></span><?php esc_html_e( 'Save Changes', 'smartwait-animated-preloader' ); ?></button>
									</div>
									<div class="swap-type-info-box" style="display:none;"><span class="dashicons dashicons-info"></span><span class="swap-type-info-text"></span></div>
									<div class="swap-style-sidebar-status" id="swap-save-status-text" style="display:none;"><span class="dashicons dashicons-yes-alt"></span><span><?php esc_html_e( 'All settings are currently up to date', 'smartwait-animated-preloader' ); ?></span></div>
									<div class="swap-style-sidebar-toggle">
										<strong><?php esc_html_e( 'Enable Custom Text Preloader', 'smartwait-animated-preloader' ); ?></strong>
										<label class="swap-switch">
											<input type="checkbox" class="swap-type-toggle" data-type="text" <?php checked( isset( $settings['active_preloader_type'] ) ? $settings['active_preloader_type'] : 'none', 'text' ); ?>>
											<span class="swap-slider"></span>
										</label>
									</div>

									<div class="swap-sidebar-text-settings" style="margin-top: 20px; padding-top: 15px; border-top: 1px solid #e2e8f0;">
										<!-- Wait for Loop -->
										<div class="swap-section-block" style="margin-bottom: 20px;">
											<div class="swap-flex-between" style="align-items:center;">
												<label class="swap-field-label" style="margin-bottom:0; font-size: 13px; display:inline-flex; align-items:center;">
													<?php esc_html_e( 'Wait for Loop', 'smartwait-animated-preloader' ); ?>
													<span class="swap-badge-pro"><?php esc_html_e( 'PRO', 'smartwait-animated-preloader' ); ?></span>
													<span class="dashicons dashicons-info" title="<?php esc_attr_e( 'Ensure text animation completes at least one cycle.', 'smartwait-animated-preloader' ); ?>" style="font-size:14px; color:#ccc; vertical-align:middle; cursor:help; margin-left:5px;"></span>
												</label>
												<label class="switch" style="transform: scale(0.85); transform-origin: right center;">
													<input type="checkbox" name="swap_settings[text_wait_anim]" value="yes" <?php checked( $settings['text_wait_anim'], 'yes' ); ?> <?php echo ! $is_pro ? 'disabled' : ''; ?>>
													<span class="slider round"></span>
												</label>
											</div>
										</div>

										<!-- Font Size Slider -->
										<div class="swap-section-block" style="margin-bottom: 20px;">
											<div class="swap-flex-between">
												<label class="swap-field-label" style="font-size: 13px;"><?php esc_html_e( 'Font Size (px)', 'smartwait-animated-preloader' ); ?></label>
												<span class="swap-value-display" id="swap-font-size-val" style="font-size: 13px; font-weight:600; color:var(--swap-primary); background:var(--swap-primary-light); padding:2px 6px; border-radius:4px;"><?php echo esc_html( $settings['font_size'] ); ?>px</span>
											</div>
											<input type="range" name="swap_settings[font_size]" id="swap-font-size-range" class="swap-range-slider" min="10" max="100" value="<?php echo esc_attr( $settings['font_size'] ); ?>">
										</div>

										<!-- Text Color -->
										<div class="swap-section-block" style="margin-bottom: 10px;">
											<label class="swap-field-label" style="font-size: 13px;"><?php esc_html_e( 'Text Color', 'smartwait-animated-preloader' ); ?></label>
											<div class="swap-color-picker-wrap">
												<input type="color" name="swap_settings[text_color]" value="<?php echo esc_attr( $settings['text_color'] ); ?>" class="swap-color-input" style="width:36px; height:36px; padding:0;">
												<input type="text" value="<?php echo esc_attr( $settings['text_color'] ); ?>" class="swap-input swap-hex-input" style="font-size: 13px; padding: 4px 8px; max-width:100px;">
											</div>
										</div>
									</div>


									<div class="swap-style-sidebar-preview">
										<a href="<?php echo esc_url( home_url( '/' ) ); ?>" target="_blank" class="swap-preview-link"><span class="dashicons dashicons-visibility"></span><?php esc_html_e( 'Live Preview', 'smartwait-animated-preloader' ); ?><span class="dashicons dashicons-external"></span></a>
										<p class="swap-preview-hint"><?php esc_html_e( 'Opening preview will launch your homepage in a new tab.', 'smartwait-animated-preloader' ); ?></p>
									</div>

									<?php $this->render_sidebar_bg_controls( $settings ); ?>

								</div>
							</div>
						</div>
					</div>

					<!-- 6. Progress and Percentage Preloader Tab -->
					<div id="tab-progress-timing" class="swap-tab-content <?php echo 'progress-timing' === $active_tab ? esc_attr( 'active' ) : ''; ?>">

						<!-- Tab Header -->
						<div class="swap-tab-header">
							<h2><?php esc_html_e( 'Progress & Percentage', 'smartwait-animated-preloader' ); ?></h2>
							<p class="swap-tab-subtitle"><?php esc_html_e( 'Fine-tune how your visitors experience the loading transition.', 'smartwait-animated-preloader' ); ?></p>
						</div>

						<div class="swap-grid-2-col">
							<!-- Left Column: Settings -->
							<div class="swap-grid-main">

								<!-- Progress Indicator Card -->
								<div class="swap-modern-card">
									<div class="swap-card-header-row">
										<h3>
											<span class="dashicons dashicons-marker" style="color: var(--swap-primary);"></span>
											<?php esc_html_e( 'Progress Indicator', 'smartwait-animated-preloader' ); ?>
										</h3>
									</div>

									<!-- Show Percentage + Show Progress Bar (Side by Side Toggles) -->
									<div class="swap-two-col-fields">
										<div class="swap-section-block">
											<div class="swap-toggle-card-inline">
												<div class="swap-toggle-card-info">
													<strong><?php esc_html_e( 'Show Percentage', 'smartwait-animated-preloader' ); ?> <span class="swap-badge-pro"><?php esc_html_e( 'PRO', 'smartwait-animated-preloader' ); ?></span></strong>
													<span><?php esc_html_e( 'Numeric progress display', 'smartwait-animated-preloader' ); ?></span>
												</div>
												<label class="switch">
													<input type="checkbox" name="swap_settings[show_percentage]" value="yes" <?php checked( $settings['show_percentage'], 'yes' ); ?> <?php echo ! $is_pro ? 'disabled' : ''; ?>>
													<span class="slider round"></span>
												</label>
											</div>
										</div>
										<div class="swap-section-block">
											<div class="swap-toggle-card-inline">
												<div class="swap-toggle-card-info">
													<strong><?php esc_html_e( 'Show Progress Bar', 'smartwait-animated-preloader' ); ?></strong>
													<span><?php esc_html_e( 'Visual loading line', 'smartwait-animated-preloader' ); ?></span>
												</div>
												<label class="switch">
													<input type="checkbox" name="swap_settings[show_progress_bar]" value="yes" <?php checked( $settings['show_progress_bar'], 'yes' ); ?>>
													<span class="slider round"></span>
												</label>
											</div>
										</div>
									</div>

									<!-- Progress Bar Type + Progress Bar Color (Side by Side) -->
									<div class="swap-two-col-fields">
										<div class="swap-section-block <?php echo ! $is_pro ? esc_attr( 'swap-pro-locked' ) : ''; ?>">
											<label class="swap-field-label" style="display:inline-flex; align-items:center;">
												<?php esc_html_e( 'Progress Bar Type', 'smartwait-animated-preloader' ); ?>
												<span class="swap-badge-pro"><?php esc_html_e( 'PRO', 'smartwait-animated-preloader' ); ?></span>
											</label>
											<?php
											$pbt_labels = array(
												'linear' => __( 'Linear (Top)', 'smartwait-animated-preloader' ),
												'center' => __( 'Center', 'smartwait-animated-preloader' ),
											);
											$pbt_current = $settings['progress_bar_type'];
											?>
											<div class="swap-custom-dropdown" data-target="swap_settings[progress_bar_type]">
												<input type="hidden" name="swap_settings[progress_bar_type]" value="<?php echo esc_attr( $pbt_current ); ?>">
												<div class="swap-dd-trigger">
													<span class="swap-dd-text"><?php echo esc_html( isset( $pbt_labels[ $pbt_current ] ) ? $pbt_labels[ $pbt_current ] : $pbt_labels['linear'] ); ?></span>
													<span class="dashicons dashicons-arrow-down-alt2"></span>
												</div>
												<ul class="swap-dd-options">
													<?php foreach ( $pbt_labels as $val => $label ) : ?>
														<li data-value="<?php echo esc_attr( $val ); ?>" class="<?php echo $pbt_current === $val ? esc_attr( 'selected' ) : ''; ?>">
															<?php echo esc_html( $label ); ?>
															<?php if ( $pbt_current === $val ) : ?><span class="dashicons dashicons-yes"></span><?php endif; ?>
														</li>
													<?php endforeach; ?>
												</ul>
											</div>
										</div>
										<div class="swap-section-block">
											<label class="swap-field-label"><?php esc_html_e( 'Progress Bar Color', 'smartwait-animated-preloader' ); ?></label>
											<div class="swap-color-picker-wrap">
												<input type="color" name="swap_settings[progress_bar_color]" value="<?php echo esc_attr( $settings['progress_bar_color'] ); ?>" class="swap-color-input">
												<input type="text" value="<?php echo esc_attr( $settings['progress_bar_color'] ); ?>" class="swap-input swap-hex-input" data-sync="swap_settings[progress_bar_color]">
											</div>
										</div>
									</div>

									<!-- Percentage Text Color + Percentage Font Size (Side by Side) -->
									<div class="swap-two-col-fields <?php echo ! $is_pro ? esc_attr( 'swap-pro-locked' ) : ''; ?>">
										<div class="swap-section-block">
											<label class="swap-field-label" style="display:inline-flex; align-items:center;">
												<?php esc_html_e( 'Percentage Text Color', 'smartwait-animated-preloader' ); ?>
												<span class="swap-badge-pro"><?php esc_html_e( 'PRO', 'smartwait-animated-preloader' ); ?></span>
											</label>
											<div class="swap-color-picker-wrap">
												<input type="color" name="swap_settings[percentage_color]" value="<?php echo esc_attr( $settings['percentage_color'] ); ?>" class="swap-color-input">
												<input type="text" value="<?php echo esc_attr( $settings['percentage_color'] ); ?>" class="swap-input swap-hex-input" data-sync="swap_settings[percentage_color]">
											</div>
										</div>
										<div class="swap-section-block">
											<div class="swap-flex-between">
												<label class="swap-field-label" style="display:inline-flex; align-items:center;">
													<?php esc_html_e( 'Percentage Font Size (px)', 'smartwait-animated-preloader' ); ?>
													<span class="swap-badge-pro"><?php esc_html_e( 'PRO', 'smartwait-animated-preloader' ); ?></span>
												</label>
												<span class="swap-value-display" id="swap-percentage-size-val"><?php echo esc_html( $settings['percentage_font_size'] ); ?></span>
											</div>
											<input type="range" name="swap_settings[percentage_font_size]" id="swap-percentage-size-range" class="swap-range-slider" min="12" max="72" value="<?php echo esc_attr( $settings['percentage_font_size'] ); ?>">
										</div>
									</div>

									<!-- Progress Bar Height -->
									<div class="swap-section-block">
										<div class="swap-flex-between">
											<label class="swap-field-label"><?php esc_html_e( 'Progress Bar Height (px)', 'smartwait-animated-preloader' ); ?></label>
											<span class="swap-value-display" id="swap-bar-height-val"><?php echo esc_html( $settings['progress_bar_height'] ); ?></span>
										</div>
										<input type="range" name="swap_settings[progress_bar_height]" id="swap-bar-height-range" class="swap-range-slider" min="1" max="20" value="<?php echo esc_attr( $settings['progress_bar_height'] ); ?>">
									</div>

									<!-- Estimated Load Time -->
									<div class="swap-section-block">
										<label class="swap-field-label">
											<?php esc_html_e( 'Estimated Load Time (ms)', 'smartwait-animated-preloader' ); ?>
											<span class="dashicons dashicons-info" title="<?php esc_attr_e( 'Used to simulate progress bar speed.', 'smartwait-animated-preloader' ); ?>" style="font-size: 14px; width: 14px; height: 14px; color: #94a3b8; vertical-align: middle;"></span>
										</label>
										<div class="swap-input-with-suffix">
											<input type="number" name="swap_settings[estimated_time]" value="<?php echo esc_attr( $settings['estimated_time'] ); ?>" class="swap-input swap-input-full" min="500" max="10000" step="100">
											<span class="swap-input-suffix"><?php esc_html_e( 'ms', 'smartwait-animated-preloader' ); ?></span>
										</div>
										<span class="swap-upload-hint"><?php esc_html_e( 'Recommended: 2000ms - 4000ms for natural feel.', 'smartwait-animated-preloader' ); ?></span>
									</div>
								</div>

							</div>

							<!-- Right Column: Progress and Percentage Preloader Sidebar -->
							<div class="swap-grid-sidebar">
								<div class="swap-modern-card swap-style-sidebar-card">

									<!-- Branding -->
									<div class="swap-style-sidebar-brand">

										<button type="submit" class="swap-sidebar-save-btn">
											<span class="dashicons dashicons-cloud-saved"></span>
											<?php esc_html_e( 'Save Changes', 'smartwait-animated-preloader' ); ?>
										</button>
									</div>

									<!-- Info box (shown when switching types) -->
									<div class="swap-type-info-box" style="display:none;">
										<span class="dashicons dashicons-info"></span>
										<span class="swap-type-info-text"></span>
									</div>

									<!-- Status (hidden by default, shown temporarily on save) -->
									<div class="swap-style-sidebar-status" id="swap-save-status-pt" style="display:none;">
										<span class="dashicons dashicons-yes-alt"></span>
										<span><?php esc_html_e( 'All settings are currently up to date', 'smartwait-animated-preloader' ); ?></span>
									</div>

									<!-- Enable Toggle: Progress and Percentage Preloader -->
									<div class="swap-style-sidebar-toggle">
										<strong><?php esc_html_e( 'Enable Progress Preloader', 'smartwait-animated-preloader' ); ?></strong>
										<label class="swap-switch">
											<input type="checkbox" class="swap-type-toggle" data-type="progress_timing" <?php checked( isset( $settings['active_preloader_type'] ) ? $settings['active_preloader_type'] : 'none', 'progress_timing' ); ?>>
											<span class="swap-slider"></span>
										</label>
									</div>

									<!-- Live Preview -->
									<div class="swap-style-sidebar-preview">
										<a href="<?php echo esc_url( home_url( '/' ) ); ?>" target="_blank" class="swap-preview-link">
											<span class="dashicons dashicons-visibility"></span>
											<?php esc_html_e( 'Live Preview', 'smartwait-animated-preloader' ); ?>
											<span class="dashicons dashicons-external"></span>
										</a>
										<p class="swap-preview-hint"><?php esc_html_e( 'Opening preview will launch your homepage in a new tab.', 'smartwait-animated-preloader' ); ?></p>
									</div>

									<?php $this->render_sidebar_bg_controls( $settings ); ?>

								</div>
							</div>
						</div>

					</div>

				</form>

				<!-- Copyright Footer -->
				<footer class="swap-copyright-footer">
					<p>&copy; <?php echo esc_html( gmdate( 'Y' ) ); ?> <?php esc_html_e( 'Shois WP. All rights reserved.', 'smartwait-animated-preloader' ); ?></p>
					<div class="swap-footer-links">
						<a href="#"><?php esc_html_e( 'Privacy Policy', 'smartwait-animated-preloader' ); ?></a>
						<a href="#"><?php esc_html_e( 'Terms of Service', 'smartwait-animated-preloader' ); ?></a>
						<a href="#"><?php esc_html_e( 'Contact Us', 'smartwait-animated-preloader' ); ?></a>
					</div>
				</footer>
			</div>
		</div>
		<?php
	}

	/**
	 * AJAX Handler for Page Search.
	 */
	public function ajax_search_pages() {
		check_ajax_referer( 'swap_admin_nonce', 'nonce' );

		if ( ! current_user_can( 'manage_options' ) ) {
			wp_send_json_error( 'Unauthorized' );
		}

		$term = isset( $_GET['term'] ) ? sanitize_text_field( wp_unslash( $_GET['term'] ) ) : '';

		if ( empty( $term ) ) {
			wp_send_json_success( array() );
		}

		$args = array(
			'post_type'      => array( 'page', 'post' ),
			'post_status'    => 'publish',
			's'              => $term,
			'posts_per_page' => 10,
			'fields'         => 'ids',
			'update_post_meta_cache' => false,
			'update_post_term_cache' => false,
		);

		$query = new WP_Query( $args );
		$results = array();

		foreach ( $query->posts as $post_id ) {
			$results[] = array(
				'id'   => $post_id,
				'text' => get_the_title( $post_id ) . ' (ID: ' . $post_id . ')',
				'type' => get_post_type( $post_id ),
			);
		}

		wp_send_json_success( $results );
	}
}

new SWAP_Admin();
