<?php
/**
 * Amazon Sync Settings View
 *
 * @package    MOMCS_Sync
 * @subpackage MOMCS_Sync/views/src/common/pages/supplier/sync-settings
 * @author     miniOrange
 */

declare(strict_types=1);

namespace MOMCS_Sync\Views\Src\Common\Pages\Supplier\Sync_Settings;

use MOMCS_Sync\Includes\Common\Constants\Plugin_Constants;
// Explicitly require the interface file.
require_once __DIR__ . DIRECTORY_SEPARATOR . 'interface-sync-settings-view.php';

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

/**
 * Class for rendering the Amazon sync settings view.
 */
class Amazon_Sync_Settings_View implements Sync_Settings_View_Interface {

	/**
	 * Enqueue external CSS & JS extracted from inline blocks.
	 * Called at the start of render().
	 *
	 * @return void
	 */
	public function enqueue_assets(): void {
		wp_enqueue_style( 'momcs-sync-settings', MOMCS_PLUGIN_URL . 'assets/css/amazon-sync-settings.css', array(), MOMCS_VERSION );
		wp_enqueue_script( 'momcs-sync-settings', MOMCS_PLUGIN_URL . 'assets/js/amazon-sync-settings.js', array( 'jquery' ), MOMCS_VERSION, true );

		// Schedule card styles: premium live UI and free gated previews share the same layout.
		$scheduled_sync_style_deps = array( 'momcs-sync-settings' );
		if ( \MOMCS_Sync\Includes\Common\Constants\Plugin_Constants::PLAN_NAME === 'premium' ) {
			wp_enqueue_style( 'tom-select', 'https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.bootstrap5.min.css', array(), '2.3.1' );
			wp_enqueue_script( 'tom-select', 'https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js', array(), '2.3.1', true );
			$scheduled_sync_style_deps[] = 'tom-select';
			wp_enqueue_script( 'momcs-scheduled-sync', MOMCS_PLUGIN_URL . 'assets/js/scheduled-sync.js', array( 'jquery', 'tom-select' ), MOMCS_VERSION, true );
		}
		wp_enqueue_style( 'momcs-scheduled-sync', MOMCS_PLUGIN_URL . 'assets/css/scheduled-sync.css', $scheduled_sync_style_deps, MOMCS_VERSION );

		wp_localize_script(
			'momcs-sync-settings',
			'momcs_sync_settings',
			array(
				'ajax_url'       => admin_url( 'admin-ajax.php' ),
				'nonce_get_sync' => wp_create_nonce( 'momcs_sync_get_sync_settings_nonce' ),
			)
		);
	}

	/**
	 * Form data.
	 *
	 * @var array
	 */
	private $form_data;

	/**
	 * Constructor.
	 *
	 * @param array $form_data Form data.
	 */
	public function __construct( array $form_data = array() ) {
		$this->form_data = $form_data;
	}

