<?php $images = $this->getWidgetInstagramData() ?>
<?php $builderHelper = $this->helper('MGS\Fbuilder\Helper\Data'); ?>

<div class="content-block instagram-block block widget instagram-widget">
	<?php if(count($images)>0): ?>
		<?php 
			$blockId = rand() . time();
			$useSlider = $this->getUseSlider();
			$items = $perRowDefault = $this->getPerrow(); 
			
			$perRowTablet = $this->getPerrowTablet();
			$perRowMobile = $this->getPerrowMobile();
			if($useSlider && $this->hasData('number_row') && $this->getNumberRow()>1){
				$slideMultiRow = true;
				$slideBy = 1;
				$columnCount = $perRowDefault * $this->getNumberRow();
			}else{
				$slideBy = $this->getSlideBy();
				$slideMultiRow = false;
			}
			
		?>
		
		<?php 
			$settingMode = 'multiple'; 
			$navPosition = $this->getNavigationPosition();
	
			$navType = $builderHelper->getStoreConfig('fbuilder/'.$settingMode.'_slider/navigation');
			if($navType=='image'){
				$nextIcon = $builderHelper->getStoreConfig('fbuilder/'.$settingMode.'_slider/next_image');
				$prevIcon = $builderHelper->getStoreConfig('fbuilder/'.$settingMode.'_slider/prev_image');
				$navHtml = '["<span><img src=\''.$builderHelper->getMediaUrl().'mgs/fbuilder/slider/'.$prevIcon.'\'/></span>", "<span><img src=\''.$builderHelper->getMediaUrl().'mgs/fbuilder/slider/'.$nextIcon.'\'/></span>"]';
			}else if($navType=='font'){
				$nextIcon = $builderHelper->getStoreConfig('fbuilder/'.$settingMode.'_slider/next_font_class');
				$prevIcon = $builderHelper->getStoreConfig('fbuilder/'.$settingMode.'_slider/prev_font_class');
				$navHtml = '["<span><em class=\''.$prevIcon.'\'></em></span>", "<span><em class=\''.$nextIcon.'\'></em></span>"]';
			}else {
				$navHtml = '["<span></span>", "<span></span>"]';
			}
		?>
		
		<div id="instagram-widget<?= $blockId ?>" class="items<?php if($useSlider): ?> owl-carousel mgs-owl-carousel mgs-carousel-<?= $settingMode ?> nav-type-<?= $navType ?> nav-position-<?= $navPosition ?> <?php if($this->getHideNav() && ((($items==1) && ($navPosition!='middle-outside')) || (($items>1) && ($navPosition=='middle-inside')))): ?> autohide-nav<?php endif ?> dot-position-<?= $this->getPaginationPosition()?><?php else: ?> line row-<?= $perRowDefault ?> row-tablet-<?= $perRowTablet ?> row-mobile-<?= $perRowMobile ?><?php endif ?>">
			<?php $i=0; $j=0; foreach ($images as $image): $i++; ?>
				
				<?php if($slideMultiRow): ?>
					<?php if ($j++ % $columnCount == 0): ?>
					<div class="line row-<?= $perRowDefault ?> row-tablet-<?= $perRowTablet ?> row-mobile-<?= $perRowMobile ?>">
					<?php endif ?>
				<?php endif ?>
				
						<?php if($slideMultiRow || !$this->hasData('number_row')): ?><div class="col"><?php endif ?>
							<?php
								$themeSettingConfig = $this->helper('MGS\ThemeSettings\Helper\Config');
								$lazyLoad = $themeSettingConfig->getStoreConfig('themesettings/general/lazy_load');
							?>
							<?php if($lazyLoad): ?>
							<a class="instagram-item instagram-photo parent_lazy" href="<?php if($this->getLink()): ?><?= $image['link'] ?><?php else: ?>javascript:void(0);<?php endif ?>" style="background-image: url('<?= $image['src'] ?>')" <?php if($this->getLink()): ?>target="_blank"<?php endif ?>>
								<img class="img-responsive lazy" src="<?= $themeSettingConfig->getImageLazyLoad() ?>" data-src="<?= $image['src'] ?>" alt=""/>
								<?php if($this->getLike() || $this->getComment()): ?>
									<span class="social-count">
										<?php if($this->getLike()): ?>
											<span class="like-count"><?= $image['like'] ?></span>
										<?php endif ?>
										
										<?php if($this->getComment()): ?>
											<span class="comment-count"><?= $image['comment'] ?></span>
										<?php endif ?>
									</span>
								<?php endif ?>
							</a>
							<?php else: ?>
							<a class="instagram-photo" href="<?php if($this->getLink()): ?><?= $image['link'] ?><?php else: ?>javascript:void(0);<?php endif ?>" style="background-image: url('<?= $image['src'] ?>')" <?php if($this->getLink()): ?>target="_blank"<?php endif ?>>
								<img class="img-responsive" src="<?= $image['src'] ?>" alt=""/>
								<?php if($this->getLike() || $this->getComment()): ?>
									<span class="social-count">
										<?php if($this->getLike()): ?>
											<span class="like-count"><?= $image['like'] ?></span>
										<?php endif ?>
										
										<?php if($this->getComment()): ?>
											<span class="comment-count"><?= $image['comment'] ?></span>
										<?php endif ?>
									</span>
								<?php endif ?>
							</a>
							<?php endif ?>	
						<?php if($slideMultiRow || !$this->hasData('number_row')): ?></div><?php endif ?>
						
				<?php if($slideMultiRow): ?>
					<?php if ($j % $columnCount == 0 || $j == count($images)): ?>
					</div>
					<?php endif ?>
				<?php endif ?>
				
			<?php endforeach; ?>
		</div>
		
		<?php if($useSlider): ?>
			<?php $autoPlay = $this->getAutoplay() ? 'true' : 'false'; ?>
			<?php $stopAuto = $this->getStopAuto() ? 'true' : 'false'; ?>
			<?php $nav = $this->getNavigation() ? 'true' : 'false'; ?>
			<?php $dot = $this->getPagination() ? 'true' : 'false'; ?>
			<?php $rtl = $this->getRtl() ? 'true' : 'false'; ?>
			<?php $slideBy = $slideBy ? $slideBy : 1; ?>
			
			<?php $margin = 0; ?>
			<?php if($this->getSlideMargin()!=''): ?>
				<?php $margin = $this->getSlideMargin(); ?>
			<?php endif ?>
			
			<script type="text/javascript">
				require([
					'jquery',
					'mgsowlcarousel'
				], function ($) {
					var owlinstagram<?= $blockId ?> = $('#instagram-widget<?= $blockId ?>').owlCarousel({
						stagePadding: 0,
						<?php if($slideMultiRow): ?>
							items: 1,
						<?php else: ?>
							items: <?= $perRowDefault; ?>,
						<?php endif ?>
						autoplay: <?= $autoPlay ?>,
						autoplayHoverPause: <?= $stopAuto ?>,
						nav: <?= $nav ?>,
						dots: <?= $dot ?>,
						slideBy: <?= $slideBy ?>,
						rtl: <?= $rtl; ?>,
						margin: <?= $margin ?>,
						<?php if($navPosition=='top-left' || $navPosition=='top-right'): ?>
							onInitialized: function(){
								$("#instagram-widget<?= $blockId ?> .owl-nav").attr('style', 'top:<?= $this->getNavTop() ?>px');
							},
						<?php endif ?>
						<?php if(!$slideMultiRow): ?>
						responsive:{
							0:{
								items:<?= $perRowMobile; ?>,
								nav: false,
							},
							571:{
								items:<?= $perRowTablet; ?>
							},
							1200:{
								items:<?= $perRowDefault; ?>
							}
						},
						<?php endif ?>
						navText: <?= $navHtml ?>,
						autoHeight:true
					});
				});
			</script>
		<?php endif ?>
		
	<?php else: ?>
		<div class="message info empty"><div><?= __('Can not get Instagram data or your instagram account have not any images.') ?></div></div>
	<?php endif ?>
</div>
