<section class="ikio_breadcumb">
    <div class="ikio_container">
        <div class="ikio_breadcumb_inner">
            <ul>
                <li><a href="<?php echo base_url();?>home" class="active__link hsize15 mp_regular">Home</a></li>
                <li><span></span></li>
                <li><a href="<?php echo base_url();?>industry-news" class="hsize15 mp_regular">Industry News</a></li>
            </ul>
        </div>
        <div class="ikio__breacumbtite mp"> Industry News </div>
        <div class="lines_inner_bread"></div>
    </div>
</section>



<section class="Latest__news">
    <div class="ikio_container">
        <div class="row ikio_blog_grid">
            <div class="col-md-8">
                 <div class="latest_newsSlider">
                       <div class="ikio_newsSlider_wrap">
                                 <div class="owl-carousel owl-theme news_carousel">
                                     <?php if(count($featured)>0){
                                         foreach($featured as $feat){?>                 
                                         <div class="item">
                                            <a href="<?php echo base_url();?>industry-news/<?php echo $feat->newsID?>">
                                         <div class="row no-gutters news_slider">
                                             <div class="col-md-8">
                                                 <div class="news_sliderinner_content">
                                             <h4><?php echo $feat->news_name;?></h4>
                                                 <?php echo $feat->news_short_description; ?>

                                                 <div class="news_sliderBtn">
                                                    <a href="<?php echo base_url();?>industry-news/<?php echo $feat->newsID?>" class="btn_info" id="btn__infoSmall">
                                                        <span class="btn-text">READ MORE</span>
                                                        <span class="arrow-info"><i class="fas fa-arrow-right"></i></span>
                                                      </a>
                                                  </div>    
                                         </div>
                                             </div>
                                              <div class="col-md-4">
                                                     <div class="ikio_latestNews_Images">
                                                       <img src="<?php echo base_url();?>uploads/news/<?php echo $feat->image; ?>">
                                                    </div>
                                              </div>

                                             
                                         </div>
                                         
                                     </div>
                                     </a>
                                     <?php }} ?> 
                                      
                                 </div>
                             </div>
                 </div>
                 
                 <div class="latest_newsListing_wrap">
        <div class="row filter_data" id="ikioNews_grid">
    
           

              <div class="col-md-12">
                <div class="pagination_section">
                    <div class="col__md_3">
                        <div class="show_pages">
                            <span>Page 1 of 15</span>
                        </div> 
                    </div>
                    <div class="col__md_9">
                       <div class="pagination_wrap">
                           <ul>
                               <li><a href="#">1</a></li>
                               <li><a href="#">2</a></li>
                               <li><a href="#">3</a></li>
                               <li><a href="#">4</a></li>
                               <li><a href="#">5</a></li>
                               <li><a href="#">6</a></li>
                               <li><a href="#">7</a></li>
                               <li><a href="#">8</a></li>
                               <li><a href="#">9</a></li>
                               <li><a href="#">10</a></li>
                               <li class="next_page">Next</li>
                           </ul>
                       </div>
                   </div>
                   <div class="col__md_3">
                       <div class="ikio_page_disply">
                           <div class="display_title">
                               <span>Display</span>
                           </div>
                           <div class="display__select_box">
                              <select name="Sort__filters" id="Sort__filters">
                                  <option value="12">12 per page</option>
                                  <option value="24">24 per page</option>
                                  <option value="50">50 per page</option>
                              </select>

                           </div>
                       </div>
                   </div>
                 </div>
              </div>
        </div>
                 </div>
            </div>
             <div class="col-md-4">
                  <div class="latest_newsform">
                      <h5>Learn more about what’s new at IKIO!</h5>
                      <h6>Sign up for our newsletter.</h6>
                      <form action="<?php echo base_url();?>home/addNewsletter" method="POST">
                          <div class="latest_news_inner">
                              <div class="latest_form_filed">
                                   <input type="name" name="fullname" id="fullname" placeholder="Full Name" required>
                              </div>
                               <div class="latest_form_filed">
                                  <input type="email" name="email" id="email_id" placeholder="example@mail.com" required>
                              </div>
                              <div class="form_sumbit">
                                <button type="submit" name="sbt" id="btn__news" class="btn_info">
                                 <span class="btn-text">SUBSCRIBE</span>
                                  <span class="arrow-info"><i class="fas fa-envelope"></i></span>
                               </button>
                              </div>
                          </div> 
                      </form>
                  </div>
                  
                  <div class="linked_wrapBox">
                        <h6>LinkedIn Posts</h6>
                       <div class="linked_postInner">
                         
                      <?php if(count($links)>0){
                        foreach($links as $link){?>
                      <iframe src="<?php echo $link->src_code?>"  width="100" frameborder="0" allowfullscreen="" title="Embedded post"></iframe>
                      <?php }} ?>
                       </div>
                  </div>
             </div>
        </div>
    </div>
</section>







<style>

#pagination_link {
    display:block;
	width: 43%;
	margin: 0 auto;
	width: 397px;
	margin: 0 auto;
}
.custom__gird__row {
	width: 100%;
	padding-top: 40px;
	height: auto;
	overflow: auto;
	margin-bottom: 30px;
}
.card {
    width: 100%;
    float: left;
    border: 1px solid #ddd;
    margin-right: 10px;
    margin-top: 52px;
    margin-bottom: 52px;
}

.image {
    background: #e9ebee;
    height: 257px;
}

.bars {
    height: 85px;


}

.bar {
    background: #e9ebee;
    margin: 0 13px 13px;
    height: 19px;
}

.bar1 {
    width: 80%;
    margin-top: 17px;
}

.bar2 {
    width: 30%;
}

.loading {
    position: relative;
    overflow: hidden;

}

.loading::after {
    content: "";
    display: block;
    background-color: #dddfe2;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    transform: translateX(0);
    animation: 1.5s loading-placeholder ease-in-out infinite;
}

@keyframes loading-placeholder {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

</style>
<style>
      @media (max-width: 767px) {
  .pagination_section {
    display: none;
  }
</style>

<script>
$(document).ready(function(){
 

    filter_data(1);
   

     $('#Sort__filters').on('change', function(){
                filter_data(1);
    });
    

    function filter_data(page)
    {
        $('.filter_data').html('<div class="card"><div class="image loading"></div><div class="bars"><div class="bar bar1 loading"></div><div class="bar bar2 loading"></div></div></div><div class="card"><div class="image loading"></div><div class="bars"><div class="bar bar1 loading"></div><div class="bar bar2 loading"></div></div></div>');
        var action = 'fetch_data';
        var limit = $("#Sort__filters").val();
        
        $.ajax({
            url:"<?php echo base_url(); ?>industry-news/fetch_data/"+page,
            method:"POST",
            dataType:"JSON",
            data:{action:action,limit:limit},
            success:function(data)
            {
              
                $('.filter_data').html(data.product_list);
                $('#pagination_link').html(data.pagination_link);
            }
        })
    }

    function get_filter(class_name)
    {
        var filter = [];
        $('.'+class_name+':checked').each(function(){
            filter.push($(this).val());
        });
        return filter;
    }
function getQueryStringValue(key) {  
  return decodeURIComponent(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + encodeURIComponent(key).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));  
} 
function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    });
    return vars;
}

    $(document).on('click', '.pagination li a', function(event){
        event.preventDefault();
        var page = $(this).data('ci-pagination-page');
        filter_data(page);
    }); 

    $('.common_selector').click(function(){
        filter_data(1);
    });
    
    
});
</script>