	/**
	 * Render the sync settings view.
	 *
	 * @return void
	 */
	public function render() {
		// Enqueue extracted assets.
		$this->enqueue_assets();

		// Ensure sync settings script has channel UUID and nonce for preloading saved values.
		$multichannels_model = new \MOMCS_Sync\Includes\Common\Models\Multichannels_Model();

		// UUID parameter is required for multi-channel support.
		$uuid = \MOMCS_Sync\Includes\Common\Utils\Utils::get_current_page_parameter_value( 'uuid', '' );

		if ( empty( $uuid ) ) {
			wp_die( esc_html__( 'Channel UUID is required. Please navigate from the dashboard.', 'multi-channel-for-woocommerce' ) );
		}

		// Get the specific channel by UUID.
		$channel = $multichannels_model->get_channel_by_uuid( $uuid );

		if ( ! $channel ) {
			wp_die( esc_html__( 'Channel not found.', 'multi-channel-for-woocommerce' ) );
		}

		if ( strtolower( $channel['marketplace'] ?? '' ) !== Plugin_Constants::AMAZON ) {
			wp_die( esc_html__( 'Invalid channel type. Expected Amazon channel.', 'multi-channel-for-woocommerce' ) );
		}

		$channel_uuid = $uuid;

		wp_localize_script(
			'momcs-sync-settings',
			'momcs_sync_settings',
			array(
				'ajax_url'            => admin_url( 'admin-ajax.php' ),
				'nonce_get_sync'      => wp_create_nonce( 'momcs_sync_get_sync_settings_nonce' ),
				'nonce_save_sync'     => ( \MOMCS_Sync\Includes\Common\Constants\Plugin_Constants::PLAN_NAME === 'premium' ) ? wp_create_nonce( 'momcs_sync_save_sync_settings_nonce' ) : '',
				'channel_uuid'        => $channel_uuid,
			)
		);

		// Add localization for scheduled sync if premium plan.
		if ( \MOMCS_Sync\Includes\Common\Constants\Plugin_Constants::PLAN_NAME === 'premium' ) {
			wp_localize_script(
				'momcs-scheduled-sync',
				'momcsScheduledSync',
				array(
					'ajaxUrl'      => admin_url( 'admin-ajax.php' ),
					'channel_uuid' => $channel_uuid,
					'nonce'        => wp_create_nonce( 'momcs_scheduled_sync_nonce' ),
					'actions'      => array(
						'getSettings'            => 'momcs_get_schedule_settings',
						'createSchedule'         => 'momcs_create_schedule_settings',
						'updateSchedule'         => 'momcs_update_schedule_settings',
						'deleteSchedule'         => 'momcs_delete_schedule_settings',
						'getAvailableAttributes' => 'momcs_get_available_attributes',
					),
					'messages'     => array(
						'scheduleCreated' => __( 'Schedule created successfully!', 'multi-channel-for-woocommerce' ),
						'scheduleUpdated' => __( 'Schedule updated successfully!', 'multi-channel-for-woocommerce' ),
						'scheduleDeleted' => __( 'Schedule deleted successfully!', 'multi-channel-for-woocommerce' ),
						'scheduleError'   => __( 'An error occurred while managing schedule', 'multi-channel-for-woocommerce' ),
						'confirmDelete'   => __( 'Are you sure you want to delete this schedule?', 'multi-channel-for-woocommerce' ),
						'loading'         => __( 'Loading...', 'multi-channel-for-woocommerce' ),
						'saving'          => __( 'Saving...', 'multi-channel-for-woocommerce' ),
					),
					'intervals'    => array(
						'hours'  => __( 'Hours', 'multi-channel-for-woocommerce' ),
						'days'   => __( 'Days', 'multi-channel-for-woocommerce' ),
						'months' => __( 'Months', 'multi-channel-for-woocommerce' ),
					),
				)
			);
		}
		$is_premium_plan = ( \MOMCS_Sync\Includes\Common\Constants\Plugin_Constants::PLAN_NAME === 'premium' );
		?>
		<div class="momcs-sync-settings-container">
			<h2><?php esc_html_e( 'Sync Configuration', 'multi-channel-for-woocommerce' ); ?></h2>
			<div class="momcs-sync-settings-description">
				<p><?php esc_html_e( 'Configure how products are synchronized to the marketplace.', 'multi-channel-for-woocommerce' ); ?></p>
			</div>

			<form id="momcs-sync-settings-form">
				<?php wp_nonce_field( 'momcs_sync_settings', 'momcs_sync_settings_nonce' ); ?>

				<!-- Sidebar + Content layout -->
				<div class="momcs-sync-layout">

					<!-- LEFT: Vertical sidebar navigation -->
					<nav class="momcs-sync-sidebar" aria-label="<?php esc_attr_e( 'Sync Settings Navigation', 'multi-channel-for-woocommerce' ); ?>">
						<ul class="momcs-sync-sidebar-nav" role="tablist" aria-orientation="vertical">

							<!-- Account Settings (default active) -->
							<li class="momcs-sync-sidebar-item momcs-sync-sidebar-item--active" data-panel="account_settings">
								<a href="#account_settings" class="momcs-sync-sidebar-link" role="tab" aria-selected="true" aria-controls="account_settings">
									<span class="momcs-sync-sidebar-icon" aria-hidden="true">
										<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="5"/><path d="M20 21a8 8 0 0 0-16 0"/></svg>
									</span>
									<?php esc_html_e( 'Account Settings', 'multi-channel-for-woocommerce' ); ?>
								</a>
							</li>

							<!-- Product Sync Settings -->
							<li class="momcs-sync-sidebar-item" data-panel="product_sync_settings">
								<a href="#product_sync_settings" class="momcs-sync-sidebar-link" role="tab" aria-selected="false" aria-controls="product_sync_settings">
									<span class="momcs-sync-sidebar-icon" aria-hidden="true">
										<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13.744 17.736a6 6 0 1 1-7.48-7.48"/><path d="M15 6h1v4"/><path d="m6.134 14.768.866-.5 2 3.464"/><circle cx="16" cy="8" r="6"/></svg>
									</span>
									<?php esc_html_e( 'Product Sync Settings', 'multi-channel-for-woocommerce' ); ?>
								</a>
							</li>

							<!-- Schedule Settings (clickable for free so users can see disabled-state content) -->
							<li class="momcs-sync-sidebar-item" data-panel="schedule_sync_settings">
								<a href="#schedule_sync_settings" class="momcs-sync-sidebar-link" role="tab" aria-selected="false" aria-controls="schedule_sync_settings">
									<span class="momcs-sync-sidebar-icon" aria-hidden="true">
										<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l4 2"/></svg>
									</span>
									<?php esc_html_e( 'Schedule Settings', 'multi-channel-for-woocommerce' ); ?>
								</a>
							</li>

							<!-- Order Sync Settings (clickable for free so users can see disabled-state content) -->
							<li class="momcs-sync-sidebar-item" data-panel="order_schedule_sync_settings">
								<a href="#order_schedule_sync_settings" class="momcs-sync-sidebar-link" role="tab" aria-selected="false" aria-controls="order_schedule_sync_settings">
									<span class="momcs-sync-sidebar-icon" aria-hidden="true">
										<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 10a4 4 0 0 1-8 0"/><path d="M3.103 6.034h17.794"/><path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"/></svg>
									</span>
									<?php esc_html_e( 'Order Sync Settings', 'multi-channel-for-woocommerce' ); ?>
								</a>
							</li>

						</ul>

						<!-- Save button inside sidebar, below nav -->
						<div class="momcs-sidebar-save-bar">
							<button type="button" id="momcs-global-save-btn" class="button button-primary">
								<?php esc_html_e( 'Save Settings', 'multi-channel-for-woocommerce' ); ?>
							</button>
						</div>
					</nav>

					<!-- RIGHT: Content panels -->
					<div class="momcs-sync-content">

						<!-- Account Settings Panel (default visible) -->
						<div id="account_settings" class="momcs-sync-content-panel momcs-sync-content-panel--active">
							<?php $this->render_account_settings_panel(); ?>
						</div>

						<!-- Product Sync Settings Panel (free: Template Mapping + disabled Price Markup and Schedule) -->
						<div id="product_sync_settings" class="momcs-sync-content-panel">
							<?php if ( $is_premium_plan ) : ?>
								<?php $this->render_price_markup_block( array() ); ?>
							<?php else : ?>
								<?php
								// Free: Template Mapping (one template) + disabled Price Markup + disabled Schedule teaser.
								require_once dirname( __DIR__ ) . DIRECTORY_SEPARATOR . 'attribute-mapping' . DIRECTORY_SEPARATOR . 'class-amazon-template-mapping-view.php';
								$mapping_view = new \MOMCS_Sync\Views\Src\Common\Pages\Supplier\Attribute_Mapping\Amazon_Template_Mapping_View();
								$mapping_view->render();
								?>
								<hr class="momcs-section-divider" />
								<?php $this->render_disabled_price_markup_section(); ?>
								<hr class="momcs-section-divider" />
								<?php $this->render_disabled_schedule_settings_panel(); ?>
							<?php endif; ?>
						</div>

						<!-- Schedule Settings Panel -->
						<div id="schedule_sync_settings" class="momcs-sync-content-panel<?php echo ! $is_premium_plan ? ' momcs-panel-disabled' : ''; ?>">
							<?php if ( $is_premium_plan ) : ?>
								<div class="momcs-sync-settings-section">
									<div class="momcs-section-header">
										<div class="momcs-section-header-icon" aria-hidden="true">
											<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l4 2"/></svg>
										</div>
										<h3><?php esc_html_e( 'Product Sync Schedule', 'multi-channel-for-woocommerce' ); ?></h3>
										<span class="momcs-field-tooltip-wrapper">
											<span class="dashicons dashicons-info-outline momcs-field-tooltip-icon"></span>
											<span class="momcs-field-tooltip"><?php esc_html_e( 'Schedule automatic synchronization of product attributes at regular intervals.', 'multi-channel-for-woocommerce' ); ?></span>
										</span>
									</div>
									<?php $this->render_schedule_settings_panel( $channel_uuid ); ?>
								</div>
							<?php else : ?>
								<?php $this->render_disabled_schedule_settings_panel(); ?>
							<?php endif; ?>
						</div>

						<!-- Order Sync Settings Panel -->
						<div id="order_schedule_sync_settings" class="momcs-sync-content-panel<?php echo ! $is_premium_plan ? ' momcs-panel-disabled' : ''; ?>">
							<?php if ( $is_premium_plan ) : ?>
								<div class="momcs-sync-settings-section">
									<div class="momcs-section-header">
										<div class="momcs-section-header-icon" aria-hidden="true">
											<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 10a4 4 0 0 1-8 0"/><path d="M3.103 6.034h17.794"/><path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"/></svg>
										</div>
										<h3><?php esc_html_e( 'Order Sync Settings', 'multi-channel-for-woocommerce' ); ?></h3>
										<span class="momcs-field-tooltip-wrapper">
											<span class="dashicons dashicons-info-outline momcs-field-tooltip-icon"></span>
											<span class="momcs-field-tooltip"><?php esc_html_e( 'Configure automatic order synchronization and fulfillment options.', 'multi-channel-for-woocommerce' ); ?></span>
										</span>
									</div>
									<?php $this->render_order_schedule_settings_panel( $channel_uuid ); ?>
								</div>
							<?php else : ?>
								<?php $this->render_disabled_order_schedule_settings_panel(); ?>
							<?php endif; ?>
						</div>

					</div><!-- .momcs-sync-content -->

				</div><!-- .momcs-sync-layout -->
			</form>
		</div>
		<?php
	}

