<?php
/**
 * The template for displaying Category pages
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Fourteen
 * @since Twenty Fourteen 1.0
 */

get_header(); ?>

<?php 

$categories = get_the_category();
$cat_id = $categories[0]->cat_ID;
$banner = get_field('banner', 'category_'.$cat_id);
if($banner) {
	$banner_img = get_field('banner', 'category_'.$cat_id);
} else {
	$banner_img = get_template_directory_uri().'/images/banner-inner.jpg'; 
}
?>
<div class="carousel-container">
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="<?php echo $banner_img; ?>" alt="<?php printf(single_cat_title( '', false ) ); ?>"/>
      <div class="carousel-caption">
        <div class="inner">
          <div class="star"></div><!-- star -->
          <h1><?php printf(single_cat_title( '', false ) ); ?></h1>
          <div class="breadcrumb-container">
            <ol class="breadcrumb">
              <li><a href="<?php echo site_url(); ?>">Home</a></li>
              <li class="active"><?php printf(single_cat_title( '', false ) ); ?></li>
            </ol>
          </div><!-- breadcrumb-containwer -->
        </div><!-- inner -->
      </div>
    </div>
  </div>
</div>
</div>



<section class="inner-wrapper cat">
  <div class="container">
    <div class="row">

	
      <div class="col-md-12">
        <div class="row">
          <div class="col-md-12">
        <div class="common-head">
          <span><?php printf(single_cat_title( '', false ) ); ?></span>
          <img src="<?php echo get_template_directory_uri(); ?>/images/undr.png" alt="">
        </div><!-- common-head -->
      </div><!-- col-12 -->
        </div><!-- row -->
        
		<div class="owl-inner-container">
		 <?php 	
		 $category = get_category( get_query_var( 'cat' ) );
		 $cat_id = $category->cat_ID;	  
		  $args = array('posts_per_page' => '-1',
		  		'cat' => $cat_id,
				'meta_query' => array(
				   array(
					   'key' => 'featured_article',
					   'value' => 'featured',
					   'compare' => 'LIKE',
				   )
   				)
  			);
	  	$the_query = new WP_Query( $args );
			$count = 0;
		   if ( $the_query -> have_posts() ) : 
		   echo '<h2 class="common-head">Featured</h2>';
		   while ( $the_query -> have_posts() ) : $the_query -> the_post(); 
			$count++; 
			$content = get_the_content();
			$trimmed_content = wp_trim_words( $content, 60); ?>
            <div class="col-sm-4">
          <div class="news-image-wrapper">
            <img src="<?php echo wp_get_attachment_url(get_post_thumbnail_id(get_the_ID())); ?>" alt="<?php the_title(); ?>">
            <div class="date"><?php the_time('d'); ?> <span><?php the_time('M'); ?></span> <?php the_time('Y'); ?></div><!-- date -->
          </div><!-- news-image-wrapper -->
				<h3><?php the_title(); ?></h3>
          <p class="alt"><?php echo strip_shortcodes( $trimmed_content ); ?></p>
          <a href="<?php the_permalink(); ?>" class="list-more">read more</a>
            </div><!-- item -->
<?php if ( 0 ==$count%3 ) { echo '<div class="clearfix"></div>'; }   ?>
	<?php endwhile; endif; ?>
	
	<div class="clearfix"></div>
	
	
	<?php 		
		  $args = array('posts_per_page' => '-1',
		  		'cat' => $cat_id,
				'meta_query' => array(
				   array(
					   'key' => 'featured_article',
					   'value' => 'featured',
					   'compare' => 'NOT LIKE',
				   )
   				)
  			);
	  	$the_query = new WP_Query( $args );
			$count = 0;
		   if ( $the_query -> have_posts() ) : 
		   echo '<h2 class="common-head">Latest</h2>';
		   while ( $the_query -> have_posts() ) : $the_query -> the_post(); 
			$count++; 
			$content = get_the_content();
			$trimmed_content = wp_trim_words( $content, 60); ?>
            <div class="col-sm-4">
          <div class="news-image-wrapper">
            <img src="<?php echo wp_get_attachment_url(get_post_thumbnail_id(get_the_ID())); ?>" alt="<?php the_title(); ?>">
            <div class="date"><?php the_time('d'); ?> <span><?php the_time('M'); ?></span> <?php the_time('Y'); ?></div><!-- date -->
          </div><!-- news-image-wrapper -->
          <h3><?php the_title(); ?></h3>



          <p class="alt"><?php echo strip_shortcodes( $trimmed_content ); ?></p>
          <a href="<?php the_permalink(); ?>" class="list-more">read more</a>
            </div><!-- item -->
<?php if ( 0 ==$count%3 ) { echo '<div class="clearfix"></div>'; }   ?>
	<?php endwhile; endif; ?>
	
        </div>
		
		
      </div><!-- col-8 -->

      
    </div><!-- row -->
  </div><!-- container -->
</section>

<?php get_footer('abtdr'); ?>

<?php get_footer(); ?>