<?php
/**
 * Waiting page for BNPL
 */

use Flo_Checkout\Shared;defined( 'ABSPATH' ) || exit;

/**
 * QR code image data
 *
 * @var string $bnpl_qr
 */

/**
 * BNPL URL
 *
 * @var string $bnpl_url
 */

?><!DOCTYPE html>
<!--suppress HtmlRequiredLangAttribute -->
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<?php wp_head(); ?>
	<title><?php bloginfo( 'name' ); ?> - <?php esc_html_e( 'BNPL Waiting page', 'flo-checkout-plugin' ); ?></title>
</head>
<body class="northmill-bnpl-waiting-screen">
	<!-- Desktop -->
	<div class="bnpl-waiting-container" id="bnpl-waiting-container-desktop">
		<div id="desktop-qr-code-section" class="waiting-screen-section desktop-waiting-screen-section">
			<h1><?php esc_html_e( 'Choose your payment method', 'flo-checkout-plugin' ); ?></h1>
			<p><?php esc_html_e( 'Choose how you want to pay for your purchase with Northmill Pay Later. You can choose between an invoice for payment within 30 days or installment payments to spread the cost over time.', 'flo-checkout-plugin' ); ?></p>
			<div id="desktop-qr-container">
				<img src="data:image/png;base64,<?php echo esc_attr( $bnpl_qr ); ?>" alt="<?php esc_attr_e( 'QR Code', 'flo-checkout-plugin' ); ?>">
			</div>
			<a href="#" class="cancel-transaction-button">
				<?php esc_html_e( 'Cancel transaction', 'flo-checkout-plugin' ); ?>
			</a>
			<img class="logo desktop-logo" src="<?php echo esc_url( Shared::instance()->assets->get_package_assets_url() . 'images/northmill-logo.svg' ); ?>" alt="Northmill Logo">
		</div>

		<div id="desktop-waiting-section" class="waiting-screen-section" style="display:none;">
			<h1><?php esc_html_e( 'Please complete the transaction on your mobile', 'flo-checkout-plugin' ); ?></h1>
			<div id="desktop-spinner" class="spinner-container">
				<span class="text"><?php esc_html_e( 'Processing...', 'flo-checkout-plugin' ); ?></span>
				<img class="spinner" src="<?php echo esc_url( Shared::instance()->assets->get_package_assets_url() . 'images/nm-spinner.png' ); ?>" alt="Spinner">
			</div>
			<a href="#" class="cancel-transaction-button">
				<?php esc_html_e( 'Cancel transaction', 'flo-checkout-plugin' ); ?>
			</a>
			<img class="logo desktop-logo" src="<?php echo esc_url( Shared::instance()->assets->get_package_assets_url() . 'images/northmill-logo.svg' ); ?>" alt="Northmill Logo">
		</div>

		<div id="desktop-cancelling-section" class="waiting-screen-section" style="display:none;">
			<h1><?php esc_html_e( 'We are cancelling your transaction', 'flo-checkout-plugin' ); ?></h1>
			<p><?php esc_html_e( 'Please, do not leave or close this page, you will be automatically redirected when your transaction is cancelled.', 'flo-checkout-plugin' ); ?></p>
			<div id="desktop-spinner" class="spinner-container">
				<span class="text"><?php esc_html_e( 'Processing...', 'flo-checkout-plugin' ); ?></span>
				<img class="spinner" src="<?php echo esc_url( Shared::instance()->assets->get_package_assets_url() . 'images/nm-spinner.png' ); ?>" alt="Spinner">
			</div>
			<img class="logo desktop-logo" src="<?php echo esc_url( Shared::instance()->assets->get_package_assets_url() . 'images/northmill-logo.svg' ); ?>" alt="Northmill Logo">
		</div>
	</div>

	<!-- Mobile -->
	<div class="bnpl-waiting-container" id="bnpl-waiting-container-mobile">
		<div id="mobile-link-section" class="waiting-screen-section mobile-waiting-screen-section">
			<div class="mobile-icon-container">
				<img class="mobile-icon" src="<?php echo esc_url( Shared::instance()->assets->get_package_assets_url() . 'images/bnpl-icon.svg' ); ?>" alt="Northmill Logo">
			</div>
			<h1><?php esc_html_e( 'Choose your payment method', 'flo-checkout-plugin' ); ?></h1>
			<p><?php esc_html_e( 'Choose how you want to pay for your purchase with Northmill Pay Later. You can choose between an invoice for payment within 30 days or installment payments to spread the cost over time.', 'flo-checkout-plugin' ); ?></p>

			<a href="<?php echo esc_url( $bnpl_url ); ?>" id="bnpl-link" target="_blank" class="button bnpl-mobile">
				<?php esc_html_e( 'Proceed to payment', 'flo-checkout-plugin' ); ?>
			</a>
			<div id="mobile-spinner" class="small-spinner-container" style="display: none;">
				<img class="small-spinner" src="<?php echo esc_url( Shared::instance()->assets->get_package_assets_url() . 'images/nm-spinner-small.png' ); ?>" alt="Northmill Logo">
			</div>

			<a href="#" class="cancel-transaction-button">
				<?php esc_html_e( 'Cancel', 'flo-checkout-plugin' ); ?>
			</a>
			<img class="logo mobile-logo" src="<?php echo esc_url( Shared::instance()->assets->get_package_assets_url() . 'images/northmill-logo.svg' ); ?>" alt="Northmill Logo">
		</div>

		<div id="mobile-cancelling-section" class="waiting-screen-section mobile-waiting-screen-section" style="display: none;">
			<div class="mobile-icon-container">
				<img class="mobile-icon" src="<?php echo esc_url( Shared::instance()->assets->get_package_assets_url() . 'images/bnpl-icon.svg' ); ?>" alt="Northmill Logo">
			</div>
			<h1><?php esc_html_e( 'We are cancelling your transaction', 'flo-checkout-plugin' ); ?></h1>
			<p><?php esc_html_e( 'Please, do not leave or close this page, you will be automatically redirected when your transaction is cancelled.', 'flo-checkout-plugin' ); ?></p>

			<div id="mobile-spinner" class="small-spinner-container">
				<img class="small-spinner" src="<?php echo esc_url( Shared::instance()->assets->get_package_assets_url() . 'images/nm-spinner-small.png' ); ?>" alt="Northmill Logo">
			</div>

			<img class="logo mobile-logo" src="<?php echo esc_url( Shared::instance()->assets->get_package_assets_url() . 'images/northmill-logo.svg' ); ?>" alt="Northmill Logo">
		</div>
	</div>

	<?php wp_footer(); ?>
</body>
</html>
