<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();?>products" class="hsize15 mp_regular">Products</a></li>
            </ul>
        </div>
        <div class="ikio__breacumbtite mp">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="https://www.ikioledlighting.com/products">Clear All</a></span></h5>
                  
                  <div class="sort_filters">
                     
                      <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_desk">
                                    <span class="bolds">Sort By :</span>
                                    <option value="rand()">Featured</option>
                                    <!-- <option value="product.id desc">What's New</option>
                                    <option value="product.id asc">Oldest First</option> -->
                                    <option value="product.product_name asc">A-Z</option> 
                                    <option value="product.product_name desc">Z-A</option>
 
                                </select> 
                            </ul>
                            </section>
                      </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();?>products">All Products</a></span>
                </div>
                
                <div class="all__prodcuts_title" id="product_titleheight">
                    
                    <div class="chnage_filter">
                      <span>Browse by :</span>
                       
                         <?php
                         if($prod =="products"){
                         ?>
                         <a href="<?php echo base_url();?>products" class="active">Category</a>
                         <a href="https://www.ikioledlighting.com/getapplicationarea/Airports,-Train-&-Bus-Stations">Application Area</a>
                        <?php }  ?>
                    </div>
                </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 class="ikio__product__grid_right">
            <div class="row">
                <div class="col-md-12">
                    <div class="ikio__product_filter_horizontal" id="mobo_none_type">
                        <div class="row">
                            <div class="col-md-9">
                                     <ul class="nav nav-tabs horizontal__filter_styl product_content " id="myTab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="Variant-tab" data-toggle="tab" href="#Variant" role="tab"
                                    aria-controls="Variant" aria-selected="true">Variant</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="Type-tab" data-toggle="tab" href="#Type" role="tab"
                                    aria-controls="Type" aria-selected="false">Type</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="Rating-tab" data-toggle="tab" href="#Rating" role="tab"
                                    aria-controls="Rating" aria-selected="false">Rating</a>
                            </li>
                        </ul>
                            </div>
                            <div class="col-md-3">
                                <div class="ikio_sortBy_filter">
                                
                                <select class="sort_by" name="sort_by" id="select_id_desk">
                                    <span class="bolds">Sort By :</span>
                                    <option value="rand()">Featured</option>
                                        <!-- <option value="product.id desc">What's New</option>
                                        <option value="product.id asc">Oldest First</option> -->
                                    <option value="product.product_name asc">A-Z</option> 
                                    <option value="product.product_name desc">Z-A</option>
 
                                </select>
                                
                                   </div>
                                </div>
                        </div>
                   
                        <div class="tab-content product_content" id="myTabContent">
                            <!-- Variant tab filter -->
                            <div class="tab-pane fade show active" id="Variant" role="tabpanel"
                                aria-labelledby="Variant-tab">
                                <div class="horizontal__filters_values">
                                     <ul>
                                        <?php if(count($variant)>0){
                                        foreach($variant as $var){?>
                                        <li>
                                            <div class="form-group ikio_filter_group">
                                                <input class="variant_checkbox common_selector" type="checkbox" id="<?php echo $var->id;?>" value="<?php echo $var->id;?>">
                                                <label for="<?php echo $var->variant_name;?>"><span class="filter_link"><?php echo $var->variant_name;?>  </span></label>
                                            </div>
                                        </li>
                                        <?php }} ?>
                                    </ul>
                                </div>
                            </div>
                            <!-- Type Filter  -->
                            <div class="tab-pane fade" id="Type" role="tabpanel" aria-labelledby="Type-tab">
                                <div class="horizontal__filters_values">
                                    <ul>
                                        <?php if(count($type)>0){
                                        foreach($type as $typ){?>
                                        <li>
                                            <div class="form-group ikio_filter_group ">
                                                <input class="type_checkbox common_selector" type="checkbox" id="<?php echo $typ->id;?>" value="<?php echo $typ->id;?>">
                                                <label for="<?php echo $typ->type_name;?>"><span class="filter_link"><?php echo $typ->type_name;?></span></label>
                                            </div>
                                        </li>
                                        <?php }} ?>
                                    </ul>
                                </div>
                            </div>
                            <!-- Rating tab -->
                            <div class="tab-pane fade" id="Rating" role="tabpanel" aria-labelledby="Rating-tab">
                                    <div class="horizontal__filters_values">
                                    <ul>
                                        <?php if(count($rating)>0){
                                        foreach($rating as $rat){?>
                                        <li>
                                            <div class="form-group ikio_filter_group ">
                                                <input class="rating_checkbox common_selector" type="checkbox" id="<?php echo $rat->id;?>" value="<?php echo $rat->id;?>">
                                                <label for="<?php echo $rat->rating_name;?>"><span class="filter_link"><?php echo $rat->rating_name;?></span></label>
                                            </div>
                                        </li>
                                        <?php }} ?>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
             <div class="ikio__productmain__listing">
                <div class="ikio_listing_wrap">
                <div class="lines_browses"></div>
                    <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>

#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>



<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();
        
       
        $.ajax({
            url:"<?php echo base_url(); ?>product/launch_data/"+page,
            method:"POST",
            dataType:"JSON",
            data:{action:action,sort_by:sort_by,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>

<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();
        
       
        $.ajax({
            url:"<?php echo base_url(); ?>product/launch_data/"+page,
            method:"POST",
            dataType:"JSON",
            data:{action:action,sort_by:sort_by,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>