<?php
namespace EcafeAddons\Widgets;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Utils;
use Elementor\Group_Control_Typography;
use Elementor\Core\Schemes\Typography;
use Elementor\Scheme_Color;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Text_Shadow;

use EcafeAddons\EcafeElementLoad;

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

class Ecafe_Tabs extends Widget_Base {

	public function get_name() {
		return 'ecafe-tabs';
	}

	public function get_title() {
		return esc_html__( 'Tabs', 'essential-classy-addons-for-elementor' );
	}

	public function get_icon() {
		return 'ecafe-ele-back-icon ecafe-tabs-icon';
	}

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

	public function get_keywords() {
		return array( 'tabs', 'tours', 'vertical', 'horizontal', 'vertical tabs', 'horizontal tabs' );
	}

	public function get_script_depends() {
		return array( 'ecafe-tabs' );
	}

	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__( 'Content', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);
		$this->add_control(
			'tabType',
			array(
				'label'   => __( 'Position', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'horizontal',
				'options' => array(
					'horizontal' => __( 'Horizontal', 'essential-classy-addons-for-elementor' ),
					'vertical'   => __( 'Vertical', 'essential-classy-addons-for-elementor' ),
				),
			)
		);

		$this->add_control(
			'tabHorizontal',
			array(
				'label'     => __( 'Alignment', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => array(
					''        => array(
						'title' => __( 'Left', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-h-align-left',
					),
					'center'  => array(
						'title' => __( 'Center', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-h-align-center',
					),
					'end'     => array(
						'title' => __( 'Right', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-h-align-right',
					),
					'stretch' => array(
						'title' => __( 'Justified', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-h-align-stretch',
					),
				),
				'separator' => 'after',
				'condition' => array(
					'tabType' => 'horizontal',
				),
			)
		);

		$this->add_control(
			'tabVertical',
			array(
				'label'     => __( 'Alignment', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => array(
					''        => array(
						'title' => __( 'Top', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-v-align-top',
					),
					'center'  => array(
						'title' => __( 'Center', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-v-align-middle',
					),
					'end'     => array(
						'title' => __( 'Bottom', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-v-align-bottom',
					),
					'stretch' => array(
						'title' => __( 'Justified', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-v-align-stretch',
					),
				),
				'separator' => 'after',
				'condition' => array(
					'tabType' => 'vertical',
				),
			)
		);

		$repeater = new \Elementor\Repeater();

		$repeater->add_control(
			'tabTitle',
			array(
				'label'       => esc_html__( 'Title', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'default'     => esc_html__( 'Tab Title', 'essential-classy-addons-for-elementor' ),
				'dynamic'     => array(
					'active' => true,
				),
				'label_block' => true,
			)
		);
		$repeater->add_control(
			'tabContentType',
			array(
				'label'   => esc_html__( 'Source', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'content',
				'options' => array(
					'content'       => esc_html__( 'Content', 'essential-classy-addons-for-elementor' ),
					'page_template' => esc_html__( 'Page Template', 'essential-classy-addons-for-elementor' ),
				),
			)
		);
		$repeater->add_control(
			'tabContent',
			array(
				'label'      => esc_html__( 'Content', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::WYSIWYG,
				'default'    => esc_html__( 'Content', 'essential-classy-addons-for-elementor' ),
				'show_label' => false,
				'dynamic'    => array(
					'active' => true,
				),
				'condition'  => array(
					'tabContentType' => array( 'content' ),
				),
			)
		);
		$repeater->add_control(
			'tabContentTemplate',
			array(
				'label'       => esc_html__( 'Elementor Templates', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::SELECT,
				'default'     => '0',
				'options'     => \EcafeHelper::getTemplates(),
				'label_block' => 'true',
				'condition'   => array( 'tabContentType' => 'page_template' ),
			)
		);

		$repeater->add_control(
			'backendVisible',
			array(
				'label'       => esc_html__( 'Backend Visibility', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::SWITCHER,
				'default'     => 'no',
				'label_on'    => esc_html__( 'Show', 'essential-classy-addons-for-elementor' ),
				'label_off'   => esc_html__( 'Hide', 'essential-classy-addons-for-elementor' ),
				'description' => esc_html__( 'Note : Visible in the backend.', 'essential-classy-addons-for-elementor' ),
				'separator'   => 'after',
				'condition'   => array( 'tabContentType' => 'page_template' ),
			)
		);
		$repeater->add_control(
			'tabIcon',
			array(
				'label'   => esc_html__( 'Icon Library', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::ICONS,
				'default' => array(
					'value'   => '',
					'library' => '',
				),
			)
		);
		$this->add_control(
			'tabsItems',
			array(
				'label'       => '',
				'type'        => Controls_Manager::REPEATER,
				'fields'      => $repeater->get_controls(),
				'default'     => array(
					array(
						'tabTitle'   => esc_html__( 'Tab #1', 'essential-classy-addons-for-elementor' ),
						'tabContent' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus suscipit, velit in venenatis dignissim, risus mi ullamcorper justo, ac porta ante leo tempus enim.', 'essential-classy-addons-for-elementor' ),
					),
					array(
						'tabTitle'   => esc_html__( 'Tab #2', 'essential-classy-addons-for-elementor' ),
						'tabContent' => esc_html__( 'I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'essential-classy-addons-for-elementor' ),
					),
				),
				'title_field' => '{{{ tabTitle }}}',
			)
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'extras_section',
			array(
				'label' => esc_html__( 'Extras', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);
		$this->add_control(
			'activeTab',
			array(
				'label'   => esc_html__( 'Active Tab', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::SELECT,
				'default' => '1',
				'options' => \EcafeHelper::getNumbers( 1 ),
			)
		);
		$this->add_control(
			'tabOnHover',
			array(
				'label'     => esc_html__( 'On Hover', '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(
			'inAccordion',
			array(
				'label'     => esc_html__( 'In Mobile Accordion', '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(
			'accTitleAlign',
			array(
				'label'     => __( 'Title Alignment', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => array(
					'left'   => array(
						'title' => __( 'Left', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-h-align-left',
					),
					'center' => array(
						'title' => __( 'Center', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-h-align-center',
					),
					'right'  => array(
						'title' => __( 'Right', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-h-align-right',
					),
				),
				'selectors' => array(
					'{{WRAPPER}} .eca-mobile-accordion .eca-tab-accordion-title' => 'text-align: {{VALUE}};',
				),
				'condition' => array(
					'inAccordion' => 'yes',
				),
			)
		);
		$this->add_control(
			'accAutoplay',
			array(
				'label'     => esc_html__( 'Autoplay <= 767', '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(
			'accAutoplayDuration',
			array(
				'label'     => __( 'Duration', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::NUMBER,
				'min'       => 1,
				'max'       => 30000,
				'step'      => 100,
				'default'   => 5000,
				'condition' => array(
					'accAutoplay' => 'yes',
				),
			)
		);
		$this->add_control(
			'autoplayloop',
			array(
				'label'     => esc_html__( 'Autoplay Loop', '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' ),
				'condition' => array(
					'accAutoplay' => 'yes',
				),
			)
		);
		$this->end_controls_section();

		/*Tippy Tooltip Options*/
		include ECAFE_PATH . 'element/widgets/ecafe-tippy-options.php';

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

		/*
		style start*/
		/*title start*/
		$this->start_controls_section(
			'titleStyling',
			array(
				'label' => esc_html__( 'Title', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'titlePadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'titleMargin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'titleTypo',
				'selector' => '{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title',
			)
		);
		$this->start_controls_tabs( 'tabsTitletyle' );
		$this->start_controls_tab(
			'tabTitleNorm',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'titleColorNorm',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'titleBgNorm',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'titleBorderNorm',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title',
			)
		);
		$this->add_responsive_control(
			'titleBrNorm',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'titleShadowNorm',
				'selector' => '{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title',
			)
		);
		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			array(
				'name'     => 'titleTextShadowNorm',
				'label'    => esc_html__( 'Text Shadow', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title',
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabTitleHover',
			array(
				'label' => esc_html__( 'Hover', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'titleColorHover',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title:hover' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'titleBgHover',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title:hover',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'titleBorderHover',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title:hover',
			)
		);
		$this->add_responsive_control(
			'titleBrHover',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'titleShadowHover',
				'selector' => '{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title:hover',
			)
		);
		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			array(
				'name'     => 'titleTextShadowHover',
				'label'    => esc_html__( 'Text Shadow', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title:hover',
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabTitleActive',
			array(
				'label' => esc_html__( 'Active', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'titleColorActive',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title.tab-active' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'titleBgActive',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title.tab-active',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'titleBorderActive',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title.tab-active',
			)
		);
		$this->add_responsive_control(
			'titleBrActive',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title.tab-active' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'titleShadowActive',
				'selector' => '{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title.tab-active',
			)
		);
		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			array(
				'name'     => 'titleTextShadowActive',
				'label'    => esc_html__( 'Text Shadow', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title.tab-active',
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();
		/*title end*/

		$this->start_controls_section(
			'itemProgessStyling',
			array(
				'label'     => esc_html__( 'Title Progress', 'essential-classy-addons-for-elementor' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'accAutoplay' => 'yes',
				),
			)
		);
		$this->add_responsive_control(
			'itemProgessHeight',
			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' => 500,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 3,
				),
				'selectors'  => array(
					'{{WRAPPER}} .eca-tabs-wrapper.ec-acc-autoplayprogress>.eca-tabs-title-wrap>.eca-tab-title .eca-tab-progress' => 'height:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'itemProgessBg',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-tabs-wrapper.ec-acc-autoplayprogress>.eca-tabs-title-wrap>.eca-tab-title .eca-tab-progress',
			)
		);
		$this->end_controls_section();

		/*icon start*/
		$this->start_controls_section(
			'iconStyling',
			array(
				'label' => esc_html__( 'Icon', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'iconPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title .eca-tab-icon' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'iconMargin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title .eca-tab-icon' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'iconSize',
			array(
				'label'      => esc_html__( 'Size', '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,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 20,
				),
				'selectors'  => array(
					'{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title .eca-tab-icon i' => 'font-size:{{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title .eca-tab-icon svg' => 'width:{{SIZE}}{{UNIT}};height:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->start_controls_tabs( 'tabsIcontyle' );
		$this->start_controls_tab(
			'tabIconNorm',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'iconColorNorm',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title .eca-tab-icon i' => 'color: {{VALUE}};',
					'{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title .eca-tab-icon svg' => 'fill: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'iconBgNorm',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title .eca-tab-icon',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'iconBorderNorm',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title .eca-tab-icon',
			)
		);
		$this->add_responsive_control(
			'iconBrNorm',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title .eca-tab-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'iconShadowNorm',
				'selector' => '{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title .eca-tab-icon',
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabIconHover',
			array(
				'label' => esc_html__( 'Hover', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'iconColorHover',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title:hover .eca-tab-icon i' => 'color: {{VALUE}};',
					'{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title:hover .eca-tab-icon svg' => 'fill: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'iconBgHover',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title:hover .eca-tab-icon',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'iconBorderHover',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title:hover .eca-tab-icon',
			)
		);
		$this->add_responsive_control(
			'iconBrHover',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title:hover .eca-tab-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'iconShadowHover',
				'selector' => '{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title:hover .eca-tab-icon',
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabIconActive',
			array(
				'label' => esc_html__( 'Active', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'iconColorActive',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title.tab-active .eca-tab-icon i' => 'color: {{VALUE}};',
					'{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title.tab-active .eca-tab-icon svg' => 'fill: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'iconBgActive',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title.tab-active .eca-tab-icon',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'iconBorderActive',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title.tab-active .eca-tab-icon',
			)
		);
		$this->add_responsive_control(
			'iconBrActive',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title.tab-active .eca-tab-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'iconShadowActive',
				'selector' => '{{WRAPPER}} .eca-tabs-title-wrap .eca-tab-title.tab-active .eca-tab-icon',
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();
		/*icon end*/

		/*icon-title start*/
		$this->start_controls_section(
			'iconTitleStyling',
			array(
				'label' => esc_html__( 'Icon & Title Box', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'iconTitlePadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-tabs-wrapper .eca-tabs-title-wrap' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'iconTitleWidth',
			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}} .tab-vertical .eca-tabs-title-wrap' => 'width:{{SIZE}}{{UNIT}};',
				),
				'condition'  => array(
					'tabType' => 'vertical',
				),
			)
		);
		$this->start_controls_tabs( 'tabsIconTitleStyle' );
		$this->start_controls_tab(
			'iconTitleContentNorm',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'iconTitleBgNorm',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-tabs-wrapper .eca-tabs-title-wrap',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'iconTitleBorderNorm',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-tabs-wrapper .eca-tabs-title-wrap',
			)
		);
		$this->add_responsive_control(
			'iconTitleBrNorm',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-tabs-wrapper .eca-tabs-title-wrap' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'iconTitleShadowNorm',
				'selector' => '{{WRAPPER}} .eca-tabs-wrapper .eca-tabs-title-wrap',
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabIconTitleHover',
			array(
				'label' => esc_html__( 'Hover', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'iconTitleBgHover',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-tabs-wrapper .eca-tabs-title-wrap:hover',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'iconTitleBorderHover',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-tabs-wrapper .eca-tabs-title-wrap:hover',
			)
		);
		$this->add_responsive_control(
			'iconTitleBrHover',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-tabs-wrapper .eca-tabs-title-wrap:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'iconTitleShadowHover',
				'selector' => '{{WRAPPER}} .eca-tabs-wrapper .eca-tabs-title-wrap:hover',
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();
		/*icon-title end*/

		/*content start*/
		$this->start_controls_section(
			'contentStyling',
			array(
				'label' => esc_html__( 'Content', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'contentPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-tabs-content-wrap .eca-tab-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'contentMargin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-tabs-content-wrap .eca-tab-content' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'contentTypo',
				'selector' => '{{WRAPPER}} .eca-tabs-content-wrap .eca-tab-content,
				{{WRAPPER}} .eca-tabs-content-wrap .eca-tab-content p',
			)
		);
		$this->add_control(
			'contentColorNorm',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-tabs-content-wrap .eca-tab-content,
					{{WRAPPER}} .eca-tabs-content-wrap .eca-tab-content p' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'contentBgNorm',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-tabs-content-wrap .eca-tab-content',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'contentBorderNorm',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-tabs-content-wrap .eca-tab-content',
			)
		);
		$this->add_responsive_control(
			'contentBrNorm',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-tabs-content-wrap .eca-tab-content' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'contentShadowNorm',
				'selector' => '{{WRAPPER}} .eca-tabs-content-wrap .eca-tab-content',
			)
		);
		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			array(
				'name'     => 'contentTextShadowNorm',
				'label'    => esc_html__( 'Text Shadow', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-tabs-content-wrap .eca-tab-content',
			)
		);
		$this->end_controls_section();
		/*content end*/

		/*mobile title start*/
		$this->start_controls_section(
			'titleMStyling',
			array(
				'label'     => esc_html__( 'Mobile Title', 'essential-classy-addons-for-elementor' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'inAccordion' => 'yes',
				),
			)
		);
		$this->add_responsive_control(
			'titleMPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-mobile-accordion .eca-tabs-content-wrap .eca-tab-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'titleMMargin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-mobile-accordion .eca-tabs-content-wrap .eca-tab-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'titleMTypo',
				'selector' => '{{WRAPPER}} .eca-mobile-accordion .eca-tabs-content-wrap .eca-tab-title',
			)
		);
		$this->start_controls_tabs( 'tabsTitleMtyle' );
		$this->start_controls_tab(
			'tabTitleMNorm',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'titleColorMNorm',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-mobile-accordion .eca-tabs-content-wrap .eca-tab-title' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'titleBgMNorm',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-mobile-accordion .eca-tabs-content-wrap .eca-tab-title',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'titleBorderMNorm',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-mobile-accordion .eca-tabs-content-wrap .eca-tab-title',
			)
		);
		$this->add_responsive_control(
			'titleBrMNorm',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-mobile-accordion .eca-tabs-content-wrap .eca-tab-title' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'titleShadowMNorm',
				'selector' => '{{WRAPPER}} .eca-mobile-accordion .eca-tabs-content-wrap .eca-tab-title',
			)
		);
		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			array(
				'name'     => 'titleTextShadowMNorm',
				'label'    => esc_html__( 'Text Shadow', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-mobile-accordion .eca-tabs-content-wrap .eca-tab-title',
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabTitleMActive',
			array(
				'label' => esc_html__( 'Active', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'titleColorMActive',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-mobile-accordion .eca-tabs-content-wrap .eca-tab-title.tab-active' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'titleBgMActive',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-mobile-accordion .eca-tabs-content-wrap .eca-tab-title.tab-active',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'titleBorderMActive',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-mobile-accordion .eca-tabs-content-wrap .eca-tab-title.tab-active',
			)
		);
		$this->add_responsive_control(
			'titleBrMActive',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-mobile-accordion .eca-tabs-content-wrap .eca-tab-title.tab-active' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'titleShadowMActive',
				'selector' => '{{WRAPPER}} .eca-mobile-accordion .eca-tabs-content-wrap .eca-tab-title.tab-active',
			)
		);
		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			array(
				'name'     => 'titleTextShadowMActive',
				'label'    => esc_html__( 'Text Shadow', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-mobile-accordion .eca-tabs-content-wrap .eca-tab-title.tab-active',
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();
		/*title end*/

		/*icon start*/
		$this->start_controls_section(
			'iconMStyling',
			array(
				'label'     => esc_html__( 'Mobile Icon', 'essential-classy-addons-for-elementor' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'inAccordion' => 'yes',
				),
			)
		);
		$this->add_responsive_control(
			'iconMPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-mobile-accordion .eca-tabs-content-wrap .eca-tab-title .eca-tab-icon' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'iconMMargin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-mobile-accordion .eca-tabs-content-wrap .eca-tab-title .eca-tab-icon' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'iconMSize',
			array(
				'label'      => esc_html__( 'Size', '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,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 20,
				),
				'selectors'  => array(
					'{{WRAPPER}} .eca-mobile-accordion .eca-tabs-content-wrap .eca-tab-title .eca-tab-icon i' => 'font-size:{{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .eca-mobile-accordion .eca-tabs-content-wrap .eca-tab-title .eca-tab-icon svg' => 'width:{{SIZE}}{{UNIT}};height:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->start_controls_tabs( 'tabsMIcontyle' );
		$this->start_controls_tab(
			'tabIconMNorm',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'iconColorMNorm',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-mobile-accordion .eca-tabs-content-wrap .eca-tab-title .eca-tab-icon i' => 'color: {{VALUE}};',
					'{{WRAPPER}} .eca-mobile-accordion .eca-tabs-content-wrap .eca-tab-title .eca-tab-icon svg' => 'fill: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'iconBgMNorm',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-mobile-accordion .eca-tabs-content-wrap .eca-tab-title .eca-tab-icon',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'iconBorderMNorm',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-mobile-accordion .eca-tabs-content-wrap .eca-tab-title .eca-tab-icon',
			)
		);
		$this->add_responsive_control(
			'iconBrMNorm',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-mobile-accordion .eca-tabs-content-wrap .eca-tab-title .eca-tab-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'iconShadowMNorm',
				'selector' => '{{WRAPPER}} .eca-mobile-accordion .eca-tabs-content-wrap .eca-tab-title .eca-tab-icon',
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabIconMActive',
			array(
				'label' => esc_html__( 'Active', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'iconColorMActive',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-mobile-accordion .eca-tabs-content-wrap .eca-tab-title.tab-active .eca-tab-icon i' => 'color: {{VALUE}};',
					'{{WRAPPER}} .eca-mobile-accordion .eca-tabs-content-wrap .eca-tab-title.tab-active .eca-tab-icon svg' => 'fill: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'iconBgMActive',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-mobile-accordion .eca-tabs-content-wrap .eca-tab-title.tab-active .eca-tab-icon',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'iconBorderMActive',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-mobile-accordion .eca-tabs-content-wrap .eca-tab-title.tab-active .eca-tab-icon',
			)
		);
		$this->add_responsive_control(
			'iconBrMActive',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-mobile-accordion .eca-tabs-content-wrap .eca-tab-title.tab-active .eca-tab-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'iconShadowMActive',
				'selector' => '{{WRAPPER}} .eca-mobile-accordion .eca-tabs-content-wrap .eca-tab-title.tab-active .eca-tab-icon',
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();
		/*icon end*/

		/*content start*/
		$this->start_controls_section(
			'contentMStyling',
			array(
				'label'     => esc_html__( 'Mobile Content', 'essential-classy-addons-for-elementor' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'inAccordion' => 'yes',
				),
			)
		);
		$this->add_responsive_control(
			'contentMPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-mobile-accordion .eca-tab-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'contentMMargin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-mobile-accordion .eca-tab-content' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'contentMTypo',
				'selector' => '{{WRAPPER}} .eca-mobile-accordion .eca-tab-content,
				{{WRAPPER}} .eca-mobile-accordion .eca-tab-content p',
			)
		);
		$this->add_control(
			'contentMColorNorm',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-mobile-accordion .eca-tab-content,
					{{WRAPPER}} .eca-mobile-accordion .eca-tab-content p' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'contentMBgNorm',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-mobile-accordion .eca-tab-content',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'contentBorderMNorm',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-mobile-accordion .eca-tab-content',
			)
		);
		$this->add_responsive_control(
			'contentBrMNorm',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-mobile-accordion .eca-tab-content' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'contentShadowMNorm',
				'selector' => '{{WRAPPER}} .eca-mobile-accordion .eca-tab-content',
			)
		);
		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			array(
				'name'     => 'contentTextShadowMNorm',
				'label'    => esc_html__( 'Text Shadow', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-mobile-accordion .eca-tab-content',
			)
		);
		$this->end_controls_section();
		/*content end*/

		/*box start*/
		$this->start_controls_section(
			'boxStyling',
			array(
				'label' => esc_html__( 'Box', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'boxPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-tabs-wrapper' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->start_controls_tabs( 'tabsBoxtyle' );
		$this->start_controls_tab(
			'tabBoxNorm',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'boxBgNorm',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-tabs-wrapper',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'boxBorderNorm',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-tabs-wrapper',
			)
		);
		$this->add_responsive_control(
			'boxBrNorm',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-tabs-wrapper' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'boxShadowNorm',
				'selector' => '{{WRAPPER}} .eca-tabs-wrapper',
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabBoxHover',
			array(
				'label' => esc_html__( 'Hover', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'boxBgHover',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-tabs-wrapper:hover',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'boxBorderHover',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-tabs-wrapper:hover',
			)
		);
		$this->add_responsive_control(
			'boxBrHover',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-tabs-wrapper:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'boxShadowHover',
				'selector' => '{{WRAPPER}} .eca-tabs-wrapper:hover',
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();
		/*
		box end*/
		/*style end*/
	}

	protected function render() {
		$settings     = $this->get_settings_for_display();
		$uid          = uniqid( 'tab' );
		$id_int       = substr( $this->get_id_int(), 0, 3 );
		$EleTemplates = \Elementor\Plugin::instance()->templates_manager->get_source( 'local' )->get_items();

		$dataAttr = array(
			'data-id'   => esc_attr( $uid ),
			'type'      => ( isset( $settings['tabOnHover'] ) && $settings['tabOnHover'] == 'yes' ) ? 'hover' : 'click',
			'accordion' => false,
		);

		$tabClasses    = ( $settings['tabType'] == 'vertical' ) ? 'tab-vertical' : 'tab-horizontal';
		$tabHorizontal = '';
		if ( ! empty( $settings['tabHorizontal'] ) && $settings['tabType'] == 'horizontal' ) {
			$tabClasses .= ' align-flex-' . $settings['tabHorizontal'];
		} elseif ( ! empty( $settings['tabVertical'] ) && $settings['tabType'] == 'vertical' ) {
			$tabClasses .= ' align-flex-' . $settings['tabVertical'];
		}

		$accTitleAlign = '';
		if ( ! empty( $settings['inAccordion'] ) && $settings['inAccordion'] == 'yes' ) {
			$dataAttr['accordion'] = true;
			$tabClasses           .= ' eca-mobile-accordion';
			$accTitleAlign        .= ! empty( $settings['accTitleAlign'] ) ? ' text-' . $settings['accTitleAlign'] : '';
		}

		$dataAttr['autoplay']         = ( isset( $settings['accAutoplay'] ) && $settings['accAutoplay'] == 'yes' ) ? 'yes' : 'no';
		$dataAttr['autoplayloop']     = ( isset( $settings['autoplayloop'] ) && $settings['autoplayloop'] == 'yes' ) ? 'yes' : 'no';
		$dataAttr['autoplayduration'] = ! empty( $settings['accAutoplayDuration'] ) ? esc_attr( $settings['accAutoplayDuration'] ) : 5000;
		$tabClasses                  .= ' ec-acc-autoplayprogress';

		$tippyclass  = '';
		$tippyrender = '';
		if ( isset( $settings['tippyTooltip'] ) && $settings['tippyTooltip'] === 'yes' ) {
			/*Tippy Tooltip Render*/
			include ECAFE_PATH . 'element/widgets/ecafe-tippy-render.php';
		}
		$output      = '<div class="eca-tabs-wrapper ' . esc_attr( $uid ) . ' ' . esc_attr( $tabClasses ) . ' ' . esc_attr( $tippyclass ) . '" data-settings=\'' . json_encode( $dataAttr ) . '\'  role="tablist" ' . $tippyrender . '>';
			$output .= '<div class="eca-tabs-title-wrap" role="tablist">';
		if ( ! empty( $settings['tabsItems'] ) ) {
			foreach ( $settings['tabsItems'] as $index => $item ) {
						$count          = $index + 1;
						$tabs_title_key = $this->get_repeater_setting_key( 'eca_tabs_title', 'tabsItems', $index );
						$active_tab     = ( $count == $settings['activeTab'] ) ? ' tab-active' : '';

						$this->add_render_attribute(
							$tabs_title_key,
							array(
								'id'            => 'eca-tab-title-' . $id_int . $count,
								'class'         => array( 'eca-tab-title', $active_tab ),
								'aria-selected' => 1 === $count ? 'true' : 'false',
								'data-tab'      => $count,
								'tabindex'      => 1 === $count ? '0' : '-1',
								'aria-controls' => 'eca-tab-content-' . $id_int . $count,
								'aria-expanded' => 'false',
								'role'          => 'tab',
							)
						);

						$tab_icon = '';
				if ( ! empty( $item['tabIcon'] ) ) {
					ob_start();
					\Elementor\Icons_Manager::render_icon( $item['tabIcon'], array( 'aria-hidden' => 'true' ) );
					$icons_loop = ob_get_contents();
					ob_end_clean();

					if ( ! empty( $icons_loop ) ) {
						$tab_icon .= '<span class="eca-tab-icon">' . $icons_loop . '</span>';
					}
				}

						$output .= '<div ' . $this->get_render_attribute_string( $tabs_title_key ) . '>' . $tab_icon . wp_kses_post( $item['tabTitle'] ) . '</div>';
			}
		}
			$output .= '</div>';
			$output .= '<div class="eca-tabs-content-wrap" role="tablist">';
		if ( ! empty( $settings['tabsItems'] ) ) {
			foreach ( $settings['tabsItems'] as $index => $item ) {
						$count      = $index + 1;
						$active_tab = ( $count == $settings['activeTab'] ) ? ' tab-active' : '';

				if ( ! empty( $settings['inAccordion'] ) && $settings['inAccordion'] == 'yes' ) {
					$tabs_title_accordion_key = $this->get_repeater_setting_key( 'eca_tabs_title_accordion', 'tabsItems', $count );
					$this->add_render_attribute(
						$tabs_title_accordion_key,
						array(
							'class'         => array( 'eca-tab-title', 'eca-tab-accordion-title', $active_tab, $accTitleAlign ),
							'aria-selected' => 1 === $count ? 'true' : 'false',
							'data-tab'      => $count,
							'tabindex'      => 1 === $count ? '0' : '-1',
							'aria-controls' => 'eca-tab-content-' . $id_int . $count,
							'aria-expanded' => 'false',
							'role'          => 'tab',
						)
					);
					$tab_icon = '';
					if ( ! empty( $item['tabIcon'] ) ) {
							ob_start();
							\Elementor\Icons_Manager::render_icon( $item['tabIcon'], array( 'aria-hidden' => 'true' ) );
							$icons_loop = ob_get_contents();
							ob_end_clean();

						if ( ! empty( $icons_loop ) ) {
							$tab_icon .= '<span class="eca-tab-icon">' . $icons_loop . '</span>';
						}
					}
					$output .= '<div ' . $this->get_render_attribute_string( $tabs_title_accordion_key ) . '>' . $tab_icon . wp_kses_post( $item['tabTitle'] ) . '</div>';
				}

						$tabs_content_key = $this->get_repeater_setting_key( 'eca_tabs_content', 'tabsItems', $index );
						$this->add_render_attribute(
							$tabs_content_key,
							array(
								'id'              => 'eca-tab-content-' . $id_int . $count,
								'class'           => array( 'eca-tab-content', $active_tab ),
								'data-tab'        => $count,
								'aria-labelledby' => 'eca-tab-title-' . $id_int . $count,
								'tabindex'        => '0',
								'role'            => 'tabpanel',
							)
						);

				if ( $item['tabContentType'] == 'content' && ! empty( $item['tabContent'] ) ) {
					$output .= '<div ' . $this->get_render_attribute_string( $tabs_content_key ) . '>' . $this->parse_text_editor( wp_kses_post( $item['tabContent'] ) ) . '</div>';
				}

				if ( \Elementor\Plugin::$instance->editor->is_edit_mode() && $item['tabContentType'] == 'page_template' && ! empty( $item['tabContentTemplate'] ) ) {
					if ( ! empty( $item['backendVisible'] ) && $item['backendVisible'] == 'yes' ) {
						if ( 'publish' !== get_post_status( $item['tabContentTemplate'] ) ) {
							$output .= '<div ' . $this->get_render_attribute_string( $tabs_content_key ) . '>' . esc_html__( 'Template Not Yet Published.', 'essential-classy-addons-for-elementor' ) . '</div>';
						} else {
								$output .= '<div ' . $this->get_render_attribute_string( $tabs_content_key ) . '>' . \Elementor\Plugin::$instance->frontend->get_builder_content_for_display( $item['tabContentTemplate'] ) . '</div>';
						}
					} else {
							$get_template_name = '';
							$get_template_id   = $item['tabContentTemplate'];
						if ( ! empty( $EleTemplates ) && ! empty( $get_template_id ) ) {
							foreach ( $EleTemplates as $value ) {
								if ( $value['template_id'] == $get_template_id ) {
									$get_template_name = $value['title'];
								}
							}
						}

								$output .= '<div ' . $this->get_render_attribute_string( $tabs_content_key ) . ' class="eca-preview-notice"><div class="eca-preview-notice-heading">' . esc_html__( 'Selected Template :', 'essential-classy-addons-for-elementor' ) . ' <b>"' . esc_html( $get_template_name ) . '"</b></div><div class="eca-preview-notice-desc"><b>' . esc_html__( 'Note :', 'essential-classy-addons-for-elementor' ) . '</b> ' . esc_html__( 'Visibility disable in the backend. You can manage from Option.', 'essential-classy-addons-for-elementor' ) . '</div></div>';
					}
				} elseif ( $item['tabContentType'] == 'page_template' && ! empty( $item['tabContentTemplate'] ) ) {
					if ( 'publish' !== get_post_status( $item['tabContentTemplate'] ) ) {
							$output .= '<div ' . $this->get_render_attribute_string( $tabs_content_key ) . '>' . esc_html__( 'Template Not Yet Published.', 'essential-classy-addons-for-elementor' ) . '</div>';
					} else {
						$output .= '<div ' . $this->get_render_attribute_string( $tabs_content_key ) . '>' . \Elementor\Plugin::$instance->frontend->get_builder_content_for_display( $item['tabContentTemplate'] ) . '</div>';
					}
				}
			}
		}
			$output .= '</div>';
			$output .= '</div>';

			echo wp_kses_normalize_entities( $output );
	}
}
