<?php

/**
 * Magestore
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Magestore.com license that is
 * available through the world-wide-web at this URL:
 * http://www.magestore.com/license-agreement.html
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade this extension to newer
 * version in the future.
 *
 * @category    Magestore
 * @package     Magestore_Bannerslider
 * @copyright   Copyright (c) 2012 Magestore (http://www.magestore.com/)
 * @license     http://www.magestore.com/license-agreement.html
 */

?>
<?php
/** @var \Magestore\Bannerslider\Block\SliderItem $block */
$styleSlide = $block->getSlider()->getStyleSlide();
$slider = $block->getSlider();
$htmlId = $block->getFlexsliderHtmlId();
$bannerCollection = $block->getBannerCollection();
?>
<link rel="stylesheet" type="text/css"
	  href="<?php echo $block->getViewFileUrl('Magestore_Bannerslider::css/flexslider.css') ?>">
<link rel="stylesheet" type="text/css"
	  href="<?php echo $block->getViewFileUrl('Magestore_Bannerslider::css/custom.css') ?>">
<script type="text/javascript">
	(function () {
		var flexSliderSelector = '<?php echo $htmlId; ?>';
		require(['jquery', 'magestore/flexslider', 'magestore/youtubebackground'], function ($) {
			var fitImageSlider = function (slider) {
				if (slider && slider[0]) {
					var height = $(slider[0]).find('.slides li img').height();
					$(slider[0]).find('.slides li img').each(function (index, element) {
						if ($(element).height() > height) {
							height = $(element).height();
						}
					});
					$(slider[0]).find('.slides li,.slides  li a,.slides li img').css('height', height + 'px');
				}
			}
			$(document).ready(function ($) {
				var STYLESLIDE_FLEXSLIDER_ONE = <?php echo \Magestore\Bannerslider\Model\Slider::STYLESLIDE_FLEXSLIDER_ONE ?>;
				var STYLESLIDE_FLEXSLIDER_TWO = <?php echo \Magestore\Bannerslider\Model\Slider::STYLESLIDE_FLEXSLIDER_TWO ?>;
				var STYLESLIDE_FLEXSLIDER_THREE = <?php echo \Magestore\Bannerslider\Model\Slider::STYLESLIDE_FLEXSLIDER_THREE ?>;

				switch (<?php echo $styleSlide ?>) {
					case STYLESLIDE_FLEXSLIDER_ONE:
						$('.' + flexSliderSelector).flexslider({
							animation: '<?php echo $block->escapeHtml($slider->getData("animationB")); ?>',
							slideshowSpeed: <?php echo $slider->getSliderSpeed() ?>,
							start: function (slider) {
								fitImageSlider(slider);
							}
						});
						break;
					case STYLESLIDE_FLEXSLIDER_TWO:
						$('.' + flexSliderSelector).flexslider({
							animation: '<?php echo $block->escapeHtml($slider->getData("animationB")) ?>',
							controlNav: 'thumbnails',
							slideshowSpeed: <?php echo $slider->getSliderSpeed() ?>,
							start: function (slider) {
								fitImageSlider(slider);
							}
						});
						break;
					case STYLESLIDE_FLEXSLIDER_THREE:
						$('#' + flexSliderSelector + '-carousel').flexslider({
							animation: 'slide',
							controlNav: false,
							animationLoop: true,
							slideshow: true,
							itemWidth: 210,
							itemMargin: 5,
							asNavFor: '#' + flexSliderSelector,
							start: function (slider) {
								fitImageSlider(slider);
							}
						});
						$('#' + flexSliderSelector).flexslider({
							animation: '<?php echo $block->escapeHtml($slider->getData("animationB")) ?>',
							controlNav: false,
							animationLoop: true,
							slideshow: true,
							sync: '#' + flexSliderSelector + '-carousel',
							slideshowSpeed: <?php echo $slider->getSliderSpeed() ?>,
							start: function (slider) {
								fitImageSlider(slider);
							}
						});
						break;
					default:
						$('.' + flexSliderSelector).flexslider({
							animation: 'slide',
							animationLoop: true,
							itemWidth: 400,
							slideshow: true,
							itemMargin: 5,
							minItems: 2,
							maxItems: 4,
							start: function (slider) {
								fitImageSlider(slider);
							}
						});
						break;
				}


				/*youtubebackground part*/
                var sliderVideoYtContainer = $('#slider-video-yt');
                if(sliderVideoYtContainer) {
                    var videoStarted = false;
                    var isMobile = false;
                    var videoId = sliderVideoYtContainer.attr('desktop');

                    if($(window).width() <= 768){
                        sliderVideoYtContainer.removeClass('forceDisabledForVideo');
                        videoId = sliderVideoYtContainer.attr('mobile');
                        isMobile = true
                    }

                    sliderVideoYtContainer.YTPlayer({
                        fitToBackground: !isMobile,
                        videoId: videoId,
                        playerVars: {
                            modestbranding: 0,
                            autoplay: 1,
                            controls: 0,
                            showinfo: 0,
                            branding: 0,
                            rel: 0,
                            autohide: 0,
                            start: 0
                        }
                    });

                    var forceAutoplayMobile = setInterval(function(){
                        var player = sliderVideoYtContainer.data('ytPlayer').player;

                        player.addEventListener('onStateChange', function(event){
                            if(event.data === 1){
                                videoStarted = true;
                                if(isMobile){
                                    sliderVideoYtContainer.addClass('forceDisabledForVideo');
                                }
                                clearInterval(forceAutoplayMobile);
                            }
                        });
                    }, 1000)
                }

			});
		});
	})();
