<?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
 */
use Joomla\CMS\Uri\Uri;

// no direct access
defined ( '_JEXEC' ) or die ( 'Restricted access' );
class JpagebuilderAddonImage_carousel extends JpagebuilderAddons {
	/**
	 * The addon frontend render method.
	 * The returned HTML string will render to the frontend page.
	 *
	 * @return string The HTML string.
	 * @since 1.0.0
	 */
	public function render() {
		$settings = $this->addon->settings;
		$class = (isset ( $settings->class ) && $settings->class) ? ' ' . $settings->class : '';
		$image_carousel_layout = (isset ( $settings->image_carousel_layout ) && $settings->image_carousel_layout) ? $settings->image_carousel_layout : 'layout2';
		$carousel_autoplay = (isset ( $settings->carousel_autoplay ) && $settings->carousel_autoplay) ? $settings->carousel_autoplay : 0;
		$carousel_speed = (isset ( $settings->carousel_speed ) && $settings->carousel_speed) ? $settings->carousel_speed : 2500;
		$carousel_interval = (isset ( $settings->carousel_interval ) && $settings->carousel_interval) ? $settings->carousel_interval : 4500;
		$carousel_center_padding_xl = (isset ( $settings->carousel_center_padding_xl ) && is_numeric ( $settings->carousel_center_padding_xl )) ? $settings->carousel_center_padding_xl : 180;
		$carousel_center_padding_lg = (isset ( $settings->carousel_center_padding_lg ) && is_numeric ( $settings->carousel_center_padding_lg )) ? $settings->carousel_center_padding_lg : 180;
		$carousel_center_padding_md = (isset ( $settings->carousel_center_padding_md ) && is_numeric ( $settings->carousel_center_padding_md )) ? $settings->carousel_center_padding_md : 180;
		$carousel_center_padding_sm = (isset ( $settings->carousel_center_padding_sm ) && is_numeric ( $settings->carousel_center_padding_sm )) ? $settings->carousel_center_padding_sm : 90;
		$carousel_center_padding_xs = (isset ( $settings->carousel_center_padding_xs ) && is_numeric ( $settings->carousel_center_padding_xs )) ? $settings->carousel_center_padding_xs : 50;
		$carousel_item_number_xl = (isset ( $settings->carousel_item_number_xl ) && $settings->carousel_item_number_xl) ? $settings->carousel_item_number_xl : 3;
		$carousel_item_number_lg = (isset ( $settings->carousel_item_number_lg ) && $settings->carousel_item_number_lg) ? $settings->carousel_item_number_lg : 3;
		$carousel_item_number_md = (isset ( $settings->carousel_item_number_md ) && $settings->carousel_item_number_md) ? $settings->carousel_item_number_md : 3;
		$carousel_item_number_sm = (isset ( $settings->carousel_item_number_sm ) && $settings->carousel_item_number_sm) ? $settings->carousel_item_number_sm : 3;
		$carousel_item_number_xs = (isset ( $settings->carousel_item_number_xs ) && $settings->carousel_item_number_xs) ? $settings->carousel_item_number_xs : 1;
		$carousel_height_xl = (isset ( $settings->carousel_height_xl ) && $settings->carousel_height_xl) ? $settings->carousel_height_xl : 500;
		$carousel_height_lg = (isset ( $settings->carousel_height_lg ) && $settings->carousel_height_lg) ? $settings->carousel_height_lg : 500;
		$carousel_height_md = (isset ( $settings->carousel_height_md ) && $settings->carousel_height_md) ? $settings->carousel_height_md : 500;
		$carousel_height_sm = (isset ( $settings->carousel_height_sm ) && $settings->carousel_height_sm) ? $settings->carousel_height_sm : 400;
		$carousel_height_xs = (isset ( $settings->carousel_height_xs ) && $settings->carousel_height_xs) ? $settings->carousel_height_xs : 300;
		$carousel_bullet = (isset ( $settings->carousel_bullet ) && $settings->carousel_bullet) ? $settings->carousel_bullet : 0;
		$carousel_overlay = (isset ( $settings->carousel_overlay ) && $settings->carousel_overlay) ? $settings->carousel_overlay : 0;
		$carousel_fade = (isset ( $settings->carousel_fade ) && $settings->carousel_fade) ? $settings->carousel_fade : 0;

		$carousel_margin_xl = 15;
		$carousel_margin_lg = '';
		$carousel_margin_md = '';
		$carousel_margin_sm = '';
		$carousel_margin_xs = '';

		if (isset ( $settings->carousel_margin_original ) && is_object ( ($settings->carousel_margin_original) )) {
			$carousel_margin_xl = (isset ( $settings->carousel_margin_original->xl ) && $settings->carousel_margin_original->xl) ? $settings->carousel_margin_original->xl : '';
			$carousel_margin_lg = (isset ( $settings->carousel_margin_original->lg ) && $settings->carousel_margin_original->lg) ? $settings->carousel_margin_original->lg : '';
			$carousel_margin_md = (isset ( $settings->carousel_margin_original->md ) && $settings->carousel_margin_original->md) ? $settings->carousel_margin_original->md : '';
			$carousel_margin_sm = (isset ( $settings->carousel_margin_original->sm ) && $settings->carousel_margin_original->sm) ? $settings->carousel_margin_original->sm : '';
			$carousel_margin_xs = (isset ( $settings->carousel_margin_original->xs ) && $settings->carousel_margin_original->xs) ? $settings->carousel_margin_original->xs : '';
		} else {
			$carousel_margin = (isset ( $settings->carousel_margin ) && $settings->carousel_margin) ? $settings->carousel_margin : '';

			$carousel_margin_xl = $carousel_margin;
			$carousel_margin_lg = $carousel_margin;
			$carousel_margin_md = $carousel_margin;
			$carousel_margin_sm = $carousel_margin;
			$carousel_margin_xs = $carousel_margin;
		}

		// Arrow style
		$carousel_arrow = (isset ( $settings->carousel_arrow ) && $settings->carousel_arrow) ? $settings->carousel_arrow : 0;
		$arrow_icon = (isset ( $settings->arrow_icon ) && $settings->arrow_icon) ? $settings->arrow_icon : 'angle';
		$left_arrow = '';
		$right_arrow = '';
		if ($arrow_icon == 'long_arrow') {
			$left_arrow = 'fa-long-arrow-left';
			$right_arrow = 'fa-long-arrow-right';
		} else {
			$left_arrow = 'fa-angle-left';
			$right_arrow = 'fa-angle-right';
		}

		// Output
		$output = '<div class="jpb-addon jpb-carousel-extended' . $class . ' jpb-image-carousel-' . $image_carousel_layout . '" data-left-arrow="' . $left_arrow . '" data-right-arrow="' . $right_arrow . '" data-arrow="' . $carousel_arrow . '" data-dots="' . $carousel_bullet . '" data-image-layout="' . $image_carousel_layout . '" data-autoplay="' . $carousel_autoplay . '" data-speed="' . $carousel_speed . '" data-interval="' . $carousel_interval . '" 
        data-margin-xl="' . $carousel_margin_xl . '"
		data-margin-lg="' . $carousel_margin_lg . '"
		data-margin-md="' . $carousel_margin_md . '"
		data-margin-sm="' . $carousel_margin_sm . '"
		data-margin-xs="' . $carousel_margin_xs . '"
        ' . (($image_carousel_layout == 'layout3' || $image_carousel_layout == 'layout4') ? '' : '') . ' ' . (($image_carousel_layout == 'layout3' || $image_carousel_layout == 'layout4') ? 'data-padding-xl="' . $carousel_center_padding_xl . '"' : '') . ' ' . (($image_carousel_layout == 'layout3' || $image_carousel_layout == 'layout4') ? 'data-padding-lg="' . $carousel_center_padding_lg . '"' : '') . ' ' . (($image_carousel_layout == 'layout3' || $image_carousel_layout == 'layout4') ? 'data-padding-md="' . $carousel_center_padding_md . '"' : '') . ' ' . (($image_carousel_layout == 'layout3' || $image_carousel_layout == 'layout4') ? 'data-padding-sm="' . $carousel_center_padding_sm . '"' : '') . ' ' . (($image_carousel_layout == 'layout3' || $image_carousel_layout == 'layout4') ? 'data-padding-xs="' . $carousel_center_padding_xs . '"' : '') . ' data-height-xl="' . $carousel_height_xl . '" data-height-lg="' . $carousel_height_lg . '" data-height-md="' . $carousel_height_md . '" data-height-sm="' . $carousel_height_sm . '" data-height-xs="' . $carousel_height_xs . '" data-item-number-xl="' . $carousel_item_number_xl . '" data-item-number-lg="' . $carousel_item_number_lg . '" data-item-number-md="' . $carousel_item_number_md . '" data-item-number-sm="' . $carousel_item_number_sm . '" data-item-number-xs="' . $carousel_item_number_xs . '"' . ($image_carousel_layout == 'layout1' && $carousel_fade ? ' data-fade="' . $carousel_fade . '"' : '') . '>';

		if (isset ( $settings->jp_image_carousel_item ) && is_array ( $settings->jp_image_carousel_item )) {
			foreach ( $settings->jp_image_carousel_item as $item_key => $carousel_item ) {
				$output .= '<div class="jpb-carousel-extended-item">';

				$image_carousel_img = isset ( $carousel_item->image_carousel_img ) && $carousel_item->image_carousel_img ? $carousel_item->image_carousel_img : '';
				$image_carousel_img_src = isset ( $image_carousel_img->src ) ? $image_carousel_img->src : $image_carousel_img;
				$item_title = isset ( $carousel_item->item_title ) ? $carousel_item->item_title : '';
				$alt_text = isset ( $image_carousel_img->alt ) ? $image_carousel_img->alt : $item_title;

				if (! empty ( $carousel_item->image_carousel_img_link )) {
					list ( $link, $target ) = JpagebuilderAddonHelper::parseLink ( $carousel_item, 'image_carousel_img_link', [ 
							'url' => 'image_carousel_img_link',
							'new_tab' => 'link_open_new_window'
					] );

					if (! empty ( $link )) {
						$output .= '<a href="' . $link . '" ' . $target . '>';
					}
				}

				$output .= '<img src="' . $image_carousel_img_src . '" alt="' . $alt_text . '">';

				if ($carousel_overlay) {
					$output .= '<div class="jpb-carousel-extended-item-overlay"></div>';
				}

				if ($image_carousel_layout != '') {
					$output .= '<div class="jpb-carousel-extended-content-wrap">';

					if (isset ( $carousel_item->item_title )) {
						$output .= '<div class="jpb-carousel-extended-heading">';
						$output .= $carousel_item->item_title;
						$output .= '</div>';
					}

					if (isset ( $carousel_item->item_subtitle )) {
						$output .= '<div class="jpb-carousel-extended-subheading">';
						$output .= $carousel_item->item_subtitle;
						$output .= '</div>';
					}

					if (isset ( $carousel_item->item_description )) {
						$output .= '<div class="jpb-carousel-extended-description">';
						$output .= $carousel_item->item_description;
						$output .= '</div>';
					}

					$output .= '</div>';
				}

				if (! empty ( $link )) {
					$output .= '</a>';
				}

				$output .= '</div>';
			}
		}

		$output .= '</div>';

		return $output;
	}
	public function scripts() {
		return array (
				'components/com_jpagebuilder/assets/js/jp_carousel.js'
		);
	}
	/**
	 * Generate the CSS string for the frontend page.
	 *
	 * @return string The CSS string for the page.
	 * @since 1.0.0
	 */
	public function css() {
		$settings = $this->addon->settings;
		$addon_id = '#jpb-addon-' . $this->addon->id;
		$cssHelper = new JpagebuilderCSSHelper ( $addon_id );
		$css = '';
		$image_carousel_layout = (isset ( $settings->image_carousel_layout ) && $settings->image_carousel_layout) ? $settings->image_carousel_layout : '';
		$carousel_overlay = (isset ( $settings->carousel_overlay ) && $settings->carousel_overlay) ? $settings->carousel_overlay : 0;
		$arrow_height = (isset ( $settings->arrow_height ) && $settings->arrow_height) ? $settings->arrow_height : 0;
		$arrow_border_width = (isset ( $settings->arrow_border_width ) && $settings->arrow_border_width) ? $settings->arrow_border_width : 0;

		$settings->arrow_height_new = $arrow_height - $arrow_border_width;

		// Arrow Style
		$carousel_arrow = (isset ( $settings->carousel_arrow ) && $settings->carousel_arrow) ? $settings->carousel_arrow : 1;
		if ($carousel_arrow) {
			$carouselArrowPosition = $cssHelper->generateStyle ( '.jpb-carousel-extended-nav-control .nav-control', $settings, [ 
					'arrow_position_verti' => 'margin-top',
					'arrow_position_hori' => [ 
							'margin-left',
							'margin-right'
					]
			], [ 
					'arrow_position_verti' => '%',
					'arrow_position_hori' => 'px'
			] );
			$css .= $carouselArrowPosition;

			$arrowStyleProps = [ 
					'arrow_height_new' => [ 
							'height',
							'line-height'
					],
					'arrow_width' => 'width',
					'arrow_background' => 'background',
					'arrow_color' => 'color',
					'arrow_font_size' => 'font-size',
					'arrow_border_width' => 'border-style: solid;border-width',
					'arrow_border_color' => 'border-color',
					'arrow_border_radius' => 'border-radius'
			];

			$arrowStyleUnits = [ 
					'arrow_background' => false,
					'arrow_color' => false,
					'arrow_border_color' => false
			];

			$arrowStyle = $cssHelper->generateStyle ( '.jpb-carousel-extended-nav-control .nav-control', $settings, $arrowStyleProps, $arrowStyleUnits );

			// Arrow hover style
			$arrowHoverStyleProps = [ 
					'arrow_hover_background' => 'background',
					'arrow_hover_color' => 'color',
					'arrow_hover_border_color' => 'border-color'
			];

			$arrowHoverStyleUnits = [ 
					'arrow_hover_background' => false,
					'arrow_hover_color' => false,
					'arrow_hover_border_color' => false
			];

			$arrowHoverStyle = $cssHelper->generateStyle ( '.jpb-carousel-extended-nav-control .nav-control:hover', $settings, $arrowHoverStyleProps, $arrowHoverStyleUnits );

			$css .= $arrowStyle;
			$css .= $arrowHoverStyle;
		}
		// Bullet Style
		$carousel_bullet = (isset ( $settings->carousel_bullet ) && $settings->carousel_bullet) ? $settings->carousel_bullet : 1;

		if ($carousel_bullet) {

			$bulletPositionStyle = $cssHelper->generateStyle ( '.jpb-carousel-extended-dots', $settings, [ 
					'bullet_position_verti' => 'bottom',
					'bullet_position_hori' => 'left'
			], [ 
					'bullet_position_verti' => '%',
					'bullet_position_hori' => 'px'
			] );
			$css .= $bulletPositionStyle;

			$bulletStyleProps = [ 
					'bullet_height' => [ 
							'height',
							'line-height'
					],
					'bullet_width' => 'width',
					'bullet_background' => 'background',
					'bullet_border_radius' => 'border-radius',
					'bullet_border_width' => 'border-style: solid; border-width',
					'bullet_border_color' => 'border-color'
			];
			$bulletStyleUnits = [ 
					'bullet_background' => false,
					'bullet_border_color' => false
			];
			$bulletStyle = $cssHelper->generateStyle ( '.jpb-carousel-extended-dots ul li', $settings, $bulletStyleProps, $bulletStyleUnits );
			// Bullet hover style
			$bulletHoverStyleProps = [ 
					'bullet_active_background' => 'background'
			];
			$bulletHoverStyleUnits = [ 
					'bullet_active_background' => false
			];
			$bulletHoverStyle = $cssHelper->generateStyle ( '.jpb-carousel-extended-dots ul li:hover span, .jpb-carousel-extended-dots ul li.active span', $settings, $bulletHoverStyleProps, $bulletHoverStyleUnits );

			$css .= $bulletStyle;
			$css .= $bulletHoverStyle;
		}
		if ($carousel_overlay) {
			$settings->overlay_gradient = JpagebuilderCSSHelper::parseColor ( $settings, 'overlay_gradient' );
			$overlayStyle = $cssHelper->generateStyle ( '.jpb-carousel-extended-item-overlay', $settings, [ 
					'overlay_gradient' => 'background'
			], false );
			$css .= $overlayStyle;
		}

		// Content Alignment
		$item_content_verti_align = (isset ( $settings->item_content_verti_align ) && $settings->item_content_verti_align) ? $settings->item_content_verti_align : "";
		$item_content_hori_align = (isset ( $settings->item_content_hori_align ) && $settings->item_content_hori_align) ? $settings->item_content_hori_align : "";

		if ($item_content_verti_align || $item_content_hori_align) {
			$css .= '#jpb-addon-' . $this->addon->id . ' .jpb-carousel-extended-content-wrap {';
			if ($item_content_verti_align === "top") {
				$css .= 'justify-content: flex-start;';
			} else if ($item_content_verti_align === "bottom") {
				$css .= 'justify-content: flex-end;';
			}
			if ($item_content_hori_align === "left") {
				$css .= 'align-items: flex-start;';
				$css .= 'text-align: left;';
			} else if ($item_content_hori_align === "right") {
				$css .= 'align-items: flex-end;';
				$css .= 'text-align: right;';
			}
			$css .= '}';
		}

		$titleTypographyFallbacks = [ 
				'font' => 'content_title_font_family',
				'size' => 'content_title_fontsize',
				'line_height' => 'content_title_lineheight',
				'letter_spacing' => 'content_title_letterspace',
				'uppercase' => 'content_title_font_style.uppercase',
				'italic' => 'content_title_font_style.italic',
				'underline' => 'content_title_font_style.underline',
				'weight' => 'content_title_font_style.weight'
		];

		$subtileTypographyFallbacks = [ 
				'font' => 'content_subtitle_font_family',
				'size' => 'content_subtitle_fontsize',
				'line_height' => 'content_subtitle_lineheight',
				'letter_spacing' => 'content_subtitle_letterspace',
				'uppercase' => 'content_subtitle_font_style.uppercase',
				'italic' => 'content_subtitle_font_style.italic',
				'underline' => 'content_subtitle_font_style.underline',
				'weight' => 'content_subtitle_font_style.weight'
		];

		$descriptionTypographyFallbacks = [ 
				'font' => 'description_font_family',
				'size' => 'description_fontsize',
				'line_height' => 'description_lineheight',
				'letter_spacing' => 'description_letterspace',
				'uppercase' => 'description_font_style.uppercase',
				'italic' => 'description_font_style.italic',
				'underline' => 'description_font_style.underline',
				'weight' => 'description_font_style.weight'
		];

		$titleTypographyStyle = $cssHelper->typography ( '.jpb-carousel-extended-heading', $settings, 'content_title_typography', $titleTypographyFallbacks );
		$subtileTypographyStyle = $cssHelper->typography ( '.jpb-carousel-extended-subheading', $settings, 'content_subtitle_typography', $subtileTypographyFallbacks );
		$descriptionTypographyStyle = $cssHelper->typography ( '.jpb-carousel-extended-description', $settings, 'description_typography', $descriptionTypographyFallbacks );

		$titleStyle = $cssHelper->generateStyle ( '.jpb-carousel-extended-heading', $settings, [ 
				'content_title_text_color' => 'color',
				'content_title_margin' => 'margin'
		], [ 
				'content_title_text_color' => false,
				'content_title_margin' => false
		], [ 
				'content_title_margin' => 'spacing'
		] );
		$subtileStyle = $cssHelper->generateStyle ( '.jpb-carousel-extended-subheading', $settings, [ 
				'content_subtitle_text_color' => 'color'
		], [ 
				'content_subtitle_text_color' => false
		] );
		$descriptionStyle = $cssHelper->generateStyle ( '.jpb-carousel-extended-description', $settings, [ 
				'description_text_color' => 'color',
				'description_margin' => 'margin'
		], [ 
				'description_text_color' => false,
				'description_margin' => false
		], [ 
				'description_margin' => 'spcacing'
		] );

		$css .= $titleStyle;
		$css .= $subtileStyle;
		$css .= $descriptionStyle;

		$css .= $titleTypographyStyle;
		$css .= $subtileTypographyStyle;
		$css .= $descriptionTypographyStyle;

		// Carousel transition speed
		$carousel_speed = (isset ( $settings->carousel_speed )) ? $settings->carousel_speed : 2500;

		if ($image_carousel_layout == 'layout3' || $image_carousel_layout == 'layout4') {
			$css .= '#jpb-addon-' . $this->addon->id . ' .jpb-carousel-extended-center .jpb-carousel-extended-item .jpb-addon-wrapper {';
			$css .= 'transition: all ' . $carousel_speed . 'ms ease 0s;';
			$css .= '}';
		}

		$arrowHeightStyle = $cssHelper->generateStyle ( '.jpb-carousel-extended-nav-control', $settings, [ 
				'arrow_height' => 'top: -%s'
		] );
		$transformCss = $cssHelper->generateTransformStyle ( '.jpb-carousel-extended', $settings, 'transform' );

		$css .= $arrowHeightStyle;
		$css .= $transformCss;

		return $css;
	}
	/**
	 * Generate the lodash template string for the frontend editor.
	 *
	 * @return string The lodash template string.
	 * @since 1.0.0
	 */
	public static function getFrontendEditor() {
		$lodash = new JpagebuilderLodashlib ( '#jpb-addon-{{ data.id }}' );

		$output = '
        
        <style  type="text/css">

            <# if(data.image_carousel_layout == "layout3" || data.image_carousel_layout == "layout4"){ #>
                #jpb-addon-{{ data.id }} .jpb-carousel-extended-center .jpb-carousel-extended-item .jpb-addon-wrapper {
                    transition: all {{data.carousel_speed}}ms ease 0s;
                }
            <# }
            #>            

