<?php

/**site
 * @package SP Page Builder
 * @author JoomShaper http://www.joomshaper.com
 * @copyright Copyright (c) 2010 - 2025 JoomShaper
 * @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or later
 */

use Joomla\CMS\Uri\Uri;
use Joomla\CMS\Factory;

//no direct access
defined('_JEXEC') or die('Restricted access');

class SppagebuilderAddonPopover extends SppagebuilderAddons
{
    /**
     * Sprawdza czy jesteśmy w trybie edycji
     */
    private function isEditMode()
    {
        $app = Factory::getApplication();
        
        // Sprawdź czy to administrator
        if ($app->isClient('administrator')) {
            return true;
        }
        
        // Sprawdź czy to edytor frontendu
        $input = $app->input;
        $option = $input->get('option', '');
        $view = $input->get('view', '');
        $task = $input->get('task', '');
        
        if ($option === 'com_sppagebuilder' && ($view === 'form' || $task === 'edit')) {
            return true;
        }
        
        // Sprawdź czy to edycja w Joomla
        if ($input->get('layout') === 'edit' || $task === 'edit') {
            return true;
        }
        
        return false;
    }

    /**
     * Przygotowuje URL dla pliku PDF z pola link
     */
    private function prepareFloorPlanUrl($floor_plan)
    {
        if (empty($floor_plan)) return '';
        
        // Sprawdź czy $floor_plan jest obiektem (z pola link)
        if (is_object($floor_plan)) {
            // Dla pola link, URL może być w różnych właściwościach
            if (isset($floor_plan->url) && !empty($floor_plan->url)) {
                $url = $floor_plan->url;
            } elseif (isset($floor_plan->page) && !empty($floor_plan->page)) {
                $url = 'index.php?option=com_sppagebuilder&view=page&id=' . $floor_plan->page;
            } elseif (isset($floor_plan->menu) && !empty($floor_plan->menu)) {
                $url = $floor_plan->menu;
            } else {
                return '';
            }
        } else {
            // Dla zwykłego stringa
            $url = $floor_plan;
        }
        
        // Jeśli URL jest pusty, zwróć pusty string
        if (empty($url)) return '';
        
        // Sprawdź czy to pełny URL
        if (strpos($url, "http://") !== false || strpos($url, "https://") !== false) {
            return $url;
        }
        
        // Dla lokalnych plików
        $original_src = Uri::base(true) . '/' . ltrim($url, '/');
        
        // Sprawdź czy klasa SppagebuilderHelperSite istnieje
        if (class_exists('SppagebuilderHelperSite')) {
            return SppagebuilderHelperSite::cleanPath($original_src);
        }
        
        return $original_src;
    }

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

		$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="sppb-addon sppb-addon-popover' . $class . '">';
		$output .= ($addon_title && $addon_title_position != 'bottom') ? '<' . $addon_heading_selector . ' class="sppb-addon-title">' . $addon_title . '</' . $addon_heading_selector . '>' : '';
		$output .= '<div class="sppb-addon-content">
						<div id="sppb-popover-inline" class="sppb-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;
		$showMetaText = isset($settings->show_meta_text) ? $settings->show_meta_text : true;
		$showImage = isset($settings->show_image) ? $settings->show_image : true;
		$showLink = isset($settings->show_link) ? $settings->show_link : true;
		$showPrice = isset($settings->show_price) ? $settings->show_price : true;
		$showArea = isset($settings->show_area) ? $settings->show_area : true;
		$showFloorPlan = isset($settings->show_floor_plan) ? $settings->show_floor_plan : 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';

		// Developer options
		$price_label = !empty($settings->price_label) ? $settings->price_label : 'Cena:';
		$area_label = !empty($settings->area_label) ? $settings->area_label : 'Metraż:';
		$floor_plan_label = !empty($settings->floor_plan_label) ? $settings->floor_plan_label : 'Rzut:';

		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;
			if (class_exists('SppagebuilderHelperSite')) {
			    $background_image_src = SppagebuilderHelperSite::cleanPath($original_src);
			} else {
			    $background_image_src = $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>';
		}

		// =============================================
		// Zbieranie danych do tabeli zbiorczej (tylko dla frontendu)
		// =============================================
		$summary_data = [];
		
