<?php
/**
 * Page Tour Element
 *
 * @package BricksExtras
 */

/**
 * Page Tour element class.
 */
class X_Page_Tour extends \Bricks\Element {
	/**
	 * Element category.
	 *
	 * @var string
	 */
	public $category = 'extras';
	/**
	 * Element name.
	 *
	 * @var string
	 */
	public $name = 'xpagetour';
	/**
	 * Element icon.
	 *
	 * @var string
	 */
	public $icon = 'ti-direction-alt';
	/**
	 * CSS selector.
	 *
	 * @var string
	 */
	public $css_selector = '';
	/**
	 * Required scripts.
	 *
	 * @var array
	 */
	public $scripts = array( 'xPageTour' );
	/**
	 * Element is nestable.
	 *
	 * @var bool
	 */
	public $nestable = true;

	/**
	 * Get element label.
	 */
	public function get_label() {
		return esc_html__( 'Page Tour', 'bricksextras' );
	}

	/**
	 * Get element keywords.
	 */
	public function get_keywords() {
		return array( 'tour', 'step' );
	}

	/**
	 * Set control groups.
	 */
	public function set_control_groups() {

		$this->control_groups['steps'] = array(
			'title' => esc_html__( 'Step Popover Styling', 'bricksextras' ),
			'tab'   => 'content',
		);

		$this->control_groups['navButtons'] = array(
			'title' => esc_html__( 'Navigation', 'bricks' ),
			'tab'   => 'content',
		);

		$this->control_groups['progress'] = array(
			'title' => esc_html__( 'Progress Bar', 'bricks' ),
			'tab'   => 'content',
		);

		$this->control_groups['overlay'] = array(
			'title' => esc_html__( 'Overlay', 'bricks' ),
			'tab'   => 'content',
		);

		$this->control_groups['closeButton'] = array(
			'title' => esc_html__( 'Close button', 'bricks' ),
			'tab'   => 'content',
		);

		$this->control_groups['config'] = array(
			'title' => esc_html__( 'Configure', 'bricks' ),
			'tab'   => 'content',
		);

		$this->control_groups['userProgress'] = array(
			'title' => esc_html__( 'User progress', 'bricks' ),
			'tab'   => 'content',
		);
	}

