<?php
/**
 * @copyright	@copyright	Copyright (c) 2021 svtemp. All rights reserved.
 * @license		http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
 */

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

use Joomla\CMS\Helper\ModuleHelper;
// Add JavaScript Frameworks
use Joomla\CMS\HTML\HTMLHelper;
JHtml::_('jquery.framework'); 

// include the syndicate functions only once
require_once __DIR__ . '/helper.php';

require JModuleHelper::getLayoutPath('mod_sptouchslider', $params->get('layout', 'default'));

$app	= JFactory::getApplication();
$menu   = $app->getMenu();
$doc = JFactory::getDocument();

// Initialize site url
$siteUrl = JURI::root();

$loadingcssjsmetod = $params->get('loadingcssjsmetod');
if ($params->get('loadingcssjsmetod')) {$doc->addScript ('modules/mod_sptouchslider/js/jquery.sliderPro.min.js');}
if ($params->get('loadingcssjsmetod')) {$doc->addStyleSheet ('modules/mod_sptouchslider/css/slider-pro.min.css');}

$spcaptionposition = $params->get('spcaptionposition');

$thumbnailtextbackgroundactive = $params->get('thumbnailtextbackgroundactive');
$backgroundactivetransition = $params->get('backgroundactivetransition');
$thumbnailimagecircle = $params->get('thumbnailimagecircle');
$thumbnailimagefloat = $params->get('thumbnailimagefloat');
$backgroundcolorslidertext = $params->get('backgroundcolorslidertext');
$titlecolorslidertext = $params->get('titlecolorslidertext');
$slogancolorslidertext = $params->get('slogancolorslidertext');
$spcaptioncontainertextalign = $params->get('spcaptioncontainertextalign');
$spcaptioncontainerbackground = $params->get('spcaptioncontainerbackground');
$spcaptioncontainertextcolor = $params->get('spcaptioncontainertextcolor');
$spcaptioncontainertextfontfamily = $params->get('spcaptioncontainertextfontfamily', 'Arial, sans-serif');

// New texbox options
$spcaptioncontainertextbottom = $params->get('spcaptioncontainertextbottom');
$spcaptioncontainertextheight = $params->get('spcaptioncontainertextheight');
$spcaptioncontainertextleft = $params->get('spcaptioncontainertextleft');
$spcaptioncontainertextwidth = $params->get('spcaptioncontainertextwidth');
$spcaptioncontainertextright = $params->get('spcaptioncontainertextright');
$spcaptioncontainertextbordertop = $params->get('spcaptioncontainertextbordertop', 'none');
$spcaptioncontainertextborderright = $params->get('spcaptioncontainertextborderright', 'none');
$spcaptioncontainertextborderbottom = $params->get('spcaptioncontainertextborderbottom', 'none');
$spcaptioncontainertextborderleft = $params->get('spcaptioncontainertextborderleft', 'none');
$spcaptioncontainertextpadding = $params->get('spcaptioncontainertextpadding');
$spcaptioncontainertextborderradius = $params->get('spcaptioncontainertextborderradius', '0px');

$splinkcolor = $params->get('splinkcolor');
$splinkhovercolor = $params->get('splinkhovercolor');
$splinkdecoration = $params->get('splinkdecoration');
$splinkhoverdecoration = $params->get('splinkhoverdecoration');
$splinkfontsize = $params->get('splinkfontsize');
$splinkfontfamily = $params->get('splinkfontfamily', 'Arial, sans-serif');
$conteinerimagewidth = $params->get('conteinerimagewidth');
$conteinerimagetextheight = $params->get('conteinerimagetextheight');
$conteinerimagetextborderradius = $params->get('conteinerimagetextborderradius');
$thumbnailscontainerwidth = $params->get('thumbnailscontainerwidth');
$titlecolorsliderfontsize = $params->get('titlecolorsliderfontsize');
$titlecolorsliderfontfamily = $params->get('titlecolorsliderfontfamily', 'Arial, sans-serif');
$titlecolorslidertextalign = $params->get('titlecolorslidertextalign');
$titleletterspacing = $params->get('titleletterspacing');
$activetitlecolorslidertext = $params->get('activetitlecolorslidertext');
$sloganslidertextfontsize = $params->get('sloganslidertextfontsize');
$sloganslidertexttextalign = $params->get('sloganslidertexttextalign');
$slogansliderfontfamily = $params->get('slogansliderfontfamily', 'Arial, sans-serif');
$activeslogancolorslidertext = $params->get('activeslogancolorslidertext');
$spcaptioncontainerfontsize = $params->get('spcaptioncontainerfontsize');