</script>
<div class="magestore-bannerslider-standard"
	 data-mage-init='{"magestore/impress": {"url": "<?php echo $this->getUrl("bannerslider/index/impress") ?>", "slider_id": "<?php echo $block->getSlider()->getId() ?>"}}'>
	<?php if ($block->isShowTitle() == \Magestore\Bannerslider\Model\Slider::SHOW_TITLE_YES) :
		?>
		<div class="magestore-bannerslider-title"
			 style="font: bold 12px/16px Arial, Helvetica, sans-serif;text-transform: uppercase;color: #e26703;">
			<strong><span><?php echo $block->escapeHtml($slider->getTitle()); ?></span></strong>
		</div>
	<?php endif; ?>
	<div class="magestore-bannerslide-flex-slider" style="margin: auto; margin-bottom: 40px;">
		<div id="<?php echo $htmlId ?>" class="flexslider flexslider-content-image <?php echo $htmlId ?>"
			 style="margin:auto">
			<ul class="slides">
                <?php if($slider->isYouTubeVideoEnabled()) :?>
                    <li class="forceDisabledForVideo" id="slider-video-yt" mobile="<?= $slider->getYtMobileCode() ?>" desktop="<?= $slider->getYtDesktopCode() ?>"></li>
                <?php endif; ?>
                <?php foreach ($bannerCollection as $banner):
					$img = $block->getBannerImageUrl($banner);
					$img_mobile = $block->getBannerImageMobileUrl($banner);

					?>
					<?php if ($styleSlide == \Magestore\Bannerslider\Model\Slider::STYLESLIDE_FLEXSLIDER_TWO) : ?>
					<li data-thumb="<?php echo $img ?>"
						data-thumb-mobile="<?php echo $img_mobile ?>">
						<a href="<?php echo $banner->getClickUrl() ?>" target="<?php echo $banner->getTargetValue() ?>"
						   style="display:block;"
						   data-mage-init='{"magestore/clickbanner": {"url": "<?php echo $this->getUrl("bannerslider/index/click") ?>", "slider_id": "<?php echo $banner->getSliderId() ?>", "banner_id": "<?php echo $banner->getId() ?>" }}'>
							<?php
							if ($img_mobile == ($block->getBaseUrl() . "media/")): ?>
								<img src="<?= $img ?>">
							<?php else: ?>
								<picture>
									<source media="(min-width: 768px)" srcset="<?= $img ?>">
									<source media="(max-width: 767px)" srcset="<?= $img_mobile ?>">
									<img src="<?php echo $block->getBannerImageUrl($banner) ?>">
								</picture>
							<?php endif; ?>
						</a>
						<?php if ($banner->getCaption()): ?>
							<div class="flex-caption"><?php echo $banner->getCaption(); ?></div><?php endif; ?>
					</li>
				<?php else :
					?>
					<li>
						<a href="<?php echo $banner->getClickUrl() ?>" target="<?php echo $banner->getTargetValue() ?>"
						   style="display:block;"
						   data-mage-init='{"magestore/clickbanner": {"url": "<?php echo $this->getUrl("bannerslider/index/click") ?>", "slider_id": "<?php echo $banner->getSliderId() ?>", "banner_id": "<?php echo $banner->getId() ?>" }}'>
							<?php
							if ($img_mobile == ($block->getBaseUrl() . "media/")): ?>
								<img src="<?= $img ?>">
							<?php else: ?>
								<picture>
									<source media="(min-width: 768px)" srcset="<?= $img ?>">
									<source media="(max-width: 767px)" srcset="<?= $img_mobile ?>">
									<img src="<?php echo $block->getBannerImageUrl($banner) ?>">
								</picture>
							<?php endif; ?>
						</a>
						<?php if ($banner->getCaption()): ?>
							<div class="flex-caption"><?php echo $banner->getCaption(); ?></div><?php endif; ?>
					</li>
				<?php endif; ?>
				<?php endforeach ?>
			</ul>
		</div>

		<?php if ($styleSlide == \Magestore\Bannerslider\Model\Slider::STYLESLIDE_FLEXSLIDER_THREE) :
			?>
			<!-- for flex slide carousel-->
			<div id="<?php echo $htmlId ?>-carousel" class="flexslider flexslider-carousel" style="margin:auto">
				<ul class="slides">
					<?php foreach ($bannerCollection as $banner) :
						?>
						<li>
							<img class="slider-image" alt="<?php echo $banner->getImageAlt() ?>"
								 src="<?php echo $block->getBannerImageUrl($banner) ?>"/>
							<img class="slider-image-mobile" alt="<?php echo $banner->getImageAlt() ?>"
								 src="<?php echo $block->getBannerImageMobileUrl($banner) ?>"/>
						</li>
					<?php endforeach ?>
				</ul>
			</div>
		<?php endif; ?>
	</div>
</div>
<style>
	.flex-viewport .slides li {
		margin-bottom: 0px !important;
	}
</style>

