📁 Captain File Manager

✏️ Editing: wpr-flip-box.php

<?php
namespace WprAddons\Modules\FlipBox\Widgets;

use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Image_Size;
use Elementor\Group_Control_Css_Filter;
use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Repeater;
use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
use Elementor\Widget_Base;
use Elementor\Icons;
use Elementor\Utils;
use WprAddons\Classes\Utilities;

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

class Wpr_Flip_Box extends Widget_Base {
		
	public function get_name() {
		return 'wpr-flip-box';
	}

public function get_title() {
		return esc_html__( 'Flip Box', 'wpr-addons' );
	}

public function get_icon() {
		return 'wpr-icon eicon-flip-box';
	}

public function get_categories() {
		return [ 'wpr-widgets'];
	}

public function get_keywords() {
		return [ 'royal', 'hover box', 'banner box', 'animated banner' ];
	}

public function get_style_depends() {
		return [ 'wpr-button-animations-css', 'wpr-animations-css' ];
	}

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

public function get_custom_help_url() {
    	if ( empty(get_option('wpr_wl_plugin_links')) )
        // return 'https://royal-elementor-addons.com/contact/?ref=rea-plugin-panel-flip-box-help-btn';
    		return 'https://wordpress.org/support/plugin/royal-elementor-addons/';
    }

public function add_control_front_trigger () {
		$this->add_control(
			'front_trigger',
			[
				'label' => esc_html__( 'Trigger', 'wpr-addons' ),
				'type' => Controls_Manager::SELECT,
				'default' => 'hover',
				'options' => [
					'box' => esc_html__( 'Box', 'wpr-addons' ),
					'hover' => esc_html__( 'Hover', 'wpr-addons' ),
					'pro-bt' => esc_html__( 'Button (Pro)', 'wpr-addons' ),
				],
				'separator' => 'before',
			]
		);
	}

public function add_control_back_link_type() {
		$this->add_control(
			'back_link_type',
			[
				'label' => esc_html__( 'Link Type', 'wpr-addons' ),
				'type' => Controls_Manager::SELECT,
				'options' => [
					'none' => esc_html__( 'None', 'wpr-addons' ),
					'title' => esc_html__( 'Title', 'wpr-addons' ),
					// 'btn-title' => esc_html__( 'Title & Button', 'wpr-addons' ), TODO: add or remove?
					'box' => esc_html__( 'Box', 'wpr-addons' ),
					'pro-bt' => esc_html__( 'Button (Pro)', 'wpr-addons' ),
				],
				'default' => 'box',
				'separator' => 'before',
			]
		);
	}

public function add_control_box_animation() {
		$this->add_control(
			'box_animation',
			[
				'label' => esc_html__( 'Animation', 'wpr-addons' ),
				'type' => Controls_Manager::SELECT,
				'default' => 'flip',
				'options' => [
		     		'fade'     => esc_html__( 'Fade', 'wpr-addons' ),
					'flip'     => esc_html__( 'Flip', 'wpr-addons' ),
		     		'pro-sl'    => esc_html__( 'Slide (Pro)', 'wpr-addons' ),
		     		'pro-ps'     => esc_html__( 'Push (Pro)', 'wpr-addons' ),
		     		'pro-zi'  => esc_html__( 'Zoom In (Pro)', 'wpr-addons' ),
		     		'pro-zo' => esc_html__( 'Zoom Out (Pro)', 'wpr-addons' ),
				],
				'prefix_class' => 'wpr-flip-box-animation-',
				'render_type' => 'template',
				'separator' => 'before',
			]
		);
	}

protected function register_controls() {
		
		// Section: Front ------------
		$this->start_controls_section(
			'wpr__section_front',
			[
				'label' => esc_html__( 'Front', 'wpr-addons' ),
			]
		);

Utilities::wpr_library_buttons( $this, Controls_Manager::RAW_HTML );

$this->add_control(
            'front_icon_type',
            [
                'label' => esc_html__( 'Select Icon Type', 'wpr-addons' ),
                'type' => Controls_Manager::SELECT,
                'default' => 'icon',
                'options' => [
                    'none' => esc_html__( 'None', 'wpr-addons' ),
                    'icon' => esc_html__( 'Icon', 'wpr-addons' ),
                    'image' => esc_html__( 'Image', 'wpr-addons' ),
                ],
            ]
        );

$this->add_control(
			'front_image',
			[
				'label' => esc_html__( 'Image', 'wpr-addons' ),
				'type' => Controls_Manager::MEDIA,
				'dynamic' => [
					'active' => true,
				],
				'condition' => [
					'front_icon_type' => 'image',
				],
			]
		);

$this->add_group_control(
			Group_Control_Image_Size::get_type(),
			[
				'name' => 'front_image_size',
				'default' => 'full',
				'condition' => [
					'front_icon_type' => 'image',
				],
			]
		);

$this->add_control(
			'front_icon',
			[
				'label' => esc_html__( 'Icon', 'wpr-addons' ),
				'type' => Controls_Manager::ICONS,
				'skin' => 'inline',
				'label_block' => false,
				'default' => [
					'value' => 'far fa-star',
					'library' => 'fa-regular',
				],
				'condition' => [
					'front_icon_type' => 'icon',
				],
			]
		);

$this->add_control(
			'front_title',
			[
				'label' => esc_html__( 'Title', 'wpr-addons' ),
				'type' => Controls_Manager::TEXT,
				'dynamic' => [
					'active' => true,
				],
				'default' =>  esc_html__( 'Frontend Content', 'wpr-addons' ),
				'separator' => 'before',
			]
		);

$this->add_control(
			'front_description',
			[
				 'label' => esc_html__( 'Description', 'wpr-addons' ),
				'type' => Controls_Manager::WYSIWYG,
				'default' => 'Hover mouse here to see backend content. Lorem ipsum dolor sit amet.',
				'separator' => 'before',
			]
		);

$this->add_control_front_trigger();

// Upgrade to Pro Notice
		Utilities::upgrade_pro_notice( $this, Controls_Manager::RAW_HTML, 'flip-box', 'front_trigger', ['pro-bt'] );

$this->add_control(
			'front_btn_text',
			[
				'label' => esc_html__( 'Frontend Button', 'wpr-addons' ),
				'type' => Controls_Manager::TEXT,
				'dynamic' => [
					'active' => true,
				],
				'default' => 'Click Me',
				'condition' => [
					'front_trigger' => 'btn',
				],
				'separator' => 'before',
			]
		);

$this->add_control(
			'front_btn_icon',
			[
				'label' => esc_html__( 'Button Icon', 'wpr-addons' ),
				'type' => Controls_Manager::ICONS,
				'skin' => 'inline',
				'label_block' => false,
				'condition' => [
					'front_trigger' => 'btn',
				],
			]
		);

$this->end_controls_section(); // End Controls Section

// Section: Back ------------
		$this->start_controls_section(
			'wpr__section_back',
			[
				'label' => esc_html__( 'Back', 'wpr-addons' ),
			]
		);

$this->add_control(
            'back_icon_type',
            [
                'label' => esc_html__( 'Select Icon Type', 'wpr-addons' ),
                'type' => Controls_Manager::SELECT,
                'default' => 'icon',
                'options' => [
                    'none' => esc_html__( 'None', 'wpr-addons' ),
                    'icon' => esc_html__( 'Icon', 'wpr-addons' ),
                    'image' => esc_html__( 'Image', 'wpr-addons' ),
                ],
            ]
        );

$this->add_control(
			'back_image',
			[
				'label' => esc_html__( 'Image', 'wpr-addons' ),
				'type' => Controls_Manager::MEDIA,
				'dynamic' => [
					'active' => true,
				],
				'condition' => [
					'back_icon_type' => 'image',
				],
			]
		);

$this->add_group_control(
			Group_Control_Image_Size::get_type(),
			[
				'name' => 'back_image_size',
				'default' => 'full',
				'condition' => [
					'back_icon_type' => 'image',
				],
			]
		);

$this->add_control(
			'back_icon',
			[
				'label' => esc_html__( 'Icon', 'wpr-addons' ),
				'type' => Controls_Manager::ICONS,
				'skin' => 'inline',
				'label_block' => false,
				'default' => [
					'value' => 'far fa-star',
					'library' => 'fa-regular',
				],
				'condition' => [
					'back_icon_type' => 'icon',
				],
			]
		);

$this->add_control(
			'back_title',
			[
				'label' => esc_html__( 'Backend Content', 'wpr-addons' ),
				'type' => Controls_Manager::TEXT,
				'dynamic' => [
					'active' => true,
				],
				'default' => 'Title',
				'separator' => 'before',
			]
		);

$this->add_control(
			'back_description',
			[
				'label' => esc_html__( 'Description', 'wpr-addons' ),
				'type' => Controls_Manager::WYSIWYG,
				'default' => 'This is backend content. Lorem ipsum dolor sit amet.',
				'separator' => 'before',
			]
		);

$this->add_control_back_link_type();

// Upgrade to Pro Notice
		Utilities::upgrade_pro_notice( $this, Controls_Manager::RAW_HTML, 'flip-box', 'back_link_type', ['pro-bt'] );

$this->add_control(
			'back_link',
			[
				'type' => Controls_Manager::URL,
				'dynamic' => [
					'active' => true,
				],
				'label' => esc_html__( 'Link', 'wpr-addons' ),
				'placeholder' => esc_html__( 'https://your-link.com', 'wpr-addons' ),
				'default' => [
					'url' => '#',
				],
				'separator' => 'before',
				'condition' => [
					'back_link_type!' => 'none',
				],
			]
		);

$this->add_control(
			'back_btn_text',
			[
				'label' => esc_html__( 'Button Text', 'wpr-addons' ),
				'type' => Controls_Manager::TEXT,
				'dynamic' => [
					'active' => true,
				],
				'default' => 'Backend Button',
				'separator' => 'before',
				'condition' => [
					'back_link_type' => ['btn','btn-title'],
				],
			]
		);

$this->add_control(
			'back_btn_icon',
			[
				'label' => esc_html__( 'Button Icon', 'wpr-addons' ),
				'type' => Controls_Manager::ICONS,
				'skin' => 'inline',
				'label_block' => false,
				'condition' => [
					'back_link_type' => ['btn','btn-title'],
				],
			]
		);

$this->end_controls_section(); // End Controls Section

// Section: Settings ---------
		$this->start_controls_section(
			'wpr__section_settings',
			[
				'label' => esc_html__( 'Settings', 'wpr-addons' ),
			]
		);

$this->add_responsive_control(
			'box_height',
			[
				'type' => Controls_Manager::SLIDER,
				'label' => esc_html__( 'Height', 'wpr-addons' ),
				'size_units' => [ 'px', 'vh' ],
				'range' => [
					'px' => [
						'min' => 20,
						'max' => 1000,
					],
					'vh' => [
						'min' => 20,
						'max' => 100,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 350,
				],
				'selectors' => [
					'{{WRAPPER}} .wpr-flip-box' => 'height: {{SIZE}}{{UNIT}};',
				],
			]
		);

$this->add_responsive_control(
			'box_border_radius',
			[
				'type' => Controls_Manager::SLIDER,
				'label' => esc_html__( 'Border Radius', 'wpr-addons' ),
				'size_units' => [ 'px', '%' ],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 700,
					],
					'%' => [
						'min' => 0,
						'max' => 100,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 0,
				],
				'selectors' => [
					'{{WRAPPER}} .wpr-flip-box' => 'border-radius: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .wpr-flip-box-item' => 'border-radius: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .wpr-flip-box-overlay' => 'border-radius: {{SIZE}}{{UNIT}};',
				],
				'separator' => 'before',
			]
		);

$this->add_control_box_animation();

// Upgrade to Pro Notice
		Utilities::upgrade_pro_notice( $this, Controls_Manager::RAW_HTML, 'flip-box', 'box_animation',['pro-sl', 'pro-ps','pro-zi', 'pro-zo',] );

$this->add_control(
			'box_anim_3d',
			[
				'label' => esc_html__( '3D Animation', 'wpr-addons' ),
				'type' => Controls_Manager::SWITCHER,
				'default' => 'yes',
				'prefix_class' => 'wpr-flip-box-animation-3d-',
				'render_type' => 'template',
				'condition' => [
					'box_animation' => 'flip',
				],
			]
		);

$this->add_control(
			'box_anim_direction',
			[
				'label' => esc_html__( 'Animation Direction', 'wpr-addons' ),
				'type' => Controls_Manager::SELECT,
				'default' => 'right',
				'options' => [
		     		'left'     => esc_html__( 'Left', 'wpr-addons' ),
		     		'right'    => esc_html__( 'Right', 'wpr-addons' ),
		     		'up'       => esc_html__( 'Top', 'wpr-addons' ),
		     		'down'     => esc_html__( 'Bottom', 'wpr-addons' ),
				],
				'prefix_class' => 'wpr-flip-box-anim-direction-',
				'render_type' => 'template',
				'condition' => [
					'box_animation!' => [ 'fade', 'zoom-in', 'zoom-out', ],
				],
			]
		);

$this->add_control(
			'box_anim_duration',
			[
				'label' => esc_html__( 'Animation Duration', 'wpr-addons' ),
				'type' => Controls_Manager::NUMBER,
				'default' => 0.5,
				'min' => 0,
				'max' => 10,
				'step' => 0.1,
				'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-item' => '-webkit-transition-duration: {{VALUE}}s; transition-duration: {{VALUE}}s;',
				],				
				'render_type' => 'template',
			]
		);

$this->add_control(
			'box_anim_timing',
			[
				'label' => esc_html__( 'Animation Timing', 'wpr-addons' ),
				'type' => Controls_Manager::SELECT,
				'options' => Utilities::wpr_animation_timings(),
				'default' => 'ease-default',
			]
		);

// Upgrade to Pro Notice
		Utilities::upgrade_pro_notice( $this, Controls_Manager::RAW_HTML, 'flip-box', 'box_anim_timing', ['pro-eio','pro-eiqd','pro-eicb','pro-eiqrt','pro-eiqnt','pro-eisn','pro-eiex','pro-eicr','pro-eibk','pro-eoqd','pro-eocb','pro-eoqrt','pro-eoqnt','pro-eosn','pro-eoex','pro-eocr','pro-eobk','pro-eioqd','pro-eiocb','pro-eioqrt','pro-eioqnt','pro-eiosn','pro-eioex','pro-eiocr','pro-eiobk',] );

$this->end_controls_section(); // End Controls Section

// Section: Request New Feature
		Utilities::wpr_add_section_request_feature( $this, Controls_Manager::RAW_HTML, '' );

// Section: Pro Features
		Utilities::pro_features_list_section( $this, '', Controls_Manager::RAW_HTML, 'flip-box', [
			'Flip on Button Click',
			'Advanced Flipping Animations',
		] );
		
