<?php
/**
 * PeachPay ConvesioPay Connect
 *
 * @package PeachPay
 */

defined( 'PEACHPAY_ABSPATH' ) || exit;
?>
<div class="flex-col payment-provider-header <?php echo esc_attr( peachpay_convesiopay_connected() ? 'is-connected' : '' ); ?>">
		<div>
			<div class="flex-col gap-24 w-100">
				<div class="flex-row gap-12 ai-center provider-title logo-box">
					<img src="<?php echo PeachPay::get_asset_url( '/img/marks/convesiopay/Convesio.png' ); ?>" alt="">
					Pay
				</div>
			<?php if ( peachpay_convesiopay_connected() ) : ?>
				<div class="flex-col gap-12 connected-info">
					<div class="flex-row gap-8 ai-center connected-success">
						<?php esc_html_e( 'Your ConvesioPay account is connected!', 'peachpay-for-woocommerce' ); ?>
						<img src="<?php echo esc_attr( plugins_url( 'public/img/checkmark-green.svg', PEACHPAY_PLUGIN_FILE ) ); ?>"/>
					</div>
					<span class="account-info">
						<?php esc_html_e( 'Merchant Email: ', 'peachpay-for-woocommerce' ); ?>
						<span class="pp-bold">
							<?php echo esc_html( PeachPay_ConvesioPay_Integration::merchant_email() ); ?>
						</span>
					</span>
					<div>
						<span><?php echo esc_html( 'The all-in-one payment solution to maximize revenue and streamline the payment process.' ); ?></span>
							<?php esc_html_e( 'Make test payments following', 'peachpay-for-woocommerce' ); ?> <a href="https://docs.convesiopay.com" target="_blank"><?php esc_html_e( 'these instructions', 'peachpay-for-woocommerce' ); ?></a>.
						<br/>
					</div>
					
				</div>
			<?php else : ?>
				<?php 
				// Check if store is US for conditional CSS class
				$store_country = WC()->countries->get_base_country();
				$is_us_store = $store_country === 'US';
				?>
				<div class="card_offer <?php echo $is_us_store ? 'has-promo' : 'no-promo'; ?>">
					<div class="flex-col provider-description left_box">
						<div class="logo">
						<span class="service-name">ConvesioPay</span>
						<button type="button" class="enable-btn" onclick="openConvesioPayModal()">
							<span><?php esc_html_e( 'Connect ConvesioPay', 'peachpay-for-woocommerce' ); ?></span>
						</button>
						</div>
						<p class="description">
							<span><?php esc_html_e( 'The all-in-one payment solution to maximize revenue and streamline the payment process.', 'peachpay-for-woocommerce' ); ?></span>
						</p>
					</div>
					<?php 
					// Only show promotional banner for US stores
					if ( $is_us_store ) : ?>
						<div class="right_box">
							<h3>Switch to ConvesioPay & Earn $1,000! ( <a href="https://convesiopay.com/auth/sign-up?fpr=h3pm23" target="_blank" style="color: #fff; text-decoration: underline;">Apply Now</a> )</h3>
							<p>Hit $150k GMV and host 3 months—cash bonus is yours.</p>
							<a href="https://convesio.com/convesiopay-cash-offer-terms-and-conditions" target="_blank">Terms & Conditions</a>
							<span>|</span>
							<small>US Merchants Only</small>
						</div>
					<?php endif; ?>
				</div>
			<?php endif; ?>
		</div>
		<div class="flex-col gap-12 ai-center buttons-container">
			<?php if ( peachpay_convesiopay_connected() ) : ?>
				<button type="button" class="unlink-payment-button button-error-outlined-medium" onclick="peachpayDisconnectConvesioPay(event)">
					<?php esc_html_e( 'Disconnect ConvesioPay', 'peachpay-for-woocommerce' ); ?>
				</button>

				<!-- Checkout Theme Selection -->
				<div class="convesiopay-theme-selector">
					<label class="theme-label"><?php esc_html_e( 'Checkout Theme:', 'peachpay-for-woocommerce' ); ?></label>
					<div class="theme-toggle-container">
						<?php
						// Read theme from separate option (not from gateway settings due to WooCommerce sanitization)
						$current_theme = get_option( 'peachpay_convesiopay_checkout_theme', 'light' );
						$is_dark = $current_theme === 'dark';
						?>
						<span class="theme-toggle-label <?php echo $is_dark ? '' : 'active'; ?>"><?php esc_html_e( 'Light', 'peachpay-for-woocommerce' ); ?></span>
						<label class="theme-toggle-switch">
							<input type="checkbox" id="convesiopay_theme_toggle" <?php checked( $is_dark ); ?> onchange="toggleConvesioPayTheme(this)">
							<span class="theme-toggle-slider"></span>
						</label>
						<span class="theme-toggle-label <?php echo $is_dark ? 'active' : ''; ?>"><?php esc_html_e( 'Dark', 'peachpay-for-woocommerce' ); ?></span>
					</div>
				</div>
			<?php else : ?>
				<div class="flex-col gap-12 w-100" style="position: relative;">
					<div class="offerwrap">
						<div class="offer-tag">Exclusive PeachPay Offer</div>
					</div>
					<!-- <button class="connect-payment-button button-primary-filled-medium" onclick="openConvesioPayModal()">
						<span><?php esc_html_e( 'Connect ConvesioPay', 'peachpay-for-woocommerce' ); ?></span>
					</button> -->
				</div>
				<span>
					<?php
						//phpcs:ignore
						// echo peachpay_build_read_tutorial_section( 'https://docs.convesiopay.com' );
					?>
				</span>
			<?php endif; ?>
		</div>
	</div>
	<?php if ( peachpay_convesiopay_connected() ) : ?>
		<div>
			<!-- Unified Gateway Label -->
			<div class="convesiopay-unified-label-selector">
				<div class="unified-label-container">
					<label class="unified-label-title" for="convesiopay_unified_gateway_label"><?php esc_html_e( 'Unified Gateway Label:', 'peachpay-for-woocommerce' ); ?></label>
					<?php
					// Read label from separate option
					$current_label = get_option( 'peachpay_convesiopay_unified_gateway_label', 'Credit Card' );
					?>
					<input type="text" 
						id="convesiopay_unified_gateway_label" 
						name="convesiopay_unified_gateway_label" 
						value="<?php echo esc_attr( $current_label ); ?>" 
						data-original-value="<?php echo esc_attr( $current_label ); ?>"
						placeholder="<?php esc_attr_e( 'Credit Card', 'peachpay-for-woocommerce' ); ?>"
						maxlength="100"
						class="unified-label-input"
						oninput="toggleUnifiedLabelSaveButton()"
					/>
					<button type="button" class="unified-label-save-btn" onclick="saveUnifiedGatewayLabel()" disabled>
						<?php esc_html_e( 'Save', 'peachpay-for-woocommerce' ); ?>
					</button>
				</div>
				<p class="unified-label-description"><?php esc_html_e( 'This label appears on the WooCommerce checkout page for ConvesioPay payments.', 'peachpay-for-woocommerce' ); ?></p>
			</div>

			<!-- Show Card Icons Selection -->
			<div class="convesiopay-card-icons-selector">
				<div class="card-icons-header">
					<label class="card-icons-title"><?php esc_html_e( 'Card Icons:', 'peachpay-for-woocommerce' ); ?></label>
				</div>
				<p class="card-icons-description"><?php esc_html_e( 'Select which card brand icons to display alongside the payment method label on checkout.', 'peachpay-for-woocommerce' ); ?></p>
				<?php
				// Read individual card icon settings from option (default is all disabled)
				$card_icons_settings = get_option( 'peachpay_convesiopay_card_icons', array(
					'visa'       => 'no',
					'mastercard' => 'no',
					'amex'       => 'no',
					'discover'   => 'no',
				) );
				
				// Define card brands with their display names and icon URLs
				$card_brands = array(
					'visa'       => array(
						'label' => __( 'Visa', 'peachpay-for-woocommerce' ),
						'icon'  => PeachPay::get_asset_url( '/img/marks/visa.svg' ),
					),
					'mastercard' => array(
						'label' => __( 'Mastercard', 'peachpay-for-woocommerce' ),
						'icon'  => PeachPay::get_asset_url( '/img/marks/mastercard.svg' ),
					),
					'amex'       => array(
						'label' => __( 'American Express', 'peachpay-for-woocommerce' ),
						'icon'  => PeachPay::get_asset_url( '/img/marks/amex.svg' ),
					),
					'discover'   => array(
						'label' => __( 'Discover', 'peachpay-for-woocommerce' ),
						'icon'  => PeachPay::get_asset_url( '/img/marks/discover.svg' ),
					),
				);
				?>
				<div class="card-icons-checkboxes">
					<?php foreach ( $card_brands as $card_key => $card_data ) : 
						$is_checked = isset( $card_icons_settings[ $card_key ] ) && $card_icons_settings[ $card_key ] === 'yes';
					?>
					<label class="card-icon-checkbox-item">
						<input type="checkbox" 
							name="convesiopay_card_icon_<?php echo esc_attr( $card_key ); ?>" 
							id="convesiopay_card_icon_<?php echo esc_attr( $card_key ); ?>"
							value="<?php echo esc_attr( $card_key ); ?>"
							<?php checked( $is_checked ); ?>
							onchange="updateConvesioPayCardIcons()"
						/>
						<span class="card-icon-checkbox-visual">
							<img src="<?php echo esc_url( $card_data['icon'] ); ?>" alt="<?php echo esc_attr( $card_data['label'] ); ?>" class="card-icon-preview" />
							<span class="card-icon-label"><?php echo esc_html( $card_data['label'] ); ?></span>
							<span class="card-icon-checkmark">
								<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
									<path d="M13.3334 4L6.00008 11.3333L2.66675 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
								</svg>
							</span>
						</span>
					</label>
					<?php endforeach; ?>
				</div>
			</div>

			<!-- Show ConvesioPay logo in order list -->
			<div class="convesiopay-order-list-logo-selector">
				<div class="order-list-logo-header">
					<label class="order-list-logo-title" for="convesiopay_show_order_list_logo"><?php esc_html_e( 'Order list logo:', 'peachpay-for-woocommerce' ); ?></label>
					<label class="theme-toggle-switch order-list-logo-toggle">
						<?php
						$show_order_list_logo = get_option( 'peachpay_convesiopay_show_order_list_logo', 'yes' );
						$logo_checked = ( $show_order_list_logo === 'yes' );
						?>
						<input type="checkbox" id="convesiopay_show_order_list_logo" <?php checked( $logo_checked ); ?> onchange="toggleConvesioPayOrderListLogo(this)" />
						<span class="theme-toggle-slider"></span>
					</label>
				</div>
				<p class="order-list-logo-description"><?php esc_html_e( 'Show the ConvesioPay logo next to the order number in the WooCommerce order list. The payment method column is unchanged.', 'peachpay-for-woocommerce' ); ?></p>
			</div>

			<!-- Accelerated checkout settings -->
			<div class="convesiopay-accelerated-checkout-selector">
				<?php
				$accelerated_defaults = array(
					'applepay_enabled' => 'yes',
					'googlepay_enabled' => 'yes',
					'checkout_enabled' => 'yes',
					'cart_enabled'     => 'no',
					'product_enabled'  => 'no',
				);
				$accelerated_settings_raw = get_option( 'peachpay_convesiopay_accelerated_checkout_settings', array() );
				$accelerated_settings = wp_parse_args( is_array( $accelerated_settings_raw ) ? $accelerated_settings_raw : array(), $accelerated_defaults );
				?>
				<div class="accelerated-checkout-header">
					<label class="accelerated-checkout-title">
						<?php esc_html_e( 'Accelerated checkout: ', 'peachpay-for-woocommerce' ); ?>
						<span class="woocommerce-badge woocommerce-badge--new peachpay-new-feature-badge"><?php esc_html_e( 'New', 'peachpay-for-woocommerce' ); ?></span>
					</label>
					<div class="accelerated-checkout-actions">
						<button type="button" class="accelerated-checkout-save-btn" onclick="saveConvesioPayAcceleratedCheckoutSettings()">
							<?php esc_html_e( 'Save changes', 'peachpay-for-woocommerce' ); ?>
						</button>
					</div>
				</div>
				<p class="accelerated-checkout-description">
					<?php esc_html_e( 'Enable Wallet Buttons to let your customers checkout faster.', 'peachpay-for-woocommerce' ); ?>
				</p>

				<ul class="accelerated-checkout-grid">
					<li class="accelerated-checkout-field">
						<input type="checkbox" id="convesiopay_accelerated_applepay_enabled" <?php checked( $accelerated_settings['applepay_enabled'], 'yes' ); ?> />
						<span><?php esc_html_e( 'Apple Pay', 'peachpay-for-woocommerce' ); ?></span>
						<span class="accelerated-checkout-icon-container"><img src="<?php echo PeachPay::get_asset_url( '/img/marks/applepay-full.svg' ); ?>" class="accelerated-checkout-icon" alt="Apple Pay"></span>
					</li>

					<li class="accelerated-checkout-field">
						<input type="checkbox" id="convesiopay_accelerated_googlepay_enabled" <?php checked( $accelerated_settings['googlepay_enabled'], 'yes' ); ?> />
						<span><?php esc_html_e( 'Google Pay', 'peachpay-for-woocommerce' ); ?></span>
						<span class="accelerated-checkout-icon-container"><img src="<?php echo PeachPay::get_asset_url( '/img/marks/google-pay.svg' ); ?>" class="accelerated-checkout-icon" alt="Google Pay"></span>
					</li>

					<li class="accelerated-checkout-field"></li>

					<li class="accelerated-checkout-field">
						<input type="checkbox" id="convesiopay_accelerated_checkout_enabled" <?php checked( $accelerated_settings['checkout_enabled'], 'yes' ); ?> />
						<span><?php esc_html_e( 'Checkout page', 'peachpay-for-woocommerce' ); ?></span>
					</li>

					<li class="accelerated-checkout-field">
						<input type="checkbox" id="convesiopay_accelerated_cart_enabled" <?php checked( $accelerated_settings['cart_enabled'], 'yes' ); ?> />
						<span><?php esc_html_e( 'Cart page', 'peachpay-for-woocommerce' ); ?></span>
					</li>

					<li class="accelerated-checkout-field">
						<input type="checkbox" id="convesiopay_accelerated_product_enabled" <?php checked( $accelerated_settings['product_enabled'], 'yes' ); ?> />
						<span><?php esc_html_e( 'Product page', 'peachpay-for-woocommerce' ); ?></span>
					</li>
				</ul>
			</div>
		</div>
	<?php endif; ?>
	<div class="flex-col gap-4">
		<div class="provider-info">
			<div class="info-icon icon-18"></div>
			<span>
				<span><?php esc_html_e( 'Learn more about', 'peachpay-for-woocommerce' ); ?> <span>
				<a href="https://convesio.com/pay" target="_blank"><?php esc_html_e( 'ConvesioPay payment processing', 'peachpay-for-woocommerce' ); ?></a>
				<span> <?php esc_html_e( 'and any associated', 'peachpay-for-woocommerce' ); ?> </span>
				<a href="https://convesio.com/pay/pricing" target="_blank">
					<?php esc_html_e( 'fees', 'peachpay-for-woocommerce' ); ?>
				</a>
			</span>
		</div>
		<?php if ( PeachPay::service_fee_enabled() ) : ?>
			<div class="provider-info">
				<div class="info-icon icon-18"></div>
				<span>
					<?php esc_html_e( 'Peachpay service fees apply to all transactions.', 'peachpay-for-woocommerce' ); ?>
				</span>
			</div>
		<?php endif; ?>
		<div class="icons">
			<img src="<?php echo PeachPay::get_asset_url( '/img/marks/visa.svg' ); ?>" alt="">
			<img src="<?php echo PeachPay::get_asset_url( '/img/marks/amex.svg' ); ?>" alt="">
			<img src="<?php echo PeachPay::get_asset_url( '/img/marks/mastercard.svg' ); ?>" alt="">
			<img src="<?php echo PeachPay::get_asset_url( '/img/marks/applepay-full.svg' ); ?>" alt="">
			<img src="<?php echo PeachPay::get_asset_url( '/img/marks/google-pay.svg' ); ?>" alt="">
			<img src="<?php echo PeachPay::get_asset_url( '/img/marks/bitcoin.svg' ); ?>" alt="">
			<img src="<?php echo PeachPay::get_asset_url( '/img/marks/discover.svg' ); ?>" alt="">
			<!-- <a class="seemore" href="#">See more</a> -->
      </div>