	/**
	 * Renders the Price Markup block using the same layout as the marketplace Product Sync tab.
	 *
	 * @param array $args {
	 *     Optional. Display arguments.
	 *
	 *     @type bool   $disabled             When true, fields are read-only (gated preview); IDs use a `_gated` suffix.
	 *     @type bool   $show_premium_badge   When true, shows the Premium badge next to the title.
	 *     @type string $section_id           Optional `id` attribute for the outer section element.
	 *     @type string $section_class_extra  Extra CSS classes for the outer section (e.g. `momcs-premium-gated-section`).
	 *     @type bool   $use_loading_shimmer  When true, shows loading shimmers until JS hydrates fields (ignored when `$disabled` is true).
	 * }
	 * @return void
	 */
	public function render_price_markup_block( array $args = array() ): void {
		$defaults = array(
			'disabled'             => false,
			'show_premium_badge'   => false,
			'section_id'           => '',
			'section_class_extra'  => '',
			'use_loading_shimmer'  => true,
		);
		$args = wp_parse_args( $args, $defaults );

		if ( $args['disabled'] ) {
			$args['use_loading_shimmer'] = false;
		}

		$id_suffix = $args['disabled'] ? '_gated' : '';

		$section_classes = array( 'momcs-sync-settings-section' );
		if ( ! empty( $args['section_class_extra'] ) ) {
			$section_classes[] = $args['section_class_extra'];
		}

		?>
		<div<?php echo '' !== $args['section_id'] ? ' id="' . esc_attr( $args['section_id'] ) . '"' : ''; ?> class="<?php echo esc_attr( implode( ' ', $section_classes ) ); ?>">
			<div class="momcs-price-markup-header">
				<div class="momcs-price-markup-header-icon" aria-hidden="true">
					<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
				</div>
				<h3>
					<?php esc_html_e( 'Price Markup', 'multi-channel-for-woocommerce' ); ?>
					<?php if ( $args['show_premium_badge'] ) : ?>
						<span class="momcs-premium-badge"><?php esc_html_e( 'Premium', 'multi-channel-for-woocommerce' ); ?></span>
					<?php endif; ?>
				</h3>
				<span class="momcs-field-tooltip-wrapper">
					<span class="dashicons dashicons-info-outline momcs-field-tooltip-icon"></span>
					<span class="momcs-field-tooltip"><?php esc_html_e( 'Apply a percentage-based markup adjustment to product prices during sync.', 'multi-channel-for-woocommerce' ); ?></span>
				</span>
			</div>

			<div class="momcs-price-markup-fields">
				<div class="<?php echo esc_attr( $args['use_loading_shimmer'] ? 'momcs-price-markup-field momcs-field-loading' : 'momcs-price-markup-field' ); ?>" id="<?php echo esc_attr( 'momcs-markup-operator-wrapper' . $id_suffix ); ?>">
					<label for="<?php echo esc_attr( 'momcs_markup_operator' . $id_suffix ); ?>" class="momcs-price-markup-label">
						<?php esc_html_e( 'Operator', 'multi-channel-for-woocommerce' ); ?>
						<span class="momcs-field-tooltip-wrapper">
							<span class="dashicons dashicons-info-outline momcs-field-tooltip-icon"></span>
							<span class="momcs-field-tooltip"><?php esc_html_e( 'Choose the operation to apply with the percentage.', 'multi-channel-for-woocommerce' ); ?></span>
						</span>
					</label>
					<?php if ( $args['use_loading_shimmer'] ) : ?>
						<div class="momcs-field-shimmer shimmer-select" style="display: inline-block;"></div>
					<?php endif; ?>
					<select id="<?php echo esc_attr( 'momcs_markup_operator' . $id_suffix ); ?>" class="momcs-price-markup-select form-field-input" <?php echo $args['use_loading_shimmer'] ? 'style="display: none;"' : ''; ?> <?php echo $args['disabled'] ? 'disabled' : ''; ?> <?php echo ! $args['disabled'] ? 'name="' . esc_attr( 'product_sync[sync_settings][price_markup][operator]' ) . '"' : ''; ?>>
						<option value="+"><?php esc_html_e( '+ Add', 'multi-channel-for-woocommerce' ); ?></option>
						<option value="-"><?php esc_html_e( '- Subtract', 'multi-channel-for-woocommerce' ); ?></option>
						<option value="*"><?php esc_html_e( '* Multiply', 'multi-channel-for-woocommerce' ); ?></option>
						<option value="/"><?php esc_html_e( '/ Divide', 'multi-channel-for-woocommerce' ); ?></option>
					</select>
				</div>
				<div class="<?php echo esc_attr( $args['use_loading_shimmer'] ? 'momcs-price-markup-field momcs-field-loading' : 'momcs-price-markup-field' ); ?>" id="<?php echo esc_attr( 'momcs-markup-percentage-wrapper' . $id_suffix ); ?>">
					<label for="<?php echo esc_attr( 'momcs_markup_percentage' . $id_suffix ); ?>" class="momcs-price-markup-label">
						<?php esc_html_e( 'Percentage', 'multi-channel-for-woocommerce' ); ?>
						<span class="momcs-field-tooltip-wrapper">
							<span class="dashicons dashicons-info-outline momcs-field-tooltip-icon"></span>
							<span class="momcs-field-tooltip"><?php esc_html_e( 'Enter the percentage to apply to both regular and sale prices.', 'multi-channel-for-woocommerce' ); ?></span>
						</span>
					</label>
					<?php if ( $args['use_loading_shimmer'] ) : ?>
						<div class="momcs-field-shimmer shimmer-input" style="display: inline-block;"></div>
					<?php endif; ?>
					<input type="number" id="<?php echo esc_attr( 'momcs_markup_percentage' . $id_suffix ); ?>" class="momcs-price-markup-input form-field-input" step="0.01" min="0" placeholder="0.00" <?php echo $args['use_loading_shimmer'] ? 'style="display: none;"' : ''; ?> <?php echo $args['disabled'] ? 'disabled' : ''; ?> <?php echo ! $args['disabled'] ? 'name="' . esc_attr( 'product_sync[sync_settings][price_markup][percentage]' ) . '"' : ''; ?> />
				</div>
			</div>
		</div>
		<?php
	}

