<section class="ikio_breadcumb">
    <div class="ikio_container">
        <div class="ikio_breadcumb_inner">
            <ul>
                <li><a href="#" class="active__link hsize15 mp_regular">Home</a></li>
                <li><span></span></li>
                <li><a href="#" class="hsize15 mp_regular">Products</a></li>
            </ul>
        </div>
        <div class="ikio__breacumbtite mp">  <?php echo $subcatname;?> Products</div>
        <div class="lines_inner_bread"></div>
    </div>
</section>



<!--Mobile Filter-->

<div class="filter_box">
    <div class="filter__box_wrapper">
        <div class="fliter_menu_wrapper">
            <div class="filter_drop"></div>
            <button class="filterMenuWrapper__text" id="filter_open">
                <img src="https://axenic-uv.com/assets/img/fillter-copy.png" alt="" class="sort__images"> Filter
            </button>
            <div class="fllier__mob_wrap">
                <div class="filer__inner_box" id="filter_widget">
                    <h5>Filters <span id="cancel"><a href="http://www.ikio.adityanamansingh.com/4/product">Clear All</a></span></h5>
                  
                  <div class="sort_filters">
                      <div class="mobileFilterTab--left" id="subcategory_tabs">
                             
                        
                          
                        
                      </div>
                      <div class="mobileFilterTab--right" id="subcategory_rightTabs">
                          
                            <section class="cus_tabs">
                            <h4 class="active" id="new_sorttitle">Sort</h4>
                              
                             <ul class="sort_new_tabs">
                                 <select class="sort_by" name="sort_by" id="select_id">
                                    <span class="bolds">Sort By :</span>
                                    <option value="desc">What's New</option>
                                    <option value="asc">Oldest First</option>  
                                </select> 
                              </ul>
                            </section>
                            
                            
                        <div class="col-md-12 variant " id="variants_filter">
                    
                        </div>
                             
                            
                      </div>
                  </div>
                  
                 <div class="filterActionBtn"><button class="filterActionBtn--close closedid" id="close_btns">Close</button><button class="filterActionBtn--apply closedid" id="close_btns_apply">Apply</button></div>
                </div>
            </div>
        </div>
    </div>
    
    <!--mobile category filter-->
  <div class="filter__box_wrapper">
    <div class="fliter_menu_wrapper">
      <div class="filterBackDrop"></div>
      <button class="filterMenuWrapper__text " id="category_filter_open">
        <img src="<?php echo base_url();?>assets/img/menu.png" alt="" class="cateogry__images"> Category
      </button>
      <div class="sortMenuOption">
        <div class="product__widget_categogy_lefts" id="mobile_widget">
            <div class="nav_tops">
                 <h5>CATEGORY <img src="<?php echo base_url();?>assets/img/cancel.png" alt="" class="cancel"></h5>
            </div>
          <div class="ikio__vertivalFilter_base">

            <?php if(count($categorys)>0){
           foreach($categorys as $cate){?>

            <div class="ikio__verticalilter_wrap">
              <div class="ikio_category__link ">
                <div class="ikio__category_images">
                  <img src="<?php echo base_url();?>uploads/category/<?php echo $cate->category_icon;?>" alt="">
                </div>

              </div>
              <div class="ikio_category_grid ">
                <div class=""></div>

                <div class="ikio__category_name_link">
                  <h4 class="mp"><a class="testClick"
                      href="<?php echo base_url();?>getcategory/<?php echo $cate->slug;?>"><?php echo $cate->category_name;?></a>
                  </h4>
                </div>

                <div class="ikio__catergory_links">
                  <?php $sub_cat=get_subcategory($cate->id);
                 if(count($sub_cat)>0){ ?>
                  <ul>
                     <?php 
                     foreach($sub_cat as $sub_cats){ 
                    ?>
                    <li><a class="testClick"
                        href="<?php echo base_url();?>getsubcategory/<?php echo $sub_cats->slug;?>"><?php echo $sub_cats->name;?></a>
                    </li>
                    <?php } ?>
                  </ul>
                  <?php } ?>
                </div>
              </div>
            </div>

            <?php }} ?>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!--End Mobile Filter-->



