<?php
  $args_video = array(
    'post_type' => 'video',
    'post_status' => 'publish',
    'order' => 'DESC',
    'posts_per_page' => 3
  );
  $my_video  = new WP_Query ( $args_video );
  $wp_query = new WP_Query(array('posts_per_page'=>4));
  $num = '1';
?>
<!-- What New -->
<div id="content-wrap">
  <div class="floating-pattern">
    <div class="container" style="margin-top: 90px;">
      <div class="row">
        <div class="col-sm-7">
          <div style="max-width:600px;margin: auto;">
            <div class="title">What's new</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container container--masonary">
        <div class="row">
          <div class="col-lg-12 col-12">
            <div class="masonary off-screen off-screen--hide off-screen--children-fade">
              <?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
              <?php if($num == 1) { ?>
                <a href="<?php the_permalink(); ?>">
                  <div class="masonary__item masonary__item--large" >
                  <div style="background-image: url(<?php the_post_thumbnail_url(); ?>)" class="box box--bg rocket-lazyload">
                    <div class="box__bottom box__bottom--lower">
                      <div class="box__meta">
                        <?php $categories = get_the_category($post->ID); 
                              foreach($categories as $category) 
                              {echo $category->cat_name . ' ';} 
                        ?> / <span class="date"><?php echo get_the_date( 'j M Y' ); ?></span>
                      </div>
                      <div class="box__title"><?php the_title(); ?></div>
                    </div>
                  </div>
                  </div>
                </a>
                <?php } ?>
                <?php if($num == 2) { ?>
                  <div class="masonary__item">
                  <a href="<?php the_permalink(); ?>">
                    <div class="box box--black">
                      <div class="box__meta">
                        <?php $categories = get_the_category($post->ID); 
                              foreach($categories as $category) 
                              {echo $category->cat_name . ' ';} 
                        ?> / <span class="date"><?php echo get_the_date( 'j M Y' ); ?></span>
                      </div>
                      <div class="box__title"><?php the_title(); ?></div>
                      <div class="box__bottom box__bottom--lower"><div class="button button--teal" title="See details">See details</div></div>
                    </div>
                  </a>
                  </div>
                <? } ?>
                <?php if($num == 3) { ?>
                <div class="masonary__item masonary__item--medium">
                  <a href="<?php the_permalink(); ?>">
                    <div class="box box--green">
                      <div class="box__meta">
                        <?php $categories = get_the_category($post->ID); 
                              foreach($categories as $category) 
                              {echo $category->cat_name . ' ';} 
                        ?> / <span class="date"><?php echo get_the_date( 'j M Y' ); ?></span>
                      </div>
                      <div class="box__title"><?php the_title(); ?></div>
                      <div class="box__bottom box__bottom--lower"><div class="button button--purple" title="See details">See details</div></div>
                    </div>
                  </a>
                </div>
                <? } ?>
                <?php if($num == 4) { ?>
                <div class="masonary__item masonary__item--medium">
                  <a href="<?php the_permalink(); ?>">
                    <div style="background-image: url(<?php the_post_thumbnail_url(); ?>)" class="box box--bg rocket-lazyload">
                      <div class="box__bottom box__bottom--lower">
                        <div class="box__meta">
                        <?php $categories = get_the_category($post->ID); 
                              foreach($categories as $category) 
                              {echo $category->cat_name . ' ';} 
                        ?> / <span class="date"><?php echo get_the_date( 'j M Y' ); ?></span>
                        </div>
                        <div class="box__title"><?php the_title(); ?></div>
                      </div>
                    </div>
                  </a>
                </div>
                <?php } ?>
                <?php $num ++; ?>
              <?php  endwhile; 
              wp_reset_postdata();?>
              <?php while ($my_video->have_posts()) : $my_video->the_post(); ?>
              <div class="masonary__videos masonary__item--small video-btn" data-bs-toggle="modal" data-src="https://www.youtube.com/embed/<?php echo the_field('youtube_url') ?>" data-bs-target="#myModal">
                <div style="background-image: url('<?php echo the_field('thumbnail') ?>')" class="box box--bg rocket-lazyload">
                    <div class="box__meta">
                      Jaas TV
                    </div>
                    <div class="box__bottom box__bottom--lower">
                      <div class="vbox__bottom vbox__bottom--lower text-right">
                        <div class="circle circle--play"></div>
                      </div>
                    </div>
                </div>
              </div>
              <?php  endwhile; 
              wp_reset_postdata();?>
          </div>

        </div>
      </div>
</div>
<!-- End What New -->