	/**
	 * Render the schedule settings panel content for premium users.
	 *
	 * @param string $channel_uuid The channel UUID.
	 * @return void
	 */
	public function render_schedule_settings_panel( string $channel_uuid ): void {
		$sync_settings = apply_filters( 'momcs_get_sync_settings_for_channel', array(), $channel_uuid );
		$account_type  = isset( $sync_settings['account_settings']['account_type'] )
			? strtolower( (string) $sync_settings['account_settings']['account_type'] )
			: 'fbm';
		$is_fba = ( 'fba' === $account_type );
		?>
		<div class="momcs-schedule-cards-wrapper">
			<?php wp_nonce_field( 'momcs_scheduled_sync', 'momcs_scheduled_sync_nonce' ); ?>
			<div class="momcs-schedule-errors" style="display: none;"></div>
			<div class="momcs-schedule-success" style="display: none;"></div>

			<!-- Card 1: Automatic Product Attribute Sync -->
			<div class="momcs-schedule-card" id="momcs-schedule-card-product-attribute">
				<div class="momcs-schedule-card-summary">
					<div class="momcs-schedule-card-summary-left">
						<span class="momcs-schedule-card-recurrence">
							<span class="momcs-schedule-card-recurrence-dot" aria-hidden="true"></span>
							<span class="momcs-schedule-card-recurrence-text"><?php esc_html_e( 'Daily', 'multi-channel-for-woocommerce' ); ?></span>
						</span>
						<span class="momcs-schedule-card-direction">
							<span class="momcs-schedule-card-direction-label"><?php esc_html_e( 'Sync products automatically from', 'multi-channel-for-woocommerce' ); ?></span>
							<span class="momcs-schedule-card-direction-flow" aria-hidden="true">
								<span class="momcs-schedule-card-logo momcs-schedule-card-logo--wc" title="<?php esc_attr_e( 'WooCommerce', 'multi-channel-for-woocommerce' ); ?>"></span>
								<span class="momcs-schedule-card-direction-arrow" aria-hidden="true"></span>
								<span class="momcs-schedule-card-logo momcs-schedule-card-logo--amazon" title="<?php esc_attr_e( 'Amazon', 'multi-channel-for-woocommerce' ); ?>"></span>
							</span>
						</span>
					</div>
					<button type="button" class="momcs-schedule-card-accordion-trigger" aria-expanded="false" aria-controls="momcs-schedule-card-product-attribute-config" title="<?php esc_attr_e( 'Show or hide schedule settings', 'multi-channel-for-woocommerce' ); ?>">
						<span class="dashicons dashicons-arrow-down-alt2" aria-hidden="true"></span>
					</button>
					<div class="momcs-schedule-field loading" id="momcs-schedule-enabled-field">
						<div class="momcs-schedule-field-shimmer shimmer-toggle"></div>
						<label class="momcs-schedule-toggle">
							<input type="checkbox" id="momcs-schedule-enabled" name="schedule_enabled" />
							<span class="momcs-toggle-slider"></span>
							<span class="momcs-toggle-label"><?php esc_html_e( 'Enable Scheduled Sync', 'multi-channel-for-woocommerce' ); ?></span>
						</label>
					</div>
				</div>
				<div class="momcs-schedule-card-config" id="momcs-schedule-card-product-attribute-config" role="region" aria-label="<?php esc_attr_e( 'Schedule settings', 'multi-channel-for-woocommerce' ); ?>">
					<div class="momcs-scheduled-sync-header">
						<h3><?php esc_html_e( 'Automatic Product Attribute Sync', 'multi-channel-for-woocommerce' ); ?></h3>
						<p><?php esc_html_e( 'Schedule automatic synchronization of specific product attributes at regular intervals.', 'multi-channel-for-woocommerce' ); ?></p>
					</div>
					<div id="momcs-scheduled-sync-form-fields">
						<div class="momcs-schedule-configuration">
							<div class="momcs-schedule-time-settings">
								<div class="momcs-schedule-field loading" id="momcs-schedule-time-field">
									<label for="momcs-schedule-time"><?php esc_html_e( 'Scheduled Time', 'multi-channel-for-woocommerce' ); ?></label>
									<div class="momcs-schedule-field-shimmer shimmer-time-input"></div>
									<input type="time" id="momcs-schedule-time" name="schedule_time" class="regular-text" value="09:00" />
								</div>
								<br>
								<div class="momcs-schedule-field loading" id="momcs-schedule-frequency-field">
									<label for="momcs-schedule-frequency"><?php esc_html_e( 'Frequency', 'multi-channel-for-woocommerce' ); ?></label>
									<div class="momcs-schedule-field-shimmer shimmer-frequency">
										<div class="shimmer-part shimmer-number"></div>
										<div class="shimmer-part shimmer-select"></div>
									</div>
									<div class="momcs-frequency-inputs">
										<input type="number" id="momcs-schedule-frequency" name="schedule_frequency" class="small-text" min="1" max="99" value="1" />
										<select id="momcs-schedule-interval" name="schedule_interval" class="regular-text">
											<option value="hours"><?php esc_html_e( 'Hour(s)', 'multi-channel-for-woocommerce' ); ?></option>
											<option value="days" selected><?php esc_html_e( 'Day(s)', 'multi-channel-for-woocommerce' ); ?></option>
											<option value="months"><?php esc_html_e( 'Month(s)', 'multi-channel-for-woocommerce' ); ?></option>
										</select>
									</div>
								</div>
							</div>
							<br>
							<div class="momcs-schedule-field loading" id="momcs-schedule-attributes-field">
								<label for="momcs-schedule-attributes"><?php esc_html_e( 'Attributes to Sync', 'multi-channel-for-woocommerce' ); ?></label>
								<div class="momcs-schedule-field-shimmer shimmer-multiselect"></div>
								<select id="momcs-schedule-attributes" name="schedule_attributes[]" multiple class="momcs-attribute-select" placeholder="<?php esc_attr_e( 'Search and select attributes...', 'multi-channel-for-woocommerce' ); ?>">
									<option value=""><?php esc_html_e( 'Loading attributes...', 'multi-channel-for-woocommerce' ); ?></option>
								</select>
							</div>
							<div class="momcs-schedule-preview">
								<h4><?php esc_html_e( 'Schedule Preview', 'multi-channel-for-woocommerce' ); ?></h4>
								<p><?php esc_html_e( 'Configure your schedule above to see a preview.', 'multi-channel-for-woocommerce' ); ?></p>
							</div>
							<div class="momcs-schedule-actions" style="display: none;">
								<button type="submit" id="momcs-schedule-submit" class="button button-primary">
									<?php esc_html_e( 'Save Schedule', 'multi-channel-for-woocommerce' ); ?>
								</button>
								<button type="button" id="momcs-schedule-delete" class="button button-secondary" style="display: none;">
									<?php esc_html_e( 'Delete Schedule', 'multi-channel-for-woocommerce' ); ?>
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>

			<?php if ( $is_fba ) : ?>
			<!-- Card 2: Automatic Amazon to WooCommerce Import -->
			<div class="momcs-schedule-card" id="momcs-schedule-card-amazon-to-wc">
				<div class="momcs-schedule-card-summary">
					<div class="momcs-schedule-card-summary-left">
						<span class="momcs-schedule-card-recurrence">
							<span class="momcs-schedule-card-recurrence-dot" aria-hidden="true"></span>
							<span class="momcs-schedule-card-recurrence-text" id="momcs-amazon-to-wc-recurrence-display"><?php esc_html_e( 'Every 6 hours', 'multi-channel-for-woocommerce' ); ?></span>
						</span>
						<span class="momcs-schedule-card-direction">
							<span class="momcs-schedule-card-direction-label"><?php esc_html_e( 'Sync products automatically from', 'multi-channel-for-woocommerce' ); ?></span>
							<span class="momcs-schedule-card-direction-flow" aria-hidden="true">
								<span class="momcs-schedule-card-logo momcs-schedule-card-logo--amazon" title="<?php esc_attr_e( 'Amazon', 'multi-channel-for-woocommerce' ); ?>"></span>
								<span class="momcs-schedule-card-direction-arrow" aria-hidden="true"></span>
								<span class="momcs-schedule-card-logo momcs-schedule-card-logo--wc" title="<?php esc_attr_e( 'WooCommerce', 'multi-channel-for-woocommerce' ); ?>"></span>
							</span>
						</span>
					</div>
					<button type="button" class="momcs-schedule-card-accordion-trigger" aria-expanded="false" aria-controls="momcs-schedule-card-amazon-to-wc-config" title="<?php esc_attr_e( 'Show or hide schedule settings', 'multi-channel-for-woocommerce' ); ?>">
						<span class="dashicons dashicons-arrow-down-alt2" aria-hidden="true"></span>
					</button>
					<label class="momcs-order-schedule-toggle">
						<input type="checkbox" id="momcs-amazon-to-wc-schedule-enabled" name="amazon_to_wc_schedule_enabled" />
						<span class="momcs-toggle-slider"></span>
						<span class="momcs-toggle-label"><?php esc_html_e( 'Enable', 'multi-channel-for-woocommerce' ); ?></span>
					</label>
				</div>
				<div class="momcs-schedule-card-config" id="momcs-schedule-card-amazon-to-wc-config" role="region" aria-label="<?php esc_attr_e( 'Schedule settings', 'multi-channel-for-woocommerce' ); ?>">
					<div class="momcs-order-scheduled-sync-header">
						<h3><?php esc_html_e( 'Automatic Amazon to WooCommerce Import', 'multi-channel-for-woocommerce' ); ?></h3>
						<p><?php esc_html_e( 'Schedule a recurring full import/update from Amazon into WooCommerce for this channel.', 'multi-channel-for-woocommerce' ); ?></p>
					</div>
					<div class="momcs-order-schedule-configuration">
						<div class="momcs-order-schedule-field">
							<label for="momcs-amazon-to-wc-schedule-frequency">
								<?php esc_html_e( 'Frequency', 'multi-channel-for-woocommerce' ); ?>
							</label>
							<div class="momcs-frequency-inputs">
								<input type="number" id="momcs-amazon-to-wc-schedule-frequency" name="amazon_to_wc_schedule_frequency" class="small-text" min="1" max="99" value="6" />
								<select id="momcs-amazon-to-wc-schedule-interval" name="amazon_to_wc_schedule_interval" class="regular-text">
									<option value="hours" selected><?php esc_html_e( 'Hour(s)', 'multi-channel-for-woocommerce' ); ?></option>
									<option value="days"><?php esc_html_e( 'Day(s)', 'multi-channel-for-woocommerce' ); ?></option>
								</select>
							</div>
						</div>
						<p class="description">
							<?php esc_html_e( 'Full import/update (creates new products when found in Amazon listings).', 'multi-channel-for-woocommerce' ); ?>
						</p>
					</div>
				</div>
			</div>

			<!-- Card 3: Automatic FBA Stock Sync -->
			<div class="momcs-schedule-card" id="momcs-schedule-card-fba-stock">
				<div class="momcs-schedule-card-summary">
					<div class="momcs-schedule-card-summary-left">
						<span class="momcs-schedule-card-recurrence">
							<span class="momcs-schedule-card-recurrence-dot" aria-hidden="true"></span>
							<span class="momcs-schedule-card-recurrence-text" id="momcs-fba-stock-recurrence-display"><?php esc_html_e( 'Every 6 hours', 'multi-channel-for-woocommerce' ); ?></span>
						</span>
						<span class="momcs-schedule-card-direction">
							<span class="momcs-schedule-card-direction-label"><?php esc_html_e( 'Sync inventory automatically from', 'multi-channel-for-woocommerce' ); ?></span>
							<span class="momcs-schedule-card-direction-flow" aria-hidden="true">
								<span class="momcs-schedule-card-logo momcs-schedule-card-logo--amazon" title="<?php esc_attr_e( 'Amazon', 'multi-channel-for-woocommerce' ); ?>"></span>
								<span class="momcs-schedule-card-direction-arrow" aria-hidden="true"></span>
								<span class="momcs-schedule-card-logo momcs-schedule-card-logo--wc" title="<?php esc_attr_e( 'WooCommerce', 'multi-channel-for-woocommerce' ); ?>"></span>
							</span>
						</span>
					</div>
					<button type="button" class="momcs-schedule-card-accordion-trigger" aria-expanded="false" aria-controls="momcs-schedule-card-fba-stock-config" title="<?php esc_attr_e( 'Show or hide schedule settings', 'multi-channel-for-woocommerce' ); ?>">
						<span class="dashicons dashicons-arrow-down-alt2" aria-hidden="true"></span>
					</button>
					<label class="momcs-fba-stock-schedule-toggle">
						<input type="checkbox" id="momcs-fba-stock-schedule-enabled" name="fba_stock_schedule_enabled" />
						<span class="momcs-toggle-slider"></span>
						<span class="momcs-toggle-label"><?php esc_html_e( 'Enable', 'multi-channel-for-woocommerce' ); ?></span>
					</label>
				</div>
				<div class="momcs-schedule-card-config" id="momcs-schedule-card-fba-stock-config" role="region" aria-label="<?php esc_attr_e( 'Schedule settings', 'multi-channel-for-woocommerce' ); ?>">
					<div class="momcs-fba-stock-scheduled-sync-header">
						<h3><?php esc_html_e( 'Automatic FBA Stock Sync', 'multi-channel-for-woocommerce' ); ?></h3>
						<p><?php esc_html_e( 'Schedule recurring inventory updates from Amazon FBA into WooCommerce.', 'multi-channel-for-woocommerce' ); ?></p>
					</div>
					<div class="momcs-fba-stock-schedule-configuration">
						<div class="momcs-fba-stock-schedule-field">
							<label for="momcs-fba-stock-schedule-frequency">
								<?php esc_html_e( 'Frequency', 'multi-channel-for-woocommerce' ); ?>
							</label>
							<div class="momcs-frequency-inputs">
								<input type="number" id="momcs-fba-stock-schedule-frequency" name="fba_stock_schedule_frequency" class="small-text" min="1" max="99" value="6" />
								<select id="momcs-fba-stock-schedule-interval" name="fba_stock_schedule_interval" class="regular-text">
									<option value="minutes"><?php esc_html_e( 'Minute(s)', 'multi-channel-for-woocommerce' ); ?></option>
									<option value="hours" selected><?php esc_html_e( 'Hour(s)', 'multi-channel-for-woocommerce' ); ?></option>
									<option value="days"><?php esc_html_e( 'Day(s)', 'multi-channel-for-woocommerce' ); ?></option>
								</select>
							</div>
						</div>
						<p class="description">
							<?php esc_html_e( 'Only available for FBA accounts. Stock is updated using the total FBA quantity for each SKU.', 'multi-channel-for-woocommerce' ); ?>
						</p>
					</div>
				</div>
			</div>
			<?php endif; ?>
		</div>
		<?php
	}

