<?php
namespace EcafeAddons\Widgets;

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

use EcafeAddons\EcafeElementLoad;

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

class Ecafe_Flipbox extends Widget_Base {

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

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

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

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

	public function get_keywords() {
		return array( 'flipbox', 'flip box', 'flip info', 'info flip', 'front', 'front back', 'card', 'hover card', 'card effect', 'hover effect' );
	}

	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__( 'Flipbox', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);
		$this->add_control(
			'contentLayout',
			array(
				'label'   => esc_html__( 'Layout', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'layout1',
				'options' => array(
					'layout1'  => esc_html__( 'Layout 1', 'essential-classy-addons-for-elementor' ),
					'layout2'  => esc_html__( 'Layout 2', 'essential-classy-addons-for-elementor' ),
					'layout3'  => esc_html__( 'Layout 3', 'essential-classy-addons-for-elementor' ),
					'layout4'  => esc_html__( 'Layout 4', 'essential-classy-addons-for-elementor' ),
					'layout5'  => esc_html__( 'Layout 5', 'essential-classy-addons-for-elementor' ),
					'layout6'  => esc_html__( 'Layout 6', 'essential-classy-addons-for-elementor' ),
					'layout7'  => esc_html__( 'Layout 7', 'essential-classy-addons-for-elementor' ),
					'layout8'  => esc_html__( 'Layout 8', 'essential-classy-addons-for-elementor' ),
					'layout9'  => esc_html__( 'Layout 9', 'essential-classy-addons-for-elementor' ),
					'layout10' => esc_html__( 'Layout 10', 'essential-classy-addons-for-elementor' ),
					'layout11' => esc_html__( 'Layout 11', 'essential-classy-addons-for-elementor' ),
					'layout12' => esc_html__( 'Layout 12', 'essential-classy-addons-for-elementor' ),
					'layout13' => esc_html__( 'Layout 13', 'essential-classy-addons-for-elementor' ),
					'layout14' => esc_html__( 'Layout 14', 'essential-classy-addons-for-elementor' ),
					'layout15' => esc_html__( 'Layout 15', 'essential-classy-addons-for-elementor' ),
					'layout16' => esc_html__( 'Layout 16', 'essential-classy-addons-for-elementor' ),
					'layout17' => esc_html__( 'Layout 17', 'essential-classy-addons-for-elementor' ),
					'layout18' => esc_html__( 'Layout 18', 'essential-classy-addons-for-elementor' ),
					'layout19' => esc_html__( 'Layout 19', 'essential-classy-addons-for-elementor' ),
					'layout20' => esc_html__( 'Layout 20', 'essential-classy-addons-for-elementor' ),
					'layout21' => esc_html__( 'Layout 21', 'essential-classy-addons-for-elementor' ),
					'layout22' => esc_html__( 'Layout 22', 'essential-classy-addons-for-elementor' ),
					'layout23' => esc_html__( 'Layout 23', 'essential-classy-addons-for-elementor' ),
					'layout24' => esc_html__( 'Layout 24', 'essential-classy-addons-for-elementor' ),
					'layout25' => esc_html__( 'Layout 25', 'essential-classy-addons-for-elementor' ),
				),
			)
		);
		$this->start_controls_tabs( 'tabsFlipbox' );
		$this->start_controls_tab(
			'tabFlipboxFront',
			array(
				'label' => esc_html__( 'Front', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'iconImage',
			array(
				'label'   => esc_html__( 'Type', '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' ),
				),
			)
		);
		$this->add_control(
			'iconLibrary',
			array(
				'label'     => esc_html__( 'Icon', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::ICONS,
				'default'   => array(
					'value'   => 'fas fa-star',
					'library' => 'solid',
				),
				'condition' => array(
					'iconImage' => 'icon',
				),
			)
		);
		$this->add_control(
			'imageSelect',
			array(
				'label'      => esc_html__( 'Image', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::MEDIA,
				'media_type' => 'image',
				'dynamic'    => array(
					'active' => true,
				),
				'condition'  => array(
					'iconImage' => 'image',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Image_Size::get_type(),
			array(
				'name'      => 'imageSelectThumbnail',
				'default'   => 'full',
				'exclude'   => array( 'custom' ),
				'condition' => array(
					'iconImage' => 'image',
				),
			)
		);
		$this->add_control(
			'flipboxTitle',
			array(
				'label'       => esc_html__( 'Title', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'dynamic'     => array( 'active' => true ),
				'default'     => esc_html__( 'Title', 'essential-classy-addons-for-elementor' ),
				'placeholder' => esc_html__( 'Enter Title', 'essential-classy-addons-for-elementor' ),
				'separator'   => 'before',
			)
		);
		$this->add_control(
			'flipboxTitleTag',
			array(
				'label'   => esc_html__( 'Title Tag', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'h1',
				'options' => \EcafeHelper::getHtmlTag(),
			)
		);
		$this->add_control(
			'flipboxSubTitle',
			array(
				'label'       => esc_html__( 'Sub Title', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'dynamic'     => array( 'active' => true ),
				'default'     => esc_html__( 'Sub Title', 'essential-classy-addons-for-elementor' ),
				'placeholder' => esc_html__( 'Enter Title', 'essential-classy-addons-for-elementor' ),
				'separator'   => 'before',
			)
		);
		$this->add_control(
			'flipboxSubTitleTag',
			array(
				'label'   => esc_html__( 'Sub Title Tag', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'h2',
				'options' => \EcafeHelper::getHtmlTag(),
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabFlipboxBack',
			array(
				'label' => esc_html__( 'Back', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'flipboxDesc',
			array(
				'label'       => esc_html__( 'Description', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::WYSIWYG,
				'default'     => esc_html__( 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.', 'essential-classy-addons-for-elementor' ),
				'placeholder' => esc_html__( 'Enter your Description', 'essential-classy-addons-for-elementor' ),
				'dynamic'     => array( 'active' => true ),
				'separator'   => 'before',
			)
		);
		$this->add_control(
			'buttonText',
			array(
				'label'       => esc_html__( 'Button 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' ),
				'separator'   => 'before',
			)
		);
		$this->add_control(
			'buttonLink',
			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(
			'buttonLinkBox',
			array(
				'label'     => esc_html__( 'Box Link', '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->end_controls_tab();
		$this->end_controls_tabs();

		$this->add_responsive_control(
			'transitionSpeed',
			array(
				'label'      => esc_html__( 'Transition Speed(ms)', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 100,
						'max' => 2000,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 500,
				),
				'selectors'  => array(
					'{{WRAPPER}}  .ec-flipbox-wrapper .ec-flipbox-wrap' => 'transition :all {{SIZE}}ms ease;',
				),
			)
		);
		$this->add_responsive_control(
			'boxPadding',
			array(
				'label'      => esc_html__( 'Box Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-flipbox-wrapper' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'fbminheight',
			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' => 1000,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 300,
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-flipbox-wrapper,
					{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-wrap,
					{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-front,
					{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back' => 'min-height :{{SIZE}}px;',
				),
			)
		);
		$this->add_control(
			'contentAnimation',
			array(
				'label'     => esc_html__( 'Content Animation', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::SWITCHER,
				'default'   => 'no',
				'label_on'  => esc_html__( 'Enable', 'essential-classy-addons-for-elementor' ),
				'label_off' => esc_html__( 'Disable', 'essential-classy-addons-for-elementor' ),
				'condition' => array(
					'contentLayout' => array( 'layout1', 'layout2', 'layout3', 'layout4' ),
				),
			)
		);
		$this->end_controls_section();

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

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

		/*icon start*/
		$this->start_controls_section(
			'iconStyling',
			array(
				'label'     => esc_html__( 'Icon', 'essential-classy-addons-for-elementor' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'iconImage' => 'icon',
				),
			)
		);
		$this->add_responsive_control(
			'iconPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-icon-image.eca-icon' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'iconMargin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-icon-image.eca-icon' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'iconSize',
			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' => 200,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 20,
				),
				'selectors'  => array(
					'{{WRAPPER}}  .eca-icon-image.eca-icon i:before' => 'font-size :{{SIZE}}px;',
					'{{WRAPPER}}  .eca-icon-image.eca-icon svg' => 'width:{{SIZE}}px;height:{{SIZE}}px;',
				),
			)
		);
		$this->add_control(
			'iconColorN',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .eca-icon-image.eca-icon' => 'color: {{VALUE}};',
					'{{WRAPPER}}  .eca-icon-image.eca-icon svg' => 'fill: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'iconBgN',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-icon-image.eca-icon',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'iconBorderN',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-icon-image.eca-icon',
			)
		);
		$this->add_responsive_control(
			'iconBrN',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-icon-image.eca-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'iconShadowN',
				'selector' => '{{WRAPPER}} .eca-icon-image.eca-icon',
			)
		);
		$this->add_control(
			'iconTransitionN',
			array(
				'label'       => esc_html__( 'Transition css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => esc_html__( 'all .3s linear', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .eca-icon-image.eca-icon' => 'transition:{{VALUE}};',
				),
			)
		);
		$this->add_control(
			'iconTransformN',
			array(
				'label'       => esc_html__( 'Transform css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => esc_html__( 'skew(-20deg)', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .eca-icon-image.eca-icon' => 'transform: {{VALUE}};-ms-transform: {{VALUE}};-moz-transform: {{VALUE}};-webkit-transform: {{VALUE}};',
				),
			)
		);
		$this->end_controls_section();
		/*icon end*/

		/*Image start*/
		$this->start_controls_section(
			'imageStyling',
			array(
				'label'     => esc_html__( 'Image', 'essential-classy-addons-for-elementor' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'iconImage' => 'image',
				),
			)
		);
		$this->add_responsive_control(
			'imagePadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-icon-image.eca-image' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'imageMargin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-icon-image.eca-image' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'imageMaxWidth',
			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-icon-image.eca-image' => 'max-width:{{SIZE}}{{UNIT}};',
				),
			)
		);
			$this->add_responsive_control(
				'imageMaxHeight',
				array(
					'label'      => esc_html__( 'Max 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-icon-image.eca-image' => 'max-height:{{SIZE}}{{UNIT}};',
					),
				)
			);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'imageBgN',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .eca-icon-image.eca-image',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'imageBorderN',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .eca-icon-image.eca-image',
			)
		);
		$this->add_responsive_control(
			'imageBrN',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .eca-icon-image.eca-image' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'imageShadowN',
				'selector' => '{{WRAPPER}} .eca-icon-image.eca-image',
			)
		);
		$this->add_control(
			'imageTransitionN',
			array(
				'label'       => esc_html__( 'Transition css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => esc_html__( 'all .3s linear', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .eca-icon-image.eca-image' => 'transition:{{VALUE}};',
				),
			)
		);
		$this->add_control(
			'imageTransformN',
			array(
				'label'       => esc_html__( 'Transform css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => esc_html__( 'skew(-20deg)', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .eca-icon-image.eca-image' => 'transform: {{VALUE}};-ms-transform: {{VALUE}};-moz-transform: {{VALUE}};-webkit-transform: {{VALUE}};',
				),
			)
		);
		$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-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 end*/

		/*title start*/
		$this->start_controls_section(
			'titleStyling',
			array(
				'label' => esc_html__( 'Title', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'titlePadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-front .eca-flipbox-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'titleMargin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-front .eca-flipbox-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'titleTypo',
				'selector' => '{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-front .eca-flipbox-title',
			)
		);
		$this->add_control(
			'titleColorN',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-front .eca-flipbox-title' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'titleBgN',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-front .eca-flipbox-title',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'titleBorderN',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-front .eca-flipbox-title',
			)
		);
		$this->add_responsive_control(
			'titleBrN',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-front .eca-flipbox-title' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'titleShadowN',
				'selector' => '{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-front .eca-flipbox-title',
			)
		);
		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			array(
				'name'     => 'titleTextShadowN',
				'label'    => esc_html__( 'Text Shadow', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-front .eca-flipbox-title',
			)
		);
		$this->add_control(
			'titleTransitionN',
			array(
				'label'       => esc_html__( 'Transition css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => esc_html__( 'all .3s linear', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-front .eca-flipbox-title' => 'transition:{{VALUE}};',
				),
			)
		);
		$this->add_control(
			'titleTransformN',
			array(
				'label'       => esc_html__( 'Transform css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => esc_html__( 'skew(-20deg)', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-front .eca-flipbox-title' => 'transform: {{VALUE}};-ms-transform: {{VALUE}};-moz-transform: {{VALUE}};-webkit-transform: {{VALUE}};',
				),
			)
		);
		$this->end_controls_section();
		/*title end*/

		/*subtitle start*/
		$this->start_controls_section(
			'subtitleStyling',
			array(
				'label' => esc_html__( 'Sub Title', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'subtitlePadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-front .eca-flipbox-sub-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'subtitleMargin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-front .eca-flipbox-sub-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'subtitleTypo',
				'selector' => '{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-front .eca-flipbox-sub-title',
			)
		);
		$this->add_control(
			'subtitleColorN',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-front .eca-flipbox-sub-title' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'subtitleBgN',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-front .eca-flipbox-sub-title',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'subtitleBorderN',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-front .eca-flipbox-sub-title',
			)
		);
		$this->add_responsive_control(
			'subtitleBrN',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-front .eca-flipbox-sub-title' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'subtitleShadowN',
				'selector' => '{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-front .eca-flipbox-sub-title',
			)
		);
		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			array(
				'name'     => 'subtitleTextShadowN',
				'label'    => esc_html__( 'Text Shadow', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-front .eca-flipbox-sub-title',
			)
		);
		$this->add_control(
			'subtitleTransitionN',
			array(
				'label'       => esc_html__( 'Transition css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => esc_html__( 'all .3s linear', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-front .eca-flipbox-sub-title' => 'transition:{{VALUE}};',
				),
			)
		);
		$this->add_control(
			'subtitleTransformN',
			array(
				'label'       => esc_html__( 'Transform css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => esc_html__( 'skew(-20deg)', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-front .eca-flipbox-sub-title' => 'transform: {{VALUE}};-ms-transform: {{VALUE}};-moz-transform: {{VALUE}};-webkit-transform: {{VALUE}};',
				),
			)
		);
		$this->end_controls_section();
		/*subtitle end*/

		/*back title start*/
		$this->start_controls_section(
			'backtitleStyling',
			array(
				'label' => esc_html__( 'Back Title', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'btitlePadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'btitleMargin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'btitleTypo',
				'selector' => '{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-title',
			)
		);
		$this->start_controls_tabs( 'tabsBTitletyle' );
		$this->start_controls_tab(
			'tabBTitleNorm',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'btitleColorN',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-title' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'btitleBgN',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-title',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'btitleBorderN',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-title',
			)
		);
		$this->add_responsive_control(
			'btitleBrN',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-title' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'btitleShadowN',
				'selector' => '{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-title',
			)
		);
		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			array(
				'name'     => 'btitleTextShadowN',
				'label'    => esc_html__( 'Text Shadow', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-title',
			)
		);
		$this->add_control(
			'btitleTransitionN',
			array(
				'label'       => esc_html__( 'Transition css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => esc_html__( 'all .3s linear', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-title' => 'transition:{{VALUE}};',
				),
			)
		);
		$this->add_control(
			'btitleTransformN',
			array(
				'label'       => esc_html__( 'Transform css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => esc_html__( 'skew(-20deg)', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-title' => 'transform: {{VALUE}};-ms-transform: {{VALUE}};-moz-transform: {{VALUE}};-webkit-transform: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabBTitleHover',
			array(
				'label' => esc_html__( 'Hover', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'btitleColorH',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-title:hover' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'btitleBgH',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-title:hover',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'btitleBorderH',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-title:hover',
			)
		);
		$this->add_responsive_control(
			'btitleBrHover',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-title:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'btitleShadowH',
				'selector' => '{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-title:hover',
			)
		);
		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			array(
				'name'     => 'btitleTextShadowH',
				'label'    => esc_html__( 'Text Shadow', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-title:hover',
			)
		);
		$this->add_control(
			'btitleTransitionH',
			array(
				'label'       => esc_html__( 'Transition css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => esc_html__( 'all .3s linear', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-title:hover' => 'transition:{{VALUE}};',
				),
			)
		);
		$this->add_control(
			'btitleTransformH',
			array(
				'label'       => esc_html__( 'Transform css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => esc_html__( 'skew(-20deg)', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-title:hover' => 'transform: {{VALUE}};-ms-transform: {{VALUE}};-moz-transform: {{VALUE}};-webkit-transform: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();
		/*back title end*/

		/*back desc start*/
		$this->start_controls_section(
			'descStyling',
			array(
				'label' => esc_html__( 'Description', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'descPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-desc' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'descMargin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-desc' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'descTypo',
				'selector' => '{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-desc,
				{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-desc p',
			)
		);
		$this->add_responsive_control(
			'descAlign',
			array(
				'label'     => esc_html__( 'Text 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}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-desc,
					{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-desc p' => 'text-align:{{VALUE}};',
				),
			)
		);
		$this->start_controls_tabs( 'tabsDescStyle' );
		$this->start_controls_tab(
			'tabDescNorm',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'descColorN',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-desc,
					{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-desc p' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'descBgN',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-desc',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'descBorderN',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-desc',
			)
		);
		$this->add_responsive_control(
			'descBrN',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-desc' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'descShadowN',
				'selector' => '{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-desc',
			)
		);
		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			array(
				'name'     => 'descTextShadowN',
				'label'    => esc_html__( 'Text Shadow', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-desc',
			)
		);
		$this->add_control(
			'descTransitionN',
			array(
				'label'       => esc_html__( 'Transition css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => esc_html__( 'all .3s linear', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-desc' => 'transition:{{VALUE}};',
				),
			)
		);
		$this->add_control(
			'descTransformN',
			array(
				'label'       => esc_html__( 'Transform css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => esc_html__( 'skew(-20deg)', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-desc' => 'transform: {{VALUE}};-ms-transform: {{VALUE}};-moz-transform: {{VALUE}};-webkit-transform: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabDescHover',
			array(
				'label' => esc_html__( 'Hover', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'descColorH',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-desc:hover,{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-desc:hover p' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'descBgH',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-desc:hover',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'descBorderH',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-desc:hover',
			)
		);
		$this->add_responsive_control(
			'descBrH',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-desc:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'descShadowH',
				'selector' => '{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-desc:hover',
			)
		);
		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			array(
				'name'     => 'descTextShadowH',
				'label'    => esc_html__( 'Text Shadow', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-desc:hover',
			)
		);
		$this->add_control(
			'descTransitionH',
			array(
				'label'       => esc_html__( 'Transition css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => esc_html__( 'all .3s linear', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-desc:hover' => 'transition:{{VALUE}};',
				),
			)
		);
		$this->add_control(
			'descTransformH',
			array(
				'label'       => esc_html__( 'Transform css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => esc_html__( 'skew(-20deg)', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back .eca-flipbox-desc:hover' => 'transform: {{VALUE}};-ms-transform: {{VALUE}};-moz-transform: {{VALUE}};-webkit-transform: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();
		/*back desc end*/

		/*button start*/
		$this->start_controls_section(
			'buttonStyling',
			array(
				'label' => esc_html__( 'Button', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'buttonPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .eca-flipbox-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'buttonMargin',
			array(
				'label'      => esc_html__( 'Margin', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .eca-flipbox-button' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'buttonTypography',
				'selector' => '{{WRAPPER}} .ec-flipbox-wrapper .eca-flipbox-button',
			)
		);
		$this->start_controls_tabs( 'tabsButtontyle' );
		$this->start_controls_tab(
			'tabButtonN',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_control(
			'buttonColorN',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .eca-flipbox-button' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'      => 'buttonBackgroundN',
				'types'     => array( 'classic', 'gradient' ),
				'selector'  => '{{WRAPPER}} .ec-flipbox-wrapper .eca-flipbox-button',
				'condition' => array(
					'buttonHoverEffectH!' => 'yes',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'buttonBorderN',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-flipbox-wrapper .eca-flipbox-button',
			)
		);
		$this->add_responsive_control(
			'buttonBrN',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .eca-flipbox-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'buttonShadowN',
				'selector' => '{{WRAPPER}} .ec-flipbox-wrapper .eca-flipbox-button',
			)
		);
		$this->add_control(
			'buttonTransitionN',
			array(
				'label'       => esc_html__( 'Transition css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => esc_html__( 'all .3s linear', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .eca-flipbox-button' => 'transition:{{VALUE}};',
				),
			)
		);
		$this->add_control(
			'buttonTransformN',
			array(
				'label'       => esc_html__( 'Transform css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => esc_html__( 'skew(-20deg)', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .eca-flipbox-button' => 'transform: {{VALUE}};-ms-transform: {{VALUE}};-moz-transform: {{VALUE}};-webkit-transform: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabButtonH',
			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(
			'buttonColorH',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .eca-flipbox-button:hover' => 'color: {{VALUE}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'      => 'buttonBackgroundH',
				'types'     => array( 'classic', 'gradient' ),
				'selector'  => '{{WRAPPER}} .ec-flipbox-wrapper .eca-flipbox-button: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'     => 'buttonBorderH',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-flipbox-wrapper .eca-flipbox-button:hover',
			)
		);
		$this->add_responsive_control(
			'buttonBrH',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .eca-flipbox-button:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'buttonShadowH',
				'selector' => '{{WRAPPER}} .ec-flipbox-wrapper .eca-flipbox-button:hover',
			)
		);
		$this->add_control(
			'buttonTransitionH',
			array(
				'label'       => esc_html__( 'Transition css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => esc_html__( 'all .3s linear', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .eca-flipbox-button:hover' => 'transition:{{VALUE}};',
				),
			)
		);
		$this->add_control(
			'buttonTransformH',
			array(
				'label'       => esc_html__( 'Transform css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => esc_html__( 'skew(-20deg)', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .eca-flipbox-button:hover' => 'transform: {{VALUE}};-ms-transform: {{VALUE}};-moz-transform: {{VALUE}};-webkit-transform: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();
		/*button end*/

		/*front start*/
		$this->start_controls_section(
			'frontStyling',
			array(
				'label' => esc_html__( 'Front', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'frontAlignItemC',
			array(
				'label'     => esc_html__( 'Align Item', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => array(
					'flex-start' => array(
						'title' => esc_html__( 'Left', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-left',
					),
					'center'     => array(
						'title' => esc_html__( 'Center', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-center',
					),
					'flex-end'   => array(
						'title' => esc_html__( 'Right', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-right',
					),
				),
				'selectors' => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-front-content' => 'align-items:{{VALUE}};',
				),
				'condition' => array(
					'contentAnimation' => 'yes',
				),
			)
		);
		$this->add_responsive_control(
			'frontJustifyContentC',
			array(
				'label'     => esc_html__( 'Justify Content', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => array(
					'flex-start'    => array(
						'title' => esc_html__( 'Left', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-left',
					),
					'center'        => array(
						'title' => esc_html__( 'Center', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-center',
					),
					'flex-end'      => array(
						'title' => esc_html__( 'Right', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-right',
					),
					'space-between' => array(
						'title' => esc_html__( 'Space Between', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-h-align-stretch',
					),
				),
				'selectors' => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-front-content' => 'justify-content:{{VALUE}};',
				),
				'condition' => array(
					'contentAnimation' => 'yes',
				),
			)
		);
		$this->add_responsive_control(
			'frontAlignItem',
			array(
				'label'     => esc_html__( 'Align Item', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => array(
					'flex-start' => array(
						'title' => esc_html__( 'Left', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-left',
					),
					'center'     => array(
						'title' => esc_html__( 'Center', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-center',
					),
					'flex-end'   => array(
						'title' => esc_html__( 'Right', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-right',
					),
				),
				'selectors' => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-front' => 'align-items:{{VALUE}};',
				),
				'condition' => array(
					'contentAnimation!' => 'yes',
				),
			)
		);
		$this->add_responsive_control(
			'frontJustifyContent',
			array(
				'label'     => esc_html__( 'Justify Content', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => array(
					'flex-start'    => array(
						'title' => esc_html__( 'Left', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-left',
					),
					'center'        => array(
						'title' => esc_html__( 'Center', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-center',
					),
					'flex-end'      => array(
						'title' => esc_html__( 'Right', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-right',
					),
					'space-between' => array(
						'title' => esc_html__( 'Space Between', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-h-align-stretch',
					),
				),
				'selectors' => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-front' => 'justify-content:{{VALUE}};',
				),
				'condition' => array(
					'contentAnimation!' => 'yes',
				),
			)
		);
		$this->add_responsive_control(
			'frontPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-front' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'frontBgN',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-front',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'frontBorderN',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-front',
			)
		);
		$this->add_responsive_control(
			'frontBrN',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-front' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'frontShadowN',
				'selector' => '{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-front',
			)
		);
		$this->add_control(
			'frontColorOverlay',
			array(
				'label'     => esc_html__( 'Overlay Background', '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' ),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'      => 'frontColorOverlayBg',
				'types'     => array( 'classic', 'gradient' ),
				'selector'  => '{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-front.ec-fb-overlay:before',
				'condition' => array(
					'frontColorOverlay' => 'yes',
				),
			)
		);
		$this->end_controls_section();
		/*front end*/

		/*back start*/
		$this->start_controls_section(
			'backStyling',
			array(
				'label' => esc_html__( 'Back', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'backAlignItemC',
			array(
				'label'     => esc_html__( 'Align Item', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => array(
					'flex-start' => array(
						'title' => esc_html__( 'Left', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-left',
					),
					'center'     => array(
						'title' => esc_html__( 'Center', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-center',
					),
					'flex-end'   => array(
						'title' => esc_html__( 'Right', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-right',
					),
				),
				'selectors' => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back-content' => 'align-items:{{VALUE}};',
				),
				'condition' => array(
					'contentAnimation' => 'yes',
				),
			)
		);
		$this->add_responsive_control(
			'backJustifyContentC',
			array(
				'label'     => esc_html__( 'Justify Content', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => array(
					'flex-start'    => array(
						'title' => esc_html__( 'Left', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-left',
					),
					'center'        => array(
						'title' => esc_html__( 'Center', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-center',
					),
					'flex-end'      => array(
						'title' => esc_html__( 'Right', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-right',
					),
					'space-between' => array(
						'title' => esc_html__( 'Space Between', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-h-align-stretch',
					),
				),
				'selectors' => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back-content' => 'justify-content:{{VALUE}};',
				),
				'condition' => array(
					'contentAnimation' => 'yes',
				),
			)
		);
		$this->add_responsive_control(
			'backAlignItem',
			array(
				'label'     => esc_html__( 'Align Item', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => array(
					'flex-start' => array(
						'title' => esc_html__( 'Left', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-left',
					),
					'center'     => array(
						'title' => esc_html__( 'Center', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-center',
					),
					'flex-end'   => array(
						'title' => esc_html__( 'Right', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-right',
					),
				),
				'selectors' => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back' => 'align-items:{{VALUE}};',
				),
				'condition' => array(
					'contentAnimation!' => 'yes',
				),
			)
		);
		$this->add_responsive_control(
			'backJustifyContent',
			array(
				'label'     => esc_html__( 'Justify Content', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => array(
					'flex-start'    => array(
						'title' => esc_html__( 'Left', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-left',
					),
					'center'        => array(
						'title' => esc_html__( 'Center', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-center',
					),
					'flex-end'      => array(
						'title' => esc_html__( 'Right', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-text-align-right',
					),
					'space-between' => array(
						'title' => esc_html__( 'Space Between', 'essential-classy-addons-for-elementor' ),
						'icon'  => 'eicon-h-align-stretch',
					),
				),
				'selectors' => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back' => 'justify-content:{{VALUE}};',
				),
				'condition' => array(
					'contentAnimation!' => 'yes',
				),
			)
		);
		$this->add_responsive_control(
			'backPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'backBgN',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'backBorderN',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back',
			)
		);
		$this->add_responsive_control(
			'backBrN',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'backShadowN',
				'selector' => '{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back',
			)
		);
		$this->add_control(
			'backColorOverlay',
			array(
				'label'     => esc_html__( 'Overlay Background', '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' ),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'      => 'backColorOverlayBg',
				'types'     => array( 'classic', 'gradient' ),
				'selector'  => '{{WRAPPER}} .ec-flipbox-wrapper .ec-flipbox-back.ec-fb-overlay:before',
				'condition' => array(
					'backColorOverlay' => 'yes',
				),
			)
		);
		$this->end_controls_section();
		/*back end*/
	}

	protected function render() {

		$settings                = $this->get_settings_for_display();
		$contentLayout           = ! empty( $settings['contentLayout'] ) ? $settings['contentLayout'] : 'layout1';
		$ecfboverflowclass       = '';
		$ecfbbackclass           = '';
		$ecfbbacktransformclass  = '';
		$ecfbfronttransformclass = '';
		if ( $contentLayout == 'layout5' || $contentLayout == 'layout6' || $contentLayout == 'layout7' || $contentLayout == 'layout8' || $contentLayout == 'layout9' || $contentLayout == 'layout10' || $contentLayout == 'layout11' || $contentLayout == 'layout12' || $contentLayout == 'layout13' || $contentLayout == 'layout14' || $contentLayout == 'layout15' || $contentLayout == 'layout16' || $contentLayout == 'layout17' || $contentLayout == 'layout18' ) {
			$ecfboverflowclass = ' ecfboverflowhidden';
			$ecfbbackclass     = ' ecfbbackcolor';
			if ( $contentLayout != 'layout17' && $contentLayout
			!== 'layout18' ) {
				$ecfbbacktransformclass = ' ecfbbacktransform';
			}
			if ( $contentLayout == 'layout9' || $contentLayout == 'layout10' || $contentLayout == 'layout11' || $contentLayout == 'layout12' || $contentLayout == 'layout13' || $contentLayout == 'layout14' || $contentLayout == 'layout15' || $contentLayout == 'layout16' ) {
				$ecfbfronttransformclass = ' ecfbfronttransform';
			}
		}
		$iconImage         = ! empty( $settings['iconImage'] ) ? $settings['iconImage'] : 'icon';
		$iconLibrary       = ! empty( $settings['iconLibrary'] ) ? $settings['iconLibrary'] : '';
		$imageSelect       = ! empty( $settings['imageSelect'] ) ? $settings['imageSelect'] : '';
		$contentAnimation  = isset( $settings['contentAnimation'] ) ? $settings['contentAnimation'] : 'no';
		$frontColorOverlay = isset( $settings['frontColorOverlay'] ) ? $settings['frontColorOverlay'] : 'no';
		$backColorOverlay  = isset( $settings['backColorOverlay'] ) ? $settings['backColorOverlay'] : 'no';

		$iconImageOP = $title = $subtitle = $desc = $button = '';
		if ( ! empty( $iconImage ) ) {
			if ( $iconImage == 'icon' ) {
				if ( ! empty( $iconLibrary ) ) {
					ob_start();
					\Elementor\Icons_Manager::render_icon( $iconLibrary, array( 'aria-hidden' => 'true' ) );
					$iconImageOP = '<span class="eca-icon-image eca-icon">' . ob_get_contents() . '</span>';
					ob_end_clean();
				}
			} elseif ( $iconImage == 'image' ) {
				if ( ! empty( $settings['imageSelect']['url'] ) ) {
					$imageSelect = $settings['imageSelect']['id'];
					$img         = wp_get_attachment_image_src( $imageSelect, $settings['imageSelectThumbnail_size'] );
					$imgSrc      = $img[0];
					$imageId     = $settings['imageSelect']['id'];
					$imageAlt    = get_post_meta( $imageId, '_wp_attachment_image_alt', true );
					if ( empty( $imageAlt ) ) {
						$imageAlt = get_the_title( $imageId );
					}
					$iconImageOP = '<img class="eca-icon-image eca-image" src=' . esc_url( $imgSrc ) . ' alt="' . esc_attr( $imageAlt ) . '" />';
				}
			}
		}

		$flipboxTitle    = ! empty( $settings['flipboxTitle'] ) ? $settings['flipboxTitle'] : '';
		$flipboxTitleTag = ! empty( $settings['flipboxTitleTag'] ) ? $settings['flipboxTitleTag'] : 'h1';
		if ( ! empty( $flipboxTitle ) ) {
			$title = '<' . \EcafeHelper::check_and_validate_html_tag( $flipboxTitleTag ) . ' class="eca-flipbox-title">' . esc_html( $flipboxTitle ) . '</' . \EcafeHelper::check_and_validate_html_tag( $flipboxTitleTag ) . '>';
		}

		$flipboxSubTitle    = ! empty( $settings['flipboxSubTitle'] ) ? $settings['flipboxSubTitle'] : '';
		$flipboxSubTitleTag = ! empty( $settings['flipboxSubTitleTag'] ) ? $settings['flipboxSubTitleTag'] : 'h2';
		if ( ! empty( $flipboxSubTitle ) ) {
			$subtitle = '<' . \EcafeHelper::check_and_validate_html_tag( $flipboxSubTitleTag ) . ' class="eca-flipbox-sub-title">' . esc_html( $flipboxSubTitle ) . '</' . \EcafeHelper::check_and_validate_html_tag( $flipboxSubTitleTag ) . '>';
		}

		$flipboxDesc = ! empty( $settings['flipboxDesc'] ) ? $settings['flipboxDesc'] : '';
		if ( ! empty( $flipboxDesc ) ) {
			$desc = '<div class="eca-flipbox-desc">' . wp_kses_post( $flipboxDesc ) . '</div>';
		}

		$buttonText       = ! empty( $settings['buttonText'] ) ? $settings['buttonText'] : '';
		$buttonLink       = ! empty( $settings['buttonLink']['url'] ) ? esc_url( $settings['buttonLink']['url'] ) : '';
		$buttonLinkBox    = isset( $settings['buttonLinkBox'] ) ? $settings['buttonLinkBox'] : '';
		$buttonLinkTarget = $buttonLinkNoFollow = '';
		if ( ! empty( $buttonLink ) ) {
			$buttonLinkTarget   = $settings['buttonLink']['is_external'] ? ' target="_blank"' : '';
			$buttonLinkNoFollow = $settings['buttonLink']['nofollow'] ? ' rel="nofollow"' : '';
		}

		if ( ! empty( $buttonText ) ) {
			$buttonHoverEffectH = ( isset( $settings['buttonHoverEffectH'] ) && $settings['buttonHoverEffectH'] == 'yes' ) ? 'eca-button-hover-effect ' . esc_attr( $settings['buttonEffectPosH'] ) : '';
			if ( isset( $buttonLinkBox ) && $buttonLinkBox == 'yes' ) {
				$button = '<div class="eca-flipbox-button ' . esc_attr( $buttonHoverEffectH ) . '">' . esc_html( $buttonText ) . '</div>';
			} else {
				$button = '<a class="eca-flipbox-button ' . esc_attr( $buttonHoverEffectH ) . '" href="' . $buttonLink . '"' . $buttonLinkTarget . $buttonLinkNoFollow . '>' . esc_html( $buttonText ) . '</a>';

			}
		}
		$output      = '';
		$tippyclass  = '';
		$tippyrender = '';
		if ( isset( $settings['tippyTooltip'] ) && $settings['tippyTooltip'] === 'yes' ) {
			/*Tippy Tooltip Render*/
			include ECAFE_PATH . 'element/widgets/ecafe-tippy-render.php';
		}
		if ( isset( $buttonLinkBox ) && $buttonLinkBox == 'yes' ) {
			$output .= '<a class="ec-flipbox-wrapper ' . esc_attr( $contentLayout ) . ' ' . esc_attr( $tippyclass ) . '" href="' . $buttonLink . '"' . $buttonLinkTarget . $buttonLinkNoFollow . '>';
		} else {
			$output .= '<div class="ec-flipbox-wrapper ' . esc_attr( $contentLayout ) . ' ' . esc_attr( $tippyclass ) . '" ' . $tippyrender . '>';
		}

		$contentAnimationClass = '';
		if ( isset( $contentAnimation ) && $contentAnimation == 'yes' ) {
			$contentAnimationClass = ' ec-content-anim';
		}
		$output                    .= '<div class="ec-flipbox-wrap ' . esc_attr( $contentAnimationClass ) . ' ' . esc_attr( $ecfboverflowclass ) . ' ' . esc_attr( $ecfbbacktransformclass ) . ' ' . esc_attr( $ecfbfronttransformclass ) . '">';
			$frontColorOverlayClass = '';
		if ( isset( $frontColorOverlay ) && $frontColorOverlay == 'yes' ) {
			$frontColorOverlayClass = ' ec-fb-overlay';
		}
			$output .= '<div class="ec-flipbox-front ' . esc_attr( $frontColorOverlayClass ) . '">';
		if ( isset( $contentAnimation ) && $contentAnimation == 'yes' ) {
			$output .= '<div class="ec-flipbox-front-content">';
		}

					$output .= $iconImageOP . $title . $subtitle;

		if ( isset( $contentAnimation ) && $contentAnimation == 'yes' ) {
			$output .= '</div>';
		}
				$output .= '</div>';

			$backColorOverlayClass = '';
		if ( isset( $backColorOverlay ) && $backColorOverlay == 'yes' ) {
			$backColorOverlayClass = ' ec-fb-overlay';
		}
			$output .= '<div class="ec-flipbox-back ' . esc_attr( $ecfbbackclass ) . ' ' . esc_attr( $backColorOverlayClass ) . '">';
		if ( isset( $contentAnimation ) && $contentAnimation == 'yes' ) {
			$output .= '<div class="ec-flipbox-back-content">';
		}

					$output .= $title . $desc . $button;

		if ( isset( $contentAnimation ) && $contentAnimation == 'yes' ) {
				$output .= '</div>';
		}
			$output .= '</div>';
			$output .= '</div>';

		if ( isset( $buttonLinkBox ) && $buttonLinkBox == 'yes' ) {
			$output .= '</a>';
		} else {
			$output .= '</div>';
		}

			echo wp_kses_normalize_entities( $output );
	}
}
