<?php
namespace ElementPack\Modules\Scrollnav\Widgets;

use Elementor\Repeater;
use ElementPack\Base\Module_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Background;
use Elementor\Icons_Manager;

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

class Scrollnav extends Module_Base {
	public function get_name() {
		return 'bdt-scrollnav';
	}

	public function get_title() {
		return BDTEP . __( 'Scroll Navigation', 'bdthemes-element-pack' );
	}

	public function get_icon() {
		return 'bdt-wi-scrollnav';
	}

	public function get_categories() {
		return [ 'element-pack' ];
	}

	public function get_keywords() {
		return [ 'scrollnav', 'menu' ];
	}

	public function get_style_depends() {
		if ( $this->ep_is_edit_mode() ) {
			return [ 'ep-styles' ];
		} else {
			return [ 'ep-scrollnav', 'tippy' ];
		}
	}

	public function get_script_depends() {
		if ( $this->ep_is_edit_mode() ) {
			return [ 'popper', 'tippyjs', 'ep-scripts' ];
		} else {
			return [ 'popper', 'tippyjs', 'ep-scrollnav' ];
		}
	}

	public function get_custom_help_url() {
		return 'https://youtu.be/X2B23zD7gRg';
	}

	public function has_widget_inner_wrapper(): bool {
        return ! \Elementor\Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
    }
	protected function is_dynamic_content(): bool {
		return false;
	}

	protected function get_upsale_data(): array {
		return [
			'condition' => ! is_ep_pro(),
			'image' => esc_url( BDTEP_ASSETS_URL . 'images/go-pro.svg' ),
			'image_alt' => esc_attr__( 'Upgrade', 'bdthemes-element-pack' ),
			'title' => esc_html__( 'Unlock Premium Features', 'bdthemes-element-pack' ),
			'description' => sprintf(__( '<ul class="bdt-widget-promotion-list"><li>%1$s</li><li>%2$s</li><li>%3$s</li></ul> These features are available only in Element Pack Pro.', 'bdthemes-element-pack' ), 'Nav View -> Dots', 'Vertical Nav -> Show', 'Fixed Nav -> Show'),
			'upgrade_url' => esc_url( 'https://www.elementpack.pro/pricing/?utm_source=widget_panel&utm_medium=ep_widget_panel' ),
			'upgrade_text' => sprintf( __( '<span class="bdt-widget-promotion-btn">%s</span>', 'bdthemes-element-pack' ), esc_html__( 'Upgrade to Pro', 'bdthemes-element-pack' ) ),
		];
	}

