<?php

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

use Joomla\CMS\Factory;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Uri\Uri;
class JpagebuilderAddonClients 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 : '';
		$title = (isset ( $settings->title ) && $settings->title) ? $settings->title : '';
		// $alignment = (isset($settings->alignment) && $settings->alignment) ? ' ' . $settings->alignment : '';
		$columns = (isset ( $settings->count ) && $settings->count) ? $settings->count : 2;
		$heading_selector = (isset ( $settings->heading_selector ) && $settings->heading_selector) ? $settings->heading_selector : 'h3';

		// Carousel
		$create_carousel = (isset ( $settings->create_carousel ) && $settings->create_carousel) ? $settings->create_carousel : 0;
		$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 : 2000;
		$carousel_interval = (isset ( $settings->carousel_interval ) && $settings->carousel_interval) ? $settings->carousel_interval : 3500;

		$carousel_margin_xl = 20;
		$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;
		}

		$carousel_item_number_xl = ! empty ( $settings->carousel_item_number_xl ) ? $settings->carousel_item_number_xl : 5;
		$carousel_item_number_lg = ! empty ( $settings->carousel_item_number_lg ) ? $settings->carousel_item_number_lg : 4;
		$carousel_item_number_md = ! empty ( $settings->carousel_item_number_md ) ? $settings->carousel_item_number_md : 3;
		$carousel_item_number_sm = ! empty ( $settings->carousel_item_number_sm ) ? $settings->carousel_item_number_sm : 3;
		$carousel_item_number_xs = ! empty ( $settings->carousel_item_number_xs ) ? $settings->carousel_item_number_xs : 2;

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

		$output = '';
		$output = '<div class="jpb-addon jpb-addon-clients' . '' . $class . '' . ($create_carousel ? ' jpb-carousel-extended' : '') . '"  data-arrow="' . $carousel_arrow . '" data-left-arrow="fa-angle-left" data-right-arrow="fa-angle-right" data-dots="' . $carousel_bullet . '" 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 . '"
		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 . '">';

		if ($title && empty ( $create_carousel )) {
			$output .= '<' . $heading_selector . ' class="jpb-addon-title">' . $title . '</' . $heading_selector . '>';
		}

		if ($create_carousel) {
			if (isset ( $settings->jp_clients_item ) && is_array ( $settings->jp_clients_item )) {
				foreach ( $settings->jp_clients_item as $item_key => $carousel_item ) {
					$carousel_img = (isset ( $carousel_item->image ) && $carousel_item->image) ? $carousel_item->image : '';
					$carousel_img_src = isset ( $carousel_img->src ) ? $carousel_img->src : $carousel_img;
					$title = (isset ( $carousel_item->title ) && $carousel_item->title) ? $carousel_item->title : '';
					$alt_text = isset ( $carousel_img->alt ) ? $carousel_img->alt : $title;

					list ( $url, $url_same_window ) = JpagebuilderAddonHelper::parseLink ( $carousel_item, "url", [ 
							'url' => 'url',
							'new_tab' => 'url_same_window'
					] );

					$output .= '<div class="jpb-carousel-extended-item">';

					if (isset ( $url ) && $url)
						$output .= '<a ' . (isset ( $url_same_window ) && $url_same_window ? $url_same_window : '') . ' rel="nofollow" href="' . $url . '">';

					$output .= '<img class="jpb-img-responsive jpb-addon-clients-image" src="' . $carousel_img_src . '" alt="' . ($alt_text) . '" loading="lazy">';

					if (isset ( $url ) && $url)
						$output .= '</a>';

					$output .= '</div>';
				}
			}
		} else {
			$output .= '<div class="jpb-addon-content">';
			$output .= '<div class="jpb-row">';

			if(isset($settings->jp_clients_item) && is_array($settings->jp_clients_item)) {
				foreach ( $settings->jp_clients_item as $key => $value ) {
					$client_img = (isset ( $value->image ) && $value->image) ? $value->image : '';
					$client_img_src = isset ( $client_img->src ) ? $client_img->src : $client_img;
					$title = (isset ( $value->title ) && $value->title) ? $value->title : '';
					$alt_text = isset ( $client_img->alt ) ? $client_img->alt : $title;
					$client_img_width = (isset ( $client_img->width ) && $client_img->width) ? $client_img->width : '';
					$client_img_height = (isset ( $client_img->height ) && $client_img->height) ? $client_img->height : '';

					if ($client_img_src) {
						// Lazy image loading
						$client_img_src = (strpos ( $client_img_src, "http://" ) !== false || strpos ( $client_img_src, "https://" ) !== false) ? $client_img_src : Uri::base ( true ) . '/' . $client_img_src;

						$placeholder = $client_img_src == '' ? false : $this->get_image_placeholder ( $client_img_src );

						$target = '';
						$output .= '<div class="' . $columns . '">';

						list ( $url, $target ) = JpagebuilderAddonHelper::parseLink ( $value, 'url' );

						if (! empty ( $url ) && $url)
							$output .= '<a ' . $target . ' href="' . $url . '">';

						$output .= '<img class="jpb-img-responsive jpb-addon-clients-image' . ($placeholder ? ' jpb-element-lazy' : '') . '" src="' . ($placeholder ? $placeholder : $client_img_src) . '" alt="' . $alt_text . '" ' . ($placeholder ? 'data-large="' . $client_img_src . '"' : '') . ' ' . ($client_img_width ? 'width="' . $client_img_width . '"' : '') . ' ' . ($client_img_height ? 'height="' . $client_img_height . '"' : '') . ' loading="lazy">';

						if (! empty ( $url ) && $url)
							$output .= '</a>';

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

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

		$output .= '</div>';

		return $output;
	}

	/**
	 * Add required script files for the addon.
	 *
	 * @return void
	 * @since 1.0.0
	 */
	public function scripts() {
		$doc = Factory::getApplication()->getDocument ();
		$wa = $doc->getWebAssetManager();
		$wa->useScript('jquery');
		$wa->registerAndUseScript('jpagebuilder.jpcarousel', 'components/com_jpagebuilder/assets/js/jp_carousel.js', [], ['defer' => true], ['jquery']);
	}

	/**
	 * 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 );

		$settings->alignment = JpagebuilderCSSHelper::parseAlignment ( $settings, 'alignment' );
		$alignmentStyle = $cssHelper->generateStyle ( '.jpb-addon-clients', $settings, [ 
				'alignment' => 'text-align'
		], false );

		$css = '';
		$remove_filter = (isset ( $settings->remove_filter ) && $settings->remove_filter) ? $settings->remove_filter : '';
		$scale_on_hover = (isset ( $settings->scale_on_hover ) && $settings->scale_on_hover) ? $settings->scale_on_hover : '';
		$scale_value = (isset ( $settings->scale_value ) && $settings->scale_value) ? $settings->scale_value : '';

		$filter_style = '';
		$filter_css = '';

		$filterStyle = '';

		if (isset ( $settings->add_css_filder ) && is_array ( $settings->add_css_filder )) {
			foreach ( $settings->add_css_filder as $filter_key => $filter_value ) {
				if ($filter_value == 'grayscale' && isset ( $settings->grayscale_value ) && $settings->grayscale_value) {
					$filter_css .= 'grayscale(' . $settings->grayscale_value . '%) ';
				}

				if ($filter_value == 'opacity' && isset ( $settings->opacity_value ) && $settings->opacity_value) {
					$filter_css .= 'opacity(' . $settings->opacity_value . '%)';
				}

				$filter_style = 'filter:' . $filter_css . ';';
			}
		}

		if ($filter_style) {
			$css .= $addon_id . ' .jpb-addon-clients-image {';
			$css .= $filter_style;
			$css .= '}';
		}

		if ($remove_filter) {
			$css .= $addon_id . ' .jpb-addon-clients-image:hover {';
			$css .= 'filter: none;';
			$css .= '}';
		}
		if ($scale_on_hover && $scale_value) {
			$css .= $addon_id . ' .jpb-addon-clients-image:hover {';
			$css .= 'transform: scale(' . $scale_value . ');';
			$css .= '}';
		}

		$css .= $alignmentStyle;

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

		return $css;
	}
	public static function getFrontendEditor() {
		$lodash = new JpagebuilderLodashlib ( '#jpb-addon-{{ data.id }}' );
		$output = '
		<style type="text/css">';

		// Title
		$titleTypographyFallbacks = [ 
				'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', $titleTypographyFallbacks );
		$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' );

		// alignment
		$output .= $lodash->alignment ( 'text-align', '.jpb-addon-clients', 'data.alignment' );

		$output .= '<# if (data.scale_on_hover) { #>';
		$output .= $lodash->transform ( 'scale', '.jpb-addon-clients-image:hover', 'data.scale_value' );
		$output .= '<# } #>';
		$output .= $lodash->generateTransformCss ( '.jpb-addon-content', 'data.transform' );

		$output .= '
			<# 
			let filter_style = "";
			let filter_css = "";
			if(!_.isEmpty(data.add_css_filder) && _.isArray(data.add_css_filder)){
				_.each(data.add_css_filder, function(filter_value){
					if(filter_value == "grayscale" && !_.isEmpty(data.grayscale_value) && data.grayscale_value){
						filter_css += `grayscale(${data.grayscale_value}%) `;
					}
					
					if(filter_value == "opacity" && !_.isEmpty(data.opacity_value) && data.opacity_value){
						filter_css += `opacity(${data.opacity_value}%)`;
					}
					filter_style = `filter:${filter_css};`;
				})
			}
			
			if(data.add_css_filder != ""){
			#>
				#jpb-addon-{{ data.id }} .jpb-addon-clients-image {
					{{filter_style}}
				}
			<# }
			if(data.add_css_filder != "" && data.remove_filter){
			#>
				#jpb-addon-{{ data.id }} .jpb-addon-clients-image:hover {
					filter: none;
				}
			<# } #>
		</style>
		<# 

		let carousel_item_number_xl = 5;
		let carousel_item_number_lg = 4;
		let carousel_item_number_md = 3;
        let carousel_item_number_sm = 3;
        let carousel_item_number_xs = 2;
		
        if(_.isObject(data.carousel_item_number)){
			const {carousel_item_number} = data;
			const {xl, lg, md, sm, xs} = carousel_item_number;

			carousel_item_number_xl = parseInt(xl) ? xl : 5;
			carousel_item_number_lg = parseInt(lg) ? lg : 4;
            carousel_item_number_md = parseInt(md) ? md : 3;
            carousel_item_number_sm = parseInt(sm) ? sm : 3;
            carousel_item_number_xs = parseInt(xs) ? xs : 2;
		}
		let column_class  = data.count;

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

        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-addon-clients {{ data.class }} {{(data.create_carousel ? \' jpb-carousel-extended\' : \'\')}}" data-left-arrow="fa-angle-left" data-right-arrow="fa-angle-right" data-arrow="{{data.carousel_arrow}}" data-dots="{{data.carousel_bullet}}" data-autoplay="{{data.carousel_autoplay}}" data-speed="{{data.carousel_speed || 2000}}" data-interval="{{data.carousel_interval ||3500}}" 
		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-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}}">
			<# if( !_.isEmpty( data.title )  && !data.create_carousel){ #><{{ data.heading_selector }} class="jpb-addon-title jp-inline-editable-element" data-id={{data.id}} data-fieldName="title" contenteditable="true">{{ data.title }}</{{ data.heading_selector }}><# } #>
			<# if(data.create_carousel) {
				if(typeof data.jp_clients_item !== "undefined" && _.isArray(data.jp_clients_item)){
					_.each(data.jp_clients_item, function(carousel_item){
						var carouselImg = {}
						if (typeof carousel_item.image !== "undefined" && typeof carousel_item.image.src !== "undefined") {
							carouselImg = carousel_item.image
						} else {
							carouselImg = {src: carousel_item.image}
						}
						let alt_text = carousel_item?.image?.alt ?? carousel_item?.title;
						
						#>
						<div class="jpb-carousel-extended-item">
						<# 
						const isMenu = _.isObject(carousel_item.url) && carousel_item.url.type === "menu" && carousel_item.url.menu;
						const isPage = _.isObject(carousel_item.url) && carousel_item.url.type === "page" && carousel_item?.url.page;
						const isUrl = _.isObject(carousel_item.url) && carousel_item.url.type === "url" && carousel_item?.url.url;
						const isOldUrl = _.isString(carousel_item.url) && carousel_item.url !== "";
							
						if(isMenu || isPage || isUrl || isOldUrl){
							const urlObj = _.isObject(carousel_item.url) ? carousel_item.url : window.getSiteUrl(carousel_item.url, carousel_item.url_same_window === 1 ? "_blank" : "");
							const {url, page, menu, type, new_tab, nofollow, noopener, noreferrer} = urlObj;
							const target = new_tab ? "_blank" : "";
							
							let relData = ""; 
							relData += nofollow ? "nofollow" : "";
							relData += noopener ? " noopener" : "";
							relData += noreferrer ? " noreferrer" : "";
							
							let newUrl = "";
							if(type === "url") newUrl = url;
							if(type === "menu") newUrl = menu;
							if(type === "page") newUrl = page ? `index.php?option=com_jpagebuilder&view=page&id=${page}` : "";
						#>
						<a href=\'{{ newUrl }}\' target=\'{{ target }}\' rel=\'{{ relData }}\' >
						<#
						}
						#>
							<# if(carouselImg.src && carouselImg.src.indexOf("https://") == -1 && carouselImg.src.indexOf("http://") == -1){ #>
								<img class="jpb-img-responsive jpb-addon-clients-image" src=\'{{ pagebuilder_base + carouselImg.src }}\' alt="{{ alt_text }}">
							<# } else if(carouselImg.src){ #>
								<img class="jpb-img-responsive jpb-addon-clients-image" src=\'{{ carouselImg.src }}\' alt="{{ alt_text }}">
							<# } #>
						<# if(isMenu || isPage || isUrl || isOldUrl){ #></a><# } #>
						</div>
					<# }); 
				}
			} else { #>
			<div class="jpb-addon-content">
				<div class="jpb-row">
					<# _.each(data.jp_clients_item, function(clients_item, key){
						var clientImg = {}
						if (typeof clients_item.image !== "undefined" && typeof clients_item.image.src !== "undefined") {
							clientImg = clients_item.image
						} else {
							clientImg = {src: clients_item.image}
						}
						if(clientImg.src){
					#>
							<div class="{{ column_class }}">
							<# 
								const isMenu = _.isObject(clients_item.url) && clients_item.url.type === "menu" && clients_item.url.menu;
								const isPage = _.isObject(clients_item.url) && clients_item.url.type === "page" && clients_item?.url.page;
								const isUrl = _.isObject(clients_item.url) && clients_item.url.type === "url" && clients_item?.url.url;
								const isOldUrl = _.isString(clients_item.url) && clients_item.url !== "";
							
								if(isMenu || isPage || isUrl || isOldUrl){
									const urlObj = _.isObject(clients_item.url) ? clients_item.url : window.getSiteUrl(clients_item.url, clients_item.url_same_window === 1 ? "_blank" : "");
									const {url, page, menu, type, new_tab, nofollow, noopener, noreferrer} = urlObj;
									const target = new_tab ? "_blank" : "";
									
									let relData = ""; 
									relData += nofollow ? "nofollow" : "";
									relData += noopener ? " noopener" : "";
									relData += noreferrer ? " noreferrer" : "";
									
									let newUrl = "";
									if(type === "url") newUrl = url;
									if(type === "menu") newUrl = menu;
									if(type === "page") newUrl = page ? `index.php?option=com_jpagebuilder&view=page&id=${page}` : "";
									#>

									<a href=\'{{ newUrl }}\' target=\'{{ target }}\' rel=\'{{ relData }}\' >
									<# } #>
									<# if(clientImg.src && clientImg.src.indexOf("https://") == -1 && clientImg.src.indexOf("http://") == -1){ #>
										<img class="jpb-img-responsive jpb-addon-clients-image" src=\'{{ pagebuilder_base + clientImg.src }}\' alt="{{ clients_item.image.alt ?? clients_item.title }}">
									<# } else if(clientImg.src){ #>
										<img class="jpb-img-responsive jpb-addon-clients-image" src=\'{{ clientImg.src }}\' alt="{{ clients_item.image.alt ?? clients_item.title }}">
									<# } #>
								<# if((_.isObject(clients_item?.url) && clients_item?.url?.url !== "") || (!_.isObject(clients_item?.url) && clients_item?.url !== "")){ #></a><# } #>
							</div>
						<# } #>
					<# }); #>
				</div>
			</div>
			<# } #>
		</div>
		';

		return $output;
	}
}