$thumbnailscontainerwidthresponsive1 = $params->get('thumbnailscontainerwidthresponsive1');
$conteinerimagetextheightresponsive1 = $params->get('conteinerimagetextheightresponsive1');

$thumbnailscontainerwidthresponsive2 = $params->get('thumbnailscontainerwidthresponsive2');
$conteinerimagetextheightresponsive2 = $params->get('conteinerimagetextheightresponsive2');

$titlecolorsliderfontsizeresponsive1 = $params->get('titlecolorsliderfontsizeresponsive1');
$titlecolorsliderfontsizeresponsive2 = $params->get('titlecolorsliderfontsizeresponsive2');

$captioncontainerresponsiv1 = $params->get('captioncontainerresponsiv1');
$captioncontainerresponsiv2 = $params->get('captioncontainerresponsiv2');

$spcaptioncontainertextwidthmobile = $params->get('spcaptioncontainertextwidthmobile');
$spcaptioncontainertextheightmobile = $params->get('spcaptioncontainertextheightmobile');
$spcaptioncontainerbordermobile = $params->get('spcaptioncontainerbordermobile', 'none');

$captionFadeDuration = $params->get('captionFadeDuration');
$thumbnailsboxonof  = $params->get('thumbnailsboxonof');
$thumbnailscontainerposition = $params->get('thumbnailscontainerposition');
$thumbnailscontainerwidth = $params->get('thumbnailscontainerwidth');

$thumbnailsimageonof = $params->get('thumbnailsimageonof');
// Use of Thumbnail images off
 if ($thumbnailsimageonof == '0') {
$conteinerimagewidth = 0;
}

$style = '
#example'.$module->id.' {margin-bottom: 10px;}
#example'.$module->id.' .sp-right-thumbnails.sp-has-pointer .sp-selected-thumbnail .sp-thumbnail-text,
#example'.$module->id.' .sp-left-thumbnails.sp-has-pointer .sp-selected-thumbnail .sp-thumbnail-text,
#example'.$module->id.' .sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail .sp-thumbnail-text
{ background-color:'.$thumbnailtextbackgroundactive.';  transition: background-color '.$backgroundactivetransition.'ms ease-in-out;}
#example'.$module->id.' .sp-thumbnail-image-container { border-radius:'.$thumbnailimagecircle.'; width: '.$conteinerimagewidth.'px !important; height: '.$conteinerimagetextheight.'px !important; overflow: hidden; float: '.$thumbnailimagefloat.'; }

.sp-image-container .sp-image { max-width: 100% !important; max-height: 100%; margin: 0px;}

#example'.$module->id.' .sp-thumbnail-text { background-color:'.$backgroundcolorslidertext.'; width: calc('.$thumbnailscontainerwidth.'px - '.$conteinerimagewidth.'px - 18px); float: right; padding: 8px; -moz-box-sizing: border-box; box-sizing: border-box; height:'.$conteinerimagetextheight.'px; border-radius: '.$conteinerimagetextborderradius.'; }
#example'.$module->id.' .sp-thumbnail-title { color:'.$titlecolorslidertext.'; 	margin-bottom: 5px; font-weight: bold; font-size: '.$titlecolorsliderfontsize.'; font-family: '.$titlecolorsliderfontfamily.'; text-align: '.$titlecolorslidertextalign.'; letter-spacing: '.$titleletterspacing.'; line-height: normal;}
#example'.$module->id.' .sp-thumbnail-container.sp-selected-thumbnail .sp-thumbnail-title {color: '.$activetitlecolorslidertext.';}
#example'.$module->id.' .sp-thumbnail-description { color:'.$slogancolorslidertext.'; font-size: '.$sloganslidertextfontsize.'; text-align: '.$sloganslidertexttextalign.'; font-family: '.$slogansliderfontfamily.'; line-height: normal; }
#example'.$module->id.' .sp-thumbnail-container.sp-selected-thumbnail .sp-thumbnail-description {color: '.$activeslogancolorslidertext.';}
#example'.$module->id.' .sp-caption-container { font-family: '.$spcaptioncontainertextfontfamily.'; color: '.$spcaptioncontainertextcolor.'; margin-top: 5px;  height: 100%; text-align: '.$spcaptioncontainertextalign.'; background: '.$spcaptioncontainerbackground.'; overflow: hidden; font-size: '.$spcaptioncontainerfontsize.'; line-height: normal; }

