<?php
/**
 * This file handles what to be displayed on the Account Setup tab.
 *
 * @package object-data-sync-for-salesforce\Helper\view
 */

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

use MoSfSyncSalesforce\Customer;
use MoSfSyncSalesforce\Services\Utils;

/**
 * Displays the content of the whole Account Setup tab.
 *
 * @return void
 */
function mo_sf_sync_display_account_setup() {
	$login = '';
	if ( isset( $_GET['login'] ) && check_admin_referer( 'mo_sf_sync_account_setup_option', '_wpnonce' ) ) {
		$login = sanitize_text_field( wp_unslash( $_GET['login'] ) );
	}
	?>
	<div class="mo-sf-sync-tab-content">
		<?php
		Utils::mo_sf_sync_show_message();
		Utils::mo_sf_sync_show_feedback_message();

		if ( Customer::mo_sf_sync_is_customer_logged_in() ) {
			mo_sf_sync_display_account_information();
		} elseif ( $login ) {
			?>
			<div class="mo-sf-bg-white mo-sf-mt-4">
				<h1 class="mo-sf-form-head">miniOrange Account Setup</h1>
				<div class="mo-sf-row mo-sf-ml-1" class="mo-sf-sync-flex-items-center">
					<div class="mo-sf-col-md-6">
						<?php mo_sf_sync_why_login_component(); ?>
						<div class="mo-sf-sync-section-divider"></div>
					</div>
					<div class="mo-sf-col-md-5 mo-sf-ml-2 mo-sf-sync-outer-form-container">
						<?php mo_sf_sync_display_show_login_page(); ?>
					</div>
				</div>
			</div>
			<?php

		} else {
			?>
			<div class="mo-sf-bg-white mo-sf-mt-4">
				<h1 class="mo-sf-form-head">miniOrange Account Setup</h1>
				<div class="mo-sf-row mo-sf-ml-1" class="mo-sf-sync-flex-items-center">
					<div class="mo-sf-col-md-6" style="position:relative;">
						<?php mo_sf_sync_why_reg_component(); ?>
						<div class="mo-sf-sync-section-divider"></div>
					</div>
					<div class="mo-sf-col-md-5 mo-sf-ml-2 mo-sf-sync-outer-form-container">
						<?php mo_sf_sync_display_register_customer(); ?>
					</div>
				</div>
			</div>

			<?php
		}
		?>

	</div>
	<?php
}

/**
 * Component to displays the reasons to log in with miniOrange account.
 *
 * @return void
 */
function mo_sf_sync_why_login_component() {
	?>
	<div class="mo-sf-mt-4 mo-sf-sync-inner-container">
		<h2>WHY SHOULD I LOGIN ?</h2>
		<hr>
		<div class="mo-sf-sync-checkpoint-container">
			<div class="mo-sf-sync-checkpoint-item">
				<div class="mo-sf-sync-checkpoint-item-head">
					<?php
					Utils::mo_sf_sync_render_image(
						'tick.svg',
						array(
							'alt'   => 'bullet-list-pointer',
							'class' => 'mo-sf-sync-mr-1',
						)
					);
					?>
					<h3>Easily Reach Out for Support</h3>
				</div>
				
				<div class="mo-sf-sync-checkpoint-item-content">
					Log in to contact us directly if you face any issues while setting up the plugin. We're here to help you every step of the way.
				</div>
			</div>

			<div class="mo-sf-sync-checkpoint-item">
				<div class="mo-sf-sync-checkpoint-item-head">
					<?php
					Utils::mo_sf_sync_render_image(
						'tick.svg',
						array(
							'alt'   => 'bullet-list-pointer',
							'class' => 'mo-sf-sync-mr-1',
						)
					);
					?>
					<h3>Upgrade to Paid Versions of the Plugin</h3>
				</div>
				
				<div class="mo-sf-sync-checkpoint-item-content">
					You will need a <span class="mo-sf-sync-com-title">miniOrange</span> Account to upgrade to the paid versions of the plugin.
				</div>
			</div>

			<div class="mo-sf-sync-checkpoint-item">
				<div class="mo-sf-sync-checkpoint-item-head">
					<?php
					Utils::mo_sf_sync_render_image(
						'tick.svg',
						array(
							'alt'   => 'bullet-list-pointer',
							'class' => 'mo-sf-sync-mr-1',
						)
					);
					?>
					<h3>Data Privacy Assurance</h3>
				</div>
				
				<div class="mo-sf-sync-checkpoint-item-content">
				We do not store any information except the email you use to register with us, ensuring your privacy is respected.
				</div>
			</div>
		</div>
	</div>
	<?php
}

/**
 * Component displays the reasons to register in with miniOrange account .
 *
 * @return void
 */
