
<!-- Header Wrap Starts -->
<?php include "common/header.php"; ?> 
<!-- Header Wrap Ends -->

<?php include "common/navbar.php"; ?> 

<style>
  .swiper-slide img {
    height: 400px;
    width: 100%;
  }

  @media only screen and (max-width: 600px) {
    .swiper-slide img{
      height: 200px;
      width: 100%;
    }
  </style>

  <!-- Main Container Starts -->
  <div class="main-container">
    <div class="main-slider swiper-viewport">
      <div id="slideshow0" class="swiper-container">
        <div class="swiper-wrapper">       
          <?php
          $sql  = mysqli_query($conn,"SELECT * FROM main_banner ORDER BY id LIMIT 1");
          while($row = mysqli_fetch_array($sql)){
           ?>
           <div class="swiper-slide text-center">
            <img src="backend/upload/banner/<?php echo $row['img_name']; ?>" alt="<?php echo $row['main_title']; ?>" class="img-responsive" style="display: inline-block;"/>
          </div>
        <?php } ?>
      </div>
    </div>
  </div>
  <!-- <div class="swiper-pagination slideshow0"></div>
  <div class="swiper-pager">
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div> -->

<!-- <script type="text/javascript">
  $('#slideshow0').swiper({
   mode: 'horizontal',
   effect: 'fade',
   slidesPerView: 1,
   pagination: '.slideshow0',
   paginationClickable: true,
   nextButton: '.swiper-button-next',
   prevButton: '.swiper-button-prev',
  //spaceBetween: 30,
  autoplay: 3500,
  autoplayDisableOnInteraction: true,
  loop: true
});
</script> -->


<div id="common-home" class="container" style="background-image: url(image/bg.jpg); ">
  <div class="row">
    <div id="content" class="col-sm-12">
      <div id="banner0" class="banner-grid-wrap text-center">
              <div class="row">
                <div class="col-sm-4 col-xs-12">
                  <div class="banner-grid">
                    <a href="#"><img src="image/cache/catalog/bookmarklk.jpg" alt="Banner 1" class="img-responsive img-center-xs" /></a>        </div>
                  </div>
                  <div class="col-sm-4 col-xs-12">
                    <div class="banner-grid">
                      <img src="image/cache/catalog/bookmarklk-.jpg" alt="Banner 2" class="img-responsive img-center-xs" />        </div>
                    </div>
                    <div class="col-sm-4 col-xs-12">
                      <div class="banner-grid">
                        <img src="image/cache/catalog/bookmarklk.jpg" alt="Banner 3" class="img-responsive img-center-xs" />        </div>
                      </div>
                    </div>
                  </div>
    <div class="module-product-wrap product-carousel">
      <!-- Module Heading Starts -->
      <h3 class="module-product-heading">Latest</h3>
      <!-- Module Heading Ends -->
      <div id="products_carousel_0" class="row">

        <?php
        $sql_itm_1  = mysqli_query($conn,"SELECT * FROM items WHERE new_pro = 1 ORDER BY id LIMIT 5");
        while($row_itm_1 = mysqli_fetch_array($sql_itm_1)){
         ?>


         <div class="product-layout">
          <!-- Product Module Starts -->
          <div class="product-thumb module-product animation">
            <!-- Product Image Starts -->
            <div class="module-product-image">
              <a href="product-details?id=<?php echo $row_itm_1['detail']; ?>">
                <img src="backend/upload/item/<?php echo $row_itm_1['item_code']; ?>/<?php echo $row_itm_1['f_img']; ?>" alt="<?php echo $row_itm_1['item_name']; ?>" title="<?php echo $row_itm_1['item_name']; ?>" class="img-responsive img-center" />
              </a>
            </div>
            <!-- Product Image Ends -->
            <!-- Product Caption Starts -->
            <div class="module-product-caption">
              <!-- Product Name Starts -->
              <h6 class="module-product-title"><a href="product-details?id=<?php echo $row_itm_1['detail']; ?>"><?php echo $row_itm_1['item_name']; ?></a></h6>
              <!-- Product Name Ends -->
              <!-- Product Price Starts -->
              <div class="module-product-price">
                LKR <?php echo $row_itm_1['price']; ?>
                <span class="price-old">LKR<?php echo $row_itm_1['ori_price']; ?></span>
              </div>
              <!-- Product Price Ends -->
            </div>
            <!-- Product Caption Ends -->
            <!-- Product Buttons Starts -->
            <div class="module-product-btns-wrap button-group">
              <?php if ($row_itm_1['qty']==0) { ?>
                <button type="button" id="button-cart" data-loading-text="Loading..." class="btn btn_cart" value="<?php echo $row_itm_1['id']; ?>" disabled>
                  <i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">Add to Cart</span></button>
                <?php }else{ ?> 
                  <button type="button" id="button-cart" data-loading-text="Loading..." class="btn btn_cart" value="<?php echo $row_itm_1['id']; ?>">
                    <i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">Add to Cart</span></button>
                  <?php } ?>
                      <!-- <button type="button" class="btn rounded-0 animation" data-toggle="tooltip" title="Add to Wish List" onclick="wishlist.add('49');"><i class="fa fa-heart"></i></button>
                        <button type="button" class="btn rounded-0 animation" data-toggle="tooltip" title="Compare this Product" onclick="compare.add('49');"><i class="fa fa-exchange"></i></button> -->
                      </div>
                      <!-- Product Buttons Ends -->
                    </div>
                    <!-- Product Module Ends -->
                  </div>



                <?php } ?>


              </div>
            </div>			
            <script><!--
              $('#products_carousel_0').owlCarousel({
                items: 4,  
                itemsDesktop: [1199,4],
                itemsDesktopSmall: [979, 3],
                itemsTablet: [768, 2],
                itemsTabletSmall: [768, 2],
                itemsMobile: [479,2],
                autoPlay: 3000,
                navigation: true,
                navigationText : ["<span class='glyphicon glyphicon-chevron-left'></span>","<span class='glyphicon glyphicon-chevron-right'></span>"], 
                pagination: true,
                stopOnHover: true
              });
            --></script>
         <!--  <script>
            $('#products_featured_carousel_0').owlCarousel({
              items: 4,  
              itemsDesktop: [1199,4],
              itemsDesktopSmall: [979, 3],
              itemsTablet: [768, 2],
              itemsTabletSmall: [768, 1],
              itemsMobile: [479,1],
              autoPlay: 3000,
              navigation: true,
              navigationText : ["<span class='glyphicon glyphicon-chevron-left'></span>","<span class='glyphicon glyphicon-chevron-right'></span>"], 
              pagination: true,
              stopOnHover: true
            });
          </script> -->

          <div class="module-product-wrap product-carousel">
            <!-- Module Heading Starts -->
            <h3 class="module-product-heading">Featured</h3>
            <!-- Module Heading Ends -->
            <div id="products_featured_carousel_0" class="row">
              <?php
              $sql_itm_2  = mysqli_query($conn,"SELECT * FROM items WHERE featue_pro = 1 ORDER BY id LIMIT 5");
              while($row_itm_2 = mysqli_fetch_array($sql_itm_2)){
               ?>
               <div class="product-layout">
                <!-- Product Module Starts -->
                <div class="product-thumb module-product animation">
                  <!-- Product Image Starts -->
                  <div class="module-product-image">
                    <a href="product-details?id=<?php echo $row_itm_2['detail']; ?>">
                      <img src="backend/upload/item/<?php echo $row_itm_2['item_code']; ?>/<?php echo $row_itm_2['f_img']; ?>" alt="<?php echo $row_itm_2['item_name']; ?>" title="<?php echo $row_itm_2['item_name']; ?>" class="img-responsive img-center" />
                    </a>
                  </div>
                  <!-- Product Image Ends -->
                  <!-- Product Caption Starts -->
                  <div class="module-product-caption">
                    <!-- Product Name Starts -->
                    <h6 class="module-product-title"><a href="product-details?id=<?php echo $row_itm_2['detail']; ?>"><?php echo $row_itm_2['item_name']; ?></a></h6>
                    <!-- Product Name Ends -->
                    <!-- Product Price Starts -->
                    <div class="module-product-price">
                      LKR <?php echo $row_itm_2['price']; ?>
                      <span class="price-old">LKR<?php echo $row_itm_2['ori_price']; ?></span>
                    </div>
                    <!-- Product Price Ends -->
                  </div>
                  <!-- Product Caption Ends -->
                  <!-- Product Buttons Starts -->
                  <div class="module-product-btns-wrap button-group">
                    <button type="button" id="button-cart" data-loading-text="Loading..." class="btn btn_cart" value="<?php echo $row_itm_2['id']; ?>">
                      <i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">Add to Cart</span></button>
                      <!-- <button type="button" class="btn rounded-0 animation" data-toggle="tooltip" title="Add to Wish List" onclick="wishlist.add('49');"><i class="fa fa-heart"></i></button>
                        <button type="button" class="btn rounded-0 animation" data-toggle="tooltip" title="Compare this Product" onclick="compare.add('49');"><i class="fa fa-exchange"></i></button> -->
                      </div>
                      <!-- Product Buttons Ends -->
                    </div>
                    <!-- Product Module Ends -->
                  </div>
                <?php } ?>
              </div>
            </div>			
            <script><!--
              $('#products_featured_carousel_0').owlCarousel({
                items: 4,  
                itemsDesktop: [1199,4],
                itemsDesktopSmall: [979, 3],
                itemsTablet: [768, 2],
                itemsTabletSmall: [768, 2],
                itemsMobile: [479,2],
                autoPlay: 3000,
                navigation: true,
                navigationText : ["<span class='glyphicon glyphicon-chevron-left'></span>","<span class='glyphicon glyphicon-chevron-right'></span>"], 
                pagination: true,
                stopOnHover: true
              });
            --></script>

            <!-- Product Module Wrap Starts -->
            <div class="module-product-wrap">
              <!-- Nested Row Starts -->
              <div class="row">
               <!-- Tab Links Starts -->
               <div class="col-sm-12 clearfix">
                 <!-- Module Heading Starts -->
                 <h3 class="module-product-heading pull-left-lg pull-left-md">Top Categories</h3>
                 <!-- Module Heading Ends -->
                 <!-- <ul class="nav nav-tabs pull-right-lg pull-right-md">
                  <li class="active"><a href="#tab-1" data-toggle="tab">Desktops</a></li>
                  <li><a href="#tab-2" data-toggle="tab">Components</a></li>
                  <li><a href="#tab-3" data-toggle="tab">Cameras</a></li>
                </ul> -->
              </div>
              <!-- Tab Links Ends -->	
              <!-- Tab Content Starts -->
              <div class="tab-content">
               <div class="tab-pane fade active in" id="tab-1">

                <?php
                $sql_itm_3  = mysqli_query($conn,"SELECT * FROM items WHERE home_page = 1 ORDER BY id LIMIT 8");
                while($row_itm_3 = mysqli_fetch_array($sql_itm_3)){
                 ?>
                 <!-- Product Col Starts -->
                 <div class="product-layout col-lg-3 col-md-4 col-sm-6 col-xs-6">
                   <!-- Product Module Starts -->
                   <div class="product-thumb module-product animation">
                    <!-- Product Image Starts -->
                    <div class="module-product-image">
                      <a href="product-details?id=<?php echo $row_itm_3['detail']; ?>">
                       <img src="backend/upload/item/<?php echo $row_itm_3['item_code']; ?>/<?php echo $row_itm_3['f_img']; ?>" alt="<?php echo $row_itm_3['item_name']; ?>" title="<?php echo $row_itm_3['item_name']; ?>" class="img-responsive img-center" />

                     </a>
                   </div>
                   <!-- Product Image Ends -->
                   <!-- Product Caption Starts -->
                   <div class="module-product-caption">
                     <!-- Product Name Starts -->
                     <h6 class="module-product-title"><a href="product-details?id=<?php echo $row_itm_3['detail']; ?>"><?php echo $row_itm_3['item_name']; ?></a></h6>
                     <!-- Product Name Ends -->                     <!-- Product Price Starts -->
                     <div class="module-product-price">
                       <span class="price-new">LKR <?php echo $row_itm_3['price']; ?></span>
                       <!-- <span class="price-old">$122.00</span> -->
                     </div>
                     <!-- Product Price Ends -->
                   </div>
                   <!-- Product Caption Ends -->
                   <!-- Product Buttons Starts -->
                   <div class="module-product-btns-wrap button-group">
                    <button type="button" id="button-cart" data-loading-text="Loading..." class="btn btn_cart" value="<?php echo $row_itm_3['id']; ?>">
                      <i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">Add to Cart</span></button>
                    <!-- <button type="button" class="btn rounded-0 animation" data-toggle="tooltip" title="Add to Wish List" onclick="wishlist.add('42');"><i class="fa fa-heart"></i></button>
                      <button type="button" class="btn rounded-0 animation" data-toggle="tooltip" title="Compare this Product" onclick="compare.add('42');"><i class="fa fa-exchange"></i></button> -->
                    </div>
                    <!-- Product Buttons Ends -->
                  </div>
                  <!-- Product Module Ends -->
                </div>
                <!-- Product Col Ends -->
              <?php } ?>


            </div>

          </div>
          <!-- Tab Content Ends -->
        </div>
        <!-- Nested Row Ends -->
      </div>
      <!-- Product Module Wrap Ends -->

    </div>
  </div>
</div>
</div>
<!-- </div> -->
<!-- Main Container Ends -->
<!-- Footer Starts -->
<?php include "common/footer.php"; ?> 

<!-- Footer Ends -->


</body>
</html>