<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();?>application-areas" class="hsize15 mp_regular">Browse By Applications</a></li>
            </ul>
        </div>
        <div class="ikio__breacumbtite mp">Browse By Applications</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="<?php echo base_url();?>application-areas">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" >
                                    <span class="bolds">Sort By :</span>
                                    <option value="desc">What's New</option>
                                    <option value="asc">Oldest First</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"> Applications
      </button>
      <div class="sortMenuOption">
        <div class="product__widget_categogy_lefts" id="mobile_widget">
            <div class="nav_tops">
                 <h5>Applications <img src="<?php echo base_url();?>assets/img/cancel.png" alt="" class="cancel"></h5>
            </div>
             <div class="all__prodcuts_title" id="product_titleheight">
                    
                    <div class="chnage_filter">
                   
                        
                    </div>
                </div>
                
          <!--Listing sart of applictaion images& Categories-->
                         <div class="ikio_applicationlisting">
                             <ul>
                                 <?php if(count($application)>0){?>
                                 <?php foreach($application as $app){?>
                                 <li>
                                   <a href="<?php echo base_url();?>getapplicationarea/<?php echo $app->slug;?>" >
                                    <div class="parents_wrap">
                                         <!--images sec-->
                                     <div class="application_images">
                                         <img src="<?php echo base_url();?>uploads/application/<?php echo $app->application_image;?>">
                                     </div>
                                     <!--content section-->
                                     <div class="ikio_newApplication--content">
                                         <h6><?php echo $app->application_name;?></h6>
                                     </div>
                                    </div>
                                    </a>
                                     
                                 </li>
                                 <?php } ?>
                                 <?php } ?>
                             </ul>
                         </div>
                         <!--End-->
        </div>
      </div>
    </div>
  </div>
  </div>

<!--End Mobile Filter-->




<section class="ikio_newBrowse">
   <div class="ikio_newBrowsewrapper">
            <div class="ikio_new_grid">
                <div class="ikio_newBrowseleft">
                     <div class="ikio_newApplication--inner">
                         <div class="ikio_textApplication">
                             <h4>APPLICATIONS</h4>
                         </div>
                         
                    <div class="all__prodcuts_title" id="product_titleheight">
                        <div class="chnage_filter">
                           <span>Browse by :</span>
                       
                            <?php
                         
                            if($prod =="application-areas"){
                            ?>
                            <a href="<?php echo base_url();?>products" >Category</a>
                            <a href="<?php echo base_url();?>application-areas" class="active">Application Area</a>
                          <?php }  ?>
                        </div>
                    </div>
                        
                        
                        
                         <!--Listing sart of applictaion images& Categories-->
                         <div class="ikio_applicationlisting">
                             <ul>
                                 <?php if(count($application)>0){?>
                                 <?php foreach($application as $app){?>
                                 <li>
                                  <a href="<?php echo base_url();?>getapplicationarea/<?php echo $app->slug;?>">
                                    <div class="parents_wrap">
                                         <!--images sec-->
                                     <div class="application_images">
                                         <img src="<?php echo base_url();?>uploads/application/<?php echo $app->application_image;?>">
                                     </div>
                                     <!--content section-->
                                     <div class="ikio_newApplication--content">
                                         <h6><?php echo $app->application_name;?></h6>
                                     </div>
                                    </div>
                                    </a> 
                                 </li>
                                 <?php } ?>
                                 <?php } ?>
                             </ul>
                         </div>
                         <!--End-->
                     </div>
                </div>
                 <div class="ikio_newBrowseright">
                    
                    <div class="row">
                        <div class="col-md-9">
                            
                        </div>
                        <div class="col-md-3">
                             <div class="ikio_NewSort--wrap" id="not_mobo">
                        <div class="ikio_sortBy_filter" id="application_sort">
                                <select class="sort_by" name="sort_by" id="select_id_desk">
                                    Sort By :
                                     
                                    <option value="desc">What's New</option>
                                    <option value="asc">Oldest First</option>  
                                </select>
                        </div>
                     </div>
                     
                        </div>
                    </div>
                      
                      <div class="lines_browses"></div>
                        
                        <!--Main application Product Listing-->
                             <div class="row  filter_data">
                           
                             </div>
                    <!--End Of Listing-->
                    <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>
</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(); ?>application-areas/fetch_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').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").val();
        
        $.ajax({
            url:"<?php echo base_url(); ?>application-areas/fetch_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>