function mo_sf_sync_why_reg_component() {
	?>
	<div class="mo-sf-mt-4 mo-sf-sync-inner-container">
		<h2>WHY SHOULD I REGISTER ?</h2>
		<hr>
		<div class="mo-sf-sync-checkpoint-container">
			<div class="mo-sf-sync-checkpoint-item">
				<div class="mo-sf-sync-checkpoint-item-head">
					<?php
					Utils::mo_sf_sync_render_image(
						'tick.svg',
						array(
							'alt'   => 'bullet-list-pointer',
							'class' => 'mo-sf-sync-mr-1',
						)
					);
					?>
					<h3>Get Personalized, Step-by-Step Support</h3>
				</div>
				
				<div class="mo-sf-sync-checkpoint-item-content">
					You need to register so that if you need help, we can help you with the step-by-step instructions.
				</div>
			</div>

			<div class="mo-sf-sync-checkpoint-item">
				<div class="mo-sf-sync-checkpoint-item-head">
					<?php
					Utils::mo_sf_sync_render_image(
						'tick.svg',
						array(
							'alt'   => 'bullet-list-pointer',
							'class' => 'mo-sf-sync-mr-1',
						)
					);
					?>
					<h3>Inquiry regarding supported integrations</h3>
				</div>
				
				<div class="mo-sf-sync-checkpoint-item-content">
					We support a variety of WordPress plugin integrations. Register to reach out for new integrations or if you need help setting up existing ones.
				</div>
			</div>

			<div class="mo-sf-sync-checkpoint-item">
				<div class="mo-sf-sync-checkpoint-item-head">
					<?php
					Utils::mo_sf_sync_render_image(
						'tick.svg',
						array(
							'alt'   => 'bullet-list-pointer',
							'class' => 'mo-sf-sync-mr-1',
						)
					);
					?>
					<h3>Upgrade to Paid Versions of the Plugin</h3>
				</div>
				
				<div class="mo-sf-sync-checkpoint-item-content">
					You will need a <span class="mo-sf-sync-com-title">miniOrange</span> Account to upgrade to the paid versions of the plugin.
				</div>
			</div>

			<div class="mo-sf-sync-checkpoint-item">
				<div class="mo-sf-sync-checkpoint-item-head">
					<?php
					Utils::mo_sf_sync_render_image(
						'tick.svg',
						array(
							'alt'   => 'bullet-list-pointer',
							'class' => 'mo-sf-sync-mr-1',
						)
					);
					?>
					<h3>Data Privacy Assurance</h3>
				</div>
				
				<div class="mo-sf-sync-checkpoint-item-content">
					We do not store any information except the email you use to register with us, ensuring your privacy is respected.
				</div>
			</div>

		</div>
	</div>
	<?php
}

/**
 * Displays miniOrange registration form when user is not logged in with miniOrange account.
 *
 * @return void
 */
function mo_sf_sync_display_register_customer() {
	?>
	<form class="mo_sf_sync_ajax_submit_form_2" id="mo_sf_sync_account_form" method="post">
		<input type="hidden" name="option" value="mo_sf_sync_account_registration">
		<input type="hidden" name="tab" value="account_setup">
		<?php wp_nonce_field( 'mo_sf_sync_account_registration' ); ?>
		<div class="mo-sf-sync-account-setup-form-container">
			<h2>Register with <span class="mo-sf-sync-com" >miniOrange</span></h2>

			<div class="mo-sf-sync-account-setup-form-input-group">
				<label for="email">Email <sup class="mo-sf-sync-req-field">*</sup></label>
				<div class="mo-sf-sync-account-setup-form-input-field">
					<?php
					Utils::mo_sf_sync_render_image(
						'email.svg',
						array(
							'alt' => 'Email',
						)
					);
					?>
					<input type="email" id="account_email_reg" name="account_email_reg" placeholder="Enter your email" required>
				</div>
			</div>

			<div class="mo-sf-sync-account-setup-form-input-group">
				<label for="password">Password <sup class="mo-sf-sync-req-field">*</sup></label>
				<div class="mo-sf-sync-account-setup-form-input-field">
					<?php
					Utils::mo_sf_sync_render_image(
						'lock.svg',
						array(
							'alt' => 'Password',
						)
					);
					?>
					<input type="password" id="reg_account_pwd" placeholder="Enter your password" name="reg_account_pwd" minlength="6"  maxlength="15" pattern="^[a-zA-Z0-9!@#\$%\^&*\-_.]{6,15}$" title="Minimum 6 characters should be present. Maximum 15 characters should be present. Only following symbols (!@#.$%^&*-_) should be present" required>
				</div>
			</div>

			<div class="mo-sf-sync-account-setup-form-input-group">
				<label for="password">Confirm Password <sup class="mo-sf-sync-req-field">*</sup></label>
				<div class="mo-sf-sync-account-setup-form-input-field">
					<?php
					Utils::mo_sf_sync_render_image(
						'lock.svg',
						array(
							'alt' => 'Password',
						)
					);
					?>
					<input type="password" id="confirm_account_pwd" placeholder="Enter your password" name="confirm_account_pwd" minlength="6"  maxlength="15" pattern="^[a-zA-Z0-9!@#\$%\^&*\-_.]{6,15}$" title="Minimum 6 characters should be present. Maximum 15 characters should be present. Only following symbols (!@#.$%^&*-_) should be present" required>
				</div>
			</div>

			<div class="mo-sf-sync-account-setup-form-add">
				<a href="
				<?php
				echo esc_url(
					add_query_arg(
						array(
							'page'     => 'mo_sf_sync',
							'tab'      => 'account_setup',
							'login'    => '1',
							'_wpnonce' => wp_create_nonce( 'mo_sf_sync_account_setup_option' ),
						),
						admin_url( 'admin.php' )
					)
				);
				?>
				">Already have an account?</a>
			</div>

			<button type="submit" class="mo-sf-btn-cstm mo-sf-sync-form-btn" >Register</button>
		</div>
	</form>
	<?php
}