	/**
	 * Set element controls.
	 */
	public function set_controls() {

		$this->controls['builderHidden'] = array(
			'tab'    => 'content',
			'inline' => true,
			'small'  => true,
			'label'  => esc_html__( 'Hide in builder', 'bricksextras' ),
			'type'   => 'checkbox',
		);

		$this->controls['builderHidden_sep'] = array(
			'tab'  => 'content',
			'type' => 'separator',
		);

		$this->controls['trigger'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Trigger', 'bricks' ),
			'inline'      => true,
			'type'        => 'select',
			'options'     => array(
				'page_load'    => esc_html__( 'Open on page load', 'bricks' ),
				'click'        => esc_html__( 'Click', 'bricks' ),
				'interaction'  => esc_html__( 'Interaction', 'bricks' ),
				'window_event' => esc_html__( 'Window Event', 'bricksextras' ),
			),
			'placeholder' => esc_html__( 'Open on page load', 'bricks' ),
		);

		$this->controls['trigger_event'] = array(
			'type'        => 'text',
			'label'       => esc_html__( 'Event', 'bricksextras' ),
			'inline'      => true,
			'placeholder' => '',
			'required'    => array( 'trigger', '=', 'window_event' ),
		);

		$this->controls['clickSelector'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Selector', 'bricks' ) . ' (' . esc_html__( 'Trigger', 'bricks' ) . ')',
			'inline'   => true,
			'type'     => 'text',
			'required' => array( 'trigger', '=', 'click' ),
		);

		$this->controls['show_again'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Show again', 'bricksextras' ),
			'inline'      => true,
			'type'        => 'select',
			'options'     => array(
				'page_load'      => esc_html__( 'Show on every visit', 'bricksextras' ),
				'never'          => esc_html__( 'Never show again', 'bricksextras' ),
				'until_complete' => esc_html__( 'Show again until completed', 'bricksextras' ),
				'after'          => esc_html__( 'Only allow to show again after:', 'bricksextras' ),
				'manual'         => esc_html__( 'Manual (if using with code)', 'bricksextras' ),
			),
			'placeholder' => esc_html__( 'Show on every visit', 'bricksextras' ),
			'required'    => array( 'trigger', '!=', 'click' ),

		);

		$this->controls['show_again_info'] = array(
			'tab'         => 'content',
			'description' => esc_html__( 'See the docs for details on showing tours in your code', 'bricksextras' ),
			'type'        => 'info',
			'required'    => array( 'show_again', '=', 'manual' ),
		);

		$this->controls['show_again_days'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Days', 'bricksextras' ),
			'type'     => 'number',
			'inline'   => true,
			'required' => array( 'show_again', '=', 'after' ),
		);

		$this->controls['show_again_hours'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Hours', 'bricksextras' ),
			'type'     => 'number',
			'inline'   => true,
			'required' => array( 'show_again', '=', 'after' ),
		);

		// Button Style.

		$this->controls['buttonBackground'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Background', 'bricks' ),
			'type'     => 'color',
			'group'    => 'buttons',
			'css'      => array(
				array(
					'property' => 'background-color',
					'selector' => '.x-page-tour-button',
				),
			),
			'required' => array( 'autoStart', '=', '' ),
		);

		$this->controls['buttonTypography'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Typography', 'bricks' ),
			'type'     => 'typography',
			'group'    => 'buttons',
			'css'      => array(
				array(
					'property' => 'font',
					'selector' => '.x-page-tour-button',
				),
			),
			'required' => array( 'autoStart', '=', '' ),
		);

		$this->controls['buttonBorder'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Border', 'bricks' ),
			'type'     => 'border',
			'group'    => 'buttons',
			'css'      => array(
				array(
					'property' => 'border',
					'selector' => '.x-page-tour-button',
				),
			),
			'required' => array( 'autoStart', '=', '' ),
		);

		$this->controls['buttonPadding'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Padding', 'bricks' ),
			'type'     => 'spacing',
			'group'    => 'buttons',
			'css'      => array(
				array(
					'property' => 'padding',
					'selector' => '.x-page-tour-button',
				),
			),
			'required' => array( 'autoStart', '=', '' ),
		);

		/* steps */

		$shepard_content = '.extras-theme.shepherd-element .shepherd-content';

		$this->controls['stepContentBackground'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Background color', 'bricks' ),
			'type'  => 'color',
			'group' => 'steps',
			'css'   => array(
				array(
					'property' => '--x-tour-background',
					'selector' => '.extras-theme.shepherd-element',
				),
			),
		);

		$this->controls['stepContentTypography'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Typography', 'bricks' ),
			'type'  => 'typography',
			'group' => 'steps',
			'css'   => array(
				array(
					'property' => 'font',
					'selector' => $shepard_content,
				),
			),
		);

		$this->controls['stepTitleTypography'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Typography', 'bricks' ) . ' (' . esc_html__( 'Title', 'bricks' ) . ')',
			'type'  => 'typography',
			'group' => 'steps',
			'css'   => array(
				array(
					'property' => 'font',
					'selector' => '.shepherd-title',
				),
			),
		);

		$this->controls['stepContentPadding'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Padding', 'bricks' ),
			'type'  => 'spacing',
			'group' => 'steps',
			'css'   => array(
				array(
					'property' => 'padding',
					'selector' => $shepard_content,
				),
			),
		);

		$this->controls['stepContentBorder'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Border', 'bricks' ),
			'type'  => 'border',
			'group' => 'steps',
			'css'   => array(
				array(
					'property' => 'border',
					'selector' => $shepard_content,
				),
			),
		);

		$this->controls['stepContentBoxShadow'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Box shadow', 'bricks' ),
			'type'  => 'box-shadow',
			'group' => 'steps',
			'css'   => array(
				array(
					'property' => 'box-shadow',
					'selector' => '.extras-theme.shepherd-element',
				),
			),
		);

		$this->controls['arrowSize'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Arrow size', 'bricks' ),
			'type'        => 'number',
			'units'       => true,
			'group'       => 'steps',
			'css'         => array(
				array(
					'property' => '--x-tour-arrow-size',
					'selector' => '.extras-theme.shepherd-element',
				),
			),
			'placeholder' => '16px',
		);

		/* overlay */

		/* close button */

		$close_button_selector = '.shepherd-cancel-icon';

		$this->controls['disableCloseButton'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Disable', 'bricks' ),
			'type'  => 'checkbox',
			'group' => 'closeButton',
		);

		$this->controls['closeButtonBackground'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Background', 'bricks' ),
			'type'     => 'color',
			'group'    => 'closeButton',
			'css'      => array(
				array(
					'property' => 'background-color',
					'selector' => $close_button_selector,
				),
			),
			'required' => array( 'disableCloseButton', '!=', true ),
		);

		$this->controls['closeButtonColor'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Color', 'bricks' ),
			'type'     => 'color',
			'group'    => 'closeButton',
			'css'      => array(
				array(
					'property' => 'color',
					'selector' => $close_button_selector,
				),
			),
			'required' => array( 'disableCloseButton', '!=', true ),
		);

		$this->controls['closeButtonSize'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Size', 'bricks' ),
			'type'        => 'number',
			'units'       => true,
			'group'       => 'closeButton',
			'placeholder' => '17px',
			'css'         => array(
				array(
					'property' => 'height',
					'selector' => '.extras-theme.shepherd-element .shepherd-cancel-icon:after',
				),
				array(
					'property' => 'height',
					'selector' => '.extras-theme.shepherd-element .shepherd-cancel-icon:before',
				),
			),
			'required'    => array( 'disableCloseButton', '!=', true ),
		);

		$this->controls['closeButtonBorder'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Border', 'bricks' ),
			'type'     => 'border',
			'group'    => 'closeButton',
			'css'      => array(
				array(
					'property' => 'border',
					'selector' => $close_button_selector,
				),
			),
			'required' => array( 'disableCloseButton', '!=', true ),
		);

		$this->controls['closeButtonBoxShadow'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Box shadow', 'bricks' ),
			'type'     => 'box-shadow',
			'group'    => 'closeButton',
			'css'      => array(
				array(
					'property' => 'box-shadow',
					'selector' => $close_button_selector,
				),
			),
			'required' => array( 'disableCloseButton', '!=', true ),
		);

		$this->controls['closeButtonPadding'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Padding', 'bricks' ),
			'type'     => 'spacing',
			'group'    => 'closeButton',
			'css'      => array(
				array(
					'property' => 'padding',
					'selector' => $close_button_selector,
				),
			),
			'required' => array( 'disableCloseButton', '!=', true ),
		);

		$this->controls['closeButtonMargin'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Margin', 'bricks' ),
			'type'     => 'spacing',
			'group'    => 'closeButton',
			'css'      => array(
				array(
					'property' => 'margin',
					'selector' => $close_button_selector,
				),
			),
			'required' => array( 'disableCloseButton', '!=', true ),
		);

		/* nav buttons */

		$this->controls['navButtons'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Buttons', 'bricks' ),
			'description' => esc_html__( 'Disable if adding your own buttons/links inside each step', 'bricksextras' ),
			'inline'      => true,
			'group'       => 'navButtons',
			'type'        => 'select',
			'options'     => array(
				'enable'  => esc_html__( 'Enable', 'bricks' ),
				'disable' => esc_html__( 'Disable', 'bricks' ),
			),
			'placeholder' => esc_html__( 'Enable', 'bricks' ),
		);

		$this->controls['previewNavButtons'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Preview', 'bricks' ),
			'inline'   => true,
			'group'    => 'navButtons',
			'type'     => 'checkbox',
			'required' => array( 'navButtons', '!=', 'disable' ),
		);

		$this->controls['navButtons_sep'] = array(
			'tab'      => 'content',
			'type'     => 'separator',
			'group'    => 'navButtons',
			'label'    => esc_html__( 'Button', 'bricks' ) . ' (' . esc_html__( 'Next', 'bricks' ) . ')',
			'required' => array( 'navButtons', '!=', 'disable' ),
		);

		$this->controls['customButtons_sep'] = array(
			'tab'         => 'content',
			'type'        => 'separator',
			'group'       => 'navButtons',
			'required'    => array( 'navButtons', '=', 'disable' ),
			'label'       => esc_html__( 'Selectors', 'bricks' ) . ' (' . esc_html__( 'Navigation', 'bricks' ) . ')',
			'description' => esc_html__( 'Custom navigation using your own buttons', 'bricksextras' ),
		);

		$this->controls['customBackSelector'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Back', 'bricks' ),
			'type'        => 'text',
			'required'    => array( 'navButtons', '=', 'disable' ),
			'placeholder' => '.x-tour-back',
			'group'       => 'navButtons',
			'inline'      => 'true',
		);

		$this->controls['customNextSelector'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Next', 'bricks' ),
			'type'        => 'text',
			'required'    => array( 'navButtons', '=', 'disable' ),
			'placeholder' => '.x-tour-next',
			'group'       => 'navButtons',
			'inline'      => 'true',
		);

		$this->controls['customCompleteSelector'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Finish', 'bricks' ),
			'type'        => 'text',
			'required'    => array( 'navButtons', '=', 'disable' ),
			'placeholder' => '.x-tour-complete',
			'group'       => 'navButtons',
			'inline'      => 'true',
		);

		$this->controls['customSkipSelector'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Skip', 'bricks' ),
			'type'        => 'text',
			'required'    => array( 'navButtons', '=', 'disable' ),
			'placeholder' => '.x-tour-skip',
			'group'       => 'navButtons',
			'inline'      => 'true',
		);

		$this->controls['autoHideCustomButtons'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Automatically hide custom buttons', 'bricksextras' ),
			'inline'      => true,
			'group'       => 'navButtons',
			'type'        => 'checkbox',
			'required'    => array( 'navButtons', '=', 'disable' ),
			'description' => esc_html__( 'Show each button/link conditionally', 'bricksextras' ),
		);

		$next_button = '.x-page-tour-button__next';

		// Button Text - Next.
		$this->controls['buttonNextText'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Button text', 'bricks' ),
			'inline'      => true,
			'type'        => 'text',
			'placeholder' => esc_html__( 'Next', 'bricksextras' ),
			'group'       => 'navButtons',
			'required'    => array( 'navButtons', '!=', 'disable' ),
		);

		$this->controls['nextButtonBackground'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Background color', 'bricks' ),
			'inline'   => true,
			'group'    => 'navButtons',
			'type'     => 'color',
			'css'      => array(
				array(
					'property' => 'background-color',
					'selector' => $next_button,
				),
			),
			'required' => array( 'navButtons', '!=', 'disable' ),
		);

		$this->controls['nextButtonTypography'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Typography', 'bricks' ),
			'inline'   => true,
			'group'    => 'navButtons',
			'type'     => 'typography',
			'css'      => array(
				array(
					'property' => 'font',
					'selector' => $next_button,
				),
			),
			'required' => array( 'navButtons', '!=', 'disable' ),
		);

		$this->controls['nextButtonBorder'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Border', 'bricks' ),
			'inline'   => true,
			'group'    => 'navButtons',
			'type'     => 'border',
			'css'      => array(
				array(
					'property' => 'border',
					'selector' => $next_button,
				),
			),
			'required' => array( 'navButtons', '!=', 'disable' ),
		);

		$this->controls['nextButtonBoxShadow'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Box shadow', 'bricks' ),
			'inline'   => true,
			'group'    => 'navButtons',
			'type'     => 'box-shadow',
			'css'      => array(
				array(
					'property' => 'box-shadow',
					'selector' => $next_button,
				),
			),
			'required' => array( 'navButtons', '!=', 'disable' ),
		);

		$this->controls['nextButtonPadding'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Padding', 'bricks' ),
			'group'    => 'navButtons',
			'type'     => 'spacing',
			'css'      => array(
				array(
					'property' => 'padding',
					'selector' => $next_button,
				),
			),
			'required' => array( 'navButtons', '!=', 'disable' ),
		);

		$this->controls['backButtonSep'] = array(
			'tab'      => 'content',
			'type'     => 'separator',
			'group'    => 'navButtons',
			'label'    => esc_html__( 'Button', 'bricks' ) . ' (' . esc_html__( 'Back', 'bricks' ) . ')',
			'required' => array( 'navButtons', '!=', 'disable' ),
		);

		// Button Text - Previous.
		$this->controls['buttonPrevText'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Button text', 'bricks' ),
			'inline'      => true,
			'type'        => 'text',
			'placeholder' => esc_html__( 'Back', 'bricksextras' ),
			'group'       => 'navButtons',
			'required'    => array( 'navButtons', '!=', 'disable' ),
		);

		$back_button = '.x-page-tour-button__back';

		$this->controls['backButtonBackground'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Background color', 'bricks' ),
			'inline'   => true,
			'group'    => 'navButtons',
			'type'     => 'color',
			'css'      => array(
				array(
					'property' => 'background-color',
					'selector' => $back_button,
				),
			),
			'required' => array( 'navButtons', '!=', 'disable' ),
		);

		$this->controls['backButtonTypography'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Typography', 'bricks' ),
			'inline'   => true,
			'group'    => 'navButtons',
			'type'     => 'typography',
			'css'      => array(
				array(
					'property' => 'font',
					'selector' => $back_button,
				),
			),
			'required' => array( 'navButtons', '!=', 'disable' ),
		);

		$this->controls['backButtonBorder'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Border', 'bricks' ),
			'inline'   => true,
			'group'    => 'navButtons',
			'type'     => 'border',
			'css'      => array(
				array(
					'property' => 'border',
					'selector' => $back_button,
				),
			),
			'required' => array( 'navButtons', '!=', 'disable' ),
		);

		$this->controls['backButtonBoxShadow'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Box shadow', 'bricks' ),
			'inline'   => true,
			'group'    => 'navButtons',
			'type'     => 'box-shadow',
			'css'      => array(
				array(
					'property' => 'box-shadow',
					'selector' => $back_button,
				),
			),
			'required' => array( 'navButtons', '!=', 'disable' ),
		);

		$this->controls['backButtonPadding'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Padding', 'bricks' ),
			'group'    => 'navButtons',
			'type'     => 'spacing',
			'css'      => array(
				array(
					'property' => 'padding',
					'selector' => $back_button,
				),
			),
			'required' => array( 'navButtons', '!=', 'disable' ),
		);

		$this->controls['completeButtonSep'] = array(
			'tab'      => 'content',
			'type'     => 'separator',
			'group'    => 'navButtons',
			'label'    => esc_html__( 'Button', 'bricks' ) . ' (' . esc_html__( 'Finish', 'bricks' ) . ')',
			'required' => array( 'navButtons', '!=', 'disable' ),
		);

		// Button Text - Close.
		$this->controls['buttonCloseText'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Button text', 'bricks' ),
			'inline'      => true,
			'type'        => 'text',
			'placeholder' => esc_html__( 'Finish', 'bricksextras' ),
			'group'       => 'navButtons',
			'required'    => array( 'navButtons', '!=', 'disable' ),
		);

		$complete_button = '.x-page-tour-button__complete';

		$this->controls['completeButtonBackground'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Background color', 'bricks' ),
			'inline'   => true,
			'group'    => 'navButtons',
			'type'     => 'color',
			'css'      => array(
				array(
					'property' => 'background-color',
					'selector' => $complete_button,
				),
			),
			'required' => array( 'navButtons', '!=', 'disable' ),
		);

		$this->controls['completeButtonTypography'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Typography', 'bricks' ),
			'inline'   => true,
			'group'    => 'navButtons',
			'type'     => 'typography',
			'css'      => array(
				array(
					'property' => 'font',
					'selector' => $complete_button,
				),
			),
			'required' => array( 'navButtons', '!=', 'disable' ),
		);

		$this->controls['completeButtonBorder'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Border', 'bricks' ),
			'inline'   => true,
			'group'    => 'navButtons',
			'type'     => 'border',
			'css'      => array(
				array(
					'property' => 'border',
					'selector' => $complete_button,
				),
			),
			'required' => array( 'navButtons', '!=', 'disable' ),
		);

		$this->controls['completeButtonBoxShadow'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Box shadow', 'bricks' ),
			'inline'   => true,
			'group'    => 'navButtons',
			'type'     => 'box-shadow',
			'css'      => array(
				array(
					'property' => 'box-shadow',
					'selector' => $complete_button,
				),
			),
			'required' => array( 'navButtons', '!=', 'disable' ),
		);

		$this->controls['completeButtonPadding'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Padding', 'bricks' ),
			'group'    => 'navButtons',
			'type'     => 'spacing',
			'css'      => array(
				array(
					'property' => 'padding',
					'selector' => $complete_button,
				),
			),
			'required' => array( 'navButtons', '!=', 'disable' ),
		);

		/* progress */

		$this->controls['showProgress'] = array(
			'tab'   => 'content',
			'group' => 'progress',
			'label' => esc_html__( 'Enable', 'bricks' ),
			'type'  => 'checkbox',
		);

		$this->controls['progressPosition'] = array(
			'tab'         => 'content',
			'group'       => 'progress',
			'label'       => esc_html__( 'Position', 'bricks' ),
			'type'        => 'select',
			'inline'      => true,
			'options'     => array(
				'top'    => esc_html__( 'Top', 'bricks' ),
				'bottom' => esc_html__( 'Bottom', 'bricks' ),
			),
			'placeholder' => esc_html__( 'Bottom', 'bricks' ),
			'required'    => array( 'showProgress', '=', true ),
		);

		$this->controls['progressHeight'] = array(
			'tab'         => 'content',
			'group'       => 'progress',
			'label'       => esc_html__( 'Height', 'bricks' ),
			'type'        => 'number',
			'units'       => true,
			'placeholder' => '6px',
			'css'         => array(
				array(
					'property' => 'height',
					'selector' => '.shepherd-progress-container',
				),
			),
			'required'    => array( 'showProgress', '=', true ),
		);

		$this->controls['progressColor'] = array(
			'tab'      => 'content',
			'group'    => 'progress',
			'label'    => esc_html__( 'Color', 'bricks' ),
			'type'     => 'color',
			'css'      => array(
				array(
					'property' => 'background-color',
					'selector' => '.shepherd-progress-bar',
				),
			),
			'required' => array( 'showProgress', '=', true ),
		);

		$this->controls['progressBackground'] = array(
			'tab'      => 'content',
			'group'    => 'progress',
			'label'    => esc_html__( 'Background', 'bricks' ),
			'type'     => 'color',
			'css'      => array(
				array(
					'property' => 'background-color',
					'selector' => '.shepherd-progress-container',
				),
			),
			'required' => array( 'showProgress', '=', true ),
		);

		/* overlay */

		$this->controls['useModalOverlay'] = array(
			'tab'   => 'content',
			'group' => 'overlay',
			'label' => esc_html__( 'Enable', 'bricks' ),
			'type'  => 'checkbox',
		);

		$this->controls['overlayColor'] = array(
			'tab'      => 'content',
			'group'    => 'overlay',
			'label'    => esc_html__( 'Color', 'bricks' ),
			'type'     => 'color',
			'css'      => array(
				array(
					'property' => 'fill',
					'selector' => '.shepherd-modal-overlay-container',
				),
			),
			'required' => array( 'useModalOverlay', '=', true ),
		);

		$this->controls['exitOnOverlayClick'] = array(
			'tab'      => 'content',
			'group'    => 'overlay',
			'label'    => esc_html__( 'Click overlay to exit tour', 'bricksextras' ),
			'type'     => 'checkbox',
			'required' => array( 'useModalOverlay', '=', true ),
		);

		$this->controls['canClickTarget'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Allow target element to be clicked', 'bricksextras' ),
			'type'     => 'checkbox',
			'group'    => 'overlay',
			'required' => array( 'useModalOverlay', '=', true ),
		);

		$this->controls['modalOverlayOpeningPadding'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Padding', 'bricks' ) . ' (' . esc_html__( 'Opening hole', 'bricks' ) . ')',
			'type'     => 'number',
			'group'    => 'overlay',
			'small'    => true,
			'required' => array(
				array( 'useModalOverlay', '=', true ),
				array( 'canClickTarget', '=', true ),
			),
		);

		$this->controls['modalOverlayOpeningRadius'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Radius', 'bricks' ) . ' (' . esc_html__( 'Opening hole', 'bricks' ) . ')',
			'type'     => 'number',
			'group'    => 'overlay',
			'small'    => true,
			'required' => array(
				array( 'useModalOverlay', '=', true ),
				array( 'canClickTarget', '=', true ),
			),
		);

		$this->controls['keyboardNavigation'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Keyboard Navigation', 'bricksextras' ),
			'type'  => 'checkbox',
			'group' => 'config',
		);

		$this->controls['exitOnEsc'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Press Esc to close', 'bricksextras' ),
			'type'  => 'checkbox',
			'group' => 'config',
		);

		$this->controls['confirmCancel'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Confirm Cancel', 'bricksextras' ),
			'type'        => 'checkbox',
			'group'       => 'config',
			'description' => esc_html__( 'Show confirmation dialog if canceling tour', 'bricksextras' ),
		);

		$this->controls['confirmCancelMessage'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Confirm Cancel Message', 'bricksextras' ),
			'type'        => 'text',
			'placeholder' => esc_html__( 'Are you sure you want to exit the tour?', 'bricksextras' ),
			'required'    => array( 'confirmCancel', '=', true ),
			'group'       => 'config',
		);

		$this->controls['defaultHighlight'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Highlight Target Elements', 'bricksextras' ),
			'type'  => 'checkbox',
			'group' => 'config',
		);

		$this->controls['defaultScrollTo'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Scroll To Target Elements', 'bricksextras' ),
			'type'  => 'checkbox',
			'group' => 'config',
		);

		// When target not found.
		$this->controls['targetNotFound'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'When target elements not found:', 'bricksextras' ),
			'type'        => 'select',
			'options'     => array(
				'show' => esc_html__( 'Show step in center of viewport', 'bricksextras' ),
				'skip' => esc_html__( 'Skip that step', 'bricksextras' ),
			),
			'group'       => 'config',
			'placeholder' => esc_html__( 'Show step in center of viewport', 'bricksextras' ),
		);