<!-- ConvesioPay Connection Modal -->
<div id="convesiopay-modal" class="convesiopay-modal" style="display: none;">
	<div class="convesiopay-modal-overlay" onclick="closeConvesioPayModal()"></div>
	<div class="convesiopay-modal-content">
		<div class="convesiopay-modal-top-header">
			<div class="convesiopay-modal-top-title">Connect Your Account</div>
			<button type="button" class="convesiopay-modal-close" onclick="closeConvesioPayModal()">&times;</button>
		</div>
		<div class="convesiopay-modal-header">
			<div class="convesiopay-modal-logo">
				<svg width="71" height="31" viewBox="0 0 71 31" fill="none" xmlns="http://www.w3.org/2000/svg" class="align-middle me-3"><path d="M10.8891 3.229L0 9.4883V21.9743L10.8891 28.2336L21.7782 21.9743V9.4883L10.8891 3.229ZM16.3992 11.7051L10.8891 14.8022L5.44455 11.6725L10.8891 8.54289L16.3992 11.7051ZM4.78858 12.7157L10.2659 15.878V22.2351L4.78858 19.0728V12.7157ZM11.5123 22.2351V15.878L16.9896 12.7157V19.0728L11.5123 22.2351Z" fill="#FF6A5B"></path><path d="M32.9707 23H29.9716V5.9024H37.4822C41.0709 5.9024 43.0704 8.36322 43.0704 11.2598C43.0704 14.1564 41.0453 16.6172 37.4822 16.6172H32.9707V23ZM37.0721 13.977C38.7639 13.977 39.9943 12.9004 39.9943 11.2598C39.9943 9.61927 38.7639 8.54266 37.0721 8.54266H32.9707V13.977H37.0721ZM55.2429 23H52.5514V21.6671C51.6286 22.718 50.1931 23.3076 48.5525 23.3076C46.5275 23.3076 44.2461 21.949 44.2461 19.2062C44.2461 16.3609 46.5275 15.1818 48.5525 15.1818C50.2187 15.1818 51.6542 15.7201 52.5514 16.771V14.9254C52.5514 13.4899 51.3722 12.6184 49.6548 12.6184C48.2706 12.6184 47.0658 13.1311 45.9892 14.182L44.8869 12.3108C46.3224 10.9522 48.1168 10.3114 50.0906 10.3114C52.8333 10.3114 55.2429 11.4649 55.2429 14.7973V23ZM49.6035 21.462C50.7827 21.462 51.9362 21.0262 52.5514 20.1803V18.3091C51.9362 17.4631 50.7827 17.0274 49.6035 17.0274C48.0911 17.0274 46.9633 17.8989 46.9633 19.2575C46.9633 20.5904 48.0911 21.462 49.6035 21.462ZM58.1942 27.8447L58.6043 25.4352C58.8863 25.5634 59.322 25.6403 59.6297 25.6403C60.4756 25.6403 61.0395 25.3839 61.3984 24.5636L62.0136 23.1538L56.9381 10.619H59.8091L63.4234 19.8983L67.0378 10.619H69.9344L63.9617 25.2301C63.1158 27.3321 61.6291 27.9985 59.7066 28.0242C59.322 28.0242 58.5787 27.9473 58.1942 27.8447Z" fill="white"></path></svg>
			</div>
		</div>
		<div class="convesiopay-modal-body">
			<div class="convesiopay-modal-container">
				<h3 style="font-size: 25px; font-weight: 600;">Connect ConvesioPay</h3>
				<p style="font-size: 12px;">Login with your ConvesioPay account credentials to connect your account API key to this store.</p>
				
				<form id="convesiopay-connect-form" novalidate onsubmit="event.preventDefault(); peachpayConnectConvesioPayFromModal();">
					<div class="convesiopay-form-field">
						<label for="modal_convesiopay_email_id">Email Address</label>
						<input type="text" id="modal_convesiopay_email_id" name="convesiopay_email" required />
					</div>
					<div class="convesiopay-form-field">
						<label for="modal_convesiopay_password">Password</label>
						<input type="password" id="modal_convesiopay_password" name="convesiopay_password" data-auth-mode="password" required />
					</div>
					<div class="convesiopay-admin-key-link">
						<a href="#" onclick="toggleAdminKeyMode(); return false;">Use Admin Key</a>
					</div>
					<div class="convesiopay-form-field">
						<label for="modal_convesiopay_merchant_api_key">Merchant API Key (Optional)</label>
						<input type="text" id="modal_convesiopay_merchant_api_key" name="convesiopay_merchant_api_key" placeholder="Required for Team users with multiple merchant relationships" />
						<div class="convesiopay-form-field-help">
							Provide this when the connecting user is a Team sub user linked to multiple merchants, so the correct merchant is selected.
						</div>
					</div>
					<div class="convesiopay-modal-actions">
						<button type="submit" class="convesiopay-btn-primary">
							CONNECT ACCOUNT
						</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>