	/**
	 * Render the account settings panel content.
	 *
	 * @return void
	 */
	public function render_account_settings_panel(): void {
		?>
		<div class="momcs-sync-settings-section">
			<h3>
				<?php esc_html_e( 'Account Settings', 'multi-channel-for-woocommerce' ); ?>
				<span class="momcs-field-tooltip-wrapper">
					<span class="dashicons dashicons-info-outline momcs-field-tooltip-icon"></span>
					<span class="momcs-field-tooltip"><?php esc_html_e( 'Choose the account type for this Amazon channel.', 'multi-channel-for-woocommerce' ); ?></span>
				</span>
			</h3>

			<table class="form-table">
				<tr>
					<th scope="row">
						<label><?php esc_html_e( 'Account Type', 'multi-channel-for-woocommerce' ); ?></label>
					</th>
					<td>
						<div id="momcs-account-type-wrapper">
							<div id="momcs-account-type-shimmer" class="momcs-account-type-shimmer">
								<div class="momcs-account-type-shimmer-bar"></div>
								<div class="momcs-account-type-shimmer-bar"></div>
							</div>
							<fieldset class="momcs-account-type-fieldset" style="display: none;">
								<div class="momcs-account-type-option">
									<label class="momcs-radio-label momcs-account-type-card">
										<input type="radio" name="account_settings[account_type]" value="fba" />
										<span class="momcs-account-type-card-header">
											<span class="momcs-radio-text"><?php esc_html_e( 'FBA', 'multi-channel-for-woocommerce' ); ?></span>
											<span class="momcs-radio-indicator" aria-hidden="true"></span>
										</span>
										<span class="momcs-account-type-desc"><?php esc_html_e( 'Fulfillment by Amazon: Amazon stores, packs, ships, and handles customer service.', 'multi-channel-for-woocommerce' ); ?></span>
									</label>
								</div>
								<div class="momcs-account-type-option">
									<label class="momcs-radio-label momcs-account-type-card">
										<input type="radio" name="account_settings[account_type]" value="fbm" checked />
										<span class="momcs-account-type-card-header">
											<span class="momcs-radio-text"><?php esc_html_e( 'FBM', 'multi-channel-for-woocommerce' ); ?></span>
											<span class="momcs-radio-indicator" aria-hidden="true"></span>
										</span>
										<span class="momcs-account-type-desc"><?php esc_html_e( 'Fulfillment by Merchant: You handle storage, packing, shipping, and customer service.', 'multi-channel-for-woocommerce' ); ?></span>
									</label>
								</div>
							</fieldset>
						</div>
					</td>
				</tr>
			</table>
		</div>
		<?php
	}

