<?php
// added top banner
if (!isset($_GET['ategory'])) {
	// echo "show banner";
	?>
    <div class="container">
    <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="slideshow-container" >

<div class="mySlides ">
  <!-- <div class="numbertext">1 / 2</div> -->8
  <img src="../../img/slide/banner01.png" style="width:100%">
  <!-- <div class="text">Caption Text</div> -->
</div>

<!-- <div class="mySlides "> -->
  <!-- <div class="numbertext">2 / 2</div> -->
 <!-- <img src="../../img/slide/banner02.jpg" style="width:100%"> -->
  <!-- <div class="text">Caption Two</div> -->
<!-- </div> -->

<!-- <div class="mySlides "> -->
  <!-- <div class="numbertext">2 / 2</div> -->
 <!-- <img src="../../img/slide/banner02.jpg" style="width:100%"> -->
  <!-- <div class="text">Caption Two</div> -->
<!-- </div> -->


<!-- <div class="mySlides "> -->
  <!-- <div class="numbertext">2 / 2</div> -->
 <!-- <img src="../../img/slide/banner03.jpg" style="width:100%"> -->
  <!-- <div class="text">Caption Two</div> -->
<!-- </div> -->

<!-- <div class="mySlides "> -->
  <!-- <div class="numbertext">2 / 2</div> -->
 <!-- <img src="../../img/slide/banner04.jpg" style="width:100%"> -->
  <!-- <div class="text">Caption Two</div> -->
<!-- </div> -->

<!-- <div class="mySlides "> -->
  <!-- <div class="numbertext">2 / 2</div> -->
 <!-- <img src="../../img/slide/banner05.jpg" style="width:100%"> -->
  <!-- <div class="text">Caption Two</div> -->
<!-- </div> -->

<!-- <div class="mySlides "> -->
  <!-- <div class="numbertext">2 / 2</div> -->
 <!-- <img src="../../img/slide/banner06.jpg" style="width:100%"> -->
  <!-- <div class="text">Caption Two</div> -->
<!-- </div> -->

<!-- <div class="mySlides "> -->
  <!-- <div class="numbertext">2 / 2</div> -->
 <!-- <img src="../../img/slide/banner07.jpg" style="width:100%"> -->
  <!-- <div class="text">Caption Two</div> -->
<!-- </div> -->

<!-- <div class="mySlides "> -->
  <!-- <div class="numbertext">2 / 2</div> -->
 <!-- <img src="../../img/slide/banner08.jpg" style="width:100%"> -->
  <!-- <div class="text">Caption Two</div> -->
<!-- </div> -->

<!-- <div class="mySlides ">
  <div class="numbertext">3 / 3</div>
  <img src="http://www.sayvour.com.hk/indexpage-app/src/img/about/20170608_1_L.jpg" style="width:100%">
  <div class="text">Caption Three</div>
</div> -->

 <!-- Next and previous buttons -->
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>
<br>

<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span>
<!--   <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
  <span class="dot" onclick="currentSlide(4)"></span>
  <span class="dot" onclick="currentSlide(5)"></span>
  <span class="dot" onclick="currentSlide(6)"></span>
  <span class="dot" onclick="currentSlide(7)"></span>
  <span class="dot" onclick="currentSlide(8)"></span> -->

  <!-- <span class="dot" onclick="currentSlide(2)"></span> -->
  <!-- <span class="dot" onclick="currentSlide(3)"></span> -->
</div>


<style>
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  /*max-width: 1000px;*/
  max-width: 100%;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  /*background-color: #717171;*/
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}
</style>
<script type="text/javascript">
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}

</script>
    </div>
</div>
</div>
<?php

} //if (!isset($_GET['ategory'])){

// end added top banner

echo '<!-- left list -->
    <div class="col-lg-3 col-md-3 hidden-sm hidden-xs" >
        <div class="left-list">';
include "includes/e-shop-left-list.php";
echo '</div>
    </div>
    <!-- end left list -->';

echo '<!-- products page support -->
        <div  role="tabpanel" class="tab-pane active col-lg-8 col-md-9 col-sm-12 col-xs-12" id="products">
        <div class="page-bar col-lg-12 col-md-12 col-sm-12 col-xs-12" style="margin-top: 20px;">
            <!-- Breadcrumb -->
			<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding:0px 0px">
            <ol class="breadcrumb" style="display: inline;">
                <li class="text-primary-color dark-primary">
                    <a href="e-shop.php">
                        所有商品
                    </a>
                </li>

                <li class="active">
                    ' . @str_replace('_', ' ', $_GET['ategory']) . @str_replace('_', ' ', $_GET['belong']) . @$_SESSION["search"] . '
                </li>
            </ol>
			</div>
            <!-- end Breadcrumb -->

            <!-- Number of Items Ori -->
			<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding:0px 0px">
            <div class="shop-setting-section" ng-controller="ProductsFetchController">
                <div class="shop-setting-wrapper">
					<form action="includes/sort.php" method="post">
                    <select name="sort" class="shop-setting" onchange="submit()" >
                        <option value="New-Arrival" ';if (@$_SESSION["sort"] == ' ORDER BY created desc') {echo 'selected="selected"';}
