<?php

/**
 * @package JPageBuilder
 * @author Joomla! Extensions Store
 * @copyright (C) 2024 - Joomla! Extensions Store
 * @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or later
 */
// No direct access
defined ( '_JEXEC' ) or die ( 'Restricted access' );

use Joomla\CMS\Uri\Uri;

/**
 * Flip box pro addon class.
 *
 * @since 4.0.0
 */
class JpagebuilderAddonFlip_box_pro extends JpagebuilderAddons {
	/**
	 * The addon frontend render method.
	 * The returned HTML string will render to the frontend page.
	 *
	 * @return string The HTML string.
	 * @since 4.0.0
	 */
	public function render() {
		$settings = $this->addon->settings;
		$class = (isset ( $settings->class ) && $settings->class) ? $settings->class : '';

		// front content
		$front_add_icon = (isset ( $settings->front_add_icon ) && $settings->front_add_icon) ? $settings->front_add_icon : 0;
		$front_icon = (isset ( $settings->front_icon ) && $settings->front_icon) ? $settings->front_icon : "";

		$front_add_title = (isset ( $settings->front_add_title ) && $settings->front_add_title) ? $settings->front_add_title : 0;
		$front_title = (isset ( $settings->front_title ) && $settings->front_title) ? $settings->front_title : "";

		$front_add_paragraph = (isset ( $settings->front_add_paragraph ) && $settings->front_add_paragraph) ? $settings->front_add_paragraph : 0;
		$front_paragraph = (isset ( $settings->front_paragraph ) && $settings->front_paragraph) ? $settings->front_paragraph : "";

		// back content
		$back_add_icon = (isset ( $settings->back_add_icon ) && $settings->back_add_icon) ? $settings->back_add_icon : 0;
		$back_icon = (isset ( $settings->back_icon ) && $settings->back_icon) ? $settings->back_icon : "";

		$back_add_title = (isset ( $settings->back_add_title ) && $settings->back_add_title) ? $settings->back_add_title : 0;
		$back_title = (isset ( $settings->back_title ) && $settings->back_title) ? $settings->back_title : "";

		$back_add_paragraph = (isset ( $settings->back_add_paragraph ) && $settings->back_add_paragraph) ? $settings->back_add_paragraph : 0;
		$back_paragraph = (isset ( $settings->back_paragraph ) && $settings->back_paragraph) ? $settings->back_paragraph : "";

		// front button options
		$front_add_button = (isset ( $settings->front_add_button ) && $settings->front_add_button) ? $settings->front_add_button : 0;
		$front_show_button = $settings->flip_behavior == "click" && $front_add_button && (isset ( $settings->front_button_text ) && trim ( $settings->front_button_text ));
		$front_button_text = (isset ( $settings->front_button_text ) && trim ( $settings->front_button_text )) ? $settings->front_button_text : "";
		$front_btn_class = '';
		$front_btn_class .= (isset ( $settings->front_button_type ) && $settings->front_button_type) ? ' jpb-btn-' . $settings->front_button_type : '';
		$front_btn_class .= (isset ( $settings->front_button_size ) && $settings->front_button_size) ? ' jpb-btn-' . $settings->front_button_size : '';
		$front_btn_class .= (isset ( $settings->front_shape ) && $settings->front_shape) ? ' jpb-btn-' . $settings->front_shape : ' jpb-btn-rounded';
		$front_btn_class .= (isset ( $settings->front_appearance ) && $settings->front_appearance) ? ' jpb-btn-' . $settings->front_appearance : '';
		$front_btn_class .= (isset ( $settings->front_block ) && $settings->front_block) ? ' ' . $settings->front_block : '';

		$front_btn_icon = (isset ( $settings->front_flip_box_icon ) && $settings->front_flip_box_icon) ? $settings->front_flip_box_icon : '';
		$front_btn_icon_position = (isset ( $settings->front_flip_box_button_icon_position ) && $settings->front_flip_box_button_icon_position) ? $settings->front_flip_box_button_icon_position : 'left';

		list ( $btn_link, $front_btn_link_target ) = JpagebuilderAddonHelper::parseLink ( $settings, 'front_flip_box_button_link', [ 
				'url' => 'front_flip_box_button_link',
				'new_tab' => 'btn_target'
		] );

		$front_attribs = (isset ( $front_btn_link_target ) && $front_btn_link_target) ? $front_btn_link_target : '';
		$front_attribs .= (! empty ( $btn_link )) ? ' href="' . $btn_link . '"' : '';
		$front_attribs .= ' id="btn-' . $this->addon->id . '"';

		$front_icon_arr = array_filter ( explode ( ' ', $front_btn_icon ) );

		$front_btn_icon = $front_btn_icon;
		if (count ( $front_icon_arr ) === 1) {
			$front_btn_icon = 'fas ' . $front_btn_icon;
		}

		if ($front_btn_icon_position === 'left') {
			$front_button_text = ($front_btn_icon) ? '<i class="' . $front_btn_icon . '" aria-hidden="true"></i> ' . $front_button_text : $front_button_text;
		} else {
			$front_button_text = ($front_btn_icon) ? $front_button_text . ' <i class="' . $front_btn_icon . '" aria-hidden="true"></i>' : $front_button_text;
		}

		// back button options
		$back_add_button = (isset ( $settings->back_add_button ) && $settings->back_add_button) ? $settings->back_add_button : 0;
		$back_show_button = $back_add_button && (isset ( $settings->back_button_text ) && trim ( $settings->back_button_text ));
		$back_button_text = (isset ( $settings->back_button_text ) && trim ( $settings->back_button_text )) ? $settings->back_button_text : "";
		$back_btn_class = '';
		$back_btn_class .= (isset ( $settings->back_button_type ) && $settings->back_button_type) ? ' jpb-btn-' . $settings->back_button_type : '';
		$back_btn_class .= (isset ( $settings->back_button_size ) && $settings->back_button_size) ? ' jpb-btn-' . $settings->back_button_size : '';
		$back_btn_class .= (isset ( $settings->back_shape ) && $settings->back_shape) ? ' jpb-btn-' . $settings->back_shape : ' jpb-btn-rounded';
		$back_btn_class .= (isset ( $settings->back_appearance ) && $settings->back_appearance) ? ' jpb-btn-' . $settings->back_appearance : '';
		$back_btn_class .= (isset ( $settings->back_block ) && $settings->back_block) ? ' ' . $settings->back_block : '';

		$back_btn_icon = (isset ( $settings->back_flip_box_icon ) && $settings->back_flip_box_icon) ? $settings->back_flip_box_icon : '';
		$back_btn_icon_position = (isset ( $settings->back_flip_box_button_icon_position ) && $settings->back_flip_box_button_icon_position) ? $settings->back_flip_box_button_icon_position : 'left';

		list ( $btn_link, $back_btn_link_target ) = JpagebuilderAddonHelper::parseLink ( $settings, 'back_flip_box_button_link', [ 
				'url' => 'back_flip_box_button_link',
				'new_tab' => 'btn_target'
		] );

		$back_attribs = (isset ( $back_btn_link_target ) && $back_btn_link_target) ? $back_btn_link_target : '';
		$back_attribs .= (! empty ( $btn_link )) ? ' href="' . $btn_link . '"' : '';
		$back_attribs .= ' id="btn-' . $this->addon->id . '"';

		$back_icon_arr = array_filter ( explode ( ' ', $back_btn_icon ) );
		$back_btn_icon = $back_btn_icon;

		if (count ( $back_icon_arr ) === 1) {
			$back_btn_icon = 'fas ' . $back_btn_icon;
		}

		if ($back_btn_icon_position === 'left') {
			$back_button_text = ($back_btn_icon) ? '<i class="' . $back_btn_icon . '" aria-hidden="true"></i> ' . $back_button_text : $back_button_text;
		} else {
			$back_button_text = ($back_btn_icon) ? $back_button_text . ' <i class="' . $back_btn_icon . '" aria-hidden="true"></i>' : $back_button_text;
		}

		$rotate = (isset ( $settings->rotate ) && $settings->rotate) ? $settings->rotate : 'flip_right';
		// Flip Behavior
		$flip_behavior = (isset ( $settings->flip_behavior ) && $settings->flip_behavior) ? $settings->flip_behavior : 'hover';
		// Flip Style
		$flip_style = (isset ( $settings->flip_style ) && $settings->flip_style) ? $settings->flip_style : 'rotate_style';

		if ($flip_style != "") {
			if ($flip_style == "slide_style") {
				$flip_style = "slide-flipbox";
			} else if ($flip_style == "fade_style") {
				$flip_style = "fade-flipbox";
			} else if ($flip_style == "threeD_style") {
				$flip_style = "threeD-flipbox";
			}
		}

		$output = '';
		$output .= '<div class="jpb-addon jpb-addon-jpb-flibox ' . $class . ' ' . $flip_style . ' ' . $rotate . ' flipon-' . $flip_behavior . '">';

		if ($flip_style == 'threeD-flipbox') {
			$output .= '<div class="threeD-content-wrap">';
			$output .= '<div class="threeD-item">';
			$output .= '<div class="threeD-flip-front">';
			$output .= '<div class="threeD-content-inner">';
			if ($front_add_icon) {
				$output .= '<div class="jpb-flipbox-front-icon" data-fieldName="front_icon">
                <i class="';
				$output .= $front_icon;
				$output .= '"></i>
                </div>';
			}

			if ($front_add_title) {
				$output .= '<div class="jpb-flipbox-front-title" data-fieldName="front_title">';
				$output .= $front_title;
				$output .= '</div>';
			}

			if ($front_add_paragraph) {
				$output .= '<div class="jpb-flipbox-front-paragraph" data-fieldName="front_paragraph">';
				$output .= $front_paragraph;
				$output .= '</div>';
			}

			if ($front_show_button) {
				$output .= '<div class="jpb-flipbox-front-button" data-fieldName="front_button">';
				$output .= '<a ' . $front_attribs . ' class="jpb-btn ' . $front_btn_class . '">' . $front_button_text . '</a>';
				$output .= '</div>';
			}
			$output .= '</div>';
			$output .= '</div>';
			$output .= '<div class="threeD-flip-back">';
			$output .= '<div class="threeD-content-inner">';
			if ($back_add_icon) {
				$output .= '<div class="jpb-flipbox-back-icon" data-fieldName="back_icon">
                <i class="';
				$output .= $back_icon;
				$output .= '"></i>
                </div>';
			}

			if ($back_add_title) {
				$output .= '<div class="jpb-flipbox-back-title" data-fieldName="back_title">';
				$output .= $back_title;
				$output .= '</div>';
			}

			if ($back_add_paragraph) {
				$output .= '<div class="jpb-flipbox-back-paragraph" data-fieldName="back_paragraph">';
				$output .= $back_paragraph;
				$output .= '</div>';
			}

			if ($back_show_button) {
				$output .= '<div class="jpb-flipbox-back-button" data-fieldName="back_button">';
				$output .= '<a ' . $back_attribs . ' class="jpb-btn ' . $back_btn_class . '">' . $back_button_text . '</a>';
				$output .= '</div>';
			}
			$output .= '</div>';
			$output .= '</div >';
			$output .= '</div>'; // .threeD-item
			$output .= '</div>'; // .threeD-content-wrap
		} else {

			$output .= '<div class="jpb-flipbox-panel">';
			$output .= '<div class="jpb-flipbox-front flip-box">';
			$output .= '<div class="flip-box-inner">';
			if ($front_add_icon) {
				$output .= '<div class="jpb-flipbox-front-icon" data-fieldName="front_icon">
                <i class="';
				$output .= $front_icon;
				$output .= '"></i>
                </div>';
			}

			if ($front_add_title) {
				$output .= '<div class="jpb-flipbox-front-title" data-fieldName="front_title">';
				$output .= $front_title;
				$output .= '</div>';
			}

			if ($front_add_paragraph) {
				$output .= '<div class="jpb-flipbox-front-paragraph" data-fieldName="front_paragraph">';
				$output .= $front_paragraph;
				$output .= '</div>';
			}

			if ($front_show_button) {
				$output .= '<div class="jpb-flipbox-front-button" data-fieldName="front_title">';
				$output .= '<a ' . $front_attribs . ' class="jpb-btn ' . $front_btn_class . '">' . $front_button_text . '</a>';
				$output .= '</div>';
			}
			$output .= '</div>'; // .flip-box-inner
			$output .= '</div>'; // .front
			$output .= '<div class="jpb-flipbox-back flip-box">';
			$output .= '<div class="flip-box-inner">';
			if ($back_add_icon) {
				$output .= '<div class="jpb-flipbox-back-icon" data-fieldName="back_icon">
                <i class="';
				$output .= $back_icon;
				$output .= '"></i>
                </div>';
			}

			if ($back_add_title) {
				$output .= '<div class="jpb-flipbox-back-title" data-fieldName="back_title">';
				$output .= $back_title;
				$output .= '</div>';
			}

			if ($back_add_paragraph) {
				$output .= '<div class="jpb-flipbox-back-paragraph" data-fieldName="back_paragraph">';
				$output .= $back_paragraph;
				$output .= '</div>';
			}

			if ($back_show_button) {
				$output .= '<div class="jpb-flipbox-back-button" data-fieldName="back_title">';
				$output .= '<a ' . $back_attribs . ' class="jpb-btn ' . $back_btn_class . '">' . $back_button_text . '</a>';
				$output .= '</div>';
			}
			$output .= '</div>'; // .flip-box-inner
			$output .= '</div>'; // .back
			$output .= '</div>'; // .jpb-flipbox-panel
		}
		$output .= '</div>'; // .jpb-addon-jpb-flibox

		return $output;
	}

