<?php
/**
* Template Name: Blog New1
*
* @package WordPress
* @subpackage Twenty_Fourteen
* @since Twenty Fourteen 1.0
*/


global $post;
$currentpost_id = $post->ID;
$currentpost_desc = $post->post_content;
$currentpost_title = $post->post_title;
get_header(); 
$grid_style = get_field("grid_layout",$currentpost_id);

$gridstylecol = explode('-',preg_replace('/\s+/', '-', $grid_style));
switch($gridstylecol[0]){
	case "2":
		$gridstylecolclass = "col-".$gridstylecol[0].'-'.$gridstylecol[1];
		$width = "47%";
		break;
	case "3":
		$gridstylecolclass = "col-".$gridstylecol[0].'-'.$gridstylecol[1];
		$width = "30%";
		break;
	case "4":
		$gridstylecolclass = "col-".$gridstylecol[0].'-'.$gridstylecol[1];
		$width = "22%";
		break;
	default:
		$gridstylecolclass = "col-".$gridstylecol[0].'-'.$gridstylecol[1];
		$width = "47%";
}
?>
<style>
	article.entry.has-media.<?=$gridstylecolclass?> {
		width: <?=$width?>;
	}
	.main-container{
		width:80% !important;
	}
	input, button, select, textarea{
		width:100%;
	}
</style>

<div id="primary" class="content-area">
	<main id="main" class="site-main" role="main">
		<div class="post-main blog-new-main blog-new-with-load-more">

			<section class="section-banner" style="background-image: url( <?=wp_get_attachment_image_src( get_post_thumbnail_id( $currentpost_id ), 'single-post-thumbnail' )[0]?>);">
				<div class="blog-page-title">
					<h1 class="elementor-heading-title elementor-size-default"><?=$currentpost_title?></h1>
				</div>
			</section>

			<div class="main-container">
				<div class="blog-page-description"><?=$currentpost_desc?></div>
				<div class="row">
					<div class="col-md-12">
						<div id="blog-ajax-posts" class="elementor-posts-container elementor-posts elementor-posts--skin-cards elementor-grid elementor-has-item-ratio" bis_skin_checked="1">

							<?php
								$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1; 

								$args = array(
									'post_type'		  	=> 'dooblo-post',
									'post_status'	  	=> 'publish',
									'paged'           	=> $paged, 
									'posts_per_page'  	=> 4,
									'orderby' 			=> 'menu_order',
									'order'   			=> 'ASC'
								);

								$result = new WP_Query( $args );

								if ( $result-> have_posts() ) :
									while ( $result->have_posts() ) : $result->the_post();
										
										$postid = get_the_id();
										$post_categories = wp_get_object_terms( get_the_id() , 'dooblo-category' );
										$cats = array();

										foreach($post_categories as $c){
											$cat = get_category( $c );

											if($cat->name != "Uncategorized"):
												$cats[] = array( 'id' => $cat->term_id, 'name' => $cat->name, 'slug' => $cat->slug );
											endif;
										}
							?>

									<article class="col-md-6 elementor-post elementor-grid-item post-<?=get_the_ID()?> post type-post status-publish format-standard has-post-thumbnail hentry category-general entry has-media <?=$gridstylecolclass?>">
										<div class="elementor-post__card" bis_skin_checked="1">
											<a class="elementor-post__thumbnail__link" href="<?=get_the_permalink()?>">
												<div class="elementor-post__thumbnail" bis_skin_checked="1">
													<picture class="attachment-full size-full">
														<source type="image/webp" srcset="<?=get_the_post_thumbnail_url( get_the_ID(),'full')?>" sizes="(max-width: 744px) 100vw, 744px">
														<img src="<?=get_the_post_thumbnail_url( get_the_ID(),'large')?>" alt="" sizes="(max-width: 744px) 100vw, 744px"  class="lazyloaded" data-ll-status="loaded" width="744" height="421">
													</picture>
												</div>
											</a>

											<div class="elementor-post__text cst-blog-title" bis_skin_checked="1">
												<h3 class="elementor-post__title">
													<a href="<?=get_the_permalink()?>"><?=get_the_title()?></a>
												</h3>
												<div class="elementor-post__excerpt" bis_skin_checked="1">
													<p><?=get_the_excerpt()?></p>
												</div>
												<a class="elementor-post__read-more" href="<?=get_the_permalink()?>">Read More »</a>
											</div>

											<div class="elementor-post__meta-data" bis_skin_checked="1">
												<?php
												if(!empty($cats)):
													foreach($cats as $key => $val):
														$postcathtml[$postid][]='<a href="'.get_category_link($val['id']).'">'.$val['name'].'</a>';
													endforeach;
												?>
													<div class="elementor-post__cat" bis_skin_checked="1">
														<?php echo implode(' , ',$postcathtml[$postid]); ?>
													</div>
												<?php endif; ?>
												<?php $date_enable = get_field('date_enable',$postid); ?>
												<?=((!empty($date_enable[0]) && strtolower($date_enable[0]) == "yes") ?'<span class="elementor-post-date">'.date('F d,Y',strtotime(get_the_date( 'd.m.Y' ))).'</span>':'')?>
											</div>
										</div>
									</article>
								<?php endwhile; ?>
							<?php endif; ?>
						</div>

						<div class="load-more-pagination">
							<div id="load_more_posts" data-grid-class="<?php echo $gridstylecolclass; ?>" class="blog-feed__load-more c-load-more">
								<span>+</span> Load More
							</div>
						</div>

						<!--<div class="custompagination">
							<?php //pagination_blog( $paged, $result->max_num_pages); echo " <label class='mx-num'> of  ".$result->max_num_pages .'</label>'; ?>
						</div>-->
						<?php wp_reset_postdata(); ?>
					</div>
				</div>
			</div>
		</div>
	</main>
</div>

<script>
	jQuery(document).ready(function(){
		setInterval(function(){

			if(jQuery(window).width()<= 980){
				jQuery('.post-main .main-container').addClass('mobile-container');
			} else {
				jQuery('.post-main .main-container').removeClass('mobile-container');
			}
		});
	});
</script>

<?php get_footer();