<?php
/**
 * Woostify theme builder addons advanced popup
 *
 * @package Woostify Addon
 */


if ( ! class_exists( 'Woostify_Advanced_Popup_Builder_Addons' ) ) {

	/**
	 * Advanced Hooks Initial Setup
	 *
	 * @since 1.0.0
	 */
	
	class Woostify_Advanced_Popup_Builder_Addons {

		/**
		 * Instance Variable
		 *
		 * @var object instance
		 */
		private static $instance;

		/**
		 * meta popup
		 *
		 * @var $meta_popup;
		 */
		public static $meta_popup = array();

		/**
		 * meta animation
		 *
		 * @var $meta_open_animations;
		 */
		public static $meta_open_animations = array();

		/**
		 * meta animation
		 *
		 * @var $meta_close_animations;
		 */
		public static $meta_close_animations = array();

		/**
		 *  Initiator
		 */
		public static function get_instance() {
			if ( ! isset( self::$instance ) ) {
				self::$instance = new self();
			}

			self::$meta_popup = array(
				'woostify_builder_advanced_popup_width' => array(
					'value'  => '640',
					'sanitize' => 'FILTER_SANITIZE_NUMBER_INT',
				),
				'woostify_builder_advanced_popup_width_unit' => array(
					'value'  => 'px',
					'sanitize' => 'FILTER_SANITIZE_STRING',
				),
				'woostify_builder_advanced_popup_height_type' => array(
					'value'  => 'fit-to-content',
					'sanitize' => 'FILTER_SANITIZE_STRING',
				),
				'woostify_builder_advanced_popup_height_custom' => array(
					'value'  => '300',
					'sanitize' => 'FILTER_SANITIZE_NUMBER_INT',
				),
				'woostify_builder_advanced_popup_height_custom_unit' => array(
					'value'  => 'px',
					'sanitize' => 'FILTER_SANITIZE_STRING',
				),
				'woostify_builder_advanced_popup_height_position_content' => array(
					'value'  => 'flex-start',
					'sanitize' => 'FILTER_SANITIZE_STRING',
				),
				'woostify_builder_advanced_popup_position_horizontal' => array(
					'value'  => 'center',
					'sanitize' => 'FILTER_SANITIZE_STRING',
				),
				'woostify_builder_advanced_popup_position_vertical' => array(
					'value'  => 'center',
					'sanitize' => 'FILTER_SANITIZE_STRING',
				),
				'woostify_builder_advanced_popup_overlay' => array(
					'value'  => 'show',
					'sanitize' => 'FILTER_SANITIZE_STRING',
				),
				'woostify_builder_advanced_popup_close_button' => array(
					'value'  => 'show',
					'sanitize' => 'FILTER_SANITIZE_STRING',
				),
				'woostify_builder_advanced_popup_closed' => array(
					'value'  => '',
					'sanitize' => 'FILTER_SANITIZE_STRING',
				),
				'woostify_builder_advanced_popup_open_animation' => array(
					'value'  => 'show',
					'sanitize' => 'FILTER_SANITIZE_STRING',
				),
				'woostify_builder_advanced_popup_close_animation' => array(
					'value'  => 'none',
					'sanitize' => 'FILTER_SANITIZE_STRING',
				),
				'woostify_builder_advanced_popup_animation_duration' => array(
					'value'  => '2',
					'sanitize' => 'FILTER_SANITIZE_STRING',
				),
				'woostify_builder_advanced_popup_action' => array(
					'value'  => 'none',
					'sanitize' => 'FILTER_SANITIZE_STRING',
				),
				'woostify_builder_advanced_popup_action_on_scroll_direction' => array(
					'value'  => 'down',
					'sanitize' => 'FILTER_SANITIZE_STRING',
				),
				'woostify_builder_advanced_popup_action_on_scroll_distance_unit' => array(
					'value'  => 'px',
					'sanitize' => 'FILTER_SANITIZE_STRING',
				),
				'woostify_builder_advanced_popup_action_on_click_with_element_class' => array(
					'value'  => '',
					'sanitize' => 'FILTER_SANITIZE_STRING',
				),
				'woostify_builder_advanced_popup_action_on_scroll_distance' => array(
					'value'  => '200',
					'sanitize' => 'FILTER_SANITIZE_NUMBER_INT',
				),
				'woostify_builder_advanced_popup_action_on_scroll_to_element' => array(
					'value'  => '',
					'sanitize' => 'FILTER_SANITIZE_STRING',
				),
				'woostify_builder_advanced_popup_action_on_after_inactivity_time' => array(
					'value'  => '10',
					'sanitize' => 'FILTER_SANITIZE_NUMBER_INT',
				),
				'woostify_builder_advanced_popup_close_button_layout' => array(
					'value'  => 'inside',
					'sanitize' => 'FILTER_SANITIZE_STRING',
				),
				'woostify_builder_advanced_popup_close_button_color' => array(
					'value'  => '',
					'sanitize' => 'FILTER_SANITIZE_STRING',
				),
				'woostify_builder_advanced_popup_close_button_color_hover' => array(
					'value'  => '',
					'sanitize' => 'FILTER_SANITIZE_STRING',
				),
				'woostify_builder_advanced_popup_close_button_background' => array(
					'value'  => '',
					'sanitize' => 'FILTER_SANITIZE_STRING',
				),
				'woostify_builder_advanced_popup_close_button_background_hover' => array(
					'value'  => '',
					'sanitize' => 'FILTER_SANITIZE_STRING',
				),
				'woostify_builder_advanced_popup_background' => array(
					'value'  => '',
					'sanitize' => 'FILTER_SANITIZE_STRING',
				),
				'woostify_builder_advanced_popup_overlay_background' => array(
					'value'  => '',
					'sanitize' => 'FILTER_SANITIZE_STRING',
				),
				'woostify_builder_advanced_popup_padding' => array(
					'value'  => '30',
					'sanitize' => 'FILTER_SANITIZE_NUMBER_INT',
				),
				'woostify_builder_advanced_popup_padding_unit' => array(
					'value'  => 'px',
					'sanitize' => 'FILTER_SANITIZE_STRING',
				),
				'woostify_builder_advanced_popup_border_radius' => array(
					'value'  => '0',
					'sanitize' => 'FILTER_SANITIZE_NUMBER_INT',
				),
				'woostify_builder_advanced_popup_border_radius_unit' => array(
					'value'  => 'px',
					'sanitize' => 'FILTER_SANITIZE_STRING',
				),
				'woostify_builder_advanced_popup_scroll_lock' => array(
					'value'  => 'none',
					'sanitize' => 'FILTER_SANITIZE_STRING',
				),
			);


			return self::$instance;
		}

		/**
		 * Constructor function that initializes required actions and hooks
		 */
		public function __construct() {

			add_action( 'wp', array( $this, 'load_advanced_popup_template' ), 10000 );
			add_action( 'admin_enqueue_scripts', array( $this,'admin_enqueue_scripts') );
			add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
			add_action( 'save_post', array( $this, 'save_wp_builder_addon_advanced_popup' ), 10, 2 );

		}

		/**
		 * Get meta popup open animation
		 */
		public function get_popup_open_animation() {
			self::$meta_open_animations = array(
				'fade'   => array(
					'title' => __( 'Fading', 'woostify-pro' ),
					'animations' => array(
						'fadeIn'     => array(
							'title'   => __( 'Fade In', 'woostify-pro' ),
						),
						'fadeInDown'     => array(
							'title'   => __( 'Fade In Down', 'woostify-pro' ),
						),
						'fadeInLeft'     => array(
							'title'   => __( 'Fade In Left', 'woostify-pro' ),
						),
						'fadeInRight'     => array(
							'title'   => __( 'Fade In Right', 'woostify-pro' ),
						),
						'fadeInUp'     => array(
							'title'   => __( 'Fade In Up', 'woostify-pro' ),
						),
					),
				),
				'zoom'   => array(
					'title'	=> __( 'Zooming', 'woostify-pro' ),
					'animations' => array(
						'zoomIn'     => array(
							'title'   => __( 'Zoom In', 'woostify-pro' ),
						),
						'zoomInDown'     => array(
							'title'   => __( 'Zoom In Down', 'woostify-pro' ),
						),
						'zoomInLeft'     => array(
							'title'   => __( 'Zoom In Left', 'woostify-pro' ),
						),
						'zoomInRight'     => array(
							'title'   => __( 'Zoom In Right', 'woostify-pro' ),
						),
						'zoomInUp'     => array(
							'title'   => __( 'Zoom In Up', 'woostify-pro' ),
						),
					),
				),
				'bounce'   => array(
					'title'	=> __( 'Bouncing', 'woostify-pro' ),
					'animations' => array(
						'bounceIn'     => array(
							'title'   => __( 'Bounce In', 'woostify-pro' ),
						),
						'bounceInDown'     => array(
							'title'   => __( 'Bounce In Down', 'woostify-pro' ),
						),
						'bounceInLeft'     => array(
							'title'   => __( 'Bounce In Left', 'woostify-pro' ),
						),
						'bounceInRight'     => array(
							'title'   => __( 'Bounce In Right', 'woostify-pro' ),
						),
						'bounceInUp'     => array(
							'title'   => __( 'Bounce In Up', 'woostify-pro' ),
						),
					),
				),
				'slide'   => array(
					'title'	=> __( 'Sliding', 'woostify-pro' ),
					'animations' => array(
						'slideInDown'     => array(
							'title'   => __( 'Slide In Down', 'woostify-pro' ),
						),
						'slideInLeft'     => array(
							'title'   => __( 'Slide In Left', 'woostify-pro' ),
						),
						'slideInRight'     => array(
							'title'   => __( 'Slide In Right', 'woostify-pro' ),
						),
						'slideInUp'     => array(
							'title'   => __( 'Slide In Up', 'woostify-pro' ),
						),
					),
				),
				'rotate'   => array(
					'title'	=> __( 'Rotating', 'woostify-pro' ),
					'animations' => array(
						'rotateIn'     => array(
							'title'   => __( 'Rotate In', 'woostify-pro' ),
						),
						'rotateInDownLeft'     => array(
							'title'   => __( 'Rotate In Down Left', 'woostify-pro' ),
						),
						'rotateInDownRight'     => array(
							'title'   => __( 'Rotate In Down Right', 'woostify-pro' ),
						),
						'rotateInUpLeft'     => array(
							'title'   => __( 'Rotate In Up Left', 'woostify-pro' ),
						),
						'rotateInUpRight'     => array(
							'title'   => __( 'Rotate In Up Right', 'woostify-pro' ),
						),
					),
				),
				'attention-seekers'   => array(
					'title'	=> __( 'Attention Seekers', 'woostify-pro' ),
					'animations' => array(
						'bounce'     => array(
							'title'   => __( 'Bounce', 'woostify-pro' ),
						),
						'flash'     => array(
							'title'   => __( 'Flash', 'woostify-pro' ),
						),
						'pulse'     => array(
							'title'   => __( 'Pulse', 'woostify-pro' ),
						),
						'rubberBand'     => array(
							'title'   => __( 'Rubber Band', 'woostify-pro' ),
						),
						'shake'     => array(
							'title'   => __( 'Shake', 'woostify-pro' ),
						),
						'headShake'     => array(
							'title'   => __( 'Head Shake', 'woostify-pro' ),
						),
						'swing'     => array(
							'title'   => __( 'Swing', 'woostify-pro' ),
						),
						'tada'     => array(
							'title'   => __( 'Tada', 'woostify-pro' ),
						),
						'wobble'     => array(
							'title'   => __( 'Wobble', 'woostify-pro' ),
						),
						'jello'     => array(
							'title'   => __( 'Jello', 'woostify-pro' ),
						),

					),
				),
				'light-speed'   => array(
					'title'	=> __( 'Light Speed', 'woostify-pro' ),
					'animations' => array(
						'lightSpeedIn'     => array(
							'title'   => __( 'Light Speed In', 'woostify-pro' ),
						),
					),
				),
				'specials'   => array(
					'title'	=> __( 'Specials', 'woostify-pro' ),
					'animations' => array(
						'rollIn'     => array(
							'title'   => __( 'Roll In', 'woostify-pro' ),
						),
					),
				),
			);

			return self::$meta_open_animations;
		}

		/**
		 * Get meta popup close animation
		 */
		public function get_popup_close_animation() {
			self::$meta_close_animations = array(
				'fade'   => array(
					'title' => __( 'Fading', 'woostify-pro' ),
					'animations' => array(
						'fadeIn'     => array(
							'title'   => __( 'Fade Out', 'woostify-pro' ),
						),
						'fadeInDown'     => array(
							'title'   => __( 'Fade Out Down', 'woostify-pro' ),
						),
						'fadeInLeft'     => array(
							'title'   => __( 'Fade Out Left', 'woostify-pro' ),
						),
						'fadeInRight'     => array(
							'title'   => __( 'Fade Out Right', 'woostify-pro' ),
						),
						'fadeInUp'     => array(
							'title'   => __( 'Fade Out Up', 'woostify-pro' ),
						),
					),
				),
				'zoom'   => array(
					'title'	=> __( 'Zooming', 'woostify-pro' ),
					'animations' => array(
						'zoomIn'     => array(
							'title'   => __( 'Zoom Out', 'woostify-pro' ),
						),
						'zoomInDown'     => array(
							'title'   => __( 'Zoom Out Down', 'woostify-pro' ),
						),
						'zoomInLeft'     => array(
							'title'   => __( 'Zoom Out Left', 'woostify-pro' ),
						),
						'zoomInRight'     => array(
							'title'   => __( 'Zoom Out Right', 'woostify-pro' ),
						),
						'zoomInUp'     => array(
							'title'   => __( 'Zoom Out Up', 'woostify-pro' ),
						),
					),
				),
				'bounce'   => array(
					'title'	=> __( 'Bouncing', 'woostify-pro' ),
					'animations' => array(
						'bounceIn'     => array(
							'title'   => __( 'Bounce Out', 'woostify-pro' ),
						),
						'bounceInDown'     => array(
							'title'   => __( 'Bounce Out Down', 'woostify-pro' ),
						),
						'bounceInLeft'     => array(
							'title'   => __( 'Bounce Out Left', 'woostify-pro' ),
						),
						'bounceInRight'     => array(
							'title'   => __( 'Bounce Out Right', 'woostify-pro' ),
						),
						'bounceInUp'     => array(
							'title'   => __( 'Bounce Out Up', 'woostify-pro' ),
						),
					),
				),
				'slide'   => array(
					'title'	=> __( 'Sliding', 'woostify-pro' ),
					'animations' => array(
						'slideInDown'     => array(
							'title'   => __( 'Slide Out Down', 'woostify-pro' ),
						),
						'slideInLeft'     => array(
							'title'   => __( 'Slide Out Left', 'woostify-pro' ),
						),
						'slideInRight'     => array(
							'title'   => __( 'Slide Out Right', 'woostify-pro' ),
						),
						'slideInUp'     => array(
							'title'   => __( 'Slide Out Up', 'woostify-pro' ),
						),
					),
				),
				'rotate'   => array(
					'title'	=> __( 'Rotating', 'woostify-pro' ),
					'animations' => array(
						'rotateIn'     => array(
							'title'   => __( 'Rotate Out', 'woostify-pro' ),
						),
						'rotateInDownLeft'     => array(
							'title'   => __( 'Rotate Out Down Left', 'woostify-pro' ),
						),
						'rotateInDownRight'     => array(
							'title'   => __( 'Rotate Out Down Right', 'woostify-pro' ),
						),
						'rotateInUpLeft'     => array(
							'title'   => __( 'Rotate Out Up Left', 'woostify-pro' ),
						),
						'rotateInUpRight'     => array(
							'title'   => __( 'Rotate Out Up Right', 'woostify-pro' ),
						),
					),
				),
				'light-speed'   => array(
					'title'	=> __( 'Light Speed', 'woostify-pro' ),
					'animations' => array(
						'lightSpeedIn'     => array(
							'title'   => __( 'Light Speed Out', 'woostify-pro' ),
						),
					),
				),
				'specials'   => array(
					'title'	=> __( 'Specials', 'woostify-pro' ),
					'animations' => array(
						'rollIn'     => array(
							'title'   => __( 'Roll Out', 'woostify-pro' ),
						),
					),
				),
			);

			return self::$meta_close_animations;
		}

		/**
		 * Get meta popup options
		 */
		public function get_builder_meta_popup_option() {
			return self::$meta_popup;
		}

		/**
		 * Get content action of page builder elementor
		 */
		public function get_active_page_builder( $post_id ) {

			if ( is_elementor_activated( $post_id ) ) {
				$elementor_instance = Elementor\Plugin::instance();
				echo do_shortcode($elementor_instance->frontend->get_builder_content_for_display( $post_id ));
			} else {
				$this->render_content( $post_id );
			}


		}

		/**
		 * Get content action post in editor
		 */
		public function render_content( $post_id ) {
			$output       = '';
			$current_post = get_post( $post_id, OBJECT );
			if ( has_blocks( $current_post ) ) {
				$blocks = parse_blocks( $current_post->post_content );
				foreach ( $blocks as $block ) {
					$output .= render_block( $block );
				}
			} else {
				$output = $current_post->post_content;
			}
			ob_start();
			echo do_shortcode( $output );
			echo do_shortcode( ob_get_clean() );
		}

		/**
		 * Get data popup setting
		 */
		public function popup_data_setting( $post_id ) {

			$open_animation = get_post_meta( $post_id, 'woostify_builder_advanced_popup_open_animation', true );
			$close_animation = get_post_meta( $post_id, 'woostify_builder_advanced_popup_close_animation', true );
			$animation_duration = get_post_meta( $post_id, 'woostify_builder_advanced_popup_animation_duration', true );
			$popup_action = get_post_meta( $post_id, 'woostify_builder_advanced_popup_action', true );

			$popupModeAction = array();
			$scroll_direction = get_post_meta( $post_id, 'woostify_builder_advanced_popup_action_on_scroll_direction', true );
			$scroll_distance_unit = get_post_meta( $post_id, 'woostify_builder_advanced_popup_action_on_scroll_distance_unit', true );
			$scroll_distance = get_post_meta( $post_id, 'woostify_builder_advanced_popup_action_on_scroll_distance', true );

			$popup_scroll_lock = get_post_meta( $post_id, 'woostify_builder_advanced_popup_scroll_lock', true );
			// closed popup when click close icon
			$popup_closed = get_post_meta( $post_id, 'woostify_builder_advanced_popup_closed', true );

			if( $popup_action == 'on-click' ){
				$click_with_element_class = get_post_meta( $post_id, 'woostify_builder_advanced_popup_action_on_click_with_element_class', true);
				$popupModeAction = array(
					'onClickCount' => '0',
					'onElementClass' => $click_with_element_class,
				);
			}

			if( $popup_action == 'on-scroll' ){
				$popupModeAction = array(
					'scrollDirection' => $scroll_direction ? $scroll_direction : 'down',
					'scrollDistance' => $scroll_distance ? $scroll_distance.$scroll_distance_unit : '-1',
					'scrollOffset' => $scroll_distance ? $scroll_distance : '200',
				);
			}

			$scroll_to_element = get_post_meta( $post_id, 'woostify_builder_advanced_popup_action_on_scroll_to_element', true);
			if( $popup_action == 'on-scroll-to-element' ){
				$popupModeAction = array(
					'scrollToElement' => $scroll_to_element ? $scroll_to_element : '',
				);
			}

			$after_inactivity_time = get_post_meta( $post_id, 'woostify_builder_advanced_popup_action_on_after_inactivity_time', true);
			if( $popup_action == 'on-after-inactivity' ){
				$popupModeAction = array(
					'afterInactivityTime' => $after_inactivity_time ? $after_inactivity_time : '10',
				);
			}

			$popup_data_setting = array(
				'openAnimation' => $open_animation ? $open_animation : '' ,
				'closeAnimation' => $close_animation ? $close_animation : '',
				'animationDuration' => $animation_duration ? $animation_duration : '1.2',
				'popupAction' => $popup_action ? $popup_action : '',
				'popupModeAction' => $popupModeAction,
				'popupScrollLock' => ( $popup_scroll_lock == 'scroll-lock' )? $popup_scroll_lock : '',
				'popupClosed' => $popup_closed ? $popup_closed : 'off',
			);

			return $popup_json = json_encode($popup_data_setting); ;
		}

		/**
		 * Get the content of the popup
		 */
		public function get_popup_content( $post_id ) {

			$time_duration_eligibility = Woostify_Theme_Builder_Addons_Time_Duration::instance()->get_time_duration_eligibility( $post_id );
		
			if( !$time_duration_eligibility ){
				return;
            }

			// responsive visibility
			$desktop = get_post_meta( $post_id, 'woostify_builder_responsive_desktop', true );
			$tablet  = get_post_meta( $post_id, 'woostify_builder_responsive_tablet', true );
			$mobile  = get_post_meta( $post_id, 'woostify_builder_responsive_mobile', true );

			$classes[] = 'woostify-popup';
			$classes[] = 'woostify-popup-' . $post_id;
			$classes[] = $desktop === 'desktop' ? 'wp-desktop-hidden' : '';
			$classes[] = $tablet === 'tablet' ? 'wp-tablet-hidden' : '';
			$classes[] = $mobile === 'mobile' ? 'wp-mobile-hidden' : '';

			// popup selector
			$popup_height_type = get_post_meta( $post_id, 'woostify_builder_advanced_popup_height_type', true);
			$classes[] = 'popup-' . $popup_height_type;

			$popup_overlay = get_post_meta( $post_id, 'woostify_builder_advanced_popup_overlay', true );
			$classes[] = ( $popup_overlay != 'hide' )? '' : 'overlay-' . $popup_overlay;

			$classes   = implode(' ', $classes );

			$popup_id = 'post-'.$post_id;
			$popup_class = 'woostify-popup-lightbox post-'.$post_id;

			// animation 
			$popup_open_animation = get_post_meta(  $post_id, 'woostify_builder_advanced_popup_open_animation', true );
			$popup_close_animation = get_post_meta(  $post_id, 'woostify_builder_advanced_popup_close_animation', true );
			
			$animation_classes[] = ( $popup_open_animation != 'none' || $popup_close_animation != 'none')? 'popup-animated' : '';

			$animation_classes   = implode(' ', $animation_classes );

			// data setting
			$popup_data = $this->popup_data_setting( $post_id );

			$popup_close_button = get_post_meta( $post_id, 'woostify_builder_advanced_popup_close_button', true );
			$popup_close_button_layout = get_post_meta( $post_id, 'woostify_builder_advanced_popup_close_button_layout', true );

			// popup action
			$popup_action = get_post_meta( $post_id, 'woostify_builder_advanced_popup_action', true );
			$popup_action = ( $popup_action != 'none' )? $popup_action : 'none';

			// popup id
			$popup_element_id = 'woostify-popup-'.$post_id;
			?>
			<div id="<?php echo esc_attr( $popup_element_id ); ?>" data-woostify-popup="popup:<?php echo esc_attr( $post_id );?>" class="<?php echo esc_attr( $classes ); ?>" data-popup-action="<?php echo esc_attr( $popup_action ); ?>" data-popup-setting="<?php echo esc_attr( $popup_data ); ?>">
				<div class="woostify-popup-inner <?php echo esc_attr( $animation_classes );?>">
					<article id="<?php echo $popup_id; ?>" <?php post_class( $popup_class, $post_id ); ?> >
						<?php if( $popup_close_button != 'hide' && $popup_close_button_layout == 'inside' ): ?>
							<button class="woostify-popup-toggle-close" aria-label="<?php echo __('Close popup', 'woostify-pro'); ?>">
								<svg class="ct-icon" width="12" height="12" viewBox="0 0 15 15">
									<path d="M1 15a1 1 0 01-.71-.29 1 1 0 010-1.41l5.8-5.8-5.8-5.8A1 1 0 011.7.29l5.8 5.8 5.8-5.8a1 1 0 011.41 1.41l-5.8 5.8 5.8 5.8a1 1 0 01-1.41 1.41l-5.8-5.8-5.8 5.8A1 1 0 011 15z"></path>
								</svg>
							</button>
						<?php endif; ?>
						<div class="woostify-popup-content">
							<?php $this->get_active_page_builder( $post_id ); ?>
						</div>
					</article>
				</div>
				<?php if( $popup_close_button != 'hide' && $popup_close_button_layout == 'outside' ): ?>
					<button class="woostify-popup-toggle-close" aria-label="<?php echo __('Close popup', 'woostify-pro'); ?>">
						<svg class="ct-icon" width="12" height="12" viewBox="0 0 15 15">
							<path d="M1 15a1 1 0 01-.71-.29 1 1 0 010-1.41l5.8-5.8-5.8-5.8A1 1 0 011.7.29l5.8 5.8 5.8-5.8a1 1 0 011.41 1.41l-5.8 5.8 5.8 5.8a1 1 0 01-1.41 1.41l-5.8-5.8-5.8 5.8A1 1 0 011 15z"></path>
						</svg>
					</button>
				<?php endif; ?>
			</div>

			<?php

		}

		/**
		 * Get ids popup
		 */
		public function get_template_advanced_popup_ids( $type ) {

			$option = [
				'location'  => 'woostify_builder_target_include_locations',
				'exclusion' => 'woostify_builder_target_exclude_locations',
				'users'     => 'woostify_builder_target_users_rule',
			];
	
			$wp_builder_templates = Woostify_Theme_Builder_Addons_Condition::instance()->get_posts_by_conditions( 'wp_builder_addon', $option );
		
			if( $wp_builder_templates ){
				$template_ids = array();
				foreach ( $wp_builder_templates as $key => $template ) {
					if ( get_post_meta( absint( $template['id'] ), 'woostify_wp_builder_addon_template', true ) === $type ) {
						$template_ids[] = $template['id'];
						
					}
				}
				return $template_ids;
			}
			
			return '';
		}

		/**
		 * Add action popup
		 */
		public function load_advanced_popup_template() {

			$template_ids = $this->get_template_advanced_popup_ids( 'woostify_builder_popup' );
		
			if ( !empty( $template_ids ) ) {

				foreach ( $template_ids as $key => $template_id ) {

					$post_id = $template_id;
	
					add_action(
						'woostify_theme_footer',
						function() use ( $post_id ) {

							// Check if the Elementor editor is active
							$elementor_editor_active = (class_exists( 'Elementor\Plugin'))? \Elementor\Plugin::$instance->preview->is_preview_mode() : false;
							if ( ! $elementor_editor_active ) {
								$this->get_popup_content( $post_id );
							}

						},
						10000
					);

				}
			}
		}

        /**
		 * Render action hooks in editor post
		 */
        public function render_advanced_popup( $post ) {

            $post_id = isset( $post )? $post->ID : get_the_ID();

			$stored = get_post_meta( $post_id );
			
			// Set stored and override defaults.
			foreach ( $stored as $key => $value ) {
				self::$meta_popup[ $key ]['value'] = isset( $stored[ $key ][0] ) ? $stored[ $key ][0] : '';
			}
			// Get defaults.
			$meta_options = $this->get_builder_meta_popup_option();

			$popup_width = isset( $meta_options['woostify_builder_advanced_popup_width'] )? $meta_options['woostify_builder_advanced_popup_width']['value'] : '640';
			$popup_width_unit = isset( $meta_options['woostify_builder_advanced_popup_width_unit'] )? $meta_options['woostify_builder_advanced_popup_width_unit']['value'] : 'px';
			$popup_height_type = isset( $meta_options['woostify_builder_advanced_popup_height_type'] )? $meta_options['woostify_builder_advanced_popup_height_type']['value'] : 'fit-to-content';
			$popup_height_custom = isset( $meta_options['woostify_builder_advanced_popup_height_custom'] )? $meta_options['woostify_builder_advanced_popup_height_custom']['value'] : '300';
			$popup_height_custom_unit = isset( $meta_options['woostify_builder_advanced_popup_height_custom_unit'] )? $meta_options['woostify_builder_advanced_popup_height_custom_unit']['value'] : 'px';
			$popup_height_fit_to_screen = isset( $meta_options['woostify_builder_advanced_popup_height_position_content'] )? $meta_options['woostify_builder_advanced_popup_height_position_content']['value'] : 'px';
			$popup_position_horizontal = isset( $meta_options['woostify_builder_advanced_popup_position_horizontal'] )? $meta_options['woostify_builder_advanced_popup_position_horizontal']['value'] : 'center';
			$popup_position_vertical = isset( $meta_options['woostify_builder_advanced_popup_position_vertical'] )? $meta_options['woostify_builder_advanced_popup_position_vertical']['value'] : 'center';
			
			$popup_close_button = isset( $meta_options['woostify_builder_advanced_popup_close_button'] )? $meta_options['woostify_builder_advanced_popup_close_button']['value'] : 'show';
			$popup_close_button_layout = isset( $meta_options['woostify_builder_advanced_popup_close_button_layout'] )? $meta_options['woostify_builder_advanced_popup_close_button_layout']['value'] : 'inside';
			$popup_close_button_color = isset( $meta_options['woostify_builder_advanced_popup_close_button_color'] )? $meta_options['woostify_builder_advanced_popup_close_button_color']['value'] : '';
			$popup_close_button_color_hover = isset( $meta_options['woostify_builder_advanced_popup_close_button_color_hover'] )? $meta_options['woostify_builder_advanced_popup_close_button_color_hover']['value'] : '';
			$popup_close_button_background = isset( $meta_options['woostify_builder_advanced_popup_close_button_background'] )? $meta_options['woostify_builder_advanced_popup_close_button_background']['value'] : '';
			$popup_close_button_background_hover = isset( $meta_options['woostify_builder_advanced_popup_close_button_background_hover'] )? $meta_options['woostify_builder_advanced_popup_close_button_background_hover']['value'] : '';
			$popup_overlay = isset( $meta_options['woostify_builder_advanced_popup_overlay'] )? $meta_options['woostify_builder_advanced_popup_overlay']['value'] : 'show';
			$popup_overlay_background = isset( $meta_options['woostify_builder_advanced_popup_overlay_background'] )? $meta_options['woostify_builder_advanced_popup_overlay_background']['value'] : '';
			$popup_background = isset( $meta_options['woostify_builder_advanced_popup_background'] )? $meta_options['woostify_builder_advanced_popup_background']['value'] : '';
			$popup_padding_unit = isset( $meta_options['woostify_builder_advanced_popup_padding_unit'] )? $meta_options['woostify_builder_advanced_popup_padding_unit']['value'] : 'px';
			$popup_padding = isset( $meta_options['woostify_builder_advanced_popup_padding'] )? $meta_options['woostify_builder_advanced_popup_padding']['value'] : '';
			$popup_border_radius_unit = isset( $meta_options['woostify_builder_advanced_popup_border_radius_unit'] )? $meta_options['woostify_builder_advanced_popup_border_radius_unit']['value'] : 'px';
			$popup_border_radius = isset( $meta_options['woostify_builder_advanced_popup_border_radius'] )? $meta_options['woostify_builder_advanced_popup_border_radius']['value'] : '';
			$popup_scroll_lock = isset( $meta_options['woostify_builder_advanced_popup_scroll_lock'] )? $meta_options['woostify_builder_advanced_popup_scroll_lock']['value'] : 'none';

			$animation_open_popup = isset( $meta_options['woostify_builder_advanced_popup_open_animation'] )? $meta_options['woostify_builder_advanced_popup_open_animation']['value'] : 'none';
			$animation_close_popup = isset( $meta_options['woostify_builder_advanced_popup_close_animation'] )? $meta_options['woostify_builder_advanced_popup_close_animation']['value'] : 'none';		
			$animation_duration = isset( $meta_options['woostify_builder_advanced_popup_animation_duration'] )? $meta_options['woostify_builder_advanced_popup_animation_duration']['value'] : '2';
			
			// action
			$action_popup = isset( $meta_options['woostify_builder_advanced_popup_action'] )? $meta_options['woostify_builder_advanced_popup_action']['value'] : 'none';		
			$popup_on_click_with_element_class = isset( $meta_options['woostify_builder_advanced_popup_action_on_click_with_element_class'] )? $meta_options['woostify_builder_advanced_popup_action_on_click_with_element_class']['value'] : '';
			$popup_on_scroll_direction = isset( $meta_options['woostify_builder_advanced_popup_action_on_scroll_direction'] )? $meta_options['woostify_builder_advanced_popup_action_on_scroll_direction']['value'] : 'down';		
			$popup_on_scroll_distance_unit = isset( $meta_options['woostify_builder_advanced_popup_action_on_scroll_distance_unit'] )? $meta_options['woostify_builder_advanced_popup_action_on_scroll_distance_unit']['value'] : 'px';		
			$popup_on_scroll_distance = isset( $meta_options['woostify_builder_advanced_popup_action_on_scroll_distance'] )? $meta_options['woostify_builder_advanced_popup_action_on_scroll_distance']['value'] : '200';		
			$popup_on_scroll_to_element = isset( $meta_options['woostify_builder_advanced_popup_action_on_scroll_to_element'] )? $meta_options['woostify_builder_advanced_popup_action_on_scroll_to_element']['value'] : '';		
			$popup_on_after_inactivity_time = isset( $meta_options['woostify_builder_advanced_popup_action_on_after_inactivity_time'] )? $meta_options['woostify_builder_advanced_popup_action_on_after_inactivity_time']['value'] : '10';		
			// action closed popup
			$popup_closed = isset( $meta_options['woostify_builder_advanced_popup_closed'] )? $meta_options['woostify_builder_advanced_popup_closed']['value'] : '';

            ?>
			<div class="woostify-metabox-option-tabs">
				<button id="popup-general" class="woostify-metabox-option-tab-btn active"><?php echo esc_html__( 'General', 'woostify-pro' ); ?></a>
				<button id="popup-design" class="woostify-metabox-option-tab-btn"><?php echo esc_html__( 'Design', 'woostify-pro' ); ?></a>
			</div>
			<div class="woostify-metabox-option-tab-content active" data-tab="popup-general">
				<div class="woostify-metabox-option">
					<div class="woostify-builder-advanced-popup-control">
						<div class="advanced-popup-unit">
							<p class="advanced-popup-text">
								<strong><?php echo esc_html__( 'Width', 'woostify-pro' ); ?></strong>
							</p>
							<select 
								class="advanced-popup-select-unit" 
								data-popup-setting="popup-width" 
								data-max="1500" 
								data-value="640" 
								name="woostify_builder_advanced_popup_width_unit" 
								id="woostify-builder-advanced-popup-width-unit"
							>
								<option <?php selected( $popup_width_unit, 'px' ); ?> value="px"><?php echo esc_html__( 'px', 'woostify-pro' ); ?></option>
								<option <?php selected( $popup_width_unit, 'vw' ); ?> value="vw"><?php echo esc_html__( 'vw', 'woostify-pro' ); ?></option>
							</select>
						</div>
						<div class="advanced-popup-range">
							<input 
								class="advanced-popup-input-range" 
								data-popup-setting="popup-width" 
								type="range" 
								min="0" 
								max="<?php echo ( $popup_width_unit == 'px' )? '1500' : '100'; ?>" 
								value="<?php echo esc_attr( $popup_width ); ?>" 
								id="woostify-builder-advanced-popup-width-range" 
							/>     	
							<input 
								class="advanced-popup-input-number" 
								data-popup-setting="popup-width" 
								type="number" 
								min="0" 
								max="<?php echo ( $popup_width_unit == 'px' )? '1500' : '100'; ?>" 
								name="woostify_builder_advanced_popup_width" 
								id="woostify-builder-advanced-popup-width" 
								step="1" 
								value="<?php echo esc_attr( $popup_width ); ?>"
								data-value="<?php echo esc_attr( $popup_width.':'.$popup_width_unit ); ?>"
							/>
						</div>
					</div>
				</div>
				<div class="woostify-metabox-option">
					<div class="woostify-builder-advanced-popup-control">
						<p class="advanced-popup-text">
							<strong><?php echo esc_html__( 'Height', 'woostify-pro' ); ?></strong>
						</p>
						<select name="woostify_builder_advanced_popup_height_type" id="woostify-builder-advanced-popup-height-type">
							<option <?php selected( $popup_height_type, 'fit-to-content' ); ?> value="fit-to-content"><?php echo esc_html__( 'Fit To Content', 'woostify-pro' ); ?></option>
							<option <?php selected( $popup_height_type, 'fit-to-screen' ); ?> value="fit-to-screen"><?php echo esc_html__( 'Fit To Screen', 'woostify-pro' ); ?></option>
							<option <?php selected( $popup_height_type, 'fit-to-custom' ); ?> value="fit-to-custom"><?php echo esc_html__( 'Custom', 'woostify-pro' ); ?></option>
						</select>
						<div class="woostify-builder-advanced-popup-height fit-to-custom <?php echo ($popup_height_type == 'fit-to-custom')? : ' woostify-hidden'; ?>">
							<div class="advanced-popup-unit">
								<p class="advanced-popup-text">
									<strong><?php echo esc_html__( 'Custom Height', 'woostify-pro' ); ?></strong>
								</p>
								<select 
									class="advanced-popup-select-unit" 
									data-popup-setting="popup-custom-height" 
									data-max="1000" 
									data-value="300" 
									name="woostify_builder_advanced_popup_height_custom_unit" 
									id="woostify-builder-advanced-popup-height-custom-unit"
								>
									<option <?php selected( $popup_height_custom_unit, 'px' ); ?> value="px"><?php echo esc_html__( 'px', 'woostify-pro' ); ?></option>
									<option <?php selected( $popup_height_custom_unit, 'vh' ); ?> value="vh"><?php echo esc_html__( 'vh', 'woostify-pro' ); ?></option>
								</select>
							</div>
							<div class="advanced-popup-range">
								<input 
									class="advanced-popup-input-range" 
									data-popup-setting="popup-custom-height" 
									type="range" 
									min="0" 
									max="<?php echo ( $popup_height_custom_unit == 'px' )? '1000' : '100'; ?>" 
									value="<?php echo esc_attr( $popup_height_custom ); ?>" 
									id="woostify-builder-advanced-popup-height-range"
								/>     	
								<input 
									class="advanced-popup-input-number" 
									data-popup-setting="popup-custom-height" 
									type="number" 
									min="0" 
									max="<?php echo ( $popup_height_custom_unit == 'px' )? '1000' : '100'; ?>" 
									name="woostify_builder_advanced_popup_height_custom" 
									id="woostify-builder-advanced-popup-height-custom" 
									step="1" 
									value="<?php echo esc_attr( $popup_height_custom ); ?>"
									data-value="<?php echo esc_attr( $popup_height_custom.':'.$popup_height_custom_unit ); ?>"
								/>
							</div>
						</div>
						<div class="woostify-builder-advanced-popup-height fit-to-screen fit-to-custom <?php echo ($popup_height_type == 'fit-to-screen' || $popup_height_type == 'fit-to-custom')? : ' woostify-hidden'; ?>">
							<p class="advanced-popup-text">
								<strong><?php echo esc_html__( 'Position Content', 'woostify-pro' ); ?></strong>
							</p>
							<select name="woostify_builder_advanced_popup_height_position_content" id="woostify-builder-advanced-popup-height-position-content">
								<option <?php selected( $popup_height_fit_to_screen, 'flex-start' ); ?> value="flex-start"><?php echo esc_html__( 'Top', 'woostify-pro' ); ?></option>
								<option <?php selected( $popup_height_fit_to_screen, 'center' ); ?> value="center"><?php echo esc_html__( 'Center', 'woostify-pro' ); ?></option>
								<option <?php selected( $popup_height_fit_to_screen, 'flex-end' ); ?> value="flex-end"><?php echo esc_html__( 'Bottom', 'woostify-pro' ); ?></option>
							</select>
						</div>
					</div>
				</div>
				<div class="woostify-metabox-option">
					<div class="woostify-builder-advanced-popup-control">
						<p class="advanced-popup-text">
							<strong><?php echo esc_html__( 'Position', 'woostify-pro' ); ?></strong>
						</p>
						<div class="woostify-builder-advanced-popup-position horizontal">
							<label for="woostify-builder-advanced-popup-position-horizontal" class="popup-control-label"><?php echo esc_html__( 'Horizontal', 'woostify-pro' ); ?></label>
							<select class="popup-position-horizontal" name="woostify_builder_advanced_popup_position_horizontal" id="woostify-builder-advanced-popup-position-horizontal">
								<option <?php selected( $popup_position_horizontal, 'flex-start' ); ?> value="flex-start"><?php echo esc_html__( 'Left', 'woostify-pro' ); ?></option>
								<option <?php selected( $popup_position_horizontal, 'center' ); ?> value="center"><?php echo esc_html__( 'Center', 'woostify-pro' ); ?></option>
								<option <?php selected( $popup_position_horizontal, 'flex-end' ); ?> value="flex-end"><?php echo esc_html__( 'Right', 'woostify-pro' ); ?></option>
							</select>
						</div>
						<div class="woostify-builder-advanced-popup-position vertical">
							<label for="woostify-builder-advanced-popup-position-vertical" class="popup-control-label"><?php echo esc_html__( 'Vertical', 'woostify-pro' ); ?></label>
							<select class="popup-position-vertical" name="woostify_builder_advanced_popup_position_vertical" id="woostify-builder-advanced-popup-position-vertical">
								<option <?php selected( $popup_position_vertical, 'flex-start' ); ?> value="flex-start"><?php echo esc_html__( 'Top', 'woostify-pro' ); ?></option>
								<option <?php selected( $popup_position_vertical, 'center' ); ?> value="center"><?php echo esc_html__( 'Center', 'woostify-pro' ); ?></option>
								<option <?php selected( $popup_position_vertical, 'flex-end' ); ?> value="flex-end"><?php echo esc_html__( 'Bottom', 'woostify-pro' ); ?></option>
							</select>						
						</div>
					</div>
				</div>
				<div class="woostify-metabox-option">
					<div class="woostify-builder-advanced-popup-control">
						<div class="components-toggle-wrap">
							<span class="components-toggle">
								<input type="checkbox" class="components-toggle__input" name="woostify_builder_advanced_popup_overlay" id="woostify-builder-advanced-popup-overlay" value="hide" <?php checked( $popup_overlay, 'hide' ); ?>>
								<span class="components-toggle__track"></span>
								<span class="components-toggle__thumb"></span>
							</span>
							<label for="woostify-builder-advanced-popup-overlay">
								<?php esc_html_e( 'Hide Overlay', 'woostify-pro' ); ?>								
							</label>
						</div>
					</div>
				</div>
				<div class="woostify-metabox-option">
					<div class="woostify-builder-advanced-popup-control">
						<div class="components-toggle-wrap">
							<span class="components-toggle">
								<input type="checkbox" class="components-toggle__input" name="woostify_builder_advanced_popup_close_button" id="woostify-builder-advanced-popup-close-button" value="hide" <?php checked( $popup_close_button, 'hide' ); ?>>
								<span class="components-toggle__track"></span>
								<span class="components-toggle__thumb"></span>
							</span>
							<label for="woostify-builder-advanced-popup-close-button">
								<?php esc_html_e( 'Hide Close Button', 'woostify-pro' ); ?>								
							</label>
						</div>
					</div>
				</div>
				<div class="woostify-metabox-option">
					<div class="woostify-builder-advanced-popup-control">
						<p class="advanced-popup-text">
							<strong><?php echo esc_html__( 'Not show popup if click close icon', 'woostify-pro' ); ?></strong>
						</p>
						<div class="components-toggle-wrap">
							<span class="components-toggle">
								<input type="checkbox" class="components-toggle__input" name="woostify_builder_advanced_popup_closed" id="woostify-builder-advanced-popup-closed" value="on" <?php checked( $popup_closed, 'on' ); ?>>
								<span class="components-toggle__track"></span>
								<span class="components-toggle__thumb"></span>
							</span>
						</div>
					</div>
				</div>
				<div class="woostify-metabox-option">
					<div class="woostify-builder-advanced-popup-control open-animation">
						<p class="advanced-popup-text">
							<strong><?php echo esc_html__( 'Open Animation', 'woostify-pro' ); ?></strong>
						</p>
						<select name="woostify_builder_advanced_popup_open_animation" id="woostify-builder-advanced-popup-open-animation">
							<option value="none"><?php echo esc_html__( 'None', 'woostify-pro' ); ?></option>
							<?php if ( is_array( $this->get_popup_open_animation() ) && ! empty( $this->get_popup_open_animation() ) ) : ?>
								<?php foreach ( $this->get_popup_open_animation() as $animations ) : ?>
								<optgroup label="<?php echo esc_attr( $animations['title'] ); ?>" >
									<?php if ( is_array( $animations['animations'] ) && ! empty( $animations['animations'] ) ) : ?>
										<?php foreach ( $animations['animations'] as $key => $animation ) : ?>
											<option <?php selected( $key, $animation_open_popup ); ?> value="<?php echo esc_attr( $key ); ?>"><?php echo esc_html( $animation['title'] ); ?></option>
										<?php endforeach; ?>
									<?php endif; ?>
								</optgroup>
								<?php endforeach; ?>
							<?php endif; ?>
						</select>
					</div>
				</div>
				<div class="woostify-metabox-option">
					<div class="woostify-builder-advanced-popup-control close-animation">
						<p class="advanced-popupn-text">
							<strong><?php echo esc_html__( 'Close Animation', 'woostify-pro' ); ?></strong>
						</p>
						<select name="woostify_builder_advanced_popup_close_animation" id="woostify-builder-advanced-popup-close-animation">
							<option value="none"><?php echo esc_html__( 'None', 'woostify-pro' ); ?></option>
							<?php if ( is_array( $this->get_popup_close_animation() ) && ! empty( $this->get_popup_close_animation() ) ) : ?>
								<?php foreach ( $this->get_popup_close_animation() as $animations ) : ?>
								<optgroup label="<?php echo esc_attr( $animations['title'] ); ?>" >
									<?php if ( is_array( $animations['animations'] ) && ! empty( $animations['animations'] ) ) : ?>
										<?php foreach ( $animations['animations'] as $key => $animation ) : ?>
											<option <?php selected( $key, $animation_close_popup ); ?> value="<?php echo esc_attr( $key ); ?>"><?php echo esc_html( $animation['title'] ); ?></option>
										<?php endforeach; ?>
									<?php endif; ?>
								</optgroup>
								<?php endforeach; ?>
							<?php endif; ?>
						</select>
					</div>
				</div>
				<div class="woostify-metabox-option">
					<div class="woostify-builder-advanced-popup-control">
						<p class="advanced-popup-text">
							<strong><?php echo esc_html__( 'Animation Duration (sec)', 'woostify-pro' ); ?></strong>
						</p>
						<div class="advanced-popup-range">
							<input type="range" min="0" max="10" id="popup-animation-duration-range" />     	
							<input type="number" min="0" max="10" name="woostify_builder_advanced_popup_animation_duration" id="woostify-builder-advanced-popup-animation-duration" step="0.1" value="<?php echo esc_attr( $animation_duration ); ?>" />
						</div>
					</div>
				</div>
				<div class="woostify-metabox-option">
					<div class="woostify-builder-advanced-popup-control trigger-condition">
						<p class="advanced-popup-text">
							<strong><?php echo esc_html__( 'Trigger Condition', 'woostify-pro' ); ?></strong>
						</p>
						<select name="woostify_builder_advanced_popup_action" id="woostify-builder-advanced-popup-action">
							<option <?php selected( $action_popup, 'none' ); ?> value="none"><?php echo esc_html__( 'None', 'woostify-pro' ); ?></option>
							<option <?php selected( $action_popup, 'on-page-load' ); ?> value="on-page-load"><?php echo esc_html__( 'On Page Load', 'woostify-pro' ); ?></option>
							<option <?php selected( $action_popup, 'on-click' ); ?> value="on-click"><?php echo esc_html__( 'On Click', 'woostify-pro' ); ?></option>
							<option <?php selected( $action_popup, 'on-scroll' ); ?> value="on-scroll"><?php echo esc_html__( 'On Scroll', 'woostify-pro' ); ?></option>
							<option <?php selected( $action_popup, 'on-scroll-to-element' ); ?> value="on-scroll-to-element"><?php echo esc_html__( 'On Scroll To Element', 'woostify-pro' ); ?></option>
							<option <?php selected( $action_popup, 'on-after-inactivity' ); ?> value="on-after-inactivity"><?php echo esc_html__( 'After Inactivity', 'woostify-pro' ); ?></option>
							<option <?php selected( $action_popup, 'on-page-exit-intent' ); ?> value="on-page-exit-intent"><?php echo esc_html__( 'On Page Exit Intent', 'woostify-pro' ); ?></option>
						</select>

						<div data-action="on-click" class="advanced-popup-action-setting <?php echo ( $action_popup == 'on-click' )? '' : 'woostify-hidden'; ?>" <?php selected( $action_popup, 'on-click' ); ?> >
							<div class="advanced-popup-action-option">
								<p class="advanced-popup-text">
									<strong><?php echo esc_html__( 'Element Class', 'woostify-pro' ); ?></strong>
								</p>
								<input class="advanced-popup-input element-class" type="text" value="<?php echo esc_attr( $popup_on_click_with_element_class ); ?>" placeholder=".my-class" name="woostify_builder_advanced_popup_action_on_click_with_element_class" id="woostify-builder-advanced-popup-action-on-click-with-element-class">
							</div>
							<div class="advanced-popup-action-option">
								<div class="description"><?php echo esc_html__( "Default click on page to show popup, if addclass you want to show popup when click on element.", 'woostify-pro' ); ?></div>					
							</div>
						</div>

						<div data-action="on-scroll" class="advanced-popup-action-setting <?php echo ( $action_popup == 'on-scroll' )? '' : 'woostify-hidden'; ?>" <?php selected( $action_popup, 'on-scroll' ); ?> >
							<div class="advanced-popup-action-option">
								<p class="advanced-popup-text">
									<strong><?php echo esc_html__( 'Scroll Direction', 'woostify-pro' ); ?></strong>
								</p>
								<select name="woostify_builder_advanced_popup_action_on_scroll_direction" id="woostify-builder-advanced-popup-action-on-scroll-direction">
									<option <?php selected( $popup_on_scroll_direction, 'down' ); ?> value="down"><?php echo esc_html__( 'Scroll Down', 'woostify-pro' ); ?></option>
									<option <?php selected( $popup_on_scroll_direction, 'up' ); ?> value="up"><?php echo esc_html__( 'Scroll Up', 'woostify-pro' ); ?></option>
								</select>
							</div>
							<div class="advanced-popup-action-option">
								<div class="advanced-popup-unit">
									<p class="advanced-popup-text">
										<strong><?php echo esc_html__( 'Scroll Distance', 'woostify-pro' ); ?></strong>
									</p>
									<select 
										class="advanced-popup-select-unit" 
										data-popup-setting="popup-on-scroll-distance" 
										data-max="5000" 
										data-value="200" 
										name="woostify_builder_advanced_popup_action_on_scroll_distance_unit" 
										id="woostify-builder-advanced-popup-action-on-scroll-distance-unit"
									>
										<option <?php selected( $popup_on_scroll_distance_unit, 'px' ); ?> value="px"><?php echo esc_html__( 'px', 'woostify-pro' ); ?></option>
										<option <?php selected( $popup_on_scroll_distance_unit, '%' ); ?> value="%"><?php echo esc_html__( '%', 'woostify-pro' ); ?></option>
										<option <?php selected( $popup_on_scroll_distance_unit, 'vh' ); ?> value="vh"><?php echo esc_html__( 'vh', 'woostify-pro' ); ?></option>
									</select>
								</div>
								<div class="advanced-popup-range">
									<input 
										class="advanced-popup-input-range" 
										data-popup-setting="popup-on-scroll-distance" 
										type="range" 
										min="0" 
										max="<?php echo ( $popup_on_scroll_distance_unit == 'px' )? '5000' : '100'; ?>" 
										value="200" 
										id="woostify-builder-advanced-popup-action-on-scroll-range"
									/>     	
									<input 
										class="advanced-popup-input-number" 
										data-popup-setting="popup-on-scroll-distance" 
										type="number" 
										min="0" 
										max="<?php echo ( $popup_on_scroll_distance_unit == 'px' )? '5000' : '100'; ?>" 
										name="woostify_builder_advanced_popup_action_on_scroll_distance" 
										id="woostify-builder-advanced-popup-action-on-scroll-distance" 
										step="1" 
										value="<?php echo esc_attr( $popup_on_scroll_distance ); ?>"
										data-value="<?php echo esc_attr( $popup_on_scroll_distance.':'.$popup_on_scroll_distance_unit ); ?>"
									/>
								</div>
							</div>
							<div class="advanced-popup-action-option">
								<div class="description"><?php echo esc_html__( "Set the scroll distance till the popup block will appear.", 'woostify-pro' ); ?></div>					
							</div>
						</div>

						<div data-action="on-scroll-to-element" class="advanced-popup-action-setting <?php echo ( $action_popup == 'on-scroll-to-element' )? '' : 'woostify-hidden'; ?>" <?php selected( $action_popup, 'on-scroll-to-element' ); ?> >
							<div class="advanced-popup-action-option">
								<p class="advanced-popup-text">
									<strong><?php echo esc_html__( 'Element Class', 'woostify-pro' ); ?></strong>
								</p>
								<input class="advanced-popup-input element-class" type="text" value="<?php echo esc_attr( $popup_on_scroll_to_element ); ?>" placeholder=".my-class" name="woostify_builder_advanced_popup_action_on_scroll_to_element" id="woostify-builder-advanced-popup-action-on-scroll-to-element">
							</div>
							<div class="advanced-popup-action-option">
								<div class="description"><?php echo esc_html__( "add class you want to show popup.", 'woostify-pro' ); ?></div>					
							</div>
						</div>

						<div data-action="on-after-inactivity" class="advanced-popup-action-setting <?php echo ( $action_popup == 'on-after-inactivity' )? '' : 'woostify-hidden'; ?>" <?php selected( $action_popup, 'on-after-inactivity' ); ?> >
							<div class="advanced-popup-action-option">
								<p class="advanced-popup-text">
									<strong><?php echo esc_html__( 'Inactivity Time', 'woostify-pro' ); ?></strong>
								</p>
								<input class="advanced-popup-input after-inactivity-time" type="number" value="<?php echo esc_attr( $popup_on_after_inactivity_time ); ?>" min="1" name="woostify_builder_advanced_popup_action_on_after_inactivity_time" id="woostify-builder-advanced-popup-action-on-after-inactivity-time">
							</div>
							<div class="advanced-popup-action-option">
								<div class="description"><?php echo esc_html__( "Set after how much time (in seconds) the popup block will appear.", 'woostify-pro' ); ?></div>					
							</div>
						</div>

					</div>
				</div>
			</div>
			<div class="woostify-metabox-option-tab-content" data-tab="popup-design">
				<div class="woostify-metabox-option">
					<div class="woostify-builder-advanced-popup-control">
						<div class="advanced-popup-unit">
							<p class="advanced-popupn-text">
								<strong><?php echo esc_html__( 'Padding', 'woostify-pro' ); ?></strong>
							</p>
							<select 
								class="advanced-popup-select-padding-unit" 
								data-popup-setting="popup-padding" 
								name="woostify_builder_advanced_popup_padding_unit" 
								id="woostify-builder-advanced-popup-padding-unit"
							>
								<option <?php selected( $popup_padding_unit, 'px' ); ?> value="px"><?php echo esc_html__( 'px', 'woostify-pro' ); ?></option>
								<option <?php selected( $popup_padding_unit, '%' ); ?> value="%"><?php echo esc_html__( '%', 'woostify-pro' ); ?></option>
							</select>
						</div>
						<div class="advanced-popup-padding">
							<input 
								class="advanced-popup-input-number" 
								data-popup-setting="popup-padding" 
								type="number" 
								min="0" 
								name="woostify_builder_advanced_popup_padding" 
								id="woostify-builder-advanced-popup-padding" 
								step="1" 
								value="<?php echo esc_attr( $popup_padding ); ?>"
								data-value="<?php echo esc_attr( $popup_padding.':'.$popup_padding_unit ); ?>"
							/>
						</div>
					</div>
				</div>
				<div class="woostify-metabox-option">
					<div class="woostify-builder-advanced-popup-control">
						<div class="advanced-popup-unit">
							<p class="advanced-popupn-text">
								<strong><?php echo esc_html__( 'Border Radius', 'woostify-pro' ); ?></strong>
							</p>
							<select 
								class="advanced-popup-select-border-radius-unit" 
								data-popup-setting="popup-border-radius" 
								name="woostify_builder_advanced_popup_border_radius_unit" 
								id="woostify-builder-advanced-popup-border-radius-unit"
							>
								<option <?php selected( $popup_border_radius_unit, 'px' ); ?> value="px"><?php echo esc_html__( 'px', 'woostify-pro' ); ?></option>
								<option <?php selected( $popup_border_radius_unit, '%' ); ?> value="%"><?php echo esc_html__( '%', 'woostify-pro' ); ?></option>
							</select>
						</div>
						<div class="advanced-popup-border-radius">
							<input 
								class="advanced-popup-input-number" 
								data-popup-setting="popup-border-radius" 
								type="number" 
								min="0" 
								name="woostify_builder_advanced_popup_border_radius" 
								id="woostify-builder-advanced-popup-border-radius" 
								step="1" 
								value="<?php echo esc_attr( $popup_border_radius ); ?>"
								data-value="<?php echo esc_attr( $popup_border_radius.':'.$popup_border_radius_unit ); ?>"
							/>
						</div>
					</div>
				</div>
				<div class="woostify-metabox-option">
					<div class="woostify-builder-advanced-popup-control">
						<div class="components-toggle-wrap">
							<span class="components-toggle">
								<input type="checkbox" class="components-toggle__input" name="woostify_builder_advanced_popup_scroll_lock" id="woostify-builder-advanced-popup-scroll-lock" value="scroll-lock" <?php checked( $popup_scroll_lock, 'scroll-lock' ); ?>>
								<span class="components-toggle__track"></span>
								<span class="components-toggle__thumb"></span>
							</span>
							<label for="woostify-builder-advanced-popup-close-button">
								<?php esc_html_e( 'Scroll Lock', 'woostify-pro' ); ?>								
							</label>
						</div>
						<div class="description">
							<?php echo __( 'Enable this option if you want to lock the page scroll while the popup is triggered.', 'woostify-pro' ); ?>
						</div>
					</div>
				</div>
				<div class="woostify-metabox-option">
					<div class="woostify-builder-advanced-popup-control">
						<p class="advanced-popupn-text">
							<strong><?php echo esc_html__( 'Close Button', 'woostify-pro' ); ?></strong>
						</p>
						<select name="woostify_builder_advanced_popup_close_button_layout" id="woostify-builder-advanced-popup-close-button-layout">
							<option <?php selected( $popup_close_button_layout, 'inside' ); ?> value="inside"><?php echo esc_html__( 'Insiden', 'woostify-pro' ); ?></option>
							<option <?php selected( $popup_close_button_layout, 'outside' ); ?> value="outside"><?php echo esc_html__( 'Outside', 'woostify-pro' ); ?></option>
						</select>
					</div>
					<div class="woostify-builder-advanced-popup-control">
						<p class="advanced-popupn-text">
							<strong><?php echo esc_html__( 'Close Icon Color', 'woostify-pro' ); ?></strong>
						</p>
						<div class="advanced-popup-color">
							<div class="color">
								<P><?php echo esc_html__( 'Initial', 'woostify-pro' ); ?></P>
								<input 
									class="advanced-popup-input-color" 
									type="text" 
									name="woostify_builder_advanced_popup_close_button_color"
									id="woostify-builder-advanced-popup-close-button-color" 
									value="<?php echo esc_attr( $popup_close_button_color ); ?>"
								/>
							</div>
							<div class="color">
								<P><?php echo esc_html__( 'Hover', 'woostify-pro' ); ?></P>
								<input 
									class="advanced-popup-input-color" 
									type="text" 
									name="woostify_builder_advanced_popup_close_button_color_hover" 
									id="woostify-builder-advanced-popup-close-button-color-hover" 
									value="<?php echo esc_attr( $popup_close_button_color_hover ); ?>"
								/>
							</div>
						</div>
					</div>
					<div class="woostify-builder-advanced-popup-control">
						<p class="advanced-popupn-text">
							<strong><?php echo esc_html__( 'Close Icon Background', 'woostify-pro' ); ?></strong>
						</p>
						<div class="advanced-popup-color">
							<div class="color">
								<P><?php echo esc_html__( 'Initial', 'woostify-pro' ); ?></P>
								<input 
									class="advanced-popup-input-color" 
									type="text" 
									name="woostify_builder_advanced_popup_close_button_background" 
									id="woostify-builder-advanced-popup-close-button-background" 
									value="<?php echo esc_attr( $popup_close_button_background ); ?>"
								/>
							</div>
							<div class="color">
								<P><?php echo esc_html__( 'Hover', 'woostify-pro' ); ?></P>
								<input 
									class="advanced-popup-input-color" 
									type="text" 
									name="woostify_builder_advanced_popup_close_button_background_hover"
									id="woostify-builder-advanced-popup-close-button-background-hover" 
									value="<?php echo esc_attr( $popup_close_button_background_hover ); ?>"
								/>
							</div>
						</div>
					</div>
				</div>
				<div class="woostify-metabox-option">
					<div class="woostify-builder-advanced-popup-control">
						<p class="advanced-popupn-text">
							<strong><?php echo esc_html__( 'Popup Background', 'woostify-pro' ); ?></strong>
						</p>
						<div class="advanced-popup-color">
							<input class="advanced-popup-input-color" type="text" name="woostify_builder_advanced_popup_background" value="<?php echo esc_attr( $popup_background ); ?>"/>
						</div>
					</div>
				</div>
				<div class="woostify-metabox-option">
					<div class="woostify-builder-advanced-popup-control">
						<p class="advanced-popupn-text">
							<strong><?php echo esc_html__( 'Overlay Background', 'woostify-pro' ); ?></strong>
						</p>
						<div class="advanced-popup-color">
							<input class="advanced-popup-input-color" type="text" name="woostify_builder_advanced_popup_overlay_background" value="<?php echo esc_attr( $popup_overlay_background ); ?>"/>
						</div>
					</div>
				</div>
			</div>
            <?php

        }

		public function render_data_setting_popups() {
			$template_ids = $this->get_template_advanced_popup_ids( 'woostify_builder_popup' );
			
			$popups_data = '';

			if( $template_ids !== '' ){

				foreach ( $template_ids as $key => $id ) {
					$popup_id = $id;

					// width popup
					$popup_width = get_post_meta( $popup_id, 'woostify_builder_advanced_popup_width', true );
					$popup_width_unit = get_post_meta( $popup_id, 'woostify_builder_advanced_popup_width_unit', true );
					
					// Height popup
					$popup_height_type = get_post_meta( $popup_id, 'woostify_builder_advanced_popup_height_type', true);
					$popup_height_position_content = get_post_meta( $popup_id, 'woostify_builder_advanced_popup_height_position_content', true);
					$popup_height_unit = get_post_meta( $popup_id, 'woostify_builder_advanced_popup_height_custom_unit', true);
					$popup_height_custom = get_post_meta( $popup_id, 'woostify_builder_advanced_popup_height_custom', true);

					// position popup
					$popup_position_horizontal = get_post_meta( $popup_id, 'woostify_builder_advanced_popup_position_horizontal', true);
					$popup_position_vertical = get_post_meta( $popup_id, 'woostify_builder_advanced_popup_position_vertical', true);

					$popup_animation_duration = get_post_meta( $popup_id, 'woostify_builder_advanced_popup_animation_duration', true );
					
					// design popup
					$popup_close_button_color = get_post_meta( $popup_id, 'woostify_builder_advanced_popup_close_button_color', true );
					$popup_close_button_color_hover = get_post_meta( $popup_id, 'woostify_builder_advanced_popup_close_button_color_hover', true );
					$popup_close_button_background = get_post_meta( $popup_id, 'woostify_builder_advanced_popup_close_button_background', true );
					$popup_close_button_background_hover = get_post_meta( $popup_id, 'woostify_builder_advanced_popup_close_button_background_hover', true );
					$popup_background = get_post_meta( $popup_id, 'woostify_builder_advanced_popup_background', true );
					$popup_overlay_background = get_post_meta( $popup_id, 'woostify_builder_advanced_popup_overlay_background', true );
					$popup_padding_unit = get_post_meta( $popup_id, 'woostify_builder_advanced_popup_padding_unit', true );
					$popup_padding = get_post_meta( $popup_id, 'woostify_builder_advanced_popup_padding', true );
					$popup_border_radius_unit = get_post_meta( $popup_id, 'woostify_builder_advanced_popup_border_radius_unit', true );
					$popup_border_radius = get_post_meta( $popup_id, 'woostify_builder_advanced_popup_border_radius', true );
					
					$data_popup = "[data-woostify-popup*='{$popup_id}']{";
					$data_popup .= !empty( $popup_close_button_color )? "--woostify-toggle-button-color: {$popup_close_button_color};" : '';
					$data_popup .= !empty( $popup_close_button_color_hover )? "--woostify-toggle-button-color-hover: {$popup_close_button_color_hover};" : '';
					$data_popup .= !empty( $popup_close_button_background )? "--woostify-toggle-button-background: {$popup_close_button_background};" : '';
					$data_popup .= !empty( $popup_close_button_background_hover )? "--woostify-toggle-button-background-hover: {$popup_close_button_background_hover};" : '';
					$data_popup .= !empty( $popup_background )? "--woostify-popup-background: {$popup_background};" : '';
					$data_popup .= !empty( $popup_overlay_background )? "--woostify-popup-overlay-background: {$popup_overlay_background};" : '';
					$data_popup .= (!empty( $popup_padding ) || $popup_padding == 0 )? "--woostify-popup-padding: {$popup_padding}{$popup_padding_unit};" : '';
					$data_popup .= !empty( $popup_border_radius || $popup_border_radius == 0 )? "--woostify-popup-border-radius: {$popup_border_radius}{$popup_border_radius_unit};" : '';
				
					$data_popup .= "--woostify-popup-width: {$popup_width}{$popup_width_unit};";
					if( $popup_height_type == 'fit-to-custom' ){
						$data_popup .= "--woostify-popup-height: {$popup_height_custom}{$popup_height_unit};";
					}

					$data_popup .= "--woostify-position-content: {$popup_height_position_content};";
					$data_popup .= "--woostify-position-horizontal: {$popup_position_horizontal};";
					$data_popup .= "--woostify-position-vertical: {$popup_position_vertical};";
					$data_popup .= "--woostify-animation-duration: {$popup_animation_duration}s;";
					$data_popup .= "}";

					$popups_data .= $data_popup;

				}
			}

			return $popups_data;
		}

		/**
		 * Admin enqueue styles and scripts.
		 */
		public function admin_enqueue_scripts() {
			wp_enqueue_media();
			wp_enqueue_style( 'wp-color-picker');
			wp_enqueue_script( 'wp-color-picker');
		}

		/**
		 * Enqueue styles and scripts.
		 */
		public function enqueue_scripts() {

			// enqueue style
			wp_enqueue_style(
				'woostify-builder-addon-advanced-popup-animate',
				WOOSTIFY_PRO_MODULES_URI . 'woostify-theme-builder-addon/advanced-popup/assets/css/animate.min.css',
				array(),
				WOOSTIFY_PRO_VERSION
			);

			wp_enqueue_style(
				'woostify-builder-addon-advanced-popup',
				WOOSTIFY_PRO_MODULES_URI . 'woostify-theme-builder-addon/advanced-popup/assets/css/style.css',
				array(),
				WOOSTIFY_PRO_VERSION
			);

			$data_setting_popups = $this->render_data_setting_popups();
			wp_add_inline_style( 'woostify-builder-addon-advanced-popup', $data_setting_popups );

			// enqueue script
			wp_enqueue_script(
				'woostify-builder-addon-advanced-popup',
				WOOSTIFY_PRO_MODULES_URI . 'woostify-theme-builder-addon/advanced-popup/assets/js/popup' . woostify_suffix() . '.js',
				array(),
				WOOSTIFY_PRO_VERSION,
				true
			);

			wp_localize_script( 'woostify-builder-addon-advanced-popup', 'advanced_popup_data',
				array( 
					'ajaxurl' => admin_url( 'admin-ajax.php' ),
				)
			);

			$template_ids = $this->get_template_advanced_popup_ids( 'woostify_builder_popup' );

			if ( '' !== $template_ids ) {
				
				foreach ($template_ids as $key => $template_id) {
					if ( class_exists( 'Elementor\Plugin' ) ) {
						if ( class_exists( '\Elementor\Core\Files\CSS\Post' ) ) {
							$css_file = new \Elementor\Core\Files\CSS\Post( $template_id );
						} elseif ( class_exists( '\Elementor\Post_CSS_File' ) ) {
							$css_file = new \Elementor\Post_CSS_File( $template_id );
						}
						$css_file->enqueue();
					}
				}

			}

		}

		/**
		 * save action popup settings
		 */
		public function save_wp_builder_addon_advanced_popup( $post_id, $post ) {
			$post_type = get_post_type( $post_id );
			if ( 'wp_builder_addon' !== $post_type ) {
				return;
			}
			
			$nonce_key = 'woostify_metabox_settings_wp_builder_addon';

			// verify nonce
			if ( !isset( $_POST[$nonce_key] ) && !wp_verify_nonce( sanitize_text_field($_POST[$nonce_key]), $nonce_key ) ) {
				return 'nonce not verified';
			}

			// check permissions
			if ( ! current_user_can( 'edit_post', $post_id ) ) {
				return 'cannot edit post';
			}

			$meta_options = $this->get_builder_meta_popup_option();

			foreach ( $meta_options as $key_op => $option ) {

				// Sanitize values.
				$sanitize_filter = isset( $option['sanitize'] ) ? $option['sanitize'] : 'FILTER_DEFAULT';

				switch ( $sanitize_filter ) {

					case 'FILTER_SANITIZE_STRING':
							$meta_value = filter_input( INPUT_POST, $key_op, FILTER_SANITIZE_STRING );
						break;

					case 'FILTER_SANITIZE_URL':
							$meta_value = filter_input( INPUT_POST, $key_op, FILTER_SANITIZE_URL );
						break;

					case 'FILTER_SANITIZE_NUMBER_INT':
							$meta_value = filter_input( INPUT_POST, $key_op, FILTER_SANITIZE_NUMBER_INT );
						break;

					default:
							$meta_value = filter_input( INPUT_POST, $key_op, FILTER_DEFAULT );
						break;
				}
				
				// Store values.
				if ( $meta_value || $meta_value == 0 ) {
					update_post_meta( $post_id, $key_op, $meta_value );
				} else {
					delete_post_meta( $post_id, $key_op );
				}
			}

		}

	}

	/**
	 *  Kicking this off by calling 'get_instance()' method
	 */
	Woostify_Advanced_Popup_Builder_Addons::get_instance();

}