<!-- ConvesioPay Disconnect Modal -->
<div id="convesiopay-disconnect-modal" class="convesiopay-modal" style="display: none;">
	<div class="convesiopay-modal-overlay" onclick="closeConvesioPayDisconnectModal()"></div>
	<div class="convesiopay-modal-content">
		<div class="convesiopay-modal-top-header">
			<div class="convesiopay-modal-top-title">Disconnect Your Account</div>
			<button type="button" class="convesiopay-modal-close" onclick="closeConvesioPayDisconnectModal()">&times;</button>
		</div>
		<div class="convesiopay-modal-header">
			<div class="convesiopay-modal-logo">
				<svg width="71" height="31" viewBox="0 0 71 31" fill="none" xmlns="http://www.w3.org/2000/svg" class="align-middle me-3"><path d="M10.8891 3.229L0 9.4883V21.9743L10.8891 28.2336L21.7782 21.9743V9.4883L10.8891 3.229ZM16.3992 11.7051L10.8891 14.8022L5.44455 11.6725L10.8891 8.54289L16.3992 11.7051ZM4.78858 12.7157L10.2659 15.878V22.2351L4.78858 19.0728V12.7157ZM11.5123 22.2351V15.878L16.9896 12.7157V19.0728L11.5123 22.2351Z" fill="#FF6A5B"></path><path d="M32.9707 23H29.9716V5.9024H37.4822C41.0709 5.9024 43.0704 8.36322 43.0704 11.2598C43.0704 14.1564 41.0453 16.6172 37.4822 16.6172H32.9707V23ZM37.0721 13.977C38.7639 13.977 39.9943 12.9004 39.9943 11.2598C39.9943 9.61927 38.7639 8.54266 37.0721 8.54266H32.9707V13.977H37.0721ZM55.2429 23H52.5514V21.6671C51.6286 22.718 50.1931 23.3076 48.5525 23.3076C46.5275 23.3076 44.2461 21.949 44.2461 19.2062C44.2461 16.3609 46.5275 15.1818 48.5525 15.1818C50.2187 15.1818 51.6542 15.7201 52.5514 16.771V14.9254C52.5514 13.4899 51.3722 12.6184 49.6548 12.6184C48.2706 12.6184 47.0658 13.1311 45.9892 14.182L44.8869 12.3108C46.3224 10.9522 48.1168 10.3114 50.0906 10.3114C52.8333 10.3114 55.2429 11.4649 55.2429 14.7973V23ZM49.6035 21.462C50.7827 21.462 51.9362 21.0262 52.5514 20.1803V18.3091C51.9362 17.4631 50.7827 17.0274 49.6035 17.0274C48.0911 17.0274 46.9633 17.8989 46.9633 19.2575C46.9633 20.5904 48.0911 21.462 49.6035 21.462ZM58.1942 27.8447L58.6043 25.4352C58.8863 25.5634 59.322 25.6403 59.6297 25.6403C60.4756 25.6403 61.0395 25.3839 61.3984 24.5636L62.0136 23.1538L56.9381 10.619H59.8091L63.4234 19.8983L67.0378 10.619H69.9344L63.9617 25.2301C63.1158 27.3321 61.6291 27.9985 59.7066 28.0242C59.322 28.0242 58.5787 27.9473 58.1942 27.8447Z" fill="white"></path></svg>
			</div>
		</div>
		<div class="convesiopay-modal-body">
			<div class="convesiopay-modal-container">
				<h2>Disconnect ConvesioPay</h2>
				<p>Do you want to unauthorize this store from making transactions? You can revoke access by disconnecting your ConvesioPay account.</p>
				
				<div class="convesiopay-modal-actions">
					<button type="button" class="convesiopay-btn-primary" onclick="confirmDisconnectConvesioPay(event)">
						DISCONNECT ACCOUNT
					</button>
				</div>
			</div>
		</div>
	</div>
</div>