	protected function register_controls() {

		$this->start_controls_section(
			'section_content_scrollnav',
			[ 
				'label' => __( 'Scrollnav', 'bdthemes-element-pack' ),
			]
		);

		$repeater = new Repeater();

		$repeater->add_control(
			'nav_title',
			[ 
				'label'   => __( 'Nav Title', 'bdthemes-element-pack' ),
				'type'    => Controls_Manager::TEXT,
				'dynamic' => [ 'active' => true ],
				'default' => __( 'Nav Title', 'bdthemes-element-pack' ),
			]
		);

		$repeater->add_control(
			'nav_link',
			[ 
				'label'       => __( 'Link', 'bdthemes-element-pack' ),
				'type'        => Controls_Manager::URL,
				'dynamic'     => [ 'active' => true ],
				'default'     => [ 'url' => '#' ],
				'description' => 'Add your section id WITH the # key. e.g: #my-id also you can add internal/external URL',
			]
		);

		$repeater->add_control(
			'scroll_nav_icon',
			[ 
				'label'            => __( 'Icon', 'bdthemes-element-pack' ),
				'type'             => Controls_Manager::ICONS,
				'fa4compatibility' => 'nav_icon',
				'skin'             => 'inline',
			]
		);

		$this->add_control(
			'navs',
			[ 
				'label'       => __( 'Nav Items', 'bdthemes-element-pack' ),
				'type'        => Controls_Manager::REPEATER,
				'fields'      => $repeater->get_controls(),
				'default'     => [ 
					[ 
						'nav_title' => __( 'Nav #1', 'bdthemes-element-pack' ),
						'nav_link'  => [ 
							'url' => '#section-1',
						]
					],
					[ 
						'nav_title' => __( 'Nav #2', 'bdthemes-element-pack' ),
						'nav_link'  => [ 
							'url' => '#section-2',
						]
					],
					[ 
						'nav_title' => __( 'Nav #3', 'bdthemes-element-pack' ),
						'nav_link'  => [ 
							'url' => '#section-3',
						]
					],
					[ 
						'nav_title' => __( 'Nav #4', 'bdthemes-element-pack' ),
						'nav_link'  => [ 
							'url' => '#section-4',
						]
					],
					[ 
						'nav_title' => __( 'Nav #5', 'bdthemes-element-pack' ),
						'nav_link'  => [ 
							'url' => '#section-5',
						]
					],
				],
				'title_field' => '{{{ nav_title }}}',
			]
		);

		$this->add_control(
			'nav_style',
			[ 
				'label'     => __( 'Nav View', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SELECT,
				'separator' => 'before',
				'default'   => 'default',
				'options'   => [ 
					'default' => __( 'Text', 'bdthemes-element-pack' ),
					'dot'     => __( 'Dots', 'bdthemes-element-pack' ) . BDTEP_LOCK,
				],
				'classes' => BDTEP_LOCK_CLASS,
			]
		);

		$this->add_control(
			'vertical_nav',
			[ 
				'label' => __( 'Vertical Nav', 'bdthemes-element-pack' ) . BDTEP_PC,
				'type'  => Controls_Manager::SWITCHER,
				'classes' => BDTEP_IS_PC,
			]
		);

		$this->add_control(
			'fixed_nav',
			[ 
				'label'        => __( 'Fixed Nav', 'bdthemes-element-pack' ) . BDTEP_PC,
				'type'         => Controls_Manager::SWITCHER,
				'prefix_class' => 'bdt-scrollnav-fixed-',
				'render_type'  => 'template',
				'classes' => BDTEP_IS_PC,
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_content_additional',
			[ 
				'label' => __( 'Additional Options', 'bdthemes-element-pack' ),
			]
		);

		$this->add_responsive_control(
			'alignment',
			[ 
				'label'       => __( 'Alignment', 'bdthemes-element-pack' ),
				'type'        => Controls_Manager::CHOOSE,
				'label_block' => false,
				'options'     => [ 
					'left'   => [ 
						'title' => __( 'Left', 'bdthemes-element-pack' ),
						'icon'  => 'eicon-text-align-left',
					],
					'center' => [ 
						'title' => __( 'Center', 'bdthemes-element-pack' ),
						'icon'  => 'eicon-text-align-center',
					],
					'right'  => [ 
						'title' => __( 'Right', 'bdthemes-element-pack' ),
						'icon'  => 'eicon-text-align-right',
					],
				],
				'default'     => 'left',
				'condition'   => [ 
					'fixed_nav!' => 'yes',
				],
				'selectors'   => [ 
					'{{WRAPPER}} .bdt-scrollnav' => 'justify-content: {{VALUE}};',
					'{{WRAPPER}} .bdt-navbar-nav' => 'justify-content: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'nav_position',
			[ 
				'label'     => __( 'Nav Position', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'center-left',
				'options'   => element_pack_position(),
				'condition' => [ 
					'fixed_nav' => 'yes',
				],
			]
		);

		$this->add_responsive_control(
			'nav_offset',
			[ 
				'label'     => __( 'Nav Offset', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [ 
					'px' => [ 
						'min'  => 0,
						'max'  => 250,
						'step' => 5,
					],
				],
				'condition' => [ 
					'fixed_nav' => 'yes',
				],
				'selectors' => [ 
					'{{WRAPPER}} .bdt-scrollnav div[class*="bdt-navbar"]' => 'margin: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'nav_spacing',
			[ 
				'label'      => __( 'Nav Spacing', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em', '%' ],
				'selectors'  => [ 
					'{{WRAPPER}} .bdt-scrollnav ul li' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'menu_height',
			[ 
				'label'      => __( 'Menu Height', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::SLIDER,
				'range'      => [ 
					'px' => [ 
						'min' => 20,
						'max' => 150,
					],
				],
				'size_units' => [ 'px' ],
				'selectors'  => [ 
					'{{WRAPPER}} .bdt-navbar-nav > li > a' => 'min-height: {{SIZE}}{{UNIT}};',
				],
				'condition'  => [ 
					'nav_style' => 'default'
				]
			]
		);

		$this->add_control(
			'icon_align',
			[ 
				'label'     => __( 'Icon Position', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SELECT,
				'separator' => 'before',
				'default'   => 'right',
				'options'   => [ 
					'left'  => __( 'Before', 'bdthemes-element-pack' ),
					'right' => __( 'After', 'bdthemes-element-pack' ),
				],
				'condition' => [ 
					'nav_style' => 'default',
				],
			]
		);

		$this->add_responsive_control(
			'icon_indent',
			[ 
				'label'     => __( 'Icon Spacing', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SLIDER,
				'default'   => [ 
					'size' => 8,
				],
				'range'     => [ 
					'px' => [ 
						'max' => 50,
					],
				],
				'selectors' => [ 
					'{{WRAPPER}} .bdt-scrollnav .bdt-navbar-nav > li > a' => 'gap: {{SIZE}}{{UNIT}};',
				],
				'condition' => [ 
					'nav_style' => 'default',
				],
			]
		);

		$this->add_control(
			'content_offset',
			[ 
				'label'       => __( 'Target Offset', 'bdthemes-element-pack' ),
				'description' => __( 'This offset work when you click and go to targeted location', 'bdthemes-element-pack' ),
				'separator'   => 'before',
				'type'        => Controls_Manager::SLIDER,
				'range'       => [ 
					'px' => [ 
						'min'  => -250,
						'max'  => 250,
						'step' => 5
					]
				],
				'default'     => [ 
					'size' => 0
				]
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_content_tooltip',
			[ 
				'label'     => __( 'Tooltip', 'bdthemes-element-pack' ),
				'condition' => [ 
					'nav_style' => 'dot',
				]
			]
		);



		$this->add_control(
			'dotnav_tooltip_animation',
			[ 
				'label'       => __( 'Animation', 'bdthemes-element-pack' ),
				'type'        => Controls_Manager::SELECT,
				'default'     => 'shift-toward',
				'options'     => [ 
					'shift-away'   => __( 'Shift-Away', 'bdthemes-element-pack' ),
					'shift-toward' => __( 'Shift-Toward', 'bdthemes-element-pack' ),
					'fade'         => __( 'Fade', 'bdthemes-element-pack' ),
					'scale'        => __( 'Scale', 'bdthemes-element-pack' ),
					'perspective'  => __( 'Perspective', 'bdthemes-element-pack' ),
				],
				'render_type' => 'template',
			]
		);



		$this->add_control(
			'dotnav_tooltip_placement',
			[ 
				'name'    => 'marker_tooltip_placement',
				'label'   => __( 'Placement', 'bdthemes-element-pack' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'right',
				'options' => [ 
					'top'    => __( 'Top', 'bdthemes-element-pack' ),
					'bottom' => __( 'Bottom', 'bdthemes-element-pack' ),
					'left'   => __( 'Left', 'bdthemes-element-pack' ),
					'right'  => __( 'Right', 'bdthemes-element-pack' ),
				],
			]
		);

		$this->add_control(
			'dotnav_tooltip_x_offset',
			[ 
				'label'   => __( 'Offset', 'bdthemes-element-pack' ),
				'type'    => Controls_Manager::SLIDER,
				'default' => [ 
					'size' => 0,
				],
			]
		);

		$this->add_control(
			'dotnav_tooltip_y_offset',
			[ 
				'label'   => __( 'Distance', 'bdthemes-element-pack' ),
				'type'    => Controls_Manager::SLIDER,
				'default' => [ 
					'size' => 0,
				],
			]
		);

		$this->add_control(
			'dotnav_tooltip_arrow',
			[ 
				'label' => __( 'Arrow', 'bdthemes-element-pack' ),
				'type'  => Controls_Manager::SWITCHER,
			]
		);

		$this->add_control(
			'dotnav_tooltip_trigger',
			[ 
				'label'       => __( 'Trigger on Click', 'bdthemes-element-pack' ),
				'description' => __( 'Don\'t set yes when you set lightbox image with marker.', 'bdthemes-element-pack' ),
				'type'        => Controls_Manager::SWITCHER,
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_style_nav',
			[ 
				'label'     => __( 'Default Nav', 'bdthemes-element-pack' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [ 
					'nav_style' => 'default',
				],
			]
		);

		$this->add_control(
			'navbar_style',
			[ 
				'label'        => __( 'Navbar Style', 'bdthemes-element-pack' ) . BDTEP_UC,
				'type'         => Controls_Manager::SELECT,
				'default'      => '',
				'options'      => [ 
					''  => __( 'Default', 'bdthemes-element-pack' ),
					'1' => __( 'Style 1', 'bdthemes-element-pack' ),
					'2' => __( 'Style 2', 'bdthemes-element-pack' ),
					'3' => __( 'Style 3', 'bdthemes-element-pack' ),
					'4' => __( 'Style 4', 'bdthemes-element-pack' ),
				],
				'prefix_class' => 'bdt-navbar-style-',
			]
		);

		$this->start_controls_tabs( 'tabs_nav_style' );

		$this->start_controls_tab(
			'tab_nav_normal',
			[ 
				'label' => __( 'Normal', 'bdthemes-element-pack' ),
			]
		);

		$this->add_control(
			'nav_color',
			[ 
				'label'     => __( 'Text Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .bdt-scrollnav ul li > a' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'nav_background_color',
			[ 
				'label'     => __( 'Background Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .bdt-scrollnav ul li > a' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[ 
				'name'        => 'nav_border',
				'label'       => __( 'Border', 'bdthemes-element-pack' ),
				'placeholder' => '1px',
				'default'     => '1px',
				'selector'    => '{{WRAPPER}} .bdt-scrollnav ul li > a',
			]
		);

		$this->add_responsive_control(
			'nav_border_radius',
			[ 
				'label'      => __( 'Border Radius', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [ 
					'{{WRAPPER}} .bdt-scrollnav ul li > a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[ 
				'name'     => 'nav_shadow',
				'selector' => '{{WRAPPER}} .bdt-scrollnav ul li > a',
			]
		);

		$this->add_responsive_control(
			'nav_padding',
			[ 
				'label'      => __( 'Padding', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em', '%' ],
				'selectors'  => [ 
					'{{WRAPPER}} .bdt-scrollnav ul li > a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'nav_margin',
			[ 
				'label'      => __( 'Margin', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em', '%' ],
				'selectors'  => [ 
					'{{WRAPPER}} .bdt-scrollnav ul li > a' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[ 
				'name'     => 'nav_typography',
				'label'    => __( 'Typography', 'bdthemes-element-pack' ),
				'selector' => '{{WRAPPER}} .bdt-scrollnav ul li > a',
			]
		);

		$this->add_control(
			'nav_icon_heading',
			[ 
				'label'     => __( 'Icon', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before'
			]
		);

		$this->add_control(
			'nav_icon_color',
			[ 
				'label'     => __( 'Color', 'bdthemes-element-pack' ) . BDTEP_NC,
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .bdt-scrollnav ul li > a span' => 'color: {{VALUE}} !important;',
					'{{WRAPPER}} .bdt-scrollnav ul li > a svg'  => 'fill: {{VALUE}} !important;',
				],
			]
		);

		$this->add_responsive_control(
			'nav_icon_size',
			[ 
				'label'     => esc_html__( 'Size', 'bdthemes-element-pack' ) . BDTEP_NC,
				'type'      => Controls_Manager::SLIDER,
				'selectors' => [ 
					'{{WRAPPER}} .bdt-scrollnav ul li > a span' => 'font-size: {{SIZE}}px;',
				],
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'tab_nav_hover',
			[ 
				'label' => __( 'Hover', 'bdthemes-element-pack' ),
			]
		);

		$this->add_control(
			'navbar_hover_style_color',
			[ 
				'label'     => __( 'Style Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .bdt-navbar-nav > li:hover > a:before' => 'background-color: {{VALUE}};',
					'{{WRAPPER}} .bdt-navbar-nav > li:hover > a:after'  => 'background-color: {{VALUE}};',
				],
				'condition' => [ 
					'navbar_style!' => '',
				],
			]
		);

		$this->add_control(
			'nav_hover_color',
			[ 
				'label'     => __( 'Text Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .bdt-scrollnav ul li > a:hover' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'nav_hover_background_color',
			[ 
				'label'     => __( 'Background Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .bdt-scrollnav ul li > a:hover' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'nav_hover_border_color',
			[ 
				'label'     => __( 'Border Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'condition' => [ 
					'nav_border_border!' => '',
				],
				'selectors' => [ 
					'{{WRAPPER}} .bdt-scrollnav ul li > a:hover' => 'border-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'nav_icon_hover_heading',
			[ 
				'label'     => __( 'Icon', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before'
			]
		);

		$this->add_control(
			'nav_icon_hover_color',
			[ 
				'label'     => __( 'Color', 'bdthemes-element-pack' ) . BDTEP_NC,
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .bdt-scrollnav ul li > a:hover span' => 'color: {{VALUE}} !important;',
					'{{WRAPPER}} .bdt-scrollnav ul li > a:hover svg'  => 'fill: {{VALUE}} !important;',
				],
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'tab_nav_active',
			[ 
				'label' => __( 'Active', 'bdthemes-element-pack' ),
			]
		);

		$this->add_control(
			'navbar_active_style_color',
			[ 
				'label'     => __( 'Style Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .bdt-navbar-nav > li.bdt-active > a:before' => 'background-color: {{VALUE}};',
					'{{WRAPPER}} .bdt-navbar-nav > li.bdt-active > a:after'  => 'background-color: {{VALUE}};',
				],
				'condition' => [ 
					'navbar_style!' => '',
				],
			]
		);

		$this->add_control(
			'nav_active_color',
			[ 
				'label'     => __( 'Text Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .bdt-scrollnav ul li.bdt-active > a' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'nav_active_background_color',
			[ 
				'label'     => __( 'Background Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .bdt-scrollnav ul li.bdt-active > a' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'nav_active_border_color',
			[ 
				'label'     => __( 'Border Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'condition' => [ 
					'nav_border_border!' => '',
				],
				'selectors' => [ 
					'{{WRAPPER}} .bdt-scrollnav ul li.bdt-active > a' => 'border-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'nav_icon_active_heading',
			[ 
				'label'     => __( 'Icon', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before'
			]
		);

		$this->add_control(
			'nav_icon_active_color',
			[ 
				'label'     => __( 'Color', 'bdthemes-element-pack' ) . BDTEP_NC,
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .bdt-scrollnav ul li.bdt-active > a span' => 'color: {{VALUE}} !important;',
					'{{WRAPPER}} .bdt-scrollnav ul li.bdt-active > a svg'  => 'fill: {{VALUE}} !important;',
				],
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->end_controls_section();

		$this->start_controls_section(
			'section_style_dot_nav',
			[ 
				'label'     => __( 'Dot Nav', 'bdthemes-element-pack' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [ 
					'nav_style' => 'dot',
				],
			]
		);

		$this->start_controls_tabs( 'tabs_nav_style_dot' );

		$this->start_controls_tab(
			'tab_dot_nav_normal',
			[ 
				'label' => __( 'Normal', 'bdthemes-element-pack' ),
			]
		);

		$this->add_control(
			'dot_nav_size',
			[ 
				'label'     => __( 'Dots Size', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [ 
					'px' => [ 
						'min' => 5,
						'max' => 20,
					],
				],
				'selectors' => [ 
					'{{WRAPPER}} .bdt-scrollnav .bdt-dotnav>*>*' => 'height: {{SIZE}}{{UNIT}};width: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_control(
			'dot_nav_background_color',
			[ 
				'label'     => __( 'Background Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .bdt-scrollnav .bdt-dotnav > li > a' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[ 
				'name'        => 'dot_nav_border',
				'label'       => __( 'Border', 'bdthemes-element-pack' ),
				'placeholder' => '1px',
				'default'     => '1px',
				'selector'    => '{{WRAPPER}} .bdt-scrollnav .bdt-dotnav > li > a',
			]
		);

		$this->add_responsive_control(
			'dot_nav_border_radius',
			[ 
				'label'      => __( 'Border Radius', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [ 
					'{{WRAPPER}} .bdt-scrollnav .bdt-dotnav > li > a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[ 
				'name'     => 'dot_nav_shadow',
				'selector' => '{{WRAPPER}} .bdt-scrollnav .bdt-dotnav > li > a',
			]
		);

		$this->add_responsive_control(
			'dot_nav_padding',
			[ 
				'label'      => __( 'Padding', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em', '%' ],
				'selectors'  => [ 
					'{{WRAPPER}} .bdt-scrollnav .bdt-dotnav > li > a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'tab_dot_nav_hover',
			[ 
				'label' => __( 'Hover', 'bdthemes-element-pack' ),
			]
		);

		$this->add_control(
			'dot_nav_hover_background_color',
			[ 
				'label'     => __( 'Background Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .bdt-scrollnav .bdt-dotnav > li > a:hover' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'dot_nav_hover_border_color',
			[ 
				'label'     => __( 'Border Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'condition' => [ 
					'dot_nav_border_border!' => '',
				],
				'selectors' => [ 
					'{{WRAPPER}} .bdt-scrollnav .bdt-dotnav > li > a:hover' => 'border-color: {{VALUE}};',
				],
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'tab_dot_nav_active',
			[ 
				'label' => __( 'Active', 'bdthemes-element-pack' ),
			]
		);

		$this->add_control(
			'dot_nav_active_background_color',
			[ 
				'label'     => __( 'Background Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .bdt-scrollnav .bdt-dotnav > li.bdt-active > a' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'dot_nav_active_border_color',
			[ 
				'label'     => __( 'Border Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'condition' => [ 
					'dot_nav_border_border!' => '',
				],
				'selectors' => [ 
					'{{WRAPPER}} .bdt-scrollnav .bdt-dotnav > li.bdt-active > a' => 'border-color: {{VALUE}};',
				],
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->end_controls_section();

		$this->start_controls_section(
			'dotnav_tooltip_styles_tab',
			[ 
				'label'     => __( 'Tooltip', 'bdthemes-element-pack' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [ 
					'nav_style' => 'dot',
				],
			]
		);

		$this->add_responsive_control(
			'dotnav_tooltip_width',
			[ 
				'label'      => __( 'Width', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 
					'px', 'em',
				],
				'range'      => [ 
					'px' => [ 
						'min' => 50,
						'max' => 500,
					],
				],
				'selectors'  => [ 
					'.tippy-box[data-theme="bdt-tippy-{{ID}}"]' => 'width: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[ 
				'name'     => 'dotnav_tooltip_typography',
				'selector' => '.tippy-box[data-theme="bdt-tippy-{{ID}}"]',
			]
		);

		$this->add_control(
			'dotnav_tooltip_color',
			[ 
				'label'     => __( 'Text Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'.tippy-box[data-theme="bdt-tippy-{{ID}}"]' => 'color: {{VALUE}}',
				]
			]
		);

		$this->add_control(
			'dotnav_tooltip_text_align',
			[ 
				'label'     => __( 'Text Alignment', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::CHOOSE,
				'default'   => 'center',
				'options'   => [ 
					'left'   => [ 
						'title' => __( 'Left', 'bdthemes-element-pack' ),
						'icon'  => 'eicon-text-align-left',
					],
					'center' => [ 
						'title' => __( 'Center', 'bdthemes-element-pack' ),
						'icon'  => 'eicon-text-align-center',
					],
					'right'  => [ 
						'title' => __( 'Right', 'bdthemes-element-pack' ),
						'icon'  => 'eicon-text-align-right',
					],
				],
				'selectors' => [ 
					'.tippy-box[data-theme="bdt-tippy-{{ID}}"]' => 'text-align: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[ 
				'name'     => 'dotnav_tooltip_background',
				'selector' => '.tippy-box[data-theme="bdt-tippy-{{ID}}"], .tippy-box[data-theme="bdt-tippy-{{ID}}"] .tippy-backdrop',
			]
		);

		$this->add_control(
			'dotnav_tooltip_arrow_color',
			[ 
				'label'     => __( 'Arrow Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'.tippy-box[data-theme="bdt-tippy-{{ID}}"] .tippy-arrow' => 'border-left-color: {{VALUE}}',
					'.tippy-box[data-theme="bdt-tippy-{{ID}}"] .tippy-arrow' => 'border-right-color: {{VALUE}}',
					'.tippy-box[data-theme="bdt-tippy-{{ID}}"] .tippy-arrow' => 'border-top-color: {{VALUE}}',
					'.tippy-box[data-theme="bdt-tippy-{{ID}}"] .tippy-arrow' => 'border-bottom-color: {{VALUE}}',

					'.tippy-box[data-theme="bdt-tippy-{{ID}}"] .tippy-arrow' => 'color: {{VALUE}}',
				],
				'condition' => [ 
					'dotnav_tooltip_arrow' => 'yes',
				],
			]
		);

		$this->add_responsive_control(
			'dotnav_tooltip_padding',
			[ 
				'label'      => __( 'Padding', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [ 
					'.tippy-box[data-theme="bdt-tippy-{{ID}}"]' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[ 
				'name'        => 'dotnav_tooltip_border',
				'label'       => __( 'Border', 'bdthemes-element-pack' ),
				'placeholder' => '1px',
				'default'     => '1px',
				'selector'    => '.tippy-box[data-theme="bdt-tippy-{{ID}}"]',
			]
		);

		$this->add_responsive_control(
			'dotnav_tooltip_border_radius',
			[ 
				'label'      => __( 'Border Radius', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [ 
					'.tippy-box[data-theme="bdt-tippy-{{ID}}"]' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[ 
				'name'     => 'dotnav_tooltip_shadow',
				'selector' => '.tippy-box[data-theme="bdt-tippy-{{ID}}"]',
			]
		);

		$this->end_controls_section();
	}

	public function render_dotnav_tooltip( $link_key ) {
		$settings = $this->get_settings_for_display();

		// Tooltip settings
		$this->add_render_attribute( $link_key, 'class', 'bdt-tippy-tooltip', true );
		$this->add_render_attribute( $link_key, 'data-tippy', '', true );

		if ( $settings['dotnav_tooltip_placement'] ) {
			$this->add_render_attribute( $link_key, 'data-tippy-placement', $settings['dotnav_tooltip_placement'], true );
		}

		if ( $settings['dotnav_tooltip_animation'] ) {
			$this->add_render_attribute( $link_key, 'data-tippy-animation', $settings['dotnav_tooltip_animation'], true );
		}

		if ( $settings['dotnav_tooltip_x_offset']['size'] or $settings['dotnav_tooltip_y_offset']['size'] ) {
			$this->add_render_attribute( $link_key, 'data-tippy-offset', '[' . $settings['dotnav_tooltip_x_offset']['size'] . ',' . $settings['dotnav_tooltip_y_offset']['size'] . ']', true );
		}

		if ( 'yes' == $settings['dotnav_tooltip_arrow'] ) {
			$this->add_render_attribute( $link_key, 'data-tippy-arrow', 'true', true );
		} else {
			$this->add_render_attribute( $link_key, 'data-tippy-arrow', 'false', true );
		}

		if ( 'yes' == $settings['dotnav_tooltip_trigger'] ) {
			$this->add_render_attribute( $link_key, 'data-tippy-trigger', 'click', true );
		}
	}

	public function render_loop_nav_list() {
		$settings = $this->get_settings_for_display();

		foreach ( $settings['navs'] as $index => $nav ) :
			$link_key = 'link_' . $index;
			$this->add_render_attribute(
				[ 
					$link_key => [ 
						'data-tippy-content' => ( 'dot' == $settings['nav_style'] ) ? htmlspecialchars( esc_html( $nav["nav_title"] ), ENT_QUOTES, 'UTF-8' ) : '',
					]
				], '', '', true
			);

			$this->add_link_attributes( $link_key, $nav['nav_link'] );

			if ( ! isset( $nav['nav_icon'] ) && ! Icons_Manager::is_migration_allowed() ) {
				// add old default
				$nav['nav_icon'] = 'fas fa-home';
			}

			$migrated = isset( $nav['__fa4_migrated']['scroll_nav_icon'] );
			$is_new   = empty( $nav['nav_icon'] ) && Icons_Manager::is_migration_allowed();

			if ( 'dot' == $settings['nav_style'] ) {
				$this->render_dotnav_tooltip( $link_key );
			}

			?>
			<li>
				<a <?php $this->print_render_attribute_string( $link_key ); ?>>
					<?php if ( ! empty( $nav['scroll_nav_icon']['value'] ) && 'left' === $settings['icon_align'] ) : ?>
						<span class="bdt-button-icon-align-left">
							<?php if ( $is_new || $migrated ) :
								Icons_Manager::render_icon( $nav['scroll_nav_icon'], [ 'aria-hidden' => 'true', 'class' => 'fa-fw' ] );
							else : ?>
								<i class="<?php echo esc_attr( $nav['nav_icon'] ); ?>" aria-hidden="true"></i>
							<?php endif; ?>
						</span>
					<?php endif; ?>

					<?php echo esc_html( $nav['nav_title'] ); ?>

					<?php if ( ! empty( $nav['scroll_nav_icon']['value'] ) && 'right' === $settings['icon_align'] ) : ?>
						<span class="bdt-button-icon-align-right">
							<?php if ( $is_new || $migrated ) :
								Icons_Manager::render_icon( $nav['scroll_nav_icon'], [ 'aria-hidden' => 'true', 'class' => 'fa-fw' ] );
							else : ?>
								<i class="<?php echo esc_attr( $nav['nav_icon'] ); ?>" aria-hidden="true"></i>
							<?php endif; ?>
						</span>
					<?php endif; ?>
				</a>
			</li>
		<?php
		endforeach;
	}

	public function render() {
		$settings = $this->get_settings_for_display();

		if ( 'dot' !== $settings['nav_style'] ) :
			$this->add_render_attribute(
				[ 
					'nav-style' => [ 
						'class' => $settings['vertical_nav'] ? 'bdt-nav bdt-nav-default' : 'bdt-navbar-nav',
					]
				]
			);
		else :
			$this->add_render_attribute(
				[ 
					'nav-style' => [ 
						'class' => $settings['vertical_nav'] ? 'bdt-dotnav bdt-dotnav-vertical' : 'bdt-dotnav',
					]
				]
			);
		endif;

		$this->add_render_attribute( 'nav-style', 'data-bdt-scrollspy-nav', 'closest: li; scroll: true; offset: ' . $settings["content_offset"]["size"] . ';' );

		$this->add_render_attribute(
			[ 
				'scrollnav' => [ 
					'class'           => [ 
						'bdt-scrollnav',
						'bdt-navbar-container',
						'bdt-navbar-transparent',
						'bdt-navbar',
						$settings['fixed_nav'] ? 'bdt-position-' . esc_attr( $settings['nav_position'] ) . ' bdt-position-z-index' : '',
					],
					'data-bdt-navbar' => ''
				]
			]
		);

		?>
		<div <?php $this->print_render_attribute_string( 'scrollnav' ); ?>>
			<div>
				<ul <?php $this->print_render_attribute_string( 'nav-style' ); ?>>
					<?php $this->render_loop_nav_list(); ?>
				</ul>
			</div>
		</div>
		<?php
	}

	protected function content_template() {
		?>
		<#
		var navStyle   = settings.nav_style || 'default';
		var iconAlign  = settings.icon_align || 'right';
		var ulClass    = '';
		if ( navStyle !== 'dot' ) {
			ulClass = settings.vertical_nav ? 'bdt-nav bdt-nav-default' : 'bdt-navbar-nav';
		} else {
			ulClass = settings.vertical_nav ? 'bdt-dotnav bdt-dotnav-vertical' : 'bdt-dotnav';
		}
		var offset = settings.content_offset && settings.content_offset.size ? settings.content_offset.size : 0;
		var navPos = settings.fixed_nav === 'yes' ? 'bdt-position-' + settings.nav_position + ' bdt-position-z-index' : '';
		#>
		<div class="bdt-scrollnav bdt-navbar-container bdt-navbar-transparent bdt-navbar {{ navPos }}" data-bdt-navbar>
			<div>
				<ul class="{{ ulClass }}" data-bdt-scrollspy-nav="closest: li; scroll: true; offset: {{ offset }};">
					<# if ( settings.navs && settings.navs.length ) { #>
					<# _.each( settings.navs, function( item ) {
						var linkHref = ( item.nav_link && item.nav_link.url ) ? item.nav_link.url : '#';
						var linkTarget = ( item.nav_link && item.nav_link.is_external ) ? ' target="_blank"' : '';
						var relParts = [];
						if ( item.nav_link && item.nav_link.is_external ) {
							relParts.push( 'noopener', 'noreferrer' );
						}
						if ( item.nav_link && item.nav_link.nofollow ) {
							relParts.push( 'nofollow' );
						}
						var linkRel = relParts.length ? ' rel="' + relParts.join( ' ' ) + '"' : '';
						var tippyExtra = '';
						if ( navStyle === 'dot' ) {
							tippyExtra += ' class="bdt-tippy-tooltip"';
							tippyExtra += ' data-tippy';
							tippyExtra += ' data-tippy-content="' + _.escape( item.nav_title || '' ) + '"';
							if ( settings.dotnav_tooltip_placement ) {
								tippyExtra += ' data-tippy-placement="' + settings.dotnav_tooltip_placement + '"';
							}
							if ( settings.dotnav_tooltip_animation ) {
								tippyExtra += ' data-tippy-animation="' + settings.dotnav_tooltip_animation + '"';
							}
							var ox = ( settings.dotnav_tooltip_x_offset && settings.dotnav_tooltip_x_offset.size ) ? settings.dotnav_tooltip_x_offset.size : 0;
							var oy = ( settings.dotnav_tooltip_y_offset && settings.dotnav_tooltip_y_offset.size ) ? settings.dotnav_tooltip_y_offset.size : 0;
							if ( ox || oy ) {
								tippyExtra += ' data-tippy-offset="[' + ox + ',' + oy + ']"';
							}
							if ( settings.dotnav_tooltip_arrow === 'yes' ) {
								tippyExtra += ' data-tippy-arrow="true"';
							} else {
								tippyExtra += ' data-tippy-arrow="false"';
							}
							if ( settings.dotnav_tooltip_trigger === 'yes' ) {
								tippyExtra += ' data-tippy-trigger="click"';
							}
						}
					#>
					<li>
						<a href="<# print( linkHref ); #>"<# print( linkTarget ); #><# print( linkRel ); #><# print( tippyExtra ); #>>
							<# if ( item.scroll_nav_icon && item.scroll_nav_icon.value && iconAlign === 'left' ) { #>
							<span class="bdt-button-icon-align-left">
								<i class="{{ item.scroll_nav_icon.value }}" aria-hidden="true"></i>
							</span>
							<# } #>
							{{ item.nav_title }}
							<# if ( item.scroll_nav_icon && item.scroll_nav_icon.value && iconAlign === 'right' ) { #>
							<span class="bdt-button-icon-align-right">
								<i class="{{ item.scroll_nav_icon.value }}" aria-hidden="true"></i>
							</span>
							<# } #>
						</a>
					</li>
					<# } ); #>
					<# } #>
				</ul>
			</div>
		</div>
		<?php
	}
}