<section class="ikio_product--wrap">
    <div class="ikio_product_grid">
        <!-- ikio left vertical fil -->
        <div class="ikio__product_grid_left">
            <div class="ikio__prodcutVertical_wrap">
                <div class="all__prodcuts_title">
                     <span><a href="<?php echo base_url();?>product">All Products</a></span>
                </div>
                
                 <div class="ikio__vertivalFilter_base">
                    
                    <?php if(count($categorys)>0){
                    foreach($categorys as $cate){?>
                        
                    <div class="ikio__verticalilter_wrap">
                        <div class="ikio_category__link ">
                            <div class="ikio__category_images">
                                <img src="<?php echo base_url();?>uploads/category/<?php echo $cate->category_icon;?>" alt="">
                            </div>
                           
                        </div>
                        <div class="ikio_category_grid ">
                            <div class=""></div>
                            
                             <div class="ikio__category_name_link">
                              <h4 class="mp"><a class="testClick" href="<?php echo base_url();?>getcategory/<?php echo $cate->slug;?>"><?php echo $cate->category_name;?></a></h4>
                            </div>

                            <div class="ikio__catergory_links">
                                 <?php $sub_cat=get_subcategory($cate->id);
                    if(count($sub_cat)>0){ ?>
                                <ul>
                        <?php 
                         foreach($sub_cat as $sub_cats){ 
                       
                         if($subslug ==$sub_cats->slug){
                        ?>
                                    <li><a class="testClick_activelink"  href="<?php echo base_url();?>getsubcategory/<?php echo $sub_cats->slug;?>"><?php echo $sub_cats->name;?></a></li>
                             <?php }else{?>
                             <li><a class="testClick"  href="<?php echo base_url();?>getsubcategory/<?php echo $sub_cats->slug;?>"><?php echo $sub_cats->name;?></a></li>
                             <?php } } ?>
                            </ul>
                                   <?php } ?>
                            </div>
                        </div>
                    </div>

                   <?php }} ?>
                </div>
            </div>
        </div>

        <div class="ikio__product__grid_right">
            <div class="row">
                <div class="col-md-12 variant not_mobo" id="variants_filter">
                    
                </div>
                <div id="sub_sort">
                       <div class="ikio_sortBy_filter"  id="not_mobo">
                                <select class="sort_by" name="sort_by" id="select_id_desk">
                                    <span class="bolds">Sort By :</span>
                                    <option value="desc">What's New</option>
                                    <option value="asc">Oldest First</option>  
                                </select>
                                
                        </div>
                </div>
            </div>

            <!-- Product main_listing -->
             <div class="ikio__productmain__listing"  >
                <div class="ikio_listing_wrap">
                    <div class="row filter_data">
                       
                    </div>
                </div>
                 <div class="paginationWrap">
                     <div class="row">
                         <div class="col-md-3"></div>
                          <div class="col-md-6">
                               <div id="pagination_link"></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_desk">
                                  <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>
            <!-- Product main_listing -->
           
        </div>
    </div>
</section>



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

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

    filter_data(1);
   
    $('#select_id').on('change', 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 sort_by = $("#select_id").val(); 
        var limit = $("#Sort__filters").val();
        var subid='<?php echo $this->uri->segment(2);?>';
        var application_checkbox = get_filter('application_checkbox');
        var variant_checkbox = get_filter('variant_checkbox');
        var type_checkbox = get_filter('type_checkbox');
        var feature_checkbox = get_filter('feature_checkbox');
        var rating_checkbox = get_filter('rating_checkbox');
       
       
        $.ajax({
            url:"<?php echo base_url(); ?>product/fetch_datasub/"+page,
            method:"POST",
            dataType:"JSON",
            data:{action:action,subid:subid,variant_checkbox:variant_checkbox,type_checkbox:type_checkbox,feature_checkbox:feature_checkbox,application_checkbox:application_checkbox,rating_checkbox:rating_checkbox,sort_by:sort_by,limit:limit},
            success:function(data)
            {
              
              $('.variant').html(data.filter);
                $('.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>
<script>
$(document).ready(function(){
 

    filter_data(1);
   
    $('#select_id_desk').on('change', function(){
                filter_data(1);
    });
    
     $('#Sort__filters_desk').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 sort_by = $("#select_id_desk").val(); 
        var limit = $("#Sort__filters_desk").val();
        var subid='<?php echo $this->uri->segment(2);?>';
        var application_checkbox = get_filter('application_checkbox');
        var variant_checkbox = get_filter('variant_checkbox');
        var type_checkbox = get_filter('type_checkbox');
        var feature_checkbox = get_filter('feature_checkbox');
        var rating_checkbox = get_filter('rating_checkbox');
       
       
        $.ajax({
            url:"<?php echo base_url(); ?>product/fetch_datasub/"+page,
            method:"POST",
            dataType:"JSON",
            data:{action:action,subid:subid,variant_checkbox:variant_checkbox,type_checkbox:type_checkbox,feature_checkbox:feature_checkbox,application_checkbox:application_checkbox,rating_checkbox:rating_checkbox,sort_by:sort_by,limit:limit},
            success:function(data)
            {
              
              $('.variant').html(data.filter);
                $('.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>