<?php
/**
 * Abandoned Cart Phone Capture Popup Template.
 *
 * @package automation-web-platform
 */

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

$wawp_popup_title         = $this->get_wawp_setting( WAWP_Settings_Registry::AC_POPUP_TITLE, esc_html__( 'Add your WhatsApp Number', 'automation-web-platform' ) );
$wawp_popup_description   = $this->get_wawp_setting( WAWP_Settings_Registry::AC_POPUP_DESCRIPTION, esc_html__( 'To get a better experience with our website.', 'automation-web-platform' ) );
$wawp_popup_image_url     = $this->get_wawp_setting( WAWP_Settings_Registry::AC_POPUP_IMAGE_URL, '' );
$wawp_popup_image_type    = $this->get_wawp_setting( WAWP_Settings_Registry::AC_POPUP_IMAGE_TYPE, 'inline' );
$wawp_popup_save_btn      = $this->get_wawp_setting( WAWP_Settings_Registry::AC_POPUP_SAVE_BTN, esc_html__( 'Save', 'automation-web-platform' ) );
$wawp_popup_success_title = $this->get_wawp_setting( WAWP_Settings_Registry::AC_POPUP_SUCCESS_TITLE, esc_html__( 'Excellent!', 'automation-web-platform' ) );
$wawp_popup_success_desc  = $this->get_wawp_setting( WAWP_Settings_Registry::AC_POPUP_SUCCESS_DESC, esc_html__( 'You can now browse our website better.', 'automation-web-platform' ) );
$wawp_popup_continue_btn  = $this->get_wawp_setting( WAWP_Settings_Registry::AC_POPUP_CONTINUE_BTN, esc_html__( 'Continue browsing', 'automation-web-platform' ) );
?>
<div id="pnp-popup" class="pnp-popup-overlay">
	<div class="pnp-popup-content">
		<?php if ( $wawp_popup_image_url && 'banner' === $wawp_popup_image_type ) : ?>
			<div class="pnp-popup-banner-image">
				<img src="<?php echo esc_url( $wawp_popup_image_url ); ?>" alt="Banner">
			</div>
		<?php endif; ?>
		<span class="pnp-close" aria-label="<?php esc_attr_e( 'Close popup', 'automation-web-platform' ); ?>">&times;</span>
		
		<div class="pnp-popup-body">
			<?php if ( $wawp_popup_image_url && 'inline' === $wawp_popup_image_type ) : ?>
				<div class="pnp-popup-inline-image">
					<img src="<?php echo esc_url( $wawp_popup_image_url ); ?>" alt="Icon">
				</div>
			<?php endif; ?>
			<h2 class="pnp-popup-title"><?php echo esc_html( $wawp_popup_title ); ?></h2>
			<p class="pnp-popup-des"><?php echo esc_html( $wawp_popup_description ); ?></p>
			
			<div class="pnp-input-wrapper">
				<input type="tel" class="input-text" name="billing_phone" id="billing_phone_popup" placeholder="" value="" autocomplete="tel">
			</div>
			
			<p id="phone-check-message" class="pnp-message pnp-success wawp-hide">
				<?php esc_html_e( 'You are already a member.', 'automation-web-platform' ); ?>
				<a href="/login"><?php esc_html_e( 'Log in', 'automation-web-platform' ); ?></a>
			</p>
			
			<p id="pnp-error-message" class="pnp-message pnp-error wawp-hide"></p>
			
			<button id="pnp-save-phone" class="pnp-button">
				<span class="button-text"><?php echo esc_html( $wawp_popup_save_btn ); ?></span>
				<span class="loading-spinner wawp-hide"></span>
			</button>
		</div>

		<div class="pnp-otp-state wawp-hide">
			<button class="pnp-back-to-input" aria-label="<?php esc_attr_e( 'Back', 'automation-web-platform' ); ?>">
				<svg class="pnp-back-icon" viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
					<line x1="19" y1="12" x2="5" y2="12"></line>
					<polyline points="12 19 5 12 12 5"></polyline>
				</svg>
				<?php esc_html_e( 'Back', 'automation-web-platform' ); ?>
			</button>
			<h2 class="pnp-popup-title"><?php esc_html_e( 'Verification Code', 'automation-web-platform' ); ?></h2>
			<p class="pnp-popup-des"><?php esc_html_e( 'We have sent a verification code to your phone. Please enter it below.', 'automation-web-platform' ); ?></p>
			
			<div class="wawp-hide" id="wawp-firebase-recaptcha-popup"></div>
			
			<div class="pnp-otp-input-wrapper">
				<input type="text" class="input-text pnp-otp-code-input" id="pnp-otp-code" placeholder="------" maxlength="6" autocomplete="one-time-code">
			</div>

			<p id="pnp-otp-error-message" class="pnp-message pnp-error wawp-hide"></p>

			<button id="pnp-verify-otp" class="pnp-button">
				<span class="button-text"><?php esc_html_e( 'Verify & Complete', 'automation-web-platform' ); ?></span>
				<span class="loading-spinner wawp-hide"></span>
			</button>

			<div class="pnp-otp-resend-wrapper">
				<button id="pnp-resend-otp" class="pnp-link-button" disabled>
					<?php esc_html_e( 'Resend OTP', 'automation-web-platform' ); ?> (<span id="pnp-otp-cooldown">30</span>s)
				</button>
			</div>
		</div>

		<div class="pnp-list-pending-state wawp-hide">
			<button class="pnp-back-to-input" aria-label="<?php esc_attr_e( 'Back', 'automation-web-platform' ); ?>">
				<svg class="pnp-back-icon" viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
					<line x1="19" y1="12" x2="5" y2="12"></line>
					<polyline points="12 19 5 12 12 5"></polyline>
				</svg>
				<?php esc_html_e( 'Back', 'automation-web-platform' ); ?>
			</button>
			<h2 class="pnp-popup-title"><?php esc_html_e( 'Waiting for Approval', 'automation-web-platform' ); ?></h2>
			<p class="pnp-popup-des"><?php esc_html_e( 'We sent an interactive verification list to your WhatsApp. Please open it and approve the request to continue.', 'automation-web-platform' ); ?></p>
			
			<div class="pnp-loading-pulse-container">
				<div class="pnp-pulse-circle"></div>
				<div class="pnp-pulse-circle-inner"></div>
			</div>

			<p id="pnp-list-status-message" class="pnp-message pnp-success"><?php esc_html_e( 'Checking approval status...', 'automation-web-platform' ); ?></p>
			
			<p id="pnp-list-error-message" class="pnp-message pnp-error wawp-hide"></p>

			<div class="pnp-otp-resend-wrapper">
				<button id="pnp-resend-list" class="pnp-link-button" disabled>
					<?php esc_html_e( 'Resend Verification List', 'automation-web-platform' ); ?> (<span id="pnp-list-cooldown">30</span>s)
				</button>
			</div>
		</div>

		<div class="pnp-success-state wawp-hide">
			<img src="<?php echo esc_url( WAWP_PLUGIN_URL . 'assets/img/success.gif' ); ?>" alt="Success" class="success-icon">
			<h2 class="pnp-popup-title"><?php echo esc_html( $wawp_popup_success_title ); ?></h2>
			<p class="pnp-popup-des"><?php echo esc_html( $wawp_popup_success_desc ); ?></p>
			<button id="pnp-close-success" class="pnp-button"><?php echo esc_html( $wawp_popup_continue_btn ); ?></button>
		</div>
	</div>
</div>