		// Styles
		// Section: Front ------------
		$this->start_controls_section(
			'wpr__section_style_front',
			[
				'label' => esc_html__( 'Front', 'wpr-addons' ),
				'tab' => Controls_Manager::TAB_STYLE,
			]
		);

$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name' => 'front_bg_color',
				'types' => [ 'classic', 'gradient' ],
				'fields_options' => [
					'color' => [
						'default' => '#605BE5',
					],
				],
				'selector' => '{{WRAPPER}} .wpr-flip-box-front',
			]
		);

$this->add_control(
			'front_overlay_color',
			[
				'label' => esc_html__( 'Overlay Color', 'wpr-addons' ),
				'type' => Controls_Manager::COLOR,
				'default' => '#c1c1c1',
				'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-front .wpr-flip-box-overlay' => 'background-color: {{VALUE}};',
				],
				'separator' => 'before',
				'condition' => [
					'front_bg_color_image[id]!' => '',
				],
			]
		);

$this->add_responsive_control(
			'front_padding',
			[
				'label' => esc_html__( 'Padding', 'wpr-addons' ),
				'type' => Controls_Manager::DIMENSIONS,
				'default' => [
					'top' => 20,
					'right' => 20,
					'bottom' => 20,
					'left' => 20,
				],
				'size_units' => [ 'px', '%' ],
				'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-front .wpr-flip-box-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
				'separator' => 'before',
			]
		);