            <# if(data.item_content_verti_align || data.item_content_hori_align) { #>
                #jpb-addon-{{ data.id }} .jpb-carousel-extended-content-wrap {
                    <# if(data.item_content_verti_align === "top"){ #>
                        justify-content: flex-start;
                    <# } else if(data.item_content_verti_align === "bottom"){ #>
                        justify-content: flex-end;
                    <# } #>
                    <# if(data.item_content_hori_align === "left"){ #>
                        align-items: flex-start;
                        text-align: left;
                    <# } else if(data.item_content_hori_align === "right"){ #>
                        align-items: flex-end;
                        text-align: right;
                    <# } #>
                }
            <# } #>
            ';

		// Carousel Arrow
		$output .= ' <# if (data.carousel_arrow ){ #>';
		// Control
		$output .= $lodash->unit ( 'width', '.jpb-carousel-extended-nav-control .nav-control', 'data.arrow_width', 'px', false );
		$output .= $lodash->unit ( 'height', '.jpb-carousel-extended-nav-control .nav-control', 'data.arrow_height', 'px', false );
		$output .= $lodash->unit ( 'line-height', '.jpb-carousel-extended-nav-control .nav-control', '(data.arrow_height)-(data.arrow_border_width)', 'px', false );
		$output .= $lodash->unit ( 'font-size', '.jpb-carousel-extended-nav-control .nav-control', 'data.arrow_font_size', 'px', false );
		$output .= $lodash->color ( 'background-color', '.jpb-carousel-extended-nav-control .nav-control', 'data.arrow_background' );
		$output .= $lodash->color ( 'color', '.jpb-carousel-extended-nav-control .nav-control', 'data.arrow_color' );
		$output .= $lodash->border ( 'border-color', '.jpb-carousel-extended-nav-control .nav-control', 'data.arrow_border_color' );
		$output .= $lodash->unit ( 'border-radius', '.jpb-carousel-extended-nav-control .nav-control', 'data.arrow_border_radius', 'px', false );
		$output .= $lodash->unit ( 'border-width', '.jpb-carousel-extended-nav-control .nav-control', 'data.arrow_border_width', 'px', false );
		$output .= $lodash->unit ( 'margin-top', '.jpb-carousel-extended-nav-control .nav-control', 'data.arrow_position_verti', '%' );
		$output .= $lodash->unit ( 'margin-left', '.jpb-carousel-extended-nav-control .nav-control', 'data.arrow_position_hori', 'px' );
		$output .= $lodash->unit ( 'margin-right', '.jpb-carousel-extended-nav-control .nav-control', 'data.arrow_position_hori', 'px' );
		$output .= $lodash->unit ( 'top', '.jpb-carousel-extended-nav-control', 'data.arrow_height', 'px', false, '-' );
		$output .= '#jpb-addon-{{ data.id }} .jpb-carousel-extended-nav-control .nav-control { border-style: solid; }';

		// Control Hover
		$output .= $lodash->color ( 'background-color', '.jpb-carousel-extended-nav-control .nav-control:hover', 'data.arrow_hover_background' );
		$output .= $lodash->color ( 'color', '.jpb-carousel-extended-nav-control .nav-control:hover', 'data.arrow_hover_color' );
		$output .= $lodash->border ( 'border-color', '.jpb-carousel-extended-nav-control .nav-control:hover', 'data.arrow_hover_border_color' );

		$output .= '<# } #>';

		// Carousel bullet
		$output .= '<# if(data.carousel_bullet){ #>';

		// Bullet position
		$output .= $lodash->unit ( 'bottom', '.jpb-carousel-extended-dots', 'data.bullet_position_verti', '%' );
		$output .= $lodash->unit ( 'left', '.jpb-carousel-extended-dots', 'data.bullet_position_hori', 'px' );

		// Dots
		$output .= $lodash->unit ( 'height', '.jpb-carousel-extended-dots ul li', 'data.bullet_height', 'px', false );
		$output .= $lodash->unit ( 'line-height', '.jpb-carousel-extended-dots ul li', '(data.bullet_height)-(data.bullet_border_width)', 'px', false );
		$output .= $lodash->unit ( 'border-width', '.jpb-carousel-extended-dots ul li', 'data.bullet_border_width', 'px', false );
		$output .= '#jpb-addon-{{ data.id }} .jpb-carousel-extended-dots ul li { border-style: solid; }';
		$output .= $lodash->color ( 'background-color', '.jpb-carousel-extended-dots ul li', 'data.bullet_background' );
		$output .= $lodash->unit ( 'border-radius', '.jpb-carousel-extended-dots ul li', 'data.bullet_border_radius', 'px', false );
		$output .= $lodash->unit ( 'width', '.jpb-carousel-extended-dots ul li', 'data.bullet_width', 'px', false );
		$output .= $lodash->border ( 'border-color', '.jpb-carousel-extended-dots ul li', 'data.bullet_border_color' );

		// hover
		$output .= $lodash->color ( 'background-color', '.jpb-carousel-extended-dots ul li:hover span, .jpb-carousel-extended-dots ul li.active span', 'data.bullet_active_background' );
		$output .= '<# } #>';

		$output .= $lodash->color ( 'background-color', '.jpb-carousel-extended-item-overlay', 'data.overlay_gradient' );

		// Title
		$titleTypographyFallbacks = [ 
				'font' => 'data.content_title_font_family',
				'size' => 'data.content_title_fontsize',
				'line_height' => 'data.content_title_lineheight',
				'letter_spacing' => 'data.content_title_letterspace',
				'uppercase' => 'data.content_title_font_style?.uppercase',
				'italic' => 'data.content_title_font_style?.italic',
				'underline' => 'data.content_title_font_style?.underline',
				'weight' => 'data.content_title_font_style?.weight'
		];

		$output .= $lodash->typography ( '.jpb-carousel-extended-heading', 'data.content_title_typography', $titleTypographyFallbacks );
		$output .= $lodash->color ( 'color', '.jpb-carousel-extended-heading', 'data.content_title_text_color' );
		$output .= $lodash->spacing ( 'margin', '.jpb-carousel-extended-heading', 'data.content_title_margin' );

		// Sub Title
		$subtitleTypographyFallbacks = [ 
				'font' => 'data.content_subtitle_font_family',
				'size' => 'data.content_subtitle_fontsize',
				'line_height' => 'data.content_subtitle_lineheight',
				'letter_spacing' => 'data.content_subtitle_letterspace',
				'uppercase' => 'data.content_subtitle_font_style?.uppercase',
				'italic' => 'data.content_subtitle_font_style?.italic',
				'underline' => 'data.content_subtitle_font_style?.underline',
				'weight' => 'data.content_subtitle_font_style?.weight'
		];

		$output .= $lodash->typography ( '.jpb-carousel-extended-subheading', 'data.content_subtitle_typography', $subtitleTypographyFallbacks );
		$output .= $lodash->color ( 'color', '.jpb-carousel-extended-subheading', 'data.content_subtitle_text_color' );

		// Description
		$descriptionTypographyFallbacks = [ 
				'font' => 'data.description_font_family',
				'size' => 'data.description_fontsize',
				'line_height' => 'data.description_lineheight',
				'letter_spacing' => 'data.description_letterspace',
				'uppercase' => 'data.description_font_style?.uppercase',
				'italic' => 'data.description_font_style?.italic',
				'underline' => 'data.description_font_style?.underline',
				'weight' => 'data.description_font_style?.weight'
		];

		$output .= $lodash->typography ( '.jpb-carousel-extended-description', 'data.description_typography', $descriptionTypographyFallbacks );
		$output .= $lodash->spacing ( 'margin', '.jpb-carousel-extended-description', 'data.description_margin' );
		$output .= $lodash->color ( 'color', '.jpb-carousel-extended-description', 'data.description_text_color' );

		$output .= $lodash->generateTransformCss ( '.jpb-carousel-extended', 'data.transform' );

		$output .= '
        </style>
        <#
        
        let carousel_height_xl = data.carousel_height.xl || 500;
        let carousel_height_lg = data.carousel_height.lg || 500;
        let carousel_height_md = data.carousel_height.md || 500;
        let carousel_height_sm = data.carousel_height.sm || 400;
        let carousel_height_xs = data.carousel_height.xs || 300;

        var left_arrow ="";
        var right_arrow = "";
        if(data.arrow_icon=="long_arrow"){
            left_arrow ="fa-long-arrow-left";
            right_arrow = "fa-long-arrow-right";
        } else {
            left_arrow ="fa-angle-left";
            right_arrow = "fa-angle-right";
        }
        
        let carousel_item_number_xl = 3;
        let carousel_item_number_lg = 3;
        let carousel_item_number_md = 3;
        let carousel_item_number_sm = 3;
        let carousel_item_number_xs = 1;
        if(_.isObject(data.carousel_item_number)){
            carousel_item_number_xl = data.carousel_item_number.xl
            carousel_item_number_lg = data.carousel_item_number.lg
            carousel_item_number_md = data.carousel_item_number.md
            carousel_item_number_sm = data.carousel_item_number.sm
            carousel_item_number_xs = data.carousel_item_number.xs
        }
        
        let carousel_center_padding_xl = +data.carousel_center_padding.xl ?? 180;
        let carousel_center_padding_lg = +data.carousel_center_padding.lg ?? 180;
        let carousel_center_padding_md = +data.carousel_center_padding.md ?? 180;
        let carousel_center_padding_sm = +data.carousel_center_padding.sm ?? 90;
        let carousel_center_padding_xs = +data.carousel_center_padding.xs ?? 50;


        let carousel_margin_xl = 15;
        let carousel_margin_lg = 15;
        let carousel_margin_md = 15;
        let carousel_margin_sm = 15;
        let carousel_margin_xs = 15;

        if (_.isObject(data.carousel_margin))
		{
			carousel_margin_xl = data.carousel_margin.xl;
			carousel_margin_lg = data.carousel_margin.lg;
			carousel_margin_md = data.carousel_margin.md;
			carousel_margin_sm = data.carousel_margin.sm;
			carousel_margin_xs = data.carousel_margin.xs;
		} else {
            carousel_margin_xl = data.carousel_margin;
			carousel_margin_lg = data.carousel_margin;
			carousel_margin_md = data.carousel_margin;
			carousel_margin_sm = data.carousel_margin;
			carousel_margin_xs = data.carousel_margin;
        }

        #>
            <div class="jpb-addon jpb-carousel-extended {{data.class}} jpb-image-carousel-{{data.image_carousel_layout}}" 
            data-left-arrow="{{left_arrow}}" 
            data-right-arrow="{{right_arrow}}" 
            data-arrow="{{data.carousel_arrow}}" 
            data-dots="{{data.carousel_bullet}}" 
            data-image-layout="{{data.image_carousel_layout}}" 
            data-autoplay="{{data.carousel_autoplay}}" 
            data-speed="{{data.carousel_speed}}" 
            data-interval="{{data.carousel_interval}}" 
            data-margin-xl="{{carousel_margin_xl}}"
            data-margin-lg="{{carousel_margin_lg}}"
            data-margin-md="{{carousel_margin_md}}"
            data-margin-sm="{{carousel_margin_sm}}"
            data-margin-xs="{{carousel_margin_xs}}" 
            {{{(data.image_carousel_layout == "layout3" || data.image_carousel_layout == "layout4") ? `data-padding-xl="${carousel_center_padding_xl}"` : ""}}} 
            {{{(data.image_carousel_layout == "layout3" || data.image_carousel_layout == "layout4") ? `data-padding-lg="${carousel_center_padding_lg}"` : ""}}} 
            {{{(data.image_carousel_layout == "layout3" || data.image_carousel_layout == "layout4") ? `data-padding-md="${carousel_center_padding_md}"` : ""}}} 
            {{{(data.image_carousel_layout == "layout3" || data.image_carousel_layout == "layout4") ? `data-padding-sm="${carousel_center_padding_sm}"` : ""}}} 
            {{{(data.image_carousel_layout == "layout3" || data.image_carousel_layout == "layout4") ? `data-padding-xs="${carousel_center_padding_xs}"` : ""}}} 
            data-height-xl="{{carousel_height_xl}}" 
            data-height-lg="{{carousel_height_lg}}" 
            data-height-md="{{carousel_height_md}}" 
            data-height-sm="{{carousel_height_sm}}" 
            data-height-xs="{{carousel_height_xs}}" 
            data-item-number-xl="{{carousel_item_number_xl || 3}}"  
            data-item-number-lg="{{carousel_item_number_lg || 3}}" 
            data-item-number-md="{{carousel_item_number_md || 3}}" 
            data-item-number-sm="{{carousel_item_number_sm || 3}}" 
            data-item-number-xs="{{carousel_item_number_xs || 1}}" 
            {{{data.image_carousel_layout == "layout1" && data.carousel_fade ?  `data-fade="${data.carousel_fade}"` : ""}}}>
                <# if(_.isArray(data.jp_image_carousel_item)){
                    _.each(data.jp_image_carousel_item, function(carousel_item){
                    
                        var carouselImg = {}
                        if (typeof carousel_item.image_carousel_img !== "undefined" && typeof carousel_item.image_carousel_img.src !== "undefined") {
                            carouselImg = carousel_item.image_carousel_img
                        } else {
                            carouselImg = {src: carousel_item.image_carousel_img}
                        }

                        let alt_text = carousel_item?.image_carousel_img?.alt ?? carousel_item?.item_title;
                #>
                        <div class="jpb-carousel-extended-item">
                            <#
                            const isUrlObj = _.isObject(carousel_item?.image_carousel_img_link) && (!!carousel_item?.image_carousel_img_link?.url || !!carousel_item?.image_carousel_img_link?.page || !!carousel_item?.image_carousel_img_link?.menu);
                            const isUrlString = _.isString(carousel_item?.image_carousel_img_link) && carousel_item?.image_carousel_img_link !== "";
                            
                            if(isUrlObj || isUrlString){
                                const isTarget = carousel_item?.link_open_new_window ? "_blank" : "";
                                const urlObj = carousel_item?.image_carousel_img_link?.url ?  carousel_item?.image_carousel_img_link : window.getSiteUrl(carousel_item?.image_carousel_img_link, isTarget);
                                const {url, new_tab, nofollow, noopener, noreferrer, type, } = urlObj;
                                const target = new_tab ? "_blank" : "";

                                let rel="";
								rel += nofollow ? "nofollow": "";
								rel += noopener ? " noopener": "";
								rel += noreferrer ? " noreferrer": "";
                                
                                const _url= (type === "url" && url) || (type === "menu" && urlObj.menu) || ((type === "page" && !!urlObj.page) && "index.php?option=com_jpagebuilder&view=page&id=" + urlObj.page) || "";
                            #>
                                <# if(_url){ #>
                                    <a href=\'{{_url}}\' target=\'{{target}}\' rel=\'{{rel}}\' >
                                <# }#>
                            <# }
                            if(carouselImg.src && carouselImg.src.indexOf("http://") == -1 && carouselImg.src.indexOf("https://") == -1){
                            #>
                                <img src=\'{{ pagebuilder_base + carouselImg.src }}\' alt="{{ alt_text }}">
                            <# } else if(carouselImg.src){ #>
                                <img src=\'{{ carouselImg.src }}\' alt="{{ alt_text }}">
                            <# }
                            if(data.carousel_overlay){
                            #>
                                <div class="jpb-carousel-extended-item-overlay"></div>
                            <# }
                            if(data.image_carousel_layout !== ""){
                            #>
                                <div class="jpb-carousel-extended-content-wrap">
                                
                                    <# if(carousel_item.item_title){ #>
                                        <div class="jpb-carousel-extended-heading">
                                            {{carousel_item.item_title}}
                                        </div>
                                    <# } 
                                    if(carousel_item.item_subtitle) { 
                                    #>
                                        <div class="jpb-carousel-extended-subheading">
                                            {{carousel_item.item_subtitle}}
                                        </div>
                                    <# } 
                                    if(carousel_item.item_description) {
                                    #>
                                        <div class="jpb-carousel-extended-description">
                                            {{{carousel_item.item_description}}}
                                        </div>
                                    <# } #>
                                </div>
                            <# }
                            if(isUrlObj || isUrlString){
                            #>
                                </a>
                            <# } #>
                        </div>
                    <#
                    })
                } #>
            </div>
        ';
		return $output;
	}
}