		$this->controls['componentScope'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Component scope', 'bricksextras' ),
			'type'        => 'select',
			'options'     => array(
				'true'  => esc_html__( 'True', 'bricks' ),
				'false' => esc_html__( 'False', 'bricks' ),
			),
			'inline'      => true,
			'placeholder' => esc_html__( 'False', 'bricks' ),
			'group'       => 'config',
		);

		/* user progress */

		$this->controls['rememberProgress'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Remember User Progress', 'bricksextras' ),
			'type'  => 'checkbox',
			'group' => 'userProgress',
		);

		$this->controls['autoResumeOnPageLoad'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Auto-resume on page load', 'bricksextras' ),
			'type'        => 'select',
			'inline'      => true,
			'small'       => true,
			'options'     => array(
				'true'  => esc_html__( 'True', 'bricks' ),
				'false' => esc_html__( 'False', 'bricks' ),
			),
			'placeholder' => esc_html__( 'True', 'bricks' ),
			'group'       => 'userProgress',
			'description' => '(' . esc_html__( 'Overrides the show again settings until the user completes or cancels', 'bricksextras' ) . ')',
			'required'    => array( 'rememberProgress', '=', true ),
		);

		$this->controls['clearProgressOnCancel'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Clear progress on cancel', 'bricksextras' ),
			'type'        => 'select',
			'inline'      => true,
			'small'       => true,
			'options'     => array(
				'true'  => esc_html__( 'True', 'bricks' ),
				'false' => esc_html__( 'False', 'bricks' ),
			),
			'placeholder' => esc_html__( 'True', 'bricks' ),
			'group'       => 'userProgress',
			'required'    => array( 'rememberProgress', '=', true ),
		);

