<?php

//A class to create html table.
include_once "../includes/classes/Table.php";

//Create the html select section where user select color
function colorSelect($i) {
	$colorSelect = <<<EOD
	<select name="{$i}color" data-num="{$i}" disabled >
		<option value="Dark">D</option>
		<option value="White">W</option>
		<option value="Pink">P</option>
	</select>
EOD;

	return $colorSelect;
}

//Create the html select section where user select shape or letter.
function letterSelect($i) {
	$letterSelect = <<<EOD
	<select name="{$i}tel" data-num="{$i}" >
		<optgroup label="情人節限量版" >
			<option value="❤️️">❤️️</option>
			<option value="🌹">🌹</option>
		</optgroup>
		<optgroup label="字母及圖案">
			<option value="A">A</option>
			<option value="B">B</option>
			<option value="C">C</option>
			<option value="D">D</option>
			<option value="E">E</option>
			<option value="F">F</option>
			<option value="G">G</option>
			<option value="H">H</option>
			<option value="I">I</option>
			<option value="J">J</option>
			<option value="K">K</option>
			<option value="L">L</option>
			<option value="M">M</option>
			<option value="N">N</option>
			<option value="O">O</option>
			<option value="P">P</option>
			<option value="Q">Q</option>
			<option value="R">R</option>
			<option value="S">S</option>
			<option value="T">T</option>
			<option value="U">U</option>
			<option value="V">V</option>
			<option value="W">W</option>
			<option value="X">X</option>
			<option value="Y">Y</option>
			<option value="Z">Z</option>
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
			<option value="8">8</option>
			<option value="9">9</option>
			<option value="0">0</option>
			<option value="☺">☺</option>
			<option value="♥">♥</option>
			<option value="&">&</option>
			<option value="?">?</option>
			<option value="!">!</option>
		</optgroup>
	</select>
EOD;

	return $letterSelect;
}

//Create table with the included table class,
//first param is the total length of elements,second param provide a break of row.I name it wordbreak because it was meant for chocolates with word.
function createTable($len, $wordBreak = 5) {
	$len;

	$table = new Table('');

	$htmlString = '';

	$th = '';
	$colorTd = '';
	$wordTd = '';
	$table->setAttr('td', ['class="selectBox"']);
	$table->setAttr('th', ['class="thHead selectBox"']);
	for ($i = 1; $i <= $len; $i++) {
		$th .= $table->th($i);
		$colorTd .= $table->td(colorSelect($i));
		$wordTd .= $table->td(letterSelect($i));
		if ($i % $wordBreak === 0) {
			$selectRow = $table->tr($th) . $table->tr($colorTd) . $table->tr($wordTd);
			$htmlString .= $table->tr($selectRow);
			$selectRow = '';
			$th = '';
			$colorTd = '';
			$wordTd = '';
		}
	}
	$htmlString .= $selectRow;

	return $htmlString;
}

echo '
                <!-- main page -->
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 animate-show">

                	<!-- 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 -->';

$p_id = $_SESSION["p_id"];
//Reset the page to 0,
//or else php will always include this page on the next refresh
$_SESSION['page'] = 0;

// $query = "select * from products where id='$p_id'";
$query = "select * from productstable where id='$p_id' and status !='delete'";

$result = mysqli_query($conn, $query);
$row = mysqli_fetch_assoc($result);

$image = $row["image"];
$image_number = $row["image_number"];
$s_image = str_replace('.jpg', '', $row["image"]);

