<?php
/**
 * Elementor Tabs Widget.
 *
 * Elementor widget that inserts an embbedable content into the page, from any given URL.
 *
 * @since 1.0.5
 */

use \Elementor\Plugin;

class Elementor_Tabs_Widget extends \Elementor\Widget_Base {

	/**
	 * Get widget name.
	 *
	 * Retrieve Tabs widget name.
	 *
	 * @since 1.0.5
	 * @access public
	 *
	 * @return string Widget name.
	 */
	public function get_name() {
		return 'tabs';
	}

	/**
	 * Get widget title.
	 *
	 * Retrieve Tabs widget title.
	 *
	 * @since 1.0.5
	 * @access public
	 *
	 * @return string Widget title.
	 */
	public function get_title() {
		return __( 'Tabs', 'endless-addons' );
	}

	/**
	 * Get widget icon.
	 *
	 * Retrieve Tabs widget icon.
	 *
	 * @since 1.0.5
	 * @access public
	 *
	 * @return string Widget icon.
	 */
	public function get_icon() {
		return 'fa fa-dedent';
	}

	/**
	 * Get widget categories.
	 *
	 * Retrieve the list of categories the Tabs widget belongs to.
	 *
	 * @since 1.0.5
	 * @access public
	 *
	 * @return array Widget categories.
	 */
	public function get_categories() {
		return [ 'endless-elements' ];
	}