	/**
	 * Generate the CSS string for the frontend page.
	 *
	 * @return string The CSS string for the page.
	 * @since 4.0.0
	 */
	public function css() {
		$addon_id = '#jpb-addon-' . $this->addon->id;
		$settings = $this->addon->settings;
		$cssHelper = new JpagebuilderCSSHelper ( $addon_id );
		$css = '';

		$flip_style = (isset ( $settings->flip_style ) && $settings->flip_style) ? $settings->flip_style : 'rotate_style';

		if ($flip_style != "") {
			if ($flip_style == "slide_style") {
				$flip_style = "slide-flipbox";
			} else if ($flip_style == "fade_style") {
				$flip_style = "fade-flipbox";
			} else if ($flip_style == "threeD_style") {
				$flip_style = "threeD-flipbox";
			}
		}

		$border_styles = isset ( $settings->border_styles ) && ($settings->border_styles) ? $settings->border_styles : "";

		$flip_styles = "";

		if (is_array ( $border_styles )) {
			if (in_array ( 'border_radius', $border_styles )) {
				$flip_styles .= "border-style: dashed;";
			}

			if (in_array ( 'dashed', $border_styles )) {
				$flip_styles .= "border-style: solid;";
			}

			if (in_array ( 'dotted', $border_styles )) {
				$flip_styles .= "border-style: dotted;";
			}

			if (in_array ( 'border_radius', $border_styles ) || in_array ( 'dashed', $border_styles ) || in_array ( 'dotted', $border_styles )) {
				$flip_styles .= "border-width: 2px;";
				$flip_styles .= "border-color:" . $settings->border_color . ";";
			}
		}

		$css .= ' #jpb-addon-{{ data.id }} .jpb-flipbox-panel,
       #jpb-addon-{{ data.id }} .threeD-item{' . $flip_styles . '}';

		// Front BG style
		$front_bg_type = (isset ( $settings->front_bg_type ) && ($settings->front_bg_type)) ? $settings->front_bg_type : "color";
		$front_bg_inner_type = (isset ( $settings->front_bg_type ) && ($settings->front_bg_inner_type)) ? $settings->front_bg_inner_type : "none";

		$frontBgProps = '';
		$frontBgStyle = '';

		if ($front_bg_type == "color") {
			if ($front_bg_inner_type == "color") {
				$frontBgProps = [ 
						'front_bg_color' => 'background: %s'
				];
				$frontBgStyle = $cssHelper->generateStyle ( '.jpb-flipbox-front, .threeD-flip-front', $settings, $frontBgProps, false );
			}
			if ($front_bg_inner_type == "gradient") {
				$settings->front_bg_gradient = JpagebuilderCSSHelper::parseColor ( $settings, 'front_bg_gradient' );
				$frontBgProps = [ 
						'front_bg_gradient' => 'background: %s'
				];
				$frontBgStyle = $cssHelper->generateStyle ( '.jpb-flipbox-front, .threeD-flip-front', $settings, $frontBgProps, false );
			}
		}

		$frontImg = array ();
		$front_bgimg = "";
		if ($front_bg_type == "image") {
			if (isset ( $settings->front_bgimg ) && isset ( $settings->front_bgimg->src )) {
				$frontImg = $settings->front_bgimg;
			} else {
				$frontImg = array (
						'src' => $settings->front_bgimg
				);
			}

			$front_bgimg_src = isset ( $frontImg->src ) ? $frontImg->src : $front_bgimg;

			if ($front_bgimg_src) {
				if (preg_match ( "@^https?:\/\/@", $front_bgimg_src )) {
					$front_bgimg = $front_bgimg_src;
				} else {
					$front_bgimg = Uri::root () . $front_bgimg_src;
				}

				$settings->front_bg_image = $front_bgimg;
			}

			$frontBgProps = [ 
					'front_bg_image' => 'background-image: url(%s)'
			];

			$frontBgStyle = $cssHelper->generateStyle ( '.jpb-flipbox-front, .threeD-flip-front', $settings, $frontBgProps, false );
		}

		// Back BG style
		$back_bg_type = (isset ( $settings->back_bg_type ) && ($settings->back_bg_type)) ? $settings->back_bg_type : "color";
		$back_bg_inner_type = (isset ( $settings->back_bg_type ) && ($settings->back_bg_inner_type)) ? $settings->back_bg_inner_type : "none";

		$backBgProps = '';
		$backBgStyle = '';

		if ($back_bg_type == "color") {
			if ($back_bg_inner_type == "color") {
				$backBgProps = [ 
						'back_bg_color' => 'background: %s'
				];
				$backBgStyle = $cssHelper->generateStyle ( '.jpb-flipbox-back, .threeD-flip-back', $settings, $backBgProps, false );
			}
			if ($back_bg_inner_type == "gradient") {
				$settings->back_bg_gradient = JpagebuilderCSSHelper::parseColor ( $settings, 'back_bg_gradient' );
				$backBgProps = [ 
						'back_bg_gradient' => 'background: %s'
				];
				$backBgStyle = $cssHelper->generateStyle ( '.jpb-flipbox-back, .threeD-flip-back', $settings, $backBgProps, false );
			}
		}

		$backImg = array ();
		$back_bgimg = "";
		if ($back_bg_type == "image") {
			if (isset ( $settings->back_bgimg ) && isset ( $settings->back_bgimg->src )) {
				$backImg = $settings->back_bgimg;
			} else {
				$backImg = array (
						'src' => $settings->back_bgimg
				);
			}

			$back_bgimg_src = isset ( $backImg->src ) ? $backImg->src : $back_bgimg;

			if ($back_bgimg_src) {
				if (preg_match ( "@^https?:\/\/@", $back_bgimg_src )) {
					$back_bgimg = $back_bgimg_src;
				} else {
					$back_bgimg = Uri::root () . $back_bgimg_src;
				}

				$settings->back_bg_image = $back_bgimg;
			}

			$backBgProps = [ 
					'back_bg_image' => 'background-image: url(%s)'
			];

			$backBgStyle = $cssHelper->generateStyle ( '.jpb-flipbox-back, .threeD-flip-back', $settings, $backBgProps, false );
		}

		// radius
		$front_border_radius = explode ( " ", $settings->front_flip_box_radius );
		$frontBorderRadius = '';
		if (count ( $front_border_radius ) > 2) {
			$frontBorderRadius = $cssHelper->generateStyle ( '.jpb-flipbox-front, .threeD-flip-front', $settings, [ 
					'front_flip_box_radius' => 'border-radius'
			], [ 
					'front_flip_box_radius' => false
			] );
		} else {
			$frontBorderRadius = $cssHelper->generateStyle ( '.jpb-flipbox-front, .threeD-flip-front', $settings, [ 
					'front_flip_box_radius' => 'border-radius'
			] );
		}

		$back_border_radius = explode ( " ", $settings->back_flip_box_radius );
		$backBorderRadius = '';
		if (count ( $back_border_radius ) > 2) {
			$backBorderRadius = $cssHelper->generateStyle ( '.jpb-flipbox-back, .threeD-flip-back', $settings, [ 
					'back_flip_box_radius' => 'border-radius'
			], [ 
					'back_flip_box_radius' => false
			] );
		} else {
			$backBorderRadius = $cssHelper->generateStyle ( '.jpb-flipbox-back, .threeD-flip-back', $settings, [ 
					'back_flip_box_radius' => 'border-radius'
			] );
		}

		// color
		$frontTitleColor = $cssHelper->generateStyle ( '.jpb-flipbox-front-title', $settings, [ 
				'front_title_text_color' => 'color'
		], false );
		$backTitleColor = $cssHelper->generateStyle ( '.jpb-flipbox-back-title', $settings, [ 
				'back_title_text_color' => 'color'
		], false );
		$frontParagraphColor = $cssHelper->generateStyle ( '.jpb-flipbox-front-paragraph', $settings, [ 
				'front_paragraph_text_color' => 'color'
		], false );
		$backParagraphColor = $cssHelper->generateStyle ( '.jpb-flipbox-back-paragraph', $settings, [ 
				'back_paragraph_text_color' => 'color'
		], false );

		$frontIconColor = '';
		if (isset ( $settings->front_global_background_type ) && $settings->front_global_background_type == "color") {
			$frontIconColor = $cssHelper->generateStyle ( '.jpb-flipbox-front-icon', $settings, [ 
					'front_flip_box_icon_color' => 'color'
			], false );
		} else if ($settings->front_global_background_type == "gradient") {
			$frontIconColor = $cssHelper->generateStyle ( '.jpb-flipbox-back-icon', $settings, [ 
					'front_flip_box_icon_gradient' => 'color'
			], false );
		}

		$backIconColor = '';
		if (isset ( $settings->back_global_background_type ) && $settings->back_global_background_type == "color") {
			$backIconColor = $cssHelper->generateStyle ( '.jpb-flipbox-back-icon', $settings, [ 
					'back_flip_box_icon_color' => 'color'
			], false );
		} else if (isset ( $settings->back_global_background_type ) && $settings->back_global_background_type == "gradient") {
			$settings->back_flip_box_icon_gradient = JpagebuilderCSSHelper::parseColor ( $settings, 'back_flip_box_icon_gradient' );
			$backIconColor = $cssHelper->generateStyle ( '.jpb-flipbox-back-icon', $settings, [ 
					'back_flip_box_icon_gradient' => 'color'
			], false );
		}

		// typography
		$frontTitleTypo = $cssHelper->typography ( '.jpb-flipbox-front-title', $settings, 'front_title_typography' );
		$backTitleTypo = $cssHelper->typography ( '.jpb-flipbox-back-title', $settings, 'back_title_typography' );
		$frontParagraphTypo = $cssHelper->typography ( '.jpb-flipbox-front-paragraph', $settings, 'front_paragraph_typography' );
		$backParagraphTypo = $cssHelper->typography ( '.jpb-flipbox-back-paragraph', $settings, 'back_paragraph_typography' );

		$frontIconSize = $cssHelper->generateStyle ( '.jpb-flipbox-front-icon', $settings, [ 
				'front_icon_size' => 'font-size'
		], 'px' );
		$backIconSize = $cssHelper->generateStyle ( '.jpb-flipbox-back-icon', $settings, [ 
				'back_icon_size' => 'font-size'
		], 'px' );

		// margin and padding
		$frontIconMargin = $cssHelper->generateStyle ( '.jpb-flipbox-front-icon', $settings, [ 
				'front_flip_box__margin' => 'margin'
		], false );
		$backIconMargin = $cssHelper->generateStyle ( '.jpb-flipbox-back-icon', $settings, [ 
				'back_flip_box__margin' => 'margin'
		], false );
		$frontIconPadding = $cssHelper->generateStyle ( '.jpb-flipbox-front-icon', $settings, [ 
				'front_flip_box__padding' => 'padding'
		], false );
		$backIconPadding = $cssHelper->generateStyle ( '.jpb-flipbox-back-icon', $settings, [ 
				'front_flip_box__padding' => 'padding'
		], false );

		// front button
		$css .= $cssHelper->typography ( '.jpb-flipbox-front-button .jpb-btn', $settings, 'front_flip_box_button_typography' );
		if (isset ( $settings->front_button_size ) && $settings->front_button_size == "custom") {
			$css .= $cssHelper->generateStyle ( '.jpb-flipbox-front-button .jpb-btn', $settings, [ 
					'front_button_padding' => 'padding'
			], false );
		}
		$css .= $cssHelper->generateStyle ( '.jpb-flipbox-front-button .jpb-btn', $settings, [ 
				'front_button_margin' => 'margin'
		], false );
		if (isset ( $settings->front_block ) && $settings->front_block == "jpb-btn-block") {
			$css .= '#jpb-addon-' . $settings->id . ' .jpb-flipbox-front-button .jpb-btn {display: block;}';
		}

		// custom style
		if (isset ( $settings->front_button_type ) && $settings->front_button_type == "custom") {
			$css .= $cssHelper->generateStyle ( '.jpb-flipbox-front-button .jpb-btn', $settings, [ 
					'front_flip_box_button_color' => 'color'
			], false );
			$css .= $cssHelper->generateStyle ( '.jpb-flipbox-front-button .jpb-btn:hover', $settings, [ 
					'front_flip_box_button_color_hover' => 'color'
			], false );

			if (isset ( $settings->front_appearance ) && $settings->front_appearance == "outline") {
				$css .= '#jpb-addon-{{ data.id }} .jpb-flipbox-front-button .jpb-btn {background-color: transparent;}';
				$css .= $cssHelper->generateStyle ( '.jpb-flipbox-front-button .jpb-btn', $settings, [ 
						'front_flip_box_button_bg_color' => 'border-color'
				], false );
				$css .= $cssHelper->generateStyle ( '.jpb-flipbox-front-button .jpb-btn:hover', $settings, [ 
						'front_flip_box_button_bg_color_hover' => 'border-color'
				], false );
			} else if (isset ( $settings->front_appearance ) && $settings->front_appearance == "gradient") {
				$settings->front_flip_box_button_bg_gradient = JpagebuilderCSSHelper::parseColor ( $settings, 'front_flip_box_button_bg_gradient' );
				$settings->front_flip_box_button_gradient_bg_hover = JpagebuilderCSSHelper::parseColor ( $settings, 'front_flip_box_button_gradient_bg_hover' );

				$css .= '#jpb-addon-{{ data.id }} .jpb-btn {border: none;}';
				$css .= $cssHelper->generateStyle ( '.jpb-flipbox-front-button .jpb-btn', $settings, [ 
						'front_flip_box_button_bg_gradient' => 'background-color'
				], false );
				$css .= $cssHelper->generateStyle ( '.jpb-flipbox-front-button .jpb-btn:hover', $settings, [ 
						'front_flip_box_button_gradient_bg_hover' => 'background-color'
				], false );
			} else {
				$css .= $cssHelper->generateStyle ( '.jpb-flipbox-front-button .jpb-btn', $settings, [ 
						'front_flip_box_button_bg_color' => 'background-color'
				], false );
				$css .= $cssHelper->generateStyle ( '.jpb-flipbox-front-button .jpb-btn:hover', $settings, [ 
						'front_flip_box_button_bg_color_hover' => 'background-color'
				], false );
			}
		}

		// front link
		if (isset ( $settings->front_button_type ) && $settings->front_button_type == "link") {
			$css .= '#jpb-addon-{{ data.id }} .jpb-btn {padding: 0; border-width: 0; text-decoration: none; border-radius: 0;}';
			$css .= $cssHelper->generateStyle ( '.jpb-flipbox-front-button .jpb-btn', $settings, [ 
					'front_flip_box_button_color' => 'color'
			], false );
			$css .= $cssHelper->generateStyle ( '.jpb-flipbox-front-button .jpb-btn:hover, .jpb-btn:focus', $settings, [ 
					'front_flip_box_button_color_hover' => 'color'
			], false );
		}

		// back button
		$css .= $cssHelper->typography ( '.jpb-flipbox-back-button .jpb-btn', $settings, 'back_flip_box_button_typography' );
		if (isset ( $settings->back_button_size ) && $settings->back_button_size == "custom") {
			$css .= $cssHelper->generateStyle ( '.jpb-flipbox-back-button .jpb-btn', $settings, [ 
					'back_button_padding' => 'padding'
			], false );
		}
		$css .= $cssHelper->generateStyle ( '.jpb-flipbox-back-button .jpb-btn', $settings, [ 
				'back_button_margin' => 'margin'
		], false );
		if (isset ( $settings->back_block ) && $settings->back_block == "jpb-btn-block") {
			$css .= '#jpb-addon-' . $settings->id . ' .jpb-flipbox-back-button .jpb-btn {display: block;}';
		}

		// custom style
		if (isset ( $settings->back_button_type ) && $settings->back_button_type == "custom") {
			$css .= $cssHelper->generateStyle ( '.jpb-flipbox-back-button .jpb-btn', $settings, [ 
					'back_flip_box_button_color' => 'color'
			], false );
			$css .= $cssHelper->generateStyle ( '.jpb-flipbox-back-button .jpb-btn:hover', $settings, [ 
					'back_flip_box_button_color_hover' => 'color'
			], false );

			if (isset ( $settings->back_appearance ) && $settings->back_appearance == "outline") {
				$css .= '#jpb-addon-{{ data.id }} .jpb-flipbox-back-button .jpb-btn {background-color: transparent;}';
				$css .= $cssHelper->generateStyle ( '.jpb-flipbox-back-button .jpb-btn', $settings, [ 
						'back_flip_box_button_bg_color' => 'border-color'
				], false );
				$css .= $cssHelper->generateStyle ( '.jpb-flipbox-back-button .jpb-btn:hover', $settings, [ 
						'back_flip_box_button_bg_color_hover' => 'border-color'
				], false );
			} else if (isset ( $settings->back_appearance ) && $settings->back_appearance == "gradient") {
				$settings->back_flip_box_button_bg_gradient = JpagebuilderCSSHelper::parseColor ( $settings, 'back_flip_box_button_bg_gradient' );
				$settings->back_flip_box_button_gradient_bg_hover = JpagebuilderCSSHelper::parseColor ( $settings, 'back_flip_box_button_gradient_bg_hover' );

				$css .= '#jpb-addon-{{ data.id }} .jpb-btn {border: none;}';
				$css .= $cssHelper->generateStyle ( '.jpb-flipbox-back-button .jpb-btn', $settings, [ 
						'back_flip_box_button_bg_gradient' => 'background-color'
				], false );
				$css .= $cssHelper->generateStyle ( '.jpb-flipbox-back-button .jpb-btn:hover', $settings, [ 
						'back_flip_box_button_gradient_bg_hover' => 'background-color'
				], false );
			} else {
				$css .= $cssHelper->generateStyle ( '.jpb-flipbox-back-button .jpb-btn', $settings, [ 
						'back_flip_box_button_bg_color' => 'background-color'
				], false );
				$css .= $cssHelper->generateStyle ( '.jpb-flipbox-back-button .jpb-btn:hover', $settings, [ 
						'back_flip_box_button_bg_color_hover' => 'background-color'
				], false );
			}
		}

		// back link
		if (isset ( $settings->back_button_type ) && $settings->back_button_type == "link") {
			$css .= '#jpb-addon-{{ data.id }} .jpb-btn {padding: 0; border-width: 0; text-decoration: none; border-radius: 0;}';
			$css .= $cssHelper->generateStyle ( '.jpb-flipbox-back-button .jpb-btn', $settings, [ 
					'back_flip_box_button_color' => 'color'
			], false );
			$css .= $cssHelper->generateStyle ( '.jpb-flipbox-back-button .jpb-btn:hover, .jpb-btn:focus', $settings, [ 
					'back_flip_box_button_color_hover' => 'color'
			], false );
		}

		// others
		$flipProps = [ 
				'height' => 'height'
		];
		$flipStyle = $cssHelper->generateStyle ( '.jpb-flipbox-panel, .threeD-item', $settings, $flipProps );

		$settings->text_align = $cssHelper->parseAlignment ( $settings, 'text_align' );
		$textAlign = $cssHelper->generateStyle ( '.jpb-addon-jpb-flibox', $settings, [ 
				'text_align' => 'text-align'
		], false );
		$transformCss = $cssHelper->generateTransformStyle ( '.jpb-flipbox-panel', $settings, 'transform' );

		$css .= $textAlign;
		$css .= $flipStyle;
		$css .= $frontBgStyle;
		$css .= $backBgStyle;
		$css .= $backBgStyle;
		$css .= $frontBorderRadius;
		$css .= $backBorderRadius;
		$css .= $frontIconColor;
		$css .= $backIconColor;
		$css .= $frontTitleColor;
		$css .= $backTitleColor;
		$css .= $frontParagraphColor;
		$css .= $backParagraphColor;
		$css .= $frontTitleTypo;
		$css .= $backTitleTypo;
		$css .= $frontParagraphTypo;
		$css .= $backParagraphTypo;
		$css .= $frontIconSize;
		$css .= $backIconSize;
		$css .= $frontIconMargin;
		$css .= $backIconMargin;
		$css .= $frontIconPadding;
		$css .= $backIconPadding;
		$css .= $transformCss;

		return $css;
	}