<style>
 /* Import Inter font */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

 /* Ensure full width for card container */
 .payment-provider-header {
   width: 100%;
   max-width: 100%;
 }

 .payment-provider-header > div {
   width: 100%;
   max-width: 100%;
 }


.logo-box {
      background-image: linear-gradient(135deg, rgb(12, 40, 70) 0%, rgb(13, 39, 67) 100%);
      color: #fff;
      font-weight: 600;
      border-radius: 8px;
      padding: 10px 10px;
      display: flex;
      align-items: center;
      font-size: 22px;
      width: max-content;
    }

	.icons {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      margin-top: 10px;
      align-items: center;
    }

    .icons img {
      width: 60px;
      height: 40px;
      border: 1px solid #e1e1e1;
      border-radius: 4px;
      padding: 6px 10px;
      background: #fff;
      object-fit: contain;
    }

    .icons .seemore {
      font-size: 16px;
      border-radius: 4px;
      padding: 5px 8px;
      color: #999;
      border: 1px solid #999;
      text-decoration: none;
    }

	 	.offerwrap{
       position: absolute;
       right: -24px;
       /* top: -10px; */
       z-index: 10;
     }

    .offer-tag {
      display: inline-block;
      padding: 0.3em;
      padding-left: 15px;
      padding-right: 15px;
      padding-top: 10px;
      padding-bottom: 10px;
      margin-left: 0.8em;
      position: relative;
      text-align: center;
      vertical-align: middle;
      line-height: 1;
      color: #fff;
      background: #fcaa1e;
      font-size: 18px;
      color: #000;
      font-weight: 700;
	  width: max-content;
    }

    .offer-tag:before {
      content: "";
      width: 0;
      height: 0;
      border-left: 18px solid transparent;
      left: -18px;
      position: absolute;
      top: 0;
      border-top: 18px solid #fcaa1e;
    }

    .offer-tag:after {
      content: "";
      width: 0;
      height: 0;
      border-left: 18px solid transparent;
      left: -18px;
      position: absolute;
      top: auto;
      bottom: 0;
      border-top: none;
      border-bottom: 18px solid #fcaa1e;
    }

	.left_box {
      flex: 1;
    }

    .logo {
      display: flex;
      align-items: center;
      justify-content: space-between;
      /* margin: 14px 0;
      margin-top: 20px; */
    }

	.service-name {
      font-size: 22px;
      color: #333;
      font-weight: 800;
    }

    .enable-btn {
      background: #21105d;
      border-radius: 6px;
      border: none;
      color: #fff;
      padding: 12px 14px;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      margin-left: 10px;
    }

    .description {
      max-width: 90%;
      font-size: 20px;
      color: #333;
      margin: 16px 0 24px;
      line-height: 1.5;
    }

	.card_offer {
       display: flex;
       justify-content: space-between;
       align-items: center;
       gap: 60px;
       width: 100%;
       max-width: 100%;
       min-width: 100%;
       box-sizing: border-box;
     }

	/* When no promotional banner (non-US stores), adjust layout */
	.card_offer.no-promo {
		justify-content: flex-start;
	}

	.card_offer.no-promo .left_box {
		max-width: 100%;
		text-align: center;
	}

	.right_box {
      max-width: 340px;
      background: linear-gradient(90deg, rgb(13 39 68 / 92%) 32%, rgba(18, 63, 112, 1) 100%);
      color: #fff;
      padding: 20px;
      border-radius: 10px;
    }

    .right_box h3 {
      font-size: 22px;
      margin-bottom: 10px;
      font-weight: 600;
	  color: #fff;
    }

    .right_box p {
      font-size: 15px;
      margin-bottom: 16px;
      line-height: 1.5;
    }

    .right_box a {
      color: #fff;
      text-decoration: underline;
      font-size: 14px;
      font-weight: 600;
      margin-right: 10px;
    }

    .right_box small {
      margin-left: 10px;
      font-size: 14px;
      color: #fff;
      font-style: italic;
    }
.convesiopay-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.5);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.convesiopay-modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(13, 39, 67, 0.7);
	z-index: 1;
}

/* Hide admin notices inside modal */
.convesiopay-modal .notice,
.convesiopay-modal .wp-admin-notice,
.convesiopay-modal .admin-notice {
	display: none !important;
}

