<?php

/**
 * Display category for the theme.
 * 
 * @copyright  ZiniMedia 2016
 * @version    Release: 0.1
 * @package    happyworld
 * @author     ZiniMedia-BM
 */
?>
<?php get_header(); ?>
<?php
$term_slug  = get_queried_object()->slug;
$term_name  = get_queried_object()->name;
$term_id    = get_queried_object()->term_id;
$allowed = array(1,2,3,4);
$categories = get_categories(array(
  'hide_empty' => false,
  'include' => $allowed,
));
$args = array(
  'posts_per_page'   => POSTS_PER_PAGE,
  'orderby'          => 'date',
  'order'            => 'DESC',
  'post_type'        => 'post',
  'post_status'      => 'publish',
  'offset'           => 0,
  'posts_per_page'   => 1,
  'suppress_filters' => true,
  'tax_query' => array(
    array(
      'taxonomy' => 'category',
      'field' => 'slug',
      'terms' => $term_slug,
    )
  )
);
$args1 = array(
  'posts_per_page'   => POSTS_PER_PAGE,
  'orderby'          => 'date',
  'order'            => 'DESC',
  'post_type'        => 'post',
  'post_status'      => 'publish',
  'offset'           => 1,
  'posts_per_page'   => 2,
  'suppress_filters' => true,
  'tax_query' => array(
    array(
      'taxonomy' => 'category',
      'field' => 'slug',
      'terms' => $term_slug,
    )
  )
);
$args2 = array(
  'posts_per_page'   => POSTS_PER_PAGE,
  'orderby'          => 'date',
  'order'            => 'DESC',
  'post_type'        => 'post',
  'post_status'      => 'publish',
  'offset'           => 3,
  'suppress_filters' => true,
  'tax_query' => array(
    array(
      'taxonomy' => 'category',
      'field' => 'slug',
      'terms' => $term_slug,
    )
  )
);
$loop = new WP_Query($args, ARRAY_A);
$loop1 = new WP_Query($args1, ARRAY_A);
$loop2 = new WP_Query($args2, ARRAY_A);
?>
<main class="main-content">
  <!-- section-header-page -->
  <section class="section-header-page" style="background-image: url('<?php bloginfo('template_directory'); ?>/assets/images/bg-news.jpg);">
    <div class="container">
      <h1 class="title-page h2-sm"><?php echo $term_name ?></h1>
      <ul class="navbar-cate">
        <?php
        foreach ($categories as $category) { ?>
          <?php $link = get_category_link($category->term_id) ?>
          <li class="<?= $category->term_id == $term_id ? 'active' : '' ?>"><a href="<?php echo $link ?>"><?php echo $category->name ?></a></li>
        <?php } ?>
      </ul>
    </div>
  </section>
  <div class="primary-content">
    <!-- section-news-page -->
    <div class="section-news-page">
      <div class="container">
        <div class="side-box d-md-none">
          <h3 class="side-box-title h3"><?php _e('Chuyên mục', 'happyworld'); ?></h3>
          <ul class="menu-category">
            <?php
            foreach ($categories as $category) { ?>
              <?php $link = get_category_link($category->term_id) ?>
              <li class="<?php $category->term_id == $term_id ? 'active' : '' ?>"><a href="<?php echo $link ?>"><?php echo $category->name ?></a></li>
            <?php } ?>
          </ul>
        </div><!-- /.side-box -->
        <div class="news-special">
          <div class="row">
            <div class="col-lg-8">
              <?php if ($loop->have_posts()) while ($loop->have_posts()) : $loop->the_post(); ?>
              <div class="news-overlay-text">
              <?php
                if (has_post_thumbnail(get_the_ID(), "776x544")) { ?>
                  <a href="<?php echo get_permalink(); ?>" alt>
                    <?php the_post_thumbnail("776x544"); ?>
                  </a>
                <?php } else { ?>
                  <a href="<?php echo get_permalink(); ?>" alt>
                    <img src="<?php bloginfo('template_directory'); ?> /assets/images/upload/post_not_thumb.jpg" alt="">
                  </a>
                <?php } ?>
                <div class="text-overlay">
                  <h3><a href="<?php echo get_the_permalink()?>"><?php the_title(); ?></a></h3>
                  <div class="meta"><i class="fa fa-clock-o"></i> <?php echo get_the_date(); ?></div>
                </div>
              </div><!-- /.news-overlay-text -->
              <?php endwhile; ?>
            </div><!-- /.col-lg-8 -->

            <div class="col-lg-4">
              <div class="row">
              <?php if ($loop1->have_posts()) while ($loop1->have_posts()) : $loop1->the_post(); ?>
                <div class="col-sm-6 col-lg-12">
                  <div class="news-overlay-text type-sm">
                  <?php
                if (has_post_thumbnail(get_the_ID(), "375x260")) { ?>
                  <a href="<?php echo get_permalink(); ?>" alt>
                    <?php the_post_thumbnail("375x260"); ?>
                  </a>
                <?php } else { ?>
                  <a href="<?php echo get_permalink(); ?>" alt>
                    <img src="<?php bloginfo('template_directory'); ?> /assets/images/upload/post_not_thumb.jpg" alt="">
                  </a>
                <?php } ?>
                    <div class="text-overlay">
                      <h3><a href="<?php echo get_the_permalink()?>"><?php the_title(); ?></a></h3>
                      <div class="meta"><i class="fa fa-clock-o"></i> <?php echo get_the_date(); ?></div>
                    </div>
                  </div><!-- /.news-overlay-text -->
                </div>
              <?php endwhile; ?>
              </div>
            </div><!-- /.col-lg-4 -->
          </div>
        </div><!-- /.news-special -->

        <div class="row list-news">
          <?php if ($loop2->have_posts()) while ($loop2->have_posts()) : $loop2->the_post(); ?>
          <div class="col-sm-6 col-lg-4">
            <div class="news-item">
              <div class="news-item-img">
                <?php
                if (has_post_thumbnail(get_the_ID(), "375x260")) { ?>
                  <a href="<?php echo get_permalink(); ?>" alt>
                    <?php the_post_thumbnail("375x260"); ?>
                  </a>
                <?php } else { ?>
                  <a href="<?php echo get_permalink(); ?>" alt>
                    <img src="<?php bloginfo('template_directory'); ?> /assets/images/upload/post_not_thumb.jpg" alt>
                  </a>
                <?php } ?>
              </div>
              <div class="news-item-text">
                <h3 class="title-news dotdotdot ddd-truncated" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="<?php the_title(); ?>" style="overflow-wrap: break-word;">
                  <a href="<?php echo get_the_permalink()?>"><?php the_title(); ?></a>
                </h3>
                <div class="meta">
                  <i class="fa fa-clock-o"></i> <?php echo get_the_date(); ?>
                </div>
              </div>
            </div>
            <!-- /.news-item -->
          </div>
          <?php endwhile; ?>
        </div>

        <nav aria-label="Page navigation example">
          <ul class="pagination justify-content-center">
            <li class="page-item disabled">
              <a class="page-link" href="#" aria-label="Previous">
                <i class="fa fa-angle-left"></i>
              </a>
            </li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item active"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item">
              <a class="page-link" href="#" aria-label="Next">
                <i class="fa fa-angle-right"></i>
              </a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
    <!-- e: section-news-page -->
  </div>
</main>
<?php get_footer(); ?>