<?php
$blogHelper = $this->helper('MGS\Blog\Helper\Data');
$collection = $block->getPostCollection();
?>

<div class="content-block blog-block blog-grid-block">
	<?php if($this->getData('mgs_panel_title') != "" || $this->getData('mgs_panel_note') != ""): ?>
		<div class="content-heading">
			<?php if($this->getData('mgs_panel_title') && $this->getData('mgs_panel_title') != ""): ?>
				<h2 class="title"><?php echo $blogHelper->decodeHtmlTag($this->getData('mgs_panel_title')) ?></h2>
			<?php endif ?>
			<?php if($this->getData('mgs_panel_note') && $this->getData('mgs_panel_note') != ""): ?>
				<div class="subtitle"><?php echo $blogHelper->decodeHtmlTag($this->getData('mgs_panel_note')) ?></div>
			<?php endif ?>
		</div>
	<?php endif ?>

	<?php if (count($collection)): ?>
		
		<?php
			$themeHelper = $this->helper('MGS\Mpanel\Helper\Data');
			$lazyLoad = $themeHelper->getStoreConfig('mgstheme/general/lazy_load');
			$baseImage = $this->getViewFileUrl('MGS_Mpanel::images/blank.png');
			$blockId = rand() . time();
			$showShortContent = $this->getConfig('show_short_content');
			$viewAs = $this->getConfig('view_as');
			$showThumbnail = $this->getConfig('show_thumbnail');
			$perRow = $this->getConfig('items', 5);
			$col = $themeHelper->convertPerRowtoCol($perRow);
		?>
		
		<?php if ($viewAs == 'owl_carousel'): ?>
			<?php 
				if($this->hasData('number_row') && $this->getNumberRow()>1){
					$columnCount = $perRow * $this->getNumberRow();
				}
			?>
			<div class="block widget mgs-blog-lastest-posts row <?php if($this->hasData('number_row') && $this->getNumberRow()>1): ?>has-margin<?php endif ?>">
				<div class="block-content">
					<div class="owl-carousel mgs-carousel-<?php echo $blockId; ?>">
						<?php $i=0; $j=0; foreach ($collection as $post): $i++ ?>
							<?php  
								if ($post->getUpdatedByUser()){ 
									$author = $post->getUpdatedByUser();
								}else { 
									$author = $post->getUser(); 
								} 
							?>
							<?php if($this->hasData('number_row') && $this->getNumberRow()>1): ?>
								<?php if ($j++ % $columnCount == 0): ?>
									<div class="item row">
								<?php endif ?>
							<?php endif ?>
							<div class="post-item<?php if($this->getNumberRow()>1): ?> col-md-<?php echo $col ?> col-sm-6 col-12">
								<div class="post-item-content">
									<?php if ($showThumbnail): ?>
										<div class="thumbnail-post">
                                            <div class="post-image">
                                                <?php if(!$lazyLoad){ $baseImage = $post->getThumbnailUrl(); } ?>
                                                <a class="img-link" href="<?php echo $blogHelper->getPostUrl($post); ?>" title="<?php echo $post->getTitle(); ?>">
                                                    <?php if($blogHelper->getImageThumbnailPost($post) != ""): ?>
                                                        <img src="<?php echo $baseImage; ?>" class="img-fluid<?php if($lazyLoad): ?> lazy<?php endif ?>" data-src="<?php echo $post->getThumbnailUrl(); ?>" alt="<?php echo $post->getTitle(); ?>" />
                                                    <?php endif ?>
                                                </a>
                                                <?php if($post->getThumbType() == "video" && $post->getVideoThumbId() != ""): ?>
                                                    <a class="btn btn-primary popup-youtube" href="<?php echo $blogHelper->getVideoThumbUrl($post); ?>" title="<?php echo $post->getTitle(); ?>"><?php echo __('Video'); ?></a>
                                                <?php endif ?>
                                            </div>
										</div>
									<?php endif ?>
									<div class="post-item-detail">
                                        <div class="post-content">
                                            <h3 class="title-blog">
                                                <a href="<?php echo $post->getPostUrlWithNoCategory(); ?>" title="<?php echo $post->getTitle(); ?>"><?php echo $post->getTitle() ?></a>
                                            </h3>
                                            <div class="post-create-date">
												<i class="ion-ios-calendar-outline"></i>
                                            	<?php echo date('M d, Y', strtotime($post->getCreatedAt())) ?> &nbsp;
                                            	<i class="ion-chatbubble-working"></i>
												<span>
												<?php echo $post->getCommentCount(); ?>
												<span><?php echo $post->getCommentCount() > 1 ? __('Comments') : __('Comment') ?></span>
												</span>
											</div>
                                        </div>
										<?php if ($showShortContent): ?>
											<div class="short-content">
												<?php echo substr($post->getShortContent(), 0, $this->getConfig('limit_characters_short_content')); ?>
											</div>
										<?php endif ?>
										<div class="post-aux">
											<a class="btn-readmore" href="<?php echo $post->getPostUrlWithNoCategory(); ?>"  ><?php echo __('Read more') ?></a>
										</div>
									</div>
								</div>
							</div>
							<?php if($this->hasData('number_row') && $this->getNumberRow()>1): ?>
								<?php if ($j % $columnCount == 0 || $j == count($collection)): ?>
									</div>
								<?php endif ?>
							<?php endif ?>
						<?php endforeach ?>
					</div>
				</div>
			</div>
			
			<script type="text/javascript">
				require([
					'jquery',
					'mgs/owlcarousel'
				], function ($) {
					var owl<?php echo $blockId ?> = $('.mgs-carousel-<?php echo $blockId ?>').owlCarousel({
						
						<?php if($this->hasData('number_row') && $this->getNumberRow()>1):?>
						items: 1,
						<?php else: ?>
						items: <?php echo $perRow; ?>,
						<?php endif ?>
						<?php if($lazyLoad): ?>lazyLoad: true,<?php endif ?>
						autoplay: <?php echo $this->getConfig('autoplay') ? 'true' : 'false' ?>,
						autoplayHoverPause: <?php echo $this->getConfig('stop_auto') ? 'true' : 'false' ?>,
						nav: <?php echo $this->getConfig('navigation') ? 'true' : 'false' ?>,
						dots: <?php echo $this->getConfig('pagination') ? 'true' : 'false' ?>,
                        rtl: RTL,
						navText: ["<i class='pe-7s-angle-left'></i>","<i class='pe-7s-angle-right'></i>"],
						<?php if(!$this->hasData('number_row') || $this->getNumberRow()==1):?>
							responsive:{
								0:{
									items:1
								},
								768:{
									items:2
								},
								992:{
									items:<?php echo$perRow; ?>
								}
							}
						<?php endif ?>
					});
					<?php if($this->getConfig('pagination')): ?>
						owl<?php echo $blockId ?>.on('changed.owl.carousel', function (event) {
							if (event.item.count - event.page.size == event.item.index)
								$(event.target).find('.owl-dots div:last')
								  .addClass('active').siblings().removeClass('active');
						});
					<?php endif ?>
				});
			</script>
		<?php else: ?>
			<div class="block widget mgs-blog-lastest-posts has-margin">
				<div class="block-content">
					<?php $perRow = $this->getConfig('items', 5); ?>
					<?php $col = $blogHelper->convertPerRowtoCol($perRow); ?>
					<ul class="row <?php echo $blogHelper->convertColClass($col, 'row') ?>">
						<?php $i=0; foreach ($collection as $post): $i++; ?>
							<?php  
								if ($post->getUpdatedByUser()){ 
									$author = $post->getUpdatedByUser();
								}else { 
									$author = $post->getUser(); 
								} 
							?>
							<li class="post-item item col-md-<?php echo $col ?> col-sm-<?php echo $col ?> col-12">
								<div class="post-item-content">
									<?php if ($showThumbnail): ?>
										<div class="thumbnail-post">
                                            <div class="post-image">
                                                <?php if(!$lazyLoad){ $baseImage = $post->getThumbnailUrl(); } ?>
                                                <a class="img-link" href="<?php echo $blogHelper->getPostUrl($post); ?>" title="<?php echo $post->getTitle(); ?>">
                                                    <?php if($blogHelper->getImageThumbnailPost($post) != ""): ?>
                                                        <img src="<?php echo $baseImage; ?>" class="img-fluid<?php if($lazyLoad): ?> lazy<?php endif ?>" data-src="<?php echo $post->getThumbnailUrl(); ?>" alt="<?php echo $post->getTitle(); ?>" />
                                                    <?php endif ?>
                                                </a>
                                                <?php if($post->getThumbType() == "video" && $post->getVideoThumbId() != ""): ?>
                                                    <a class="popup-youtube btn btn-default" href="<?php echo $blogHelper->getVideoThumbUrl($post); ?>" title="<?php echo $post->getTitle(); ?>"><?php echo __('Video'); ?></a>
                                                <?php endif ?>
                                            </div>
										</div>
									<?php endif ?>
									<div class="post-item-detail">
                                        <div class="post-content">
                                            <div class="post-create-date"><?php echo date('M d, Y', strtotime($post->getCreatedAt())) ?></div>
                                            <h3 class="title">
                                                <a href="<?php echo $post->getPostUrlWithNoCategory(); ?>" title="<?php echo $post->getTitle(); ?>"><?php echo $post->getTitle() ?></a>
                                            </h3>
                                        </div>
										<?php if ($showShortContent): ?>
											<div class="short-content">
												<div><?php echo substr($post->getShortContent(), 0, $this->getConfig('limit_characters_short_content')); ?></div>
											</div>
										<?php endif ?>
										<div class="post-aux">
											<a class="btn-readmore" href="<?php echo $post->getPostUrlWithNoCategory(); ?>"  ><?php echo __('Read more') ?></a>
										</div>
									</div>
								</div>
							</li>
						<?php endforeach ?>
					</ul>
				</div>
			</div>
		<?php endif; ?>
		
	<?php else: ?>
		<div role="alert" class="alert alert-warning"> <?php echo __('There are no posts matching the selection.') ?> </div>
	<?php endif; ?>
</div>
