<?php
/*

Template Name: Blog Masonry

*/
?>



<?php if(isset($_REQUEST["um_page"])):
 			if(isset($_POST["paged"])):?>
				
				  <?php 
				  
				  	$paged = $_POST["paged"];
	            	$display = get_field('display_posts');
					$custom_cat = get_field('categories');
					$columns = get_field('columns'); 
	             	
	             	
	             	if($display == "all" || count($custom_cat) < 1 ){
							$args = array(
								'post_type' => 	'post',
								'orderby'	=>	'menu_order date',
								'order'		=>	'DESC',
								'paged'     => 	$paged,
							
							);
					}
					else{
							$args = array(
								'post_type' => 	'post',
								'orderby'	=>	'menu_order date',
								'order'		=>	'DESC',
								'paged'     => 	$paged,
								'category__in' => $custom_cat,
							);
						}
					
					$the_Query = new WP_Query($args);
					while ($the_Query->have_posts()):
                		$the_Query->the_post();
                		
						$post_categories  = get_the_category();
							$post_categories_names = '';
							$post_categories_realNames = '';
							if($post_categories){
								foreach ($post_categories as $post_cat){
									$post_categories_names .= str_replace(' ', '_',$post_cat->name)." ";
									$post_categories_realNames .= $post_cat->name.', ';
								}
								$post_categories_realNames = substr($post_categories_realNames, 0, -2);
							}
							$classes = array(
								'um_masonryItem',
								 $columns,
								'col-sm-6'
							);?>
                		
    						<div cat="<?php echo $post_categories_names;  ?>" id="post-<?php the_ID(); ?>" <?php post_class($classes); ?> ">
								<article class="blogItem mainBgColor">
									<header>	
									<div class="mainBrandOverlay">
										<div class="um_helper text-center">
											<div class="postIcon um_middle">
												<a class="um_ajaxLink" href="<?php the_permalink(); ?>">
													<?php $icon = "fa-thumb-tack"; ?>
														<?php 
															if(has_post_format('audio')){
																$icon = "fa-music";
															}
															elseif(has_post_format( 'video' )){
																$icon = "fa-play-circle";
															}
															elseif(has_post_format( 'image' )){
																$icon = "fa-picture-o";
															}
														?>
														<i class="fa <?php echo $icon; ?> fa-3x"></i>
												</a>
											</div>
										</div>
									</div>
										<?php the_post_thumbnail('blogMasonry', array('class' => 'img-responsive')); ?>
										
										
									</header>
									<div class="itemContainer">
										<h5 class="category"><?php echo $post_categories_realNames; ?></h5>
										<a href="<?php the_permalink(); ?>"><h4 class="title titleUp"><?php the_title(); ?></h4></a>
										<div class="itemContent"><?php the_excerpt(); ?></div>
									</div>
								</article>
							</div>       
    
                		
    			<?php endwhile; ?>
				
				
<?php  		endif;
		die();
	endif;  ?>

<?php get_header(); ?>
<?php wp_reset_postdata(); ?>
<?php $featuredImageType = get_field('background_image_type'); ?>
<?php setBgImg();  ?>

<main class="content blogPage <?php echo $featuredImageType; ?>">
	
		<section class="pageImage">
			<?php if($featuredImageType == "bgImg"): ?>	
				<div class="fullBg"></div>
			<?php elseif($featuredImageType == "headerImg"): ?>
				<div class="um_parallax" data-velocity="-.1"></div>
			<?php endif; ?>
		</section>
	
        <div class="container">
        	
        	<section class="pageTitle text-center">
                <div class="um_helper">
                	<div class="um_middle">
                		<h3 class="title pageTitle titleUp"><?php the_title(); ?></h3>
                	</div>
                </div>
            </section>
            
            
            
            <?php 
            	
            	$display = get_field('display_posts');
				$custom_cat = get_field('categories');
				$columns = get_field('columns'); 
				
			?>
			
             
            
          
            <section class="blogItems">
				<div class="masontyContainer row">
					
					 <?php
	
						  $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; 
						  if($display == "all" || count($custom_cat) < 1 ){
							  $args = array(
									'post_type' => 	'post',
									'orderby'	=>	'menu_order date',
									'order' 	=> 	'DESC',
									'paged'     => 	$paged, 
								);
							}else{
								$args = array(
									'post_type' => 	'post',
									'orderby'	=>	'menu_order date',
									'order'		=>	'DESC',
									'paged'     => 	$paged,
									'category__in' => $custom_cat,
								);
							}
							$the_Query = new WP_Query($args);
							while ($the_Query->have_posts()):
								$the_Query->the_post();
							
									$post_categories  = get_the_category();
									$post_categories_names = '';
									$post_categories_realNames = '';
									if($post_categories){
										foreach ($post_categories as $post_cat){
											$post_categories_names .= str_replace(' ', '_',$post_cat->name)." ";
											$post_categories_realNames .= $post_cat->name.', ';
										}
										$post_categories_realNames = substr($post_categories_realNames, 0, -2);
									}
									$classes = array(
										'um_masonryItem',
										 $columns,
										'col-sm-6'
									);
						?>
           
            	
			            			<div cat="<?php echo $post_categories_names;  ?>" id="post-<?php the_ID(); ?>" <?php post_class($classes); ?> ">
										<article class="blogItem mainBgColor">
											<header>	
											<div class="mainBrandOverlay">
												<div class="um_helper text-center">
													<div class="postIcon um_middle">
														<a class="um_ajaxLink" href="<?php the_permalink(); ?>">
															<?php $icon = "fa-thumb-tack"; ?>
																<?php 
																	if(has_post_format('audio')){
																		$icon = "fa-music";
																	}
																	elseif(has_post_format( 'video' )){
																		$icon = "fa-play-circle";
																	}
																	elseif(has_post_format( 'image' )){
																		$icon = "fa-picture-o";
																	}
																?>
																<i class="fa <?php echo $icon; ?> fa-3x"></i>
														</a>
													</div>
												</div>
											</div>
												<?php the_post_thumbnail('blogMasonry', array('class' => 'img-responsive')); ?>
												
												
											</header>
											<div class="itemContainer">
												<h5 class="category"><?php echo $post_categories_realNames; ?></h5>
												<a href="<?php the_permalink(); ?>"><h4 class="title titleUp"><?php the_title(); ?></h4></a>
												<div class="itemContent"><?php the_excerpt(); ?></div>
											</div>
										</article>
									</div>       
							<?php endwhile; ?>	     	
				
				</div>
			</section>
			
			<?php if($the_Query->max_num_pages != 1):?>
				<div class="loadMoreContainer text-center">
						<button class="fadeIn animated loadMoreBlog btn default">
							<span><?php _e('Load More','um_lang'); ?></span>
							<div class="um_spinner">
								<div class="um_bounce1 brandBgColor"></div>
								<div class="um_bounce2 brandBgColor"></div>
								<div class="um_bounce3 brandBgColor"></div>
							</div>
						</button>
					</div>
			<?php endif; ?>
			
        </div>
    </main>
	<script>
		var pageBlog = parseInt("<?php echo $paged; ?>");
    	var lastPageBlog = parseInt('<?php echo $the_Query->max_num_pages; ?>');
	</script>
    <?php get_footer(); ?>