	/**
	 * Register Tabs widget controls.
	 *
	 * Adds different input fields to allow the user to change and customize the widget settings.
	 *
	 * @since 1.0.5
	 * @access protected
	 */
	protected function register_controls() {

		$this->start_controls_section(
			'default_section',
			[    
				'label' => __( 'Settings', 'endless-addons' ),
				'tab' => \Elementor\Controls_Manager::TAB_CONTENT
			]
		);

		$this->add_control(
			'show_tabs',
			[
				'label' => __( 'Show/Hide Tabs Section', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::CHOOSE,
				'options' => [
					'show' => [
						'title' => __( 'Show', 'endless-addons' ),
						'icon' => 'fa fa-check'
					],
					'hide' => [
						'title' => __( 'Hide', 'endless-addons' ),
						'icon' => 'fa fa-close'
					]
				],
				'default' => 'show',
				'toggle' => true
			]
		);

		$this->add_control(
			'select_tabs_style',
			[
				'label' => __( 'Select Tabs Style', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::SELECT,
				'input_type' => 'SELECT',
				'options' => [
					'style-01' => __( 'Style 01', 'endless-addons' ),
					'style-02' => __( 'Style 02', 'endless-addons' ),
					'style-03' => __( 'Style 03', 'endless-addons' ),
					'style-04' => __( 'Style 04', 'endless-addons' ),
					'style-05' => __( 'Style 05', 'endless-addons' ),
					'style-06' => __( 'Style 06', 'endless-addons' ),
					'style-07' => __( 'Style 07', 'endless-addons' )
				],
				'default' => 'style-01'
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'tabs_section',
			[
				'label' => __( 'Tabs Section', 'endless-addons' ),
				'tab' => \Elementor\Controls_Manager::TAB_CONTENT
			]
		);

		$this->add_control(
			'section_title',
			[
				'label' => __( 'Section Title', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::TEXT,
				'input_type' => 'text',
				'placeholder' => __( 'Title', 'endless-addons' ),
				'default'  => __( 'Design 1', 'endless-addons' )
			]
		);

		$this->add_control(
			'section_desc',
			[
				'label' => __( 'Section Description', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::WYSIWYG,
				'input_type' => 'WYSIWYG',
				'placeholder' => __( 'Description', 'endless-addons' ),
				'default' => __( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt dolore magna aliqua. Quis ipsum suspendisse ultrices gravida.', 'endless-addons')
			]
		);

		$this->add_group_control(
			\Elementor\Group_Control_Background::get_type(),
			[
				'name' => 'section_background',
				'label' => __( 'Background', 'plugin-domain' ),
				'types' => [ 'classic', 'gradient', 'video' ],
				'selector' => '{{WRAPPER}} .ea-tabs-area',
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'tabs_title',
			[
				'label' => __( 'Tabs Title', 'endless-addons' ),
				'tab' => \Elementor\Controls_Manager::TAB_CONTENT
			]
		);

		$repeater = new \Elementor\Repeater();

		$repeater->add_control(
			'tab_title',
			[
				'label' => __( 'Tab Title', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::TEXT,
				'input_type' => 'text',
				'placeholder' => __( 'Title', 'endless-addons' ),
				'default'  => __( 'Our History', 'endless-addons' )
			]
		);

		$repeater->add_control(
			'icon_type',
			[
				'label' => __( 'Icon Type', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::SELECT,
				'input_type' => 'SELECT',
				'description' => __('Used only for Style 04', 'endless-addons'),
				'options' => [
					'general' => __( 'General', 'endless-addons' ),
					'library' => __( 'Library', 'endless-addons' ),
				],
				'default' => 'general'
			]
		);

		$repeater->add_control(
			'single_tab_icon1', [
				'label' => __( 'Icon', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::ICON,
				'default'  => 'bx bx-book-reader',
				'show_label' => true,
				'description' => __('Used only for Style 02 & 04', 'endless-addons'),
				'options' => endless_addons_icons(),
				'condition' => [
                    'icon_type' => 'general'
                ]
			]
		);

		$repeater->add_control(
			'single_tab_icon2', [
				'label' => __( 'Icon', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::ICONS,
				'show_label' => true,
				'description' => __('Used only for Style 02 & 04', 'endless-addons'),
				'condition' => [
                    'icon_type' => 'library'
                ]
			]
		);

		$repeater->add_control(
			'tab_title_number',
			[
				'label' => __( 'Tab Title Number', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::TEXT,
				'input_type' => 'text',
				'placeholder' => __( '1', 'endless-addons' ),
				'description' => __( 'It will be same with tab content number', 'endless-addons' ),
				'default'  => __( '1', 'endless-addons' )
			]
		);

		$this->add_control(
			'single_tab_title',
			[
				'label' => __( 'Single Tab', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::REPEATER,
				'fields' => $repeater->get_controls(),
				'default' => [
					[
						'list_title' => __( 'Single Tab #1', 'endless-addons' ),
						'list_content' => __( 'Single Tab Content', 'endless-addons' ),
					],
				
				]
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'tabs_content',
			[
				'label' => __( 'Tabs Content', 'endless-addons' ),
				'tab' => \Elementor\Controls_Manager::TAB_CONTENT
			]
		);

		$repeater = new \Elementor\Repeater();

		$repeater->add_control(
			'tab_featured_img',
			[
				'label' => __( 'Featured Image', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::MEDIA,
				'show_label' => true,
				'description' => __('Used only for Style 02, Style 04, Style 05 & Style 07', 'endless-addons')
			]
		);

		$repeater->add_group_control(
			\Elementor\Group_Control_Image_Size::get_type(),
			[
				'name' => 'thumbnail',
				'default' => 'full',
				'separator' => 'none',
				'description' => __('Used only for Style 02, Style 04, Style 05 & Style 07', 'endless-addons'),
				'exclude' => [
					'full',
					'custom',
					'large',
					'shop_catalog',
					'shop_single',
					'shop_thumbnail'
				]
			]
		);
        
        $repeater->add_control(
            'ea_content_text_type',
            [
                'label' => __('Content Type', 'endless-addons'),
                'type' => \Elementor\Controls_Manager::SELECT,
                'options' => [
                    'content' => __('Content', 'endless-addons'),
                    'template' => __('Saved Templates', 'endless-addons'),
                ],
                'default' => 'content',
            ]
        );

		$repeater->add_control(
			'tab_desc',
			[
				'label' => __( 'Tab Description', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::WYSIWYG,
				'input_type' => 'WYSIWYG',
				'placeholder' => __( 'Description', 'endless-addons' ),
				'default' => __( '<p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla quis lorem ut libero malesuada feugiat.Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Sed porttitor lectus nibh. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat tortor eget felis porttitor volutpat suscipit tortor eget felis porttitor.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit tortor eget felis porttitor volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit tortor eget felis porttitor volutpat. Donec rutrum congue leo eget malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Donec sollicitudin molestie malesuada. amet, consectetur adipiscing elit Vivamus</p>', 'endless-addons'),
				'condition' => [
                    'ea_content_text_type' => 'content'
                ]
			]
		);

		$repeater->add_control(
            'ea_content_templates',
            [
                'label' => __('Choose Template', 'endless-addons'),
                'type' => \Elementor\Controls_Manager::SELECT,
                'options' => ea_get_elementor_templates(),
                'condition' => [
                    'ea_content_text_type' => 'template',
                ],
            ]
        );

		$repeater->add_control(
			'tab_content_number',
			[
				'label' => __( 'Tab Content Number', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::TEXT,
				'input_type' => 'text',
				'placeholder' => __( '1', 'endless-addons' ),
				'description' => __( 'It will be same with tab title number', 'endless-addons' ),
				'default'  => __( '1', 'endless-addons' )
			]
		);

		$this->add_control(
			'single_tab_content',
			[
				'label' => __( 'Single Tab', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::REPEATER,
				'fields' => $repeater->get_controls(),
				'default' => [
					[
						'list_title' => __( 'Single Tab #1', 'endless-addons' ),
						'list_content' => __( 'Single Tab Content', 'endless-addons' ),
					],
				
				]
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_style',
			[
				'label' => __( 'Section Style', 'endless-addons' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE
			]
		);

		$this->add_control(
			'section_title_color',
			[
				'label' => __( 'Section Title Color', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::COLOR,
				'selectors' => [
                    '{{WRAPPER}} .ea-tabs-area .section-title h2' => 'color: {{VALUE}}'
                ]
			]
		);

		$this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'section_title_typography',
                'label' => __( 'Section Title Typography', 'endless-addons' ),
                'scheme' => \Elementor\Core\Schemes\Typography::TYPOGRAPHY_1,
                'selector' => '{{WRAPPER}} .ea-tabs-area .section-title h2'
            ]
        );

        $this->add_control(
			'section_desc_color',
			[
				'label' => __( 'Section Description Color', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::COLOR,
				'selectors' => [
                    '{{WRAPPER}} .ea-tabs-area .section-title p' => 'color: {{VALUE}}'
                ]
			]
		);

        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'section_desc_typography',
                'label' => __( 'Section Description Typography', 'endless-addons' ),
                'scheme' => \Elementor\Core\Schemes\Typography::TYPOGRAPHY_1,
                'selector' => '{{WRAPPER}} .ea-tabs-area .section-title p'
            ]
        );

		$this->end_controls_section();

		$this->start_controls_section(
			'tabs_title_style',
			[
				'label' => __( 'Tabs Title Style', 'endless-addons' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE
			]
		);

        $this->add_control(
			'tabs_bar_bg_color',
			[
				'label' => __( 'Tabs Bar Background Color', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::COLOR,
				'selectors' => [
                    '{{WRAPPER}} .ea-tabs-button.style-one, .ea-tabs-button.style-two .nav-tabs, .ea-tabs-button.style-three, .ea-tabs-button.style-four .nav-tabs, .ea-tabs-button.style-five .nav-tabs, .ea-tabs-button.style-six .nav-tabs, .ea-tabs-button.style-seven .nav-tabs' => 'background: {{VALUE}}'
                ],
                'condition' => [
                    'select_tabs_style' => array('style-01', 'style-02', 'style-03', 'style-05', 'style-06', 'style-07')
                ]

			]
		);

		$this->add_control(
			'tabs_title_bg_color',
			[
				'label' => __( 'Tabs Title Background Color', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::COLOR,
				'selectors' => [
                    '{{WRAPPER}} .ea-tabs-button.style-one .nav-tabs .nav-link, .ea-tabs-button.style-two .nav-tabs .nav-link, .ea-tabs-button.style-three .nav-tabs .nav-link, .ea-tabs-button.style-four .nav-tabs .nav-link, .ea-tabs-button.style-five .nav-tabs .nav-link, .ea-tabs-button.style-six .nav-tabs .nav-link, .ea-tabs-button.style-seven .nav-tabs .nav-link' => 'background: {{VALUE}}'
                ]
			]
		);

		$this->add_control(
			'tabs_title_color',
			[
				'label' => __( 'Tabs Title Color', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::COLOR,
				'selectors' => [
                    '{{WRAPPER}} .ea-tabs-button.style-one .nav-tabs .nav-link, .ea-tabs-button.style-two .nav-tabs .nav-link, .ea-tabs-button.style-three .nav-tabs .nav-link, .ea-tabs-button.style-four .nav-tabs .nav-link, .ea-tabs-button.style-five .nav-tabs .nav-link, .ea-tabs-button.style-six .nav-tabs .nav-link, .ea-tabs-button.style-seven .nav-tabs .nav-link' => 'color: {{VALUE}}'
                ]
			]
		);

		$this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'tabs_title_typography',
                'label' => __( 'Tabs Title Typography', 'endless-addons' ),
                'scheme' => \Elementor\Core\Schemes\Typography::TYPOGRAPHY_1,
                'selector' => '{{WRAPPER}} .ea-tabs-button.style-one .nav-tabs .nav-link, .ea-tabs-button.style-two .nav-tabs .nav-link, .ea-tabs-button.style-three .nav-tabs .nav-link, .ea-tabs-button.style-four .nav-tabs .nav-link, .ea-tabs-button.style-five .nav-tabs .nav-link, .ea-tabs-button.style-six .nav-tabs .nav-link, .ea-tabs-button.style-seven .nav-tabs .nav-link'
            ]
        );

		$this->add_control(
			'tabs_title_active_bg_color',
			[
				'label' => __( 'Tabs Title Active Background Color', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::COLOR,
				'selectors' => [
                    '{{WRAPPER}} .ea-tabs-button.style-one .nav-tabs .nav-link.active, .ea-tabs-button.style-two .nav-tabs .nav-link.active, .ea-tabs-button.style-three .nav-tabs .nav-link.active, .ea-tabs-button.style-four .nav-tabs .nav-link.active, .ea-tabs-button.style-five .nav-tabs .nav-link.active, .ea-tabs-button.style-six .nav-tabs .nav-link.active, .ea-tabs-button.style-seven .nav-tabs .nav-link.active' => 'background: {{VALUE}}'
                ]
			]
		);

		$this->add_control(
			'tabs_title_active_color',
			[
				'label' => __( 'Tabs Title Active Color', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::COLOR,
				'selectors' => [
                    '{{WRAPPER}} .ea-tabs-button.style-one .nav-tabs .nav-link.active, .ea-tabs-button.style-two .nav-tabs .nav-link.active, .ea-tabs-button.style-three .nav-tabs .nav-link.active, .ea-tabs-button.style-four .nav-tabs .nav-link.active, .ea-tabs-button.style-five .nav-tabs .nav-link.active, .ea-tabs-button.style-six .nav-tabs .nav-link.active, .ea-tabs-button.style-seven .nav-tabs .nav-link.active' => 'color: {{VALUE}}'
                ]
			]
		);

		$this->add_group_control(
            \Elementor\Group_Control_Border::get_type(),
            [
                'name'     => 'tabs_title_border',
                'selector' => '{{WRAPPER}} .ea-tabs-button.style-one .nav-tabs .nav-link, .ea-tabs-button.style-two .nav-tabs .nav-link, .ea-tabs-button.style-three .nav-tabs .nav-link, .ea-tabs-button.style-four .nav-tabs .nav-link, .ea-tabs-button.style-five .nav-tabs .nav-link, .ea-tabs-button.style-six .nav-tabs .nav-link, .ea-tabs-button.style-seven .nav-tabs .nav-link',
            ]
        );

		$this->add_control(
            'tabs_title_border_radius',
            [
                'label' => __( 'Tabs Title Border Radius', 'endless-addons' ),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%' ],
                'separator' => 'after',
                'selectors' => [
                    '{{WRAPPER}} .ea-tabs-button.style-one .nav-tabs .nav-link, .ea-tabs-button.style-two .nav-tabs .nav-link, .ea-tabs-button.style-three .nav-tabs .nav-link, .ea-tabs-button.style-four .nav-tabs .nav-link, .ea-tabs-button.style-five .nav-tabs .nav-link, .ea-tabs-button.style-six .nav-tabs .nav-link, .ea-tabs-button.style-seven .nav-tabs .nav-link' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

		$this->end_controls_section();

		$this->start_controls_section(
			'tabs_icon_style',
			[
				'label' => __( 'Tabs Icon Style', 'endless-addons' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE
			]
		);

		$this->add_control(
			'tabs_icon_size',
			[
				'label' => __( 'Icon Size', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::SLIDER,
                'range' => [
                    'px' => [
                        'min' => 20,
                        'max' => 100,
                        'step' => 1,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .ea-tabs-area .ea-tabs-button .nav-tabs .nav-link i ' => 'font-size: {{SIZE}}px;'
                ],
                'condition' => [
                    'select_tabs_style' => array('style-02', 'style-04')
                ]
			]
		);

		$this->add_control(
			'tabs_icon_bg_color',
			[
				'label' => __( 'Icon Background Color', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::COLOR,
				'selectors' => [
                    '{{WRAPPER}} .ea-tabs-area .ea-tabs-button .nav-tabs .nav-link i' => 'background-color: {{VALUE}}'
                ],
                'condition' => [
                    'select_tabs_style' => 'style-04'
                ]
			]
		);

		$this->add_control(
			'tabs_icon_color',
			[
				'label' => __( 'Icon Color', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::COLOR,
				'selectors' => [
                    '{{WRAPPER}} .ea-tabs-area .ea-tabs-button .nav-tabs .nav-link i' => 'color: {{VALUE}}'
                ],
                'condition' => [
                    'select_tabs_style' => array('style-02', 'style-04')
                ]
			]
		);

        $this->add_control(
            'tabs_icon_spacing',
            [
                'label'     => esc_html__('Icon Gap', 'endless-addons'),
                'type'      => \Elementor\Controls_Manager::SLIDER,
                'range'     => [
                    'px' => [
                        'max' => 60,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .ea-tabs-area .ea-tabs-button .nav-tabs .nav-link i' => 'margin-right: {{SIZE}}px;'
                ],
                'condition' => [
                    'select_tabs_style' => 'style-02'
                ]
            ]
        );

        $this->add_control(
            'tabs_icon_padding',
            [
                'label'         => esc_html__( 'Icon Padding', 'endless-addons' ),
                'type'          => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units'    => [ 'px', '%', 'em' ],
                'selectors'     => [
                    '{{WRAPPER}} .ea-tabs-area .ea-tabs-button .nav-tabs .nav-link i' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
                'condition' => [
                    'select_tabs_style' => 'style-02'
                ]
            ]
        );

        $this->add_control(
            'tabs_icon_margin',
            [
                'label'         => esc_html__( 'Icon Margin', 'endless-addons' ),
                'type'          => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units'    => [ 'px', '%', 'em' ],
                'selectors'     => [
                    '{{WRAPPER}} .ea-tabs-area .ea-tabs-button .nav-tabs .nav-link i' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
                'condition' => [
                    'select_tabs_style' => 'style-02'
                ]
            ]
        );

		$this->end_controls_section();

		$this->start_controls_section(
			'tabs_content_style',
			[
				'label' => __( 'Tabs Content Style', 'endless-addons' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE
			]
		);

		$this->add_control(
			'tabs_content_bg_color',
			[
				'label' => __( 'Tabs Content Background Color', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::COLOR,
				'selectors' => [
                    '{{WRAPPER}} .ea-tabs-area .ea-tabs-content' => 'background: {{VALUE}}'
                ]
			]
		);

		$this->add_control(
			'tabs_content_color',
			[
				'label' => __( 'Tabs Content Color', 'endless-addons' ),
				'type' => \Elementor\Controls_Manager::COLOR,
				'selectors' => [
                    '{{WRAPPER}} .ea-tabs-area .ea-tabs-content p, .ea-tabs-area .ea-tabs-content h1, .ea-tabs-area .ea-tabs-content h2, .ea-tabs-area .ea-tabs-content h3, .ea-tabs-area .ea-tabs-content h4, .ea-tabs-area .ea-tabs-content h5, .ea-tabs-area .ea-tabs-content h6, .ea-tabs-area .ea-tabs-content pre ' => 'color: {{VALUE}}'
                ]
			]
		);

		$this->add_group_control(
            \Elementor\Group_Control_Box_Shadow::get_type(),
            [
                'name'     => 'tabs_content_box_shadow',
                'selector' => '{{WRAPPER}} .ea-tabs-area .ea-tabs-content',
            ]
        );

		$this->add_control(
            'tabs_content_padding',
            [
                'label'         => esc_html__( 'Tabs Content Padding', 'endless-addons' ),
                'type'          => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units'    => [ 'px', '%', 'em' ],
                'selectors'     => [
                    '{{WRAPPER}} .ea-tabs-area .ea-tabs-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'tabs_content_margin',
            [
                'label'         => esc_html__( 'Tabs Content Margin', 'endless-addons' ),
                'type'          => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units'    => [ 'px', '%', 'em' ],
                'selectors'     => [
                    '{{WRAPPER}} .ea-tabs-area .ea-tabs-content' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

		$this->end_controls_section();

		$this->start_controls_section(
			'_section_overlay_style',
			[
				'label' => __('Background Overlay', 'endless-addons'),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE
			]
		);

		$this->start_controls_tabs('_tabs_overlay_style');

		$this->start_controls_tab(
			'_tab_overlay_normal',
			[
				'label' => __('Normal', 'endless-addons'),
			]
		);

		$this->add_group_control(
			\Elementor\Group_Control_Background::get_type(),
			[
				'name'     => 'hover_overlay_normal',
				'label' => __('Background', 'endless-addons'),
				'show_label' => true,
				'types' => ['classic', 'gradient'],
				'exclude' => [
					'classic' => 'image'
				],
				'selector' => '{{WRAPPER}} .ea-tabs-area',
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'_tab_overlay_hover',
			[
				'label' => __('Hover', 'endless-addons'),
			]
		);


		$this->add_group_control(
			\Elementor\Group_Control_Background::get_type(),
			[
				'name'     => 'hover_overlay_hover',
				'label' => __('Background', 'endless-addons'),
				'show_label' => true,
				'types' => ['classic', 'gradient'],
				'exclude' => [
					'classic' => 'image'
				],
				'selector' => '{{WRAPPER}} .ea-tabs-area:hover',
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->end_controls_section();

	}

	/**
	 * Render Tabs widget output on the frontend.
	 *
	 * Written in PHP and used to generate the final HTML.
	 *
	 * @since 1.0.5
	 * @access protected
	 */
	protected function render() {

		$settings = $this->get_settings_for_display();

		if( $settings['show_tabs'] == 'show' ) :

			if( $settings['select_tabs_style'] == 'style-01' ) : ?>
				<!-- Start EA Tabs Design One Area -->
		        <section class="ea-tabs-area pb-100">
		            <div class="container">
		                <div class="section-title">
		                    <h2><?php echo esc_html($settings['section_title']); ?></h2>
		                    <p><?php echo wp_kses_post($settings['section_desc']); ?></p>
		                </div>
		                <nav class="ea-tabs-button style-one">
		                    <div class="nav nav-tabs" id="nav-tab" role="tablist">
		                    	<?php foreach ( $settings['single_tab_title'] as $title ) : ?>
			                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#data<?php echo esc_attr($title['tab_title_number']); ?>" type="button" role="tab" aria-selected="true">
			                            <?php echo esc_html($title['tab_title']); ?>
			                        </button>
		                        <?php endforeach; ?>
		                    </div>
		                </nav>
		                <div class="ea-tabs-content">
		                    <div class="tab-content" id="nav-tabContent">
		                    	<?php foreach ( $settings['single_tab_content'] as $content ) : ?>
			                        <div class="tab-pane fade show" id="data<?php echo esc_attr($content['tab_content_number']); ?>" role="tabpanel">
	                                    <?php if($content['ea_content_text_type'] == 'content') : ?>
			                                <p><?php echo wp_kses_post($content['tab_desc']); ?></p>
			                            <?php elseif($content['ea_content_text_type'] == 'template') : ?>
			                            	<p>
			                            		<?php if (!empty($content['ea_content_templates'])) {
									                echo Plugin::$instance->frontend->get_builder_content($content['ea_content_templates'], true);
									            } ?>
			                            	</p>
			                            <?php endif; ?>
			                        </div>
		                        <?php endforeach; ?>
		                    </div>
		                </div>
		            </div>
		        </section>
		        <!-- End EA Tabs Design One Area -->
		    <?php elseif( $settings['select_tabs_style'] == 'style-02' ) : ?>
		    	<!-- Start EA Tabs Design Two Area -->
		        <section class="ea-tabs-area pb-100">
		            <div class="container">
		                <div class="section-title">
		                    <h2><?php echo esc_html($settings['section_title']); ?></h2>
		                    <p><?php echo wp_kses_post($settings['section_desc']); ?></p>
		                </div>
		                <nav class="ea-tabs-button style-two">
		                    <div class="nav nav-tabs" id="nav-tab" role="tablist">
		                    	<?php foreach ( $settings['single_tab_title'] as $title ) : ?>
			                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#data<?php echo esc_attr($title['tab_title_number']); ?>" type="button" role="tab" aria-selected="true">
			                        	<?php if(! $title['single_tab_icon1'] == '' || ! $title['single_tab_icon2'] == '') : ?>
				                                <?php if( $title['icon_type'] == 'general' ) : ?>
			                                	    <i class="<?php echo wp_kses_post( $title['single_tab_icon1'] ); ?>"></i>
			                                	<?php else: 
			                                		endad_render_icon( $title, 'icon', 'single_tab_icon2' ); 
			                                	endif; ?>
				                            <?php endif; ?>
			                            <?php echo esc_html($title['tab_title']); ?>
			                        </button>
		                        <?php endforeach; ?>
		                    </div>
		                </nav>
		                <div class="ea-tabs-content style-two">
		                    <div class="tab-content" id="nav-tabContent">
		                    	<?php foreach ( $settings['single_tab_content'] as $content ) : ?>
			                        <div class="tab-pane fade show" id="data<?php echo esc_attr($content['tab_content_number']); ?>" role="tabpanel">
			                        	<div class="row align-items-center">
			                        		<div class="col-lg-6">
		                                    	<div class="ea-tab-img ea-mb-30">
		                                            <?php echo \Elementor\Group_Control_Image_Size::get_attachment_image_html( $content, 'thumbnail', 'tab_featured_img' ); ?>
		                                        </div>
		                                    </div>
				                        	<div class="col-lg-6">
			                                    <?php if($content['ea_content_text_type'] == 'content') : ?>
			                                <p><?php echo wp_kses_post($content['tab_desc']); ?></p>
			                            <?php elseif($content['ea_content_text_type'] == 'template') : ?>
			                            	<p>
			                            		<?php if (!empty($content['ea_content_templates'])) {
									                echo Plugin::$instance->frontend->get_builder_content($content['ea_content_templates'], true);
									            } ?>
			                            	</p>
			                            <?php endif; ?>
			                                </div>
	                                    </div>
			                        </div>
		                        <?php endforeach; ?>
		                    </div>
		                </div>
		            </div>
		        </section>
		        <!-- End EA Tabs Design Two Area -->
		    <?php elseif( $settings['select_tabs_style'] == 'style-03' ) : ?>
		    	<!-- Start EA Tabs Design Three Area -->
		        <section class="ea-tabs-area pb-100">
		            <div class="container">
		                <div class="section-title">
		                    <h2><?php echo esc_html($settings['section_title']); ?></h2>
		                    <p><?php echo wp_kses_post($settings['section_desc']); ?></p>
		                </div>
                        <nav class="ea-tabs-button style-three">
		                    <div class="nav nav-tabs" id="nav-tab" role="tablist">
		                    	<?php foreach ( $settings['single_tab_title'] as $title ) : ?>
			                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#data<?php echo esc_attr($title['tab_title_number']); ?>" type="button" role="tab" aria-selected="true">
			                            <?php echo esc_html($title['tab_title']); ?>
			                        </button>
		                        <?php endforeach; ?>
		                    </div>
		                </nav>
		                <div class="ea-tabs-content style-three">
		                    <div class="tab-content" id="nav-tabContent">
		                    	<?php foreach ( $settings['single_tab_content'] as $content ) : ?>
			                        <div class="tab-pane fade show" id="data<?php echo esc_attr($content['tab_content_number']); ?>" role="tabpanel">
	                                    <?php if($content['ea_content_text_type'] == 'content') : ?>
			                                <p><?php echo wp_kses_post($content['tab_desc']); ?></p>
			                            <?php elseif($content['ea_content_text_type'] == 'template') : ?>
			                            	<p>
			                            		<?php if (!empty($content['ea_content_templates'])) {
									                echo Plugin::$instance->frontend->get_builder_content($content['ea_content_templates'], true);
									            } ?>
			                            	</p>
			                            <?php endif; ?>
			                        </div>
		                        <?php endforeach; ?>
		                    </div>
		                </div>
		            </div>
		        </section>
		        <!-- End EA Tabs Design Three Area -->
		    <?php elseif( $settings['select_tabs_style'] == 'style-04' ) : ?>
		    	<!-- Start EA Tabs Design Four Area -->
		        <section class="ea-tabs-area ea-bg-color-e7ecf9 ptb-100">
		            <div class="container">
		                <div class="section-title">
		                    <h2><?php echo esc_html($settings['section_title']); ?></h2>
		                    <p><?php echo wp_kses_post($settings['section_desc']); ?></p>
		                </div>
		                <div class="row">
		                    <div class="col-lg-3 pr-0">
		                        <nav class="ea-tabs-button style-four">
				                    <div class="nav nav-tabs" id="nav-tab" role="tablist">
				                    	<?php foreach ( $settings['single_tab_title'] as $title ) : ?>
					                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#data<?php echo esc_attr($title['tab_title_number']); ?>" type="button" role="tab" aria-selected="true">
					                        	<?php if(! $title['single_tab_icon1'] == '' || ! $title['single_tab_icon2'] == '') : ?>
					                                <?php if( $title['icon_type'] == 'general' ) : ?>
				                                	    <i class="<?php echo wp_kses_post( $title['single_tab_icon1'] ); ?>"></i>
				                                	<?php else: 
				                                		endad_render_icon( $title, 'icon', 'single_tab_icon2' ); 
				                                	endif; ?>
					                            <?php endif; ?>
					                            <?php echo esc_html($title['tab_title']); ?>
					                        </button>
				                        <?php endforeach; ?>
				                    </div>
				                </nav>
		                    </div>
		                    <div class="col-lg-9 pl-0">
		                        <div class="ea-tabs-content style-four">
				                    <div class="tab-content" id="nav-tabContent">
				                    	<?php foreach ( $settings['single_tab_content'] as $content ) : ?>
					                        <div class="tab-pane fade show" id="data<?php echo esc_attr($content['tab_content_number']); ?>" role="tabpanel">
					                        	<div class="row align-items-end">
						                        	<div class="col-lg-7">
						                        		<div class="ptbl-50">
					                                        <?php if($content['ea_content_text_type'] == 'content') : ?>
			                                <p><?php echo wp_kses_post($content['tab_desc']); ?></p>
			                            <?php elseif($content['ea_content_text_type'] == 'template') : ?>
			                            	<p>
			                            		<?php if (!empty($content['ea_content_templates'])) {
									                echo Plugin::$instance->frontend->get_builder_content($content['ea_content_templates'], true);
									            } ?>
			                            	</p>
			                            <?php endif; ?>
					                                    </div>
					                                </div>
				                                    <div class="col-lg-5">
				                                    	<div class="ea-tab-img ea-mt-30">
				                                            <?php echo \Elementor\Group_Control_Image_Size::get_attachment_image_html( $content, 'thumbnail', 'tab_featured_img' ); ?>
				                                        </div>
				                                    </div>
			                                    </div>
					                        </div>
				                        <?php endforeach; ?>
				                    </div>
				                </div>
		                    </div>
		                </div>
		            </div>
		        </section>
		        <!-- End EA Tabs Design Four Area -->
		    <?php elseif( $settings['select_tabs_style'] == 'style-05' ) : ?>
		    	<!-- Start EA Tabs Design Five Area -->
		        <section class="ea-tabs-area ptb-100">
		            <div class="container">
		                <div class="section-title">
		                    <h2><?php echo esc_html($settings['section_title']); ?></h2>
		                    <p><?php echo wp_kses_post($settings['section_desc']); ?></p>
		                </div>
	                    <nav class="ea-tabs-button style-five">
		                    <div class="nav nav-tabs" id="nav-tab" role="tablist">
		                    	<?php foreach ( $settings['single_tab_title'] as $title ) : ?>
			                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#data<?php echo esc_attr($title['tab_title_number']); ?>" type="button" role="tab" aria-selected="true">
			                            <?php echo esc_html($title['tab_title']); ?>
			                        </button>
		                        <?php endforeach; ?>
		                    </div>
		                </nav>
	                    <div class="ea-tabs-content style-five">
		                    <div class="tab-content" id="nav-tabContent">
		                    	<?php foreach ( $settings['single_tab_content'] as $content ) : ?>
			                        <div class="tab-pane fade show" id="data<?php echo esc_attr($content['tab_content_number']); ?>" role="tabpanel">
			                        	<div class="row align-items-center">
		                                    <div class="col-lg-5">
		                                    	<div class="ea-tab-img ea-mb-30">
		                                            <?php echo \Elementor\Group_Control_Image_Size::get_attachment_image_html( $content, 'thumbnail', 'tab_featured_img' ); ?>
		                                        </div>
		                                    </div>
		                                    <div class="col-lg-7">
			                                    <?php if($content['ea_content_text_type'] == 'content') : ?>
			                                <p><?php echo wp_kses_post($content['tab_desc']); ?></p>
			                            <?php elseif($content['ea_content_text_type'] == 'template') : ?>
			                            	<p>
			                            		<?php if (!empty($content['ea_content_templates'])) {
									                echo Plugin::$instance->frontend->get_builder_content($content['ea_content_templates'], true);
									            } ?>
			                            	</p>
			                            <?php endif; ?>
			                                </div>
	                                    </div>
			                        </div>
		                        <?php endforeach; ?>
		                    </div>
		                </div>
		                </div>
		            </div>
		        </section>
		        <!-- End EA Tabs Design Five Area -->
		    <?php elseif( $settings['select_tabs_style'] == 'style-06' ) : ?>
		    	<!-- Start EA Tabs Design Six Area -->
		        <section class="ea-tabs-area ea-bg-color-e7ecf9 ptb-100">
		            <div class="container">
		                <div class="section-title">
		                    <h2><?php echo esc_html($settings['section_title']); ?></h2>
		                    <p><?php echo wp_kses_post($settings['section_desc']); ?></p>
		                </div>
		                <nav class="ea-tabs-button style-six">
		                    <div class="nav nav-tabs" id="nav-tab" role="tablist">
		                    	<?php foreach ( $settings['single_tab_title'] as $title ) : ?>
			                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#data<?php echo esc_attr($title['tab_title_number']); ?>" type="button" role="tab" aria-selected="true">
			                            <?php echo esc_html($title['tab_title']); ?>
			                        </button>
		                        <?php endforeach; ?>
		                    </div>
		                </nav>
		                <div class="ea-tabs-content style-six">
		                    <div class="tab-content" id="nav-tabContent">
		                    	<?php foreach ( $settings['single_tab_content'] as $content ) : ?>
			                        <div class="tab-pane fade show" id="data<?php echo esc_attr($content['tab_content_number']); ?>" role="tabpanel">
	                                    <?php if($content['ea_content_text_type'] == 'content') : ?>
			                                <p><?php echo wp_kses_post($content['tab_desc']); ?></p>
			                            <?php elseif($content['ea_content_text_type'] == 'template') : ?>
			                            	<p>
			                            		<?php if (!empty($content['ea_content_templates'])) {
									                echo Plugin::$instance->frontend->get_builder_content($content['ea_content_templates'], true);
									            } ?>
			                            	</p>
			                            <?php endif; ?>
			                        </div>
		                        <?php endforeach; ?>
		                    </div>
		                </div>
		            </div>
		        </section>
		        <!-- End EA Tabs Design Six Area -->
		    <?php elseif( $settings['select_tabs_style'] == 'style-07' ) : ?>
		        <!-- Start EA Tabs Design Seven Area -->
		        <section class="ea-tabs-area style-seven bg-shape pt-100">
		            <div class="container">
		                <div class="section-title">
		                    <h2><?php echo esc_html($settings['section_title']); ?></h2>
		                    <p><?php echo wp_kses_post($settings['section_desc']); ?></p>
		                </div>
		                <nav class="ea-tabs-button style-seven">
		                    <div class="nav nav-tabs" id="nav-tab" role="tablist">
		                    	<?php foreach ( $settings['single_tab_title'] as $title ) : ?>
			                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#data<?php echo esc_attr($title['tab_title_number']); ?>" type="button" role="tab" aria-selected="true">
			                            <?php echo esc_html($title['tab_title']); ?>
			                        </button>
		                        <?php endforeach; ?>
		                    </div>
		                </nav>
	                    <div class="ea-tabs-content style-seven">
		                    <div class="tab-content" id="nav-tabContent">
		                    	<?php foreach ( $settings['single_tab_content'] as $content ) : ?>
			                        <div class="tab-pane fade show" id="data<?php echo esc_attr($content['tab_content_number']); ?>" role="tabpanel">
			                        	<div class="row align-items-center">
				                        	<div class="col-lg-6">
			                                    <?php if($content['ea_content_text_type'] == 'content') : ?>
			                                <p><?php echo wp_kses_post($content['tab_desc']); ?></p>
			                            <?php elseif($content['ea_content_text_type'] == 'template') : ?>
			                            	<p>
			                            		<?php if (!empty($content['ea_content_templates'])) {
									                echo Plugin::$instance->frontend->get_builder_content($content['ea_content_templates'], true);
									            } ?>
			                            	</p>
			                            <?php endif; ?>
			                                </div>
		                                    <div class="col-lg-6">
		                                    	<div class="ea-tab-img ea-mb-30">
		                                            <?php echo \Elementor\Group_Control_Image_Size::get_attachment_image_html( $content, 'thumbnail', 'tab_featured_img' ); ?>
		                                        </div>
		                                    </div>
	                                    </div>
			                        </div>
		                        <?php endforeach; ?>
		                    </div>
		                </div>
		            </div>
		        </section>
		        <!-- End EA Tabs Design Seven Area -->

            <?php endif; 

        endif;

    }

}