echo ' >
                            新品上市
                        </option>

                        <option value="price-HTL" ';if (@$_SESSION["sort"] == ' ORDER BY price DESC') {echo 'selected="selected"';}
echo ' >
                            價格(高至低)
                        </option>

                        <option value="price-LTH" ';if (@$_SESSION["sort"] == ' ORDER BY price') {echo 'selected="selected"';}
echo ' >
                            價格(低至高)
                        </option>
                    </select>
                    </form>

                    <!-- Makes select bar match search bar -->
                    <button class="pull-right" style="height: 27x; opacity: 0;">
                        <i class="fa fa-search"></i>
                    </button>
                    <!-- end Makes select bar match search bar -->
                </div>
            </div>
			</div>
            <!-- end Number of Items Ori -->
        </div>
        </div>
        <!-- end porducts page support -->';
echo '<div  role="tabpanel" class="tab-pane active col-lg-8 col-md-9 col-sm-12 col-xs-12" id="products">
';
if (isset($_SESSION["sort"])) {
	$sort = $_SESSION["sort"];
} else {
	$sort = " ORDER BY created desc";}
unset($_SESSION["sort"]);

if (isset($_GET['ategory'])) {$ategory = " where zh_category ='" . mysqlSecurity($conn, str_replace('_', ' ', $_GET['ategory'])) . "' and status != 'delete' and showcase ='1'  ";} elseif (isset($_GET['belong'])) {$ategory = " where zh_belong ='" . mysqlSecurity($conn, str_replace('_', ' ', $_GET['belong'])) . "' and status != 'delete' and showcase ='1'  ";}
// else{$ategory='';}
else { $ategory = ' where status != "delete" and showcase ="1"  ';}
//changed from products to productstable at 2020-04-06
// $query = "select * from products".$ategory.$sort;
$query = "select * from productstable" . $ategory . $sort;
if (isset($_GET["search"])) {$query = "SELECT * FROM  `productstable` WHERE  `zh_name` LIKE  '%" . $_SESSION["search"] . "%' and status != 'delete' " . $sort;unset($_SESSION["search"]);}
//Skip if mysqli return false
if ($result = mysqli_query($conn, $query)) {
	if (mysqli_num_rows($result) > 0) {
		//Push in product name in the while loop,skip loop if a product with the same name have already created.
		$duplicate = [];
		while ($row = mysqli_fetch_assoc($result)) {

			if ($duplicate[$row["name"]]) {
				continue;
			}

			$duplicate[$row["name"]] = true;
			echo '<!-- main products page -->
            <a href="includes/product_select.php?id=' . $row["id"] . '">
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 product-li-img">
                    <div class="hovereffect">' .
			// <img class="img-responsive" src="../timthumb/timthumb.php?src=' . $row["image"] . '&h=500&w=500&zc=1" style="width:100%">
			'<img class="img-responsive" src="' . $row["image"] . '" alt="' . $row["zh_name"] . '" style="width:100%">'
				. '<div class="overlay">
                            <h2>
                            ' . $row["zh_name"] . '
                            </h2>
                            <p>
                            DETAIL
                            </p>
                        </div>
                    </div>

                    <div class="product-li-text">
                        <div style="height:5rem;LINE-HEIGHT:1.7rem;overflow:hidden">
                        ' . $row["zh_name"] . '</div>

                        <div style="height:16px;color: #9D9D9D; text-decoration: line-through; margin:5px 0px;">';

			$pushText = "transform:translate(0,-50%);";
			if (!$row["original price"] == null) {
				echo '原價  HK$' . $row["original price"];
				$pushText = "";
			}
			echo '</div>

                        <div style="color: #0E9BAD;height:35px;' . $pushText . '">';
			if (!$row["original price"] == null) {echo '推廣價&nbsp;HK$' . $row["price"];} else {echo '&nbsp;價格 HK$' . $row["price"];}
			echo '</div>
                    </div>
                </div>
            </a>';
		}
	}
}
;

echo '</div>
    <!-- end main products page -->';
?>