	/**
	 * Render the order schedule settings panel content for premium users.
	 *
	 * @param string $channel_uuid The channel UUID.
	 * @return void
	 */
	public function render_order_schedule_settings_panel( string $channel_uuid ): void {
		// Add localization for order scheduled sync.
		wp_localize_script(
			'momcs-sync-settings',
			'momcsOrderSchedule',
			array(
				'ajaxUrl'      => admin_url( 'admin-ajax.php' ),
				'channel_uuid' => $channel_uuid,
				'nonce'        => wp_create_nonce( 'momcs_order_scheduled_sync_nonce' ),
				'actions'      => array(
					'getSettings'    => 'momcs_get_order_schedule_settings',
					'createSchedule' => 'momcs_create_order_schedule',
					'updateSchedule' => 'momcs_update_order_schedule',
					'deleteSchedule' => 'momcs_delete_order_schedule',
				),
				'messages'     => array(
					'scheduleCreated' => __( 'Order schedule created successfully!', 'multi-channel-for-woocommerce' ),
					'scheduleUpdated' => __( 'Order schedule updated successfully!', 'multi-channel-for-woocommerce' ),
					'scheduleDeleted' => __( 'Order schedule deleted successfully!', 'multi-channel-for-woocommerce' ),
					'scheduleError'   => __( 'An error occurred while managing order schedule', 'multi-channel-for-woocommerce' ),
					'confirmDelete'   => __( 'Are you sure you want to delete this order schedule?', 'multi-channel-for-woocommerce' ),
					'loading'         => __( 'Loading...', 'multi-channel-for-woocommerce' ),
					'saving'          => __( 'Saving...', 'multi-channel-for-woocommerce' ),
				),
				'intervals'    => array(
					'hours' => __( 'Hours', 'multi-channel-for-woocommerce' ),
					'days'  => __( 'Days', 'multi-channel-for-woocommerce' ),
				),
			)
		);
		?>
		<div class="momcs-order-scheduled-sync-container momcs-schedule-cards-wrapper">
			<?php wp_nonce_field( 'momcs_order_scheduled_sync', 'momcs_order_scheduled_sync_nonce' ); ?>
			<div class="momcs-order-schedule-loading" style="display: none;">
				<div class="momcs-loading-spinner"></div>
				<p><?php esc_html_e( 'Loading...', 'multi-channel-for-woocommerce' ); ?></p>
			</div>
			<div class="momcs-order-schedule-errors" style="display: none;"></div>
			<div class="momcs-order-schedule-success" style="display: none;"></div>

			<!-- Card 1: Order Fulfillment -->
			<div class="momcs-schedule-card" id="momcs-order-schedule-card-fulfillment">
				<div class="momcs-schedule-card-summary">
					<div class="momcs-schedule-card-summary-left">
						<span class="momcs-schedule-card-recurrence">
							<span class="momcs-schedule-card-recurrence-dot" aria-hidden="true"></span>
							<span class="momcs-schedule-card-recurrence-text"><?php esc_html_e( 'On order processing', 'multi-channel-for-woocommerce' ); ?></span>
						</span>
						<div class="momcs-schedule-card-time-group momcs-schedule-card-time-group--interval">
						</div>
						<span class="momcs-schedule-card-direction">
							<span class="momcs-schedule-card-direction-label"><?php esc_html_e( 'Send orders automatically from ', 'multi-channel-for-woocommerce' ); ?></span>
							<span class="momcs-schedule-card-direction-flow" aria-hidden="true">
								<span class="momcs-schedule-card-logo momcs-schedule-card-logo--wc" title="<?php esc_attr_e( 'WooCommerce', 'multi-channel-for-woocommerce' ); ?>"></span>
								<span class="momcs-schedule-card-direction-arrow" aria-hidden="true"></span>
								<span class="momcs-schedule-card-logo momcs-schedule-card-logo--amazon" title="<?php esc_attr_e( 'Amazon', 'multi-channel-for-woocommerce' ); ?>"></span>
							</span>
						</span>
					</div>
					<button type="button" class="momcs-schedule-card-accordion-trigger" aria-expanded="false" aria-controls="momcs-order-schedule-card-fulfillment-config" title="<?php esc_attr_e( 'Show or hide settings', 'multi-channel-for-woocommerce' ); ?>">
						<span class="dashicons dashicons-arrow-down-alt2" aria-hidden="true"></span>
					</button>
					<label class="momcs-order-schedule-toggle">
						<input type="checkbox" id="momcs-order-auto-fulfillment-enabled" name="order_auto_fulfillment_enabled" />
						<span class="momcs-toggle-slider"></span>
						<span class="momcs-toggle-label"><?php esc_html_e( 'Enable', 'multi-channel-for-woocommerce' ); ?></span>
					</label>
				</div>
				<div class="momcs-schedule-card-config" id="momcs-order-schedule-card-fulfillment-config" role="region" aria-label="<?php esc_attr_e( 'Settings', 'multi-channel-for-woocommerce' ); ?>">
					<p class="description"><?php esc_html_e( 'When enabled, WooCommerce orders moved to Processing are automatically sent to this Amazon channel for fulfillment.', 'multi-channel-for-woocommerce' ); ?></p>
				</div>
			</div>

			<!-- Card 2: Order Sync -->
			<div class="momcs-schedule-card" id="momcs-order-schedule-card-sync">
				<div class="momcs-schedule-card-summary">
					<div class="momcs-schedule-card-summary-left">
						<span class="momcs-schedule-card-recurrence">
							<span class="momcs-schedule-card-recurrence-dot" aria-hidden="true"></span>
							<span class="momcs-schedule-card-recurrence-text" id="momcs-order-schedule-recurrence-display"><?php esc_html_e( 'Every 24 hours', 'multi-channel-for-woocommerce' ); ?></span>
						</span>
						<span class="momcs-schedule-card-direction">
							<span class="momcs-schedule-card-direction-label"><?php esc_html_e( 'Fetch orders automatically from', 'multi-channel-for-woocommerce' ); ?></span>
							<span class="momcs-schedule-card-direction-flow" aria-hidden="true">
								<span class="momcs-schedule-card-logo momcs-schedule-card-logo--amazon" title="<?php esc_attr_e( 'Amazon', 'multi-channel-for-woocommerce' ); ?>"></span>
								<span class="momcs-schedule-card-direction-arrow" aria-hidden="true"></span>
								<span class="momcs-schedule-card-logo momcs-schedule-card-logo--wc" title="<?php esc_attr_e( 'WooCommerce', 'multi-channel-for-woocommerce' ); ?>"></span>
							</span>
						</span>
					</div>
					<button type="button" class="momcs-schedule-card-accordion-trigger" aria-expanded="false" aria-controls="momcs-order-schedule-card-sync-config" title="<?php esc_attr_e( 'Show or hide schedule settings', 'multi-channel-for-woocommerce' ); ?>">
						<span class="dashicons dashicons-arrow-down-alt2" aria-hidden="true"></span>
					</button>
					<label class="momcs-order-schedule-toggle">
						<input type="checkbox" id="momcs-order-schedule-enabled" name="order_schedule_enabled" />
						<span class="momcs-toggle-slider"></span>
						<span class="momcs-toggle-label"><?php esc_html_e( 'Enable', 'multi-channel-for-woocommerce' ); ?></span>
					</label>
				</div>
				<div class="momcs-schedule-card-config" id="momcs-order-schedule-card-sync-config" role="region" aria-label="<?php esc_attr_e( 'Schedule settings', 'multi-channel-for-woocommerce' ); ?>">
					<div class="momcs-order-scheduled-sync-header">
						<h3><?php esc_html_e( 'Automatic Order Sync', 'multi-channel-for-woocommerce' ); ?></h3>
						<p><?php esc_html_e( 'Schedule automatic fetching of orders from Amazon at regular intervals. Orders updated since the last sync will be fetched automatically.', 'multi-channel-for-woocommerce' ); ?></p>
					</div>
					<div id="momcs-order-scheduled-sync-form-fields">
						<div class="momcs-order-schedule-configuration">
							<div class="momcs-order-schedule-field">
								<label for="momcs-order-schedule-frequency">
									<?php esc_html_e( 'Frequency', 'multi-channel-for-woocommerce' ); ?>
									<span class="momcs-field-tooltip-wrapper">
										<span class="dashicons dashicons-info-outline momcs-field-tooltip-icon"></span>
										<span class="momcs-field-tooltip"><?php esc_html_e( 'How often the order sync should repeat.', 'multi-channel-for-woocommerce' ); ?></span>
									</span>
								</label>
								<div class="momcs-frequency-inputs">
									<input type="number" id="momcs-order-schedule-frequency" name="order_schedule_frequency" class="small-text" min="1" max="999" value="24" />
									<select id="momcs-order-schedule-interval" name="order_schedule_interval" class="regular-text">
										<option value="hours" selected><?php esc_html_e( 'Hour(s)', 'multi-channel-for-woocommerce' ); ?></option>
										<option value="days"><?php esc_html_e( 'Day(s)', 'multi-channel-for-woocommerce' ); ?></option>
									</select>
								</div>
							</div>
							<div class="momcs-order-schedule-preview">
								<h4><?php esc_html_e( 'Schedule Preview', 'multi-channel-for-woocommerce' ); ?></h4>
								<p class="momcs-order-schedule-preview-text"><?php esc_html_e( 'Enable the schedule above to see the next run times.', 'multi-channel-for-woocommerce' ); ?></p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<?php
	}

