<?php
 /* Template Name: Distributors Template Page */
  ?>
 
<?php get_header(); ?>

  <!-- MAIN -->
  <style type="text/css">
          .headingDiv{
            padding: 50px 0px;
          }
      </style>
<main class="main-blog start-block">

   <div class="container references_container">
   <?php// echo do_shortcode(get_post_field('post_content', $yourpostid)); ?>
   <div class="headingDiv">
    <span><?php echo get_the_title(); ?></span>
  </div>
    <div class="row">
      

        <div id="references_main_div">
            
            <?php
          $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
        $args = array( 'post_type' => 'distributors', 'posts_per_page' =>9,'order' => 'ASC','paged' => $paged,);
                $the_query = new WP_Query( $args ); 

                $num = 1;
                if($the_query->have_posts()): 
                  while($the_query->have_posts()):
                   echo "<div class='ref-inner'>";
                   $the_query->the_post();
                   $images = get_field('distributors_gallery');
                  if( $images ): ?>
                      <div class="references_crousal owl-carousel owl-theme">
                        <?php foreach( $images as $image ): ?>
                          <div class="item">
                            <img src="<?php echo esc_url($image['url']); ?>" />
                          </div>
                        <?php endforeach; ?>
                      </div>
                      <div class="references_title">
                        <p><?php the_title(); ?></p>
                      </div>
                      <div class="references_city_text">
                        <p><?php the_field('place'); ?> | <?php the_field('city'); ?></p>
                      </div>
                      <?php endif;

                      echo '</div>';

                ?>
            <?php $num++; endwhile;

            echo '<div class="custom_pagination">';
             $total_pages = $the_query->max_num_pages;
             if ($total_pages > 1){
             $current_page = max(1, get_query_var('paged'));
             echo paginate_links(array(
            'base' => get_pagenum_link(1) . '%_%',
            'format' => '/page/%#%',
            'current' => $current_page,
            'total' => $total_pages,
            'prev_text'    => __('« prev'),
            'next_text'    => __('next »'),
              ));
              }

             echo '</div>';



          endif; ?>
          
           
        </div>
        </div>
    </div>    
    <!-- .site-main -->
 </main>
<!-- .content-area -->
<script type="text/javascript">
jQuery(document).ready(function($){
  $('.references_crousal').owlCarousel({
      loop:true,
      margin:10,
      nav:true,
      items:1,
      dots: false
      
  });

  jQuery( ".references_crousal .owl-prev").html('<i class="fa fa-angle-left"></i>');
  jQuery( ".references_crousal .owl-next").html('<i class="fa fa-angle-right"></i>');
});
</script>
<?php get_footer(); ?>