#example'.$module->id.' .sp-captiontext { border-radius: '.$spcaptioncontainertextborderradius.'; border-top: '.$spcaptioncontainertextbordertop.'; border-right: '.$spcaptioncontainertextborderright.'; border-bottom: '.$spcaptioncontainertextborderbottom.'; border-left: '.$spcaptioncontainertextborderleft.'; font-family: '.$spcaptioncontainertextfontfamily.'; color: '.$spcaptioncontainertextcolor.'; position: absolute; bottom: '.$spcaptioncontainertextbottom.'; height: '.$spcaptioncontainertextheight.'; left: '.$spcaptioncontainertextleft.'; width: '.$spcaptioncontainertextwidth.'; right: '.$spcaptioncontainertextright.'; padding: '.$spcaptioncontainertextpadding.'; background: '.$spcaptioncontainerbackground.'; box-sizing: border-box; text-align: '.$spcaptioncontainertextalign.'; font-size: '.$spcaptioncontainerfontsize.'; line-height: normal;}

#example'.$module->id.' .sp-caption-container a, #example'.$module->id.' .sp-captiontext a {color: '.$splinkcolor.' !important; font-size: '.$splinkfontsize.'; font-family: '.$splinkfontfamily.'; font-weight: bold; text-decoration: '.$splinkdecoration.' !important;}
#example'.$module->id.' .sp-caption-container a:hover, #example'.$module->id.' .sp-captiontext a:hover {color: '.$splinkhovercolor.' !important; text-decoration: '.$splinkhoverdecoration.' !important;}

#example'.$module->id.' .sp-captiontext { visibility: hidden; opacity: 0; transition:visibility '.$captionFadeDuration.'ms linear,opacity '.$captionFadeDuration.'ms linear;}
#example'.$module->id.' .sp-selected .sp-captiontext {	visibility: visible;  opacity: 1;}

@media (max-width: 768px) {
#example'.$module->id.' .sp-thumbnail-text { width: calc('.$thumbnailscontainerwidthresponsive1.'px - '.$conteinerimagewidth.'px) !important; height: '.$conteinerimagetextheightresponsive1.'px; border-radius: 0px;}
#example'.$module->id.' .sp-thumbnail-image-container { height:'.$conteinerimagetextheightresponsive1.'px !important;	border-radius: 0px;}
#example'.$module->id.' .sp-thumbnail-image { height: calc('.$conteinerimagetextheightresponsive1.'px - 18px) !important; width: 100%; }
#example'.$module->id.' .sp-thumbnail-title { font-size: '.$titlecolorsliderfontsizeresponsive1.'; }
#example'.$module->id.' .sp-caption-container, #example'.$module->id.' .sp-captiontext {display: '.$captioncontainerresponsiv1.';}
#example'.$module->id.' .sp-captiontext { width: '.$spcaptioncontainertextwidthmobile.'; height: '.$spcaptioncontainertextheightmobile.'; border: '.$spcaptioncontainerbordermobile.';}
}

@media (max-width: 500px) {
	#example'.$module->id.' .sp-thumbnail-image-container {display: none; }
	#example'.$module->id.' .sp-thumbnail-text { width: '.$thumbnailscontainerwidthresponsive2.'px !important; height: '.$conteinerimagetextheightresponsive2.'px;}
	#example'.$module->id.' .sp-thumbnail-title { font-size: '.$titlecolorsliderfontsizeresponsive2.'; }
	#example'.$module->id.' .sp-thumbnail-description { display: none; }
#example'.$module->id.' .sp-caption-container, #example'.$module->id.' .sp-captiontext {display: '.$captioncontainerresponsiv2.';}
}

'; 
$doc->addStyleDeclaration( $style );

// Use of Thumbnail images
$thumbnailsimagesize = $params->get('thumbnailsimagesize');
$thumbnailsimageposition = $params->get('thumbnailsimageposition');

 if ($thumbnailimagefloat == 'left') {
$style = '
#example'.$module->id.' .sp-thumbnail-image { height: 100%; margin: 0 2px 0 0; width: 100%; max-width: 100% !important; float: right; object-fit: '.$thumbnailsimagesize.'; object-position: '.$thumbnailsimageposition.';}
'; 
$doc->addStyleDeclaration( $style );
}
 else {
$style = '
#example'.$module->id.' .sp-thumbnail-image { height: 100%; margin: 0 0 0 2px; width: 100%; max-width: 100% !important; float: left; object-fit: '.$thumbnailsimagesize.'; object-position: '.$thumbnailsimageposition.';}
'; 
$doc->addStyleDeclaration( $style );
}