/**
 * Displays the miniOrange account information when user is logged in with miniOrange account.
 *
 * @return void
 */
function mo_sf_sync_display_account_information() {
	?>
	<form class="mo_sf_sync_ajax_submit_form_2" id="mo_sf_sync_remove_account_form" method="post">
		<input type="hidden" name="option" value="mo_sf_sync_remove_account_option">
		<input type="hidden" name="tab" value="account_setup">
		<?php wp_nonce_field( 'mo_sf_sync_remove_account_option' ); ?>
		<div style="width: 100%;">
			<div class="mo-sf-sync-tab-content-tile mo-sf-mt-4 ">
				<h1 class="mo-sf-form-head">Thank you for registering with miniOrange.</h1>
				<div class="mo-sf-row mo-sf-container-fluid">
					<div class="mo-sf-col-md-8 mo-sf-mt-4 mo-sf-ml-5">
						<div class="p-4 mo-sf-shadow-cstm bg-white rounded">
							<div class="mo-sf-sync-account-details-container">
								<h2>Customer Details</h2>
								<div class="mo-sf-sync-customer-detail-card" >
									<h3>miniOrange Account Email</h3>
									<p><?php echo esc_attr( get_option( 'mo_sf_sync_admin_email' ) ); ?></p>
								</div>
								
								<div class="mo-sf-sync-customer-detail-card">
									<h3>Customer ID</h3>
									<p><?php echo esc_attr( get_option( 'mo_sf_sync_admin_customer_key' ) ); ?></p>
								</div>
							</div>
						</br>
						<input type="submit" class="mo-sf-btn-cstm" value="Remove Account">
					</div>
				</div>
			</div>
		</div>
	</form>
	<?php
}

/**
 * Displays the login form to setup miniOrange account.
 *
 * @return void
 */
function mo_sf_sync_display_show_login_page() {
	$account_email       = get_option( 'mo_sf_sync_admin_email' );
	$forgot_password_url = 'https://portal.miniorange.com/forgotpassword';

	?>
	<div class="login">
		<form class="mo_sf_sync_ajax_submit_form_2" id="mo_sf_sync_account_form" method="post">
			<input type="hidden" name="option" value="mo_sf_sync_account_setup_option">
			<input type="hidden" name="tab" value="account_setup">
			<?php wp_nonce_field( 'mo_sf_sync_account_setup_option' ); ?>
			<div class="mo-sf-sync-account-setup-form-container">
				<h2>Login to <span class="mo-sf-sync-com">miniOrange</span></h2>

				<div class="mo-sf-sync-account-setup-form-input-group">
					<label for="email">Email <sup class="mo-sf-sync-req-field">*</sup></label>
					<div class="mo-sf-sync-account-setup-form-input-field">
						<?php
						Utils::mo_sf_sync_render_image(
							'email.svg',
							array(
								'alt' => 'Email',
							)
						);
						?>
						<input type="email" id="account_email" name="account_email" value='<?php echo esc_html( $account_email ); ?>' placeholder="Enter your email" required>
					</div>
				</div>

				<div class="mo-sf-sync-account-setup-form-input-group">
					<label for="password">Password <sup class="mo-sf-sync-req-field">*</sup></label>
					<div class="mo-sf-sync-account-setup-form-input-field">
						<?php
						Utils::mo_sf_sync_render_image(
							'lock.svg',
							array(
								'alt' => 'Password',
							)
						);
						?>
						<input type="password" id="account_pwd" placeholder="Enter your password" name="account_pwd" minlength="6"  maxlength="15" pattern="^[a-zA-Z0-9!@#\$%\^&*\-_.]{6,15}$" title="Minimum 6 characters should be present. Maximum 15 characters should be present. Only following symbols (!@#.$%^&*-_) should be present" required>
					</div>
				</div>

				<div class="mo-sf-sync-account-setup-form-add mo-sf-sync-flex-space-between">
					<a href="<?php echo esc_url( $forgot_password_url ); ?>" target="_blank" class="mo-sf-acc-login">Forgot password?</a>
					<a href="
					<?php
					echo esc_url(
						add_query_arg(
							array(
								'page' => 'mo_sf_sync',
								'tab'  => 'account_setup',
							),
							admin_url( 'admin.php' )
						)
					);
					?>
					">Don't have an account?</a>
				</div>

				<button type="submit" class="mo-sf-btn-cstm mo-sf-sync-form-btn">Login</button>
			</div> 
		</form>
	</div>
	<?php
}