		if (!$isEdit && isset($settings->sp_popover_item) && is_array($settings->sp_popover_item) && count($settings->sp_popover_item)) {
			foreach ($settings->sp_popover_item as $key => $item) {
				$status = isset($item->status) ? $item->status : 'available';
				$status_labels = [
					'available' => 'Dostępne',
					'reserved' => 'Rezerwacja',
					'sold' => 'Sprzedane'
				];
				
				// Przygotuj floor_plan URL
				$floor_plan_url = '';
				if (isset($item->floor_plan)) {
				    if (is_object($item->floor_plan)) {
				        if (isset($item->floor_plan->url) && !empty($item->floor_plan->url)) {
				            $floor_plan_url = $item->floor_plan->url;
				        } elseif (isset($item->floor_plan->page) && !empty($item->floor_plan->page)) {
				            $floor_plan_url = 'index.php?option=com_sppagebuilder&view=page&id=' . $item->floor_plan->page;
				        } elseif (isset($item->floor_plan->menu) && !empty($item->floor_plan->menu)) {
				            $floor_plan_url = $item->floor_plan->menu;
				        }
				    } else {
				        $floor_plan_url = $item->floor_plan;
				    }
				}
				
				$summary_data[] = [
					'title' => isset($item->title) ? $item->title : '',
					'content' => isset($item->content) ? $item->content : '',
					'status' => $status,
					'status_label' => isset($status_labels[$status]) ? $status_labels[$status] : $status,
					'price' => isset($item->price) ? $item->price : '',
					'area' => isset($item->area) ? $item->area : '',
					'floor_plan' => $floor_plan_url,
					'floor_plan_text' => isset($item->floor_plan_text) ? $item->floor_plan_text : 'Pobierz PDF',
				];
			}
		}

		// =============================================
		// Sortowanie danych alfabetycznie po tytule (tylko dla frontendu)
		// =============================================
		if (!$isEdit && !empty($summary_data)) {
			usort($summary_data, function($a, $b) {
				return strcasecmp($a['title'], $b['title']);
			});
		}