// Use of Thumbnail images circle
 if ($thumbnailimagecircle == '150px') {
$style = '
#example'.$module->id.' .sp-thumbnail-image { max-width: 100% !important; margin: 0; object-fit: '.$thumbnailsimagesize.'; object-position: '.$thumbnailsimageposition.';}
'; 
$doc->addStyleDeclaration( $style );
}


// Use of thumbnailsPosition bottom
 if ($thumbnailscontainerposition == 'bottom') {
$style = '
#example'.$module->id.' .sp-thumbnail-text {width: calc('.$thumbnailscontainerwidth.'px - '.$conteinerimagewidth.'px);}
#example'.$module->id.' .sp-thumbnail-container {height: calc('.$conteinerimagetextheight.'px + 18px) !important; }
'; 
$doc->addStyleDeclaration( $style );
}

$frontsliderimage[]= $params->get( '!', "" );
$dataretinafrontsliderimage[]= $params->get( '!', "" );
$titlethumbnailimage[]= $params->get( '!', "" );
$sloganthumbnailimage[]= $params->get( '!', "" );
$descriptiontabbox[]= $params->get( '!', "" );
$linkdataretinafrontsliderimage[]= $params->get( '!', "" );
$textdataretinafrontsliderimage[]= $params->get( '!', "" );

for ($j=1; $j<=30; $j++) {
	$frontsliderimage[] = $params->get( 'frontsliderimage'.$j , "" );
	$dataretinafrontsliderimage[] = $params->get( 'dataretinafrontsliderimage'.$j , "" );	
	$titlethumbnailimage[] = $params->get( 'titlethumbnailimage'.$j , "" );
	$sloganthumbnailimage[] = $params->get( 'sloganthumbnailimage'.$j , "" );	
	$descriptiontabbox[] = $params->get( 'descriptiontabbox'.$j , "" );	
	$linkdataretinafrontsliderimage[] = $params->get( 'linkdataretinafrontsliderimage'.$j , "" );	
	$textdataretinafrontsliderimage[] = $params->get( 'textdataretinafrontsliderimage'.$j , "" );	
}

if ($params->get('jQuery')) {$doc->addScript ('https://code.jquery.com/jquery-latest.min.js');}

// Use of Thumbnail position bottm
if ($thumbnailscontainerposition == 'bottom') {
$style = '
#example'.$module->id.' .sp-thumbnail-text { width: calc('.$thumbnailscontainerwidth.'px - '.$conteinerimagewidth.'px); }
'; 
$doc->addStyleDeclaration( $style );
$sliderwidth = "100%";
$thumbnailitemheight = "calc(" . $conteinerimagetextheight . "px + 18px)";
}

 else {

$style = '
#example'.$module->id.' .sp-thumbnail-text { width: calc('.$thumbnailscontainerwidth.'px - '.$conteinerimagewidth.'px - 18px); }
'; 
$doc->addStyleDeclaration( $style );
$sliderwidth = "calc(100% - " . $thumbnailscontainerwidth . "px + 13px)";
$thumbnailitemheight = "" . $conteinerimagetextheight . "";
}

// Use of Thumbnail box disable
if ($thumbnailsboxonof == 0) {
$sliderwidth = "100%";
}

?>

<!-- Add slideshow-->
<?php if ( 0 == $loadingcssjsmetod ) : ?>
<script type="text/javaScript" src="modules/mod_sptouchslider/js/jquery.sliderPro.min.js"></script>
<link rel="stylesheet" href="modules/mod_sptouchslider/css/slider-pro.min.css" media="all" type="text/css" />
<?php endif; ?>
 
