<?php
/**
 * Coming Soon & Maintenance - Admin Settings
 *
 * @package ComingSoonMaintenance
 * @since 1.0.0
 */

namespace ComingSoonMaintenance;

use WP_PowerSuite\Core\OptionStoreModuleSettingsRepository;

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

if ( ! isset( $module_id ) ) {
	$module_id = 'coming-soon-maintenance';
}
require_once __DIR__ . '/page-presets.php';
require_once __DIR__ . '/admin-helpers.php';

$defaults = Module::getDefaultSettings();

$settings = OptionStoreModuleSettingsRepository::forModule( $module_id )->all( [] );
$settings = is_array( $settings ) ? array_merge( $defaults, $settings ) : $defaults;
$use_existing_page = ! empty( $settings['use_existing_page'] );

// Backward compat: migrate old social_* keys to social_links.
if ( empty( $settings['social_links'] ) && ( ! empty( $settings['social_facebook'] ) || ! empty( $settings['social_twitter'] ) || ! empty( $settings['social_instagram'] ) || ! empty( $settings['social_linkedin'] ) ) ) {
	$settings['social_links'] = [];
	foreach ( [ 'facebook' => 'social_facebook', 'twitter' => 'social_twitter', 'instagram' => 'social_instagram', 'linkedin' => 'social_linkedin' ] as $icon => $key ) {
		if ( ! empty( $settings[ $key ] ) ) {
			$settings['social_links'][] = [ 'icon' => $icon, 'url' => $settings[ $key ] ];
		}
	}
}

// Backward compat: map lines/stripes/curves to patterns + bg_pattern.
$raw_bg_type = $settings['bg_type'] ?? 'color';
if ( in_array( $raw_bg_type, [ 'lines', 'stripes', 'curves' ], true ) ) {
	$settings['bg_type']   = 'patterns';
	$settings['bg_pattern'] = $raw_bg_type;
}

$logo_url = $settings['logo_id'] ? wp_get_attachment_image_url( (int) $settings['logo_id'], 'medium' ) : '';
$stored_logo_url     = isset( $settings['logo_url'] ) ? esc_url( trim( (string) $settings['logo_url'] ) ) : '';
$logo_source_raw     = $settings['logo_source'] ?? 'upload';
$logo_source         = in_array( $logo_source_raw, [ 'upload', 'site_icon', 'url', 'theme' ], true ) ? $logo_source_raw : 'upload';
if ( ! $logo_url && $stored_logo_url ) {
	$logo_url = $stored_logo_url;
}
$content_align       = in_array( $settings['content_align'] ?? 'center', [ 'left', 'center', 'right' ], true ) ? (string) $settings['content_align'] : 'center';
$container_max_width = max( 320, min( 1400, (int) ( $settings['container_max_width'] ?? 800 ) ) );
$logo_align          = in_array( $settings['logo_align'] ?? 'center', [ 'left', 'center', 'right' ], true ) ? (string) $settings['logo_align'] : 'center';
$logo_width_desktop  = max( 40, min( 600, (int) (
	( isset( $settings['logo_width_desktop'] ) && is_numeric( $settings['logo_width_desktop'] ) && (int) $settings['logo_width_desktop'] > 0 )
		? $settings['logo_width_desktop']
		: ( $settings['logo_max_width'] ?? 180 )
) ) );
$logo_width_tablet   = isset( $settings['logo_width_tablet'] ) && is_numeric( $settings['logo_width_tablet'] ) && (int) $settings['logo_width_tablet'] > 0
	? max( 40, min( 600, (int) $settings['logo_width_tablet'] ) )
	: '';
$logo_width_mobile   = isset( $settings['logo_width_mobile'] ) && is_numeric( $settings['logo_width_mobile'] ) && (int) $settings['logo_width_mobile'] > 0
	? max( 40, min( 600, (int) $settings['logo_width_mobile'] ) )
	: '';
$logo_bg_padding     = max( 0, min( 80, (int) ( $settings['logo_bg_padding'] ?? 16 ) ) );
$logo_border_radius  = max( 0, min( 100, (int) ( $settings['logo_border_radius'] ?? 0 ) ) );
$countdown_radius    = max( 0, min( 100, (int) ( $settings['countdown_border_radius'] ?? 12 ) ) );
$bg_image_position   = in_array( $settings['bg_image_position'] ?? 'center center', [ 'center center', 'top center', 'bottom center', 'center left', 'center right', 'top left', 'top right', 'bottom left', 'bottom right' ], true ) ? (string) $settings['bg_image_position'] : 'center center';
$bg_image_size       = in_array( $settings['bg_image_size'] ?? 'cover', [ 'cover', 'contain', 'auto' ], true ) ? (string) $settings['bg_image_size'] : 'cover';
$bg_image_repeat     = in_array( $settings['bg_image_repeat'] ?? 'no-repeat', [ 'no-repeat', 'repeat', 'repeat-x', 'repeat-y' ], true ) ? (string) $settings['bg_image_repeat'] : 'no-repeat';
$stored_bg_image_url = isset( $settings['bg_image_url'] ) ? esc_url( trim( (string) $settings['bg_image_url'] ) ) : '';
$bg_image_url        = $settings['bg_image_id'] ? wp_get_attachment_image_url( (int) $settings['bg_image_id'], 'medium' ) : $stored_bg_image_url;
$bg_type = $settings['bg_type'] ?? 'color';
$bg_pattern = in_array( $settings['bg_pattern'] ?? '', [ 'lines', 'stripes', 'curves' ], true ) ? $settings['bg_pattern'] : 'lines';
$bg_gradient_type   = ( $settings['bg_gradient_type'] ?? 'linear' ) === 'radial' ? 'radial' : 'linear';
$bg_gradient_angle  = isset( $settings['bg_gradient_angle'] ) ? max( 0, min( 360, (int) $settings['bg_gradient_angle'] ) ) : 135;
$bg_gradient_color1 = preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/', $settings['bg_gradient_color1'] ?? '' ) ? $settings['bg_gradient_color1'] : '#8dd3d3';
$bg_gradient_color2 = preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/', $settings['bg_gradient_color2'] ?? '' ) ? $settings['bg_gradient_color2'] : '#e8e8e8';
$bg_gradient_pos1   = isset( $settings['bg_gradient_pos1'] ) ? max( 0, min( 100, (int) $settings['bg_gradient_pos1'] ) ) : 0;
$bg_gradient_pos2   = isset( $settings['bg_gradient_pos2'] ) ? max( 0, min( 100, (int) $settings['bg_gradient_pos2'] ) ) : 100;
$bg_video = isset( $settings['bg_video'] ) ? esc_url( trim( (string) $settings['bg_video'] ) ) : '';
$bg_video_overlay_color   = preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/', $settings['bg_video_overlay_color'] ?? '' ) ? $settings['bg_video_overlay_color'] : '#000000';
$bg_video_overlay_opacity = isset( $settings['bg_video_overlay_opacity'] ) ? max( 0, min( 100, (int) $settings['bg_video_overlay_opacity'] ) ) : 60;
$bg_image_overlay_color   = preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/', $settings['bg_image_overlay_color'] ?? '' ) ? $settings['bg_image_overlay_color'] : '#000000';
$bg_image_overlay_opacity = isset( $settings['bg_image_overlay_opacity'] ) ? max( 0, min( 100, (int) $settings['bg_image_overlay_opacity'] ) ) : 60;
$bg_pattern_overlay_color   = preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/', $settings['bg_pattern_overlay_color'] ?? '' ) ? $settings['bg_pattern_overlay_color'] : '#000000';
$bg_pattern_overlay_opacity = isset( $settings['bg_pattern_overlay_opacity'] ) ? max( 0, min( 100, (int) $settings['bg_pattern_overlay_opacity'] ) ) : 40;
$allowed_user_ids_raw = $settings['allowed_user_ids'] ?? '';
$allowed_user_ids = is_array( $allowed_user_ids_raw ) ? array_map( 'absint', $allowed_user_ids_raw ) : array_filter( array_map( 'absint', explode( "\n", (string) $allowed_user_ids_raw ) ) );
$allowed_user_ids = array_values( array_filter( array_unique( $allowed_user_ids ) ) );
$allowed_users = [];
if ( ! empty( $allowed_user_ids ) ) {
	$user_objects = get_users( [ 'include' => $allowed_user_ids, 'fields' => [ 'ID', 'user_login', 'display_name' ] ] );
	foreach ( $user_objects as $u ) {
		$allowed_users[ (int) $u->ID ] = [ 'id' => (int) $u->ID, 'display_name' => $u->display_name ?: $u->user_login, 'user_login' => $u->user_login ];
	}
}

$social_links = isset( $settings['social_links'] ) && is_array( $settings['social_links'] ) ? $settings['social_links'] : [];
$social_icons = [
	'facebook'  => __( 'Facebook', 'wp-powersuite' ),
	'twitter'   => __( 'X (Twitter)', 'wp-powersuite' ),
	'instagram' => __( 'Instagram', 'wp-powersuite' ),
	'linkedin'  => __( 'LinkedIn', 'wp-powersuite' ),
	'youtube'   => __( 'YouTube', 'wp-powersuite' ),
	'pinterest' => __( 'Pinterest', 'wp-powersuite' ),
	'tiktok'    => __( 'TikTok', 'wp-powersuite' ),
	'github'    => __( 'GitHub', 'wp-powersuite' ),
	'rss'       => __( 'RSS', 'wp-powersuite' ),
	'link'      => __( 'Link', 'wp-powersuite' ),
	'mastodon'  => __( 'Mastodon', 'wp-powersuite' ),
	'threads'   => __( 'Threads', 'wp-powersuite' ),
];

$roles = wp_roles()->get_names();
$subscribers_with_meta = Module::getSubscribersWithMeta();
$bypass_url = Module::getBypassUrl();
$preview_url = add_query_arg( 'wpps_csm_preview', '1', home_url( '/' ) );
$is_enabled = ! empty( $settings['enabled'] );
$current_mode = ( $settings['mode'] ?? 'coming_soon' ) === 'maintenance' ? 'maintenance' : 'coming_soon';
$has_woocommerce = class_exists( 'WooCommerce' );

$page_presets_catalog  = PagePresets::getCatalog();
$current_page_preset   = isset( $settings['page_preset'] ) ? (string) $settings['page_preset'] : 'default';
$valid_page_preset_ids = array_column( $page_presets_catalog, 'id' );
if ( ! in_array( $current_page_preset, $valid_page_preset_ids, true ) ) {
	$current_page_preset = 'default';
}