		if (isset($settings->sp_popover_item) && is_array($settings->sp_popover_item) && count($settings->sp_popover_item)) {
			foreach ($settings->sp_popover_item as $key => $item) {
				// Marker
				$markerLeft = !isset($item->marker_left) ? 50 : $item->marker_left;
				$markerTop = !isset($item->marker_top) ? 50 : $item->marker_top;
				
				// Status mieszkania - określenie koloru markera
				$status = isset($item->status) ? $item->status : 'available';
				$markerClass = " sppb-marker-status-" . $status;
				
				// Kolory domyślne dla statusu
				$statusColors = [
					'available' => ['bg' => '#28a745', 'icon' => '#ffffff'],
					'reserved' => ['bg' => '#ffc107', 'icon' => '#000000'],
					'sold' => ['bg' => '#dc3545', 'icon' => '#ffffff']
				];
				
				$markerBgColor = $statusColors[$status]['bg'];
				$markerIconColor = $statusColors[$status]['icon'];
				
				// Nadpisanie kolorów jeśli ustawiono własne w ustawieniach globalnych
				if (isset($settings->marker_background_color) && !empty($settings->marker_background_color)) {
					$markerBgColor = $settings->marker_background_color;
				}
				if (isset($settings->marker_icon_color) && !empty($settings->marker_icon_color)) {
					$markerIconColor = $settings->marker_icon_color;
				}

				$rippleElement = '';
				if ($enableMarkerRipple) {
					$rippleElement = '<span class="sppb-popover-ripple-effect" style="background-color: ' . $markerBgColor . ';"></span>';
				}
				
				$markerStyle = 'left: ' . $markerLeft . '%; top: ' . $markerTop . '%; background-color: ' . $markerBgColor . '; color: ' . $markerIconColor . ';';
				
				$output .= '<button class="sppb-popover-marker sppb-marker' . $markerClass . '" style="' . $markerStyle . '" sppb-data="mode: ' . $markerMode . '" href="#" aria-label="Open" aria-haspopup="true" data-status="' . $status . '"><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 sppb-data="pos: ' . $pos . '; mode: click; gap: ' . $gap . '; id: ' . $this->addon->id . '" class="sppb-popover-content sppb-popover-wrap">
				<div class="sppb-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 .= ' sppb-padding';

					if ($popoverImageBorder === 'rounded') {
						$imageClass .= ' sppb-border-rounded';
					} else if ($popoverImageBorder === 'circle') {
						$imageClass .= ' sppb-border-circle';
					} else if ($popoverImageBorder === 'pill') {
						$imageClass .= ' sppb-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="sppb-card-media-top' . $imageWrapClass . '">
					<picture>
						<img src="' . $image->src . '" ' . $image_width . ' ' . $image_height . ' class="' . $imageClass . '" alt="' . $alt . '">
					</picture>
					</div>';
				}

				$output .= '<div class="sppb-card-body">';
				
				// =============================================
				// Status badge nad tytułem
				// =============================================
				$status_labels = [
					'available' => 'Dostępne',
					'reserved' => 'Rezerwacja',
					'sold' => 'Sprzedane'
				];
				$status_label = isset($status_labels[$status]) ? $status_labels[$status] : $status;
				
				$output .= '<div class="sppb-status-badge sppb-status-badge-' . $status . '">' . $status_label . '</div>';
				
				$metaElement = "";

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

				if ($meta && $showMetaText) {
					$metaElement = '<div class="sppb-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 .= ' sppb-decoration-divider';
							break;
						case 'bullet':
							$titleClass .= ' sppb-decoration-bullet';
							break;
						case 'line':
							$titleClass .= ' sppb-decoration-line';
							break;
					}
				}

				if ($title && $showTitle) {
					if ($titleDecoration === 'line') {
						$backgroundColorClass = !empty($titleColor) && $titleColor === 'background' ? ' class="sppb-popover-text-background"' : '';
						$output .= '<' . $titleStyle . ' class="sppb-popover-content-title' . $titleClass . '"><span' . $backgroundColorClass . '>' . $title . '</span></' . $titleStyle . '>';
					} else {
						$titleClass .= !empty($titleColor) && $titleColor === 'background' ? ' sppb-popover-text-background' : '';
						$output .= '<' . $titleStyle . ' class="sppb-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="sppb-popover-content-text' . $contentClass . '"><p>' . $content . '</p></div>';
				}

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

				// Developer data table
				$price = isset($item->price) ? $item->price : '';
				$area = isset($item->area) ? $item->area : '';
				$floor_plan = isset($item->floor_plan) ? $item->floor_plan : '';
				
				// =============================================
				// Dla statusu "sprzedane" pokazujemy tylko cenę
				// =============================================
				$showAreaForStatus = ($status === 'sold') ? false : $showArea;
				$showFloorPlanForStatus = ($status === 'sold') ? false : $showFloorPlan;
				
				if (($price && $showPrice) || ($area && $showAreaForStatus) || ($floor_plan && $showFloorPlanForStatus)) {
					$output .= '<div class="sppb-developer-data-table">';
					$output .= '<table class="sppb-table sppb-table-bordered">';
					
					// Cena - zawsze widoczna jeśli ustawiona i włączona
					if ($price && $showPrice) {
						$output .= '<tr>';
						$output .= '<th>' . $price_label . '</th>';
						$output .= '<td>' . $this->formatPrice($price) . '</td>';
						$output .= '</tr>';
					}
					
					// Metraż - tylko jeśli nie jest sprzedane
					if ($area && $showAreaForStatus) {
						$output .= '<tr>';
						$output .= '<th>' . $area_label . '</th>';
						$output .= '<td>' . $area . ' m²</td>';
						$output .= '</tr>';
					}
					
					// Rzut/Plan (PDF) - tylko jeśli nie jest sprzedane
					if ($floor_plan && $showFloorPlanForStatus) {
						$floor_plan_url = $this->prepareFloorPlanUrl($floor_plan);
						$floor_plan_text = !empty($item->floor_plan_text) ? $item->floor_plan_text : 'Pobierz PDF';
						
						$output .= '<tr>';
						$output .= '<th>' . $floor_plan_label . '</th>';
						$output .= '<td><a href="' . $floor_plan_url . '" target="_blank" class="sppb-btn sppb-btn-link sppb-btn-sm">' . $floor_plan_text . ' <i class="fa fa-download"></i></a></td>';
						$output .= '</tr>';
					}
					
					$output .= '</table>';
					$output .= '</div>';
				}

				// Link
				list($href, $new_tab) = AddonHelper::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="sppb-popover-content-link-wrap' . $linkWrapClass . '">';
					$output .= '<a ' . $hrefTag . ' ' . $new_tab . ' class="sppb-popover-content-link' . $linkClass . '">' . $text . '</a>';
					$output .= '</div>';
				}

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

		$output .= '</div>'; // zamknięcie #sppb-popover-inline
		
		// =============================================
		// Tabela zbiorcza pod zdjęciem - TYLKO NA FRONCIE (NIE W EDYTORZE)
		// =============================================
		if (!$isEdit && !empty($summary_data)) {
			$output .= '<div class="sppb-summary-table-container">';
			$output .= '<h3 class="sppb-summary-table-title">Lista mieszkań</h3>';
			$output .= '<div class="sppb-table-responsive">';
			$output .= '<table class="sppb-table sppb-table-bordered sppb-summary-table">';
			$output .= '<thead>';
			$output .= '<tr>';
			$output .= '<th>Nazwa</th>';
			$output .= '<th>Status</th>';
			$output .= '<th>Opis</th>';
			$output .= '<th>Cena</th>';
			$output .= '<th>Metraż</th>';
			$output .= '<th>Rzut</th>';
			$output .= '</tr>';
			$output .= '</thead>';
			$output .= '<tbody>';
			
			foreach ($summary_data as $data) {
				$status_class = 'status-' . $data['status'];
				$formatted_price = $this->formatPrice($data['price']);
				$content_preview = strlen($data['content']) > 80 ? substr($data['content'], 0, 80) . '...' : $data['content'];
				
				$output .= '<tr class="' . $status_class . '">';
				$output .= '<td data-label="Nazwa">' . $data['title'] . '</td>';
				$output .= '<td data-label="Status"><span class="sppb-status-badge-small sppb-status-badge-' . $data['status'] . '">' . $data['status_label'] . '</span></td>';
				$output .= '<td data-label="Opis">' . $content_preview . '</td>';
				$output .= '<td data-label="Cena">' . $formatted_price . '</td>';
				$output .= '<td data-label="Metraż">' . ($data['area'] ? $data['area'] . ' m²' : '-') . '</td>';
				$output .= '<td data-label="Rzut">';
				if ($data['floor_plan']) {
				    // Dla danych z summary_data mamy już przygotowany URL jako string
					$output .= '<a href="' . $data['floor_plan'] . '" target="_blank" class="sppb-btn sppb-btn-link sppb-btn-sm">' . $data['floor_plan_text'] . ' <i class="fa fa-download"></i></a>';
				} else {
					$output .= '-';
				}
				$output .= '</td>';
				$output .= '</tr>';
			}
			
			$output .= '</tbody>';
			$output .= '</table>';
			$output .= '</div>'; // zamknięcie .sppb-table-responsive
			
			// Wskaźnik przesuwania (widoczny tylko na małych ekranach)
			$output .= '<div class="sppb-swipe-indicator">';
			$output .= '<i class="fa fa-arrow-left"></i>';
			$output .= '<span>Przesuń palcem aby zobaczyć więcej</span>';
			$output .= '<i class="fa fa-arrow-right"></i>';
			$output .= '</div>';
			
			$output .= '</div>'; // zamknięcie .sppb-summary-table-container
		}
		
		$output .= '</div>'; // zamknięcie .sppb-addon-content
		$output .= ($addon_title && $addon_title_position === 'bottom') ? '<' . $addon_heading_selector . ' class="sppb-addon-title" style="display: block;">' . $addon_title . '</' . $addon_heading_selector . '>' : '';
		$output .= '</div>'; // .sppb-addon-popover

		return $output;
	}