$this->add_control(
			'front_vr_position',
			[
				'label' => esc_html__( 'Vertical Position', 'wpr-addons' ),
				'type' => Controls_Manager::CHOOSE,
				'label_block' => false,
                'default' => 'middle',
				'options' => [
					'top' => [
						'title' => esc_html__( 'Top', 'wpr-addons' ),
						'icon' => 'eicon-v-align-top',
					],
					'middle' => [
						'title' => esc_html__( 'Middle', 'wpr-addons' ),
						'icon' => 'eicon-v-align-middle',
					],
					'bottom' => [
						'title' => esc_html__( 'Bottom', 'wpr-addons' ),
						'icon' => 'eicon-v-align-bottom',
					],
				],
				'selectors_dictionary' => [
					'top' => 'flex-start',
					'middle' => 'center',
					'bottom' => 'flex-end'
				],
                'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-front .wpr-flip-box-content' =>  '-webkit-justify-content: {{VALUE}};justify-content: {{VALUE}};',
				],
				'separator' => 'before',
			]
		);

$this->add_control(
			'front_align',
			[
				'label' => esc_html__( 'Alignment', 'wpr-addons' ),
				'type' => Controls_Manager::CHOOSE,
				'label_block' => false,
				'default' => 'center',
				'options' => [
					'left' => [
						'title' => esc_html__( 'Left', 'wpr-addons' ),
						'icon' => 'eicon-text-align-left',
					],
					'center' => [
						'title' => esc_html__( 'Center', 'wpr-addons' ),
						'icon' => 'eicon-text-align-center',
					],
					'right' => [
						'title' => esc_html__( 'Right', 'wpr-addons' ),
						'icon' => 'eicon-text-align-right',
					],
				],
				'prefix_class' => 'wpr-flip-box-front-align-',
				'render_type' => 'template',
                'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-front .wpr-flip-box-content' => 'text-align: {{VALUE}};',
				],
			]
		);

$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name' => 'front_border',
				'label' => esc_html__( 'Border', 'wpr-addons' ),
				'fields_options' => [
					'color' => [
						'default' => '#E8E8E8',
					],
					'width' => [
						'default' => [
							'top' => '1',
							'right' => '1',
							'bottom' => '1',
							'left' => '1',
							'isLinked' => true,
						],
					],
				],
				'selector' => '{{WRAPPER}} .wpr-flip-box-front',
				'separator' => 'before',
			]
		);