?>
<div class="wrap wpps-csm-page">
	<hr class="wp-header-end">
	<?php
	\WP_PowerSuite\Admin\PageHero::render_for_module(
		[
			'icon'      => 'dashicons-hammer',
			'title'     => __( 'Coming Soon & Maintenance', 'wp-powersuite' ),
			'tagline'   => __( 'Display a coming soon page with countdown and email signup, or a maintenance page.', 'wp-powersuite' ),
			'meta_html' => '<a href="' . esc_url( $preview_url ) . '" class="button button-secondary" target="_blank" rel="noopener">' . esc_html__( 'Preview', 'wp-powersuite' ) . '</a>',
		]
	);
	?>

	<div class="wp-powersuite-settings wp-powersuite-settings--csm">
		<?php if ( $is_enabled ) : ?>
			<div class="wpps-module-callout wpps-module-notice--warning">
				<p>
					<strong><?php esc_html_e( 'Site gate is active.', 'wp-powersuite' ); ?></strong>
					<?php
					echo esc_html(
						$current_mode === 'maintenance'
							? __( 'Visitors receive HTTP 503 (maintenance). Search engines are told not to index the page.', 'wp-powersuite' )
							: __( 'Visitors see the coming soon page (HTTP 200, noindex). Use Maintenance mode for short downtime with HTTP 503.', 'wp-powersuite' )
					);
					?>
				</p>
			</div>
		<?php endif; ?>

		<form class="wp-powersuite-module-settings-form" data-module-id="<?php echo esc_attr( $module_id ); ?>">
			<?php wp_nonce_field( 'wp_powersuite_save_module_settings_' . $module_id, 'wp_powersuite_nonce' ); ?>

			<h2 class="nav-tab-wrapper wpps-csm-tabs" role="tablist">
				<a href="#wpps-csm-general" class="nav-tab nav-tab-active wpps-csm-tab" data-tab="general" role="tab"><?php esc_html_e( 'General', 'wp-powersuite' ); ?></a>
				<a href="#wpps-csm-appearance" class="nav-tab wpps-csm-tab wpps-csm-tab-appearance" data-tab="appearance" role="tab" <?php echo $use_existing_page ? ' style="display:none;"' : ''; ?>><?php esc_html_e( 'Appearance & Design', 'wp-powersuite' ); ?></a>
				<a href="#wpps-csm-advanced" class="nav-tab wpps-csm-tab" data-tab="advanced" role="tab"><?php esc_html_e( 'Advanced', 'wp-powersuite' ); ?></a>
				<a href="#wpps-csm-subscribers" class="nav-tab wpps-csm-tab wpps-csm-tab-subscribers" data-tab="subscribers" role="tab" <?php echo ( $use_existing_page || $current_mode === 'maintenance' ) ? ' style="display:none;"' : ''; ?>><?php esc_html_e( 'Subscribers', 'wp-powersuite' ); ?><?php echo ! empty( $subscribers_with_meta ) ? ' (' . esc_html( (string) count( $subscribers_with_meta ) ) . ')' : ''; ?></a>
			</h2>

			<div class="wpps-csm-panel is-active" data-panel="general">
				<div class="wp-powersuite-settings__card">
					<h2 class="wp-powersuite-settings__card-title"><?php esc_html_e( 'Status', 'wp-powersuite' ); ?></h2>
					<p class="description"><?php esc_html_e( 'Enable the page and choose the mode.', 'wp-powersuite' ); ?></p>
					<table class="form-table">
						<tbody>
							<tr>
								<th scope="row"><?php esc_html_e( 'Enable', 'wp-powersuite' ); ?></th>
								<td>
									<label>
										<input type="hidden" name="enabled" class="wp-powersuite-advanced-setting" data-setting-key="enabled" value="0">
										<input type="checkbox" name="enabled" class="wp-powersuite-advanced-setting" data-setting-key="enabled" value="1" <?php checked( $is_enabled ); ?>>
										<?php esc_html_e( 'Enable Coming Soon / Maintenance mode', 'wp-powersuite' ); ?>
									</label>
									<?php if ( $is_enabled ) : ?>
										<span class="wpps-csm-status-badge <?php echo $current_mode === 'maintenance' ? 'is-maintenance' : 'is-coming-soon'; ?>">
											<?php echo esc_html( $current_mode === 'maintenance' ? __( 'Maintenance active', 'wp-powersuite' ) : __( 'Coming soon active', 'wp-powersuite' ) ); ?>
										</span>
									<?php endif; ?>
								</td>
							</tr>
							<tr>
								<th scope="row"><?php esc_html_e( 'Mode', 'wp-powersuite' ); ?></th>
								<td>
									<label><input type="radio" name="mode" class="wp-powersuite-advanced-setting" data-setting-key="mode" value="coming_soon" <?php checked( $current_mode === 'coming_soon' ); ?>> <?php esc_html_e( 'Coming Soon', 'wp-powersuite' ); ?></label>
									&nbsp;&nbsp;
									<label><input type="radio" name="mode" class="wp-powersuite-advanced-setting" data-setting-key="mode" value="maintenance" <?php checked( $current_mode === 'maintenance' ); ?>> <?php esc_html_e( 'Maintenance', 'wp-powersuite' ); ?></label>
									<p class="description"><?php esc_html_e( 'Coming Soon: HTTP 200 with noindex — ideal before launch. Maintenance: HTTP 503 with Retry-After — ideal for short downtime.', 'wp-powersuite' ); ?></p>
								</td>
							</tr>
							<tr>
								<th scope="row"></th>
								<td>
									<label>
										<input type="hidden" name="use_existing_page" class="wp-powersuite-advanced-setting" data-setting-key="use_existing_page" value="0">
										<input type="checkbox" name="use_existing_page" class="wp-powersuite-advanced-setting" data-setting-key="use_existing_page" value="1" id="<?php echo esc_attr( $module_id ); ?>_use_existing_page" <?php checked( $use_existing_page ); ?>>
										<?php esc_html_e( 'Use existing page', 'wp-powersuite' ); ?>
									</label>
									<p class="description"><?php esc_html_e( 'Display an existing page as the coming soon/maintenance page. The URL stays unchanged (e.g. visitors see your homepage URL but get the design of the page you specify).', 'wp-powersuite' ); ?></p>
								</td>
							</tr>
							<tr class="wpps-csm-existing-page-row" style="<?php echo $use_existing_page ? '' : 'display:none;'; ?>">
								<th scope="row"><label for="<?php echo esc_attr( $module_id ); ?>_existing_page_url"><?php esc_html_e( 'Page URL', 'wp-powersuite' ); ?></label></th>
								<td>
									<input type="url" id="<?php echo esc_attr( $module_id ); ?>_existing_page_url" name="existing_page_url" class="wp-powersuite-advanced-setting large-text" data-setting-key="existing_page_url" value="<?php echo esc_attr( $settings['existing_page_url'] ?? '' ); ?>" placeholder="<?php echo esc_attr( home_url( '/about-us/' ) ); ?>" style="width: 100%; max-width: 480px; box-sizing: border-box;">
									<p class="description"><?php esc_html_e( 'Full URL of the page to display (must be from this site).', 'wp-powersuite' ); ?></p>
								</td>
							</tr>
							<tr class="wpps-csm-custom-design-row" style="<?php echo $use_existing_page ? 'display:none;' : ''; ?>">
								<th scope="row"><label for="<?php echo esc_attr( $module_id ); ?>_page_title"><?php esc_html_e( 'Page Title', 'wp-powersuite' ); ?></label></th>
								<td>
									<input type="text" id="<?php echo esc_attr( $module_id ); ?>_page_title" name="page_title" class="wp-powersuite-advanced-setting large-text" data-setting-key="page_title" value="<?php echo esc_attr( $settings['page_title'] ?? '' ); ?>" placeholder="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" style="width: 100%; box-sizing: border-box;">
									<p class="description"><?php esc_html_e( 'Browser tab title. Leave blank to use site name.', 'wp-powersuite' ); ?></p>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="wp-powersuite-settings__card wpps-csm-custom-design-only" style="<?php echo $use_existing_page ? 'display:none;' : ''; ?>">
					<h2 class="wp-powersuite-settings__card-title"><?php esc_html_e( 'Ready-made Templates', 'wp-powersuite' ); ?></h2>
					<p class="description wpps-csm-layout-presets-intro"><?php esc_html_e( 'Click a template to prefill heading, background, colors, and styling. Then save to apply on the live page.', 'wp-powersuite' ); ?></p>
					<input type="hidden" name="page_preset" class="wp-powersuite-advanced-setting" data-setting-key="page_preset" value="<?php echo esc_attr( $current_page_preset ); ?>" id="<?php echo esc_attr( $module_id . '_page_preset' ); ?>" />
					<div class="wpps-csm-page-presets" role="group" aria-label="<?php esc_attr_e( 'Ready-made templates', 'wp-powersuite' ); ?>">
						<?php foreach ( $page_presets_catalog as $preset ) : ?>
							<?php
							$preset_id    = (string) $preset['id'];
							$preset_group = (string) $preset['group'];
							$preview      = PagePresets::getPreviewSpec( $preset_id );
							$is_active    = $current_page_preset === $preset_id;
							$is_hidden    = $preset_group !== 'default' && $preset_group !== ( $current_mode === 'maintenance' ? 'maintenance' : 'coming_soon' );

							$preview_classes = [
								'wpps-csm-page-preset__preview',
								'wpps-csm-page-preset__preview--centered',
							];
							if ( ! empty( $preview['text_light'] ) ) {
								$preview_classes[] = 'is-light-text';
							}
							if ( ! empty( $preview['page_image'] ) ) {
								$preview_classes[] = 'has-page-photo';
							}
							if ( ! empty( $preview['pattern'] ) ) {
								$preview_classes[] = 'has-pattern';
								$preview_classes[] = 'pattern-' . sanitize_html_class( (string) $preview['pattern'] );
							}
							if ( ! empty( $preview['show_countdown'] ) ) {
								$preview_classes[] = 'has-countdown';
							}
							if ( ! empty( $preview['show_subscribe'] ) ) {
								$preview_classes[] = 'has-subscribe';
							}
							if ( ! empty( $preview['show_social'] ) ) {
								$preview_classes[] = 'has-social';
							}

							$preview_style = '--wpps-csm-page-fill:' . esc_attr( (string) ( $preview['page_fill'] ?? '#8dd3d3' ) ) . ';';
							if ( ! empty( $preview['page_image'] ) ) {
								$preview_style .= '--wpps-csm-page-image:url(' . esc_url( (string) $preview['page_image'] ) . ');';
							}
							if ( ! empty( $preview['page_overlay'] ) ) {
								$preview_style .= '--wpps-csm-page-overlay:' . esc_attr( (string) $preview['page_overlay'] ) . ';';
							}
							?>
							<button
								type="button"
								class="wpps-csm-page-preset<?php echo $is_active ? ' is-active' : ''; ?><?php echo $is_hidden ? ' is-hidden' : ''; ?>"
								data-preset-id="<?php echo esc_attr( $preset_id ); ?>"
								data-preset-group="<?php echo esc_attr( $preset_group ); ?>"
								aria-pressed="<?php echo $is_active ? 'true' : 'false'; ?>"
								title="<?php echo esc_attr( (string) $preset['description'] ); ?>"
							>
								<span class="<?php echo esc_attr( implode( ' ', $preview_classes ) ); ?>" style="<?php echo esc_attr( $preview_style ); ?>">
									<span class="wpps-csm-page-preset__canvas" aria-hidden="true"></span>
									<span class="wpps-csm-page-preset__content" aria-hidden="true">
										<span class="wpps-csm-page-preset__logo"></span>
										<span class="wpps-csm-page-preset__heading"></span>
										<span class="wpps-csm-page-preset__desc"></span>
										<span class="wpps-csm-page-preset__countdown">
											<span></span><span></span><span></span><span></span>
										</span>
										<span class="wpps-csm-page-preset__subscribe"></span>
										<span class="wpps-csm-page-preset__social">
											<span></span><span></span><span></span>
										</span>
									</span>
								</span>
								<span class="wpps-csm-page-preset__meta">
									<span class="wpps-csm-page-preset__name"><?php echo esc_html( (string) $preset['name'] ); ?></span>
									<?php if ( ! empty( $preview['has_photo'] ) ) : ?>
										<span class="wpps-csm-page-preset__badge"><?php esc_html_e( 'Photo', 'wp-powersuite' ); ?></span>
									<?php elseif ( $preset_group === 'maintenance' ) : ?>
										<span class="wpps-csm-page-preset__badge"><?php esc_html_e( 'Maintenance', 'wp-powersuite' ); ?></span>
									<?php endif; ?>
								</span>
							</button>
						<?php endforeach; ?>
					</div>
				</div>
				<div class="wp-powersuite-settings__card wpps-csm-custom-design-only" style="<?php echo $use_existing_page ? 'display:none;' : ''; ?>">
					<h2 class="wp-powersuite-settings__card-title"><?php esc_html_e( 'Logo', 'wp-powersuite' ); ?></h2>
					<p class="description"><?php esc_html_e( 'Show your logo above the heading. Uploaded logos are kept when you switch templates.', 'wp-powersuite' ); ?></p>
					<table class="form-table">
						<tbody>
							<tr>
								<th scope="row"><?php esc_html_e( 'Show Logo', 'wp-powersuite' ); ?></th>
								<td>
									<label>
										<input type="hidden" name="show_logo" class="wp-powersuite-advanced-setting" data-setting-key="show_logo" value="0">
										<input type="checkbox" name="show_logo" class="wp-powersuite-advanced-setting" data-setting-key="show_logo" value="1" id="<?php echo esc_attr( $module_id ); ?>_show_logo" <?php checked( ! empty( $settings['show_logo'] ) ); ?>>
										<?php esc_html_e( 'Show logo', 'wp-powersuite' ); ?>
									</label>
								</td>
							</tr>
							<tr class="wpps-csm-logo-options-row">
								<th scope="row"><label for="<?php echo esc_attr( $module_id ); ?>_logo_source"><?php esc_html_e( 'Logo Source', 'wp-powersuite' ); ?></label></th>
								<td>
									<select id="<?php echo esc_attr( $module_id ); ?>_logo_source" name="logo_source" class="wp-powersuite-advanced-setting" data-setting-key="logo_source">
										<option value="upload" <?php selected( $logo_source, 'upload' ); ?>><?php esc_html_e( 'Media Library / URL', 'wp-powersuite' ); ?></option>
										<option value="theme" <?php selected( $logo_source, 'theme' ); ?>><?php esc_html_e( 'Theme Custom Logo', 'wp-powersuite' ); ?></option>
										<option value="site_icon" <?php selected( $logo_source, 'site_icon' ); ?>><?php esc_html_e( 'Site Icon', 'wp-powersuite' ); ?></option>
										<option value="url" <?php selected( $logo_source, 'url' ); ?>><?php esc_html_e( 'External Image URL', 'wp-powersuite' ); ?></option>
									</select>
								</td>
							</tr>
							<tr class="wpps-csm-logo-upload-row wpps-csm-logo-options-row" style="<?php echo in_array( $logo_source, [ 'upload', 'url' ], true ) ? '' : 'display:none;'; ?>">
								<th scope="row"><label for="<?php echo esc_attr( $module_id ); ?>_logo_url"><?php esc_html_e( 'Logo Image', 'wp-powersuite' ); ?></label></th>
								<td>
									<div id="<?php echo esc_attr( $module_id ); ?>_logo_wrap" class="wpps-csm-logo-wrap" style="margin-bottom:10px;<?php echo empty( $settings['show_logo'] ) ? 'display:none;' : ''; ?>">
										<div id="<?php echo esc_attr( $module_id ); ?>_logo_preview" style="margin-bottom:10px;">
											<?php if ( $logo_url ) : ?>
												<img src="<?php echo esc_url( $logo_url ); ?>" alt="" style="max-width:<?php echo (int) $logo_width_desktop; ?>px;height:auto;border:1px solid #ddd;padding:4px;border-radius:4px;">
											<?php endif; ?>
										</div>
									</div>
									<input type="url" id="<?php echo esc_attr( $module_id ); ?>_logo_url" name="logo_url" class="wp-powersuite-advanced-setting regular-text" data-setting-key="logo_url" value="<?php echo esc_attr( $stored_logo_url ); ?>" placeholder="https://" style="max-width:480px;margin-bottom:8px;" />
									<input type="hidden" id="<?php echo esc_attr( $module_id ); ?>_logo_id" name="logo_id" class="wp-powersuite-advanced-setting" data-setting-key="logo_id" value="<?php echo esc_attr( (string) ( $settings['logo_id'] ?? 0 ) ); ?>">
									<button type="button" class="button" id="<?php echo esc_attr( $module_id ); ?>_upload_logo"><?php esc_html_e( 'Select from Library', 'wp-powersuite' ); ?></button>
									<button type="button" class="button" id="<?php echo esc_attr( $module_id ); ?>_remove_logo" style="<?php echo $logo_url ? '' : 'display:none;'; ?>"><?php esc_html_e( 'Remove', 'wp-powersuite' ); ?></button>
									<p class="description"><?php esc_html_e( 'Paste an image URL or upload from the Media Library. Logo alignment and background options are under Appearance & Design.', 'wp-powersuite' ); ?></p>
								</td>
							</tr>
							<tr class="wpps-csm-logo-options-row">
								<th scope="row">
									<?php esc_html_e( 'Logo Size', 'wp-powersuite' ); ?>
									<div class="wpps-device-icons-wrapper">
										<div class="wpps-device-icons" role="group" aria-label="<?php esc_attr_e( 'Device', 'wp-powersuite' ); ?>">
											<button type="button" class="wpps-device-icon" data-device="mobile" title="<?php esc_attr_e( 'Mobile', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-smartphone" aria-hidden="true"></span></button>
											<button type="button" class="wpps-device-icon" data-device="tablet" title="<?php esc_attr_e( 'Tablet', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-tablet" aria-hidden="true"></span></button>
											<button type="button" class="wpps-device-icon is-active" data-device="desktop" title="<?php esc_attr_e( 'Desktop', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-desktop" aria-hidden="true"></span></button>
										</div>
									</div>
								</th>
								<td>
									<div class="wpps-logo-width-inputs">
										<label class="wpps-logo-width-wrap wpps-logo-width-desktop">
											<input type="number" id="<?php echo esc_attr( $module_id ); ?>_logo_width_desktop" name="logo_width_desktop" class="wp-powersuite-advanced-setting" data-setting-key="logo_width_desktop" value="<?php echo esc_attr( (string) $logo_width_desktop ); ?>" min="40" max="600" step="5" placeholder="180" />
											<span><?php esc_html_e( 'px', 'wp-powersuite' ); ?></span>
										</label>
										<label class="wpps-logo-width-wrap wpps-logo-width-tablet" style="display:none;">
											<input type="number" id="<?php echo esc_attr( $module_id ); ?>_logo_width_tablet" name="logo_width_tablet" class="wp-powersuite-advanced-setting" data-setting-key="logo_width_tablet" value="<?php echo esc_attr( (string) $logo_width_tablet ); ?>" min="40" max="600" step="5" placeholder="160" />
											<span><?php esc_html_e( 'px', 'wp-powersuite' ); ?></span>
										</label>
										<label class="wpps-logo-width-wrap wpps-logo-width-mobile" style="display:none;">
											<input type="number" id="<?php echo esc_attr( $module_id ); ?>_logo_width_mobile" name="logo_width_mobile" class="wp-powersuite-advanced-setting" data-setting-key="logo_width_mobile" value="<?php echo esc_attr( (string) $logo_width_mobile ); ?>" min="40" max="600" step="5" placeholder="140" />
											<span><?php esc_html_e( 'px', 'wp-powersuite' ); ?></span>
										</label>
									</div>
									<p class="description"><?php esc_html_e( 'Maximum logo width on the page. Leave tablet/mobile empty to use the desktop size on all screens.', 'wp-powersuite' ); ?></p>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="wp-powersuite-settings__card wpps-csm-custom-design-only" style="<?php echo $use_existing_page ? 'display:none;' : ''; ?>">
					<h2 class="wp-powersuite-settings__card-title"><?php esc_html_e( 'Heading', 'wp-powersuite' ); ?></h2>
					<p class="description"><?php esc_html_e( 'Main heading displayed on the page.', 'wp-powersuite' ); ?></p>
					<div class="wpps-csm-wysiwyg-wrap">
						<?php
						wp_editor(
							$settings['heading'] ?? '',
							$module_id . '_heading',
							[
								'textarea_name'     => 'heading',
								'textarea_rows'     => 6,
								'editor_height'     => 180,
								'media_buttons'     => true,
								'drag_drop_upload'  => true,
								'editor_class'      => 'wp-powersuite-advanced-setting wpps-csm-editor',
								'tinymce'           => true,
								'quicktags'         => true,
								'wpautop'           => true,
							]
						);
						?>
					</div>
				</div>
				<div class="wp-powersuite-settings__card wpps-csm-custom-design-only" style="<?php echo $use_existing_page ? 'display:none;' : ''; ?>">
					<h2 class="wp-powersuite-settings__card-title"><?php esc_html_e( 'Description', 'wp-powersuite' ); ?></h2>
					<p class="description"><?php esc_html_e( 'Description text below the heading.', 'wp-powersuite' ); ?></p>
					<div class="wpps-csm-wysiwyg-wrap">
						<?php
						wp_editor(
							$settings['description'] ?? '',
							$module_id . '_description',
							[
								'textarea_name'     => 'description',
								'textarea_rows'     => 8,
								'editor_height'     => 220,
								'media_buttons'     => true,
								'drag_drop_upload'  => true,
								'editor_class'      => 'wp-powersuite-advanced-setting wpps-csm-editor',
								'tinymce'           => true,
								'quicktags'         => true,
								'wpautop'           => true,
							]
						);
						?>
					</div>
				</div>
				<div class="wp-powersuite-settings__card wpps-csm-coming-soon-only wpps-csm-custom-design-only" style="<?php echo $use_existing_page ? 'display:none;' : ''; ?>">
					<h2 class="wp-powersuite-settings__card-title"><?php esc_html_e( 'Coming Soon Options', 'wp-powersuite' ); ?></h2>
					<p class="description"><?php esc_html_e( 'Countdown and email subscription settings.', 'wp-powersuite' ); ?></p>
					<table class="form-table">
						<tbody>
							<tr>
								<th scope="row"><label for="<?php echo esc_attr( $module_id ); ?>_launch_date"><?php esc_html_e( 'Launch Date', 'wp-powersuite' ); ?></label></th>
								<td>
									<input type="datetime-local" id="<?php echo esc_attr( $module_id ); ?>_launch_date" name="launch_date" class="wp-powersuite-advanced-setting" data-setting-key="launch_date" value="<?php echo esc_attr( $settings['launch_date'] ?? '' ); ?>">
									<p class="description"><?php esc_html_e( 'Countdown timer target. Uses site timezone.', 'wp-powersuite' ); ?></p>
								</td>
							</tr>
							<tr>
								<th scope="row"></th>
								<td>
									<label>
										<input type="hidden" name="auto_disable" class="wp-powersuite-advanced-setting" data-setting-key="auto_disable" value="0">
										<input type="checkbox" name="auto_disable" class="wp-powersuite-advanced-setting" data-setting-key="auto_disable" value="1" <?php checked( ! empty( $settings['auto_disable'] ) ); ?>>
										<?php esc_html_e( 'Auto-disable when countdown ends', 'wp-powersuite' ); ?>
									</label>
								</td>
							</tr>
							<tr>
								<th scope="row"></th>
								<td>
									<label>
										<input type="hidden" name="show_subscribe" class="wp-powersuite-advanced-setting" data-setting-key="show_subscribe" value="0">
										<input type="checkbox" name="show_subscribe" class="wp-powersuite-advanced-setting" data-setting-key="show_subscribe" value="1" <?php checked( ! empty( $settings['show_subscribe'] ) ); ?>>
										<?php esc_html_e( 'Show email subscription form', 'wp-powersuite' ); ?>
									</label>
								</td>
							</tr>
							<tr>
								<th scope="row"><label for="<?php echo esc_attr( $module_id ); ?>_subscribe_consent"><?php esc_html_e( 'Privacy notice', 'wp-powersuite' ); ?></label></th>
								<td>
									<input type="text" id="<?php echo esc_attr( $module_id ); ?>_subscribe_consent" name="subscribe_consent_text" class="wp-powersuite-advanced-setting large-text" data-setting-key="subscribe_consent_text" value="<?php echo esc_attr( $settings['subscribe_consent_text'] ?? '' ); ?>" style="width:100%;max-width:480px;">
									<p class="description"><?php esc_html_e( 'Short text shown below the signup form.', 'wp-powersuite' ); ?></p>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>

			<div class="wpps-csm-panel wpps-csm-panel-appearance" data-panel="appearance" <?php echo $use_existing_page ? ' style="display:none;"' : ''; ?>>
				<div class="wp-powersuite-settings__card">
					<h2 class="wp-powersuite-settings__card-title"><?php esc_html_e( 'Background', 'wp-powersuite' ); ?></h2>
					<p class="description"><?php esc_html_e( 'Choose the page background style.', 'wp-powersuite' ); ?></p>
					<table class="form-table wpps-csm-bg-table <?php echo esc_attr( 'wpps-csm-bg-type-' . $bg_type ); ?>" id="<?php echo esc_attr( $module_id ); ?>_bg_table">
						<tbody>
							<tr class="wpps-csm-bg-type-row">
								<th scope="row"><?php esc_html_e( 'Background Type', 'wp-powersuite' ); ?></th>
								<td>
									<div class="wpps-bg-type-icons wpps-csm-bg-type-icons" role="group" aria-label="<?php esc_attr_e( 'Background type', 'wp-powersuite' ); ?>">
										<input type="hidden" name="bg_type" class="wp-powersuite-advanced-setting" data-setting-key="bg_type" value="<?php echo esc_attr( $bg_type ); ?>" id="<?php echo esc_attr( $module_id ); ?>_bg_type" />
										<button type="button" class="wpps-bg-type-btn <?php echo $bg_type === 'color' ? 'is-active' : ''; ?>" data-bg-type="color" title="<?php esc_attr_e( 'Color', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-admin-appearance" aria-hidden="true"></span></button>
										<button type="button" class="wpps-bg-type-btn <?php echo $bg_type === 'gradient' ? 'is-active' : ''; ?>" data-bg-type="gradient" title="<?php esc_attr_e( 'Gradient', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-art" aria-hidden="true"></span></button>
										<button type="button" class="wpps-bg-type-btn <?php echo $bg_type === 'image' ? 'is-active' : ''; ?>" data-bg-type="image" title="<?php esc_attr_e( 'Image', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-format-gallery" aria-hidden="true"></span></button>
										<button type="button" class="wpps-bg-type-btn <?php echo $bg_type === 'video' ? 'is-active' : ''; ?>" data-bg-type="video" title="<?php esc_attr_e( 'Video', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-video-alt3" aria-hidden="true"></span></button>
										<button type="button" class="wpps-bg-type-btn <?php echo $bg_type === 'patterns' ? 'is-active' : ''; ?>" data-bg-type="patterns" title="<?php esc_attr_e( 'Patterns', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-grid-view" aria-hidden="true"></span></button>
										<button type="button" class="wpps-bg-type-reset<?php echo $bg_type === 'gradient' ? ' wpps-reset-hidden' : ''; ?>" title="<?php esc_attr_e( 'Reset to default', 'wp-powersuite' ); ?>" aria-label="<?php esc_attr_e( 'Reset to default', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-image-rotate" aria-hidden="true"></span></button>
									</div>
								</td>
							</tr>
							<tr class="wpps-csm-bg-color-row">
								<th scope="row"><label for="<?php echo esc_attr( $module_id ); ?>_bg_color"><?php esc_html_e( 'Background Color', 'wp-powersuite' ); ?></label></th>
								<td>
									<?php
									$bg_color_raw = $settings['bg_color'] ?? '';
									$bg_color_val = preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/', $bg_color_raw ) ? ( strlen( $bg_color_raw ) > 7 ? substr( $bg_color_raw, 0, 7 ) : $bg_color_raw ) : '#8dd3d3';
									$bg_color_hex = preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/', $bg_color_raw ) ? $bg_color_raw : '#8dd3d3';
									?>
									<div class="wpps-color-field-row">
										<input type="color" id="<?php echo esc_attr( $module_id ); ?>_bg_color" name="bg_color" value="<?php echo esc_attr( $bg_color_val ); ?>" class="wp-powersuite-advanced-setting wpps-color-picker-circle" data-setting-key="bg_color" />
										<div class="wpps-color-code-wrap">
											<input type="text" class="wpps-color-code-input regular-text wp-powersuite-advanced-setting" data-setting-key="bg_color" data-color-input="<?php echo esc_attr( $module_id ); ?>_bg_color" data-default-color="#8dd3d3" value="<?php echo esc_attr( $bg_color_hex ); ?>" style="width: 100px; padding-right: 25px;" placeholder="#8dd3d3" maxlength="9" />
											<button type="button" class="wpps-color-reset button-link" data-default-color="#8dd3d3"><span class="dashicons dashicons-undo" style="font-size: 16px; width: 16px; height: 16px;"></span></button>
										</div>
									</div>
								</td>
							</tr>
							<tr class="wpps-csm-bg-gradient-row">
								<th scope="row"><?php esc_html_e( 'Gradient', 'wp-powersuite' ); ?></th>
								<td>
									<div class="wpps-csm-gradient-editor wpps-gradient-editor">
										<div class="wpps-gradient-type-angle-row">
											<label for="<?php echo esc_attr( $module_id ); ?>_bg_gradient_type"><?php esc_html_e( 'Type', 'wp-powersuite' ); ?></label>
											<select id="<?php echo esc_attr( $module_id ); ?>_bg_gradient_type" name="bg_gradient_type" class="wp-powersuite-advanced-setting wpps-gradient-type" data-setting-key="bg_gradient_type">
												<option value="linear" <?php selected( $bg_gradient_type, 'linear' ); ?>><?php esc_html_e( 'Linear', 'wp-powersuite' ); ?></option>
												<option value="radial" <?php selected( $bg_gradient_type, 'radial' ); ?>><?php esc_html_e( 'Radial', 'wp-powersuite' ); ?></option>
											</select>
											<span class="wpps-gradient-angle-inline">
												<label for="<?php echo esc_attr( $module_id ); ?>_bg_gradient_angle"><?php esc_html_e( 'Angle', 'wp-powersuite' ); ?></label>
												<input type="number" name="bg_gradient_angle" id="<?php echo esc_attr( $module_id ); ?>_bg_gradient_angle" class="wp-powersuite-advanced-setting wpps-gradient-angle" data-setting-key="bg_gradient_angle" value="<?php echo esc_attr( $bg_gradient_angle ); ?>" data-wpps-min="0" data-wpps-max="360" data-wpps-step="1" />
												<span class="wpps-unit-label">°</span>
											</span>
										</div>
										<div class="wpps-gradient-color-row">
											<label><?php esc_html_e( 'Color 1', 'wp-powersuite' ); ?></label>
											<input type="color" name="bg_gradient_color1" id="<?php echo esc_attr( $module_id ); ?>_bg_gradient_color1" value="<?php echo esc_attr( preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/', $bg_gradient_color1 ) ? ( strlen( $bg_gradient_color1 ) > 7 ? substr( $bg_gradient_color1, 0, 7 ) : $bg_gradient_color1 ) : '#8dd3d3' ); ?>" class="wp-powersuite-advanced-setting wpps-color-picker-circle" data-setting-key="bg_gradient_color1" />
											<div class="wpps-gradient-color-wrap">
												<input type="text" name="bg_gradient_color1" class="wpps-color-code-input regular-text wp-powersuite-advanced-setting" data-setting-key="bg_gradient_color1" data-color-input="<?php echo esc_attr( $module_id ); ?>_bg_gradient_color1" data-default-color="#8dd3d3" value="<?php echo esc_attr( preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/', $bg_gradient_color1 ) ? $bg_gradient_color1 : '#8dd3d3' ); ?>" style="width: 100px; padding-right: 25px;" placeholder="#8dd3d3" maxlength="9" />
												<button type="button" class="wpps-color-reset button-link" data-default-color="#8dd3d3"><span class="dashicons dashicons-undo" style="font-size: 16px; width: 16px; height: 16px;"></span></button>
											</div>
											<label class="wpps-gradient-loc-label"><?php esc_html_e( 'Location', 'wp-powersuite' ); ?></label>
											<input type="number" name="bg_gradient_pos1" class="wp-powersuite-advanced-setting small-text" data-setting-key="bg_gradient_pos1" value="<?php echo esc_attr( $bg_gradient_pos1 ); ?>" data-wpps-min="0" data-wpps-max="100" data-wpps-step="1" /> %
										</div>
										<div class="wpps-gradient-color-row">
											<label><?php esc_html_e( 'Color 2', 'wp-powersuite' ); ?></label>
											<input type="color" name="bg_gradient_color2" id="<?php echo esc_attr( $module_id ); ?>_bg_gradient_color2" value="<?php echo esc_attr( preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/', $bg_gradient_color2 ) ? ( strlen( $bg_gradient_color2 ) > 7 ? substr( $bg_gradient_color2, 0, 7 ) : $bg_gradient_color2 ) : '#e8e8e8' ); ?>" class="wp-powersuite-advanced-setting wpps-color-picker-circle" data-setting-key="bg_gradient_color2" />
											<div class="wpps-gradient-color-wrap">
												<input type="text" name="bg_gradient_color2" class="wpps-color-code-input regular-text wp-powersuite-advanced-setting" data-setting-key="bg_gradient_color2" data-color-input="<?php echo esc_attr( $module_id ); ?>_bg_gradient_color2" data-default-color="#e8e8e8" value="<?php echo esc_attr( preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/', $bg_gradient_color2 ) ? $bg_gradient_color2 : '#e8e8e8' ); ?>" style="width: 100px; padding-right: 25px;" placeholder="#e8e8e8" maxlength="9" />
												<button type="button" class="wpps-color-reset button-link" data-default-color="#e8e8e8"><span class="dashicons dashicons-undo" style="font-size: 16px; width: 16px; height: 16px;"></span></button>
											</div>
											<label class="wpps-gradient-loc-label"><?php esc_html_e( 'Location', 'wp-powersuite' ); ?></label>
											<input type="number" name="bg_gradient_pos2" class="wp-powersuite-advanced-setting small-text" data-setting-key="bg_gradient_pos2" value="<?php echo esc_attr( $bg_gradient_pos2 ); ?>" data-wpps-min="0" data-wpps-max="100" data-wpps-step="1" /> %
										</div>
									</div>
								</td>
							</tr>
							<tr class="wpps-csm-bg-image-row">
								<th scope="row"><label for="<?php echo esc_attr( $module_id ); ?>_bg_image_url"><?php esc_html_e( 'Background Image', 'wp-powersuite' ); ?></label></th>
								<td>
									<div id="<?php echo esc_attr( $module_id ); ?>_bg_preview" style="margin-bottom:8px;max-width:300px;min-height:80px;border:1px dashed #ccc;border-radius:4px;display:flex;align-items:center;justify-content:center;background:#f9f9f9;">
										<?php if ( $bg_image_url ) : ?>
											<img src="<?php echo esc_url( $bg_image_url ); ?>" alt="" style="max-width:100%;max-height:120px;object-fit:contain;">
										<?php else : ?>
											<span style="color:#999;"><?php esc_html_e( 'No image', 'wp-powersuite' ); ?></span>
										<?php endif; ?>
									</div>
									<input type="url" id="<?php echo esc_attr( $module_id ); ?>_bg_image_url" name="bg_image_url" class="wp-powersuite-advanced-setting regular-text" data-setting-key="bg_image_url" value="<?php echo esc_attr( $stored_bg_image_url ); ?>" placeholder="https://" style="max-width:480px;margin-bottom:8px;" />
									<input type="hidden" id="<?php echo esc_attr( $module_id ); ?>_bg_image_id" name="bg_image_id" class="wp-powersuite-advanced-setting" data-setting-key="bg_image_id" value="<?php echo esc_attr( (string) ( $settings['bg_image_id'] ?? 0 ) ); ?>">
									<button type="button" class="button" id="<?php echo esc_attr( $module_id ); ?>_upload_bg"><?php esc_html_e( 'Select from Library', 'wp-powersuite' ); ?></button>
									<button type="button" class="button" id="<?php echo esc_attr( $module_id ); ?>_remove_bg" style="<?php echo $bg_image_url ? '' : 'display:none;'; ?>"><?php esc_html_e( 'Remove', 'wp-powersuite' ); ?></button>
									<p class="description"><?php esc_html_e( 'Paste an image URL or pick from the Media Library.', 'wp-powersuite' ); ?></p>
								</td>
							</tr>
							<tr class="wpps-csm-bg-image-row">
								<th scope="row"><label for="<?php echo esc_attr( $module_id ); ?>_bg_image_position"><?php esc_html_e( 'Image Position', 'wp-powersuite' ); ?></label></th>
								<td>
									<select id="<?php echo esc_attr( $module_id ); ?>_bg_image_position" name="bg_image_position" class="wp-powersuite-advanced-setting" data-setting-key="bg_image_position">
										<?php
										$positions = [
											'center center' => __( 'Center', 'wp-powersuite' ),
											'top center'    => __( 'Top', 'wp-powersuite' ),
											'bottom center' => __( 'Bottom', 'wp-powersuite' ),
											'center left'   => __( 'Left', 'wp-powersuite' ),
											'center right'  => __( 'Right', 'wp-powersuite' ),
											'top left'      => __( 'Top Left', 'wp-powersuite' ),
											'top right'     => __( 'Top Right', 'wp-powersuite' ),
											'bottom left'   => __( 'Bottom Left', 'wp-powersuite' ),
											'bottom right'  => __( 'Bottom Right', 'wp-powersuite' ),
										];
										foreach ( $positions as $pos_val => $pos_label ) :
											?>
											<option value="<?php echo esc_attr( $pos_val ); ?>" <?php selected( $bg_image_position, $pos_val ); ?>><?php echo esc_html( $pos_label ); ?></option>
										<?php endforeach; ?>
									</select>
								</td>
							</tr>
							<tr class="wpps-csm-bg-image-row">
								<th scope="row"><label for="<?php echo esc_attr( $module_id ); ?>_bg_image_size"><?php esc_html_e( 'Image Size', 'wp-powersuite' ); ?></label></th>
								<td>
									<select id="<?php echo esc_attr( $module_id ); ?>_bg_image_size" name="bg_image_size" class="wp-powersuite-advanced-setting" data-setting-key="bg_image_size">
										<option value="cover" <?php selected( $bg_image_size, 'cover' ); ?>><?php esc_html_e( 'Cover', 'wp-powersuite' ); ?></option>
										<option value="contain" <?php selected( $bg_image_size, 'contain' ); ?>><?php esc_html_e( 'Contain', 'wp-powersuite' ); ?></option>
										<option value="auto" <?php selected( $bg_image_size, 'auto' ); ?>><?php esc_html_e( 'Auto', 'wp-powersuite' ); ?></option>
									</select>
								</td>
							</tr>
							<tr class="wpps-csm-bg-image-row">
								<th scope="row"><label for="<?php echo esc_attr( $module_id ); ?>_bg_image_repeat"><?php esc_html_e( 'Image Repeat', 'wp-powersuite' ); ?></label></th>
								<td>
									<select id="<?php echo esc_attr( $module_id ); ?>_bg_image_repeat" name="bg_image_repeat" class="wp-powersuite-advanced-setting" data-setting-key="bg_image_repeat">
										<option value="no-repeat" <?php selected( $bg_image_repeat, 'no-repeat' ); ?>><?php esc_html_e( 'No repeat', 'wp-powersuite' ); ?></option>
										<option value="repeat" <?php selected( $bg_image_repeat, 'repeat' ); ?>><?php esc_html_e( 'Repeat', 'wp-powersuite' ); ?></option>
										<option value="repeat-x" <?php selected( $bg_image_repeat, 'repeat-x' ); ?>><?php esc_html_e( 'Repeat X', 'wp-powersuite' ); ?></option>
										<option value="repeat-y" <?php selected( $bg_image_repeat, 'repeat-y' ); ?>><?php esc_html_e( 'Repeat Y', 'wp-powersuite' ); ?></option>
									</select>
								</td>
							</tr>
							<tr class="wpps-csm-bg-image-row">
								<th scope="row"><label for="<?php echo esc_attr( $module_id ); ?>_bg_image_overlay_color"><?php esc_html_e( 'Image Overlay', 'wp-powersuite' ); ?></label></th>
								<td>
									<div class="wpps-color-field-row">
										<?php
										$img_ov_color_val = preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/', $bg_image_overlay_color ) ? ( strlen( $bg_image_overlay_color ) > 7 ? substr( $bg_image_overlay_color, 0, 7 ) : $bg_image_overlay_color ) : '#000000';
										$img_ov_color_hex = preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/', $bg_image_overlay_color ) ? $bg_image_overlay_color : '#000000';
										?>
										<input type="color" id="<?php echo esc_attr( $module_id ); ?>_bg_image_overlay_color" name="bg_image_overlay_color" value="<?php echo esc_attr( $img_ov_color_val ); ?>" class="wp-powersuite-advanced-setting wpps-color-picker-circle" data-setting-key="bg_image_overlay_color" />
										<div class="wpps-color-code-wrap">
											<input type="text" class="wpps-color-code-input regular-text wp-powersuite-advanced-setting" data-setting-key="bg_image_overlay_color" data-color-input="<?php echo esc_attr( $module_id ); ?>_bg_image_overlay_color" data-default-color="#000000" value="<?php echo esc_attr( $img_ov_color_hex ); ?>" style="width: 100px; padding-right: 25px;" placeholder="#000000" maxlength="9" />
											<button type="button" class="wpps-color-reset button-link" data-default-color="#000000"><span class="dashicons dashicons-undo" style="font-size: 16px; width: 16px; height: 16px;"></span></button>
										</div>
									</div>
									<div class="wpps-box-shadow-opacity-row" style="margin-top: 10px;">
										<label class="wpps-overlay-opacity-label"><?php esc_html_e( 'Opacity', 'wp-powersuite' ); ?></label>
										<input type="range" class="wpps-bg-overlay-opacity" min="0" max="100" value="<?php echo esc_attr( $bg_image_overlay_opacity ); ?>" aria-label="<?php esc_attr_e( 'Overlay opacity', 'wp-powersuite' ); ?>" />
										<input type="number" id="<?php echo esc_attr( $module_id ); ?>_bg_image_overlay_opacity" name="bg_image_overlay_opacity" class="wp-powersuite-advanced-setting wpps-bg-overlay-opacity-num" data-setting-key="bg_image_overlay_opacity" value="<?php echo esc_attr( $bg_image_overlay_opacity ); ?>" data-wpps-min="0" data-wpps-max="100" data-wpps-step="1" aria-label="<?php esc_attr_e( 'Overlay opacity percent', 'wp-powersuite' ); ?>" />
										<span class="wpps-box-shadow-unit">%</span>
									</div>
									<p class="description"><?php esc_html_e( '0 = no overlay, 100 = solid.', 'wp-powersuite' ); ?></p>
								</td>
							</tr>
							<tr class="wpps-csm-bg-video-row">
								<th scope="row"><label for="<?php echo esc_attr( $module_id ); ?>_bg_video"><?php esc_html_e( 'Background Video URL', 'wp-powersuite' ); ?></label></th>
								<td>
									<input type="url" id="<?php echo esc_attr( $module_id ); ?>_bg_video" name="bg_video" class="wp-powersuite-advanced-setting regular-text" data-setting-key="bg_video" value="<?php echo esc_attr( $bg_video ); ?>" placeholder="https://" style="max-width:400px;" />
									<p class="description"><?php esc_html_e( 'URL to an MP4 or WebM video. Loops as full-screen background (muted, no sound).', 'wp-powersuite' ); ?></p>
								</td>
							</tr>
							<tr class="wpps-csm-bg-video-row">
								<th scope="row"><label for="<?php echo esc_attr( $module_id ); ?>_bg_video_overlay_color"><?php esc_html_e( 'Video Overlay', 'wp-powersuite' ); ?></label></th>
								<td>
									<div class="wpps-color-field-row">
										<?php
										$vid_ov_color_val = preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/', $bg_video_overlay_color ) ? ( strlen( $bg_video_overlay_color ) > 7 ? substr( $bg_video_overlay_color, 0, 7 ) : $bg_video_overlay_color ) : '#000000';
										$vid_ov_color_hex = preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/', $bg_video_overlay_color ) ? $bg_video_overlay_color : '#000000';
										?>
										<input type="color" id="<?php echo esc_attr( $module_id ); ?>_bg_video_overlay_color" name="bg_video_overlay_color" value="<?php echo esc_attr( $vid_ov_color_val ); ?>" class="wp-powersuite-advanced-setting wpps-color-picker-circle" data-setting-key="bg_video_overlay_color" />
										<div class="wpps-color-code-wrap">
											<input type="text" class="wpps-color-code-input regular-text wp-powersuite-advanced-setting" data-setting-key="bg_video_overlay_color" data-color-input="<?php echo esc_attr( $module_id ); ?>_bg_video_overlay_color" data-default-color="#000000" value="<?php echo esc_attr( $vid_ov_color_hex ); ?>" style="width: 100px; padding-right: 25px;" placeholder="#000000" maxlength="9" />
											<button type="button" class="wpps-color-reset button-link" data-default-color="#000000"><span class="dashicons dashicons-undo" style="font-size: 16px; width: 16px; height: 16px;"></span></button>
										</div>
									</div>
									<div class="wpps-box-shadow-opacity-row" style="margin-top: 10px;">
										<label class="wpps-overlay-opacity-label"><?php esc_html_e( 'Opacity', 'wp-powersuite' ); ?></label>
										<input type="range" class="wpps-bg-overlay-opacity" min="0" max="100" value="<?php echo esc_attr( $bg_video_overlay_opacity ); ?>" aria-label="<?php esc_attr_e( 'Overlay opacity', 'wp-powersuite' ); ?>" />
										<input type="number" id="<?php echo esc_attr( $module_id ); ?>_bg_video_overlay_opacity" name="bg_video_overlay_opacity" class="wp-powersuite-advanced-setting wpps-bg-overlay-opacity-num" data-setting-key="bg_video_overlay_opacity" value="<?php echo esc_attr( $bg_video_overlay_opacity ); ?>" data-wpps-min="0" data-wpps-max="100" data-wpps-step="1" aria-label="<?php esc_attr_e( 'Overlay opacity percent', 'wp-powersuite' ); ?>" />
										<span class="wpps-box-shadow-unit">%</span>
									</div>
									<p class="description"><?php esc_html_e( '0 = no overlay, 100 = solid.', 'wp-powersuite' ); ?></p>
								</td>
							</tr>
							<tr class="wpps-csm-bg-patterns-row">
								<th scope="row"><?php esc_html_e( 'Pattern', 'wp-powersuite' ); ?></th>
								<td>
									<div class="wpps-csm-pattern-grid">
										<?php
										$patterns = [
											'lines'   => __( 'Lines', 'wp-powersuite' ),
											'stripes' => __( 'Stripes', 'wp-powersuite' ),
											'curves'  => __( 'Curves', 'wp-powersuite' ),
										];
										foreach ( $patterns as $pat_key => $pat_label ) :
											?>
											<label class="wpps-csm-pattern-option <?php echo $bg_pattern === $pat_key ? 'is-selected' : ''; ?>">
												<input type="radio" name="bg_pattern" class="wp-powersuite-advanced-setting" data-setting-key="bg_pattern" value="<?php echo esc_attr( $pat_key ); ?>" <?php checked( $bg_pattern, $pat_key ); ?>>
												<span class="wpps-csm-pattern-preview" data-pattern="<?php echo esc_attr( $pat_key ); ?>" title="<?php echo esc_attr( $pat_label ); ?>"></span>
												<span class="wpps-csm-pattern-label"><?php echo esc_html( $pat_label ); ?></span>
											</label>
										<?php endforeach; ?>
									</div>
								</td>
							</tr>
							<tr class="wpps-csm-bg-patterns-row">
								<th scope="row"><label for="<?php echo esc_attr( $module_id ); ?>_bg_pattern_overlay_color"><?php esc_html_e( 'Pattern Overlay', 'wp-powersuite' ); ?></label></th>
								<td>
									<div class="wpps-color-field-row">
										<?php
										$pat_ov_color_val = preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/', $bg_pattern_overlay_color ) ? ( strlen( $bg_pattern_overlay_color ) > 7 ? substr( $bg_pattern_overlay_color, 0, 7 ) : $bg_pattern_overlay_color ) : '#000000';
										$pat_ov_color_hex = preg_match( '/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$/', $bg_pattern_overlay_color ) ? $bg_pattern_overlay_color : '#000000';
										?>
										<input type="color" id="<?php echo esc_attr( $module_id ); ?>_bg_pattern_overlay_color" name="bg_pattern_overlay_color" value="<?php echo esc_attr( $pat_ov_color_val ); ?>" class="wp-powersuite-advanced-setting wpps-color-picker-circle" data-setting-key="bg_pattern_overlay_color" />
										<div class="wpps-color-code-wrap">
											<input type="text" class="wpps-color-code-input regular-text wp-powersuite-advanced-setting" data-setting-key="bg_pattern_overlay_color" data-color-input="<?php echo esc_attr( $module_id ); ?>_bg_pattern_overlay_color" data-default-color="#000000" value="<?php echo esc_attr( $pat_ov_color_hex ); ?>" style="width: 100px; padding-right: 25px;" placeholder="#000000" maxlength="9" />
											<button type="button" class="wpps-color-reset button-link" data-default-color="#000000"><span class="dashicons dashicons-undo" style="font-size: 16px; width: 16px; height: 16px;"></span></button>
										</div>
									</div>
									<div class="wpps-box-shadow-opacity-row" style="margin-top: 10px;">
										<label class="wpps-overlay-opacity-label"><?php esc_html_e( 'Opacity', 'wp-powersuite' ); ?></label>
										<input type="range" class="wpps-bg-overlay-opacity" min="0" max="100" value="<?php echo esc_attr( $bg_pattern_overlay_opacity ); ?>" aria-label="<?php esc_attr_e( 'Overlay opacity', 'wp-powersuite' ); ?>" />
										<input type="number" id="<?php echo esc_attr( $module_id ); ?>_bg_pattern_overlay_opacity" name="bg_pattern_overlay_opacity" class="wp-powersuite-advanced-setting wpps-bg-overlay-opacity-num" data-setting-key="bg_pattern_overlay_opacity" value="<?php echo esc_attr( $bg_pattern_overlay_opacity ); ?>" data-wpps-min="0" data-wpps-max="100" data-wpps-step="1" aria-label="<?php esc_attr_e( 'Overlay opacity percent', 'wp-powersuite' ); ?>" />
										<span class="wpps-box-shadow-unit">%</span>
									</div>
									<p class="description"><?php esc_html_e( '0 = no overlay, 100 = solid.', 'wp-powersuite' ); ?></p>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
				<?php require __DIR__ . '/views/design-panel.php'; ?>
				<div class="wp-powersuite-settings__card wpps-csm-coming-soon-only">
					<h2 class="wp-powersuite-settings__card-title"><?php esc_html_e( 'Social Links', 'wp-powersuite' ); ?></h2>
					<p class="description"><?php esc_html_e( 'Add social media links. Click the icon to change it. Drag to reorder.', 'wp-powersuite' ); ?></p>
					<textarea id="<?php echo esc_attr( $module_id ); ?>_social_links" name="social_links" class="wp-powersuite-advanced-setting" data-setting-key="social_links" style="display:none;"><?php echo esc_textarea( wp_json_encode( $social_links ) ); ?></textarea>
					<div id="<?php echo esc_attr( $module_id ); ?>_social_links_list" class="wpps-csm-social-links-list">
						<?php
						if ( empty( $social_links ) ) :
							?>
							<div class="wpps-csm-social-empty"><?php esc_html_e( 'No links yet. Click "Add Link" to add one.', 'wp-powersuite' ); ?></div>
						<?php else : ?>
							<?php foreach ( $social_links as $idx => $item ) : ?>
								<?php
								$item_icon = isset( $item['icon'] ) && array_key_exists( $item['icon'], $social_icons ) ? $item['icon'] : 'link';
								$item_url  = isset( $item['url'] ) ? esc_url( $item['url'] ) : '';
								?>
								<div class="wpps-csm-social-row" data-icon="<?php echo esc_attr( $item_icon ); ?>" data-url="<?php echo esc_attr( $item_url ); ?>">
									<div class="wpps-csm-social-row-icon-wrap">
										<button type="button" class="wpps-csm-social-row-icon-trigger" title="<?php echo esc_attr( $social_icons[ $item_icon ] ?? __( 'Change icon', 'wp-powersuite' ) ); ?>"><?php echo \ComingSoonMaintenance\Module::getSocialIconFa( $item_icon ); ?></button>
										<div class="wpps-csm-social-icon-dropdown" role="listbox">
											<?php foreach ( $social_icons as $icon_key => $icon_label ) : ?>
												<button type="button" class="wpps-csm-social-icon-btn" data-icon="<?php echo esc_attr( $icon_key ); ?>" title="<?php echo esc_attr( $icon_label ); ?>"><?php echo \ComingSoonMaintenance\Module::getSocialIconFa( $icon_key ); ?></button>
											<?php endforeach; ?>
										</div>
									</div>
									<div class="wpps-csm-social-row-url">
										<input type="url" class="regular-text" value="<?php echo esc_attr( $item_url ); ?>" placeholder="https://..." />
									</div>
									<button type="button" class="wpps-csm-social-remove button-link" aria-label="<?php esc_attr_e( 'Remove', 'wp-powersuite' ); ?>"><span class="dashicons dashicons-no-alt"></span></button>
								</div>
							<?php endforeach; ?>
						<?php endif; ?>
					</div>
					<button type="button" class="button wpps-csm-social-add" id="<?php echo esc_attr( $module_id ); ?>_social_add"><?php esc_html_e( 'Add Link', 'wp-powersuite' ); ?></button>
				</div>
			</div>

			<div class="wpps-csm-panel wpps-csm-panel-subscribers" data-panel="subscribers" <?php echo ( $use_existing_page || ( $settings['mode'] ?? 'coming_soon' ) === 'maintenance' ) ? ' style="display:none;"' : ''; ?>>
				<div class="wp-powersuite-settings__card">
					<h2 class="wp-powersuite-settings__card-title"><?php esc_html_e( 'Email Subscribers', 'wp-powersuite' ); ?></h2>
					<?php /* translators: 1: number, 1: number. */ ?>
					<p class="description"><?php echo esc_html( sprintf( _n( '%1$d subscriber from the coming soon signup form.', '%1$d subscribers from the coming soon signup form.', count( $subscribers_with_meta ), 'wp-powersuite' ), count( $subscribers_with_meta ) ) ); ?></p>
					<?php if ( empty( $subscribers_with_meta ) ) : ?>
						<p class="wpps-csm-subscribers-empty"><?php esc_html_e( 'No subscribers yet. Emails will appear here when visitors sign up via the coming soon page.', 'wp-powersuite' ); ?></p>
					<?php else : ?>
						<div class="wpps-csm-subscribers-table-wrap">
							<table class="wp-list-table widefat fixed striped wpps-csm-subscribers-table">
								<thead>
									<tr>
										<th scope="col" class="column-email"><?php esc_html_e( 'Email', 'wp-powersuite' ); ?></th>
										<th scope="col" class="column-date"><?php esc_html_e( 'Subscribed', 'wp-powersuite' ); ?></th>
										<th scope="col" class="column-ip"><?php esc_html_e( 'IP Address', 'wp-powersuite' ); ?></th>
										<th scope="col" class="column-user-agent"><?php esc_html_e( 'User Agent', 'wp-powersuite' ); ?></th>
									</tr>
								</thead>
								<tbody>
									<?php foreach ( array_reverse( $subscribers_with_meta ) as $row ) : ?>
										<tr>
											<td class="column-email"><a href="mailto:<?php echo esc_attr( $row['email'] ); ?>"><?php echo esc_html( $row['email'] ); ?></a></td>
											<td class="column-date"><?php echo $row['subscribed_at'] ? esc_html( wp_date( get_option( 'date_format' ) . ' ' . get_option( 'time_format' ), strtotime( $row['subscribed_at'] ) ) ) : '—'; ?></td>
											<td class="column-ip"><code><?php echo $row['ip'] ? esc_html( $row['ip'] ) : '—'; ?></code></td>
											<td class="column-user-agent" title="<?php echo $row['user_agent'] ? esc_attr( $row['user_agent'] ) : ''; ?>"><?php echo $row['user_agent'] ? esc_html( wp_html_excerpt( $row['user_agent'], 60 ) ) : '—'; ?></td>
										</tr>
									<?php endforeach; ?>
								</tbody>
							</table>
						</div>
						<p class="description" style="margin-top:12px;">
							<button type="button" class="button" id="<?php echo esc_attr( $module_id ); ?>_export_subscribers"><?php esc_html_e( 'Export CSV', 'wp-powersuite' ); ?></button>
						</p>
					<?php endif; ?>
				</div>
			</div>

			<div class="wpps-csm-panel" data-panel="advanced">
				<div class="wp-powersuite-settings__card">
					<h2 class="wp-powersuite-settings__card-title"><?php esc_html_e( 'Bypass Access', 'wp-powersuite' ); ?></h2>
					<p class="description"><?php esc_html_e( 'Administrators always bypass. Add roles or user IDs below.', 'wp-powersuite' ); ?></p>
					<table class="form-table">
						<tbody>
							<tr>
								<th scope="row"><?php esc_html_e( 'Allowed Roles', 'wp-powersuite' ); ?></th>
								<td>
									<?php foreach ( $roles as $slug => $name ) : ?>
										<?php if ( $slug === 'administrator' ) continue; ?>
										<label style="display:inline-block;margin-right:16px;margin-bottom:6px;">
											<input type="checkbox" name="allowed_roles_<?php echo esc_attr( $slug ); ?>" class="wp-powersuite-advanced-setting" data-setting-key="allowed_roles.<?php echo esc_attr( $slug ); ?>" value="1" <?php checked( ! empty( $settings['allowed_roles'][ $slug ] ) ); ?>>
											<?php echo esc_html( translate_user_role( $name ) ); ?>
										</label>
									<?php endforeach; ?>
								</td>
							</tr>
							<tr>
								<th scope="row"><label for="<?php echo esc_attr( $module_id ); ?>_allowed_users_trigger"><?php esc_html_e( 'Allowed User IDs', 'wp-powersuite' ); ?></label></th>
								<td>
									<div class="wpps-csm-user-multiselect" id="<?php echo esc_attr( $module_id ); ?>_allowed_users_ms">
										<button type="button" class="wpps-csm-user-multiselect__trigger" id="<?php echo esc_attr( $module_id ); ?>_allowed_users_trigger" aria-expanded="false" aria-haspopup="listbox" aria-controls="<?php echo esc_attr( $module_id ); ?>_allowed_users_dropdown">
											<?php /* translators: 1: number, 2: number. */ ?>
											<span class="wpps-csm-user-multiselect__trigger-text"><?php echo esc_html( empty( $allowed_user_ids ) ? __( 'Select users...', 'wp-powersuite' ) : sprintf( _n( '%d user selected', '%d users selected', count( $allowed_user_ids ), 'wp-powersuite' ), count( $allowed_user_ids ) ) ); ?></span>
											<span class="dashicons dashicons-arrow-down-alt2 wpps-csm-user-multiselect__chevron"></span>
										</button>
										<div class="wpps-csm-user-multiselect__dropdown" id="<?php echo esc_attr( $module_id ); ?>_allowed_users_dropdown" role="listbox" hidden>
											<input type="text" class="wpps-csm-user-multiselect__search" placeholder="<?php esc_attr_e( 'Search by name or email...', 'wp-powersuite' ); ?>" autocomplete="off">
											<div class="wpps-csm-user-multiselect__actions">
												<button type="button" class="wpps-csm-user-multiselect__action" data-action="clear"><?php esc_html_e( 'Clear all', 'wp-powersuite' ); ?></button>
											</div>
											<div class="wpps-csm-user-multiselect__results"></div>
											<div class="wpps-csm-user-multiselect__loading" style="display:none;padding:12px;color:#646970;font-size:13px;"><?php esc_html_e( 'Loading...', 'wp-powersuite' ); ?></div>
											<div class="wpps-csm-user-multiselect__hint" style="padding:12px;color:#a7aaad;font-size:12px;"><?php esc_html_e( 'Type to search users.', 'wp-powersuite' ); ?></div>
										</div>
										<input type="hidden" id="<?php echo esc_attr( $module_id ); ?>_allowed_user_ids" name="allowed_user_ids" class="wp-powersuite-advanced-setting" data-setting-key="allowed_user_ids" value="<?php echo esc_attr( implode( "\n", $allowed_user_ids ) ); ?>">
										<div class="wpps-csm-user-multiselect__selected" id="<?php echo esc_attr( $module_id ); ?>_allowed_users_list">
											<?php foreach ( $allowed_users as $uid => $u ) : ?>
												<span class="wpps-csm-user-tag" data-user-id="<?php echo esc_attr( (string) $uid ); ?>">
													<span class="wpps-csm-user-tag-name"><?php echo esc_html( $u['display_name'] ); ?></span>
													<span class="wpps-csm-user-tag-remove" role="button" tabindex="0" aria-label="<?php esc_attr_e( 'Remove', 'wp-powersuite' ); ?>">&times;</span>
												</span>
											<?php endforeach; ?>
										</div>
									</div>
									<p class="description"><?php esc_html_e( 'Search and select users who can bypass the coming soon page.', 'wp-powersuite' ); ?></p>
								</td>
							</tr>
							<tr>
								<th scope="row"><?php esc_html_e( 'Bypass URL', 'wp-powersuite' ); ?></th>
								<td>
									<code id="<?php echo esc_attr( $module_id ); ?>_bypass_url" class="wpps-csm-bypass-url"><?php echo esc_html( $bypass_url ); ?></code>
									<p class="description"><?php esc_html_e( 'Share this link for testing. Visiting it sets a 48-hour bypass cookie in the browser.', 'wp-powersuite' ); ?></p>
									<p>
										<button type="button" class="button button-secondary" id="<?php echo esc_attr( $module_id ); ?>_regenerate_bypass"><?php esc_html_e( 'Regenerate bypass link', 'wp-powersuite' ); ?></button>
										<span id="<?php echo esc_attr( $module_id ); ?>_regenerate_bypass_msg" class="description" aria-live="polite"></span>
									</p>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="wp-powersuite-settings__card">
					<h2 class="wp-powersuite-settings__card-title"><?php esc_html_e( 'Excluded URLs', 'wp-powersuite' ); ?></h2>
					<p class="description"><?php esc_html_e( 'Paths that bypass the coming soon page. One path per line.', 'wp-powersuite' ); ?></p>
					<?php if ( $has_woocommerce ) : ?>
						<p>
							<label>
								<input type="hidden" name="exclude_woocommerce" class="wp-powersuite-advanced-setting" data-setting-key="exclude_woocommerce" value="0">
								<input type="checkbox" name="exclude_woocommerce" class="wp-powersuite-advanced-setting" data-setting-key="exclude_woocommerce" value="1" <?php checked( ! empty( $settings['exclude_woocommerce'] ) ); ?>>
								<?php esc_html_e( 'Exclude WooCommerce cart, checkout, and account pages', 'wp-powersuite' ); ?>
							</label>
						</p>
					<?php endif; ?>
					<textarea id="<?php echo esc_attr( $module_id ); ?>_exclude_urls" name="exclude_urls" class="wp-powersuite-advanced-setting large-text code" data-setting-key="exclude_urls" rows="3" placeholder="/api/&#10;/webhook/" style="width:100%;"><?php echo esc_textarea( $settings['exclude_urls'] ?? '' ); ?></textarea>
				</div>
				<div class="wp-powersuite-hfc-settings wpps-csm-custom-design-only" style="margin-bottom: 20px;<?php echo $use_existing_page ? ' display:none;' : ''; ?>">
					<h2 class="wpps-csm-section-title" style="margin-top: 0;"><?php esc_html_e( 'Custom Code', 'wp-powersuite' ); ?></h2>
					<p class="wpps-csm-section-desc" style="margin-bottom: 16px;"><?php esc_html_e( 'Add custom head code and CSS for the coming soon page.', 'wp-powersuite' ); ?></p>
					<table class="form-table" role="presentation">
						<tbody>
							<tr>
								<th scope="row">
									<label for="<?php echo esc_attr( $module_id ); ?>_custom_head"><?php esc_html_e( 'Custom Head Code', 'wp-powersuite' ); ?></label>
								</th>
								<td>
									<p class="description" style="margin-bottom: 8px;">
										<?php esc_html_e( 'Optional: analytics, meta tags, etc. Output in &lt;head&gt;.', 'wp-powersuite' ); ?>
									</p>
									<div class="wp-powersuite-hfc-panel">
										<textarea
											id="<?php echo esc_attr( $module_id ); ?>_custom_head"
											name="custom_head"
											class="large-text wp-powersuite-advanced-setting code wp-powersuite-hfc-editor wpps-csm-code-editor"
											data-setting-key="custom_head"
											data-codemirror-mode="htmlmixed"
											rows="10"
											placeholder="<?php esc_attr_e( '<!-- e.g. Google Analytics, meta verification -->', 'wp-powersuite' ); ?>"
										><?php echo esc_textarea( $settings['custom_head'] ?? '' ); ?></textarea>
									</div>
								</td>
							</tr>
							<tr>
								<th scope="row">
									<label for="<?php echo esc_attr( $module_id ); ?>_custom_css"><?php esc_html_e( 'Custom CSS', 'wp-powersuite' ); ?></label>
								</th>
								<td>
									<p class="description" style="margin-bottom: 8px;">
										<?php esc_html_e( 'Advanced styles only — use Background and Design settings for colors, layout, and typography colors. Custom CSS is for effects that have no setting (cards, animations, decorative borders, font families).', 'wp-powersuite' ); ?>
									</p>
									<div class="wp-powersuite-hfc-panel">
										<textarea
											id="<?php echo esc_attr( $module_id ); ?>_custom_css"
											name="custom_css"
											class="large-text wp-powersuite-advanced-setting code wp-powersuite-hfc-editor wpps-csm-code-editor"
											data-setting-key="custom_css"
											data-codemirror-mode="css"
											rows="10"
											placeholder="<?php esc_attr_e( '/* Add custom CSS here */', 'wp-powersuite' ); ?>"
										><?php echo esc_textarea( $settings['custom_css'] ?? '' ); ?></textarea>
									</div>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>

			<div class="wpps-csm-submit-wrap">
				<button type="button" class="button button-primary wp-powersuite-custom-page-save" data-module-id="<?php echo esc_attr( $module_id ); ?>">
					<?php esc_html_e( 'Save Settings', 'wp-powersuite' ); ?>
				</button>
			</div>
		</form>
	</div>