	/**
	 * Format price with thousands separator
	 */
	private function formatPrice($price)
	{
		if (empty($price)) return '';
		
		// Sprawdź czy cena zawiera już symbol waluty
		if (preg_match('/[0-9.,]+\s*(zł|PLN|€|\$|£)/i', $price)) {
			return $price;
		}
		
		// Usuń niepotrzebne znaki i sformatuj
		$price = preg_replace('/[^0-9]/', '', $price);
		return number_format($price, 0, '', ' ') . ' zł';
	}

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

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

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

		// Usuwamy stare style ripple i dodajemy nowe z obsługą kolorów
		$css .= $cssHelper->generateStyle(
			'.sppb-addon.sppb-addon-popover .sppb-popover-ripple-effect',
			$settings,
			[],
			[],
			[],
		);

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

		$css .= $cssHelper->generateStyle(
			'.sppb-addon.sppb-addon-popover .sppb-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(
			'.sppb-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(
			'.sppb-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(
			'.sppb-popover-content-link-wrap > a',
			$settings,
			[
				'popover_link_color'	=> 'color',
			],
			[
				'popover_link_color' => false
			]
		);

		$contentCss .= $cssHelper->generateStyle(
			'.sppb-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(
			'.sppb-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(
			'.sppb-addon.sppb-addon-popover .sppb-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(
			'.sppb-addon.sppb-addon-popover .sppb-marker > svg',
			$settings,
			[
				'marker_icon_size' => ['width', 'height'],
			],
		);

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

		// =============================================
		// Style dla status badge
		// =============================================
		$css .= '
		.sppb-status-badge {
			display: inline-block;
			padding: 4px 10px;
			margin-bottom: 10px;
			border-radius: 4px;
			font-size: 12px;
			font-weight: 600;
			text-transform: uppercase;
			letter-spacing: 0.5px;
		}
		
		.sppb-status-badge-available {
			background-color: #28a745;
			color: #ffffff;
		}
		
		.sppb-status-badge-reserved {
			background-color: #ffc107;
			color: #000000;
		}
		
		.sppb-status-badge-sold {
			background-color: #dc3545;
			color: #ffffff;
		}
		
		.sppb-status-badge-small {
			display: inline-block;
			padding: 2px 8px;
			border-radius: 3px;
			font-size: 11px;
			font-weight: 600;
		}';

		// Style dla developer data table
		$css .= '
		.sppb-developer-data-table {
			margin: 15px 0;
		}
		
		.sppb-developer-data-table .sppb-table {
			width: 100%;
			border-collapse: collapse;
			background: #f9f9f9;
			border-radius: 4px;
			overflow: hidden;
		}
		