// Image
		$this->add_control(
			'front_image_section',
			[
				'label' => esc_html__( 'Image', 'wpr-addons' ),
				'type' => Controls_Manager::HEADING,
				'separator' => 'before',
				'condition' => [
					'front_icon_type' => 'image',
				],
			]
		);

$this->add_responsive_control(
			'front_image_width',
			[
				'label' => esc_html__( 'Width', 'wpr-addons' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ '%', 'px' ],
				'range' => [
					'%' => [
						'min' => 1,
						'max' => 100,
					],
					'px' => [
						'min' => 1,
						'max' => 300,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 50,
				],
				'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-front .wpr-flip-box-image img' => 'max-width: {{SIZE}}{{UNIT}};',
				],
				'condition' => [
					'front_icon_type' => 'image',
				],
			]
		);

$this->add_responsive_control(
			'front_image_distance',
			[
				'label' => esc_html__( 'Distance', 'wpr-addons' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px'],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 300,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 5,
				],
				'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-front .wpr-flip-box-image' => 'margin-bottom:{{SIZE}}{{UNIT}};',
				],
				'condition' => [
					'front_icon_type' => 'image',
				],
			]
		);

$this->add_control(
			'front_image_border_radius',
			[
				'type' => Controls_Manager::SLIDER,
				'label' => esc_html__( 'Border Radius', 'wpr-addons' ),
				'size_units' => [ 'px', '%' ],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 150,
					],
					'%' => [
						'min' => 0,
						'max' => 100,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 0,
				],
				'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-front .wpr-flip-box-image img' => 'border-radius: {{SIZE}}{{UNIT}};',
				],
				'condition' => [
					'front_icon_type' => 'image',
				],
			]
		);

// Icon
		$this->add_control(
			'front_icon_section',
			[
				'label' => esc_html__( 'Icon', 'wpr-addons' ),
				'type' => Controls_Manager::HEADING,
				'separator' => 'before',
				'condition' => [
					'front_icon_type' => 'icon',
				],
			]
		);

$this->add_control(
			'front_icon_color',
			[
				'label' => esc_html__( 'Color', 'wpr-addons' ),
				'type' => Controls_Manager::COLOR,
				'default' => '#ffffff',
				'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-front .wpr-flip-box-icon' => 'color: {{VALUE}};',
				],
				'condition' => [
					'front_icon_type' => 'icon',
				],
			]
		);

$this->add_control(
			'front_icon_size',
			[
				'label' => esc_html__( 'Font Size', 'wpr-addons' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px' ],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 300,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 40,
				],
				'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-front .wpr-flip-box-icon' => 'font-size: {{SIZE}}{{UNIT}};',
				],
				'condition' => [
					'front_icon_type' => 'icon',
				],
			]
		);

$this->add_control(
			'front_icon_distance',
			[
				'label' => esc_html__( 'Distance', 'wpr-addons' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px' ],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 150,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 7,
				],
				'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-front .wpr-flip-box-icon' => 'margin-bottom: {{SIZE}}{{UNIT}};',
				],
				'condition' => [
					'front_icon_type' => 'icon',
				],	
			]
		);

// Title
		$this->add_control(
			'front_title_section',
			[
				'label' => esc_html__( 'Title', 'wpr-addons' ),
				'type' => Controls_Manager::HEADING,
				'separator' => 'before',
			]
		);

$this->add_control(
			'front_title_color',
			[
				'label' => esc_html__( 'Color', 'wpr-addons' ),
				'type' => Controls_Manager::COLOR,
				'default' => '#ffffff',
				'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-front .wpr-flip-box-title' => 'color: {{VALUE}};',
				],
			]
		);

$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'front_title_typography',
				'selector' => '{{WRAPPER}} .wpr-flip-box-front .wpr-flip-box-title',
			]
		);

$this->add_control(
			'front_title_distance',
			[
				'label' => esc_html__( 'Distance', 'wpr-addons' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px'],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 150,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 12,
				],
				'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-front .wpr-flip-box-title' => 'margin: 0 0 {{SIZE}}{{UNIT}};',
				],	
			]
		);

// Description
		$this->add_control(
			'front_description_section',
			[
				'label' => esc_html__( 'Description', 'wpr-addons' ),
				'type' => Controls_Manager::HEADING,
				'separator' => 'before',
			]
		);

$this->add_control(
			'front_description_color',
			[
				'label' => esc_html__( 'Color', 'wpr-addons' ),
				'type' => Controls_Manager::COLOR,
				'default' => '#ffffff',
				'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-front .wpr-flip-box-description' => 'color: {{VALUE}};',
				],
			]
		);

$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'front_description_typography',
				'selector' => '{{WRAPPER}} .wpr-flip-box-front .wpr-flip-box-description',
			]
		);

$this->add_control(
			'front_description_distance',
			[
				'label' => esc_html__( 'Distance', 'wpr-addons' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px'],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 150,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 20,
				],
				'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-front .wpr-flip-box-description' => 'margin-bottom: {{SIZE}}{{UNIT}};',
				],	
			]
		);

$this->end_controls_section(); // End Controls Section

// Styles
		// Section: Back ------------
		$this->start_controls_section(
			'wpr__section_style_back',
			[
				'label' => esc_html__( 'Back', 'wpr-addons' ),
				'tab' => Controls_Manager::TAB_STYLE,
			]
		);

$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name' => 'back_bg_color',
				'types' => [ 'classic', 'gradient' ],
				'fields_options' => [
					'color' => [
						'default' => '#FF348B',
					],
				],
				'selector' => '{{WRAPPER}} .wpr-flip-box-back',
			]
		);

$this->add_control(
			'back_overlay_color',
			[
				'label' => esc_html__( 'Overlay Color', 'wpr-addons' ),
				'type' => Controls_Manager::COLOR,
				'default' => '#c1c1c1',
				'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-back .wpr-flip-box-overlay' => 'background-color: {{VALUE}};',
				],
				'separator' => 'before',
				'condition' => [
					'back_bg_color_image[id]!' => '',
				],
			]
		);

$this->add_responsive_control(
			'back_padding',
			[
				'label' => esc_html__( 'Padding', 'wpr-addons' ),
				'type' => Controls_Manager::DIMENSIONS,
				'default' => [
					'top' => 20,
					'right' => 20,
					'bottom' => 20,
					'left' => 20,
				],
				'size_units' => [ 'px', '%' ],
				'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-back .wpr-flip-box-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
				'separator' => 'before',
			]
		);

