<?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 EcafeAddons\EcafeElementLoad;

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

class Ecafe_Hover_Background extends Widget_Base {

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

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

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

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


	public function get_keywords() {
		return array( 'hover background', 'background change', 'bg change', 'image change', 'card', 'hover card', 'card effect', 'hover effect' );
	}

	public function get_script_depends() {
		return array( 'ecafe-hover-background' );
	}
	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(
			'contentSection',
			array(
				'label' => esc_html__( 'Hover Background', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);
		$repeater = new \Elementor\Repeater();
		$repeater->add_control(
			'hbBackgroundImage',
			array(
				'label'   => esc_html__( 'Background Image', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::MEDIA,
				'default' => array(
					'url' => \Elementor\Utils::get_placeholder_image_src(),
				),
				'dynamic' => array( 'active' => true ),
			)
		);
		$repeater->add_control(
			'hbIconImage',
			array(
				'label'   => esc_html__( 'Source', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'icon',
				'options' => array(
					'icon'  => esc_html__( 'Icon', 'essential-classy-addons-for-elementor' ),
					'image' => esc_html__( 'Image', 'essential-classy-addons-for-elementor' ),
				),
			)
		);
		$repeater->add_control(
			'hbIcon',
			array(
				'label'     => esc_html__( 'Icon', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::ICONS,
				'default'   => array(
					'value'   => 'fas fa-plus',
					'library' => 'solid',
				),
				'condition' => array(
					'hbIconImage' => 'icon',
				),
			)
		);
		$repeater->add_control(
			'hbImage',
			array(
				'label'     => esc_html__( 'Image', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::MEDIA,
				'default'   => array(
					'url' => \Elementor\Utils::get_placeholder_image_src(),
				),
				'condition' => array(
					'hbIconImage' => 'image',
				),
			)
		);
		$repeater->add_control(
			'hbTitle',
			array(
				'label'       => esc_html__( 'Title', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'default'     => esc_html__( 'Title', 'essential-classy-addons-for-elementor' ),
				'dynamic'     => array(
					'active' => true,
				),
				'label_block' => true,
			)
		);
		$repeater->add_control(
			'hbTitleLink',
			array(
				'label'       => esc_html__( 'Link', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::URL,
				'dynamic'     => array( 'active' => true ),
				'placeholder' => esc_html__( '#', 'essential-classy-addons-for-elementor' ),
			)
		);
		$repeater->add_control(
			'hbContent',
			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,
				),
			)
		);
		$repeater->add_control(
			'hbButtonText',
			array(
				'label'       => esc_html__( 'Text', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'dynamic'     => array( 'active' => true ),
				'default'     => esc_html__( 'Click Here', 'essential-classy-addons-for-elementor' ),
				'placeholder' => esc_html__( 'Enter Text', 'essential-classy-addons-for-elementor' ),
			)
		);
		$repeater->add_control(
			'hbButtonLink',
			array(
				'label'       => esc_html__( 'Link', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::URL,
				'dynamic'     => array( 'active' => true ),
				'placeholder' => esc_html__( '#', 'essential-classy-addons-for-elementor' ),
				'default'     => array(
					'url' => '#',
				),
			)
		);
		$this->add_control(
			'hbItems',
			array(
				'label'       => '',
				'type'        => Controls_Manager::REPEATER,
				'fields'      => $repeater->get_controls(),
				'default'     => array(
					array(
						'hbTitle'    => esc_html__( 'Title #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(
						'hbTitle'    => esc_html__( 'Title #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' ),
					),
					array(
						'hbTitle'    => esc_html__( 'Title #3', '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' => '{{{ hbTitle }}}',
			)
		);
		$this->end_controls_section();

		/*content sorting start*/
		$this->start_controls_section(
			'contentSortngSection',
			array(
				'label' => esc_html__( 'Content Sortng', 'essential-classy-addons-for-elementor' ),
			)
		);
		$repeaterSort = new \Elementor\Repeater();
		$repeaterSort->add_control(
			'sortingfield',
			array(
				'label'   => esc_html__( 'Select', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'iconImage',
				'options' => array(
					'iconImage' => esc_html__( 'Icon/Image', 'essential-classy-addons-for-elementor' ),
					'title'     => esc_html__( 'Title', 'essential-classy-addons-for-elementor' ),
					'content'   => esc_html__( 'Content', 'essential-classy-addons-for-elementor' ),
					'button'    => esc_html__( 'Button', 'essential-classy-addons-for-elementor' ),
				),
			)
		);
		$this->add_control(
			'hbSort',
			array(
				'label'       => esc_html__( 'Sortable', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::REPEATER,
				'default'     => array(
					array(
						'sortingfield' => 'iconImage',
					),
					array(
						'sortingfield' => 'title',
					),
					array(
						'sortingfield' => 'content',
					),
					array(
						'sortingfield' => 'button',
					),
				),
				'fields'      => $repeaterSort->get_controls(),
				'title_field' => '{{{ sortingfield }}}',
			)
		);
		$this->end_controls_section();
		/*content sorting end*/

		/*content animaion start*/
		$this->start_controls_section(
			'contentAnimationSection',
			array(
				'label' => esc_html__( 'Content Animation', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'hbIconAnimation',
			array(
				'label'   => esc_html__( 'Icon', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'top_to_bottom',
				'options' => array(
					'none'          => esc_html__( 'None', 'essential-classy-addons-for-elementor' ),
					'top_to_bottom' => esc_html__( 'Top to Bottom', 'essential-classy-addons-for-elementor' ),
					'bottom_to_top' => esc_html__( 'Bottom to Top', 'essential-classy-addons-for-elementor' ),
				),
			)
		);
		$this->add_control(
			'hbTitleAnimation',
			array(
				'label'   => esc_html__( 'Title', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'none',
				'options' => array(
					'none'          => esc_html__( 'None', 'essential-classy-addons-for-elementor' ),
					'top_to_bottom' => esc_html__( 'Top to Bottom', 'essential-classy-addons-for-elementor' ),
					'bottom_to_top' => esc_html__( 'Bottom to Top', 'essential-classy-addons-for-elementor' ),
				),
			)
		);
		$this->add_control(
			'hbContentAnimation',
			array(
				'label'   => esc_html__( 'Content', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'none',
				'options' => array(
					'none'          => esc_html__( 'None', 'essential-classy-addons-for-elementor' ),
					'top_to_bottom' => esc_html__( 'Top to Bottom', 'essential-classy-addons-for-elementor' ),
					'bottom_to_top' => esc_html__( 'Bottom to Top', 'essential-classy-addons-for-elementor' ),
				),
			)
		);
		$this->add_control(
			'hbButtonAnimation',
			array(
				'label'   => esc_html__( 'Button', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'none',
				'options' => array(
					'none'          => esc_html__( 'None', 'essential-classy-addons-for-elementor' ),
					'top_to_bottom' => esc_html__( 'Top to Bottom', 'essential-classy-addons-for-elementor' ),
					'bottom_to_top' => esc_html__( 'Bottom to Top', 'essential-classy-addons-for-elementor' ),
				),
			)
		);
		$this->end_controls_section();
		/*content animaion end*/

		/*content visibility start*/
		$this->start_controls_section(
			'contentVisibilitySection',
			array(
				'label' => esc_html__( 'Content Visibility', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->start_controls_tabs( 'tabConVis' );
		$this->start_controls_tab(
			'tabConVisN',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'ConVisIconImage',
			array(
				'label'     => __( 'Icon/Image', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::NUMBER,
				'min'       => 0,
				'max'       => 1,
				'step'      => 0.1,
				'default'   => 0,
				'selectors' => array(
					'{{WRAPPER}} .eca-hb-wrapper .eca-hb-icon-image' => 'opacity:{{VALUE}};',
				),
			)
		);
		$this->add_control(
			'ConVisTitle',
			array(
				'label'     => __( 'Title', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::NUMBER,
				'min'       => 0,
				'max'       => 1,
				'step'      => 0.1,
				'default'   => 1,
				'selectors' => array(
					'{{WRAPPER}} .eca-hb-wrapper .eca-hb-title' => 'opacity:{{VALUE}};',
				),
			)
		);
		$this->add_control(
			'ConVisContent',
			array(
				'label'     => __( 'Content', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::NUMBER,
				'min'       => 0,
				'max'       => 1,
				'step'      => 0.1,
				'default'   => 0,
				'selectors' => array(
					'{{WRAPPER}} .eca-hb-wrapper .eca-hb-content' => 'opacity:{{VALUE}};',
				),
			)
		);
		$this->add_control(
			'ConVisButton',
			array(
				'label'     => __( 'Button', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::NUMBER,
				'min'       => 0,
				'max'       => 1,
				'step'      => 0.1,
				'default'   => 0,
				'selectors' => array(
					'{{WRAPPER}} .eca-hb-wrapper .eca-hb-button-wrapper' => 'opacity:{{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabConVisH',
			array(
				'label' => esc_html__( 'Hover', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'ConVisIconImageH',
			array(
				'label'     => __( 'Icon/Image', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::NUMBER,
				'min'       => 0,
				'max'       => 1,
				'step'      => 0.1,
				'default'   => 1,
				'selectors' => array(
					'{{WRAPPER}} .eca-hb-wrapper:hover .eca-hb-icon-image' => 'opacity:{{VALUE}};',
				),
			)
		);
		$this->add_control(
			'ConVisTitleH',
			array(
				'label'     => __( 'Title', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::NUMBER,
				'min'       => 0,
				'max'       => 1,
				'step'      => 0.1,
				'default'   => 1,
				'selectors' => array(
					'{{WRAPPER}} .eca-hb-wrapper:hover .eca-hb-title' => 'opacity:{{VALUE}};',
				),
			)
		);
		$this->add_control(
			'ConVisContentH',
			array(
				'label'     => __( 'Content', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::NUMBER,
				'min'       => 0,
				'max'       => 1,
				'step'      => 0.1,
				'default'   => 1,
				'selectors' => array(
					'{{WRAPPER}} .eca-hb-wrapper:hover .eca-hb-content' => 'opacity:{{VALUE}};',
				),
			)
		);
		$this->add_control(
			'ConVisButtonH',
			array(
				'label'     => __( 'Button', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::NUMBER,
				'min'       => 0,
				'max'       => 1,
				'step'      => 0.1,
				'default'   => 1,
				'selectors' => array(
					'{{WRAPPER}} .eca-hb-wrapper:hover .eca-hb-button-wrapper' => 'opacity:{{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->add_control(
			'ContentTransition',
			array(
				'label'       => esc_html__( 'Transition css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'default'     => 'all .3s linear',
				'placeholder' => esc_html__( 'all .3s linear', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .eca-hover-background-wrapper i,
					{{WRAPPER}} .eca-hover-background-wrapper svg,
					{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-icon-image,
					{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-content,
					{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-button-wrapper,
					{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-wrapper .eca-hb-title' => 'transition:{{VALUE}};',
				),
			)
		);

		$this->start_controls_tabs( 'tabTransform' );
		$this->start_controls_tab(
			'tabTransformsN',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'ContentTransformttb',
			array(
				'label'       => esc_html__( 'Transform css Top to Bottom', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'default'     => 'translateY(-35px)',
				'placeholder' => esc_html__( 'translateY(-35px)', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-icon-image.top_to_bottom,
					{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-title.top_to_bottom,
					{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-content.top_to_bottom,
					{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-button-wrapper.top_to_bottom' => 'transform: {{VALUE}};-ms-transform: {{VALUE}};-moz-transform: {{VALUE}};-webkit-transform: {{VALUE}};',
				),
			)
		);
		$this->add_control(
			'ContentTransformbtt',
			array(
				'label'       => esc_html__( 'Transform css Bottom to Top', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'default'     => 'translateY(35px)',
				'placeholder' => esc_html__( 'translateY(35px)', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-icon-image.bottom_to_top,
					{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-title.bottom_to_top,
					{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-content.bottom_to_top,
					{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-button-wrapper.bottom_to_top' => 'transform: {{VALUE}};-ms-transform: {{VALUE}};-moz-transform: {{VALUE}};-webkit-transform: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabTransformH',
			array(
				'label' => esc_html__( 'Hover', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'ContentTransformH',
			array(
				'label'       => esc_html__( 'Transform css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'default'     => 'translateY(0)',
				'placeholder' => esc_html__( 'translateY(-35px)', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-wrapper:hover .eca-hb-icon-image,
					{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-wrapper:hover .eca-hb-title,
					{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-wrapper:hover .eca-hb-content,
					{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-wrapper:hover .eca-hb-button-wrapper' => 'transform: {{VALUE}};-ms-transform: {{VALUE}};-moz-transform: {{VALUE}};-webkit-transform: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();
		/*content visibility end*/

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

		/*icon style start*/
		$this->start_controls_section(
			'sectionIconStyling',
			array(
				'label' => esc_html__( 'Icon', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'hbiPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-hb-wrapper .eca-hb-icon-image.icon' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'hbiMargin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-hb-wrapper .eca-hb-icon-image.icon' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'hbiIconSize',
			array(
				'label'      => esc_html__( 'Icon Size', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 300,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 20,
				),
				'selectors'  => array(
					'{{WRAPPER}} .eca-hb-wrapper .eca-hb-icon-image i' => 'font-size: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .eca-hb-wrapper .eca-hb-icon-image svg' => 'width: {{SIZE}}{{UNIT}};height: {{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->start_controls_tabs( 'tabshbiStyle' );
		$this->start_controls_tab(
			'tabhbiN',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'hbiColor',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-hb-wrapper .eca-hb-icon-image i' => 'color: {{VALUE}};',
					'{{WRAPPER}} .eca-hb-wrapper .eca-hb-icon-image svg' => 'fill: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'hbiBackground',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-hb-wrapper .eca-hb-icon-image.icon',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'hbiBorder',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-hb-wrapper .eca-hb-icon-image.icon',
			)
		);
		$this->add_responsive_control(
			'hbiBr',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-hb-wrapper .eca-hb-icon-image.icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'hbiShadow',
				'selector' => '{{WRAPPER}} .eca-hb-wrapper .eca-hb-icon-image.icon',
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabhbiH',
			array(
				'label' => esc_html__( 'Hover', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'hbiColorH',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-hb-wrapper .eca-hb-icon-image:hover i' => 'color: {{VALUE}};',
					'{{WRAPPER}} .eca-hb-wrapper .eca-hb-icon-image:hover svg' => 'fill: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'hbiBackgroundH',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-hb-wrapper .eca-hb-icon-image.icon:hover',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'hbiBorderH',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-hb-wrapper .eca-hb-icon-image.icon:hover',
			)
		);
		$this->add_responsive_control(
			'hbiBrH',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-hb-wrapper .eca-hb-icon-image.icon:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'hbiShadowH',
				'selector' => '{{WRAPPER}} .eca-hb-wrapper .eca-hb-icon-image.icon:hover',
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();
		/*icon style end*/

		/*image style start*/
		$this->start_controls_section(
			'sectionImageStyling',
			array(
				'label' => esc_html__( 'Image', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'hbimgPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-wrapper .eca-hb-icon-image.imagewrap' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'hbimgMargin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-wrapper .eca-hb-icon-image.imagewrap' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'hbimgSize',
			array(
				'label'      => esc_html__( 'Image Size', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 300,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-wrapper .eca-hb-icon-image.imagewrap' => 'width: {{SIZE}}{{UNIT}};height: {{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->start_controls_tabs( 'tabshbimgStyle' );
		$this->start_controls_tab(
			'tabhbimgN',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'hbimgBackground',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-wrapper .eca-hb-icon-image.imagewrap',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'hbimgBorder',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-wrapper .eca-hb-icon-image.imagewrap',
			)
		);
		$this->add_responsive_control(
			'hbimgBr',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-wrapper .eca-hb-icon-image.imagewrap' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'hbimgShadow',
				'selector' => '{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-wrapper .eca-hb-icon-image.imagewrap',
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabhbimgH',
			array(
				'label' => esc_html__( 'Hover', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'hbimgBackgroundH',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-wrapper .eca-hb-icon-image.imagewrap:hover',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'hbimgBorderH',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-wrapper .eca-hb-icon-image.imagewrap:hover',
			)
		);
		$this->add_responsive_control(
			'hbimgBrH',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-wrapper .eca-hb-icon-image.imagewrap:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'hbimgShadowH',
				'selector' => '{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-wrapper .eca-hb-icon-image.imagewrap:hover',
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();

		$this->add_control(
			'mask_shape_image',
			array(
				'label'     => esc_html__( 'Mask Image', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::MEDIA,
				'separator' => 'before',
				'selectors' => array(
					'{{WRAPPER}} .eca-hb-icon-image.image' => 'mask-image: url({{URL}});-webkit-mask-image: url({{URL}});-webkit-mask-size: 100% 100%;-webkit-mask-repeat: no-repeat;',
				),
			)
		);
		$this->end_controls_section();
		/*image style end*/

		/*icon image box masking start*/
		$this->start_controls_section(
			'sectionIconImageStyling',
			array(
				'label' => esc_html__( 'Icon/Image Box Masking', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_control(
			'maskShapeIconImage',
			array(
				'label'     => esc_html__( 'Mask Image', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::MEDIA,
				'selectors' => array(
					'{{WRAPPER}} .eca-hb-icon-image' => 'mask-image: url({{URL}});-webkit-mask-image: url({{URL}});-webkit-mask-size: 100% 100%;-webkit-mask-repeat: no-repeat;',
				),
			)
		);
		$this->end_controls_section();
		/*icon image box masking style end*/

		/*title style start*/
		$this->start_controls_section(
			'sectionTitleStyling',
			array(
				'label' => esc_html__( 'Title', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'hbtPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-wrapper .eca-hb-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'hbtMargin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-wrapper .eca-hb-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'hbtTypography',
				'selector' => '{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-wrapper .eca-hb-title',
			)
		);
		$this->start_controls_tabs( 'tabshbtStyle' );
		$this->start_controls_tab(
			'tabhbtN',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'hbtColor',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-wrapper .eca-hb-title' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'hbtBackground',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-wrapper .eca-hb-title',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'hbtBorder',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-wrapper .eca-hb-title',
			)
		);
		$this->add_responsive_control(
			'hbtBr',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-wrapper .eca-hb-title' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'hbtShadow',
				'selector' => '{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-wrapper .eca-hb-title',
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabhbtH',
			array(
				'label' => esc_html__( 'Hover', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'hbtColorH',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-wrapper .eca-hb-title:hover' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'hbtBackgroundH',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-wrapper .eca-hb-title:hover',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'hbtBorderH',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-wrapper .eca-hb-title:hover',
			)
		);
		$this->add_responsive_control(
			'hbtBrH',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-wrapper .eca-hb-title:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'hbtShadowH',
				'selector' => '{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-wrapper .eca-hb-title:hover',
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();
		/*title style end*/

		/*desciption style start*/
		$this->start_controls_section(
			'sectionDesciptionStyling',
			array(
				'label' => esc_html__( 'Desciption', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'hbdPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'hbdMargin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-content' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_control(
			'hbdWordBreak',
			array(
				'label'     => esc_html__( 'Word Break', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'break-all',
				'options'   => array(
					'keep-all'  => esc_html__( 'keep-all', 'essential-classy-addons-for-elementor' ),
					'break-all' => esc_html__( 'break-all', 'essential-classy-addons-for-elementor' ),
				),
				'selectors' => array(
					'{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-content,{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-content p' => 'word-break: {{VALUE}};',
				),
			)
		);
		$this->add_responsive_control(
			'hbdAlign',
			array(
				'label'     => esc_html__( 'Alignment', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => array(
					'left'    => array(
						'title' => esc_html__( 'Left', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-left',
					),
					'center'  => array(
						'title' => esc_html__( 'Center', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-center',
					),
					'right'   => array(
						'title' => esc_html__( 'Right', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-right',
					),
					'justify' => array(
						'title' => esc_html__( 'Justify', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-h-align-stretch',
					),
				),
				'selectors' => array(
					'{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-content,{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-content p' => 'text-align:{{VALUE}};',
				),
			)
		);
		$this->add_responsive_control(
			'hbdSize',
			array(
				'label'      => esc_html__( 'Max. Width', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 500,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-content' => 'max-width: {{SIZE}}{{UNIT}};',
				),
			)
		);
			$this->add_responsive_control(
				'hbdMinHeight',
				array(
					'label'      => esc_html__( 'Min. Height', 'essential-classy-addons-for-elementor' ),
					'type'       => Controls_Manager::SLIDER,
					'size_units' => array( 'px' ),
					'range'      => array(
						'px' => array(
							'min' => 1,
							'max' => 500,
						),
					),
					'selectors'  => array(
						'{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-content' => 'min-height: {{SIZE}}{{UNIT}};',
					),
				)
			);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'hbdTypography',
				'selector' => '{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-content,{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-content p',
			)
		);
		$this->start_controls_tabs( 'tabshbdStyle' );
		$this->start_controls_tab(
			'tabhbdN',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'hbdColor',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-content,{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-content p' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'hbdBackground',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-content',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'hbdBorder',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-content',
			)
		);
		$this->add_responsive_control(
			'hbdBr',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-content' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'hbdShadow',
				'selector' => '{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-content',
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabhbdH',
			array(
				'label' => esc_html__( 'Hover', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'hbdColorH',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-content,{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-content p' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'hbdBackgroundH',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-content',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'hbdBorderH',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-content',
			)
		);
		$this->add_responsive_control(
			'hbdBrH',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-content' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'hbdShadowH',
				'selector' => '{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-content',
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();
		/*desciption style end*/

		/*button style start*/
		$this->start_controls_section(
			'sectionButtonStyling',
			array(
				'label' => esc_html__( 'Button', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'hbbPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-button-wrapper' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'hbbMargin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-button-wrapper' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'hbbTypography',
				'selector' => '{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-button-wrapper',
			)
		);
		$this->start_controls_tabs( 'tabshbbStyle' );
		$this->start_controls_tab(
			'tabhbbN',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'hbbColorN',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-button-wrapper' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'      => 'hbbBackgroundN',
				'types'     => array( 'classic', 'gradient' ),
				'selector'  => '{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-button-wrapper',
				'condition' => array(
					'buttonHoverEffectH!' => 'yes',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'hbbBorderN',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-button-wrapper',
			)
		);
		$this->add_responsive_control(
			'hbbBrN',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-button-wrapper' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'hbbShadowN',
				'selector' => '{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-button-wrapper',
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabhbbH',
			array(
				'label' => esc_html__( 'Hover', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'buttonHoverEffectH',
			array(
				'label'     => esc_html__( 'Hover Effect', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::SWITCHER,
				'label_on'  => esc_html__( 'Enable', 'essential-classy-addons-for-elementor' ),
				'label_off' => esc_html__( 'Disable', 'essential-classy-addons-for-elementor' ),
				'default'   => 'no',
			)
		);
		$this->add_control(
			'buttonEffectPosH',
			array(
				'label'     => esc_html__( 'Position', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => '',
				'options'   => array(
					''                              => esc_html__( 'Bottom', 'essential-classy-addons-for-elementor' ),
					'eca-button-hover-effect-top'   => esc_html__( 'Top', 'essential-classy-addons-for-elementor' ),
					'eca-button-hover-effect-left'  => esc_html__( 'Left', 'essential-classy-addons-for-elementor' ),
					'eca-button-hover-effect-right' => esc_html__( 'Right', 'essential-classy-addons-for-elementor' ),
				),
				'condition' => array(
					'buttonHoverEffectH' => 'yes',
				),
			)
		);
		$this->add_control(
			'hbbColorH',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-wrapper a.eca-hb-button-wrapper:hover' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'      => 'hbbBackgroundH',
				'types'     => array( 'classic', 'gradient' ),
				'selector'  => '{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-wrapper a.eca-hb-button-wrapper:hover',
				'condition' => array(
					'buttonHoverEffectH!' => 'yes',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'      => 'bBgEffectHover',
				'types'     => array( 'classic', 'gradient' ),
				'selector'  => '{{WRAPPER}} .eca-button-hover-effect:hover:after',
				'condition' => array(
					'buttonHoverEffectH' => 'yes',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'hbbBorderH',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-wrapper a.eca-hb-button-wrapper:hover',
			)
		);
		$this->add_responsive_control(
			'hbbBrH',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-wrapper a.eca-hb-button-wrapper:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'hbbShadowH',
				'selector' => '{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-wrapper a.eca-hb-button-wrapper:hover',
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabhbbBH',
			array(
				'label' => esc_html__( 'Box Hover', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'hbbColorBH',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-wrapper:hover .eca-hb-button-wrapper' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'      => 'hbbBackgroundBH',
				'types'     => array( 'classic', 'gradient' ),
				'selector'  => '{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-wrapper:hover .eca-hb-button-wrapper',
				'condition' => array(
					'buttonHoverEffectH!' => 'yes',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'hbbBorderBH',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-wrapper:hover .eca-hb-button-wrapper',
			)
		);
		$this->add_responsive_control(
			'hbbBrBH',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-wrapper:hover .eca-hb-button-wrapper' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'hbbShadowBH',
				'selector' => '{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-wrapper:hover .eca-hb-button-wrapper',
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();
		/*button style end*/

		/*loop style start*/
		$this->start_controls_section(
			'sectionLoopStyling',
			array(
				'label' => esc_html__( 'Loop', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'loopPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-wrapper' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'loopContentAlign',
			array(
				'label'     => esc_html__( 'Content Alignment', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => array(
					'flex-start' => array(
						'title' => esc_html__( 'Left', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-left',
					),
					'center'     => array(
						'title' => esc_html__( 'Center', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-center',
					),
					'flex-end'   => array(
						'title' => esc_html__( 'Right', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-right',
					),
				),
				'default'   => 'center',
				'selectors' => array(
					'{{WRAPPER}} .eca-hover-background-wrapper .eca-hb-wrapper' => 'align-items:{{VALUE}};',
				),
			)
		);

		$this->add_control(
			'forceVerticalMobile',
			array(
				'label'     => esc_html__( 'Vertical In Mobile', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::SWITCHER,
				'default'   => 'no',
				'label_on'  => esc_html__( 'Enable', 'essential-classy-addons-for-elementor' ),
				'label_off' => esc_html__( 'Disable', 'essential-classy-addons-for-elementor' ),
				'separator' => 'before',
			)
		);
		$this->end_controls_section();
		/*loop style end*/

		/*box style start*/
		$this->start_controls_section(
			'sectionBoxStyling',
			array(
				'label' => esc_html__( 'Box', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_control(
			'boxOverlay',
			array(
				'label'     => esc_html__( 'Overlay Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-hover-background-wrapper' => 'background: {{VALUE}};',
				),
			)
		);
		$this->add_control(
			'boxBlur',
			array(
				'label'      => esc_html__( 'Blur', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'max'  => 100,
						'min'  => 1,
						'step' => 1,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .eca-hover-background-wrapper' => '-webkit-backdrop-filter:  blur({{boxBlur.SIZE}}{{boxBlur.UNIT}});backdrop-filter:blur({{boxBlur.SIZE}}{{boxBlur.UNIT}});',
				),
			)
		);
		$this->add_responsive_control(
			'loopMinHeight',
			array(
				'label'      => esc_html__( 'Loop Min. Height', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 800,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .eca-hover-background-wrapper' => 'min-height: {{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->end_controls_section();
		/*button style end*/
	}

	protected function render() {

		$settings            = $this->get_settings_for_display();
		$hbIconAnimation     = ! empty( $settings['hbIconAnimation'] ) ? $settings['hbIconAnimation'] : '';
		$hbTitleAnimation    = ! empty( $settings['hbTitleAnimation'] ) ? $settings['hbTitleAnimation'] : '';
		$hbContentAnimation  = ! empty( $settings['hbContentAnimation'] ) ? $settings['hbContentAnimation'] : '';
		$hbButtonAnimation   = ! empty( $settings['hbButtonAnimation'] ) ? $settings['hbButtonAnimation'] : '';
		$forceVerticalMobile = ( isset( $settings['forceVerticalMobile'] ) && ! empty( $settings['forceVerticalMobile'] ) ) ? $settings['forceVerticalMobile'] : '';

		$forceVerticalMobileClass = '';
		if ( ! empty( $forceVerticalMobile ) && $forceVerticalMobile == 'yes' ) {
			$forceVerticalMobileClass = 'ec-hb-fvm';
		}

		$output = '';
		if ( ! empty( $settings['hbItems'] ) ) {
			$output .= '<div class="eca-hover-background-wrapper ' . esc_attr( $forceVerticalMobileClass ) . '">';
			foreach ( $settings['hbItems'] as $index => $item ) {

				$hbIconImage = ! empty( $item['hbIconImage'] ) ? $item['hbIconImage'] : 'icon';
				$bh_icon     = '';
				if ( $hbIconImage ) {
					if ( ! empty( $item['hbIcon'] ) && $hbIconImage == 'icon' ) {
						ob_start();
						\Elementor\Icons_Manager::render_icon( $item['hbIcon'], array( 'aria-hidden' => 'true' ) );
						$icons_loop = ob_get_contents();
						ob_end_clean();

						if ( ! empty( $icons_loop ) ) {
							$bh_icon .= '<div class="eca-hb-icon-image ' . esc_attr( $hbIconAnimation ) . '"><span class="eca-hb-icon-image icon">' . $icons_loop . '</span></div>';
						}
					}

					if ( ! empty( $item['hbImage']['id'] ) && $hbIconImage == 'image' ) {
						$image_id  = $item['hbImage']['id'];
						$image_src = wp_get_attachment_image_src( $image_id, 'full' );

						$bh_icon .= '<div class="eca-hb-icon-image imagewrap ' . esc_attr( $hbIconAnimation ) . '"><img src="' . esc_url( $image_src[0] ) . '" class="eca-hb-icon-image image"></div>';
					}
				}

				$hbTitle  = ! empty( $item['hbTitle'] ) ? $item['hbTitle'] : '';
				$hb_title = '';
				if ( ! empty( $hbTitle ) ) {
					if ( ! empty( $item['hbTitleLink']['url'] ) ) {
						$hb_title = '<a href=' . esc_url( $item['hbTitleLink']['url'] ) . ' class="eca-hb-title ' . esc_attr( $hbTitleAnimation ) . '">' . esc_html( $hbTitle ) . '</a>';
					} else {
						$hb_title = '<div class="eca-hb-title ' . esc_attr( $hbTitleAnimation ) . '">' . esc_html( $hbTitle ) . '</div>';
					}
				}

				$hbContent  = ! empty( $item['hbContent'] ) ? $item['hbContent'] : '';
				$hb_content = '';
				if ( ! empty( $hbContent ) ) {
					$hb_content = '<div class="eca-hb-content ' . esc_attr( $hbContentAnimation ) . '">' . wp_kses_post( $hbContent ) . '</div>';
				}

				$hb_button    = '';
				$hbButtonText = ! empty( $item['hbButtonText'] ) ? $item['hbButtonText'] : '';
				$hbButtonLink = ! empty( $item['hbButtonLink']['url'] ) ? esc_url( $item['hbButtonLink']['url'] ) : '';
				if ( $hbButtonText ) {
					$buttonHoverEffectH = ( isset( $settings['buttonHoverEffectH'] ) && $settings['buttonHoverEffectH'] == 'yes' ) ? 'eca-button-hover-effect ' . esc_attr( $settings['buttonEffectPosH'] ) : '';
					$hb_button          = '<a class="eca-hb-button-wrapper ' . esc_attr( $hbButtonAnimation ) . ' ' . esc_attr( $buttonHoverEffectH ) . '" href="' . esc_url( $hbButtonLink ) . '">' . esc_attr( $hbButtonText ) . '</a>';
				}

				$bh_bg_image = '';
				if ( ! empty( $item['hbBackgroundImage']['id'] ) ) {
					$image_id     = $item['hbBackgroundImage']['id'];
					$image_src    = wp_get_attachment_image_src( $image_id, 'full' );
					$bh_bg_image .= $image_src[0];
				} else {
					$bh_bg_image .= $item['hbBackgroundImage']['url'];
				}

				$output .= '<div class="eca-hb-wrapper" data-bgimage=' . esc_url( $bh_bg_image ) . '>';
				$hbSort  = $settings['hbSort'];
				if ( ! empty( $hbSort ) ) {
					$indexSort = 0;
					foreach ( $hbSort as $indexSort => $itemSort ) {
						if ( ! empty( $itemSort['sortingfield'] ) && $itemSort['sortingfield'] == 'iconImage' ) {
							$output .= $bh_icon;
						}

						if ( ! empty( $itemSort['sortingfield'] ) && $itemSort['sortingfield'] == 'title' ) {
							$output .= $hb_title;
						}

						if ( ! empty( $itemSort['sortingfield'] ) && $itemSort['sortingfield'] == 'content' ) {
							$output .= $hb_content;
						}

						if ( ! empty( $itemSort['sortingfield'] ) && $itemSort['sortingfield'] == 'button' ) {
							$output .= $hb_button;
						}
						++$indexSort;
					}
				}
				$output .= '</div>';
			}
			$output .= '</div>';
		}

		echo wp_kses_normalize_entities( $output );
	}
}