		.sppb-developer-data-table .sppb-table th,
		.sppb-developer-data-table .sppb-table td {
			padding: 10px 12px;
			text-align: left;
			border: 1px solid #e5e5e5;
		}
		
		.sppb-developer-data-table .sppb-table th {
			background: #f0f0f0;
			font-weight: 600;
			width: 40%;
		}
		
		.sppb-developer-data-table .sppb-table td {
			background: #ffffff;
		}
		
		.sppb-developer-data-table .sppb-btn-link {
			color: #007bff;
			text-decoration: none;
			padding: 0;
			font-size: 14px;
		}
		
		.sppb-developer-data-table .sppb-btn-link:hover {
			color: #0056b3;
			text-decoration: underline;
		}
		
		.sppb-developer-data-table .fa-download {
			margin-left: 5px;
			font-size: 12px;
		}';

		// =============================================
		// Style dla tabeli zbiorczej
		// =============================================
		$css .= '
		.sppb-summary-table-container {
			margin-top: 30px;
			padding: 20px;
			background: #ffffff;
			border: 1px solid #e5e5e5;
			border-radius: 8px;
		}
		
		.sppb-summary-table-title {
			margin-top: 0;
			margin-bottom: 20px;
			font-size: 20px;
			font-weight: 600;
			color: #333;
		}
		
		.sppb-table-responsive {
			overflow-x: auto;
			-webkit-overflow-scrolling: touch;
			width: 100%;
			position: relative;
		}
		
		.sppb-table-responsive.is-scrollable::after {
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			width: 40px;
			background: linear-gradient(to right, rgba(255,255,255,0), rgba(0,0,0,0.1));
			pointer-events: none;
			border-radius: 0 4px 4px 0;
		}
		
		.sppb-summary-table {
			width: 100%;
			border-collapse: collapse;
			background: #ffffff;
			min-width: 700px;
		}
		
		.sppb-summary-table th {
			background: #f5f5f5;
			padding: 12px 15px;
			text-align: left;
			font-weight: 600;
			color: #333;
			border: 1px solid #e5e5e5;
			white-space: nowrap;
		}
		
		.sppb-summary-table td {
			padding: 12px 15px;
			border: 1px solid #e5e5e5;
			vertical-align: middle;
		}
		
		.sppb-summary-table td:nth-child(3) {
			max-width: 250px;
			white-space: normal;
			word-wrap: break-word;
		}
		
		.sppb-summary-table tr.status-available td {
			background-color: rgba(40, 167, 69, 0.05);
		}
		
		.sppb-summary-table tr.status-reserved td {
			background-color: rgba(255, 193, 7, 0.05);
		}
		
		.sppb-summary-table tr.status-sold td {
			background-color: rgba(220, 53, 69, 0.05);
			opacity: 0.8;
		}
		
		.sppb-summary-table .sppb-btn-link {
			color: #007bff;
			text-decoration: none;
			padding: 0;
			font-size: 13px;
			white-space: nowrap;
		}
		
		.sppb-summary-table .sppb-btn-link:hover {
			color: #0056b3;
			text-decoration: underline;
		}
		
		.sppb-swipe-indicator {
			display: none;
			text-align: center;
			margin-top: 15px;
			font-size: 14px;
			color: #666;
			align-items: center;
			justify-content: center;
			gap: 10px;
		}
		
		.sppb-swipe-indicator i {
			font-size: 18px;
			color: #007bff;
			animation: swipeHint 1.5s infinite;
		}
		
		.sppb-swipe-indicator i.fa-arrow-left {
			animation-delay: 0.2s;
		}
		
		.sppb-swipe-indicator i.fa-arrow-right {
			animation-delay: 0.4s;
		}
		
		@keyframes swipeHint {
			0% { transform: translateX(0); opacity: 0.5; }
			50% { transform: translateX(8px); opacity: 1; }
			100% { transform: translateX(0); opacity: 0.5; }
		}
		
		@media screen and (max-width: 768px) {
			.sppb-swipe-indicator {
				display: flex;
			}
		}
		
		@media screen and (max-width: 480px) {
			.sppb-summary-table-container {
				padding: 15px;
			}
			
			.sppb-summary-table th {
				padding: 8px 10px;
				font-size: 13px;
			}
			
			.sppb-summary-table td {
				padding: 8px 10px;
				font-size: 13px;
			}
			
			.sppb-summary-table .sppb-btn-link {
				font-size: 12px;
			}
		}';

		// Style dla ripple effect
		$css .= '
		.sppb-addon.sppb-addon-popover .sppb-popover-ripple-effect {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border-radius: 50%;
			pointer-events: none;
			animation: sppb-ripple 1.5s infinite;
			opacity: 0.6;
			z-index: -1;
		}
		
