<?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 JpagebuilderAddonPopover extends JpagebuilderAddons {

	/**
	 * The render method of the Popover addon.
	 *
	 * @return string
	 * @since 5.1.0
	 */
	public function render() {
		$settings = $this->addon->settings;

		$addon_title = (isset ( $settings->title ) && $settings->title) ? $settings->title : '';
		$addon_title_position = (isset ( $settings->title_position ) && $settings->title_position) ? $settings->title_position : 'top';
		$addon_heading_selector = (isset ( $settings->heading_selector ) && $settings->heading_selector) ? $settings->heading_selector : 'h3';
		$class = (isset ( $settings->class ) && $settings->class) ? ' ' . $settings->class : '';

		$output = "";

		$output .= '<div class="jpb-addon jpb-addon-popover' . $class . '">';
		$output .= ($addon_title && $addon_title_position != 'bottom') ? '<' . $addon_heading_selector . ' class="jpb-addon-title">' . $addon_title . '</' . $addon_heading_selector . '>' : '';
		$output .= '<div class="jpb-addon-content">
						<div id="jpb-popover-inline" class="jpb-inline">';

		// Common Settings
		$background_image_src = isset ( $settings->background_image->src ) ? $settings->background_image->src : ($settings->background_image ?? '');
		$gap = isset ( $settings->gap ) ? $settings->gap : 10;

		// Display
		$showTitle = isset ( $settings->show_title ) ? $settings->show_title : true;
		$showContent = isset ( $settings->show_content ) ? $settings->show_content : true;
		$showImage = isset ( $settings->show_image ) ? $settings->show_image : true;
		$showLink = isset ( $settings->show_link ) ? $settings->show_link : true;

		// Marker
		$markerMode = (isset ( $settings->marker_mode ) && $settings->marker_mode) ? $settings->marker_mode : 'click';
		$enableMarkerRipple = isset ( $settings->enable_marker_ripple_effect ) ? $settings->enable_marker_ripple_effect : false;

		// Popover
		$popoverPosition = empty ( $settings->popover_position ) ? 'right' : $settings->popover_position;
		$popoverImageWithoutPadding = isset ( $settings->popover_image_without_padding ) ? $settings->popover_image_without_padding : 1;
		$popoverImageBorder = ! empty ( $settings->popover_image_border ) ? $settings->popover_image_border : 'none';

		// Title
		$titleStyle = (isset ( $settings->title_style ) && $settings->title_style) ? $settings->title_style : null;
		$titleDecoration = ! empty ( $settings->title_decoration ) ? $settings->title_decoration : 'none';
		$titleColor = ! empty ( $settings->title_color ) ? $settings->title_color : 'none';

		// Meta
		$metaAlignment = ! empty ( $settings->meta_alignment ) ? $settings->meta_alignment : 'below_title';

		// Link
		$linkText = ! empty ( $settings->link_text ) ? $settings->link_text : 'Read More';

		if (strpos ( $background_image_src, "http://" ) !== false || strpos ( $background_image_src, "https://" ) !== false) {
			$background_image_src = $background_image_src;
		} else {
			$original_src = Uri::base ( true ) . '/' . $background_image_src;
			$background_image_src = JpagebuilderHelperSite::cleanPath ( $original_src );
		}

		if ($background_image_src) {
			$alt = empty ( $settings->background_image_alt ) ? '' : $settings->background_image_alt;
			$output .= '<picture>
			<img src="' . $background_image_src . '" alt="' . $alt . '" loading="eager">
			</picture>';
		}

		if (isset ( $settings->jp_popover_item ) && is_array ( $settings->jp_popover_item ) && count ( $settings->jp_popover_item )) {
			foreach ( $settings->jp_popover_item as $key => $item ) {
				// Marker
				$markerLeft = ! isset ( $item->marker_left ) ? 50 : $item->marker_left;
				$markerTop = ! isset ( $item->marker_top ) ? 50 : $item->marker_top;
				$markerClass = "";

				$rippleElement = $enableMarkerRipple ? '<span class="jpb-popover-ripple-effect"></span>' : '';
				$output .= '<button class="jpb-popover-marker jpb-marker' . $markerClass . '" style="left: ' . $markerLeft . '%; top: ' . $markerTop . '%;" jpb-data="mode: ' . $markerMode . '" href="#"  aria-label="Open" aria-haspopup="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17" fill="none"><path stroke="currentColor" stroke-linecap="round" stroke-width="2.621" d="M2.104 8.655h13.103M8.654 2.104v13.103"/></svg>' . $rippleElement . '</button>';

				// popover
				$popoverItemPosition = empty ( $item->popover_position ) ? 'none' : $item->popover_position;
				$pos = $popoverItemPosition === 'none' ? $popoverPosition : $popoverItemPosition;

				$output .= '<div jpb-data="pos: ' . $pos . '; mode: click; gap: ' . $gap . '; id: ' . $this->addon->id . '" class="jpb-popover-content jpb-popover-wrap">
				<div class="jpb-popover-content-item">';

				// Image
				$image = empty ( $item->image ) ? '' : $item->image;
				$image_src = isset ( $image->src ) ? $image->src : $image;
				$image_width = (isset ( $image->width ) && $image->width) ? $image->width : '';
				$image_height = (isset ( $image->height ) && $image->height) ? $image->height : '';
				$imageWrapClass = "";
				$imageClass = "";

				if (! $popoverImageWithoutPadding) {
					$imageWrapClass .= ' jpb-padding';

					if ($popoverImageBorder === 'rounded') {
						$imageClass .= ' jpb-border-rounded';
					} else if ($popoverImageBorder === 'circle') {
						$imageClass .= ' jpb-border-circle';
					} else if ($popoverImageBorder === 'pill') {
						$imageClass .= ' jpb-border-pill';
					}
				}

				if ($image_src && $showImage) {
					$image_width ? 'width="' . $image_width . '"' : '';
					$image_height ? 'height="' . $image_height . '"' : '';
					$alt = empty ( $item->image_alt ) ? '' : $item->image_alt;
					$output .= '<div class="jpb-card-media-top' . $imageWrapClass . '">
					<picture>
						<img src="' . $image->src . '" ' . $image_width . ' ' . $image_height . ' class="' . $imageClass . '" alt="' . $alt . '">
					</picture>
					</div>';
				}

				$output .= '<div class="jpb-card-body">';
				$metaElement = "";

				// Meta
				$meta = empty ( $item->meta ) ? '' : $item->meta;

				if ($meta) {
					$metaElement = '<div class="jpb-popover-content-meta">' . $meta . '</div>';
				}

				if ($metaAlignment === 'above_title') {
					$output .= $metaElement;
				}

				// Title
				$title = empty ( $item->title ) ? '' : $item->title;
				$titleClass = "";

				if ($titleDecoration) {
					switch ($titleDecoration) {
						case 'divider' :
							$titleClass .= ' jpb-decoration-divider';
							break;
						case 'bullet' :
							$titleClass .= ' jpb-decoration-bullet';
							break;
						case 'line' :
							$titleClass .= ' jpb-decoration-line';
							break;
					}
				}

				if ($title && $showTitle) {
					if ($titleDecoration === 'line') {
						$backgroundColorClass = ! empty ( $titleColor ) && $titleColor === 'background' ? ' class="jpb-popover-text-background"' : '';
						$output .= '<' . $titleStyle . ' class="jpb-popover-content-title' . $titleClass . '"><span' . $backgroundColorClass . '>' . $title . '</span></' . $titleStyle . '>';
					} else {
						$titleClass .= ! empty ( $titleColor ) && $titleColor === 'background' ? ' jpb-popover-text-background' : '';
						$output .= '<' . $titleStyle . ' class="jpb-popover-content-title' . $titleClass . '">' . $title . '</' . $titleStyle . '>';
					}
				}

				if ($metaAlignment === 'below_title') {
					$output .= $metaElement;
				}

				// Content
				$content = empty ( $item->content ) ? '' : $item->content;
				$contentClass = "";

				if ($content && $showContent) {
					$output .= '<div class="jpb-popover-content-text' . $contentClass . '"><p>' . $content . '</p></div>';
				}

				if ($metaAlignment === 'below_content') {
					$output .= $metaElement;
				}

				// Link
				list ( $href, $new_tab ) = JpagebuilderAddonHelper::parseLink ( $item, 'link', [ 
						'url' => 'link',
						'new_tab' => 'target'
				] );
				$linkItemText = empty ( $item->link_item_text ) ? '' : $item->link_item_text;
				$hrefTag = ! empty ( $href ) ? 'href="' . $href . '"' : '';
				$linkClass = "";
				$linkWrapClass = "";

				if ($hrefTag && $showLink) {
					$text = empty ( $linkItemText ) ? $linkText : $linkItemText;
					$output .= '<div class="jpb-popover-content-link-wrap' . $linkWrapClass . '">';
					$output .= '<a ' . $hrefTag . ' ' . $new_tab . ' class="jpb-popover-content-link' . $linkClass . '">' . $text . '</a>';
					$output .= '</div>';
				}

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

		$output .= '</div> </div>';
		$output .= ($addon_title && $addon_title_position === 'bottom') ? '<' . $addon_heading_selector . ' class="jpb-addon-title" style="display: block;">' . $addon_title . '</' . $addon_heading_selector . '>' : '';
		$output .= '</div>'; // .jpb-addon-popover

		return $output;
	}

	/**
	 * The Popover addon's CSS stylings.
	 *
	 * @return string The CSS string.
	 * @since 5.1.0
	 */
	public function css() {
		$settings = $this->addon->settings;
		$addon_id = '#jpb-addon-' . $this->addon->id;
		$cssHelper = new JpagebuilderCSSHelper ( $addon_id );
		$css = "";

		$contentCss = $cssHelper->generateStyle ( '.jpb-popover-content-item', $settings, [ 
				'popover_background_color' => 'background-color'
		], [ 
				'popover_background_color' => false
		] );

		$contentCss .= $cssHelper->generateStyle ( '.jpb-popover-content-item .jpb-card-body', $settings, [ 
				'popover_padding' => 'padding'
		], [ 
				'popover_padding' => false
		], [ 
				'popover_padding' => 'spacing'
		] );

		$css .= $cssHelper->generateStyle ( '.jpb-addon.jpb-addon-popover .jpb-popover-ripple-effect::before', $settings, [ 
				'marker_background_color' => 'background-color'
		], [ 
				'marker_background_color' => false
		] );

		$css .= $cssHelper->generateStyle ( '.jpb-addon.jpb-addon-popover .jpb-popover-ripple-effect::after', $settings, [ 
				'marker_background_color' => 'background-color'
		], [ 
				'marker_background_color' => false
		] );

		$css .= $cssHelper->generateStyle ( '.jpb-addon.jpb-addon-popover .jpb-inline > picture img', $settings, [ 
				'background_image_width' => [ 
						'width',
						'max-width'
				],
				'background_image_height' => 'height'
		] );

		$css .= $cssHelper->generateStyle ( '.jpb-addon.jpb-addon-popover .jpb-card-media-top > picture img', $settings, [ 
				'popover_image_width' => [ 
						'width',
						'max-width'
				],
				'popover_image_height' => 'height',
				'popover_image_padding' => 'padding'
		], [ 
				'popover_image_padding' => false
		], [ 
				'popover_image_padding' => 'spacing'
		] );

		$contentCss .= $cssHelper->generateStyle ( '.jpb-popover-content-title', $settings, [ 
				'title_color' => 'color',
				'popover_title_margin' => 'margin',
				'popover_title_padding' => 'padding'
		], [ 
				'title_color' => false,
				'popover_title_padding' => false,
				'popover_title_margin' => false
		], [ 
				'popover_title_padding' => 'spacing',
				'popover_title_margin' => 'spacing'
		] );

		$contentCss .= $cssHelper->generateStyle ( '.jpb-popover-content-text', $settings, [ 
				'popover_content_margin' => 'margin',
				'popover_content_padding' => 'padding',
				'popover_content_color' => 'color'
		], [ 
				'popover_content_color' => false,
				'popover_content_margin' => false,
				'popover_content_padding' => false
		], [ 
				'popover_content_margin' => 'spacing',
				'popover_content_padding' => 'spacing'
		] );

		$contentCss .= $cssHelper->generateStyle ( '.jpb-popover-content-link-wrap > a', $settings, [ 
				'popover_link_color' => 'color'
		], [ 
				'popover_link_color' => false
		] );

		$contentCss .= $cssHelper->generateStyle ( '.jpb-popover-content-link-wrap', $settings, [ 
				'popover_link_margin' => 'margin',
				'popover_link_padding' => 'padding'
		], [ 
				'popover_link_margin' => false,
				'popover_link_padding' => false
		], [ 
				'popover_link_margin' => 'spacing',
				'popover_link_padding' => 'spacing'
		] );

		$contentCss .= $cssHelper->generateStyle ( '.jpb-popover-content-meta', $settings, [ 
				'meta_color' => 'color',
				'popover_meta_margin' => 'margin',
				'popover_meta_padding' => 'padding'
		], [ 
				'meta_color' => false,
				'popover_meta_margin' => false,
				'popover_meta_padding' => false
		], [ 
				'popover_meta_margin' => 'spacing',
				'popover_meta_padding' => 'spacing'
		] );

		// Marker
		$css .= $cssHelper->generateStyle ( '.jpb-addon.jpb-addon-popover .jpb-marker', $settings, [ 
				'marker_size' => [ 
						'width',
						'height'
				],
				'marker_icon_color' => 'color',
				'marker_background_color' => 'background-color'
		], [ 
				'marker_icon_color' => false,
				'marker_background_color' => false
		] );

		$css .= $cssHelper->generateStyle ( '.jpb-addon.jpb-addon-popover .jpb-marker > svg', $settings, [ 
				'marker_icon_size' => [ 
						'width',
						'height'
				]
		] );

		$css .= $cssHelper->generateStyle ( '.jpb-addon.jpb-addon-popover .jpb-marker:hover', $settings, [ 
				'marker_icon_color_hover' => 'color',
				'marker_background_color_hover' => 'background-color'
		], [ 
				'marker_icon_color_hover' => false,
				'marker_background_color_hover' => false
		] );

		$css .= $cssHelper->generateStyle ( '.jpb-popover-wrap', $settings, [ 
				'popover_width' => 'width'
		], 'px', [ ], null, null, 'max-width:1150px;' );

		// typography
		$contentCss .= $cssHelper->typography ( '.jpb-popover-content-title', $settings, 'popover_title_typography' );
		$contentCss .= $cssHelper->typography ( '.jpb-popover-content-meta', $settings, 'popover_meta_typography' );
		$contentCss .= $cssHelper->typography ( '.jpb-popover-content-text > p', $settings, 'popover_content_typography' );
		$contentCss .= $cssHelper->typography ( '.jpb-popover-content-link-wrap > a', $settings, 'popover_link_typography' );

		$border_radius = (isset ( $settings->border_radius ) && $settings->border_radius) ? $settings->border_radius : 0;

		if ($border_radius) {
			$border_radius = explode ( " ", $settings->border_radius );
		}

		if (is_array ( $border_radius ) && (count ( $border_radius ) > 2)) {
			$css .= $cssHelper->generateStyle ( '.jpb-addon.jpb-addon-popover .jpb-inline > picture img', $settings, [ 
					'border_radius' => 'border-radius'
			], [ 
					'border_radius' => false
			], [ 
					'border_radius' => 'spacing'
			] );
		} else {
			$css .= $cssHelper->generateStyle ( '.jpb-addon.jpb-addon-popover .jpb-inline > picture img', $settings, [ 
					'border_radius' => 'border-radius'
			] );
		}

		$popover_image_border_radius = (isset ( $settings->popover_image_border_radius ) && $settings->popover_image_border_radius) ? $settings->popover_image_border_radius : 0;

		if ($popover_image_border_radius) {
			$popover_image_border_radius = explode ( " ", $settings->popover_image_border_radius );
		}

		if (is_array ( $popover_image_border_radius ) && (count ( $popover_image_border_radius ) > 2)) {
			$css .= $cssHelper->generateStyle ( '.jpb-addon.jpb-addon-popover .jpb-card-media-top > picture img', $settings, [ 
					'popover_image_border_radius' => 'border-radius'
			], [ 
					'popover_image_border_radius' => false
			], [ 
					'popover_image_border_radius' => 'spacing'
			] );
		} else {
			$css .= $cssHelper->generateStyle ( '.jpb-addon.jpb-addon-popover .jpb-card-media-top > picture img', $settings, [ 
					'popover_image_border_radius' => 'border-radius'
			] );
		}

		$transformCss = $cssHelper->generateTransformStyle ( '.jpb-addon-popover', $settings, 'transform' );
		$css .= $transformCss;

		$modifiedContentCss = str_replace ( $addon_id, $addon_id . '-portal', $contentCss );

		$css .= $modifiedContentCss;

		return $css;
	}
	public function scripts() {
		return array (
				'components/com_jpagebuilder/assets/js/addons/popover.js'
		);
	}

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

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

		$output .= $lodash->color ( 'background-color', '.jpb-popover-content-item', 'data.popover_background_color' );

		$output .= $lodash->spacing ( 'padding', '.jpb-popover-content-item', 'data.popover_padding' );

		$output .= $lodash->color ( 'background-color', '.jpb-addon.jpb-addon-popover .jpb-popover-ripple-effect::before', 'data.marker_background_color' );

		$output .= $lodash->color ( 'background-color', '.jpb-addon.jpb-addon-popover .jpb-popover-ripple-effect::after', 'data.marker_background_color' );

		$output .= $lodash->unit ( 'height', '.jpb-addon.jpb-addon-popover .jpb-inline > picture img', 'data.background_image_height', 'px' );

		$output .= $lodash->unit ( 'width', '.jpb-addon.jpb-addon-popover .jpb-inline > picture img', 'data.background_image_width', 'px' );

		$output .= $lodash->unit ( 'max-width', '.jpb-addon.jpb-addon-popover .jpb-inline > picture img', 'data.background_image_width', 'px' );

		$output .= $lodash->unit ( 'height', '.jpb-card-media-top > picture img', 'data.popover_image_height', 'px' );

		$output .= $lodash->unit ( 'width', '.jpb-card-media-top > picture img', 'data.popover_image_width', 'px' );
		$output .= $lodash->unit ( 'max-width', '.jpb-card-media-top > picture img', 'data.popover_image_width', 'px' );

		$output .= $lodash->color ( 'color', '.jpb-popover-content-title', 'data.title_color' );

		$output .= $lodash->spacing ( 'padding', 'jpb-popover-content-title', 'data.popover_title_padding' );

		$output .= $lodash->spacing ( 'margin', '.jpb-popover-content-title', 'data.popover_title_margin' );

		$output .= $lodash->color ( 'color', '.jpb-popover-content-text', 'data.popover_content_color' );

		$output .= $lodash->unit ( 'margin-top', '.jpb-popover-content-text', 'data.content_margin_top' );

		$output .= $lodash->color ( 'color', '.jpb-popover-content-link-wrap > a', 'data.popover_link_color' );

		$output .= $lodash->spacing ( 'padding', '.jpb-popover-content-link-wrap', 'data.popover_content_padding' );

		$output .= $lodash->spacing ( 'margin', '.jpb-popover-content-link-wrap', 'data.popover_content_margin' );

		$output .= $lodash->color ( 'color', '.jpb-popover-content-meta', 'data.meta_color' );

		$output .= $lodash->spacing ( 'padding', '.jpb-popover-content-meta', 'data.popover_meta_padding' );

		$output .= $lodash->spacing ( 'margin', '.jpb-popover-content-meta', 'data.popover_meta_margin' );

		// Marker
		$output .= $lodash->color ( 'color', '.jpb-addon.jpb-addon-popover .jpb-marker', 'data.marker_icon_color' );
		$output .= $lodash->color ( 'background-color', '.jpb-addon.jpb-addon-popover .jpb-marker', 'data.marker_background_color' );

		$output .= $lodash->unit ( 'width', '.jpb-addon.jpb-addon-popover .jpb-marker', 'data.marker_size', 'px' );
		$output .= $lodash->unit ( 'height', '.jpb-addon.jpb-addon-popover .jpb-marker', 'data.marker_size', 'px' );
		$output .= $lodash->unit ( 'width', '.jpb-addon.jpb-addon-popover .jpb-marker > svg', 'data.marker_icon_size', 'px' );
		$output .= $lodash->unit ( 'height', '.jpb-addon.jpb-addon-popover .jpb-marker > svg', 'data.marker_icon_size', 'px' );

		$output .= $lodash->color ( 'color', '.jpb-addon.jpb-addon-popover .jpb-marker:hover', 'data.marker_icon_color_hover' );
		$output .= $lodash->color ( 'background-color', '.jpb-addon.jpb-addon-popover .jpb-marker:hover', 'data.marker_background_color_hover' );

		$output .= $lodash->unit ( 'width', '.jpb-popover-wrap', 'data.popover_width', 'px' );

		// typography
		$output .= $lodash->typography ( '.jpb-popover-content-title', 'data.popover_title_typography' );
		$output .= $lodash->typography ( '.jpb-popover-content-meta', 'data.popover_meta_typography' );
		$output .= $lodash->typography ( '.jpb-popover-content-text > p', 'data.popover_content_typography' );
		$output .= $lodash->typography ( '.jpb-popover-content-link-wrap > a', 'data.popover_link_typography' );
		$output .= $lodash->generateTransformCss ( '.jpb-addon-popover', 'data.transform' );

		// title
		$typographyFallbacks = [ 
				'font' => 'data.title_font_family',
				'size' => 'data.title_fontsize',
				'line_height' => 'data.title_lineheight',
				'letter_spacing' => 'data.title_letterspace',
				'uppercase' => 'data.title_font_style?.uppercase',
				'italic' => 'data.title_font_style?.italic',
				'underline' => 'data.title_font_style?.underline',
				'weight' => 'data.title_font_style?.weight'
		];
		$output .= $lodash->typography ( '.jpb-addon-title', 'data.title_typography', $typographyFallbacks );
		$output .= $lodash->unit ( 'margin-top', '.jpb-addon-title', 'data.title_margin_top', 'px' );
		$output .= $lodash->unit ( 'margin-bottom', '.jpb-addon-title', 'data.title_margin_bottom', 'px' );

		$output .= '<# if((data.border_radius + "").split(" ").length < 2) { #>';
		$output .= $lodash->unit ( 'border-radius', '.jpb-addon.jpb-addon-popover .jpb-inline > picture img', 'data.border_radius', 'px' );
		$output .= '<# } else { #>';
		$output .= '#jpb-addon-{{data.id}} .jpb-addon.jpb-addon-popover .jpb-inline > picture img {
			{{window.getSplitRadius(data.border_radius)}}	
		}';
		$output .= '<# } #>';

		$output .= '<# if((data.popover_image_border_radius + "").split(" ").length < 2) { #>';
		$output .= $lodash->unit ( 'border-radius', '.jpb-addon.jpb-addon-popover .jpb-card-media-top > picture img', 'data.popover_image_border_radius', 'px' );
		$output .= '<# } else { #>';
		$output .= '#jpb-addon-{{data.id}} .jpb-addon.jpb-addon-popover .jpb-card-media-top > picture img {
			{{window.getSplitRadius(data.border_radius)}}
		}';
		;
		$output .= '<# } #>';

		$output .= '</style>';

		$output .= '
		<#
		var addon_title = (!_.isEmpty(data.title) && data.title) ? data.title : "";
		var addon_title_position = (!_.isEmpty(data.title_position) && data.title_position) ? data.title_position : "top";
		var addon_heading_selector = (!_.isEmpty(data.heading_selector) && data.heading_selector) ? data.heading_selector : "h3";

		// Common Settings
		var background_image_src = !_.isEmpty(data.background_image.src) ? data.background_image.src : data.background_image;
		var gap = !_.isEmpty(data.gap) ? data.gap : 10;

		// Display
		var showTitle = !_.isUndefined(data.show_title) ? !!data.show_title : true;
		var showContent = !_.isUndefined(data.show_content) ? !!data.show_content : true;
		var showImage = !_.isUndefined(data.show_image) ? !!data.show_image : true;
		var showLink = !_.isUndefined(data.show_link) ? !!data.show_link : true;

		// Marker
		var markerMode = (!_.isEmpty(data.marker_mode) && data.marker_mode) ? data.marker_mode : "click";
		var enableMarkerRipple = !_.isUndefined(data.enable_marker_ripple_effect) ? !!data.enable_marker_ripple_effect : false;

		// Popover
		var popoverPosition = _.isEmpty(data.popover_position) ? "right" : data.popover_position;
		var popoverImageWithoutPadding = !_.isEmpty(data.popover_image_without_padding) ? data.popover_image_without_padding : 1;
		var popoverImageBorder = !_.isEmpty(data.popover_image_border) ? data.popover_image_border : "none";

		// Title
		var titleStyle = (!_.isEmpty(data.title_style) && data.title_style) ? data.title_style : null;
		var titleDecoration = !_.isEmpty(data.title_decoration) ? data.title_decoration : "none";
		var titleColor = !_.isEmpty(data.title_color) ? data.title_color : "none";

		// Meta
		var metaAlignment = !_.isEmpty(data.meta_alignment) ? data.meta_alignment : "below_title";

		// Link
		var linkText = !_.isEmpty(data.link_text) ? data.link_text : "Read More";

		#>';

		$output .= '<div class="jpb-addon jpb-addon-popover">
						<# if( !_.isEmpty( data.title ) && addon_title_position != "bottom" ){ #><{{ addon_heading_selector }} class="jpb-addon-title jp-inline-editable-element" jpb-data-id={{data.id}} data-fieldName="title" contenteditable="true">{{ data.title }}</{{ addon_heading_selector }}><# } #>

						<div class="jpb-addon-content">
							<div id="jpb-popover-inline" class="jpb-inline">

							<# if (background_image_src) { 
								var alt = _.isEmpty(data.background_image_alt) ? "" : data.background_image_alt;

								#>
								<picture>
								<img src={{background_image_src}} alt={{alt}} loading="eager">
								</picture>
							<# } #>

							<# if (data?.jp_popover_item?.length > 0) {
								data.jp_popover_item.forEach((item) => {
									// Marker
									var markerLeft = item?.marker_left ?? 50;
									var markerTop = item?.marker_top ?? 50;
									var markerClass = "";
					
									var rippleElement = enableMarkerRipple ? "<span class=jpb-popover-ripple-effect></span>" : "";

									#>

									<button class="jpb-popover-marker jpb-marker {{markerClass}}" style="left: {{markerLeft}}%; top: {{markerTop}}%;" jpb-data="mode: {{markerMode}}" href="#"  aria-label="Open" aria-haspopup="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17" fill="none"><path stroke="currentColor" stroke-linecap="round" stroke-width="2.621" d="M2.104 8.655h13.103M8.654 2.104v13.103"/></svg> {{{rippleElement}}} </button>
					
									<#
									// popover
									var popoverItemPosition = _.isEmpty(item.popover_position) ? "none" : item.popover_position;
									var pos = popoverItemPosition === "none" ? popoverPosition : popoverItemPosition;

									#>
					
									<div jpb-data="pos: {{pos}}; mode: click; gap: {{gap}}" class="jpb-popover-content jpb-popover-wrap">
									<div class="jpb-popover-content-item">
					
									<# 
									// Image
									var image = _.isEmpty(item.image) ? "" : item.image;
									var image_src = !_.isEmpty(image.src) ? image.src : image;
									var image_width = (!_.isEmpty(image.width) && image.width) ? image.width : "";
									var image_height = (!_.isEmpty(image.height) && image.height) ? image.height : "";
									var imageWrapClass = "";
									var imageClass = "";
				
					
									if (image_src && showImage) {
										alt = _.isEmpty(item.image_alt) ? "" : item.image_alt;

										#>
										<div class="jpb-card-media-top {{imageWrapClass}}">
										<picture>
											<img src={{image.src}} class={{imageClass}} alt={{alt}}>
										</picture>
										</div>
									<# } #>
					
									<div class="jpb-card-body">
									
									<#
									var metaElement = "";
					
									// Meta
									var meta = _.isEmpty(item.meta) ? "" : item.meta;
					
									if (meta) {
										metaElement = "<div class=jpb-popover-content-meta>" + meta + "</div>";
									}
					
									if (metaAlignment === "above_title") { #>
										{{{metaElement}}}
									<# } #>
					
									<#
									// Title
									var title = _.isEmpty(item.title) ? "" : item.title;
									var titleClass = "";
					
									if (titleDecoration) {
										switch (titleDecoration) {
											case "divider":
												titleClass += " jpb-decoration-divider";
												break;
											case "bullet":
												titleClass += " jpb-decoration-bullet";
												break;
											case "line":
												titleClass += " jpb-decoration-line";
												break;
										}
									}
					
									if (title && showTitle) {
										if (titleDecoration === "line") {
											var backgroundColorClass = !_.isEmpty(titleColor) && titleColor === "background" ? " class=jpb-popover-text-background" : "";

										#>
											<{{titleStyle}} class="jpb-popover-content-title {{titleClass}}"><span {{backgroundColorClass}}>{{title}}</span></ {{titleStyle}}>
										<# } else { 
											titleClass += !_.isEmpty(titleColor) && titleColor === "background" ? " jpb-popover-text-background" : "";

											#>
											<{{titleStyle}} class="jpb-popover-content-title {{titleClass}}">{{title}}</ {{titleStyle}}>
										<# }
									} #>
					
									<#
									if (metaAlignment === "below_title") { #>
										{{{metaElement}}}
									<# } #>
					
									<#
									// Content
									var content = _.isEmpty(item.content) ? "" : item.content;
									var contentClass = "";
					
									if (content && showContent) { #>
										<div class="jpb-popover-content-text {{contentClass}}"><p>{{{content}}}</p></div>
									<# }
					
									if (metaAlignment === "below_content") { #>
										{{{metaElement}}}
									<# }
					
									// Link
									const isUrlObject = _.isObject(data?.url) && ( !!data?.url?.url || !!data?.url?.page || !!data?.url?.menu);
									const isUrlString = _.isString(data?.url) && data?.url !== "";
						
									let href;
									let target;
									let rel;
									let relData="";
						
									if(isUrlObject || isUrlString ){
										const urlObj = data?.url?.url ? data?.url : window.getSiteUrl(data?.url, data?.target);			
										const {url, new_tab, nofollow, noopener, noreferrer, type} = urlObj;
										
										target = new_tab ? `target="_blank"` : "";
						
										relData += nofollow ? "nofollow" : "";
										relData += noopener ? " noopener" : "";
										relData += noreferrer ? " noreferrer" : "";
						
										rel = `rel="${relData}"`;
										
										const buttonUrl = (type === "url" && url) || ( type === "menu" && urlObj.menu) || ( (type === "page" && !!urlObj.page ) && "index.php/component/jpagebuilder/index.php?option=com_jpagebuilder&view=page&id=" + urlObj.page) || "";
										
										href = buttonUrl ? `href=${buttonUrl}` : "";
									}

									var linkItemText = _.isEmpty(item.link_item_text) ? "" : item.link_item_text;
									var linkClass = "";
									var linkWrapClass = "";
					
									if (href && showLink) {
										var text = _.isEmpty(linkItemText) ? linkText : linkItemText;
										#>
										<div class="jpb-popover-content-link-wrap {{linkWrapClass}}">
										<a {{href}} {{target}} {{rel}} class="jpb-popover-content-link {{linkClass}}">{{text}}</a>
										</div>
									<# } #>
					
									</div>
									</div>
									</div>
								<# }) 
							}
							#>

							</div> 
						</div>
						<# if( !_.isEmpty( data.title ) && addon_title_position === "bottom" ){ #><{{ addon_heading_selector }} class="jpb-addon-title jp-inline-editable-element" jpb-data-id={{data.id}} data-fieldName="title" contenteditable="true">{{ data.title }}</{{ addon_heading_selector }}><# } #>
							
						</div>';

		return $output;
	}
}