		$this->controls['saveNextStep'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Step to return to', 'bricksextras' ),
			'type'        => 'select',
			'inline'      => true,
			'options'     => array(
				'current' => esc_html__( 'Current', 'bricks' ),
				'next'    => esc_html__( 'Next', 'bricks' ),
			),
			'description' => esc_html__( 'Next step is useful for multi-page tours', 'bricksextras' ),
			'required'    => array( 'rememberProgress', '=', true ),
			'group'       => 'userProgress',
			'placeholder' => esc_html__( 'Current', 'bricks' ),
		);
	}


	/**
	 * Enqueue scripts.
	 */
	public function enqueue_scripts() {
		if ( bricks_is_builder_main() ) {
			return;
		}

		// Enqueue Shepherd.js library as ES module.
		wp_enqueue_script( 'shepherd', BRICKSEXTRAS_URL . 'components/assets/js/shepherd.min.js', array(), '15.2.2', true );
		add_filter( 'script_loader_tag', array( $this, 'add_module_to_script' ), 10, 3 );

		// Enqueue our custom script as ES module.
		wp_enqueue_script( 'x-page-tour', BRICKSEXTRAS_URL . 'components/assets/js/' . \BricksExtras\Helpers::maybe_minify_scripts( 'page-tour' ) . '.js', array(), \BricksExtras\Plugin::VERSION, true );

		if ( ! \BricksExtras\Helpers::element_css_added( $this->name ) ) {
			wp_enqueue_style( 'x-page-tour', BRICKSEXTRAS_URL . 'components/assets/css/page-tour.css', array(), \BricksExtras\Plugin::VERSION );
		}
	}

	/**
	 * Add type="module" to shepherd and page-tour scripts.
	 *
	 * @param string $tag    The script tag.
	 * @param string $handle The script handle.
	 * @param string $src    The script source.
	 * @return string Modified script tag.
	 */
	public function add_module_to_script( $tag, $handle, $src ) {
		if ( 'shepherd' === $handle || 'x-page-tour' === $handle ) {
			$tag = str_replace( '<script ', '<script type="module" ', $tag );
		}
		return $tag;
	}

	/**
	 * Get nestable item.
	 */
	public function get_nestable_item() {
		return array(
			'name'     => 'xpagetourstep',
			'label'    => esc_html__( 'Page Tour Step', 'bricksextras' ),
			'children' => array(
				array(
					'name'     => 'text-basic',
					'settings' => array(
						'text' => esc_html__( 'Step content..', 'bricksextras' ),
					),
				),
			),
		);
	}

	/**
	 * Get nestable children.
	 */
	public function get_nestable_children() {
		return \BricksExtras\Helpers::get_nestable_children_helper( $this, 2 );
	}

	/**
	 * Render element output.
	 */
	public function render() {

		$settings = $this->settings;

		// Generate a unique identifier for this tour.
		$identifier = \BricksExtras\Helpers::set_identifier_attribute( $this );

		$nav_buttons = isset( $settings['navButtons'] ) ? 'enable' === $settings['navButtons'] : true;

		$trigger = isset( $settings['trigger'] ) ? $settings['trigger'] : 'page_load';

		// Build tour configuration.
		$tour_config = array(
			'trigger'               => $trigger,
			'showProgress'          => isset( $settings['showProgress'] ),
			'progressPosition'      => $settings['progressPosition'] ?? 'bottom',
			'exitOnOverlayClick'    => isset( $settings['exitOnOverlayClick'] ),
			'useModalOverlay'       => isset( $settings['useModalOverlay'] ),
			'confirmCancel'         => isset( $settings['confirmCancel'] ),
			'keyboardNavigation'    => isset( $settings['keyboardNavigation'] ),
			'exitOnEsc'             => isset( $settings['exitOnEsc'] ),
			'confirmCancelMessage'  => isset( $settings['confirmCancelMessage'] ) ? esc_html( bricks_render_dynamic_data( $settings['confirmCancelMessage'] ) ) : esc_html__( 'Are you sure you want to exit the tour?', 'bricksextras' ),
			'defaultHighlight'      => isset( $settings['defaultHighlight'] ),
			'defaultScrollTo'       => isset( $settings['defaultScrollTo'] ),
			'targetNotFound'        => $settings['targetNotFound'] ?? 'show',
			'rememberProgress'      => isset( $settings['rememberProgress'] ),
			'autoResumeOnPageLoad'  => ( $settings['autoResumeOnPageLoad'] ?? 'true' ) === 'true',
			'saveNextStep'          => $settings['saveNextStep'] ?? 'current',
			'clearProgressOnCancel' => ( $settings['clearProgressOnCancel'] ?? 'true' ) === 'true',
			'showAgain'             => $settings['show_again'] ?? 'page_load',
			'showAgainDays'         => isset( $settings['show_again_days'] ) ? intval( $settings['show_again_days'] ) : 0,
			'showAgainHours'        => isset( $settings['show_again_hours'] ) ? intval( $settings['show_again_hours'] ) : 0,
			'disableCloseButton'    => isset( $settings['disableCloseButton'] ),
		);

		if ( isset( $settings['canClickTarget'] ) ) {
			$tour_config['canClickTarget']             = true;
			$tour_config['modalOverlayOpeningPadding'] = isset( $settings['modalOverlayOpeningPadding'] ) ? intval( $settings['modalOverlayOpeningPadding'] ) : 0;
			$tour_config['modalOverlayOpeningRadius']  = isset( $settings['modalOverlayOpeningRadius'] ) ? intval( $settings['modalOverlayOpeningRadius'] ) : 0;
		}

		// Conditional config: Component scope.
		if ( ( $settings['componentScope'] ?? 'false' ) === 'true' ) {
			$tour_config['component']       = \BricksExtras\Helpers::is_component_instance( $this->element );
			$tour_config['parentComponent'] = \BricksExtras\Helpers::get_parent_component_id( $this->element );
		}

		// Conditional config: Click trigger.
		if ( 'click' === $trigger ) {
			$tour_config['clickSelector'] = isset( $settings['clickSelector'] ) ? bricks_render_dynamic_data( $settings['clickSelector'] ) : '';
		}

		if ( 'window_event' === $trigger ) {
			$event_name                   = isset( $settings['trigger_event'] ) ? bricks_render_dynamic_data( $settings['trigger_event'] ) : '';
			$tour_config['trigger_event'] = $event_name;
		}

		if ( $nav_buttons ) {
			$tour_config['buttonPrevText']  = isset( $settings['buttonPrevText'] ) ? wp_kses_post( bricks_render_dynamic_data( $settings['buttonPrevText'] ) ) : 'Back';
			$tour_config['buttonNextText']  = isset( $settings['buttonNextText'] ) ? wp_kses_post( bricks_render_dynamic_data( $settings['buttonNextText'] ) ) : 'Next';
			$tour_config['buttonCloseText'] = isset( $settings['buttonCloseText'] ) ? wp_kses_post( bricks_render_dynamic_data( $settings['buttonCloseText'] ) ) : 'Finish';
		} else {
			$tour_config['navButtons']             = false;
			$tour_config['autoHideCustomButtons']  = isset( $settings['autoHideCustomButtons'] );
			$tour_config['customNextSelector']     = isset( $settings['customNextSelector'] ) ? bricks_render_dynamic_data( $settings['customNextSelector'] ) : '.x-tour-next';
			$tour_config['customBackSelector']     = isset( $settings['customBackSelector'] ) ? bricks_render_dynamic_data( $settings['customBackSelector'] ) : '.x-tour-back';
			$tour_config['customCompleteSelector'] = isset( $settings['customCompleteSelector'] ) ? bricks_render_dynamic_data( $settings['customCompleteSelector'] ) : '.x-tour-complete';
			$tour_config['customSkipSelector']     = isset( $settings['customSkipSelector'] ) ? bricks_render_dynamic_data( $settings['customSkipSelector'] ) : '.x-tour-skip';
		}

		// Set data attributes.
		$this->set_attribute( '_root', 'class', 'x-page-tour' );
		$this->set_attribute( '_root', 'data-x-page-tour', wp_json_encode( $tour_config ) );

		// Render element.
		$output = '';

		$output .= "<div {$this->render_attributes('_root')}>";

		$output .= \Bricks\Frontend::render_children( $this );

		$output .= '</div>';

		echo $output;
	}


	/**
	 * Render builder template.
	 */
	public static function render_builder() {
		?>

	<script type="text/x-template" id="tmpl-bricks-element-xpagetour">

		<component 
		v-show="!settings.builderHidden"
		:data-show-progress="settings.showProgress ? 'true' : 'false'"
		:data-progress-position="settings.progressPosition"
		:data-nav-buttons="!settings.navButtons || 'enable' === settings.navButtons ? 'true' : 'false'"
		:data-preview-nav-buttons="settings.previewNavButtons ? 'true' : 'false'"
		:data-disable-close-button="settings.disableCloseButton ? 'true' : 'false'"
		
		>
				<bricks-element-children 
					:element="element" 
				/>

				<svg 
					v-if="settings.useModalOverlay"
					class="shepherd-modal-is-visible shepherd-modal-overlay-container"
					viewBox="0 0 100 100" preserveAspectRatio="none"
				><rect x="0" y="0" width="100" height="100"></rect>
				  
				</svg>

		</component>

	</script>

		<?php
	}
}
