<?php // phpcs:ignoreFile
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
?>

<div class="verifone-bluecommerce-onboarding">
	<div class="top-bar">
		<img src="<?php echo esc_url( WC_VERIFONE_PLUGIN_URL . '/assets/img/logo-verifone-verkkomaksut-white.png' ); ?>" alt="<?php esc_attr_e( 'Verifone eCommerce', 'verifone-bluecommerce-for-woocommerce' ); ?>" />
		<p><?php esc_html_e( "Getting started with Verifone eCommerce is quick and simple. After you've received your merchant code and TCS portal credentials from Verifone, you're just a few clicks away from being ready to accept payments in your online store.", 'verifone-bluecommerce-for-woocommerce' ); ?></p>
	</div>
	<div class="steps">
		<ol>
			<li class="step<?php echo 'merchant' === $context['active_step'] ? ' step-active' : ''; ?>">
				<div class="icon">
					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-user-code"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0" /><path d="M6 21v-2a4 4 0 0 1 4 -4h3.5" /><path d="M20 21l2 -2l-2 -2" /><path d="M17 17l-2 2l2 2" /></svg>
				</div>
				<div class="content">
					<h3><?php esc_html_e( 'Set your merchant code', 'verifone-bluecommerce-for-woocommerce' ); ?></h3>
					<p><?php esc_html_e( "Enter the EC ID (merchant code) you received from Verifone. If you don't yet have a contract, contact Verifone sales (myynti@verifone.fi / 09 477 433 00).", 'verifone-bluecommerce-for-woocommerce' ); ?></p>
					<input type="text" name="woocommerce_verifone_merchant_agreement" placeholder="<?php echo esc_attr( $context['merchant_code'] ); ?>" value="" <?php echo 'merchant' === $context['active_step'] ? '' : 'disabled'; ?> />
					<input type="submit" name="save" value="<?php esc_attr_e( 'Save', 'verifone-bluecommerce-for-woocommerce' ); ?>" class="button<?php echo 'merchant' === $context['active_step'] ? ' button-primary' : ''; ?>" <?php echo 'merchant' === $context['active_step'] ? '' : 'disabled'; ?> >
				</div>
			</li>
			<li class="step<?php echo 'tcs' === $context['active_step'] ? ' step-active' : ''; ?>">
				<div class="icon">
					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-plug-connected"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 12l5 5l-1.5 1.5a3.536 3.536 0 1 1 -5 -5l1.5 -1.5z" /><path d="M17 12l-5 -5l1.5 -1.5a3.536 3.536 0 1 1 5 5l-1.5 1.5z" /><path d="M3 21l2.5 -2.5" /><path d="M18.5 5.5l2.5 -2.5" /><path d="M10 11l-2 2" /><path d="M13 14l-2 2" /></svg>
				</div>
				<div class="content">
					<h3><?php esc_html_e( 'Connect your webstore', 'verifone-bluecommerce-for-woocommerce' ); ?></h3>
					<p><?php esc_html_e( "Enable communication with Verifone. Button pre-fills information on TCS, you'll need to just submit the form. Settlement bank account can be configured at this stage as well. You will be redirected back here.", 'verifone-bluecommerce-for-woocommerce' ); ?></p>
					<p><a href="<?php echo esc_url( $context['tcs_url'] ) ?>" class="button<?php echo 'tcs' === $context['active_step'] ? ' button-primary' : ' disabled'; ?>"><?php esc_html_e( 'Go to TCS portal', 'verifone-bluecommerce-for-woocommerce' ); ?> &rarr;</a></p>
				</div>
			</li>
			<li class="step step-done <?php echo 'done' === $context['active_step'] ? ' step-active' : ''; ?>">
				<div class="icon">
					<svg xmlns="http://www.w3.org/2000/svg" class="confetti-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
						<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 5h2" /><path d="M5 4v2" /><path d="M11.5 4l-.5 2" /><path d="M18 5h2" /><path d="M19 4v2" /><path d="M15 9l-1 1" /><path d="M18 13l2 -.5" /><path d="M18 19h2" /><path d="M19 18v2" /><path d="M14 16.518l-6.518 -6.518l-4.39 9.58a1 1 0 0 0 1.329 1.329l9.579 -4.39z" />
						<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
						<path class="confetti-piece piece-1" d="M4 5h2"></path>
						<path class="confetti-piece piece-2" d="M5 4v2"></path>
						<path class="confetti-piece piece-3" d="M11.5 4l-.5 2"></path>
						<path class="confetti-piece piece-4" d="M18 5h2"></path>
						<path class="confetti-piece piece-5" d="M19 4v2"></path>
						<path class="confetti-piece piece-6" d="M15 9l-1 1"></path>
						<path class="confetti-piece piece-7" d="M18 13l2 -.5"></path>
						<path class="confetti-piece piece-8" d="M18 19h2"></path>
						<path class="confetti-piece piece-9" d="M19 18v2"></path>
						<path class="confetti-piece piece-10" d="M8 12l.5 2"></path>
						<path class="confetti-piece piece-11" d="M7 13.5l2 .5"></path>
					</svg>
				</div>
				<div class="content">
					<h3><?php esc_html_e( 'You are all set!', 'verifone-bluecommerce-for-woocommerce' ); ?></h3>
					<p><?php esc_html_e( "Great! You're now ready to start accepting payments. Remember to enable the gateway.", 'verifone-bluecommerce-for-woocommerce' ); ?></p>
					<p><?php esc_html_e( "Available payment methods are synchronized automatically. You can tweak the appearance of the payment methods from settings below.", 'verifone-bluecommerce-for-woocommerce' ); ?></p>
				</div>
			</li>
		</ol>
	</div>
</div>