</div>

<script type="text/javascript">
(function() {
	var mid = '<?php echo esc_js( $module_id ); ?>';
	function markWysiwygTextareas() {
		['heading', 'description'].forEach(function(key) {
			var ta = document.getElementById(mid + '_' + key);
			if (ta) {
				ta.classList.add('wp-powersuite-advanced-setting');
				ta.setAttribute('data-setting-key', key);
			}
		});
	}
	var csmCodeEditors = [];
	function syncWysiwygBeforeSave() {
		if (typeof tinymce !== 'undefined') {
			['heading', 'description'].forEach(function(key) {
				var ed = tinymce.get(mid + '_' + key);
				if (ed) ed.save();
			});
		}
		csmCodeEditors.forEach(function(ed) {
			if (ed && ed.codemirror) ed.codemirror.save();
		});
		syncSocialLinks();
	}
	function syncSocialLinks() {
		var list = document.getElementById(mid + '_social_links_list');
		var hidden = document.getElementById(mid + '_social_links');
		if (!list || !hidden) return;
		var rows = list.querySelectorAll('.wpps-csm-social-row');
		var arr = [];
		rows.forEach(function(row) {
			var icon = row.getAttribute('data-icon') || 'link';
			var urlInp = row.querySelector('.wpps-csm-social-row-url input');
			var url = urlInp ? urlInp.value.trim() : '';
			if (url) arr.push({ icon: icon, url: url });
		});
		hidden.value = JSON.stringify(arr);
	}
	function initCodeEditors() {
		if (typeof wp === 'undefined' || !wp.codeEditor) return;
		var tas = document.querySelectorAll('.wpps-csm-code-editor');
		tas.forEach(function(ta) {
			var mode = ta.getAttribute('data-codemirror-mode') || 'htmlmixed';
			try {
				var ed = wp.codeEditor.initialize(ta, {
					codemirror: {
						mode: mode,
						lineNumbers: true,
						lineWrapping: true,
						styleActiveLine: true
					}
				});
				if (ed) csmCodeEditors.push(ed);
			} catch (e) {}
		});
	}
	function init() {
		if (typeof jQuery === 'undefined' || typeof wp === 'undefined' || typeof wp.media === 'undefined') {
			setTimeout(init, 100);
			return;
		}
		var $ = jQuery;
		markWysiwygTextareas();
		if (wp.codeEditor) {
			requestAnimationFrame(initCodeEditors);
		} else {
			setTimeout(function() { if (wp.codeEditor) initCodeEditors(); }, 300);
		}
		if (window.wpPowerSuite) {
			window.wpPowerSuite.syncModuleSettingsBeforeSave = window.wpPowerSuite.syncModuleSettingsBeforeSave || {};
			window.wpPowerSuite.syncModuleSettingsBeforeSave[mid] = syncWysiwygBeforeSave;
		}
		window.wppsCsmCodeEditors = csmCodeEditors;
		document.dispatchEvent(new CustomEvent('wppsCsmAdminReady'));
		function toggleMode() {
			var m = $('input[name="mode"]:checked').val();
			$('.wpps-csm-coming-soon-only').toggle(m === 'coming_soon');
			var use = $('#' + mid + '_use_existing_page').is(':checked');
			var showSubs = m === 'coming_soon' && !use;
			$('.wpps-csm-tab-subscribers').toggle(showSubs);
			$('.wpps-csm-panel-subscribers').toggle(showSubs);
			if (typeof window.wppsFilterCsmPagePresets === 'function') {
				window.wppsFilterCsmPagePresets(document.querySelector('.wpps-csm-page'), m);
			}
		}
		function toggleBgType(val) {
			var $table = $('#' + mid + '_bg_table');
			$table.removeClass('wpps-csm-bg-type-color wpps-csm-bg-type-gradient wpps-csm-bg-type-image wpps-csm-bg-type-video wpps-csm-bg-type-patterns');
			if (val) $table.addClass('wpps-csm-bg-type-' + val);
			$('#' + mid + '_bg_type').val(val || '');
			$('.wpps-csm-bg-type-icons .wpps-bg-type-btn').removeClass('is-active');
			$('.wpps-csm-bg-type-icons .wpps-bg-type-btn[data-bg-type="' + val + '"]').addClass('is-active');
			$('.wpps-csm-bg-type-icons .wpps-bg-type-reset').toggleClass('wpps-reset-hidden', val === 'gradient');
		}
		function toggleLogo() {
			var show = $('#' + mid + '_show_logo').is(':checked');
			$('#' + mid + '_logo_wrap').toggle(show);
		}
		function toggleLogoSource() {
			var src = $('#' + mid + '_logo_source').val();
			$('.wpps-csm-logo-upload-row').toggle(src === 'upload' || src === 'url');
		}
		function getLogoPreviewMaxWidth() {
			var desktop = parseInt($('#' + mid + '_logo_width_desktop').val(), 10);
			if (!desktop || desktop < 40) {
				desktop = 180;
			}
			return Math.max(40, Math.min(600, desktop));
		}
		function updateLogoPreviewSize() {
			$('#' + mid + '_logo_preview img').css('max-width', getLogoPreviewMaxWidth() + 'px');
		}
		window.wppsCsmGetLogoPreviewMaxWidth = getLogoPreviewMaxWidth;
		function toggleLogoBgRows() {
			var on = $('#' + mid + '_logo_bg_enabled').is(':checked');
			$('.wpps-csm-logo-bg-row').toggle(on);
		}
		window.wppsCsmToggleBgType = toggleBgType;
		window.wppsCsmToggleLogo = toggleLogo;
		window.wppsCsmToggleLogoSource = toggleLogoSource;
		window.wppsCsmToggleMode = toggleMode;
		window.wppsCsmApplySocialLinks = function(links) {
			$('#' + mid + '_social_links_list').empty();
			if (!links || !links.length) {
				$('#' + mid + '_social_links_list').html('<div class="wpps-csm-social-empty"><?php echo esc_js( __( 'No links yet. Click "Add Link" to add one.', 'wp-powersuite' ) ); ?></div>');
				syncSocialLinks();
				return;
			}
			links.forEach(function(item) {
				addSocialRow(item.icon || 'link', item.url || '');
			});
			syncSocialLinks();
		};
		function toggleUseExistingPage() {
			var use = $('#' + mid + '_use_existing_page').is(':checked');
			$('.wpps-csm-existing-page-row').toggle(use);
			$('.wpps-csm-custom-design-row').toggle(!use);
			$('.wpps-csm-custom-design-only').toggle(!use);
			var m = $('input[name="mode"]:checked').val();
			$('.wpps-csm-tab-appearance').toggle(!use);
			$('.wpps-csm-tab-subscribers').toggle(!use && m === 'coming_soon');
			var $panels = $('.wpps-csm-panel-appearance, .wpps-csm-panel-subscribers');
			if (use) {
				$panels.css('display', 'none');
			} else {
				$('.wpps-csm-panel-appearance').css('display', '');
				$('.wpps-csm-panel-subscribers').css('display', m === 'coming_soon' ? '' : 'none');
			}
		}
		$('input[name="mode"]').on('change', toggleMode);
		$('#' + mid + '_show_logo').on('change', toggleLogo);
		$('#' + mid + '_logo_source').on('change', toggleLogoSource);
		$('#' + mid + '_logo_bg_enabled').on('change', toggleLogoBgRows);
		$('#' + mid + '_logo_width_desktop, #' + mid + '_logo_width_tablet, #' + mid + '_logo_width_mobile').on('input change', updateLogoPreviewSize);
		$('.wpps-csm-page').on('click', '.wpps-device-icon', function() {
			var device = $(this).data('device');
			if (device !== 'mobile' && device !== 'tablet' && device !== 'desktop') return;
			var $row = $(this).closest('tr');
			if (!$row.length) return;
			$row.find('.wpps-device-icon').removeClass('is-active');
			$(this).addClass('is-active');
			var $container = $row.find('.wpps-logo-width-inputs');
			if (!$container.length) return;
			$container.find('.wpps-logo-width-wrap').hide();
			$container.find('.wpps-logo-width-' + device).css('display', 'inline-flex');
		});
		$('#' + mid + '_use_existing_page').on('change', toggleUseExistingPage);
		toggleMode();
		toggleLogo();
		toggleLogoSource();
		toggleLogoBgRows();
		toggleUseExistingPage();
		$('.wpps-csm-bg-type-icons').on('click', '.wpps-bg-type-btn', function() {
			var v = $(this).data('bg-type');
			if (v && ['color','gradient','image','video','patterns'].indexOf(v) !== -1) {
				toggleBgType(v);
			}
		});
		$('.wpps-csm-bg-type-icons').on('click', '.wpps-bg-type-reset', function() {
			toggleBgType('color');
		});
		$(document).off('click', '.wpps-color-reset').on('click', '.wpps-color-reset', function(e) {
			e.preventDefault();
			var $resetButton = $(this);
			var defaultColor = $resetButton.data('default-color');
			var $textInput = $resetButton.prev('.wpps-color-code-input');
			var colorInputId = $textInput.data('color-input');
			var $colorInput = $('#' + colorInputId);
			$textInput.val(defaultColor);
			$colorInput.val(defaultColor);
			$textInput.css('border-color', '');
			$textInput.trigger('change');
		});
		document.querySelectorAll('.wpps-bg-overlay-opacity-num').forEach(function(overlayNum) {
			var td = overlayNum.closest('td');
			var overlayRange = td ? td.querySelector('.wpps-bg-overlay-opacity') : null;
			if (overlayRange && !overlayRange.hasAttribute('data-wpps-overlay-bound')) {
				overlayRange.setAttribute('data-wpps-overlay-bound', '1');
				overlayRange.addEventListener('input', function() { overlayNum.value = overlayRange.value; });
				overlayRange.addEventListener('change', function() { overlayNum.value = overlayRange.value; });
				overlayNum.addEventListener('input', function() {
					var v = Math.max(0, Math.min(100, parseInt(overlayNum.value, 10) || 0));
					overlayRange.value = v;
					overlayNum.value = v;
				});
				overlayNum.addEventListener('change', function() {
					var v = Math.max(0, Math.min(100, parseInt(overlayNum.value, 10) || 0));
					overlayRange.value = v;
					overlayNum.value = v;
				});
			}
		});
		$('.wpps-csm-pattern-option').on('click', function() {
			$('.wpps-csm-pattern-option').removeClass('is-selected');
			$(this).addClass('is-selected');
		});
		var socialIcons = <?php echo wp_json_encode( array_keys( $social_icons ) ); ?>;
		var socialIconFa = <?php
			$fa_map = [];
			foreach ( array_keys( $social_icons ) as $k ) {
				$fa_map[ $k ] = \ComingSoonMaintenance\Module::getSocialIconFa( $k );
			}
			echo wp_json_encode( $fa_map );
		?>;
		function addSocialRow(icon, url) {
			icon = icon || 'link';
			url = url || '';
			$('#' + mid + '_social_links_list .wpps-csm-social-empty').remove();
			var iconGrid = '';
			socialIcons.forEach(function(ik) {
				iconGrid += '<button type="button" class="wpps-csm-social-icon-btn" data-icon="' + ik + '">' + (socialIconFa[ik] || '') + '</button>';
			});
			var row = $('<div class="wpps-csm-social-row" data-icon="' + icon + '" data-url="' + $('<div>').text(url).html() + '">' +
				'<div class="wpps-csm-social-row-icon-wrap">' +
				'<button type="button" class="wpps-csm-social-row-icon-trigger" title="<?php echo esc_js( __( 'Change icon', 'wp-powersuite' ) ); ?>">' + (socialIconFa[icon] || '') + '</button>' +
				'<div class="wpps-csm-social-icon-dropdown" role="listbox">' + iconGrid + '</div>' +
				'</div>' +
				'<div class="wpps-csm-social-row-url"><input type="url" class="regular-text" value="' + $('<div>').text(url).html() + '" placeholder="https://..." /></div>' +
				'<button type="button" class="wpps-csm-social-remove button-link" aria-label="<?php echo esc_js( __( 'Remove', 'wp-powersuite' ) ); ?>"><span class="dashicons dashicons-no-alt"></span></button>' +
				'</div>');
			$('#' + mid + '_social_links_list').append(row);
		}
		$('#' + mid + '_social_add').on('click', function() { addSocialRow(); });
		$('#' + mid + '_social_links_list').on('click', '.wpps-csm-social-remove', function() {
			$(this).closest('.wpps-csm-social-row').remove();
			if ($('#' + mid + '_social_links_list .wpps-csm-social-row').length === 0) {
				$('#' + mid + '_social_links_list').html('<div class="wpps-csm-social-empty"><?php echo esc_js( __( 'No links yet. Click "Add Link" to add one.', 'wp-powersuite' ) ); ?></div>');
			}
		});
		$('#' + mid + '_social_links_list').on('click', '.wpps-csm-social-row-icon-trigger', function(e) {
			e.stopPropagation();
			var $wrap = $(this).closest('.wpps-csm-social-row-icon-wrap');
			var $dropdown = $wrap.find('.wpps-csm-social-icon-dropdown');
			$('#' + mid + '_social_links_list .wpps-csm-social-icon-dropdown').not($dropdown).removeClass('is-open');
			$dropdown.toggleClass('is-open');
		});
		$('#' + mid + '_social_links_list').on('click', '.wpps-csm-social-icon-dropdown .wpps-csm-social-icon-btn', function(e) {
			e.stopPropagation();
			var icon = $(this).data('icon');
			var $row = $(this).closest('.wpps-csm-social-row');
			$row.attr('data-icon', icon);
			$row.find('.wpps-csm-social-row-icon-trigger').html(socialIconFa[icon] || '');
			$(this).closest('.wpps-csm-social-icon-dropdown').removeClass('is-open');
		});
		$(document).on('click', function() {
			$('#' + mid + '_social_links_list .wpps-csm-social-icon-dropdown').removeClass('is-open');
		});
		$('#' + mid + '_social_links_list').on('click', '.wpps-csm-social-icon-dropdown', function(e) { e.stopPropagation(); });
		if ($.fn.sortable) {
			$('#' + mid + '_social_links_list').sortable({
				items: '.wpps-csm-social-row',
				handle: '.wpps-csm-social-row-icon-wrap',
				placeholder: 'wpps-csm-social-row-placeholder',
				tolerance: 'pointer'
			});
		}
		$('.wpps-csm-tab').on('click', function(e) {
			e.preventDefault();
			var tab = $(this).data('tab');
			$('.wpps-csm-tab').removeClass('nav-tab-active');
			$(this).addClass('nav-tab-active');
			$('.wpps-csm-panel').removeClass('is-active');
			$('.wpps-csm-panel[data-panel="' + tab + '"]').addClass('is-active');
			if (tab === 'advanced') {
				setTimeout(function() {
					csmCodeEditors.forEach(function(ed) {
						if (ed && ed.codemirror) ed.codemirror.refresh();
					});
				}, 50);
			}
		});
		$('#' + mid + '_regenerate_bypass').on('click', function() {
			var btn = this, msg = document.getElementById(mid + '_regenerate_bypass_msg');
			btn.disabled = true;
			if (msg) msg.textContent = '';
			var fd = new FormData();
			fd.append('action', 'wpps_csm_regenerate_bypass');
			fd.append('nonce', (window.wpPowerSuite && window.wpPowerSuite.nonce) || '');
			fetch((window.wpPowerSuite && window.wpPowerSuite.ajaxUrl) || ajaxurl, { method: 'POST', body: fd, credentials: 'same-origin' })
				.then(function(r) { return r.json(); })
				.then(function(data) {
					if (data.success && data.data && data.data.bypass_url) {
						var el = document.getElementById(mid + '_bypass_url');
						if (el) el.textContent = data.data.bypass_url;
					}
					if (msg) msg.textContent = (data.data && data.data.message) ? data.data.message : '';
				})
				.finally(function() { btn.disabled = false; });
		});
		// Allowed users multiselect (dropdown + search)
		var $userMs = $('#' + mid + '_allowed_users_ms');
		var $userTrigger = $('#' + mid + '_allowed_users_trigger');
		var $userTriggerText = $userMs.find('.wpps-csm-user-multiselect__trigger-text');
		var $userDropdown = $('#' + mid + '_allowed_users_dropdown');
		var $userSearch = $userMs.find('.wpps-csm-user-multiselect__search');
		var $userResults = $userMs.find('.wpps-csm-user-multiselect__results');
		var $userLoading = $userMs.find('.wpps-csm-user-multiselect__loading');
		var $userHint = $userMs.find('.wpps-csm-user-multiselect__hint');
		var $hiddenInput = $('#' + mid + '_allowed_user_ids');
		var $userList = $('#' + mid + '_allowed_users_list');
		var userSearchTimeout;
		var userAllCache = null;
		function getSelectedIds() {
			return $userList.find('.wpps-csm-user-tag').map(function() { return parseInt($(this).data('user-id'), 10); }).get();
		}
		function updateHiddenInput() {
			$hiddenInput.val(getSelectedIds().join('\n'));
		}
		function updateTriggerText() {
			var n = getSelectedIds().length;
			<?php /* translators: 1: number, 2: number. */ ?>
			$userTriggerText.text(n === 0 ? '<?php echo esc_js( __( 'Select users...', 'wp-powersuite' ) ); ?>' : (n === 1 ? '<?php echo esc_js( __( '1 user selected', 'wp-powersuite' ) ); ?>' : ('<?php echo esc_js( __( '%d users selected', 'wp-powersuite' ) ); ?>'.replace('%d', n))));
		}
		function addUser(id, displayName) {
			if (getSelectedIds().indexOf(id) !== -1) return;
			var $tag = $('<span class="wpps-csm-user-tag" data-user-id="' + id + '"><span class="wpps-csm-user-tag-name"></span> <span class="wpps-csm-user-tag-remove" role="button" tabindex="0" aria-label="<?php echo esc_js( __( 'Remove', 'wp-powersuite' ) ); ?>">&times;</span></span>');
			$tag.find('.wpps-csm-user-tag-name').text(displayName || id);
			$userList.append($tag);
			$tag.find('.wpps-csm-user-tag-remove').on('click', function(e) { e.preventDefault(); $tag.remove(); updateHiddenInput(); updateTriggerText(); });
			updateHiddenInput();
			updateTriggerText();
		}
		function renderUsers(users) {
			users = Array.isArray(users) ? users : [];
			var selectedIds = getSelectedIds();
			var filtered = users.filter(function(u) { return selectedIds.indexOf(parseInt(u.id, 10)) === -1; });
			if (users.length === 0) {
				$userResults.html('<div style="padding:12px;color:#646970;"><?php echo esc_js( __( 'No users found.', 'wp-powersuite' ) ); ?></div>');
				return;
			}
			if (filtered.length === 0) {
				$userResults.html('<div style="padding:12px;color:#646970;"><?php echo esc_js( __( 'All matching users already selected.', 'wp-powersuite' ) ); ?></div>');
				return;
			}
			$userResults.empty();
			filtered.forEach(function(u) {
				var name = u.display_name || u.label || u.user_login || String(u.id);
				var $opt = $('<div class="wpps-csm-user-multiselect__option" data-id="' + u.id + '"></div>');
				$opt.append($('<span class="wpps-csm-user-multiselect__option-label"></span>').text(name));
				if (u.user_login && u.user_login !== name) $opt.append($('<span class="wpps-csm-user-multiselect__option-slug"></span>').text('(' + u.user_login + ')'));
				$opt.data('displayName', name);
				$userResults.append($opt);
			});
			$userResults.find('.wpps-csm-user-multiselect__option').on('click', function() {
				var id = parseInt($(this).data('id'), 10);
				var name = $(this).data('displayName') || $(this).find('.wpps-csm-user-multiselect__option-label').text();
				addUser(id, name);
				$(this).remove();
			});
		}
		function loadUsers(term) {
			term = term || '';
			if (term === '' && userAllCache) {
				$userLoading.hide();
				$userHint.hide();
				renderUsers(userAllCache);
				return;
			}
			$userLoading.show();
			$userHint.hide();
			$.post((window.wpPowerSuite && window.wpPowerSuite.ajaxUrl) || ajaxurl, {
				action: 'wp_powersuite_search_users',
				nonce: (window.wpPowerSuite && window.wpPowerSuite.nonce) || '',
				term: term
			}).done(function(res) {
				$userLoading.hide();
				if (!res.success || !res.data || !Array.isArray(res.data.users)) {
					$userResults.html('<div style="padding:12px;color:#646970;"><?php echo esc_js( __( 'No users found.', 'wp-powersuite' ) ); ?></div>');
					return;
				}
				if (term === '') userAllCache = res.data.users;
				renderUsers(res.data.users);
			}).fail(function() {
				$userLoading.hide();
				$userResults.html('<div style="padding:12px;color:#646970;"><?php echo esc_js( __( 'Could not load users. Please try again.', 'wp-powersuite' ) ); ?></div>');
			});
		}
		function toggleUserDropdown(open) {
			var currentlyOpen = !$userDropdown[0].hasAttribute('hidden');
			var shouldOpen = open === undefined ? !currentlyOpen : !!open;
			if (shouldOpen) {
				$userDropdown.removeAttr('hidden');
				$userTrigger.attr('aria-expanded', 'true');
				$userSearch.val('');
				$userResults.empty();
				$userHint.hide();
				loadUsers('');
				setTimeout(function() { $userSearch.focus(); }, 50);
			} else {
				$userDropdown.attr('hidden', '');
				$userTrigger.attr('aria-expanded', 'false');
			}
		}
		$userList.on('click', '.wpps-csm-user-tag-remove', function(e) {
			e.preventDefault();
			$(this).closest('.wpps-csm-user-tag').remove();
			updateHiddenInput();
			updateTriggerText();
		});
		$userTrigger.on('click', function(e) {
			e.preventDefault();
			toggleUserDropdown();
		});
		$userSearch.on('input', function() {
			var term = $.trim($(this).val());
			clearTimeout(userSearchTimeout);
			userSearchTimeout = setTimeout(function() {
				loadUsers(term);
			}, 150);
		});
		$userSearch.on('keydown', function(e) { if (e.key === 'Escape') toggleUserDropdown(false); });
		$userMs.find('.wpps-csm-user-multiselect__action[data-action="clear"]').on('click', function(e) {
			e.preventDefault();
			$userList.empty();
			updateHiddenInput();
			updateTriggerText();
		});
		$(document).on('click', function(e) {
			if (!$userMs[0].contains(e.target)) toggleUserDropdown(false);
		});
		updateTriggerText();
		$('#' + mid + '_upload_logo').on('click', function() {
			var f = wp.media({ title: '<?php esc_html_e( 'Select Logo', 'wp-powersuite' ); ?>', button: { text: '<?php esc_html_e( 'Use this', 'wp-powersuite' ); ?>' }, multiple: false, library: { type: 'image' } });
			f.on('select', function() {
				var a = f.state().get('selection').first().toJSON();
				$('#' + mid + '_logo_id').val(a.id).trigger('change');
				$('#' + mid + '_logo_url').val(a.url).trigger('change');
				$('#' + mid + '_logo_source').val('upload').trigger('change');
				toggleLogoSource();
				if (typeof window.wppsCsmUpdateLogoPreviewFromForm === 'function') window.wppsCsmUpdateLogoPreviewFromForm();
				$('#' + mid + '_remove_logo').show();
			});
			f.open();
		});
		$('#' + mid + '_remove_logo').on('click', function() {
			$('#' + mid + '_logo_id').val('0').trigger('change');
			$('#' + mid + '_logo_url').val('').trigger('change');
			$('#' + mid + '_logo_preview').empty();
			$(this).hide();
		});
		$('#' + mid + '_logo_url').on('input change', function() {
			var url = $.trim($(this).val());
			var width = getLogoPreviewMaxWidth();
			if (url) {
				$('#' + mid + '_logo_id').val('0');
				$('#' + mid + '_logo_preview').html('<img src="' + url.replace(/"/g, '&quot;') + '" alt="" style="max-width:' + width + 'px;height:auto;border:1px solid #ddd;padding:4px;border-radius:4px;">');
				$('#' + mid + '_remove_logo').show();
			} else if (!$('#' + mid + '_logo_id').val() || $('#' + mid + '_logo_id').val() === '0') {
				$('#' + mid + '_logo_preview').empty();
				$('#' + mid + '_remove_logo').hide();
			}
		});
		$('#' + mid + '_upload_bg').on('click', function() {
			var f = wp.media({ title: '<?php esc_html_e( 'Select Background', 'wp-powersuite' ); ?>', button: { text: '<?php esc_html_e( 'Use this', 'wp-powersuite' ); ?>' }, multiple: false, library: { type: 'image' } });
			f.on('select', function() {
				var a = f.state().get('selection').first().toJSON();
				$('#' + mid + '_bg_image_id').val(a.id);
				$('#' + mid + '_bg_image_url').val(a.url).trigger('change');
				if (typeof window.wppsCsmUpdateBgPreviewFromForm === 'function') window.wppsCsmUpdateBgPreviewFromForm();
				$('#' + mid + '_remove_bg').show();
			});
			f.open();
		});
		$('#' + mid + '_remove_bg').on('click', function() {
			$('#' + mid + '_bg_image_id').val('0');
			$('#' + mid + '_bg_image_url').val('').trigger('change');
			$('#' + mid + '_bg_preview').html('<span style="color:#999;"><?php echo esc_js( __( 'No image', 'wp-powersuite' ) ); ?></span>');
			$(this).hide();
		});
		$('#' + mid + '_bg_image_url').on('input change', function() {
			var url = $.trim($(this).val());
			if (url) {
				$('#' + mid + '_bg_image_id').val('0');
				$('#' + mid + '_bg_preview').html('<img src="' + url.replace(/"/g, '&quot;') + '" alt="" style="max-width:100%;max-height:120px;object-fit:contain;">');
				$('#' + mid + '_remove_bg').show();
			} else if (!$('#' + mid + '_bg_image_id').val() || $('#' + mid + '_bg_image_id').val() === '0') {
				$('#' + mid + '_bg_preview').html('<span style="color:#999;"><?php echo esc_js( __( 'No image', 'wp-powersuite' ) ); ?></span>');
				$('#' + mid + '_remove_bg').hide();
			}
		});
		$('#' + mid + '_export_subscribers').on('click', function() {
			var rows = [];
			var headers = ['<?php echo esc_js( __( 'Email', 'wp-powersuite' ) ); ?>', '<?php echo esc_js( __( 'Subscribed', 'wp-powersuite' ) ); ?>', '<?php echo esc_js( __( 'IP Address', 'wp-powersuite' ) ); ?>', '<?php echo esc_js( __( 'User Agent', 'wp-powersuite' ) ); ?>'];
			rows.push(headers.map(function(h) { return '"' + String(h).replace(/"/g, '""') + '"'; }).join(','));
			$('.wpps-csm-subscribers-table tbody tr').each(function() {
				var $tr = $(this);
				var email = $tr.find('.column-email a').text().trim() || $tr.find('.column-email').text().trim();
				var date = $tr.find('.column-date').text().trim();
				var ip = $tr.find('.column-ip code').text().trim() || $tr.find('.column-ip').text().trim();
				var ua = $tr.find('.column-user-agent').attr('title') || $tr.find('.column-user-agent').text().trim();
				rows.push([email, date, ip, ua].map(function(c) { return '"' + String(c).replace(/"/g, '""') + '"'; }).join(','));
			});
			if (rows.length > 1) {
				var csv = rows.join('\r\n');
				var blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
				var url = URL.createObjectURL(blob);
				var a = document.createElement('a');
				a.href = url;
				a.download = 'coming-soon-subscribers-' + (new Date().toISOString().slice(0, 10)) + '.csv';
				a.style.display = 'none';
				document.body.appendChild(a);
				a.click();
				document.body.removeChild(a);
				URL.revokeObjectURL(url);
			}
		});
	}
	if (document.readyState === 'loading') {
		document.addEventListener('DOMContentLoaded', init);
	} else {
		init();
	}
})();
</script>