	/**
	 * Render the gated Price Markup section for non-premium users (same layout as premium; fields disabled).
	 *
	 * Used when free users see Product Sync with Template Mapping enabled; Price Markup stays disabled.
	 *
	 * @return void
	 */
	public function render_disabled_price_markup_section(): void {
		$this->render_price_markup_block(
			array(
				'disabled'             => true,
				'show_premium_badge'   => true,
				'section_class_extra'  => 'momcs-premium-gated-section',
			)
		);
	}

	/**
	 * Render the disabled product sync settings panel for non-premium users.
	 *
	 * Shows a preview of the feature with an upgrade prompt. Reuses the disabled Price Markup section.
	 *
	 * @return void
	 */
	public function render_disabled_product_sync_settings_panel(): void {
		$this->render_disabled_price_markup_section();
	}

	/**
	 * Render the gated Product Sync Schedule panel for non-premium users.
	 *
	 * Uses the same section header and schedule card layout as premium; controls are disabled.
	 *
	 * @return void
	 */
	public function render_disabled_schedule_settings_panel(): void {
		?>
		<div class="momcs-sync-settings-section momcs-premium-gated-section">
			<div class="momcs-section-header">
				<div class="momcs-section-header-icon" aria-hidden="true">
					<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l4 2"/></svg>
				</div>
				<h3>
					<?php esc_html_e( 'Product Sync Schedule', 'multi-channel-for-woocommerce' ); ?>
					<span class="momcs-premium-badge"><?php esc_html_e( 'Premium', 'multi-channel-for-woocommerce' ); ?></span>
				</h3>
				<span class="momcs-field-tooltip-wrapper">
					<span class="dashicons dashicons-info-outline momcs-field-tooltip-icon"></span>
					<span class="momcs-field-tooltip"><?php esc_html_e( 'Schedule automatic synchronization of product attributes at regular intervals.', 'multi-channel-for-woocommerce' ); ?></span>
				</span>
			</div>

			<div class="momcs-schedule-cards-wrapper">
				<div class="momcs-schedule-card momcs-schedule-card--expanded" id="momcs-schedule-card-product-attribute-gated">
					<div class="momcs-schedule-card-summary">
						<div class="momcs-schedule-card-summary-left">
							<span class="momcs-schedule-card-recurrence">
								<span class="momcs-schedule-card-recurrence-dot" aria-hidden="true"></span>
								<span class="momcs-schedule-card-recurrence-text"><?php esc_html_e( 'Daily', 'multi-channel-for-woocommerce' ); ?></span>
							</span>
							<span class="momcs-schedule-card-direction">
								<span class="momcs-schedule-card-direction-label"><?php esc_html_e( 'Sync products automatically from', 'multi-channel-for-woocommerce' ); ?></span>
								<span class="momcs-schedule-card-direction-flow" aria-hidden="true">
									<span class="momcs-schedule-card-logo momcs-schedule-card-logo--wc" title="<?php esc_attr_e( 'WooCommerce', 'multi-channel-for-woocommerce' ); ?>"></span>
									<span class="momcs-schedule-card-direction-arrow" aria-hidden="true"></span>
									<span class="momcs-schedule-card-logo momcs-schedule-card-logo--amazon" title="<?php esc_attr_e( 'Amazon', 'multi-channel-for-woocommerce' ); ?>"></span>
								</span>
							</span>
						</div>
						<button type="button" class="momcs-schedule-card-accordion-trigger" aria-expanded="true" aria-controls="momcs-schedule-card-product-attribute-config-gated" disabled tabindex="-1" title="<?php esc_attr_e( 'Show or hide schedule settings', 'multi-channel-for-woocommerce' ); ?>">
							<span class="dashicons dashicons-arrow-down-alt2" aria-hidden="true"></span>
						</button>
						<div class="momcs-schedule-field" id="momcs-schedule-enabled-field-gated">
							<label class="momcs-schedule-toggle">
								<input type="checkbox" id="momcs-schedule-enabled-gated" disabled />
								<span class="momcs-toggle-slider"></span>
								<span class="momcs-toggle-label"><?php esc_html_e( 'Enable Scheduled Sync', 'multi-channel-for-woocommerce' ); ?></span>
							</label>
						</div>
					</div>
					<div class="momcs-schedule-card-config" id="momcs-schedule-card-product-attribute-config-gated" role="region" aria-label="<?php esc_attr_e( 'Schedule settings', 'multi-channel-for-woocommerce' ); ?>">
						<div class="momcs-scheduled-sync-header">
							<h3><?php esc_html_e( 'Automatic Product Attribute Sync', 'multi-channel-for-woocommerce' ); ?></h3>
							<p><?php esc_html_e( 'Schedule automatic synchronization of specific product attributes at regular intervals.', 'multi-channel-for-woocommerce' ); ?></p>
						</div>
						<div id="momcs-scheduled-sync-form-fields-gated">
							<div class="momcs-schedule-configuration">
								<div class="momcs-schedule-time-settings">
									<div class="momcs-schedule-field" id="momcs-schedule-time-field-gated">
										<label for="momcs-schedule-time-gated"><?php esc_html_e( 'Scheduled Time', 'multi-channel-for-woocommerce' ); ?></label>
										<input type="time" id="momcs-schedule-time-gated" class="regular-text" value="09:00" disabled />
									</div>
									<br>
									<div class="momcs-schedule-field" id="momcs-schedule-frequency-field-gated">
										<label for="momcs-schedule-frequency-gated"><?php esc_html_e( 'Frequency', 'multi-channel-for-woocommerce' ); ?></label>
										<div class="momcs-frequency-inputs">
											<input type="number" id="momcs-schedule-frequency-gated" class="small-text" min="1" max="99" value="1" disabled />
											<select id="momcs-schedule-interval-gated" class="regular-text" disabled>
												<option value="hours"><?php esc_html_e( 'Hour(s)', 'multi-channel-for-woocommerce' ); ?></option>
												<option value="days" selected><?php esc_html_e( 'Day(s)', 'multi-channel-for-woocommerce' ); ?></option>
												<option value="months"><?php esc_html_e( 'Month(s)', 'multi-channel-for-woocommerce' ); ?></option>
											</select>
										</div>
									</div>
								</div>
								<br>
								<div class="momcs-schedule-field" id="momcs-schedule-attributes-field-gated">
									<label for="momcs-schedule-attributes-gated"><?php esc_html_e( 'Attributes to Sync', 'multi-channel-for-woocommerce' ); ?></label>
									<select id="momcs-schedule-attributes-gated" multiple class="momcs-attribute-select" disabled style="width: 100%;">
										<option value=""><?php esc_html_e( 'Select attributes...', 'multi-channel-for-woocommerce' ); ?></option>
									</select>
								</div>
								<div class="momcs-schedule-preview">
									<h4><?php esc_html_e( 'Schedule Preview', 'multi-channel-for-woocommerce' ); ?></h4>
									<p><?php esc_html_e( 'Configure your schedule above to see a preview.', 'multi-channel-for-woocommerce' ); ?></p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<?php
	}