$this->add_control(
			'back_vr_position',
			[
				'label' => esc_html__( 'Vertical Position', 'wpr-addons' ),
				'type' => Controls_Manager::CHOOSE,
				'label_block' => false,
                'default' => 'middle',
				'options' => [
					'top' => [
						'title' => esc_html__( 'Top', 'wpr-addons' ),
						'icon' => 'eicon-v-align-top',
					],
					'middle' => [
						'title' => esc_html__( 'Middle', 'wpr-addons' ),
						'icon' => 'eicon-v-align-middle',
					],
					'bottom' => [
						'title' => esc_html__( 'Bottom', 'wpr-addons' ),
						'icon' => 'eicon-v-align-bottom',
					],
				],
				'selectors_dictionary' => [
					'top' => 'flex-start',
					'middle' => 'center',
					'bottom' => 'flex-end'
				],
                'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-back .wpr-flip-box-content' =>  '-webkit-justify-content: {{VALUE}};justify-content: {{VALUE}};',
				],
				'separator' => 'before',
			]
		);

$this->add_control(
			'back_align',
			[
				'label' => esc_html__( 'Alignment', 'wpr-addons' ),
				'type' => Controls_Manager::CHOOSE,
				'label_block' => false,
				'default' => 'center',
				'options' => [
					'left' => [
						'title' => esc_html__( 'Left', 'wpr-addons' ),
						'icon' => 'eicon-text-align-left',
					],
					'center' => [
						'title' => esc_html__( 'Center', 'wpr-addons' ),
						'icon' => 'eicon-text-align-center',
					],
					'right' => [
						'title' => esc_html__( 'Right', 'wpr-addons' ),
						'icon' => 'eicon-text-align-right',
					],
				],
				'prefix_class' => 'wpr-flip-box-back-align-',
				'render_type' => 'template',
                'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-back .wpr-flip-box-content' => 'text-align: {{VALUE}};',
				],
			]
		);

$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name' => 'back_border',
				'label' => esc_html__( 'Border', 'wpr-addons' ),
				'fields_options' => [
					'color' => [
						'default' => '#E8E8E8',
					],
					'width' => [
						'default' => [
							'top' => '1',
							'right' => '1',
							'bottom' => '1',
							'left' => '1',
							'isLinked' => true,
						],
					],
				],
				'selector' => '{{WRAPPER}} .wpr-flip-box-back',
				'separator' => 'before',
			]
		);

// Image
		$this->add_control(
			'back_image_section',
			[
				'label' => esc_html__( 'Image', 'wpr-addons' ),
				'type' => Controls_Manager::HEADING,
				'separator' => 'before',
				'condition' => [
					'back_icon_type' => 'image',
				],
			]
		);

$this->add_responsive_control(
			'back_image_width',
			[
				'label' => esc_html__( 'Width', 'wpr-addons' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ '%', 'px' ],
				'range' => [
					'%' => [
						'min' => 1,
						'max' => 100,
					],
					'px' => [
						'min' => 1,
						'max' => 300,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 50,
				],
				'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-back .wpr-flip-box-image img' => 'max-width: {{SIZE}}{{UNIT}};',
				],
				'condition' => [
					'back_icon_type' => 'image',
				],
			]
		);

$this->add_responsive_control(
			'back_image_distance',
			[
				'label' => esc_html__( 'Distance', 'wpr-addons' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px'],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 150,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 5,
				],
				'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-back .wpr-flip-box-image' => 'margin-bottom:{{SIZE}}{{UNIT}};',
				],
				'condition' => [
					'back_icon_type' => 'image',
				],
			]
		);

$this->add_control(
			'back_image_border_radius',
			[
				'type' => Controls_Manager::SLIDER,
				'label' => esc_html__( 'Border Radius', 'wpr-addons' ),
				'size_units' => [ 'px', '%' ],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 150,
					],
					'%' => [
						'min' => 0,
						'max' => 100,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 0,
				],
				'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-back .wpr-flip-box-image img' => 'border-radius: {{SIZE}}{{UNIT}};',
				],
				'condition' => [
					'back_icon_type' => 'image',
				],
			]
		);

// Icon
		$this->add_control(
			'back_icon_section',
			[
				'label' => esc_html__( 'Icon', 'wpr-addons' ),
				'type' => Controls_Manager::HEADING,
				'separator' => 'before',
				'condition' => [
					'back_icon_type' => 'icon',
				],
			]
		);

$this->add_control(
			'back_icon_color',
			[
				'label' => esc_html__( 'Color', 'wpr-addons' ),
				'type' => Controls_Manager::COLOR,
				'default' => '#ffffff',
				'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-back .wpr-flip-box-icon' => 'color: {{VALUE}};',
				],
				'condition' => [
					'back_icon_type' => 'icon',
				],
			]
		);

$this->add_control(
			'back_icon_size',
			[
				'label' => esc_html__( 'Font Size', 'wpr-addons' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px' ],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 300,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 40,
				],
				'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-back .wpr-flip-box-icon' => 'font-size: {{SIZE}}{{UNIT}};',
				],
				'condition' => [
					'back_icon_type' => 'icon',
				],
			]
		);

$this->add_control(
			'back_icon_distance',
			[
				'label' => esc_html__( 'Distance', 'wpr-addons' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px' ],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 150,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 7,
				],
				'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-back .wpr-flip-box-icon' => 'margin-bottom: {{SIZE}}{{UNIT}};',
				],
				'condition' => [
					'back_icon_type' => 'icon',
				],	
			]
		);

// Title
		$this->add_control(
			'back_title_section',
			[
				'label' => esc_html__( 'Backend Content', 'wpr-addons' ),
				'type' => Controls_Manager::HEADING,
				'separator' => 'before',
			]
		);

$this->add_control(
			'back_title_color',
			[
				'label' => esc_html__( 'Color', 'wpr-addons' ),
				'type' => Controls_Manager::COLOR,
				'default' => '#ffffff',
				'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-back .wpr-flip-box-title' => 'color: {{VALUE}};',
				],
			]
		);

$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'back_title_typography',
				'selector' => '{{WRAPPER}} .wpr-flip-box-back .wpr-flip-box-title',
			]
		);

