<?php
   include('include/header.php');
   
    $Category_id=$_GET['code'];
   $sql_cat_s = "SELECT * FROM `tbl_category` where `cat_id`=$Category_id";
   $run_cat_s = mysqli_query($link,$sql_cat_s);
   $result_cat_s = mysqli_fetch_assoc($run_cat_s);
   ?>
<!-- --------------------Breadcrumb------------ -->
<div class="breadcrumb-container">
   <nav data-depth="2" class="breadcrumb container">
      <ul class="bredclr">
         <li>
            <a href="index.php">
            <span>Home</span>
            </a>
         </li>
         <li>           
            <span>  <?=$result_cat_s['cate_name']?>  </span>
         </li>
      </ul>
   </nav>
</div>
<!-- -----------Category page------------- -->
<section id="wrapper" style="padding:80px 0 !important; background-image: url('./assets/images/about-bg.png'); background-size:cover !important; background-repeat:no-repeat; ">
   <div class="container">
      <div class="row">
         <!-- ------------------Left-column------------------ -->    
         <div id="_desktop_left_column" class="col-xs-12 col-sm-12 col-md-12 col-lg-3">
            <div id="left-column">
               <div class="category-block-container">
                  <h3 class="hidden-md-down">
                     <p class="block-title text-uppercase h6" style="background-color:#ef3e22    !important; color:#fff !important; " >Categories</p>
                  </h3>
                  <div id="subcategories-container" class="block-categories collapse data-toggler">
                     <ul class="category-top-menu" style="background-color:#ffcfc780    !important;">
                        <li>
                           <ul class="category-sub-menu" >
                              <?php
                                 $sn=11;
                                 $sql_cat = "SELECT * FROM `tbl_category`";
                                 $run_cat = mysqli_query($link,$sql_cat);
                                     while($result_cat = mysqli_fetch_assoc($run_cat))
                                     {
                                     ?>
                              <li data-depth="0">
                                 <a class="<?php if($result_cat['cat_id']==$_GET['code']) { echo "activeprdctlist"; } ?> " href="product.php?code=<?=$result_cat['cat_id']?>">
                                      <?=$result_cat['cate_name']?> 
                                 </a>
                                 <div class="navbar-toggler collapse-icons" data-toggle="collapse" data-target="#exCollapsingNavbar<?=$sn?>"  <?php if($result_cat['cat_id']==$_GET['code']) { echo 'aria-expanded="true"' ; } ?>>
                                    <i class="fa fa-plus add pls" aria-hidden="true"></i>
                                    <i class="fa fa-minus remove pls" aria-hidden="true"></i>
                                 </div>
                                 <div class="collapse <?php if($result_cat['cat_id']==$_GET['code']) { echo"show"; } ?>" id="exCollapsingNavbar<?=$sn?>">
                                    <ul class="category-sub-menu">
                                       <?php
                                          $cattt =$result_cat['cat_id'];
                                          $sql_pro = "SELECT * FROM `tbl_product` where `pro_category`='$cattt'";
                                          $run_pro = mysqli_query($link,$sql_pro);
                                          while($result_pro = mysqli_fetch_assoc($run_pro))
                                              {
                                              ?>
                                       <li data-depth="1">
                                          <a class="category-sub-link" href="product-detail.php?pro_code=<?=$result_pro['pro_id']?>">
                                          <?=$result_pro['pro_name']?> 
                                          </a>
                                       </li>
                                       <?php
                                          }
                                          ?>
                                    </ul>
                                 </div>
                              </li>
                              <?php
                                 $sn++;
                                 }
                                 ?>
                           </ul>
                        </li>
                     </ul>
                  </div>
               </div>
            </div>
         </div>
