<?php get_header(); ?>

	<div class="content inner archive archivepost">
		<header class="breadcrump">
			<div class="container">
				<a href='<?php echo esc_url( home_url( '/' ) ); ?>'>Home</a><span> / </span><h1><?php single_cat_title(); ?></h1>
			</div>
		</header>
		<div class="container">
			<?php
				
				$page_id = get_queried_object_id();
				$category = get_queried_object(); 
				$name = $category->slug;
				$color = get_field('color', $category);
				$ftr_img = get_field('featured_img', $category);
				$cont = 1;
				$posts = '';
				$args = array(
					'post_type' => 'post',
					'cat' => $page_id,
					'post_status' => 'publish',
					'posts_per_page' => 5,
					'meta_key'		=> 'post_views_count',
					// 'meta_value'	=> true
				);
				// The Query
				$the_query = new WP_Query( $args );
				
				if ($ftr_img):
				?>
			<figure class="banner-category">
				<img src="<?php echo $ftr_img ?>" alt="">
			</figure>
			<?php endif;
				// The Loop
				if ( $the_query->have_posts() ):
			
			?>
				<section class="featured">
					<?php	
						while ( $the_query->have_posts() ) {
							$the_query->the_post();
					?>
						<?php if($cont == 1): ?>
							<?php $posts .= get_the_id(); ?>
							<?php include 'components/featured-category.php' ?>
							<div class="more-featured">
						<?php else: ?>
							<?php $posts .= ','.get_the_id(); ?>
								<?php include 'components/linkarticle-small.php' ?>
						<?php endif; ?>
					<?php $cont++;	} ?>
							</div>
				</section>
			<?php 
				endif;
				/* Restore original Post Data */
				wp_reset_postdata();
				$category = get_queried_object(); 
				$name = $category->slug;
				$color = get_field('color', $category);
			
			if ( $the_query->have_posts() ):
			?>

			<hr style="border-color: <?php echo $color; ?>;">

			<section class="allpost">
				<header class="linkpost">
					<h2><a href="#lastet" class="selected">Latest</a></h2>
					<h2><a href="#popular">Popular</a></h2>
				</header>
				<div class="content-allposts">
					<div class="content-posts">
						<div id="ad-list-categories-desktop">
							<?php echo do_shortcode( '[the_ad id="29731"]' ); ?>
						</div>
						<div id="lastet" class="blockPost view">
							<?php echo do_shortcode('[ajax_load_more loading_style="white" container_type="div" post_type="post" posts_per_page="12" category="'.$name.'" post__not_in='.$posts.' scroll="false" button_label="Load More" button_loading_label="Loading"]'); ?>
						</div>

						
						<div id="popular" class="blockPost">
						<?php
						
							$category = get_category( get_query_var( 'cat' ) );
							$name = $category->cat_ID;
							$posts = '';
							$args = array(
								'post_type' => 'post',
								'cat' => $name,
								'post_status' => 'publish',
								'posts_per_page' => 12,
								'post_not_in' => $post,
								'meta_key'		=> 'post_views_count',
								// 'meta_value'	=> true
							);
							// The Query
							$popular_query = new WP_Query( $args );
							
							// The Loop
							if ( $popular_query->have_posts() ):
								while ( $popular_query->have_posts() ):
								$popular_query->the_post();
						?>

						<?php include 'components/linkarticle-medium2.php' ?>

						<?php 
							endwhile;
							endif;
							wp_reset_postdata();
						?>

						</div>


						<!-- <div id="adArchive-bottom" class="ads type-line"></div> -->
					</div>
					<!-- <div id="adArchive-side" class="ads type-side"></div> -->
				</div>

			</section>
		<?php endif; ?>

			<div id="ad-list-categories-mobile">
				<?php echo do_shortcode( '[the_ad id="29735"]' ); ?>
			</div>
		</div>
			

		</div>
	</div><!-- .content.inner.blog -->
	<style>
		
		.archivepost .linkpost a.selected,
		.archivepost .ads,
		.archivepost .content-allposts .addlistpost{
			background-color: <?php echo $color; ?>;
		}
	
		.addlistpost.adds{display: none !important;}
		.archivepost .linkpost a{
			border-color: <?php echo $color; ?>;
			color: <?php echo $color; ?>;
		}
		.archivepost .linkpost a.selected{
			border-color: <?php echo $color; ?>;
		}
		.archivepost .blockPost .ajax-load-more-wrap .alm-load-more-btn{
			border-color: <?php echo $color; ?>;
			background-color: <?php echo $color; ?>;
		}
		
		@media only screen and (min-width: 1024px) {
			.archivepost .blockPost .ajax-load-more-wrap .alm-load-more-btn{
				border-color: <?php echo $color; ?>;
				background-color: #fff;
				color: <?php echo $color; ?>;
			}
			.archivepost a:hover{
				color: <?php echo $color; ?>;
			}
			.archivepost .bt-category:hover,
			.archivepost .linkpost a:hover,
			.archivepost .blockPost .ajax-load-more-wrap .alm-load-more-btn:hover{
				background-color: <?php echo $color; ?>;
			}
			.archivepost .featured .principal .title a:hover{
				color: <?php echo $color; ?>;
			}
		}
	</style>
<?php get_footer(); ?>