	/**
	 * Generate the lodash template string for the frontend editor.
	 *
	 * @return string The lodash template string.
	 * @since 4.0.0
	 */
	public static function getFrontendEditor() {
		$lodash = new JpagebuilderLodashlib ( '#jpb-addon-{{ data.id }}' );
		$output = '
        <#
            let flip_style = (data.flip_style) ? data.flip_style : "rotate_style";

            let front_bg_type = (data.front_bg_type) ? data.front_bg_type : "color";
            let front_bg_inner_type = (data.front_bg_inner_type) ? data.front_bg_inner_type : "none";
            let front_bg_color = (data.front_bg_color) ? data.front_bg_color : "";
            let front_bg_gradient = (data.front_bg_gradient) ? data.front_bg_gradient : "";
            let front_flip_box_radius = (data.front_flip_box_radius) ? data.front_flip_box_radius : 0;

            // background type settings
            let flip_front_bg_color = "";
            if (front_bg_type == "color") {
                if (front_bg_inner_type == "color") {
                    flip_front_bg_color = front_bg_color;
                }
                if (front_bg_inner_type == "gradient") {
                    flip_front_bg_color = front_bg_gradient;
                }
            }

            let frontImg = {}
            let front_bgimg = "";
            if (data.front_bg_type == "image") {
                if (typeof data.front_bgimg !== "undefined" && typeof data.front_bgimg.src !== "undefined") {
                    frontImg = data.front_bgimg
                } else {
                    frontImg = {src: data.front_bgimg}
                }
    
                
                if (_.isObject(frontImg) && frontImg.src != undefined) {
                    if(frontImg.src.indexOf("http://") !== -1 || frontImg.src.indexOf("https://") !== -1){
                        front_bgimg = frontImg.src;
                    } else {
                        front_bgimg = pagebuilder_base + frontImg.src;
                    }
                }
            } 

            let back_bg_type = (data.back_bg_type) ? data.back_bg_type : "color";
            let back_bg_inner_type = (data.back_bg_inner_type) ? data.back_bg_inner_type : "none";
            let back_bg_color = (data.back_bg_color) ? data.back_bg_color : "";
            let back_bg_gradient = (data.back_bg_gradient) ? data.back_bg_gradient : "";
            let back_flip_box_radius = (data.back_flip_box_radius) ? data.back_flip_box_radius : 0;

            let flip_back_bg_color = "";
            if (back_bg_type == "color") {
                if (back_bg_inner_type == "color") {
                    flip_back_bg_color = back_bg_color;
                }
                if (back_bg_inner_type == "gradient") {
                    flip_back_bg_color = back_bg_gradient;
                }
            }

            let backImg = {};
            if (typeof data.back_bgimg !== "undefined" && typeof data.back_bgimg.src !== "undefined") {
                backImg = data.back_bgimg
            } else {
                backImg = {src: data.back_bgimg}
            }

            let back_bgimg = "";
            if (_.isObject(backImg) && backImg.src != undefined) {
                if(backImg.src.indexOf("http://") !== -1 || backImg.src.indexOf("https://") !== -1){
                    back_bgimg = backImg.src;
                } else {
                    back_bgimg = pagebuilder_base + backImg.src;
                }
            }

            if (flip_style != "") {
                if (flip_style == "slide_style") {
                    flip_style = "slide-flipbox";
                } else if (flip_style == "fade_style") {
                    flip_style = "fade-flipbox";
                } else if (flip_style == "threeD_style") {
                    flip_style = "threeD-flipbox";
                }
            }

            let border_styles = (data.border_styles) ? data.border_styles : "";

            let flip_styles = "";

            if(_.isArray(border_styles)) {
                if(border_styles.indexOf("border_radius") !== -1){
                    flip_styles += "border-radius: 8px;";
                }

                if(border_styles.indexOf("dashed") !== -1){
                    flip_styles += "border-style: dashed;";
                } else if(border_styles.indexOf("solid") !== -1){
                    flip_styles += "border-style: solid;";
                } else if(border_styles.indexOf("dotted") !== -1){
                    flip_styles += "border-style: dotted;";
                }

                if(border_styles.indexOf("dashed") !== -1 || border_styles.indexOf("solid") !== -1 || border_styles.indexOf("dotted") !== -1){
                    flip_styles += "border-width: 2px;";
                    flip_styles += "border-color:"+data.border_color+";";
                }
            }

            let front_icon_color = "";
            if(data.front_global_background_type == "color") {
               front_icon_color = data.front_flip_box_icon_color;
            } else if(data.front_global_background_type == "gradient") {
                front_icon_color = data.front_flip_box_icon_gradient;
            }

            let back_icon_color = "";
            if(data.back_global_background_type == "color") {
               back_icon_color = data.back_flip_box_icon_color;
            } else if(data.back_global_background_type == "gradient") {
                back_icon_color = data.back_flip_box_icon_gradient;
            }

            // front button
            let classListFront = " jpb-btn-" + data.front_button_type;
			classListFront += " jpb-btn-" + data.front_button_size;
			classListFront += " jpb-btn-" + data.front_shape;

			if (!_.isEmpty(data.front_appearance)) {
				classListFront += " jpb-btn-"+data.front_appearance;
			}
		
            const isMenuBtnFront = _.isString(data.front_flip_box_button_link?.menu) && data.front_flip_box_button_link.type === "menu" && data.front_flip_box_button_link?.menu;
			const isPageBtnFront = _.isString(data.front_flip_box_button_link?.page) && data.front_flip_box_button_link.type === "page" && data.front_flip_box_button_link?.page;

			const isObjectBtnFront = _.isObject(data.front_flip_box_button_link) && ((data.front_flip_box_button_link.type === "url" && data.front_flip_box_button_link?.url !== "") ||  isMenuBtnFront || isPageBtnFront);
			
			let urlObjBtnFront = {};
			let urlBtnFront = "";
			let targetBtnFront = "";
			let relBtnFront = "";
			
			urlObjBtnFront = isObjectBtnFront ? data.front_flip_box_button_link : window.getSiteUrl(data.front_flip_box_button_link, data?.btn_target);

			if(urlObjBtnFront.type === "url") {	
				urlBtnFront = urlObjBtnFront.url;
			}

			if(urlObjBtnFront.type === "menu") {
				urlBtnFront = urlObjBtnFront.menu || "";
			}
				
			if(urlObjBtnFront.type === "page") {
				urlBtnFront = urlObjBtnFront.page ? `index.php?option=com_jpagebuilder&view=page&id=${urlObjBtnFront.page}` : "";
			}

			targetBtnFront = urlObjBtnFront.new_tab ? "_blank": "";
			relBtnFront += urlObjBtnFront.nofollow ? "nofollow": "";
			relBtnFront += urlObjBtnFront.noopener ? " noopener": "";
			relBtnFront += urlObjBtnFront.noreferrer ? " noreferrer": "";

            // back button
            let classListBack = " jpb-btn-" + data.back_button_type;
			classListBack += " jpb-btn-" + data.back_button_size;
			classListBack += " jpb-btn-" + data.back_shape;

			if (!_.isEmpty(data.back_appearance)) {
				classListBack += " jpb-btn-"+data.back_appearance;
			}
		
            const isMenuBtnBack = _.isString(data.back_flip_box_button_link?.menu) && data.back_flip_box_button_link.type === "menu" && data.back_flip_box_button_link?.menu;
			const isPageBtnBack = _.isString(data.back_flip_box_button_link?.page) && data.back_flip_box_button_link.type === "page" && data.back_flip_box_button_link?.page;

			const isObjectBtnBack = _.isObject(data.back_flip_box_button_link) && ((data.back_flip_box_button_link.type === "url" && data.back_flip_box_button_link?.url !== "") ||  isMenuBtnBack || isPageBtnBack);
			
			let urlObjBtnBack = {};
			let urlBtnBack = "";
			let targetBtnBack = "";
			let relBtnBack = "";
			
			urlObjBtnBack = isObjectBtnBack ? data.back_flip_box_button_link : window.getSiteUrl(data.back_flip_box_button_link, data?.btn_target);

			if(urlObjBtnBack.type === "url") {	
				urlBtnBack = urlObjBtnBack.url;
			}

			if(urlObjBtnBack.type === "menu") {
				urlBtnBack = urlObjBtnBack.menu || "";
			}
				
			if(urlObjBtnBack.type === "page") {
				urlBtnBack = urlObjBtnBack.page ? `index.php?option=com_jpagebuilder&view=page&id=${urlObjBtnBack.page}` : "";
			}

			targetBtnBack = urlObjBtnBack.new_tab ? "_blank": "";

            relBtnBack += urlObjBtnBack.nofollow ? "nofollow": "";
			relBtnBack += urlObjBtnBack.noopener ? " noopener": "";
			relBtnBack += urlObjBtnBack.noreferrer ? " noreferrer": "";

        #>
        <style type="text/css">
            #jpb-addon-{{ data.id }} .jpb-flipbox-panel,
            #jpb-addon-{{ data.id }} .threeD-item{
                {{ flip_styles }}
            }