$this->add_control(
			'back_title_distance',
			[
				'label' => esc_html__( 'Distance', 'wpr-addons' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px'],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 150,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 12,
				],
				'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-back .wpr-flip-box-title' => 'margin: 0 0 {{SIZE}}{{UNIT}};',
				],	
			]
		);

// Description
		$this->add_control(
			'back_description_section',
			[
				'label' => esc_html__( 'Description', 'wpr-addons' ),
				'type' => Controls_Manager::HEADING,
				'separator' => 'before',
			]
		);

$this->add_control(
			'back_description_color',
			[
				'label' => esc_html__( 'Color', 'wpr-addons' ),
				'type' => Controls_Manager::COLOR,
				'default' => '#ffffff',
				'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-back .wpr-flip-box-description' => 'color: {{VALUE}};',
				],
			]
		);

$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'back_description_typography',
				'selector' => '{{WRAPPER}} .wpr-flip-box-back .wpr-flip-box-description',
			]
		);

$this->add_control(
			'back_description_distance',
			[
				'label' => esc_html__( 'Distance', 'wpr-addons' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px'],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 150,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 20,
				],
				'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-back .wpr-flip-box-description' => 'margin-bottom: {{SIZE}}{{UNIT}};',
				],	
			]
		);

$this->end_controls_section(); // End Controls Section
		
		// Styles
		// Section: Front Button -----
		$this->start_controls_section(
			'wpr__section_style_front_btn',
			[
				'label' => esc_html__( 'Front Button', 'wpr-addons' ),
				'tab' => Controls_Manager::TAB_STYLE,
				'condition' => [
					'front_trigger' => 'btn',
				],
			]
		);

$this->start_controls_tabs( 'tabs_front_btn_colors' );

$this->start_controls_tab(
			'tab_front_btn_normal_colors',
			[
				'label' => esc_html__( 'Normal', 'wpr-addons' ),
			]
		);
		
		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name' => 'front_btn_bg_color',
				'types' => [ 'classic', 'gradient' ],
				'selector' => '{{WRAPPER}} .wpr-flip-box-front .wpr-flip-box-btn'
			]
		);

$this->add_control(
			'front_btn_color',
			[
				'label' => esc_html__( 'Text Color', 'wpr-addons' ),
				'type' => Controls_Manager::COLOR,
				'default' => '#ffffff',
				'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-front .wpr-flip-box-btn' => 'color: {{VALUE}}',
				],
			]
		);

$this->add_control(
			'front_btn_border_color',
			[
				'label' => esc_html__( 'Border Color', 'wpr-addons' ),
				'type' => Controls_Manager::COLOR,
				'default' => '#ffffff',
				'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-front .wpr-flip-box-btn' => 'border-color: {{VALUE}}',
				],
			]
		);

$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name' => 'front_btn_box_shadow',
				'selector' => '{{WRAPPER}} .wpr-flip-box-front .wpr-flip-box-btn',
			]
		);

$this->end_controls_tab();

$this->start_controls_tab(
			'tab_front_btn_hover_colors',
			[
				'label' => esc_html__( 'Hover', 'wpr-addons' ),
			]
		);

$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name' => 'front_btn_hover_bg_color',
				'types' => [ 'classic', 'gradient' ],
				'selector' => '{{WRAPPER}} .wpr-flip-box-front .wpr-flip-box-btn:hover, {{WRAPPER}} .wpr-flip-box-front .wpr-flip-box-btn:before, {{WRAPPER}} .wpr-flip-box-front .wpr-flip-box-btn:after',
			]
		);

$this->add_control(
			'front_btn_hover_color',
			[
				'label' => esc_html__( 'Text Color', 'wpr-addons' ),
				'type' => Controls_Manager::COLOR,
				'default' => '#ffffff',
				'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-front .wpr-flip-box-btn:hover' => 'color: {{VALUE}}',
				],
			]
		);

$this->add_control(
			'front_btn_hover_border_color',
			[
				'label' => esc_html__( 'Border Color', 'wpr-addons' ),
				'type' => Controls_Manager::COLOR,
				'default' => '#ffffff',
				'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-front .wpr-flip-box-btn:hover' => 'border-color: {{VALUE}}',
				],
			]
		);

$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name' => 'front_btn_hover_box_shadow',
				'selector' => '{{WRAPPER}} .wpr-flip-box-front .wpr-flip-box-btn:hover',
			]
		);

$this->end_controls_tab();

$this->end_controls_tabs();

$this->add_control(
			'front_btn_transition_duration',
			[
				'label' => esc_html__( 'Transition Duration', 'wpr-addons' ),
				'type' => Controls_Manager::NUMBER,
				'default' => 0.1,
				'min' => 0,
				'max' => 5,
				'step' => 0.1,
				'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-front .wpr-flip-box-btn' => 'transition-duration: {{VALUE}}s',
				],
				'separator' => 'before',
			]
		);

$this->add_control(
			'front_btn_typography_divider',
			[
				'type' => Controls_Manager::DIVIDER,
				'style' => 'thick',
			]
		);

$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'front_btn_typography',
				'selector' => '{{WRAPPER}} .wpr-flip-box-front .wpr-flip-box-btn',
				'separator' => 'before',
			]
		);

