<?php

/**
 * Blog Section
 *
 * @package Chic Lifestyle
 */

$display = get_theme_mod('chic_lifestyle_blog_section_display_option', true);

?>

<?php if ($display) :

  $title = get_theme_mod('chic_lifestyle_blog_section_title', '');
  $posts_per_page = get_theme_mod('chic_lifestyle_blog_section_number_of_posts', 4);
  $cat = get_theme_mod('chic_lifestyle_blog_section_category', '');
  $paged = (get_query_var('page')) ? get_query_var('page') : 1;

  $args = array(
    'post_type'           => 'post',
    'cat'                 =>  $cat,
    'posts_per_page'      =>  $posts_per_page,
    'paged'               =>  $paged
  );

  $query = new WP_Query($args);
  $max_pages = $query->max_num_pages;

  if ($query->have_posts()) :
?>
    <section id="chic_lifestyle_blog_sections" class="blog-posts py-48 px-0">
      <div class="container">
        <div class="row">
          <?php if (! empty($title)) { ?>
            <h2><?php echo esc_html($title); ?></h2>
          <?php } ?>
          <div id="owl-blog" class="owl-carousel owl-theme">
            <?php while ($query->have_posts()) : $query->the_post(); ?>
              <div class="d-flex flex-column justify-content-start align-items-start flex-nowrap overflow-hidden">
                <div class="w-p100 h-280 overflow-hidden">
                  <?php if (has_post_thumbnail()) : ?>
                    <?php the_post_thumbnail(array(500, 280), array('class' => 'w-p100 h-p100 object-fit-cover')); ?>
                  <?php else : ?>
                    <div class="w-p100 h-280 bg-info bg-opacity-50"></div>
                  <?php endif; ?>
                </div>
                <div class="d-flex flex-column justify-content-start align-items-start flex-nowrap px-12 py-16">
                  <h3 class="mb-12 fs-4 lh-sm"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                  <div class="mb-12">
                    <span class="text-info">
                      <i class="fa fa-clock-o text-info" aria-hidden="true"></i> <?php echo esc_attr(get_the_date('d M Y')); ?>
                    </span>
                  </div>
                  <div class="mb-16"><?php echo esc_html(chic_lifestyle_custom_excerpt(250)); ?></div>
                  <div class="text-uppercase fs-6"><a class="text-secondary" href="<?php echo esc_url(the_permalink()); ?>"><?php esc_html_e('Read more', 'default'); ?></a></div>
                </div>
              </div>
            <?php endwhile;
            wp_reset_postdata(); ?>
          </div>
        </div>
      </div>
    </section>
    <style>
      /* Navigation buttons */
      .blog-posts .owl-nav .owl-prev,
      .blog-posts .owl-nav .owl-next {
        width: 50px;
        height: 50px;
        border-radius: 5px;
        position: absolute;
        top: 48%;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        /* background: rgba(255, 255, 255, 0.5); */
        color: #000;
        box-shadow: 0 0 50px 0 rgb(0 0 0 / 25%);
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transition: all 0.3s ease-in-out;
      }

      .blog-posts .owl-nav .owl-prev {
        left: 10px;
      }

      .blog-posts .owl-nav .owl-next {
        right: 10px;
      }

      .blog-posts .owl-nav .owl-prev span,
      .blog-posts .owl-nav .owl-next span {
        height: 26px;
        font-size: 26px;
        line-height: 1;
      }

      .blog-posts .owl-nav .owl-prev.disabled,
      .blog-posts .owl-nav .owl-next.disabled {
        display: none;
        pointer-events: none;
      }

      .blog-posts .owl-nav .owl-prev,
      .blog-posts .owl-nav .owl-next {
        background-color: var(--primary-color) !important;
        opacity: 0.5;
      }
      
      .blog-posts .owl-nav .owl-prev:hover,
      .blog-posts .owl-nav .owl-next:hover {
          opacity: 1;
          transition: all 0.3s ease-in-out;
      }
    </style>

<?php endif;
endif; ?>