echo '<style>
			.selectBox { border: 2px #CBCBCB solid; }
			th.thHead { background-color:#E4FFFC; }
			.selectBox select[disabled] {	opacity:0.5;	}
			.selectBox select { width:53px; }
		</style>';

if ($p_id == 1) {

	echo '        <div  role="tabpanel" class="tab-pane active col-lg-8 col-md-9 col-sm-12 col-xs-12" id="products">
                        <div class="page-info-container col-lg-12 col-md-12 col-sm-12 col-xs-12" style="margin-top: 20px;">
                            <!-- page-info-img -->
                            <div class="page-info-img col-lg-6 col-md-6 col-sm-12 col-xs-12">

                            		<div class="page-info-img-main col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <a href="#" data-toggle="modal" data-target="#img-popup">
                                	<img src="' . $row["image"] . '" width="100%" alt="' . $row["zh_name"] . '" >
                                    </a>
                                    </div>';

	$x = 1;
	while ($x <= $row["image_number"]) {
		echo '<div class="page-info-img-auxiliary col-lg-3 col-md-3 col-sm-3 col-xs-6">
									<a href="#" data-toggle="modal" data-target="#img-popup">
                                    <img src="' . $row["image_" . $x] . '" width="100%"  alt="' . $row["zh_name"] . '" >
                                    </a>
                                    </div>';
		$x++;}

	echo '</div>
                            <!-- end page-info-img -->

                            <!-- page-info-text -->
                            <div class="page-info-text col-lg-6 col-md-6 col-sm-12 col-xs-12">
                            	<div class="title" >
                            	' . $row["zh_name"] . '
                            	</div>';
	if (isset($row["zh_outline"])) {echo '
								<div class="reserve" style="margin-top:5px;font-size:18px ;">
                                   ' . $row["zh_outline"] . '
								</div>      ';}
	echo '   <div class="o-price" >';
	if (!$row["original price"] == 0) {echo 'HK$' . $row["original price"];}
	echo '</div>
                                <div class="p-price" >
                            	HK$' . $row["price"] . '
                            	</div>
                                <div class="buy-control">

				<form id="myform" method="POST" action="includes/add_letter.php?letter=8">
					<input value="' . $row["zh_name"] . '" name="name" class="hidden"/>

						<div class="form-box" >
	                    <table style="font-family:arial; width:100%;border: 2px #CBCBCB solid;text-align-last:center" >

						<tr  class="center" style="background-color:#E4FFFC;border: 2px #CBCBCB solid;">
						<td colSpan=8  style="text-align-last:left">可選顏色及口味:<br>
黑 (D): 慕絲脆脆黑朱古力<br>

白 (W): 夏威夷果仁白朱古力<br>

粉紅 (P) : 士多啤梨脆片白朱古力<br>

<br>

限量版:<br>

玫瑰: 士多啤梨脆片白朱古力<br>

心形: 泡沫咖啡脆片牛奶朱古力<br>

						</td>
						</tr>

						<tr  class="center" style="background-color:#E4FFFC;border: 2px #CBCBCB solid;">
						<td colSpan=8  style="text-align-last:left">1可選字母及圖案:<br>

A – Z , 0 – 9 , ☺ , ♥<br>

<br>

限量版:<br>

🌹,❤️️️️️️<br>
	</tr>';

	echo createTable(8, 8);

	echo '					</table>
						</div>



<div class="variation_title" style="font-size:20px;margin-top:20px;" ng-show="checkoutReady">
	<p style="font-size:20px;width:25%; float:left;">數量: </p>
    <input style="width:8%; height:30px" type="button" value="-" class="qtyminus" field="quantity" />
    <input style="width:54%; height:30px;text-align:center;"type="text" name="quantity" value="1" class="qty" onkeypress="return event.charCode >= 48 && event.charCode <= 57"  />
    <input style="width:8%; height:30px"type="button" value="+" class="qtyplus" field="quantity" />
	</div>
    <input type="submit" name="submit" class="btn-addtocart btn-primary" value="加入購物車" />
</form>
<div class="sharethis-inline-share-buttons" style="margin-top:30px;"></div>




                                </div >

								  <!-- Go to www.addthis.com/dashboard to customize your tools -->
</div>
</div>
                            <!-- end page-info-text -->
							<!-- page detailed info -->
				<div>
				&nbsp;
				</div>
				<div class="p-detailed-info col-lg-12 col-md-12 col-sm-12 col-xs-12" style="font-size:20px;">
				<h1 style="text-align:center;">產品簡介</h1>
				';
	echo $row["zh_description"];
	echo '
				</div>
							<!-- end page detailed info -->';} elseif ($p_id == 2) {
	// $query = "select * from products where id='$p_id'";
	$query = "select * from productstable where id='$p_id' and status !='delete'";
	$result = mysqli_query($conn, $query);
	$row = mysqli_fetch_assoc($result);
	echo '        <div  role="tabpanel" class="tab-pane active col-lg-8 col-md-9 col-sm-12 col-xs-12" id="products">
                        <div class="page-info-container col-lg-12 col-md-12 col-sm-12 col-xs-12" style="margin-top: 20px;">
                            <!-- page-info-img -->
                            <div class="page-info-img col-lg-6 col-md-6 col-sm-12 col-xs-12">

                            		<div class="page-info-img-main col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <a href="#" data-toggle="modal" data-target="#img-popup">
                                	<img src="' . $row["image"] . '" width="100%" alt="' . $row["zh_name"] . '" >
                                    </a>
                                     </div>';

	$x = 1;
	$s_image = str_replace('.jpg', '', $row["image"]);
	while ($x <= $row["image_number"]) {
		echo '<div class="page-info-img-auxiliary col-lg-3 col-md-3 col-sm-3 col-xs-6">
                                    <a href="#" data-toggle="modal" data-target="#img-popup">
                                    <img src="' . $row["image_" . $x] . '" width="100%" alt="' . $row["zh_name"] . '" >
                                    </a>
                                    </div>';
		$x++;}

	echo '</div>
                            <!-- end page-info-img -->

                            <!-- page-info-text -->
                            <div class="page-info-text col-lg-6 col-md-6 col-sm-12 col-xs-12">
                            	<div class="title" >
                            	' . $row["zh_name"] . '
                            	</div>';
	if (isset($row["zh_outline"])) {echo '
								<div class="reserve" style="margin-top:5px;font-size:18px ;">
                                   ' . $row["zh_outline"] . '
								</div>      ';}
	echo '   <div class="o-price" >';
	if (!$row["original price"] == NULL) {echo 'HK$' . $row["original price"];}
	echo '</div>
                                <div class="p-price">HK$' . $row["price"] . '
								</div>
                                <div class="buy-control">

<form id="myform" method="POST" action="includes/add_letter.php?letter=15">

						<div>
	                    <table style="font-family:arial; width:100%;border: 2px #CBCBCB solid;text-align-last:center" >

						<tr  class="center" style="background-color:#E4FFFC;border: 2px #CBCBCB solid;">
						<td colSpan=8  style="text-align-last:left">可選顏色及口味:<br>
黑 (D): 慕絲脆脆黑朱古力<br>

白 (W): 夏威夷果仁白朱古力<br>

粉紅 (P) : 士多啤梨脆片白朱古力<br>

<br>

限量版:<br>

玫瑰: 士多啤梨脆片白朱古力<br>

心形: 泡沫咖啡脆片牛奶朱古力<br>

						</td>
						</tr>

						<tr  class="center" style="background-color:#E4FFFC;border: 2px #CBCBCB solid;">
						<td colSpan=8  style="text-align-last:left">2可選字母及圖案:<br>

A – Z , 0 – 9 , ☺ , ♥<br>

<br>

限量版:<br>

🌹,❤️️️️️️<br>
	</tr>';

	echo createTable(15, 5);

	echo '					</table>
						</div>


	<input value="' . $row["zh_name"] . '" name="name" class="hidden"/>

<div class="variation_title" style="font-size:20px;margin-top:20px;" ng-show="checkoutReady">
	<p style="font-size:20px;width:25%; float:left;">數量: </p>
    <input style="width:8%; height:30px" type="button" value="-" class="qtyminus" field="quantity" />
    <input style="width:54%; height:30px;text-align:center;"type="text" name="quantity" value="1" class="qty" onkeypress="return event.charCode >= 48 && event.charCode <= 57"  />
    <input style="width:8%; height:30px"type="button" value="+" class="qtyplus" field="quantity" />
	</div>
    <input type="submit" name="submit" class="btn-addtocart btn-primary" value="加入購物車" />
</form>

<div class="sharethis-inline-share-buttons" style="margin-top:30px;"></div>



                                </div >

														<!-- Go to www.addthis.com/dashboard to customize your tools -->
							                                               </div></div>

                            <!-- end page-info-text -->
							<!-- page detailed info -->
				<div>
				&nbsp;
				</div>
				<div class="p-detailed-info col-lg-12 col-md-12 col-sm-12 col-xs-12" style="font-size:20px;">
								<h1 style="text-align:center;">產品簡介</h1>

				';
	echo $row["zh_description"];
	echo '
				</div>
							<!-- end page detailed info -->';} elseif ($p_id == 3) {
	// $query = "select * from products where id='$p_id'";
	$query = "select * from productstable where id='$p_id' and status !='delete'";
	$result = mysqli_query($conn, $query);
	$row = mysqli_fetch_assoc($result);
	echo '        <div  role="tabpanel" class="tab-pane active col-lg-8 col-md-9 col-sm-12 col-xs-12" id="products">
                        <div class="page-info-container col-lg-12 col-md-12 col-sm-12 col-xs-12" style="margin-top: 20px;">
                            <!-- page-info-img -->
                            <div class="page-info-img col-lg-6 col-md-6 col-sm-12 col-xs-12">

                            		<div class="page-info-img-main col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <a href="#" data-toggle="modal" data-target="#img-popup">
                                	<img src="' . $row["image"] . '" width="100%" alt="' . $row["zh_name"] . '" >
                                    </a>
                                    </div>';

	$x = 1;
	$s_image = str_replace('.jpg', '', $row["image"]);
	while ($x <= $row["image_number"]) {
		echo '<div class="page-info-img-auxiliary col-lg-3 col-md-3 col-sm-3 col-xs-6">
                                    <a href="#" data-toggle="modal" data-target="#img-popup">
                                    <img src="' . $row["image_" . $x] . '" width="100%" alt="' . $row["zh_name"] . '" >
                                    </a>
                                    </div>';
		$x++;}

	echo '</div>
                            <!-- end page-info-img -->

                            <!-- page-info-text -->
                            <div class="page-info-text col-lg-6 col-md-6 col-sm-12 col-xs-12">
                            	<div class="title" >
                            	' . $row["zh_name"] . '
                            	</div>';
	if (isset($row["zh_outline"])) {echo '
								<div class="reserve" style="margin-top:5px;font-size:18px ;">
                                   ' . $row["zh_outline"] . '
								</div>      ';}
	echo '   <div class="o-price" >';
	if (!$row["original price"] == NULL) {echo 'HK$' . $row["original price"];}
	echo '</div>
                                <div class="p-price" >
                            	HK$' . $row["price"] . '
                            	</div>
                                <div class="buy-control">

<form id="myform" method="POST" action="includes/add_letter.php?letter=20">

<div>
	                    <table style="font-family:arial; width:100%;border: 2px #CBCBCB solid;text-align-last:center" >

						<tr  class="center" style="background-color:#E4FFFC;border: 2px #CBCBCB solid;">
						<td colSpan=8  style="text-align-last:left">可選顏色及口味:<br>
黑 (D): 慕絲脆脆黑朱古力<br>

白 (W): 夏威夷果仁白朱古力<br>

粉紅 (P) : 士多啤梨脆片白朱古力<br>

<br>

限量版:<br>

玫瑰: 士多啤梨脆片白朱古力<br>

心形: 泡沫咖啡脆片牛奶朱古力<br>

						</td>
						</tr>

						<tr  class="center" style="background-color:#E4FFFC;border: 2px #CBCBCB solid;">
						<td colSpan=8  style="text-align-last:left">3可選字母及圖案:<br>

A – Z , 0 – 9 , ☺ , ♥<br>

<br>

限量版:<br>

🌹,❤️️️️️️<br>
	</tr>';

	echo createTable(20, 5);

	echo '					</table>
						</div>




	<input value="' . $row["zh_name"] . '" name="name" class="hidden"/>
<div class="variation_title" style="font-size:20px;margin-top:20px;" ng-show="checkoutReady">
	<p style="font-size:20px;width:25%; float:left;">數量: </p>
    <input style="width:8%; height:30px" type="button" value="-" class="qtyminus" field="quantity" />
    <input style="width:54%; height:30px;text-align:center;"type="text" name="quantity" value="1" class="qty" onkeypress="return event.charCode >= 48 && event.charCode <= 57"  />
    <input style="width:8%; height:30px"type="button" value="+" class="qtyplus" field="quantity" />
	</div>
    <input type="submit" name="submit" class="btn-addtocart btn-primary" value="加入購物車" />
</form>

<div class="sharethis-inline-share-buttons" style="margin-top:30px;"></div>



                                </div >

							 <!-- Go to www.addthis.com/dashboard to customize your tools -->

					</div></div>

                            <!-- end page-info-text -->
							<!-- page detailed info -->
				<div>
				&nbsp;
				</div>
				<div class="p-detailed-info col-lg-12 col-md-12 col-sm-12 col-xs-12" style="font-size:20px;">
								<h1 style="text-align:center;">產品簡介</h1>

				';
	echo $row["zh_description"];
	echo '
				</div>
							<!-- end page detailed info -->';} elseif ($p_id == 92) {
	echo '<style>
				.greyOutlineBox { border: 2px #CBCBCB solid; }
				th.thHead { background-color:#E4FFFC; }
			</style>';

	echo '<div  role="tabpanel" class="tab-pane active col-lg-8 col-md-9 col-sm-12 col-xs-12" id="products">
                        <div class="page-info-container col-lg-12 col-md-12 col-sm-12 col-xs-12" style="margin-top: 20px;">
                            <!-- page-info-img -->
                            <div class="page-info-img col-lg-6 col-md-6 col-sm-12 col-xs-12">

                            		<div class="page-info-img-main col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <a href="#" data-toggle="modal" data-target="#img-popup">
                                	<img src="' . $row["image"] . '" width="100%" alt="' . $row["zh_name"] . '">
                                    </a>
                                    </div>';

	$x = 1;
	while ($x <= $row["image_number"]) {
		echo '<div class="page-info-img-auxiliary col-lg-3 col-md-3 col-sm-3 col-xs-6">
				<a href="#" data-toggle="modal" data-target="#img-popup">
				<img src="' . $row["image_" . $x] . '" width="100%" alt="' . $row["zh_name"] . '">
				</a>
				</div>';
		$x++;}

	echo '</div>
		<!-- end page-info-img -->

		<!-- page-info-text -->
		<div class="page-info-text col-lg-6 col-md-6 col-sm-12 col-xs-12">
			<div class="title" >
			' . $row["zh_name"] . '
			</div>';
	if (isset($row["zh_outline"])) {echo '
			<div class="reserve" style="margin-top:5px;font-size:18px ;">
				' . $row["zh_outline"] . '
			</div>      ';}
	echo '<div class="o-price" >';
	if (!$row["original price"] == 0) {echo 'HK$' . $row["original price"];}
	echo '</div>
			<div class="p-price" >
			HK$' . $row["price"] . '
			</div>
			<div class="buy-control">

<form id="myform" method="POST" action="includes/add_letter.php?letter=30">
<input value="' . $row["zh_name"] . '" name="name" class="hidden"/>
<input value="' . $row["id"] . '" name="id" class="hidden"/>

	<div class="form-box" >
	<table style="font-family:arial; width:100%;border: 2px #CBCBCB solid;text-align-last:center" >

	<tr  class="center" style="background-color:#E4FFFC;border: 2px #CBCBCB solid;">
		<td colSpan=8  style="text-align-last:left">可選顏色及口味:<br>
黑 (D): 慕絲脆脆黑朱古力<br>

白 (W): 夏威夷果仁白朱古力<br>

粉紅 (P) : 士多啤梨脆片白朱古力<br>

<br>

限量版:<br>

玫瑰: 士多啤梨脆片白朱古力<br>

心形: 泡沫咖啡脆片牛奶朱古力<br>

						</td>
						</tr>

						<tr  class="center" style="background-color:#E4FFFC;border: 2px #CBCBCB solid;">
						<td colSpan=8  style="text-align-last:left">4可選字母及圖案:<br>

A – Z , 0 – 9 , ☺ , ♥<br>

<br>

限量版:<br>

🌹,❤️️️️️️<br>
	</tr>';

	echo createTable(30, 6);

	echo '						</table>
						</div>



<div class="variation_title" style="font-size:20px;margin-top:20px;" ng-show="checkoutReady">
	<p style="font-size:20px;width:25%; float:left;">數量:</p>
    <input style="width:8%; height:30px" type="button" value="-" class="qtyminus" field="quantity" />
    <input style="width:54%; height:30px;text-align:center;"type="text" name="quantity" value="1" class="qty" onkeypress="return event.charCode >= 48 && event.charCode <= 57"  />
    <input style="width:8%; height:30px"type="button" value="+" class="qtyplus" field="quantity" />
	</div>
    <input type="submit" name="submit" class="btn-addtocart btn-primary" value="加入購物車" />
</form>



<div class="sharethis-inline-share-buttons" style="margin-top:30px;"></div>

                                </div >

								  <!-- Go to www.addthis.com/dashboard to customize your tools -->
</div>
</div>
                            <!-- end page-info-text -->
							<!-- page detailed info -->
				<div>
				&nbsp;
				</div>
				<div class="p-detailed-info col-lg-12 col-md-12 col-sm-12 col-xs-12" style="font-size:20px;">
				<h1 style="text-align:center;">產品介紹</h1>
				';
	echo $row["zh_description"];
	echo '
				</div>
							<!-- end page detailed info -->';

} else {
	// $query = "select * from products where id='$p_id'";
	$query = "select * from productstable where id='$p_id' and status !='delete'";
	$result = mysqli_query($conn, $query);
	$row = mysqli_fetch_assoc($result);
	echo '        <div  role="tabpanel" class="tab-pane active col-lg-8 col-md-9 col-sm-12 col-xs-12" id="products">
                        <div class="page-info-container col-lg-12 col-md-12 col-sm-12 col-xs-12" style="margin-top: 20px;">
                            <!-- page-info-img -->
                            <div class="page-info-img col-lg-6 col-md-6 col-sm-12 col-xs-12">

                            		<div class="page-info-img-main col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <a href="#" data-toggle="modal" data-target="#img-popup">' .
	// <img src="../timthumb/timthumb.php?src=' . $row["image"] . '&h=500&w=500&zc=1" width="100%" >
	'<img src="' . $row["image"] . '" width="100%" alt="' . $row["zh_name"] . '" >'
		. '</a>
                                     </div>';

	$x = 1;
	$s_image = str_replace('.jpg', '', $row["image"]);
	while ($x <= $row["image_number"]) {
		echo '<div class="page-info-img-auxiliary col-lg-3 col-md-3 col-sm-3 col-xs-6">
                                    <a href="#" data-toggle="modal" data-target="#img-popup">
                                    <img src="../timthumb/timthumb.php?src=' . $row["image_" . $x] . '&h=500&w=500&zc=1" width="100%" alt="' . $row["zh_name"] . '" >
                                    </a>
                                    </div>';
		$x++;}
	// youtube video
	if (!empty($row["youtube_link"])) {
		echo '<div class=" col-lg-12 col-md-12 col-sm-12 col-xs-12">';
		// var_dump($row);
		echo '<iframe width="100%" style="min-height:200px;" height="auto" src="https://www.youtube.com/embed/' . $row["youtube_link"] . '?controls=0">
</iframe>';

		echo '</div>';
	}

	// end youtube video

	echo '</div>';

	echo '
                            <!-- end page-info-img -->

                            <!-- page-info-text -->
                            <div class="page-info-text col-lg-6 col-md-6 col-sm-12 col-xs-12">
                            	<div class="title" >
                            	' . $row["zh_name"] . '
                            	</div>';
	if (isset($row["zh_outline"])) {echo '
								<div class="reserve" style="margin-top:5px;font-size:18px ;">
                                   ' . $row["zh_outline"] . '
								</div>      ';}
	echo '
								<div class="o-price" >';
	if (!$row["original price"] == NULL) {echo 'HK$' . $row["original price"];}
	echo '</div>
                                <div class="p-price" >
                            	HK$' . $row["price"] . '
                            	</div>
                                <div class="buy-control">

<form id="myform" method="POST" action="includes/add_cart.php?check=infopage">
	<input value="' . htmlentities($row["zh_name"], ENT_QUOTES, "UTF-8") . '" name="name" class="hidden"/>
	<input value="' . $row["id"] . '" name="id" class="hidden"/>
<div class="variation_title" style="font-size:20px;margin-top:20px;" ng-show="checkoutReady">
	<p style="font-size:20px;width:25%; float:left;">數量:</p>
    <input style="width:8%; height:30px" type="button" value="-" class="qtyminus" field="quantity" />
    <input style="width:54%; height:30px;text-align:center;"type="text" name="quantity" value="1" class="qty" onkeypress="return event.charCode >= 48 && event.charCode <= 57"  />
    <input style="width:8%; height:30px"type="button" value="+" class="qtyplus" field="quantity" />
	</div>
    <input type="submit" name="submit" class="btn-addtocart btn-primary" value="加入購物車" />

</form>

		<div class="sharethis-inline-share-buttons" style="margin-top:30px;"></div>


                                </div >

											                                <!-- Go to www.addthis.com/dashboard to customize your tools -->
							                                               </div></div>


                            <!-- end page-info-text -->
							<!-- page detailed info -->
				<div>
				&nbsp;
				</div>
				<div class="p-detailed-info col-lg-12 col-md-12 col-sm-12 col-xs-12" style="font-size:20px;">
								<h1 style="text-align:center;">產品簡介</h1>

				';
	echo $row["zh_description"];
	echo '
				</div>
							<!-- end page detailed info -->';}

echo '						<!--  page Recommend Product -->
				<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
				<h1 style="text-align:left">更多商品</h1>';

// $query = "select * from products  order by rand() limit 4";
//added query to productstable

$query = "select * from productstable where status !='delete' order by rand() limit 4";
$result = mysqli_query($conn, $query);
if ($result->num_rows > 0) {
	while ($row = mysqli_fetch_assoc($result)) {
		echo '<a href="includes/product_select.php?id=' . $row["id"] . '&name=' . urlencode($row["name"]) . '">
                <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%" alt="' . $row["zh_name"] . '">
                <div class="overlay">
                <h2>
                ' . $row["zh_name"] . '
                </h2>
				<p>
                DETAIL
                </p>
                </div>
                </div>
                <div class="product-li-text">
                <p style="height:30px">' .
			$row["zh_name"]
			. '</p>
                <p style="color: #0E9BAD">
				HK$ ' . $row["price"] . '
                </p>
                </div>
                </div>
                </a>';
		$x++;
	}}

echo '</div>
							<!-- end page Recommend Product -->


                              <!-- modal -->
                                <div class="modal fade" id="img-popup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">

                                            <div class="lightbox-title">
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close" style=" z-index:1">
                                                    <span aria-hidden="true">
                                                        &times;
                                                    </span>
                                                </button>
                                                <h4>
                                                   ' . $row["zh_name"] . '
                                                </h4>
                                                </div>';
$query = "select * from productstable where id='$p_id' and status !='delete'";

$result = mysqli_query($conn, $query);
$row = mysqli_fetch_assoc($result);

$image = $row["image"];
$image_number = $row["image_number"];
$s_image = str_replace('.jpg', '', $row["image"]);

// echo "image123";
// echo $row["image"];
// echo $row["image_" . 1];
// echo $row["image_number"];
// $query = "select * from productstable where id='$p_id' and  status !='delete'";

// $result = mysqli_query($conn, $query);
// $row = mysqli_fetch_assoc($result);
// echo '"' . $image . '"';
echo '<div class="lightbox-image" >
<img id="s_image" src="../timthumb/timthumb.php?src=' . $row["image"] . '&h=500&w=500&zc=1" width="100%" alt="' . $row["zh_name"] . '" >
</div>
';

// $x = 1;
// while ($x <= $row["image_number"]) {
// 	echo '<div class="lightbox-image" >';
// 	echo '<img id="s_image" src="../timthumb/timthumb.php?src=' . $row["image_" . $x] . '&h=500&w=500&zc=1" width="100%" alt="' . $row["zh_name"] . '">';
// 	echo '</div>';
// 	$x++;
// }

// $x = 1;
// $s_image = str_replace('.jpg', '', $row["image"]);
// while ($x <= $row["image_number"]) {
// 	echo '<div class="lightbox-image" >

//                                     <img id="s_image" src="../timthumb/timthumb.php?src=' . $row["image_" . $x] . '&h=500&w=500&zc=1" width="100%" alt="' . $row["zh_name"] . '" >

//                                     </div>';
// 	$x++;}
//      <div class="lightbox-image" >
// <img id="s_image" src="#" alt="" width="100%" >
// </div>

echo '<div class="back-img col-xs-1" style="position:absolute;bottom:20px">
                                                <button type="button" class="back-img" id ="s_image_change1"  style=" z-index:1">
                                                    <img src="../img/button_back.png" height="25px">
                                                </button>
                                             </div>
                                             <div class="next-img col-xs-1 col-xs-offset-11" style="position:absolute;bottom:20px">
                                                <button type="button" class="next-img" id ="s_image_change2" style=" z-index:1">
                                                    <img src="../img/button_next.png" height="25px">
                                                </button>



                                    </div>
                                </div>
                              <!-- end modal -->

                        </div>
                    </div>
                </div>

                <!-- end main page -->

        </div>




		<script>

        window.onload = function(){

            var imgs = [';
// $query = "select * from products where id='$p_id'";
$query = "select * from productstable where id='$p_id' and  status !='delete'";

$result = mysqli_query($conn, $query);
$row = mysqli_fetch_assoc($result);
echo '"' . $image . '"';
$x = 1;
while ($x <= $image_number) {
	echo ',"../timthumb/timthumb.php?src=' . $row["image_" . $x] . '&h=1000&w=1000&zc=1"';
	$x++;
}

echo '];
            var len = imgs.length;
            var current = 0;
            var s_image = document.getElementById("s_image");
            var setImg = function(){

                s_image.src = imgs[current];
            };

            setImg();

            document.getElementById("s_image_change1").onclick = function(){
                current = (current == 0)? len-1: --current;
                s_image.src = imgs[current];
            }
			document.getElementById("s_image_change2").onclick = function(){
                current = (current == len-1)? 0: ++current;
                s_image.src = imgs[current];
            }
        };
    </script>';

$selectionScript = <<<EOD
<script>
	var colorSections = document.querySelectorAll('.selectBox select[name$="color"]');
	var letterSections = document.querySelectorAll('.selectBox select[name$="tel"]');

	for(var i=0,lenI=letterSections.length;i<lenI;i++){
		letterSections[i].addEventListener('change',function(ev){
			currentIndex = ev.target.getAttribute('data-num')-1;
			if(ev.target.value==='❤️️' || ev.target.value === '🌹'){
				colorSections[currentIndex].setAttribute('disabled',true);
				colorSections[currentIndex].selectedIndex = "0";
			} else {
				colorSections[currentIndex].removeAttribute('disabled');
			}
		});
	}


</script>
EOD;
echo $selectionScript;

?>
