<?php
namespace EcafeAddons\Widgets;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;

use EcafeAddons\EcafeElementLoad;

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

class Ecafe_Page_Scroll_To_Id extends Widget_Base {

	public function get_name() {
		return 'ecafe-page-scroll-to-id';
	}

	public function get_title() {
		return esc_html__( 'Page Scroll to Id', 'essential-classy-addons-for-elementor' );
	}

	public function get_icon() {
		return 'ecafe-ele-back-icon ecafe-page-scroll-to-id-icon';
	}

	public function get_categories() {
		return array( 'essential' );
	}

	public function get_keywords() {
		return array( 'scroll navigation', 'page scroll', 'scroll to id' );
	}

	public function get_script_depends() {
		return array( 'ecafe-page-scroll-to-id' );
	}
	public function get_custom_help_url() {
		return 'https://store.kapasias.com/helpdesk/';
	}
	public function has_widget_inner_wrapper(): bool {
		return ! \Elementor\Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
	}
	protected function register_controls() {

		$this->start_controls_section(
			'content_section',
			array(
				'label' => esc_html__( 'Page Scroll to Id', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);
		$this->add_control(
			'psiPosition',
			array(
				'label'   => esc_html__( 'Position', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'rightcenter',
				'options' => array(
					'lefttop'     => esc_html__( 'Left Top', 'essential-classy-addons-for-elementor' ),
					'leftcenter'  => esc_html__( 'Left Center', 'essential-classy-addons-for-elementor' ),
					'leftbottom'  => esc_html__( 'Left Bottom', 'essential-classy-addons-for-elementor' ),
					'righttop'    => esc_html__( 'Right Top', 'essential-classy-addons-for-elementor' ),
					'rightcenter' => esc_html__( 'Right Center', 'essential-classy-addons-for-elementor' ),
					'rightbottom' => esc_html__( 'Right Bottom', 'essential-classy-addons-for-elementor' ),
					'topcenter'   => esc_html__( 'Top Center', 'essential-classy-addons-for-elementor' ),
				),
			)
		);

		$repeater = new \Elementor\Repeater();
		$repeater->add_control(
			'psiId',
			array(
				'label'       => esc_html__( 'ID', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'default'     => esc_html__( 'section-id', 'essential-classy-addons-for-elementor' ),
				'dynamic'     => array( 'active' => true ),
				'label_block' => true,
				'separator'   => 'after',
			)
		);
		$repeater->add_control(
			'psiType',
			array(
				'label'   => esc_html__( 'Type', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'psitext',
				'options' => array(
					'psitext' => esc_html__( 'Text', 'essential-classy-addons-for-elementor' ),
					'psiicon' => esc_html__( 'Icon', 'essential-classy-addons-for-elementor' ),
				),
			)
		);
		$repeater->add_control(
			'psiTextIn',
			array(
				'label'       => esc_html__( 'Text', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'default'     => esc_html__( 'A', 'essential-classy-addons-for-elementor' ),
				'dynamic'     => array( 'active' => true ),
				'label_block' => true,
				'condition'   => array(
					'psiType' => 'psitext',
				),
			)
		);
		$repeater->add_control(
			'psiIcon',
			array(
				'label'     => esc_html__( 'Icon', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::ICONS,
				'default'   => array(
					'value'   => 'fas fa-plus',
					'library' => 'solid',
				),
				'condition' => array(
					'psiType' => 'psiicon',
				),
			)
		);

		$repeater->start_controls_tabs( 'tabspsiStyle' );
		$repeater->start_controls_tab(
			'tabpsin',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$repeater->add_control(
			'psiTextIncolor',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} {{CURRENT_ITEM}}' => 'color: {{VALUE}};',
				),
				'condition' => array(
					'psiType' => 'psitext',
				),
			)
		);
		$repeater->add_control(
			'psiIconcolor',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} {{CURRENT_ITEM}} > i' => 'color: {{VALUE}};',
					'{{WRAPPER}} {{CURRENT_ITEM}} svg' => 'fill: {{VALUE}};',
				),
				'condition' => array(
					'psiType' => 'psiicon',
				),
			)
		);
		$repeater->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'psiBgN',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} {{CURRENT_ITEM}}',
			)
		);
		$repeater->end_controls_tab();
		$repeater->start_controls_tab(
			'tabpsinh',
			array(
				'label' => esc_html__( 'Hover/highlight', 'essential-classy-addons-for-elementor' ),
			)
		);
		$repeater->add_control(
			'psiTextIncolorh',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} {{CURRENT_ITEM}}:hover,{{WRAPPER}} {{CURRENT_ITEM}}.highlighted-menu-item' => 'color: {{VALUE}};',
				),
				'condition' => array(
					'psiType' => 'psitext',
				),
			)
		);
		$repeater->add_control(
			'psiIconcolorh',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} {{CURRENT_ITEM}}:hover > i,{{WRAPPER}} {{CURRENT_ITEM}}.highlighted-menu-item > i' => 'color: {{VALUE}};',
					'{{WRAPPER}} {{CURRENT_ITEM}}:hover svg,{{WRAPPER}} {{CURRENT_ITEM}}.highlighted-menu-item svg' => 'fill: {{VALUE}};',
				),
				'condition' => array(
					'psiType' => 'psiicon',
				),
			)
		);
		$repeater->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'psiBgh',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} {{CURRENT_ITEM}}:hover,{{WRAPPER}} {{CURRENT_ITEM}}.highlighted-menu-item',
			)
		);
		$repeater->end_controls_tab();
		$repeater->end_controls_tabs();

		$repeater->add_control(
			'psiTooltipHead',
			array(
				'label'     => esc_html__( 'Tooltip', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
			)
		);
		$repeater->add_control(
			'psiTooltipText',
			array(
				'label'       => esc_html__( 'Text', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'default'     => esc_html__( 'A', 'essential-classy-addons-for-elementor' ),
				'dynamic'     => array( 'active' => true ),
				'label_block' => true,
			)
		);
		$repeater->add_control(
			'psiTooltipIcon',
			array(
				'label'   => esc_html__( 'Icon', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::ICONS,
				'default' => array(
					'value'   => 'fas fa-plus',
					'library' => 'solid',
				),
			)
		);
		$repeater->add_control(
			'psiTooltipColor',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} {{CURRENT_ITEM}} .ecafe-psi-tooltip' => 'color: {{VALUE}};',
					'{{WRAPPER}} {{CURRENT_ITEM}} .ecafe-psi-tooltip svg' => 'fill: {{VALUE}};',
				),
			)
		);
		$repeater->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'psiTooltipBg',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} {{CURRENT_ITEM}} .ecafe-psi-tooltip',
			)
		);
		$this->add_control(
			'psiContent',
			array(
				'type'        => Controls_Manager::REPEATER,
				'fields'      => $repeater->get_controls(),
				'default'     => array(
					array(
						'psiTextIn'      => 'A',
						'psiTooltipText' => 'Hello',
					),
					array(
						'psiTextIn'      => 'B',
						'psiTooltipText' => 'How',
					),
					array(
						'psiTextIn'      => 'C',
						'psiTooltipText' => 'Are',
					),
					array(
						'psiTextIn'      => 'D',
						'psiTooltipText' => 'You',
					),
				),
				'title_field' => '{{{ psiTextIn }}}',
			)
		);

		$this->add_control(
			'psioffset',
			array(
				'label'     => esc_html__( 'Offset', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
			)
		);
		$this->add_responsive_control(
			'psioffsetleft',
			array(
				'label'      => esc_html__( 'Left', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( '%' ),
				'range'      => array(
					'%' => array(
						'min'  => 0,
						'max'  => 100,
						'step' => 1,
					),
				),
				'default'    => array(
					'unit' => '%',
					'size' => 2,
				),
				'selectors'  => array(
					'{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper' => 'left:{{SIZE}}{{UNIT}};',
				),
				'condition'  => array(
					'psiPosition' => array( 'lefttop', 'leftcenter', 'leftbottom' ),
				),
			)
		);
		$this->add_responsive_control(
			'psioffsetright',
			array(
				'label'      => esc_html__( 'Right', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( '%' ),
				'range'      => array(
					'%' => array(
						'min'  => 0,
						'max'  => 100,
						'step' => 1,
					),
				),
				'default'    => array(
					'unit' => '%',
					'size' => 2,
				),
				'selectors'  => array(
					'{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper' => 'right:{{SIZE}}{{UNIT}};',
				),
				'condition'  => array(
					'psiPosition' => array( 'righttop', 'rightcenter', 'rightbottom' ),
				),
			)
		);
		$this->add_responsive_control(
			'psioffsettop',
			array(
				'label'      => esc_html__( 'Top', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( '%' ),
				'range'      => array(
					'%' => array(
						'min'  => -100,
						'max'  => 100,
						'step' => 1,
					),
				),
				'default'    => array(
					'unit' => '%',
					'size' => 2,
				),
				'selectors'  => array(
					'{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper' => 'top:{{SIZE}}{{UNIT}};',
				),
				'condition'  => array(
					'psiPosition' => array( 'topcenter' ),
				),
			)
		);
		$this->add_responsive_control(
			'psioffsettopLR',
			array(
				'label'      => esc_html__( 'Top', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( '%' ),
				'range'      => array(
					'%' => array(
						'min'  => -100,
						'max'  => 100,
						'step' => 1,
					),
				),
				'default'    => array(
					'unit' => '%',
					'size' => 5,
				),
				'selectors'  => array(
					'{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper' => 'top:{{SIZE}}{{UNIT}};',
				),
				'condition'  => array(
					'psiPosition' => array( 'lefttop', 'righttop' ),
				),
			)
		);
		$this->add_responsive_control(
			'psioffsetbottomLR',
			array(
				'label'      => esc_html__( 'Bottom', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( '%' ),
				'range'      => array(
					'%' => array(
						'min'  => -100,
						'max'  => 100,
						'step' => 1,
					),
				),
				'default'    => array(
					'unit' => '%',
					'size' => 5,
				),
				'selectors'  => array(
					'{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper' => 'bottom:{{SIZE}}{{UNIT}};',
				),
				'condition'  => array(
					'psiPosition' => array( 'leftbottom', 'rightbottom' ),
				),
			)
		);
		$this->add_control(
			'psiShowAfterScrollOffset',
			array(
				'label'      => esc_html__( 'Show After Scroll Offset', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 2000,
					),
				),
				'separator'  => 'before',
			)
		);
		$this->add_control(
			'psiSectionOffset',
			array(
				'label'      => esc_html__( 'Section Offset', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 500,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 0,
				),
			)
		);
		$this->add_control(
			'psiScrollSpeed',
			array(
				'label'      => esc_html__( 'Scroll Speed (milliseconds)', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 99999,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 500,
				),
			)
		);
		$this->add_control(
			'psiHide',
			array(
				'label'      => esc_html__( 'Hide Page Scroll Screen', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 1000,
					),
				),
				'separator'  => 'before',
			)
		);
		$this->add_control(
			'psiDisbleTooltip',
			array(
				'label'     => esc_html__( 'Disable Tooltip for Mobile', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::SWITCHER,
				'default'   => 'no',
				'label_on'  => esc_html__( 'Enable', 'essential-classy-addons-for-elementor' ),
				'label_off' => esc_html__( 'Disable', 'essential-classy-addons-for-elementor' ),
				'separator' => 'before',
			)
		);
		$this->add_control(
			'psiHastag',
			array(
				'label'     => esc_html__( 'Hashtag in URL', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::SWITCHER,
				'default'   => 'no',
				'label_on'  => esc_html__( 'Enable', 'essential-classy-addons-for-elementor' ),
				'label_off' => esc_html__( 'Disable', 'essential-classy-addons-for-elementor' ),
				'separator' => 'before',
			)
		);
		$this->end_controls_section();

		/*Notice panel*/
		$ecwidgetdemolink = esc_url( 'https://ecaddons.com/elements/page-scroll-to-id/' );
		$ecwidgetdoclink  = esc_url( 'https://ecaddons.com/docs/page-scroll-to-id-widget-tutorial/' );
		include ECAFE_PATH . 'element/widgets/ecafe-widgetpanel-help.php';

		$this->start_controls_section(
			'psiitemstyling',
			array(
				'label' => esc_html__( 'Item', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'psiitemPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper-inner .ecafe-psi-anchor' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'psiitemMargin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper-inner .ecafe-psi-anchor' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'psiitemWidth',
			array(
				'label'      => esc_html__( 'width', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', '%' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 150,
					),
					'%'  => array(
						'min'  => 1,
						'max'  => 100,
						'step' => 1,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper-inner .ecafe-psi-anchor' => 'width:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'psiitemHeight',
			array(
				'label'      => esc_html__( 'Height', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', '%' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 150,
					),
					'%'  => array(
						'min'  => 1,
						'max'  => 100,
						'step' => 1,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper-inner .ecafe-psi-anchor' => 'height:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'psiitemTypo',
				'selector' => '{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper-inner .ecafe-psi-anchor',
			)
		);
		$this->add_responsive_control(
			'psiitemiconSize',
			array(
				'label'      => esc_html__( 'icon Size', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', '%' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 100,
					),
					'%'  => array(
						'min'  => 1,
						'max'  => 100,
						'step' => 1,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper-inner .ecafe-psi-anchor > i:before' => 'font-size:{{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper-inner .ecafe-psi-anchor > svg' => 'width:{{SIZE}}{{UNIT}};height:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->start_controls_tabs( 'tabspsiitemstyle' );
		$this->start_controls_tab(
			'tabpsiitemN',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'psiitemColorN',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}}  .ecafe-page-scroll-to-id-wrapper-inner .ecafe-psi-anchor,{{WRAPPER}}  .ecafe-page-scroll-to-id-wrapper-inner .ecafe-psi-anchor > i:before' => 'color: {{VALUE}};',
					'{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper-inner .ecafe-psi-anchor > svg' => 'fill: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'psiitemBgN',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper-inner .ecafe-psi-anchor',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'psiitemBorderN',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper-inner .ecafe-psi-anchor',
			)
		);
		$this->add_responsive_control(
			'psiitemBrN',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper-inner .ecafe-psi-anchor' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'psiitemShadowN',
				'selector' => '{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper-inner .ecafe-psi-anchor',
			)
		);
		$this->add_control(
			'psiitemTransitionN',
			array(
				'label'       => esc_html__( 'Transition css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => esc_html__( 'all .3s linear', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper-inner .ecafe-psi-anchor' => 'transition:{{VALUE}};',
				),
			)
		);
		$this->add_control(
			'psiitemTransformN',
			array(
				'label'       => esc_html__( 'Transform css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => esc_html__( 'skew(-20deg)', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper-inner .ecafe-psi-anchor' => 'transform: {{VALUE}};-ms-transform: {{VALUE}};-moz-transform: {{VALUE}};-webkit-transform: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabpsiitemH',
			array(
				'label' => esc_html__( 'Hover/highlight', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'psiitemColorH',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}}  .ecafe-page-scroll-to-id-wrapper-inner .ecafe-psi-anchor:hover,{{WRAPPER}}  .ecafe-page-scroll-to-id-wrapper-inner .ecafe-psi-anchor:hover > i:before,{{WRAPPER}}  .ecafe-page-scroll-to-id-wrapper-inner .ecafe-psi-anchor.highlighted-menu-item,{{WRAPPER}}  .ecafe-page-scroll-to-id-wrapper-inner .ecafe-psi-anchor.highlighted-menu-item > i:before' => 'color: {{VALUE}};',
					'{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper-inner .ecafe-psi-anchor:hover > svg,{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper-inner .ecafe-psi-anchor.highlighted-menu-item > svg' => 'fill: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'psiitemBgH',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper-inner .ecafe-psi-anchor:hover,{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper-inner .ecafe-psi-anchor.highlighted-menu-item',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'psiitemBorderH',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper-inner .ecafe-psi-anchor:hover,{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper-inner .ecafe-psi-anchor.highlighted-menu-item',
			)
		);
		$this->add_responsive_control(
			'psiitemBrH',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper-inner .ecafe-psi-anchor:hover,{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper-inner .ecafe-psi-anchor.highlighted-menu-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'psiitemShadowH',
				'selector' => '{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper-inner .ecafe-psi-anchor:hover,{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper-inner .ecafe-psi-anchor.highlighted-menu-item',
			)
		);
		$this->add_control(
			'psiitemTransitionH',
			array(
				'label'       => esc_html__( 'Transition css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => esc_html__( 'all .3s linear', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper-inner .ecafe-psi-anchor:hover,{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper-inner .ecafe-psi-anchor.highlighted-menu-item' => 'transition:{{VALUE}};',
				),
			)
		);
		$this->add_control(
			'psiitemTransformH',
			array(
				'label'       => esc_html__( 'Transform css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => esc_html__( 'skew(-20deg)', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper-inner .ecafe-psi-anchor:hover,{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper-inner .ecafe-psi-anchor.highlighted-menu-item' => 'transform: {{VALUE}};-ms-transform: {{VALUE}};-moz-transform: {{VALUE}};-webkit-transform: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();

		$this->start_controls_section(
			'psitooltipstyling',
			array(
				'label' => esc_html__( 'Tooltip', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'psitooltipAlignC',
			array(
				'label'     => esc_html__( 'Alignment', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => array(
					'flex-start' => array(
						'title' => esc_html__( 'Left', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-left',
					),
					'center'     => array(
						'title' => esc_html__( 'Center', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-center',
					),
					'flex-end'   => array(
						'title' => esc_html__( 'Right', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-right',
					),
				),
				'selectors' => array(
					'{{WRAPPER}} .ecafe-psi-tooltip' => 'align-items:{{VALUE}};',
				),
				'condition' => array(
					'psitooltipType' => 'column',
				),
			)
		);
		$this->add_responsive_control(
			'psitooltipAlign',
			array(
				'label'     => esc_html__( 'Alignment', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => array(
					'flex-start'    => array(
						'title' => esc_html__( 'Left', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-left',
					),
					'center'        => array(
						'title' => esc_html__( 'Center', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-center',
					),
					'flex-end'      => array(
						'title' => esc_html__( 'Right', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-right',
					),
					'space-between' => array(
						'title' => esc_html__( 'Space Between', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-h-align-stretch',
					),
				),
				'selectors' => array(
					'{{WRAPPER}} .ecafe-psi-tooltip' => 'justify-content:{{VALUE}};',
				),
				'condition' => array(
					'psitooltipType!' => 'column',
				),
			)
		);
		$this->add_control(
			'psitooltipType',
			array(
				'label'     => esc_html__( 'Display', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => '',
				'options'   => array(
					''       => esc_html__( 'Row', 'essential-classy-addons-for-elementor' ),
					'column' => esc_html__( 'Column', 'essential-classy-addons-for-elementor' ),
				),
				'selectors' => array(
					'{{WRAPPER}} .ecafe-psi-tooltip' => 'flex-direction:{{VALUE}};',
				),
			)
		);
		$this->add_responsive_control(
			'psitooltipWidth',
			array(
				'label'      => esc_html__( 'width', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', '%' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 500,
					),
					'%'  => array(
						'min'  => 1,
						'max'  => 100,
						'step' => 1,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .ecafe-psi-tooltip' => 'width:{{SIZE}}{{UNIT}};max-width:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'psitooltipminheight',
			array(
				'label'      => esc_html__( 'Min. Height', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', '%' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 500,
					),
					'%'  => array(
						'min'  => 1,
						'max'  => 100,
						'step' => 1,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .ecafe-psi-tooltip' => 'min-height:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'psitooltipPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .ecafe-psi-tooltip' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'psitooltipTypography',
				'selector' => '{{WRAPPER}} .ecafe-psi-tooltip',
			)
		);
		$this->add_responsive_control(
			'psitooltipiconSize',
			array(
				'label'      => esc_html__( 'icon Size', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', '%' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 100,
					),
					'%'  => array(
						'min'  => 1,
						'max'  => 100,
						'step' => 1,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .ecafe-psi-tooltip > i:before' => 'font-size:{{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .ecafe-psi-tooltip > svg' => 'width:{{SIZE}}{{UNIT}};height:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_control(
			'psitooltipColorN',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ecafe-psi-tooltip,{{WRAPPER}} .ecafe-psi-tooltip i' => 'color: {{VALUE}};',
					'{{WRAPPER}} .ecafe-psi-tooltip svg' => 'fill: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'psitooltipbgN',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ecafe-psi-tooltip',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'psitooltipBorder',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ecafe-psi-tooltip',
			)
		);
		$this->add_responsive_control(
			'psitooltipBr',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ecafe-psi-tooltip' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'psitooltipShadow',
				'selector' => '{{WRAPPER}} .ecafe-psi-tooltip',
			)
		);
		$this->add_control(
			'psittArrowHead',
			array(
				'label'     => esc_html__( 'Arrow', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
			)
		);
		$this->add_control(
			'psittArrow',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ecafe-psi-tooltip::after' => 'border-color: transparent {{VALUE}} transparent transparent;',
				),
				'condition' => array(
					'psiPosition!' => array( 'righttop', 'rightcenter', 'rightbottom' ),
				),
			)
		);
		$this->add_control(
			'psittArrowRight',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ecafe-psi-tooltip::after' => 'border-color: transparent transparent transparent {{VALUE}};',
				),
				'condition' => array(
					'psiPosition' => array( 'righttop', 'rightcenter', 'rightbottom' ),
				),
			)
		);
		$this->end_controls_section();

		$this->start_controls_section(
			'psiboxstyling',
			array(
				'label' => esc_html__( 'Box', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'psiboxPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper-inner' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->start_controls_tabs( 'tabspsiboxsstyle' );
		$this->start_controls_tab(
			'tabpsiboxN',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'psiboxBgN',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper-inner',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'psiboxBorderN',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper-inner',
			)
		);
		$this->add_responsive_control(
			'psiboxBrN',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper-inner' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'psiboxShadowN',
				'selector' => '{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper-inner',
			)
		);
		$this->add_control(
			'psiboxTransformN',
			array(
				'label'       => esc_html__( 'Transform css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => esc_html__( 'skew(-20deg)', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper-inner' => 'transform: {{VALUE}};-ms-transform: {{VALUE}};-moz-transform: {{VALUE}};-webkit-transform: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabpsiboxH',
			array(
				'label' => esc_html__( 'Hover', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'psiboxBgH',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper-inner:hover',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'psiboxBorderH',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper-inner:hover',
			)
		);
		$this->add_responsive_control(
			'psiboxBrH',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper-inner:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'psiboxShadowH',
				'selector' => '{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper-inner:hover',
			)
		);
		$this->add_control(
			'psiboxTransformH',
			array(
				'label'       => esc_html__( 'Transform css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => esc_html__( 'skew(-20deg)', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ecafe-page-scroll-to-id-wrapper-inner:hover' => 'transform: {{VALUE}};-ms-transform: {{VALUE}};-moz-transform: {{VALUE}};-webkit-transform: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();
	}

	protected function render() {

		$settings                 = $this->get_settings_for_display();
		$uid                      = uniqid( 'psi' );
		$psiPosition              = ! empty( $settings['psiPosition'] ) ? $settings['psiPosition'] : 'rightcenter';
		$psiShowAfterScrollOffset = ! empty( $settings['psiShowAfterScrollOffset']['size'] ) ? $settings['psiShowAfterScrollOffset']['size'] : 0;
		$psiSectionOffset         = ! empty( $settings['psiSectionOffset']['size'] ) ? $settings['psiSectionOffset']['size'] : 0;
		$psiScrollSpeed           = ! empty( $settings['psiScrollSpeed']['size'] ) ? $settings['psiScrollSpeed']['size'] : 1300;
		$psiHide                  = ! empty( $settings['psiHide']['size'] ) ? $settings['psiHide']['size'] : '';
		$psiDisbleTooltip         = ( isset( $settings['psiDisbleTooltip'] ) && $settings['psiDisbleTooltip'] == 'yes' ) ? ' psimobttdis' : '';
		$psiHastag                = ( isset( $settings['psiHastag'] ) && $settings['psiHastag'] == 'yes' ) ? 'true' : 'false';

		$dataAttr  = array(
			'uid'             => esc_attr( $uid ),
			'showafterscroll' => esc_attr( $psiShowAfterScrollOffset ),
			'sectionoffset'   => esc_attr( $psiSectionOffset ),
			'pagescrollspeed' => esc_attr( $psiScrollSpeed ),
			'hashtag'         => esc_attr( $psiHastag ),
		);
		$data_attr = json_encode( $dataAttr );

		$psiShowAfterScrollClass = '';
		if ( ! empty( $psiShowAfterScrollOffset ) ) {
			$psiShowAfterScrollClass = 'psiafterscroll';
		}
		$output = '<div class="ecafe-page-scroll-to-id-wrapper psi-pos-' . esc_attr( $psiPosition ) . ' ' . esc_attr( $uid ) . ' ' . esc_attr( $psiShowAfterScrollClass ) . ' ' . esc_attr( $psiDisbleTooltip ) . '" data-settings=\'' . $data_attr . '\'>';

		if ( ! empty( $psiHide ) ) {
			$inlinecss = '@media (max-width:' . esc_attr( $psiHide ) . 'px){
				.ecafe-page-scroll-to-id-wrapper.' . esc_attr( $uid ) . '{display:none;}}';
			$output   .= '<style>' . esc_attr( $inlinecss ) . '</style>';
		}
		if ( ! empty( $settings['psiContent'] ) ) {
			$index      = 1;
			$psiContent = '';
			$output    .= '<div class="ecafe-page-scroll-to-id-wrapper-inner">';
			foreach ( $settings['psiContent'] as $index => $item ) {
					$output     .= '<a class="ecafe-psi-anchor elementor-repeater-item-' . esc_attr( $item['_id'] ) . '" href="#' . esc_attr( $item['psiId'] ) . '">';
						$psiType = ! empty( $item['psiType'] ) ? $item['psiType'] : 'psitext';
				if ( $psiType == 'psitext' && ! empty( $item['psiTextIn'] ) ) {
					$psiContent = wp_kses_post( $item['psiTextIn'] );
				} elseif ( $psiType == 'psiicon' && ! empty( $item['psiIcon'] ) ) {
					ob_start();
					\Elementor\Icons_Manager::render_icon( $item['psiIcon'], array( 'aria-hidden' => 'true' ) );
					$psiContent = ob_get_contents();
					ob_end_clean();

				}
						$output .= $psiContent;

				if ( ! empty( $item['psiTooltipText'] ) && ! empty( $item['psiTooltipIcon'] ) ) {
					$output .= '<div class="ecafe-psi-tooltip">';
					if ( ! empty( $item['psiTooltipIcon'] ) ) {
							ob_start();
							\Elementor\Icons_Manager::render_icon( $item['psiTooltipIcon'], array( 'aria-hidden' => 'true' ) );
							$output .= ob_get_contents();
							ob_end_clean();
					}

					if ( ! empty( $item['psiTooltipText'] ) ) {
									$output .= wp_kses_post( $item['psiTooltipText'] );
					}

								$output .= '</div>';
				}
					$output .= '</a>';
					++$index;
			}
		}
			$output .= '</div>';
			$output .= '</div>';
			echo wp_kses_normalize_entities( $output );
	}
}