$this->add_responsive_control(
			'front_btn_padding',
			[
				'label' => esc_html__( 'Padding', 'wpr-addons' ),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', ],
				'default' => [
					'top' => 10,
					'right' => 10,
					'bottom' => 10,
					'left' => 10,
				],
				'selectors' => [
					'{{WRAPPER}}  .wpr-flip-box-front .wpr-flip-box-btn' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
				'separator' => 'before',
			]
		);

$this->add_control(
			'front_btn_border_type',
			[
				'label' => esc_html__( 'Border Type', 'wpr-addons' ),
				'type' => Controls_Manager::SELECT,
				'options' => [
					'none' => esc_html__( 'None', 'wpr-addons' ),
					'solid' => esc_html__( 'Solid', 'wpr-addons' ),
					'double' => esc_html__( 'Double', 'wpr-addons' ),
					'dotted' => esc_html__( 'Dotted', 'wpr-addons' ),
					'dashed' => esc_html__( 'Dashed', 'wpr-addons' ),
					'groove' => esc_html__( 'Groove', 'wpr-addons' ),
				],
				'default' => 'solid',
				'selectors' => [
					'{{WRAPPER}}  .wpr-flip-box-front .wpr-flip-box-btn' => 'border-style: {{VALUE}};',
				],
				'separator' => 'before',
			]
		);

$this->add_responsive_control(
			'front_btn_border_width',
			[
				'label' => esc_html__( 'Border Width', 'wpr-addons' ),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', ],
				'default' => [
					'top' => 2,
					'right' => 2,
					'bottom' => 2,
					'left' => 2,
				],
				'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-front .wpr-flip-box-btn' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
				'condition' => [
					'front_btn_border_type!' => 'none',
				],
			]
		);

$this->add_responsive_control(
			'front_btn_border_radius',
			[
				'label' => esc_html__( 'Border Radius', 'wpr-addons' ),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'default' => [
					'top' => 2,
					'right' => 2,
					'bottom' => 2,
					'left' => 2,
				],
				'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-front .wpr-flip-box-btn' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
				'separator' => 'before',
			]
		);

$this->end_controls_section(); // End Controls Section

// Styles
		// Section: Back Button ------
		$this->start_controls_section(
			'wpr__section_style_back_btn',
			[
				'label' => esc_html__( 'Back Button', 'wpr-addons' ),
				'tab' => Controls_Manager::TAB_STYLE,
				'condition' => [
					'back_link_type' => ['btn', 'btn-title']
				],
			]
		);

$this->start_controls_tabs( 'tabs_back_btn_colors' );

$this->start_controls_tab(
			'tab_back_btn_normal_colors',
			[
				'label' => esc_html__( 'Normal', 'wpr-addons' ),
			]
		);
		
		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name' => 'back_btn_bg_color',
				'types' => [ 'classic', 'gradient' ],
				'selector' => '{{WRAPPER}} .wpr-flip-box-back .wpr-flip-box-btn'
			]
		);

$this->add_control(
			'back_btn_color',
			[
				'label' => esc_html__( 'Text Color', 'wpr-addons' ),
				'type' => Controls_Manager::COLOR,
				'default' => '#ffffff',
				'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-back .wpr-flip-box-btn' => 'color: {{VALUE}}',
				],
			]
		);

$this->add_control(
			'back_btn_border_color',
			[
				'label' => esc_html__( 'Border Color', 'wpr-addons' ),
				'type' => Controls_Manager::COLOR,
				'default' => '#ffffff',
				'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-back .wpr-flip-box-btn' => 'border-color: {{VALUE}}',
				],
			]
		);

$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name' => 'back_btn_box_shadow',
				'selector' => '{{WRAPPER}} .wpr-flip-box-back .wpr-flip-box-btn',
			]
		);

$this->end_controls_tab();

$this->start_controls_tab(
			'tab_back_btn_hover_colors',
			[
				'label' => esc_html__( 'Hover', 'wpr-addons' ),
			]
		);

$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name' => 'back_btn_hover_bg_color',
				'types' => [ 'classic', 'gradient' ],
				'selector' => '{{WRAPPER}} .wpr-flip-box-back .wpr-flip-box-btn:hover, {{WRAPPER}} .wpr-flip-box-back .wpr-flip-box-btn:before, {{WRAPPER}} .wpr-flip-box-back .wpr-flip-box-btn:after',
			]
		);

$this->add_control(
			'back_btn_hover_color',
			[
				'label' => esc_html__( 'Text Color', 'wpr-addons' ),
				'type' => Controls_Manager::COLOR,
				'default' => '#ffffff',
				'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-back .wpr-flip-box-btn:hover' => 'color: {{VALUE}}',
				],
			]
		);

$this->add_control(
			'back_btn_hover_border_color',
			[
				'label' => esc_html__( 'Border Color', 'wpr-addons' ),
				'type' => Controls_Manager::COLOR,
				'default' => '#ffffff',
				'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-back .wpr-flip-box-btn:hover' => 'border-color: {{VALUE}}',
				],
			]
		);

$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name' => 'back_btn_hover_box_shadow',
				'selector' => '{{WRAPPER}} .wpr-flip-box-back .wpr-flip-box-btn:hover',
			]
		);

$this->end_controls_tab();

$this->end_controls_tabs();

$this->add_control(
			'back_btn_transition_duration',
			[
				'label' => esc_html__( 'Transition Duration', 'wpr-addons' ),
				'type' => Controls_Manager::NUMBER,
				'default' => 0.1,
				'min' => 0,
				'max' => 5,
				'step' => 0.1,
				'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-back .wpr-flip-box-btn' => 'transition-duration: {{VALUE}}s',
				],
				'separator' => 'before',
			]
		);

$this->add_control(
			'back_btn_typography_divider',
			[
				'type' => Controls_Manager::DIVIDER,
				'style' => 'thick',
			]
		);

$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'back_btn_typography',
				'selector' => '{{WRAPPER}} .wpr-flip-box-back .wpr-flip-box-btn',
				'separator' => 'before',
			]
		);