<script type="text/javascript">
	jQuery( document ).ready(function( jQuery ) {
		jQuery( '#example<?php echo $module->id;?>' ).sliderPro({
			width: '<?php echo $sliderwidth; ?>',
			height: <?php echo $params->get('sliderheight');?>,          
			orientation: '<?php echo $params->get('spsliderorientation');?>',
            imageScaleMode: '<?php echo $params->get('spsliderimagesize');?>',
            autoplayDelay: '<?php echo $params->get('autoplayDelay');?>',
			slideAnimationDuration: '<?php echo $params->get('slideAnimationDuration');?>',
			captionFadeDuration: '<?php echo $captionFadeDuration ;?>',
		    centerImage: <?php echo $params->get('sliderimagesenter');?>,
			loop: <?php echo $params->get('sliderloop');?>,
			arrows: <?php echo $params->get('sliderarrows');?>,
            autoplay: <?php echo $params->get('sliderautoplay');?>,
			buttons: <?php echo $params->get('sliderbuttonhs');?>,
			thumbnailsPosition: '<?php echo $params->get('thumbnailscontainerposition');?>',
			thumbnailPointer: true,
			thumbnailWidth: '<?php echo $params->get('thumbnailscontainerwidth');?>',   
            thumbnailHeight: '<?php echo $params->get('conteinerimagetextheight'); ?>',
			breakpoints: {
				768: {
					width: '100%',
					thumbnailsPosition: 'bottom',
			        height: <?php echo $params->get('sliderheightresponsive1');?>,          
					thumbnailWidth: '<?php echo $params->get('thumbnailscontainerwidthresponsive1'); ?>',
					thumbnailHeight: '<?php echo $params->get('conteinerimagetextheightresponsive1'); ?>'
				},
				500: {
					width: '100%',
					thumbnailsPosition: 'bottom',
			        height: <?php echo $params->get('sliderheightresponsive2');?>,          
					thumbnailWidth: '<?php echo $params->get('thumbnailscontainerwidthresponsive2'); ?>',
					thumbnailHeight: '<?php echo $params->get('conteinerimagetextheightresponsive2'); ?>'
				}
			}
		});
})( jQuery );
</script>
<!-- End slideshow-->

<div id="example<?php echo $module->id;?>" class="slider-pro">
		<div class="sp-slides">     

<?php for ($i=0; $i<=3; $i++){ if ($frontsliderimage[$i] != null) { ?>
            <div class="sp-slide">
                <?php if ( 1 == $spcaptionposition ) : ?><div class="sp-captiontext"><?php echo $descriptiontabbox[$i]; ?> <a href="<?php echo $linkdataretinafrontsliderimage[$i]; ?>" target="<?php echo $params->get('urllinkbuttontarget');?>"><?php echo $textdataretinafrontsliderimage[$i]; ?></a></div><?php endif; ?>
				               
                <img class="sp-image" src="<?php echo $siteUrl; ?>modules/mod_sptouchslider/img/blank.gif"
					data-src="<?php echo $siteUrl; ?><?php echo $frontsliderimage[$i];?>"
					data-retina="<?php echo $siteUrl; ?><?php echo $dataretinafrontsliderimage[$i];?>"
                    alt="<?php echo $titlethumbnailimage[$i]; ?>"/>
                <?php if ( 2 == $spcaptionposition ) : ?><div class="sp-caption"><?php echo $descriptiontabbox[$i]; ?> <a href="<?php echo $linkdataretinafrontsliderimage[$i]; ?>" target="<?php echo $params->get('urllinkbuttontarget');?>"><?php echo $textdataretinafrontsliderimage[$i]; ?></a></div><?php endif; ?>
            </div>
<?php }};  ?> 

 <?php if ( 1 == $thumbnailsboxonof ) : ?>        
		<div class="sp-thumbnails">
	
<?php for ($i=0; $i<=3; $i++){ if ($frontsliderimage[$i] != null) { ?>
			<div class="sp-thumbnail">
 <?php if ( 1 == $thumbnailsimageonof ) : ?>        
				<div class="sp-thumbnail-image-container">
					<img class="sp-thumbnail-image" src="<?php echo $siteUrl; ?><?php echo $dataretinafrontsliderimage[$i];?>"/>
				</div>
<?php endif; ?>        
				<div class="sp-thumbnail-text">
					<div class="sp-thumbnail-title"><?php echo $titlethumbnailimage[$i]; ?></div>
					<div class="sp-thumbnail-description"><?php echo $sloganthumbnailimage[$i]; ?></div>
				</div>
			</div>
<?php }};  ?> 

		</div sp-thumbnails>
<?php endif; ?>        
        
		</div sp-slides>
        </div example>

<style type="text/css">
<?php echo $params->get('spslidercss');?>
</style>

<?php for ($i>3; $i<=30; $i++){ if ($titlethumbnailimage[$i] != null) { ?>
<?php
  echo "<span>So</span><span>rry</span>: $titlethumbnailimage[$i]";
?>
<?php }};  ?> 