<?php
$sql_banner ="SELECT * FROM `tbl_banner` WHERE `banner_type`='5' limit 1";
$data_banner = mysqli_query($link,$sql_banner);
$result_banner = mysqli_fetch_assoc($data_banner)
?>
         <div id="content-wrapper" class="col-xs-12 col-sm-12 col-md-12 col-lg-9">
            <section id="main">
               <input id="ishiCartURL" name="ishicarturl" value="#" type="hidden">
               <input id="ishiStaticToken" name="ishistatictoken" value="3d2187fdc78a54510e1e1670c3ff42b0" type="hidden">
               <!-- <div class="block-category card card-block">
                  <div class="category-cover">
                     <img src="header-image/<?=$result_banner['banner_image_name']; ?>" alt="<?=$result_cat_s['cate_name']?>">
                  </div>
               </div> -->
               <section id="products" class="category-product-info">
                  <div id="js-product-list">
                     <div class="products row contents">
                        <?php
                           $cattt =$_GET['code'];
                           $sql_pro = "SELECT * FROM `tbl_product` where `pro_category`='$cattt'";
                           $run_pro = mysqli_query($link,$sql_pro);
                           $count_sub = mysqli_num_rows($run_pro);
                           if($count_sub>0)
                                 {
                                   while($result_pro = mysqli_fetch_assoc($run_pro))
                                   {
                                       ?>
                        <div class="col-lg-4">
                           <div class="product-thumb ">
                              <div class="item">
                                 <div class="image">
                                    <a href="product-detail.php?pro_code=<?=$result_pro['pro_id']?>" class="thumbnail product-thumbnail">
                                    <img src="product-image/<?=$result_pro['pro_image'];?>" alt="<?=$result_pro['pro_name']?>">
                                    </a>
                                 </div>
                                 <div class="caption caption2">
                                    <div class="btn-cart">
                                       <a data-button-action="add-to-cart" class="button" href="product-detail.php?pro_code=<?=$result_pro['pro_id']?>">
                                       <i class="fa fa-shopping-cart"></i> 
                                       <span class="lblcart lblcart2"> <?=$result_pro['pro_name']?> </span>
                                       </a>
                                    </div>
                                    <p class="price">
                                       <span class="price-discount" style="font-size:13px !important; color:#fff !important;">
                                       <?=$result_cat_s['cate_name']?>
                                       </span> 
                                    </p>
                                    <div class="button-group">
                                       <div class="btn-quickview"> 
                                          <a class="quickbox enqui" href="enquiry.php?code=<?=$result_pro['pro_name']?>">
                                          <i class="fa fa-envelope-o" aria-hidden="true"></i>
                                          </a>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <?php 
                           }
                           }
                           else
                           {
                           ?>      
                        <p style="text-align: center; margin: 0 auto; ">
                           <img src="comming.png" style="height: 300px;">
                        </p>
                        <?php
                           }
                           ?>
                     </div>
                    
                  </div>
               </section>
            </section>
         </div>
      </div>
   </div>
</section>
<div class="container">
   <div id="_mobile_left_column"></div>
   <div id="_mobile_right_column"></div>
   <div class="clearfix"></div>
</div>
<?php
   include('include/footer.php');
?>

<style type="text/css">
    #page-navi {
      width: 211px;
  margin:0px auto;
  padding: 0px;
  margin-top: 60px;
  overflow: hidden;
}

#page-navi li {
  list-style: none;
  display: inline;
}

#page-navi li a {
  float: left;
  display: block;
  height: 45px;
  width: 45px;
  text-align: center;
  line-height: 45px;
  /*padding: 8px 10px;*/
  margin-right: 10px;
  border: 1px solid #ccc;
  text-decoration: none;
  background: #fff;
  -webkit-transition: background 200ms linear;
  transition: background 200ms linear;
  border-radius: 100%;
  color:#000;
  font-weight: bold;
}

#page-navi li:last-child a {
  margin-right: 0px;
}
#page-navi li a.current
{
     background: #2e3093;
     color:#fff !important;
}
#page-navi li a.disable
{
   background: #ffff;
}
#page-navi li a:hover {
  background: #2e3093;
    color: #fff;
    height: 45px;
    width: 45px;
    font-weight: bold;
    text-align: center;
    border-radius: 100%;
    line-height: 45px;
}

</style>
<script>
$(document).ready(function()
 {
   $("#tab").pagination({
   items: 9,
   contents: 'contents',
   previous: '<i class="fa fa-chevron-left" aria-hidden="true"></i>',
   next: '<i class="fa fa-chevron-right" aria-hidden="true"></i>',
   position: 'bottom',
   });
});