$this->add_responsive_control(
			'back_btn_padding',
			[
				'label' => esc_html__( 'Padding', 'wpr-addons' ),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', ],
				'default' => [
					'top' => 10,
					'right' => 10,
					'bottom' => 10,
					'left' => 10,
				],
				'selectors' => [
					'{{WRAPPER}}  .wpr-flip-box-back .wpr-flip-box-btn' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
				'separator' => 'before',
			]
		);

$this->add_control(
			'back_btn_border_type',
			[
				'label' => esc_html__( 'Border Type', 'wpr-addons' ),
				'type' => Controls_Manager::SELECT,
				'options' => [
					'none' => esc_html__( 'None', 'wpr-addons' ),
					'solid' => esc_html__( 'Solid', 'wpr-addons' ),
					'double' => esc_html__( 'Double', 'wpr-addons' ),
					'dotted' => esc_html__( 'Dotted', 'wpr-addons' ),
					'dashed' => esc_html__( 'Dashed', 'wpr-addons' ),
					'groove' => esc_html__( 'Groove', 'wpr-addons' ),
				],
				'default' => 'solid',
				'selectors' => [
					'{{WRAPPER}}  .wpr-flip-box-back .wpr-flip-box-btn' => 'border-style: {{VALUE}};',
				],
				'separator' => 'before',
			]
		);

$this->add_responsive_control(
			'back_btn_border_width',
			[
				'label' => esc_html__( 'Border Width', 'wpr-addons' ),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', ],
				'default' => [
					'top' => 2,
					'right' => 2,
					'bottom' => 2,
					'left' => 2,
				],
				'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-back .wpr-flip-box-btn' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
				'condition' => [
					'back_btn_border_type!' => 'none',
				],
			]
		);

$this->add_responsive_control(
			'back_btn_border_radius',
			[
				'label' => esc_html__( 'Border Radius', 'wpr-addons' ),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'default' => [
					'top' => 2,
					'right' => 2,
					'bottom' => 2,
					'left' => 2,
				],
				'selectors' => [
					'{{WRAPPER}} .wpr-flip-box-back .wpr-flip-box-btn' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
				'separator' => 'before',
			]
		);

$this->end_controls_section(); // End Controls Section
	}

protected function render() {

$settings = $this->get_settings_for_display();
		$settings_old = $this->get_settings();

$front_image_src = Group_Control_Image_Size::get_attachment_image_src( $settings_old['front_image']['id'], 'front_image_size', $settings_old );

if ( ! $front_image_src ) {
			$front_image_src = $settings_old['front_image']['url'];
		}

if ( isset($settings['front_image']['alt']) ) {
			$front_alt_text = $settings['front_image']['alt'];
		} else {
			$front_alt_text = '';
		}

$back_image_src = Group_Control_Image_Size::get_attachment_image_src( $settings_old['back_image']['id'], 'back_image_size', $settings_old );

if ( ! $back_image_src ) {
			$back_image_src = $settings_old['back_image']['url'];
		}

if ( isset($settings['back_image']['alt']) ) {
			$back_alt_text = $settings['back_image']['alt'];
		} else {
			$back_alt_text = '';
		}

$back_btn_element = 'div';
		$back_link = $settings_old['back_link']['url'];

if ( '' !== $back_link ) {

$back_btn_element = 'a';

$this->add_render_attribute( 'link_attribute', 'href', esc_url( $back_link ) );

if ( $settings_old['back_link']['is_external'] ) {
				$this->add_render_attribute( 'link_attribute', 'target', '_blank' );
			}

if ( $settings_old['back_link']['nofollow'] ) {
				$this->add_render_attribute( 'link_attribute', 'nofollow', '' );
			}
		}

?>
			
		<div class="wpr-flip-box" data-trigger="<?php echo esc_attr( $settings['front_trigger'] ); ?>">
			
			<div class="wpr-flip-box-item wpr-flip-box-front wpr-anim-timing-<?php echo esc_attr( $settings['box_anim_timing'] ); ?>">

<?php if ( '' !== $settings['front_description'] ) : ?>
						<div class="wpr-flip-box-description"><?php echo wp_kses_post($settings['front_description']); ?></div>						
					<?php endif; ?>

<?php if ( 'btn' === $settings['front_trigger'] ) : ?>
						<div class="wpr-flip-box-btn-wrap">
							<div class="wpr-flip-box-btn">
								<?php if ( '' !== $settings['front_btn_text'] ) : ?>
								<span class="wpr-flip-box-btn-text"><?php echo esc_html($settings['front_btn_text']); ?></span>		
								<?php endif; ?>

<?php if ( '' !== $settings['front_btn_icon']['value'] ) : ?>
								<span class="wpr-flip-box-btn-icon">
									<i class="<?php echo esc_attr( $settings['front_btn_icon']['value'] ); ?>"></i>
								</span>
								<?php endif; ?>
							</div>	
						</div>						
					<?php endif; ?>

</div>
			</div>

<div class="wpr-flip-box-overlay"></div>
				
				<div class="wpr-flip-box-content">
					
					<?php if ( 'box' === $settings['back_link_type'] ): ?>
					<a class="wpr-flip-box-link" <?php echo $this->get_render_attribute_string( 'link_attribute' ); ?>></a>	
					<?php endif; ?>

<?php if ( 'icon' === $settings['back_icon_type'] && '' !== $settings['back_icon']['value'] ) : ?>
					<div class="wpr-flip-box-icon">
						<i class="<?php echo esc_attr( $settings['back_icon']['value'] ); ?>"></i>
					</div>
					<?php elseif ( 'image' === $settings['back_icon_type'] && $back_image_src ) : ?>
						<div class="wpr-flip-box-image">
							<img alt="<?php echo esc_attr( $back_alt_text ); ?>" src="<?php echo esc_url( $back_image_src ); ?>" >
						</div>
					<?php endif; ?>
					
					<?php if ( '' !== $settings['back_title'] ) : ?>
						<h3 class="wpr-flip-box-title">
							<?php
							if ( 'title' === $settings['back_link_type'] || 'btn-title' === $settings['back_link_type']  ) {
								echo '<a '. $this->get_render_attribute_string( 'link_attribute' ).'>';
							}

echo wp_kses_post($settings['back_title']);
						
							if ( 'title' === $settings['back_link_type'] || 'btn-title' === $settings['back_link_type']  ) {
								echo '</a>';
							}
							?>
						</h3>
					<?php endif; ?>

<?php if ( '' !== $settings['back_description'] ) : ?>
						<div class="wpr-flip-box-description"><?php echo wp_kses_post($settings['back_description']); ?></div>						
					<?php endif; ?>

<?php if ( 'btn' === $settings['back_link_type'] || 'btn-title' === $settings['back_link_type'] ) : ?>

<div class="wpr-flip-box-btn-wrap">
							<?php echo '<'. esc_html($back_btn_element) .' class="wpr-flip-box-btn" '. $this->get_render_attribute_string( 'link_attribute' ) .'>'; ?>

<?php if ( '' !== $settings['back_btn_text'] ) : ?>
								<span class="wpr-flip-box-btn-text"><?php echo esc_html($settings['back_btn_text']); ?></span>		
								<?php endif; ?>

<?php if ( '' !== $settings['back_btn_icon']['value'] ) : ?>
								<span class="wpr-flip-box-btn-icon">
									<i class="<?php echo esc_attr( $settings['back_btn_icon']['value'] ); ?>"></i>
								</span>
								<?php endif; ?>

<?php echo '</'. esc_html($back_btn_element) .'>'; ?>
						</div>						
					<?php endif; ?>

</div>
			</div>
		</div>

<?php

}
}