<?php
/**
 * This file takes care of rendering all the connection successful messages.
 *
 * @package object-data-sync-for-salesforce\Helper\view
 *
 * @note WORDPRESS-DEVIATION-EXPLANATION
 *
 * NOTICE: The following template includes <style> and <script> tags directly in the HTML output.
 * This is a necessary deviation from WordPress best practices because:
 *  - The function rendering this template calls exit() to prevent further execution,
 *    so wp_enqueue_style(), wp_enqueue_script(), wp_add_inline_style(), and wp_add_inline_script()
 *    would not have a chance to output in the footer/header.
 *  - This is an admin-only display function.
 *  - Early exit is required to prevent the rest of the admin page from loading.
 *  - The styles/scripts are specific to this popup and not reused elsewhere.
 */

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

use MoSfSyncSalesforce\Services\Utils;

/**
 * Displays success message and further steps on successful connection with salesforce.
 *
 * @return void
 */
function mo_sf_sync_connect_to_salesforce_successful_message() {
	printf(
		'<div style="color: #3c763d; background-color: #dff0d8; padding:2%%; margin-bottom:20px; text-align:center; border:1px solid #AEDB9A; font-size:18pt; border-radius:10px; margin-top:17px;">%s</div>',
		esc_html__( 'Your connection with Salesforce is successful', 'object-data-sync-for-salesforce' )
	);
	?>
	<div style="display:block;text-align:center;margin-bottom:4%;margin-top:-3.5rem;">
		<div class="animation-ctn">
			<div class="icon icon--order-success svg">
				<svg xmlns="http://www.w3.org/2000/svg" width="154" height="154" aria-hidden="true">  
					<g fill="none" stroke="rgba(76, 175, 80, 0.5)" stroke-width="5"> 
						<circle cx="77" cy="77" r="72" style="stroke-dasharray:480px, 480px; stroke-dashoffset: 960px;" stroke-width="7"></circle>
						<circle id="colored" fill="#fff" cx="77" cy="77" r="72" style="stroke-dasharray:480px, 480px; stroke-dashoffset: 960px;"></circle>
						<polyline class="st0" stroke="rgba(76, 175, 80, 1)" stroke-width="7" points="43.5,77.8 63.7,97.9 112.2,49.4" style="stroke-dasharray:100px, 100px; stroke-dashoffset: 200px;"/>   
					</g> 
				</svg>
			</div>
		</div>
		<?php
		/**
		 * NOTICE: This template outputs inline <style> tags directly in HTML.
		 * This is a necessary deviation from WordPress best practices because:
		 *  - The function rendering this template calls exit() to prevent further execution,
		 *    so wp_enqueue_style() and wp_add_inline_style() would not execute.
		 *  - This is an admin-only display function.
		 *  - Styles are scoped only to this template and not reused elsewhere.
		 */
		?>
		<style>
			.animation-ctn { text-align:center; margin-top:5em; }
			@-webkit-keyframes checkmark {
				0% { stroke-dashoffset: 100px }
				100% { stroke-dashoffset: 200px }
			}
			@-ms-keyframes checkmark {
				0% { stroke-dashoffset: 100px }
				100% { stroke-dashoffset: 200px }
			}
			@keyframes checkmark {
				0% { stroke-dashoffset: 100px }
				100% { stroke-dashoffset: 0px }
			}
			@-webkit-keyframes checkmark-circle {
				0% { stroke-dashoffset: 480px }
				100% { stroke-dashoffset: 960px }
			}
			@-ms-keyframes checkmark-circle {
				0% { stroke-dashoffset: 240px }
				100% { stroke-dashoffset: 480px }
			}
			@keyframes checkmark-circle {
				0% { stroke-dashoffset: 480px }
				100% { stroke-dashoffset: 960px }
			}
			@keyframes colored-circle { 
				0% { opacity:0 }
				100% { opacity:1 }
			}
			.inlinesvg .svg svg { display: inline }
			.icon--order-success svg polyline {
				-webkit-animation: checkmark 0.25s ease-in-out 0.7s backwards;
				animation: checkmark 0.25s ease-in-out 0.7s backwards;
			}
			.icon--order-success svg circle {
				-webkit-animation: checkmark-circle 0.6s ease-in-out backwards;
				animation: checkmark-circle 0.6s ease-in-out backwards;
			}
			.icon--order-success svg circle#colored {
				-webkit-animation: colored-circle 0.6s ease-in-out 0.7s backwards;
				animation: colored-circle 0.6s ease-in-out 0.7s backwards;
			}
		</style>
	</div>

	<?php
	$button_style = 'margin-right: 10px;background: linear-gradient(0deg,rgb(14 42 71) 0,rgb(26 69 138) 100%)!important;cursor: pointer;font-size:15px;border: none;font-size: 1.1em;padding:0.7rem 1.5rem;border-radius:5px;color: #FFF;cursor: pointer;text-decoration: none;';
	$note_style   = 'background: #d5e2ff;padding: 0.2rem 1.5rem;border-radius: 5px;font-size: 1.1em;line-height: 1.4;border-left: 5px solid #77a1ff;';

	?>
	<br>
	<div style="<?php echo esc_attr( $note_style ); ?>">
		<b><?php esc_html_e( 'Note:', 'object-data-sync-for-salesforce' ); ?></b>
		<?php esc_html_e( 'Click on', 'object-data-sync-for-salesforce' ); ?>
		<b><?php esc_html_e( 'Next', 'object-data-sync-for-salesforce' ); ?></b>
		<?php esc_html_e( 'to map Salesforce and WordPress fields as next step to configure the sync.', 'object-data-sync-for-salesforce' ); ?>
	</div>

	<div style="margin:3%;display:block;text-align:center;">
		<input 
			type="button"
			style="<?php echo esc_attr( $button_style ); ?>"
			value="<?php echo esc_attr__( 'Next', 'object-data-sync-for-salesforce' ); ?>"
			onclick="close_and_redirect_to_field_mapping()"
			aria-label="<?php echo esc_attr__( 'Continue to field mapping configuration', 'object-data-sync-for-salesforce' ); ?>"
		>
	</div>
	<?php
	

	/**
	 * NOTICE: This template outputs inline <script> tags directly in HTML.
	 * This is a necessary deviation from WordPress best practices because:
	 *  - The function rendering this template calls exit() to prevent further execution,
	 *    so wp_enqueue_script() and wp_add_inline_script() would not execute.
	 *  - This is an admin-only display function.
	 *  - Scripts are scoped only to this template and not reused elsewhere.
	 */
	?>
	<script>

	if (typeof window.opener === 'undefined') {
		console.error('<?php echo esc_js( __( 'Window opener not found. The popup may not work correctly.', 'object-data-sync-for-salesforce' ) ); ?>');
	}


	window.opener.test_configuration_status()
	function close_and_redirect_to_field_mapping(){
		window.opener.redirect_to_field_mapping();
		self.close();
	}

	function close_and_redirect_to_advance_sync(){
		window.opener.close_and_redirect_to_advance_sync();
		self.close();
	}
	</script>
	<?php
}