            <# if (data.front_bg_type == "image"){ #>
                #jpb-addon-{{ data.id }} .jpb-flipbox-front,
                #jpb-addon-{{ data.id }} .threeD-flip-front{
                    background-image: url({{ front_bgimg }});
                }
           <# } #>

           <# if (data.back_bg_type == "image"){ #>
           #jpb-addon-{{ data.id }} .jpb-flipbox-back,
           #jpb-addon-{{ data.id }} .threeD-flip-back{
               background-image: url({{ back_bgimg }});
           }
        <# } #>
        ';

		// background and color
		$output .= $lodash->color ( 'background-color', '.jpb-flipbox-front, .threeD-flip-front', 'flip_front_bg_color' );
		$output .= $lodash->color ( 'background-color', '.jpb-flipbox-back, .threeD-flip-back', 'flip_back_bg_color' );
		$output .= $lodash->color ( 'color', '.jpb-flipbox-front-title', 'data.front_title_text_color' );
		$output .= $lodash->color ( 'color', '.jpb-flipbox-back-title', 'data.back_title_text_color' );
		$output .= $lodash->color ( 'background-color', '.threeD-flip-front:before, .jpb-flipbox-front.flip-box:before', 'flip_front_bg_color' );
		$output .= $lodash->color ( 'background-color', '.threeD-flip-back:before, .jpb-flipbox-back.flip-box:before', 'flip_back_bg_color' );
		$output .= $lodash->color ( 'color', '.jpb-flipbox-front-paragraph', 'data.front_paragraph_text_color' );
		$output .= $lodash->color ( 'color', '.jpb-flipbox-back-paragraph', 'data.back_paragraph_text_color' );
		$output .= $lodash->color ( 'color', '.jpb-flipbox-front-icon', 'front_icon_color' );
		$output .= $lodash->color ( 'color', '.jpb-flipbox-back-icon', 'back_icon_color' );

		// typography
		$output .= $lodash->typography ( '.jpb-flipbox-front-title', 'data.front_title_typography' );
		$output .= $lodash->typography ( '.jpb-flipbox-back-title', 'data.back_title_typography' );
		$output .= $lodash->typography ( '.jpb-flipbox-front-paragraph', 'data.front_paragraph_typography' );
		$output .= $lodash->typography ( '.jpb-flipbox-back-paragraph', 'data.back_paragraph_typography' );

		$output .= $lodash->unit ( 'font-size', '.jpb-flipbox-front-icon', 'data.front_icon_size', 'px' );
		$output .= $lodash->unit ( 'font-size', '.jpb-flipbox-back-icon', 'data.back_icon_size', 'px' );

		// margin and padding
		$output .= $lodash->unit ( 'margin', '.jpb-flipbox-front-icon', 'data.front_flip_box__margin' );
		$output .= $lodash->unit ( 'margin', '.jpb-flipbox-back-icon', 'data.back_flip_box__margin' );
		$output .= $lodash->unit ( 'padding', '.jpb-flipbox-front-icon', 'data.front_flip_box__padding' );
		$output .= $lodash->unit ( 'padding', '.jpb-flipbox-back-icon', 'data.back_flip_box__padding' );

		// radius
		$output .= '<# if((data.front_flip_box_radius + "").split(" ").length < 2) { #>';
		$output .= $lodash->unit ( 'border-radius', '.jpb-flipbox-front, .threeD-flip-front', 'data.front_flip_box_radius', 'px' );
		$output .= '<# } else { #>';
		$output .= '#jpb-addon-{{data.id}} .jpb-flipbox-front, #jpb-addon-{{data.id}} .threeD-flip-front {
            {{window.getSplitRadius(data.front_flip_box_radius)}}
        }';
		$output .= '<# } #>';

		$output .= '<# if((data.back_flip_box_radius + "").split(" ").length < 2) { #>';
		$output .= $lodash->unit ( 'border-radius', '.jpb-flipbox-back, .threeD-flip-back', 'data.back_flip_box_radius', 'px' );
		$output .= '<# } else { #>';
		$output .= '#jpb-addon-{{data.id}} .jpb-flipbox-back, #jpb-addon-{{data.id}} .threeD-flip-back {
                {{window.getSplitRadius(data.back_flip_box_radius)}}
            }';
		$output .= '<# } #>';

		// front button
		$output .= $lodash->typography ( '.jpb-flipbox-front-button .jpb-btn', 'data.front_flip_box_button_typography' );
		$output .= '<# if (data.front_button_size == "custom") { #>';
		$output .= $lodash->spacing ( 'padding', '.jpb-flipbox-front-button .jpb-btn', 'data.front_button_padding' );
		$output .= '<# } #>';
		$output .= $lodash->spacing ( 'margin', '.jpb-flipbox-front-button .jpb-btn', 'data.front_button_margin' );
		$output .= '<# if (data.front_block == "jpb-btn-block") { #>';
		$output .= '#jpb-addon-{{ data.id }} .jpb-flipbox-front-button .jpb-btn {display: block;}';
		$output .= '<# } #>';

		// custom style
		$output .= '<# if (data.front_button_type == "custom") { #>';
		$output .= $lodash->color ( 'color', '.jpb-flipbox-front-button .jpb-btn', 'data.front_flip_box_button_color' );
		$output .= $lodash->color ( 'color', '.jpb-flipbox-front-button .jpb-btn:hover', 'data.front_flip_box_button_color_hover' );

		$output .= '<# if (data.front_appearance == "outline") { #>';
		$output .= '#jpb-addon-{{ data.id }} .jpb-flipbox-front-button .jpb-btn {background-color: transparent;}';
		$output .= $lodash->unit ( 'border-color', '.jpb-flipbox-front-button .jpb-btn', 'data.front_flip_box_button_bg_color', '', false );
		$output .= $lodash->unit ( 'border-color', '.jpb-flipbox-front-button .jpb-btn:hover', 'data.front_flip_box_button_bg_color_hover', '', false );
		$output .= '<# } else if (data.front_appearance == "gradient") { #>';
		$output .= '#jpb-addon-{{ data.id }} .jpb-btn {border: none;}';
		$output .= $lodash->color ( 'background-color', '.jpb-flipbox-front-button .jpb-btn', 'data.front_flip_box_button_bg_gradient' );
		$output .= $lodash->color ( 'background-color', '.jpb-flipbox-front-button .jpb-btn:hover', 'data.front_flip_box_button_gradient_bg_hover' );
		$output .= '<# } else { #>';
		$output .= $lodash->color ( 'background-color', '.jpb-flipbox-front-button .jpb-btn', 'data.front_flip_box_button_bg_color' );
		$output .= $lodash->color ( 'background-color', '.jpb-flipbox-front-button .jpb-btn:hover', 'data.front_flip_box_button_bg_color_hover' );
		$output .= '<# } #>';
		$output .= '<# } #>';

		// link
		$output .= '<# if (data.front_button_type == "link") { #>';
		$output .= '#jpb-addon-{{ data.id }} .jpb-btn {padding: 0; border-width: 0; text-decoration: none; border-radius: 0;}';
		$output .= $lodash->color ( 'color', '.jpb-flipbox-front-button .jpb-btn', 'data.front_flip_box_button_color' );
		// $output .= $lodash->unit('border-color', '.jpb-flipbox-front-button .jpb-btn', 'data.link_btn_border_color', '', false);
		// $output .= $lodash->unit('border-bottom-width', '.jpb-flipbox-front-button .jpb-btn', 'data.link_btn_border_width', 'px');
		// $output .= $lodash->unit('padding-bottom', '.jpb-flipbox-front-button .jpb-btn', 'data.link_btn_padding_bottom', 'px');
		$output .= $lodash->color ( 'color', '.jpb-flipbox-front-button .jpb-btn:hover, .jpb-btn:focus', 'data.front_flip_box_button_color_hover' );
		// $output .= $lodash->unit('border-color', '.jpb-flipbox-front-button .jpb-btn:hover, .jpb-btn:focus', 'data.link_btn_border_hover_color', '', false);
		$output .= '<# } #>';
		// front button end

		// back button
		$output .= $lodash->typography ( '.jpb-flipbox-back-button .jpb-btn', 'data.back_flip_box_button_typography' );
		$output .= '<# if (data.back_button_size == "custom") { #>';
		$output .= $lodash->spacing ( 'padding', '.jpb-flipbox-back-button .jpb-btn', 'data.back_button_padding' );
		$output .= '<# } #>';
		$output .= $lodash->spacing ( 'margin', '.jpb-flipbox-back-button .jpb-btn', 'data.back_button_margin' );
		$output .= '<# if (data.back_block == "jpb-btn-block") { #>';
		$output .= '#jpb-addon-{{ data.id }} .jpb-flipbox-back-button .jpb-btn {display: block;}';
		$output .= '<# } #>';

		// custom style
		$output .= '<# if (data.back_button_type == "custom") { #>';
		$output .= $lodash->color ( 'color', '.jpb-flipbox-back-button .jpb-btn', 'data.back_flip_box_button_color' );
		$output .= $lodash->color ( 'color', '.jpb-flipbox-back-button .jpb-btn:hover', 'data.back_flip_box_button_color_hover' );

		$output .= '<# if (data.back_appearance == "outline") { #>';
		$output .= '#jpb-addon-{{ data.id }} .jpb-flipbox-back-button .jpb-btn {background-color: transparent;}';
		$output .= $lodash->unit ( 'border-color', '.jpb-flipbox-back-button .jpb-btn', 'data.back_flip_box_button_bg_color', '', false );
		$output .= $lodash->unit ( 'border-color', '.jpb-flipbox-back-button .jpb-btn:hover', 'data.back_flip_box_button_bg_color_hover', '', false );
		$output .= '<# } else if (data.back_appearance == "gradient") { #>';
		$output .= '#jpb-addon-{{ data.id }} .jpb-btn {border: none;}';
		$output .= $lodash->color ( 'background-color', '.jpb-flipbox-back-button .jpb-btn', 'data.back_flip_box_button_bg_color' );
		$output .= $lodash->color ( 'background-color', '.jpb-flipbox-back-button .jpb-btn:hover', 'data.back_flip_box_button_gradient_bg_hover' );
		$output .= '<# } else { #>';
		$output .= $lodash->color ( 'background-color', '.jpb-flipbox-back-button .jpb-btn', 'data.back_flip_box_button_bg_color' );
		$output .= $lodash->color ( 'background-color', '.jpb-flipbox-back-button .jpb-btn:hover', 'data.back_flip_box_button_bg_color_hover' );
		$output .= '<# } #>';
		$output .= '<# } #>';

		// link
		$output .= '<# if (data.back_button_type == "link") { #>';
		$output .= '#jpb-addon-{{ data.id }} .jpb-btn {padding: 0; border-width: 0; text-decoration: none; border-radius: 0;}';
		$output .= $lodash->color ( 'color', '.jpb-flipbox-back-button .jpb-btn', 'data.back_flip_box_button_color' );
		// $output .= $lodash->unit('border-color', '.jpb-flipbox-back-button .jpb-btn', 'data.link_btn_border_color', '', false);
		// $output .= $lodash->unit('border-bottom-width', '.jpb-flipbox-back-button .jpb-btn', 'data.link_btn_border_width', 'px');
		// $output .= $lodash->unit('padding-bottom', '.jpb-flipbox-back-button .jpb-btn', 'data.link_btn_padding_bottom', 'px');
		$output .= $lodash->color ( 'color', '.jpb-flipbox-back-button .jpb-btn:hover, .jpb-btn:focus', 'data.back_flip_box_button_color_hover' );
		// $output .= $lodash->unit('border-color', '.jpb-flipbox-back-button .jpb-btn:hover, .jpb-btn:focus', 'data.link_btn_border_hover_color', '', false);
		$output .= '<# } #>';
		// back button end

		$output .= $lodash->unit ( 'height', '.jpb-flipbox-panel, .threeD-item', 'data.height', 'px' );
		$output .= $lodash->alignment ( 'text-align', '.jpb-addon-jpb-flibox', 'data.text_align' );
		$output .= $lodash->generateTransformCss ( '.jpb-flipbox-panel', 'data.transform' );
		$output .= '</style>
        <div class="jpb-addon jpb-addon-jpb-flibox {{ data.class }} {{ flip_style }} {{ data.rotate }} flipon-{{ data.flip_behavior }}">
            <# if (flip_style == "threeD-flipbox") { #>
                <div class="threeD-content-wrap">
                    <div class="threeD-item">
                        <div class="threeD-flip-front">
                        <div class="threeD-content-inner" data-id={{data.id}}>
                        <# if(data.front_add_icon) { #>
                            <div class="jpb-flipbox-front-icon" data-fieldName="front_icon">
                                <i class="{{{data.front_icon}}}"></i>
                            </div>
                        <# } #>

                        <# if(data.front_add_title) { #>
                            <div class="jpb-flipbox-front-title" data-fieldName="front_text">
                            {{{ data.front_title }}}
                            </div>
                        <# } #>

                        <# if(data.front_add_paragraph) { #>
                            <div class="jpb-flipbox-front-paragraph" data-fieldName="front_paragraph">
                            {{{ data.front_paragraph }}}
                            </div>
                        <# } #>

                        <# if(data.flip_behavior == "click" && data.front_add_button && data.front_button_text && _.trim(data.front_button_text)){
                            let icon_arr_front = (typeof data.front_flip_box_icon !== "undefined" && data.front_flip_box_icon) ? data.front_flip_box_icon.split(" ") : "";
                            let icon_name_front = icon_arr_front.length === 1 ? "fa "+data.front_flip_box_icon : data.front_flip_box_icon;
                        #>
                            <div class="jpb-flipbox-front-button" data-fieldName="front_button">
                                <a href=\'{{ urlBtnFront }}\' target=\'{{ targetBtnFront }}\' rel=\'{{ relBtnFront }}\' id="btn-{{ data.id }}" class="jpb-btn {{ classListFront }}"><# if(data.back_flip_box_button_icon_position == "left" && !_.isEmpty(data.front_flip_box_icon)) { #><i class="{{ icon_name_front }}"></i> <# } #>{{ data.front_button_text }}<# if(data.front_flip_box_button_icon_position == "right" && !_.isEmpty(data.front_flip_box_icon)) { #> <i class="{{ icon_name_front }}"></i><# } #></a>
                            </div>
                        <# } #>
                        </div>
                        
                        </div>
                        <div class="threeD-flip-back">
                            <div class="threeD-content-inner" data-id={{data.id}}>
                                <# if(data.back_add_icon) { #>
                                    <div class="jpb-flipbox-back-icon" data-id={{data.id}} data-fieldName="back_icon">
                                    <i class="{{{data.back_icon}}}"></i>
                                    </div>
                                <# } #>

                                <# if(data.back_add_title) { #>
                                    <div class="jpb-flipbox-back-title" data-id={{data.id}} data-fieldName="flip_text">
                                    {{{ data.back_title }}}
                                    </div>
                                <# } #>

                                <# if(data.back_add_paragraph) { #>
                                    <div class="jpb-flipbox-back-paragraph" data-id={{data.id}} data-fieldName="flip_paragraph">
                                    {{{ data.back_paragraph }}}
                                    </div>
                                <# } #>

                                <# if(data.back_add_button && data.back_button_text && _.trim(data.back_button_text)){
                                    let icon_arr_back = (typeof data.back_flip_box_icon !== "undefined" && data.back_flip_box_icon) ? data.back_flip_box_icon.split(" ") : "";
                                    let icon_name_back = icon_arr_back.length === 1 ? "fa "+data.back_flip_box_icon : data.back_flip_box_icon;
                                #>
                                    <div class="jpb-flipbox-back-button" data-id={{data.id}} data-fieldName="back_button">
                                        <a href=\'{{ urlBtnBack }}\' target=\'{{ targetBtnBack }}\' rel=\'{{ relBtnBack }}\' id="btn-{{ data.id }}" class="jpb-btn {{ classListBack }}"><# if(data.back_flip_box_button_icon_position == "left" && !_.isEmpty(data.back_flip_box_icon)) { #><i class="{{ icon_name_back }}"></i> <# } #>{{ data.back_button_text }}<# if(data.back_flip_box_button_icon_position == "right" && !_.isEmpty(data.back_flip_box_icon)) { #> <i class="{{ icon_name_back }}"></i><# } #></a>
                                    </div>
                                <# } #>
                            </div>
                        </div>
                    </div>
                </div>
            <# } else { #>
                <div class="jpb-flipbox-panel">
                    <div class="jpb-flipbox-front flip-box">
                        <div class="flip-box-inner" data-id={{data.id}}>
                            <# if(data.front_add_icon) { #>
                                <div class="jpb-flipbox-front-icon" data-id={{data.id}} data-fieldName="front_icon">
                                    <i class="{{{data.front_icon}}}"></i>
                                </div>
                            <# } #>

                            <# if(data.front_add_title) { #>
                                <div class="jpb-flipbox-front-title" data-id={{data.id}} data-fieldName="front_text">
                                    {{{ data.front_title }}}
                                </div>
                            <# } #>

                            <# if(data.front_add_paragraph) { #>
                                <div class="jpb-flipbox-front-paragraph" data-id={{data.id}} data-fieldName="front_paragraph">
                                    {{{ data.front_paragraph }}}
                                </div>
                            <# } #>

                            <# if(data.flip_behavior == "click" && data.front_add_button && data.front_button_text && _.trim(data.front_button_text)){
                                let icon_arr_front = (typeof data.front_flip_box_icon !== "undefined" && data.front_flip_box_icon) ? data.front_flip_box_icon.split(" ") : "";
                                let icon_name_front = icon_arr_front.length === 1 ? "fa "+data.front_flip_box_icon : data.front_flip_box_icon;
                            #>
                                <div class="jpb-flipbox-front-button" data-id={{data.id}} data-fieldName="front_button">
                                    <a href=\'{{ urlBtnFront }}\' target=\'{{ targetBtnFront }}\' rel=\'{{ relBtnFront }}\' id="btn-{{ data.id }}" class="jpb-btn {{ classListFront }}"><# if(data.front_flip_box_button_icon_position == "left" && !_.isEmpty(data.front_flip_box_icon)) { #><i class="{{ icon_name_front }}"></i> <# } #>{{ data.front_button_text }}<# if(data.front_flip_box_button_icon_position == "right" && !_.isEmpty(data.front_flip_box_icon)) { #> <i class="{{ icon_name_front }}"></i><# } #></a>
                                </div>
                            <# } #>
                        </div>
                    </div>
                    <div class="jpb-flipbox-back flip-box">
                        <div class="flip-box-inner" data-id={{data.id}}>
                            <# if(data.back_add_icon) { #>
                                <div class="jpb-flipbox-back-icon" data-id={{data.id}} data-fieldName="back_icon">
                                <i class="{{{data.back_icon}}}"></i>
                                </div>
                            <# } #>

                            <# if(data.back_add_title) { #>
                                <div class="jpb-flipbox-back-title" data-id={{data.id}} data-fieldName="flip_text">
                                {{{ data.back_title }}}
                                </div>
                            <# } #>

                            <# if(data.back_add_paragraph) { #>
                                <div class="jpb-flipbox-back-paragraph" data-id={{data.id}} data-fieldName="flip_paragraph">
                                {{{ data.back_paragraph }}}
                                </div>
                            <# } #>

                            <# if(data.back_add_button && data.back_button_text && _.trim(data.back_button_text)){
                                let icon_arr_back = (typeof data.back_flip_box_icon !== "undefined" && data.back_flip_box_icon) ? data.back_flip_box_icon.split(" ") : "";
                                let icon_name_back = icon_arr_back.length === 1 ? "fa "+data.back_flip_box_icon : data.back_flip_box_icon;
                            #>
                                <div class="jpb-flipbox-back-button" data-id={{data.id}} data-fieldName="back_button">
                                    <a href=\'{{ urlBtnBack }}\' target=\'{{ targetBtnBack }}\' rel=\'{{ relBtnBack }}\' id="btn-{{ data.id }}" class="jpb-btn {{ classListBack }}"><# if(data.back_flip_box_button_icon_position == "left" && !_.isEmpty(data.back_flip_box_icon)) { #><i class="{{ icon_name_back }}"></i> <# } #>{{ data.back_button_text }}<# if(data.back_flip_box_button_icon_position == "right" && !_.isEmpty(data.back_flip_box_icon)) { #> <i class="{{ icon_name_back }}"></i><# } #></a>
                                </div>
                            <# } #>
                        </div>
                    </div>
                </div>
            <# } #>
        </div>
        ';

		return $output;
	}
}