		@keyframes sppb-ripple {
			0% {
				transform: scale(1);
				opacity: 0.6;
			}
			100% {
				transform: scale(2.5);
				opacity: 0;
			}
		}
		
		.sppb-addon.sppb-addon-popover .sppb-marker {
			position: relative;
			overflow: visible;
			z-index: 1;
		}
		
		.sppb-addon.sppb-addon-popover .sppb-marker .sppb-popover-ripple-effect {
			position: absolute;
		
			transform: translate(-50%, -50%);
			width: 100%;
			height: 100%;
			border-radius: 50%;
			animation: sppb-ripple 1.5s infinite;
			z-index: -1;
		}';

		// Style dla statusów markerów
		$css .= '
		#sppb-addon-' . $this->addon->id . ' .sppb-marker-status-available .sppb-popover-ripple-effect {
			background-color: #28a745 !important;
		}
		#sppb-addon-' . $this->addon->id . ' .sppb-marker-status-reserved .sppb-popover-ripple-effect {
			background-color: #ffc107 !important;
		}
		#sppb-addon-' . $this->addon->id . ' .sppb-marker-status-sold .sppb-popover-ripple-effect {
			background-color: #dc3545 !important;
		}';

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

		// typography
		$contentCss .= $cssHelper->typography('.sppb-popover-content-title', $settings, 'popover_title_typography');
		$contentCss .= $cssHelper->typography('.sppb-popover-content-meta', $settings, 'popover_meta_typography');
		$contentCss .= $cssHelper->typography('.sppb-popover-content-text > p', $settings, 'popover_content_typography');
		$contentCss .= $cssHelper->typography('.sppb-popover-content-link-wrap > a', $settings, 'popover_link_typography');
		
		// Developer data table typography
		$contentCss .= $cssHelper->typography('.sppb-developer-data-table th', $settings, 'developer_table_header_typography');
		$contentCss .= $cssHelper->typography('.sppb-developer-data-table td', $settings, 'developer_table_cell_typography');
		$contentCss .= $cssHelper->typography('.sppb-developer-data-table a', $settings, 'developer_table_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(
				'.sppb-addon.sppb-addon-popover .sppb-inline > picture img',
				$settings,
				[
					'border_radius' => 'border-radius',
				],
				[
					'border_radius' => false
				],
				[
					'border_radius' => 'spacing'
				]
			);
		} else {
			$css .= $cssHelper->generateStyle(
				'.sppb-addon.sppb-addon-popover .sppb-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(
				'.sppb-addon.sppb-addon-popover .sppb-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(
				'.sppb-addon.sppb-addon-popover .sppb-card-media-top > picture img',
				$settings,
				[
					'popover_image_border_radius' => 'border-radius',
				]
			);
		}

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

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

		$css .= $modifiedContentCss;

		return $css;
	}

	public function scripts()
	{
		$js = array(Uri::base(true) . '/components/com_sppagebuilder/assets/js/addons/popover.js');
		
		// Dodajemy skrypt do wykrywania przewijalności tabeli - tylko na froncie
		$isEdit = $this->isEditMode();
		if (!$isEdit) {
			$custom_js = '
			<script>
			document.addEventListener("DOMContentLoaded", function() {
				var containers = document.querySelectorAll(".sppb-table-responsive");
				containers.forEach(function(container) {
					function checkScrollable() {
						if (container.scrollWidth > container.clientWidth) {
							container.classList.add("is-scrollable");
						} else {
							container.classList.remove("is-scrollable");
						}
					}
					checkScrollable();
					window.addEventListener("resize", checkScrollable);
				});
			});
			</script>
			';
			$js[] = $custom_js;
		}
		
		return $js;
	}

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

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

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

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

		// Style dla status badge w edytorze
		$output .= '
		.sppb-status-badge {
			display: inline-block;
			padding: 4px 10px;
			margin-bottom: 10px;
			border-radius: 4px;
			font-size: 12px;
			font-weight: 600;
			text-transform: uppercase;
			letter-spacing: 0.5px;
		}
		
		.sppb-status-badge-available {
			background-color: #28a745;
			color: #ffffff;
		}
		
		.sppb-status-badge-reserved {
			background-color: #ffc107;
			color: #000000;
		}
		
		.sppb-status-badge-sold {
			background-color: #dc3545;
			color: #ffffff;
		}';

		// Style dla developer data table w edytorze
		$output .= '
		.sppb-developer-data-table {
			margin: 15px 0;
		}
		
		.sppb-developer-data-table .sppb-table {
			width: 100%;
			border-collapse: collapse;
			background: #f9f9f9;
			border-radius: 4px;
			overflow: hidden;
		}
		
		.sppb-developer-data-table .sppb-table th,
		.sppb-developer-data-table .sppb-table td {
			padding: 10px 12px;
			text-align: left;
			border: 1px solid #e5e5e5;
		}
		
		.sppb-developer-data-table .sppb-table th {
			background: #f0f0f0;
			font-weight: 600;
			width: 40%;
		}
		
		.sppb-developer-data-table .sppb-table td {
			background: #ffffff;
		}
		
		.sppb-developer-data-table .sppb-btn-link {
			color: #007bff;
			text-decoration: none;
			padding: 0;
			font-size: 14px;
		}
		
		.sppb-developer-data-table .sppb-btn-link:hover {
			color: #0056b3;
			text-decoration: underline;
		}
		
		.sppb-developer-data-table .fa-download {
			margin-left: 5px;
			font-size: 12px;
		}';

		// Style dla ripple effect w edytorze
		$output .= '
		.sppb-addon.sppb-addon-popover .sppb-popover-ripple-effect {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border-radius: 50%;
			pointer-events: none;
			animation: sppb-ripple 1.5s infinite;
			opacity: 0.6;
			z-index: -1;
		}
		
		@keyframes sppb-ripple {
			0% {
				transform: scale(1);
				opacity: 0.6;
			}
			100% {
				transform: scale(2.5);
				opacity: 0;
			}
		}
		
		.sppb-addon.sppb-addon-popover .sppb-marker {
			position: relative;
			overflow: visible;
			z-index: 1;
		}
		
		.sppb-addon.sppb-addon-popover .sppb-marker .sppb-popover-ripple-effect {
			position: absolute;
			
			transform: translate(-50%, -50%);
			width: 100%;
			height: 100%;
			border-radius: 50%;
			animation: sppb-ripple 1.5s infinite;
			z-index: -1;
		}';

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

		// typography
		$output .= $lodash->typography('.sppb-popover-content-title', 'data.popover_title_typography');
		$output .= $lodash->typography('.sppb-popover-content-meta', 'data.popover_meta_typography');
		$output .= $lodash->typography('.sppb-popover-content-text > p', 'data.popover_content_typography');
		$output .= $lodash->typography('.sppb-popover-content-link-wrap > a', 'data.popover_link_typography');
		
		// Developer data table typography
		$output .= $lodash->typography('.sppb-developer-data-table th', 'data.developer_table_header_typography');
		$output .= $lodash->typography('.sppb-developer-data-table td', 'data.developer_table_cell_typography');
		$output .= $lodash->typography('.sppb-developer-data-table a', 'data.developer_table_link_typography');
		
		$output .= $lodash->generateTransformCss('.sppb-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('.sppb-addon-title', 'data.title_typography', $typographyFallbacks);
		$output .= $lodash->unit('margin-top', '.sppb-addon-title', 'data.title_margin_top', 'px');
		$output .= $lodash->unit('margin-bottom', '.sppb-addon-title', 'data.title_margin_bottom', 'px');

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

		$output .= '<# if((data.popover_image_border_radius + "").split(" ").length < 2) { #>';
		$output .= $lodash->unit('border-radius', '.sppb-addon.sppb-addon-popover .sppb-card-media-top > picture img', 'data.popover_image_border_radius', 'px');
		$output .= '<# } else { #>';
		$output .= '#sppb-addon-{{data.id}} .sppb-addon.sppb-addon-popover .sppb-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;
		var showPrice = !_.isUndefined(data.show_price) ? !!data.show_price : true;
		var showArea = !_.isUndefined(data.show_area) ? !!data.show_area : true;
		var showFloorPlan = !_.isUndefined(data.show_floor_plan) ? !!data.show_floor_plan : 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";
		
		// Developer options
		var priceLabel = !_.isEmpty(data.price_label) ? data.price_label : "Cena:";
		var areaLabel = !_.isEmpty(data.area_label) ? data.area_label : "Metraż:";
		var floorPlanLabel = !_.isEmpty(data.floor_plan_label) ? data.floor_plan_label : "Rzut:";

		// Status labels
		var statusLabels = {
			available: "Dostępne",
			reserved: "Rezerwacja", 
			sold: "Sprzedane"
		};

		// Helper function to format price
		function formatPrice(price) {
			if (!price) return "";
			if (/[0-9.,]+\s*(zł|PLN|€|\\$|£)/i.test(price)) return price;
			price = price.replace(/[^0-9]/g, "");
			if (!price) return "";
			return parseInt(price).toLocaleString("pl-PL").replace(/,/g, " ") + " zł";
		}

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

			<div class="sppb-addon-content">
				<div id="sppb-popover-inline" class="sppb-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?.sp_popover_item?.length > 0) {
					data.sp_popover_item.forEach((item) => {
						// Marker
						var markerLeft = item?.marker_left ?? 50;
						var markerTop = item?.marker_top ?? 50;
						
						// Status mieszkania
						var status = item?.status ?? "available";
						var markerClass = " sppb-marker-status-" + status;
						
						// Kolory domyślne dla statusu
						var statusColors = {
							available: { bg: "#28a745", icon: "#ffffff" },
							reserved: { bg: "#ffc107", icon: "#000000" },
							sold: { bg: "#dc3545", icon: "#ffffff" }
						};
						
						var markerBgColor = statusColors[status].bg;
						var markerIconColor = statusColors[status].icon;
						
						// Nadpisanie kolorów jeśli ustawiono własne w ustawieniach globalnych
						if (!_.isEmpty(data.marker_background_color)) {
							markerBgColor = data.marker_background_color;
						}
						if (!_.isEmpty(data.marker_icon_color)) {
							markerIconColor = data.marker_icon_color;
						}
		
						var rippleElement = "";
						if (enableMarkerRipple) {
							rippleElement = "<span class=\"sppb-popover-ripple-effect\" style=\"background-color: " + markerBgColor + ";\"></span>";
						}
						#>

						<button class="sppb-popover-marker sppb-marker {{markerClass}}" style="left: {{markerLeft}}%; top: {{markerTop}}%; background-color: {{markerBgColor}}; color: {{markerIconColor}};" sppb-data="mode: {{markerMode}}" href="#" aria-label="Open" aria-haspopup="true" data-status="{{status}}"><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 sppb-data="pos: {{pos}}; mode: click; gap: {{gap}}" class="sppb-popover-content sppb-popover-wrap">
						<div class="sppb-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="sppb-card-media-top {{imageWrapClass}}">
							<picture>
								<img src={{image.src}} class={{imageClass}} alt={{alt}}>
							</picture>
							</div>
						<# } #>
		
						<div class="sppb-card-body">
						
						<!-- Status badge -->
						<div class="sppb-status-badge sppb-status-badge-{{status}}">{{statusLabels[status] || status}}</div>
						
						<#
						var metaElement = "";
		
						// Meta
						var meta = _.isEmpty(item.meta) ? "" : item.meta;
		
						if (meta) {
							metaElement = "<div class=sppb-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 += " sppb-decoration-divider";
									break;
								case "bullet":
									titleClass += " sppb-decoration-bullet";
									break;
								case "line":
									titleClass += " sppb-decoration-line";
									break;
							}
						}
		
						if (title && showTitle) {
							if (titleDecoration === "line") {
								var backgroundColorClass = !_.isEmpty(titleColor) && titleColor === "background" ? " class=sppb-popover-text-background" : "";

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

								#>
								<{{titleStyle}} class="sppb-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="sppb-popover-content-text {{contentClass}}"><p>{{{content}}}</p></div>
						<# }
		
						if (metaAlignment === "below_content") { #>
							{{{metaElement}}}
						<# }
						
						// Developer data table
						var price = item?.price || "";
						var area = item?.area || "";
						var floor_plan = item?.floor_plan || "";
						var floor_plan_text = item?.floor_plan_text || "Pobierz PDF";
						
						// Dla statusu "sprzedane" pokazujemy tylko cenę
						var showAreaForStatus = (status === "sold") ? false : showArea;
						var showFloorPlanForStatus = (status === "sold") ? false : showFloorPlan;
						
						if ((price && showPrice) || (area && showAreaForStatus) || (floor_plan && showFloorPlanForStatus)) {
							#>
							<div class="sppb-developer-data-table">
								<table class="sppb-table sppb-table-bordered">
									<# if (price && showPrice) { #>
									<tr>
										<th>{{priceLabel}}</th>
										<td>{{formatPrice(price)}}</td>
									</tr>
									<# } #>
									
									<# if (area && showAreaForStatus) { #>
									<tr>
										<th>{{areaLabel}}</th>
										<td>{{area}} m²</td>
									</tr>
									<# } #>
									
									<# if (floor_plan && showFloorPlanForStatus) { #>
									<tr>
										<th>{{floorPlanLabel}}</th>
										<td>
											<a href="{{floor_plan}}" target="_blank" class="sppb-btn sppb-btn-link sppb-btn-sm">
												{{floor_plan_text}} <i class="fa fa-download"></i>
											</a>
										</td>
									</tr>
									<# } #>
								</table>
							</div>
						<# } #>

						<#
						// 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/sppagebuilder/index.php?option=com_sppagebuilder&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="sppb-popover-content-link-wrap {{linkWrapClass}}">
							<a {{href}} {{target}} {{rel}} class="sppb-popover-content-link {{linkClass}}">{{text}}</a>
							</div>
						<# } #>
		
						</div>
						</div>
						</div>
					<# }) 
				}
				#>

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


		return $output;
	}
}