.convesiopay-modal-content {
	position: relative;
	background: #FFFFFF;
	border-radius: 0;
	z-index: 2;
	width: 90%;
	max-width: 500px;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 20px 40px rgba(13, 39, 67, 0.2);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.convesiopay-modal-top-header {
	background: white;
	color: #0D2743;
	padding: 0px 6px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: 12px 12px 0 0;
}

.convesiopay-modal-top-title {
	font-size: 14px;
	font-weight: 500;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.convesiopay-modal-header {
	background: #0D2743;
	color: white;
	padding: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0;
	position: relative;
}

.convesiopay-modal-logo {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 24px;
	font-weight: 600;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.convesiopay-modal-close {
	background: none;
	border: none;
	color: #0D2743;
	font-size: 24px;
	cursor: pointer;
	padding: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background-color 0.2s;
}

.convesiopay-modal-close:hover {
	background: rgba(255, 255, 255, 0.1);
}

.convesiopay-modal-body {
	padding: 0;
	background: #F8F9FA;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.convesiopay-modal-container {
	padding: 24px;
	background: #FFFFFF;
	box-shadow: 0 8px 24px rgba(13, 39, 67, 0.15);
	border-radius: 6px;
	margin: 32px;
}

.convesiopay-modal-body h2 {
	margin: 0 0 12px 0;
	font-size: 28px;
	color: #0D2743;
	font-weight: 600;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	text-decoration: none;
	border-bottom: none;
}

.convesiopay-modal-body p {
	margin: 0 0 32px 0;
	color: #0D2743;
	line-height: 1.6;
	font-size: 16px;
	font-weight: 400;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.convesiopay-form-field {
	margin-bottom: 15px;
    margin-top: 15px;
}

.convesiopay-form-field label {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
	color: #0D2743;
	font-size: 14px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.convesiopay-form-field input {
	width: 100%;
	padding: 12px 16px;
	border: 2px solid #E5E7EB;
	border-radius: 4px;
	font-size: 16px;
	transition: all 0.3s ease;
	box-sizing: border-box;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	background: #FAFAFA;
	height: 44px;
}

.convesiopay-form-field input:focus {
	outline: none;
	border-color: #FF6A5B;
	box-shadow: 0 0 0 3px rgba(255, 106, 91, 0.1);
	background: white;
}

.convesiopay-form-field input.error {
	border-color: #e74c3c;
	background: #fef2f2;
}

.convesiopay-form-field input.error:focus {
	border-color: #e74c3c;
	box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

.convesiopay-form-field-help {
	margin-top: 6px;
	font-size: 12px;
	line-height: 1.4;
	color: #616161;
}

.convesiopay-admin-key-link {
	text-align: right;
	margin-bottom: 24px;
}

.convesiopay-admin-key-link a {
	color: #3B82F6;
	text-decoration: underline;
	font-size: 14px;
	font-weight: 500;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	transition: color 0.2s ease;
}

.convesiopay-admin-key-link a:hover {
	color: #2563EB;
}

.convesiopay-modal-actions {
	margin-top: 32px;
}

.convesiopay-btn-primary {
	width: 100%;
	background: #FF6A5B;
	color: white;
	border: none;
	padding: 12px;
	border-radius: 4px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	height: 40px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.convesiopay-btn-primary:hover {
	background: #E55A4A;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(255, 106, 91, 0.3);
}

.convesiopay-btn-primary:disabled {
	background: #9CA3AF;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* Ensure all primary buttons use brand primary color */
#convesiopay-disconnect-modal .convesiopay-btn-primary,
#convesiopay-modal .convesiopay-btn-primary {
	background: #FF6A5B;
}

/* Checkout Theme Selector Styles - Toggle Switch */
.convesiopay-theme-selector {
	width: 100%;
	margin-top: 16px;
	display: flex;
	align-items: center;
	gap: 16px;
}

.convesiopay-theme-selector .theme-label {
	font-size: 14px;
	font-weight: 600;
	color: #0D2743;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	margin: 0;
	white-space: nowrap;
}

.theme-toggle-container {
	display: flex;
	align-items: center;
	gap: 12px;
}

.theme-toggle-label {
	font-size: 14px;
	font-weight: 500;
	color: #666;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	transition: all 0.3s ease;
	user-select: none;
}

.theme-toggle-label.active {
	color: #0D2743;
	font-weight: 600;
}

.theme-toggle-switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 32px;
	cursor: pointer;
}

.theme-toggle-switch input[type="checkbox"] {
	opacity: 0;
	width: 0;
	height: 0;
}

.theme-toggle-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #e1e4e8;
	transition: all 0.3s ease;
	border-radius: 32px;
	border: 2px solid #d1d5db;
}

.theme-toggle-slider:before {
	position: absolute;
	content: "";
	height: 24px;
	width: 24px;
	left: 2px;
	bottom: 2px;
	background-color: white;
	transition: all 0.3s ease;
	border-radius: 50%;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.theme-toggle-switch input[type="checkbox"]:checked + .theme-toggle-slider {
	background-color: #FF6A5B;
	border-color: #FF6A5B;
}

.theme-toggle-switch input[type="checkbox"]:checked + .theme-toggle-slider:before {
	transform: translateX(28px);
}

.theme-toggle-switch:hover .theme-toggle-slider {
	box-shadow: 0 0 0 3px rgba(255, 106, 91, 0.1);
}

.theme-toggle-switch input[type="checkbox"]:focus + .theme-toggle-slider {
	box-shadow: 0 0 0 3px rgba(255, 106, 91, 0.2);
}

/* Unified Gateway Label Selector Styles */
.convesiopay-unified-label-selector {
	width: 100%;
	padding-bottom: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	border-bottom: 1px solid rgba(0, 0, 0, .183);
}

.convesiopay-unified-label-selector .unified-label-title {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: #0D2743;
}

.unified-label-container {
	display: flex;
	align-items: center;
	gap: 10px;
}

.unified-label-input {
	flex: 1;
	max-width: 250px;
	padding: 8px 12px;
	border: 2px solid #E5E7EB;
	border-radius: 4px;
	transition: all 0.3s ease;
	background: #FAFAFA;
}

.unified-label-input:focus {
	outline: none;
	border-color: #FF6A5B;
	box-shadow: 0 0 0 3px rgba(255, 106, 91, 0.1);
	background: white;
}

.unified-label-save-btn {
	background: #FF6A5B;
	color: white;
	border: none;
	padding: 8px 16px;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
}

.unified-label-save-btn:hover {
	background: #E55A4A;
	transform: translateY(-1px);
}

.unified-label-save-btn:disabled {
	background: #9CA3AF;
	cursor: not-allowed;
	transform: none;
}

.unified-label-description {
	color: #616161;
    font-size: 13px !important;
    word-break: break-all;
}

/* Card Icons Selection Styles */
.convesiopay-card-icons-selector {
	width: 100%;
	padding: 16px 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	border-bottom: 1px solid rgba(0, 0, 0, .183);
}

.convesiopay-card-icons-selector .card-icons-header {
	display: flex;
	align-items: center;
	gap: 16px;
}

.convesiopay-card-icons-selector .card-icons-title {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: #0D2743;
	white-space: nowrap;
}

/* Order list logo toggle */
.convesiopay-order-list-logo-selector {
	width: 100%;
	padding: 16px 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	border-bottom: 1px solid rgba(0, 0, 0, .183);
}

.convesiopay-order-list-logo-selector .order-list-logo-header {
	display: flex;
	align-items: center;
	gap: 12px;
}

.convesiopay-order-list-logo-selector .order-list-logo-title {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: #0D2743;
}

.convesiopay-order-list-logo-selector .order-list-logo-description {
	margin: 0;
	font-size: 12px;
	color: #646970;
	line-height: 1.4;
}

.convesiopay-accelerated-checkout-selector {
	width: 100%;
	padding: 16px 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	border-bottom: 1px solid rgba(0, 0, 0, .183);
}

.convesiopay-accelerated-checkout-selector {
	.accelerated-checkout-header {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.accelerated-checkout-icon-container {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		max-height: 36px !important;
	}

	.accelerated-checkout-icon {
		width: 36px;
		height: 36px;
	}

	.accelerated-checkout-icon:hover {
		filter: grayscale(0%);
	}

	.accelerated-checkout-title {
		margin: 0;
		font-size: 14px;
		font-weight: 600;
		color: #0D2743;
		display: inline-flex;
		align-items: center;
		gap: 8px;
	}

	.peachpay-new-feature-badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 2px 8px;
		border-radius: 999px;
		background: #FF6A5B;
		color: #fff;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: .2px;
		text-transform: uppercase;
		animation: peachpay-new-feature-pulse 1.4s ease-in-out infinite;
	}

	.accelerated-checkout-description {
		margin: 0;
		font-size: 12px;
		color: #646970;
		line-height: 1.4;
	}

	.accelerated-checkout-grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(220px, 1fr));
		gap: 10px 16px;
		margin: 0px;
	}

	.accelerated-checkout-field {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 13px;
		color: #1f2937;
	}

	.accelerated-checkout-actions {
		display: flex;
		align-items: center;
	}

	.accelerated-checkout-save-btn {
		padding: 8px 14px;
		border: none;
		border-radius: 6px;
		background: #FF6A5B;
		color: #fff;
		font-size: 13px;
		font-weight: 600;
		cursor: pointer;
		transition: background 0.2s ease;
	}

	.accelerated-checkout-save-btn:hover {
		background: #E55A4A;
	}

	.accelerated-checkout-save-btn:disabled {
		background: #9CA3AF;
		cursor: not-allowed;
	}
}

@keyframes peachpay-new-feature-pulse {
	0% {
		opacity: 1;
		box-shadow: 0 0 0 0 rgba(255, 106, 91, 0.45);
	}
	50% {
		opacity: .72;
		box-shadow: 0 0 0 6px rgba(255, 106, 91, 0);
	}
	100% {
		opacity: 1;
		box-shadow: 0 0 0 0 rgba(255, 106, 91, 0);
	}
}


.card-icons-checkboxes {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 4px;
}

.card-icon-checkbox-item {
	position: relative;
	cursor: pointer;
	user-select: none;
}

.card-icon-checkbox-item input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.card-icon-checkbox-visual {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border: 2px solid #e0e0e0;
	border-radius: 8px;
	background: #fff;
	transition: all 0.2s ease;
	min-width: 140px;
}

.card-icon-checkbox-item:hover .card-icon-checkbox-visual {
	border-color: #FF6A5B;
	background: #fff8f7;
}

.card-icon-checkbox-item input[type="checkbox"]:checked + .card-icon-checkbox-visual {
	border-color: #FF6A5B;
	background: #fff8f7;
}

.card-icon-preview {
	width: 40px;
	height: 25px;
	object-fit: contain;
	border-radius: 3px;
}

.card-icon-label {
	font-size: 13px;
	font-weight: 500;
	color: #333;
	flex: 1;
}

.card-icon-checkmark {
	width: 20px;
	height: 20px;
	border: 2px solid #d1d5db;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	color: transparent;
	background: #fff;
}

.card-icon-checkbox-item input[type="checkbox"]:checked + .card-icon-checkbox-visual .card-icon-checkmark {
	background: #FF6A5B;
	border-color: #FF6A5B;
	color: #fff;
}

/* Keep existing toggle slider styles for backward compatibility */
.card-icons-toggle-switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 32px;
	cursor: pointer;
}

.card-icons-toggle-switch input[type="checkbox"] {
	opacity: 0;
	width: 0;
	height: 0;
}

.card-icons-toggle-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #e1e4e8;
	transition: all 0.3s ease;
	border-radius: 32px;
	border: 2px solid #d1d5db;
}

.card-icons-toggle-slider:before {
	position: absolute;
	content: "";
	height: 24px;
	width: 24px;
	left: 2px;
	bottom: 2px;
	background-color: white;
	transition: all 0.3s ease;
	border-radius: 50%;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.card-icons-toggle-switch input[type="checkbox"]:checked + .card-icons-toggle-slider {
	background-color: #FF6A5B;
	border-color: #FF6A5B;
}

.card-icons-toggle-switch input[type="checkbox"]:checked + .card-icons-toggle-slider:before {
	transform: translateX(28px);
}

.card-icons-toggle-switch:hover .card-icons-toggle-slider {
	box-shadow: 0 0 0 3px rgba(255, 106, 91, 0.1);
}

.card-icons-toggle-switch input[type="checkbox"]:focus + .card-icons-toggle-slider {
	box-shadow: 0 0 0 3px rgba(255, 106, 91, 0.2);
}

.card-icons-description {
	color: #616161;
	font-size: 13px !important;
	word-break: break-all;
	margin: 0;
}
</style>

<script>
// Modal functions
function openConvesioPayModal() {
	document.getElementById('convesiopay-modal').style.display = 'flex';
	// Clear form fields and error states
	const emailField = document.getElementById('modal_convesiopay_email_id');
	const passwordField = document.getElementById('modal_convesiopay_password');
	const merchantApiKeyField = document.getElementById('modal_convesiopay_merchant_api_key');
	const adminKeyLink = document.querySelector('.convesiopay-admin-key-link a');
	const passwordLabel = passwordField.previousElementSibling;
	
	emailField.value = '';
	passwordField.value = '';
	merchantApiKeyField.value = '';
	emailField.classList.remove('error');
	passwordField.classList.remove('error');
	merchantApiKeyField.classList.remove('error');

	// Reset auth field to password mode each time modal is opened
	passwordField.type = 'password';
	passwordField.dataset.authMode = 'password';
	passwordField.placeholder = '';
	passwordLabel.textContent = 'Password';
	adminKeyLink.textContent = 'Use Admin Key';
	
	// Enable required validation when modal is visible
	emailField.required = true;
	passwordField.required = true;
	
	// Focus on email field
	setTimeout(() => emailField.focus(), 100);
}

function closeConvesioPayModal() {
	document.getElementById('convesiopay-modal').style.display = 'none';
	
	// Disable required validation when modal is hidden
	const emailField = document.getElementById('modal_convesiopay_email_id');
	const passwordField = document.getElementById('modal_convesiopay_password');
	const merchantApiKeyField = document.getElementById('modal_convesiopay_merchant_api_key');
	
	emailField.required = false;
	passwordField.required = false;
	merchantApiKeyField.required = false;
}



// Close modal with ESC key
document.addEventListener('keydown', function(event) {
	if (event.key === 'Escape') {
		closeConvesioPayModal();
		closeConvesioPayDisconnectModal();
	}
});

function peachpayConnectConvesioPayFromModal() {
	const emailField = document.getElementById('modal_convesiopay_email_id');
	const passwordField = document.getElementById('modal_convesiopay_password');
	const merchantApiKeyField = document.getElementById('modal_convesiopay_merchant_api_key');
	const email = emailField.value.trim();
	const authCredential = passwordField.value.trim();
	const merchantApiKey = merchantApiKeyField.value.trim();
	const authMode = passwordField.dataset.authMode === 'admin_key' ? 'admin_key' : 'password';

	// Clear previous error states
	emailField.classList.remove('error');
	passwordField.classList.remove('error');
	
	// Validate email
	if (!email) {
		emailField.classList.add('error');
		emailField.focus();
		alert('<?php echo esc_js( __( 'Please enter your email address', 'peachpay-for-woocommerce' ) ); ?>');
		return;
	}
	
	// Basic email format validation
	if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
		emailField.classList.add('error');
		emailField.focus();
		alert('<?php echo esc_js( __( 'Please enter a valid email address', 'peachpay-for-woocommerce' ) ); ?>');
		return;
	}

	// Validate password or admin key, based on selected mode
	if (!authCredential) {
		passwordField.classList.add('error');
		passwordField.focus();
		if (authMode === 'admin_key') {
			alert('<?php echo esc_js( __( 'Please enter your admin key', 'peachpay-for-woocommerce' ) ); ?>');
		} else {
			alert('<?php echo esc_js( __( 'Please enter your password', 'peachpay-for-woocommerce' ) ); ?>');
		}
		return;
	}

	const button = document.querySelector('.convesiopay-btn-primary');
	const originalText = button.textContent;
	button.disabled = true;
	button.textContent = 'CONNECTING...';

	const data = new FormData();
	data.append('action', 'peachpay_convesiopay_connect');
	data.append('nonce', '<?php echo wp_create_nonce( 'peachpay_convesiopay_connect' ); ?>');
	data.append('email', email);
	if (authMode === 'admin_key') {
		data.append('admin_client_key', authCredential);
	} else {
		data.append('password', authCredential);
	}
	data.append('merchant_api_key', merchantApiKey);

	fetch(ajaxurl, {
		method: 'POST',
		body: data
	})
	.then(response => response.json())
	.then(data => {
		if (data.success) {
			button.textContent = 'CONNECTED!';
			button.style.background = '#27ae60';
			setTimeout(() => {
				location.reload();
			}, 1000);
		} else {
			button.disabled = false;
			button.textContent = originalText;
			alert(data.data || '<?php echo esc_js( __( 'Failed to connect ConvesioPay account', 'peachpay-for-woocommerce' ) ); ?>');
		}
	})
	.catch(error => {
		button.disabled = false;
		button.textContent = originalText;
		alert('<?php echo esc_js( __( 'An error occurred while connecting ConvesioPay account', 'peachpay-for-woocommerce' ) ); ?>');
	});
}

// Toggle between password and admin key mode
function toggleAdminKeyMode() {
	const passwordField = document.getElementById('modal_convesiopay_password');
	const passwordLabel = passwordField.previousElementSibling;
	const adminKeyLink = document.querySelector('.convesiopay-admin-key-link a');
	
	if (passwordField.type === 'password') {
		// Switch to admin key mode
		passwordField.type = 'text';
		passwordField.placeholder = 'Enter your ConvesioPay Admin Key';
		passwordLabel.textContent = 'Admin Key';
		adminKeyLink.textContent = 'Use Password';
		passwordField.dataset.authMode = 'admin_key';
	} else {
		// Switch back to password mode
		passwordField.type = 'password';
		passwordField.placeholder = 'Enter your ConvesioPay Password';
		passwordLabel.textContent = 'Password';
		adminKeyLink.textContent = 'Use Admin Key';
		passwordField.dataset.authMode = 'password';
	}
}

// Legacy function for backward compatibility (if needed)
function peachpayConnectConvesioPay() {
	// This function is now handled by the modal
	openConvesioPayModal();
}

function peachpayDisconnectConvesioPay(event) {
	if (event) {
		event.preventDefault();
	}
	openConvesioPayDisconnectModal();
}

// Disconnect Modal functions
function openConvesioPayDisconnectModal() {
	document.getElementById('convesiopay-disconnect-modal').style.display = 'flex';
}

function closeConvesioPayDisconnectModal() {
	document.getElementById('convesiopay-disconnect-modal').style.display = 'none';
}

function confirmDisconnectConvesioPay(event) {
	if (event) {
		event.preventDefault();
	}
	const button = document.querySelector('#convesiopay-disconnect-modal .convesiopay-btn-primary');
	const originalText = button.textContent;
	button.disabled = true;
	button.textContent = 'DISCONNECTING...';

	const data = new FormData();
	data.append('action', 'peachpay_convesiopay_disconnect');
	data.append('nonce', '<?php echo wp_create_nonce( 'peachpay_convesiopay_disconnect' ); ?>');

	fetch(ajaxurl, {
		method: 'POST',
		body: data
	})
	.then(response => response.json())
	.then(data => {
		if (data.success) {
			location.reload();
		} else {
			alert(data.data || '<?php echo esc_js( __( 'Failed to disconnect ConvesioPay account', 'peachpay-for-woocommerce' ) ); ?>');
		}
	})
	.catch(error => {
		alert('<?php echo esc_js( __( 'An error occurred while disconnecting ConvesioPay account', 'peachpay-for-woocommerce' ) ); ?>');
	});
}

// Close disconnect modal when clicking outside
window.addEventListener('click', function(event) {
	const modal = document.getElementById('convesiopay-disconnect-modal');
	if (event.target === modal) {
		closeConvesioPayDisconnectModal();
	}
});

// Close main modal when clicking outside
window.addEventListener('click', function(event) {
	const modal = document.getElementById('convesiopay-modal');
	if (event.target === modal) {
		closeConvesioPayModal();
	}
});

// Close disconnect modal with ESC key
document.addEventListener('keydown', function(event) {
	if (event.key === 'Escape') {
		closeConvesioPayDisconnectModal();
	}
});

// Initialize form fields with required=false on page load to prevent validation errors
document.addEventListener('DOMContentLoaded', function() {
	const emailField = document.getElementById('modal_convesiopay_email_id');
	const passwordField = document.getElementById('modal_convesiopay_password');
	
	if (emailField && passwordField) {
		emailField.required = false;
		passwordField.required = false;
	}
});

// localStorage synchronization disabled for now

function showPaymentMethodsUpdateNotification() {
	// Remove any existing notification
	const existingNotification = document.getElementById('convesiopay-update-notification');
	if (existingNotification) {
		existingNotification.remove();
	}

	// Create notification
	const notification = document.createElement('div');
	notification.id = 'convesiopay-update-notification';
	notification.style.cssText = `
		background: #d1ecf1;
		border: 1px solid #bee5eb;
		color: #0c5460;
		padding: 12px 15px;
		margin: 15px 0;
		border-radius: 4px;
		position: relative;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
		font-size: 14px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	`;

	notification.innerHTML = `
		<div>
			<strong>ConvesioPay:</strong> Payment methods have been updated from WooCommerce Settings.
		</div>
		<div>
			<button onclick="location.reload()" style="
				background: #0c5460;
				color: white;
				border: none;
				padding: 6px 12px;
				border-radius: 3px;
				cursor: pointer;
				font-size: 12px;
				margin-left: 10px;
			">Refresh Page</button>
			<button onclick="document.getElementById('convesiopay-update-notification').remove()" style="
				background: transparent;
				color: #0c5460;
				border: none;
				padding: 6px 8px;
				cursor: pointer;
				font-size: 16px;
				margin-left: 5px;
			">&times;</button>
		</div>
	`;

	// Insert notification after the ConvesioPay header
	const header = document.querySelector('.payment-provider-header');
	if (header) {
		header.insertAdjacentElement('afterend', notification);
	}
}

/**
 * Toggle ConvesioPay checkout theme
 */
function toggleConvesioPayTheme(checkbox) {
	const theme = checkbox.checked ? 'dark' : 'light';
	const selector = document.querySelector('.convesiopay-theme-selector');
	const labels = document.querySelectorAll('.theme-toggle-label');

	// Show loading state
	selector.style.opacity = '0.6';
	selector.style.pointerEvents = 'none';

	const data = new FormData();
	data.append('action', 'peachpay_convesiopay_update_theme');
	data.append('nonce', '<?php echo wp_create_nonce( 'peachpay_convesiopay_update_theme' ); ?>');
	data.append('theme', theme);

	fetch(ajaxurl, {
		method: 'POST',
		body: data
	})
	.then(response => response.json())
	.then(data => {
		selector.style.opacity = '1';
		selector.style.pointerEvents = 'auto';

		if (data.success) {
			// Update label active states
			labels[0].classList.toggle('active', !checkbox.checked); // Light
			labels[1].classList.toggle('active', checkbox.checked);  // Dark
			showThemeUpdateNotification('success', 'Checkout theme updated successfully!');
		} else {
			// Revert toggle on error
			checkbox.checked = !checkbox.checked;
			showThemeUpdateNotification('error', data.data || 'Failed to update checkout theme');
		}
	})
	.catch(error => {
		selector.style.opacity = '1';
		selector.style.pointerEvents = 'auto';
		// Revert toggle on error
		checkbox.checked = !checkbox.checked;
		showThemeUpdateNotification('error', 'An error occurred while updating checkout theme');
	});
}

/**
 * Update ConvesioPay checkout theme (legacy function for backward compatibility)
 */
function updateConvesioPayTheme(theme) {
	const checkbox = document.getElementById('convesiopay_theme_toggle');
	if (checkbox) {
		checkbox.checked = (theme === 'dark');
		toggleConvesioPayTheme(checkbox);
	}
}

/**
 * Toggle ConvesioPay logo visibility in the order list
 */
function toggleConvesioPayOrderListLogo(checkbox) {
	const show = checkbox.checked ? 'yes' : 'no';
	const container = document.querySelector('.convesiopay-order-list-logo-selector');
	if (container) {
		container.style.opacity = '0.6';
		container.style.pointerEvents = 'none';
	}

	const data = new FormData();
	data.append('action', 'peachpay_convesiopay_update_order_list_logo');
	data.append('nonce', '<?php echo wp_create_nonce( 'peachpay_convesiopay_update_order_list_logo' ); ?>');
	data.append('show', show);

	fetch(ajaxurl, { method: 'POST', body: data })
		.then(function(response) { return response.json(); })
		.then(function(result) {
			if (container) {
				container.style.opacity = '1';
				container.style.pointerEvents = 'auto';
			}
			if (!result.success) {
				checkbox.checked = !checkbox.checked;
			}
		})
		.catch(function() {
			if (container) {
				container.style.opacity = '1';
				container.style.pointerEvents = 'auto';
			}
			checkbox.checked = !checkbox.checked;
		});
}

/**
 * Build accelerated checkout settings payload from the current UI.
 */
function getConvesioPayAcceleratedCheckoutSettingsPayload() {
	return {
		applepay_enabled: document.getElementById('convesiopay_accelerated_applepay_enabled')?.checked ? 'yes' : 'no',
		googlepay_enabled: document.getElementById('convesiopay_accelerated_googlepay_enabled')?.checked ? 'yes' : 'no',
		checkout_enabled: document.getElementById('convesiopay_accelerated_checkout_enabled')?.checked ? 'yes' : 'no',
		cart_enabled: document.getElementById('convesiopay_accelerated_cart_enabled')?.checked ? 'yes' : 'no',
		product_enabled: document.getElementById('convesiopay_accelerated_product_enabled')?.checked ? 'yes' : 'no'
	};
}

/**
 * Save ConvesioPay accelerated checkout settings.
 */
function saveConvesioPayAcceleratedCheckoutSettings() {
	const container = document.querySelector('.convesiopay-accelerated-checkout-selector');
	const button = document.querySelector('.accelerated-checkout-save-btn');

	if (!container || !button) {
		return;
	}

	const originalButtonText = button.textContent;
	button.disabled = true;
	button.textContent = 'Saving...';
	container.style.opacity = '0.6';
	container.style.pointerEvents = 'none';

	const data = new FormData();
	data.append('action', 'peachpay_convesiopay_update_accelerated_checkout_settings');
	data.append('nonce', '<?php echo wp_create_nonce( 'peachpay_convesiopay_update_accelerated_checkout_settings' ); ?>');
	data.append('settings', JSON.stringify(getConvesioPayAcceleratedCheckoutSettingsPayload()));

	fetch(ajaxurl, {
		method: 'POST',
		body: data
	})
	.then(response => response.json())
	.then(result => {
		container.style.opacity = '1';
		container.style.pointerEvents = 'auto';
		button.disabled = false;
		button.textContent = originalButtonText;

		if (result.success) {
			showConvesioPayAcceleratedCheckoutNotification('success', 'Accelerated checkout settings updated successfully!');
		} else {
			showConvesioPayAcceleratedCheckoutNotification('error', result?.data?.message || 'Failed to update accelerated checkout settings.');
		}
	})
	.catch(() => {
		container.style.opacity = '1';
		container.style.pointerEvents = 'auto';
		button.disabled = false;
		button.textContent = originalButtonText;
		showConvesioPayAcceleratedCheckoutNotification('error', 'An error occurred while updating accelerated checkout settings.');
	});
}

/**
 * Show accelerated checkout save notification.
 */
function showConvesioPayAcceleratedCheckoutNotification(type, message) {
	const existingNotification = document.getElementById('convesiopay-accelerated-checkout-notification');
	if (existingNotification) {
		existingNotification.remove();
	}

	const notification = document.createElement('div');
	notification.id = 'convesiopay-accelerated-checkout-notification';

	const isSuccess = type === 'success';
	notification.style.cssText = `
		background: ${isSuccess ? '#d1f2eb' : '#f8d7da'};
		border: 1px solid ${isSuccess ? '#c3e6cb' : '#f5c6cb'};
		color: ${isSuccess ? '#155724' : '#721c24'};
		padding: 5px 10px;
		margin: 10px 0px 0px 0px;
		border-radius: 4px;
		position: relative;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
		font-size: 14px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	`;

	notification.innerHTML = `
		<div>
			<strong>${isSuccess ? '✓' : '✗'} ConvesioPay:</strong> ${message}
		</div>
		<button onclick="document.getElementById('convesiopay-accelerated-checkout-notification').remove()" style="
			background: transparent;
			color: ${isSuccess ? '#155724' : '#721c24'};
			border: none;
			padding: 6px 8px;
			cursor: pointer;
			font-size: 16px;
			margin-left: 5px;
		">&times;</button>
	`;

	const selector = document.querySelector('.convesiopay-accelerated-checkout-selector');
	if (selector) {
		selector.appendChild(notification);
		if (isSuccess) {
			setTimeout(() => {
				if (notification.parentNode) {
					notification.remove();
				}
			}, 3000);
		}
	}
}

/**
 * Toggle unified gateway label save button based on input change
 */
function toggleUnifiedLabelSaveButton() {
	const input = document.getElementById('convesiopay_unified_gateway_label');
	const button = document.querySelector('.unified-label-save-btn');
	const originalValue = input.getAttribute('data-original-value');
	const currentValue = input.value.trim();

	// Enable button only if value has changed and is not empty
	button.disabled = (currentValue === originalValue || currentValue === '');
}

/**
 * Save unified gateway label
 */
function saveUnifiedGatewayLabel() {
	const input = document.getElementById('convesiopay_unified_gateway_label');
	const button = document.querySelector('.unified-label-save-btn');
	const label = input.value.trim();

	// Validate label
	if (!label) {
		showUnifiedLabelNotification('error', 'Label cannot be empty');
		return;
	}

	if (label.length > 100) {
		showUnifiedLabelNotification('error', 'Label is too long (max 100 characters)');
		return;
	}

	// Show loading state
	const originalText = button.textContent;
	button.disabled = true;
	button.textContent = 'Saving...';

	const data = new FormData();
	data.append('action', 'peachpay_convesiopay_update_unified_label');
	data.append('nonce', '<?php echo wp_create_nonce( 'peachpay_convesiopay_update_unified_label' ); ?>');
	data.append('label', label);

	fetch(ajaxurl, {
		method: 'POST',
		body: data
	})
	.then(response => response.json())
	.then(data => {
		button.disabled = false;
		button.textContent = originalText;

		if (data.success) {
			// Update original value so button stays disabled until next change
			input.setAttribute('data-original-value', label);
			button.disabled = true;
			showUnifiedLabelNotification('success', 'Unified gateway label updated successfully!');
		} else {
			showUnifiedLabelNotification('error', data.data?.message || 'Failed to update unified gateway label');
		}
	})
	.catch(error => {
		button.disabled = false;
		button.textContent = originalText;
		showUnifiedLabelNotification('error', 'An error occurred while updating unified gateway label');
	});
}

/**
 * Show unified label update notification
 */
function showUnifiedLabelNotification(type, message) {
	// Remove any existing notification
	const existingNotification = document.getElementById('convesiopay-unified-label-notification');
	if (existingNotification) {
		existingNotification.remove();
	}

	// Create notification
	const notification = document.createElement('div');
	notification.id = 'convesiopay-unified-label-notification';

	const isSuccess = type === 'success';
	notification.style.cssText = `
		background: ${isSuccess ? '#d1f2eb' : '#f8d7da'};
		border: 1px solid ${isSuccess ? '#c3e6cb' : '#f5c6cb'};
		color: ${isSuccess ? '#155724' : '#721c24'};
		padding: 5px 10px;
    	margin: 10px 0px 0px 0px;
		border-radius: 4px;
		position: relative;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
		font-size: 14px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	`;

	notification.innerHTML = `
		<div>
			<strong>${isSuccess ? '✓' : '✗'} ConvesioPay:</strong> ${message}
		</div>
		<button onclick="document.getElementById('convesiopay-unified-label-notification').remove()" style="
			background: transparent;
			color: ${isSuccess ? '#155724' : '#721c24'};
			border: none;
			padding: 6px 8px;
			cursor: pointer;
			font-size: 16px;
			margin-left: 5px;
		">&times;</button>
	`;

	// Insert notification at the end of the unified label selector container
	const selector = document.querySelector('.convesiopay-unified-label-selector');
	if (selector) {
		selector.appendChild(notification);

		// Auto-remove success notifications after 3 seconds
		if (isSuccess) {
			setTimeout(() => {
				if (notification.parentNode) {
					notification.remove();
				}
			}, 3000);
		}
	}
}

/**
 * Show theme update notification
 */
function showThemeUpdateNotification(type, message) {
	// Remove any existing notification
	const existingNotification = document.getElementById('convesiopay-theme-notification');
	if (existingNotification) {
		existingNotification.remove();
	}

	// Create notification
	const notification = document.createElement('div');
	notification.id = 'convesiopay-theme-notification';

	const isSuccess = type === 'success';
	notification.style.cssText = `
		background: ${isSuccess ? '#d1f2eb' : '#f8d7da'};
		border: 1px solid ${isSuccess ? '#c3e6cb' : '#f5c6cb'};
		color: ${isSuccess ? '#155724' : '#721c24'};
		padding: 12px 15px;
		margin: 15px 0;
		border-radius: 4px;
		position: relative;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
		font-size: 14px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	`;

	notification.innerHTML = `
		<div>
			<strong>${isSuccess ? '✓' : '✗'} ConvesioPay:</strong> ${message}
		</div>
		<button onclick="document.getElementById('convesiopay-theme-notification').remove()" style="
			background: transparent;
			color: ${isSuccess ? '#155724' : '#721c24'};
			border: none;
			padding: 6px 8px;
			cursor: pointer;
			font-size: 16px;
			margin-left: 5px;
		">&times;</button>
	`;

	// Insert notification after the theme selector
	const selector = document.querySelector('.convesiopay-theme-selector');
	if (selector) {
		selector.insertAdjacentElement('afterend', notification);

		// Auto-remove success notifications after 3 seconds
		if (isSuccess) {
			setTimeout(() => {
				if (notification.parentNode) {
					notification.remove();
				}
			}, 3000);
		}
	}
}

/**
 * Update ConvesioPay card icons selection
 */
function updateConvesioPayCardIcons() {
	const selector = document.querySelector('.convesiopay-card-icons-selector');
	
	// Gather selected card icons
	const cardIcons = {
		visa: document.getElementById('convesiopay_card_icon_visa')?.checked ? 'yes' : 'no',
		mastercard: document.getElementById('convesiopay_card_icon_mastercard')?.checked ? 'yes' : 'no',
		amex: document.getElementById('convesiopay_card_icon_amex')?.checked ? 'yes' : 'no',
		discover: document.getElementById('convesiopay_card_icon_discover')?.checked ? 'yes' : 'no'
	};

	// Show loading state
	selector.style.opacity = '0.6';
	selector.style.pointerEvents = 'none';

	const data = new FormData();
	data.append('action', 'peachpay_convesiopay_update_card_icons');
	data.append('nonce', '<?php echo wp_create_nonce( 'peachpay_convesiopay_update_card_icons' ); ?>');
	data.append('card_icons', JSON.stringify(cardIcons));

	fetch(ajaxurl, {
		method: 'POST',
		body: data
	})
	.then(response => response.json())
	.then(data => {
		selector.style.opacity = '1';
		selector.style.pointerEvents = 'auto';

		if (data.success) {
			showCardIconsNotification('success', 'Card icons updated successfully!');
		} else {
			showCardIconsNotification('error', data.data?.message || 'Failed to update card icons');
		}
	})
	.catch(error => {
		selector.style.opacity = '1';
		selector.style.pointerEvents = 'auto';
		showCardIconsNotification('error', 'An error occurred while updating card icons');
	});
}

/**
 * Show card icons update notification
 */
function showCardIconsNotification(type, message) {
	// Remove any existing notification
	const existingNotification = document.getElementById('convesiopay-card-icons-notification');
	if (existingNotification) {
		existingNotification.remove();
	}

	// Create notification
	const notification = document.createElement('div');
	notification.id = 'convesiopay-card-icons-notification';

	const isSuccess = type === 'success';
	notification.style.cssText = `
		background: ${isSuccess ? '#d1f2eb' : '#f8d7da'};
		border: 1px solid ${isSuccess ? '#c3e6cb' : '#f5c6cb'};
		color: ${isSuccess ? '#155724' : '#721c24'};
		padding: 5px 10px;
		margin: 10px 0px 0px 0px;
		border-radius: 4px;
		position: relative;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
		font-size: 14px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	`;

	notification.innerHTML = `
		<div>
			<strong>${isSuccess ? '✓' : '✗'} ConvesioPay:</strong> ${message}
		</div>
		<button onclick="document.getElementById('convesiopay-card-icons-notification').remove()" style="
			background: transparent;
			color: ${isSuccess ? '#155724' : '#721c24'};
			border: none;
			padding: 6px 8px;
			cursor: pointer;
			font-size: 16px;
			margin-left: 5px;
		">&times;</button>
	`;

	// Insert notification at the end of the card icons selector container
	const selector = document.querySelector('.convesiopay-card-icons-selector');
	if (selector) {
		selector.appendChild(notification);

		// Auto-remove success notifications after 3 seconds
		if (isSuccess) {
			setTimeout(() => {
				if (notification.parentNode) {
					notification.remove();
				}
			}, 3000);
		}
	}
}
</script>