! function (e) {
    e.fn.pagination = function (a) {
        function t(t) {
            var s = e("." + r.contents + ".current").children().length,
                l = Math.ceil(s / r.items),
                o = '<ul id="page-navi">\t<li><a href="#" class="previos">' + r.previous + "</a></li>";
            for (i = 0; i < l; i++) o += '\t<li><a href="#">' + (i + 1) + "</a></li>";
            o += '\t<li><a href="#" class="next">' + r.next + "</a></li></ul>";
            var c = t;
            0 == t ? (c = parseInt(e("#page-navi li a.current").html())) - 1 != 0 && c-- : t == l + 1 && (c = parseInt(e("#page-navi li a.current").html())) + 1 != l + 1 && c++, t = c, 0 == s && (o = ""), e("#page-navi").remove(), "top" == r.position ? e("." + r.contents + ".current").before(o) : e("." + r.contents + ".current").after(o), e("#page-navi li a").removeClass("current"), e("#page-navi li a").eq(t).addClass("current"), e("#page-navi li a").removeClass("disable"), c = parseInt(e("#page-navi li a.current").html()), c - 1 == 0 && e("#page-navi li a.previos").addClass("disable"), c == l && e("#page-navi li a.next").addClass("disable");
            var u = a.items * (t - 1),
                d = a.items * t;
            t == l && (d = s), e("." + r.contents + ".current").children().hide(), e("." + r.contents + ".current").children().slice(u, d).fadeIn(a.time), 1 == r.scroll && e("html,body").animate({
                scrollTop: n
            }, 0)
        }
        var r = {
                items: 9,
                contents: "contents",
                previous: '<i class="fa fa-chevron-left" aria-hidden="true"></i>',
                next: '<i class="fa fa-chevron-right" aria-hidden="true"></i>',
                time: 800,
                start: 1,
                position: "bottom",
                scroll: !0
            },
            r = e.extend(r, a);
        e(this).addClass("jquery-tab-pager-tabbar"), $tab = e(this).find("li");
        var n = 0;
        ! function () {
            var a = r.start - 1;
            $tab.eq(a).addClass("current"), e("." + r.contents).hide().eq(a).show().addClass("current"), t(1)
        }(), $tab.click(function () {
            var a = $tab.index(this);
            $tab.removeClass("current"), e(this).addClass("current"), e("." + r.contents).removeClass("current").hide().eq(a).addClass("current").fadeIn(r.time), t(1)
        }), e(document).on("click", "#page-navi li a", function () {
            return !e(this).hasClass("disable") && (t(e("#page-navi li a").index(this)), !1)
        }), e(window).on("load scroll", function () {
            n = e(window).scrollTop()
        })
    }
}(jQuery);
</script>


<script type="text/javascript">
   $(document).ready(function(){
     var currentLayout = $.totalStorage('productLayout');
     if(currentLayout && currentLayout == 'listView') {
         $('#grid-view').removeClass('checked');
         setProductLayout('listView');
     } else {
         setProductLayout('gridView');
     }
   
     $(document).on('click', '#list-view', function(e){
         if($(this).hasClass('checked'))
             return;
         $('#js-product-list').fadeOut(500,function() {
         setProductLayout('listView');
         }); 
         $('#js-product-list').fadeIn(500);
     });
   
     $(document).on('click', '#grid-view', function(e){
         if($(this).hasClass('checked'))
             return;
         $('#js-product-list').fadeOut(500,function() {
         setProductLayout('gridView');
         });
         $('#js-product-list').fadeIn(500);
     });
     function setProductLayout(layout) {
       if(layout == 'listView') {
           $('#list-view').addClass('checked');
           $('#grid-view').removeClass('checked');
           $('#js-product-list .products').removeClass('grid');    
           $('#js-product-list .products').addClass('list');
           $('#js-product-list .products article').each(function() {
               $(this).removeClass(' col-sm-6 col-md-4 col-lg-6 col-xl-4');
               $(this).find('.image').addClass('col-xs-12 col-sm-6 col-md-4 col-lg-4');
               $(this).find('.caption').addClass('col-xs-12 col-sm-6 col-md-8 col-lg-8');
           });
           $.totalStorage('productLayout','listView');
       } else {
           $('#grid-view').addClass('checked');
           $('#list-view').removeClass('checked');
           $('#js-product-list .products').removeClass('list');
           $('#js-product-list .products').addClass('grid');
           $('#js-product-list .products article').each(function() {
               $(this).addClass(' col-sm-6 col-md-4 col-lg-6 col-xl-4');
               $(this).find('.image').removeClass('col-xs-12 col-sm-6 col-md-4 col-lg-4');
               $(this).find('.caption').removeClass('col-xs-12 col-sm-6 col-md-8 col-lg-8');
           });
           $.totalStorage('productLayout','gridView');
       }
     }
   });
</script>