	/**
	 * Render the gated Order Sync settings panel for non-premium users.
	 *
	 * Uses the same section header and card layout as premium; controls are disabled.
	 *
	 * @return void
	 */
	public function render_disabled_order_schedule_settings_panel(): void {
		?>
		<div class="momcs-sync-settings-section momcs-premium-gated-section">
			<div class="momcs-section-header">
				<div class="momcs-section-header-icon" aria-hidden="true">
					<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 10a4 4 0 0 1-8 0"/><path d="M3.103 6.034h17.794"/><path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"/></svg>
				</div>
				<h3>
					<?php esc_html_e( 'Order Sync Settings', 'multi-channel-for-woocommerce' ); ?>
					<span class="momcs-premium-badge"><?php esc_html_e( 'Premium', 'multi-channel-for-woocommerce' ); ?></span>
				</h3>
				<span class="momcs-field-tooltip-wrapper">
					<span class="dashicons dashicons-info-outline momcs-field-tooltip-icon"></span>
					<span class="momcs-field-tooltip"><?php esc_html_e( 'Configure automatic order synchronization and fulfillment options.', 'multi-channel-for-woocommerce' ); ?></span>
				</span>
			</div>

			<div class="momcs-order-scheduled-sync-container momcs-schedule-cards-wrapper">
				<!-- Card 1: Order Fulfillment -->
				<div class="momcs-schedule-card momcs-schedule-card--expanded" id="momcs-order-schedule-card-fulfillment-gated">
					<div class="momcs-schedule-card-summary">
						<div class="momcs-schedule-card-summary-left">
							<span class="momcs-schedule-card-recurrence">
								<span class="momcs-schedule-card-recurrence-dot" aria-hidden="true"></span>
								<span class="momcs-schedule-card-recurrence-text"><?php esc_html_e( 'On order processing', 'multi-channel-for-woocommerce' ); ?></span>
							</span>
							<div class="momcs-schedule-card-time-group momcs-schedule-card-time-group--interval">
							</div>
							<span class="momcs-schedule-card-direction">
								<span class="momcs-schedule-card-direction-label"><?php esc_html_e( 'Send orders automatically from ', 'multi-channel-for-woocommerce' ); ?></span>
								<span class="momcs-schedule-card-direction-flow" aria-hidden="true">
									<span class="momcs-schedule-card-logo momcs-schedule-card-logo--wc" title="<?php esc_attr_e( 'WooCommerce', 'multi-channel-for-woocommerce' ); ?>"></span>
									<span class="momcs-schedule-card-direction-arrow" aria-hidden="true"></span>
									<span class="momcs-schedule-card-logo momcs-schedule-card-logo--amazon" title="<?php esc_attr_e( 'Amazon', 'multi-channel-for-woocommerce' ); ?>"></span>
								</span>
							</span>
						</div>
						<button type="button" class="momcs-schedule-card-accordion-trigger" aria-expanded="true" aria-controls="momcs-order-schedule-card-fulfillment-config-gated" disabled tabindex="-1" title="<?php esc_attr_e( 'Show or hide settings', 'multi-channel-for-woocommerce' ); ?>">
							<span class="dashicons dashicons-arrow-down-alt2" aria-hidden="true"></span>
						</button>
						<label class="momcs-order-schedule-toggle">
							<input type="checkbox" id="momcs-order-auto-fulfillment-enabled-gated" disabled />
							<span class="momcs-toggle-slider"></span>
							<span class="momcs-toggle-label"><?php esc_html_e( 'Enable', 'multi-channel-for-woocommerce' ); ?></span>
						</label>
					</div>
					<div class="momcs-schedule-card-config" id="momcs-order-schedule-card-fulfillment-config-gated" role="region" aria-label="<?php esc_attr_e( 'Settings', 'multi-channel-for-woocommerce' ); ?>">
						<p class="description"><?php esc_html_e( 'When enabled, WooCommerce orders moved to Processing are automatically sent to this Amazon channel for fulfillment.', 'multi-channel-for-woocommerce' ); ?></p>
					</div>
				</div>

				<!-- Card 2: Order Sync -->
				<div class="momcs-schedule-card momcs-schedule-card--expanded" id="momcs-order-schedule-card-sync-gated">
					<div class="momcs-schedule-card-summary">
						<div class="momcs-schedule-card-summary-left">
							<span class="momcs-schedule-card-recurrence">
								<span class="momcs-schedule-card-recurrence-dot" aria-hidden="true"></span>
								<span class="momcs-schedule-card-recurrence-text"><?php esc_html_e( 'Every 24 hours', 'multi-channel-for-woocommerce' ); ?></span>
							</span>
							<span class="momcs-schedule-card-direction">
								<span class="momcs-schedule-card-direction-label"><?php esc_html_e( 'Fetch orders automatically from', 'multi-channel-for-woocommerce' ); ?></span>
								<span class="momcs-schedule-card-direction-flow" aria-hidden="true">
									<span class="momcs-schedule-card-logo momcs-schedule-card-logo--amazon" title="<?php esc_attr_e( 'Amazon', 'multi-channel-for-woocommerce' ); ?>"></span>
									<span class="momcs-schedule-card-direction-arrow" aria-hidden="true"></span>
									<span class="momcs-schedule-card-logo momcs-schedule-card-logo--wc" title="<?php esc_attr_e( 'WooCommerce', 'multi-channel-for-woocommerce' ); ?>"></span>
								</span>
							</span>
						</div>
						<button type="button" class="momcs-schedule-card-accordion-trigger" aria-expanded="true" aria-controls="momcs-order-schedule-card-sync-config-gated" disabled tabindex="-1" title="<?php esc_attr_e( 'Show or hide schedule settings', 'multi-channel-for-woocommerce' ); ?>">
							<span class="dashicons dashicons-arrow-down-alt2" aria-hidden="true"></span>
						</button>
						<label class="momcs-order-schedule-toggle">
							<input type="checkbox" id="momcs-order-schedule-enabled-gated" disabled />
							<span class="momcs-toggle-slider"></span>
							<span class="momcs-toggle-label"><?php esc_html_e( 'Enable', 'multi-channel-for-woocommerce' ); ?></span>
						</label>
					</div>
					<div class="momcs-schedule-card-config" id="momcs-order-schedule-card-sync-config-gated" role="region" aria-label="<?php esc_attr_e( 'Schedule settings', 'multi-channel-for-woocommerce' ); ?>">
						<div class="momcs-order-scheduled-sync-header">
							<h3><?php esc_html_e( 'Automatic Order Sync', 'multi-channel-for-woocommerce' ); ?></h3>
							<p><?php esc_html_e( 'Schedule automatic fetching of orders from Amazon at regular intervals. Orders updated since the last sync will be fetched automatically.', 'multi-channel-for-woocommerce' ); ?></p>
						</div>
						<div id="momcs-order-scheduled-sync-form-fields-gated">
							<div class="momcs-order-schedule-configuration">
								<div class="momcs-order-schedule-field">
									<label for="momcs-order-schedule-frequency-gated">
										<?php esc_html_e( 'Frequency', 'multi-channel-for-woocommerce' ); ?>
										<span class="momcs-field-tooltip-wrapper">
											<span class="dashicons dashicons-info-outline momcs-field-tooltip-icon"></span>
											<span class="momcs-field-tooltip"><?php esc_html_e( 'How often the order sync should repeat.', 'multi-channel-for-woocommerce' ); ?></span>
										</span>
									</label>
									<div class="momcs-frequency-inputs">
										<input type="number" id="momcs-order-schedule-frequency-gated" class="small-text" min="1" max="999" value="24" disabled />
										<select id="momcs-order-schedule-interval-gated" class="regular-text" disabled>
											<option value="hours" selected><?php esc_html_e( 'Hour(s)', 'multi-channel-for-woocommerce' ); ?></option>
											<option value="days"><?php esc_html_e( 'Day(s)', 'multi-channel-for-woocommerce' ); ?></option>
										</select>
									</div>
								</div>
								<div class="momcs-order-schedule-preview">
									<h4><?php esc_html_e( 'Schedule Preview', 'multi-channel-for-woocommerce' ); ?></h4>
									<p class="momcs-order-schedule-preview-text"><?php esc_html_e( 'Enable the schedule above to see the next run times.', 'multi-channel-for-woocommerce' ); ?></p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<?php
	}
}
