<?php
$helper = $this->helper('MGS\Blog\Helper\Data');
$collection = $block->getCollection();
$showThumbnail = $this->getConfig('general_settings/show_thumbnail');
if ($this->getConfig('general_settings/thumbnail_width') != '') {
    $width = $this->getConfig('general_settings/thumbnail_width');
} else {
    $width = 240;
}
if ($this->getConfig('general_settings/thumbnail_height') != '') {
    $height = $this->getConfig('general_settings/thumbnail_height');
} else {
    $height = 180;
}
$themeSettingConfig = $this->helper('MGS\ThemeSettings\Helper\Config');
$rtl = $themeSettingConfig->getStoreConfig('themesettings/general/rtl_theme') ? 'true' : 'false';
?>

<?php if (!count($collection)): ?>
    <div class="message empty">
        <div><?= __('Have no posts.') ?></div>
    </div>
<?php else: ?>
    <div class="blog-masonry blog-post-item">
        <?php foreach ($collection as $post): ?>
            <div class="blog-post-masonry">
            	<div class="masonry-content-post">
            		<div class="post-images">
	                    <?php if ($helper->getGalleryImage($post)): ?>
							<div class="gallery-image-carousel owl-carousel owl-theme">
								<?php foreach($helper->getGalleryImage($post) as $_img): ?>
									<a class="post-thumbnail--image gallery_image" href="<?= $_img; ?>" 
										style="background-image: url('<?= $_img; ?>')">
										<img src="<?= $_img; ?>" alt="" class="img-fluid"/>
									</a>
								<?php endforeach ?>
							</div>
							<script type="text/javascript">
								require([
									'jquery',
									'mgsowlcarousel'
									], function($){			
										$(document).ready(function(){
											$(".gallery-image-carousel").owlCarousel({
												items: 10,
												loop: true,
												nav: true,
												dots: false,
												autoplayTimeout: 5000,
												rtl: <?= $rtl ?>,,
												autoplay: true,
												autoplayHoverPause: true,
												margin: 0,
												autoHeight:true,
												responsive:{
													0:{
														items: 1
													},
													576:{
														items: 1
													},
													767:{
														items: 1
													},
													992:{
														items: 1						
													}
												}
											});
										});  	
									});		
								
								require([
									'jquery',
									'magnificPopup'
								], function(jQuery){
									(function($) {
										$(document).ready(function() {
											$('.gallery-image-carousel').magnificPopup({
												delegate: '.owl-item:not(.cloned) a',
												type: 'image',
												tLoading: 'Loading image #%curr%...',
												mainClass: 'mfp-img-gallery',
												fixedContentPos: true,
												gallery: {
													enabled: true,
													navigateByImgClick: true,
													preload: [0,1]
												},
												image: {
													tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
													titleSrc: function(item) {
													return item.el.attr('title');
													}
												}
											});
										});
									})(jQuery);
								});
							</script>
							<?php else:?> 
							<?php if($helper->getImageThumbnailPost($post) != ""): ?>
								<div class="post-thumbnail">
									<?php if($post->getThumbType() == "video" && $post->getVideoThumbId() != ""): ?>
										<a class="post-thumbnail--image popup-video" href="<?= $helper->getVideoThumbUrl($post); ?>" title="<?= $post->getTitle(); ?>">
											<img class="img-fluid" src="<?= $helper->getImageThumbnailPost($post); ?>" alt="<?= $post->getTitle(); ?>"/>
										</a>
										<div class="blog-list-video">
											<?php if($post->getThumbType() == "video" && $post->getVideoThumbId() != ""): ?>
												<a class="btn btn-primary popup-video" href="<?= $helper->getVideoThumbUrl($post); ?>"></a>
											<?php endif ?>
										</div>	
										<div class="post-create-date">
	                                        <?= __('<span>%1</span></br><span class="date"> %2</span>', date('d', strtotime($post->getCreatedAt())), date('M', strtotime($post->getCreatedAt()))) ?>
	                                    </div>
									<?php else: ?>
										<a class="post-thumbnail--image" href="<?= $post->getPostUrlWithNoCategory(); ?>" title="<?= $post->getTitle(); ?>">
											<img class="img-fluid" src="<?= $helper->getImageThumbnailPost($post); ?>" alt="<?= $post->getTitle(); ?>"/>
										</a>
										<div class="post-create-date">
	                                        <?= __('<span>%1</span></br><span class="date"> %2</span>', date('d', strtotime($post->getCreatedAt())), date('M', strtotime($post->getCreatedAt()))) ?>
	                                    </div>
									<?php endif ?>
								</div>
							<?php endif ?>
						<?php endif ?>
					</div>
					<div class="post-item-info">
						<div class="short-detail">
	                        <div class="post-user"><span><?= $post->getUser(); ?></span></div>
							<div class="title">
								<h5><a href="<?= $post->getPostUrlWithNoCategory(); ?>" title="<?= $post->getTitle(); ?>"><?= $post->getTitle() ?> </a></h5>
							</div>
						</div>
					</div>
            	</div>		
            </div>
        <?php endforeach; ?>		
    </div>
    <div class="bottom-pagination text-center">
		<div class="toolbar"><?= $block->getPagerHtml(); ?></div>
	</div>
    </script>
<?php endif; ?>

<script type="text/javascript">
	function resizeMasonryItem(item){
	    var grid = document.getElementsByClassName('blog-masonry')[0],
	        rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap')),
	        rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));
	    var rowSpan = Math.ceil((item.querySelector('.masonry-content-post').getBoundingClientRect().height+rowGap)/(rowHeight+rowGap));

	    item.style.gridRowEnd = 'span '+rowSpan;
	}

/**
 * Apply spanning to all the masonry items
 *
 * Loop through all the items and apply the spanning to them using
 * `resizeMasonryItem()` function.
 *
 * @uses resizeMasonryItem
 */
	function resizeAllMasonryItems(){
	  // Get all item class objects in one list
	    var allItems = document.getElementsByClassName('blog-post-masonry');

	  /*
	   * Loop through the above list and execute the spanning function to
	   * each list-item (i.e. each masonry item)
	   */
	    for(var i=0; i < allItems.length; i++){
	        resizeMasonryItem(allItems[i]);
	    }
	}

/**
 * Resize the items when all the images inside the masonry grid
 * finish loading. This will ensure that all the content inside our
 * masonry items is visible.
 *
 * @uses ImagesLoaded
 * @uses resizeMasonryItem
 */
	function waitForImages() {
	    var allItems = document.getElementsByClassName('blog-post-masonry');
	    for(var i=0; i<allItems.length; i++){
	        imagesLoaded( allItems[i], function(instance) {
	            var item = instance.elements[0];
	            resizeMasonryItem(item);
	        } );
	    }
	}

/* Resize all the grid items on the load and resize events */
    var masonryEvents = ['load', 'resize'];
    masonryEvents.forEach( function(event) {
        window.addEventListener(event, resizeAllMasonryItems);
    } );

/* Do a resize once more when all the images finish loading */
    waitForImages();
</script>

