<?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="Limited Edition" >
			<option value="❤️️">❤️️</option>
			<option value="🌹">🌹</option>
		</optgroup>
		<optgroup label="Letters and symbols">
			<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'";
$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%" >
                                    </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%" >
                                    </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["name"].'
                            	</div>';
								if(isset($row["outline"])){echo ' 
								<div class="reserve" style="margin-top:5px;font-size:18px ;">
                                   '.$row["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["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">Available colour and flavours:<br>
Dark (D): Dark Chocolate Mousse with Croquant<br>

White (W): White Chocolate with Macadamia<br>

Pink (P):  White Chocolate with Strawberry & Feuilletine<br>

<br>

Limited Edition:<br>

Rose: White Chocolate with Strawberry & Feuilletine<br>

Heart: Milk Chocolate with Cappuccino & Feuilletine

						</td>
						</tr>
						
						<tr  class="center" style="background-color:#E4FFFC;border: 2px #CBCBCB solid;">
						<td colSpan=8  style="text-align-last:left">Available letters and symbols:<br>
A – Z , 0 – 9 , ☺ , ♥<br>

<br>

Limited Edition:<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;">Quantity:</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="ADD TO CART" />
</form>
                               
                                
                                
                                    
                                  
                                </div >
								 
								  <!-- Go to www.addthis.com/dashboard to customize your tools -->
<div class="addthis_sharing_toolbox" style="padding-top:20px;text-align-last:center;">
								 </div></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;">Product Description</h1>
				';
	echo		$row["description"];
	echo		'
				</div>
							<!-- end page detailed info -->';}
							
							
							
elseif($p_id==2){
$query = "select * from products where id='$p_id'";
$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%" >
                                    </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%" >
                                    </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["name"].'
                            	</div>';
								if(isset($row["outline"])){echo ' 
								<div class="reserve" style="margin-top:5px;font-size:18px ;">
                                   '.$row["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">Available colour and flavours:<br>
Dark (D): Dark Chocolate Mousse with Croquant<br>

White (W): White Chocolate with Macadamia<br>

Pink (P):  White Chocolate with Strawberry & Feuilletine<br>

<br>

Limited Edition:<br>

Rose: White Chocolate with Strawberry & Feuilletine<br>

Heart: Milk Chocolate with Cappuccino & Feuilletine

						</td>
						</tr>
						
						<tr  class="center" style="background-color:#E4FFFC;border: 2px #CBCBCB solid;">
						<td colSpan=8  style="text-align-last:left">Available letters and symbols:<br>
A – Z , 0 – 9 , ☺ , ♥<br>

<br>

Limited Edition:<br>

🌹,❤️️️️️️<br>

						</tr>';


	echo createTable(15,5);


echo '						</table>
						</div>


	<input value="'.$row["name"].'" 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;">Quantity:</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="ADD TO CART" />
</form>
                                
                                
                                
                                    
                                  
                                </div >
								                                           
														<!-- Go to www.addthis.com/dashboard to customize your tools -->
<div class="addthis_sharing_toolbox" style="padding-top:20px;text-align-last:center;"></div>							                                               </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;">Product Description</h1>

				';
	echo		$row["description"];
	echo		'
				</div>
							<!-- end page detailed info -->';}
							
							
							
elseif($p_id==3){
$query = "select * from products where id='$p_id'";
$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%" >
                                    </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%" >
                                    </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["name"].'
                            	</div>';
								if(isset($row["outline"])){echo ' 
								<div class="reserve" style="margin-top:5px;font-size:18px ;">
                                   '.$row["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">Available colour and flavours:<br>
Dark (D): Dark Chocolate Mousse with Croquant<br>

White (W): White Chocolate with Macadamia<br>

Pink (P):  White Chocolate with Strawberry & Feuilletine<br>

<br>

Limited Edition:<br>

Rose: White Chocolate with Strawberry & Feuilletine<br>

Heart: Milk Chocolate with Cappuccino & Feuilletine

						</td>
						</tr>
						
						<tr  class="center" style="background-color:#E4FFFC;border: 2px #CBCBCB solid;">
						<td colSpan=8  style="text-align-last:left">Available letters and symbols:<br>
A – Z , 0 – 9 , ☺ , ♥<br>

<br>

Limited Edition:<br>

🌹,❤️️️️️️<br>

						</tr>';
						

	echo createTable(20,5);

						
	echo	'					</table>
						</div>




	<input value="'.$row["name"].'" 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;">Quantity:</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="ADD TO CART" />
</form>
                               
                                
                                
                                    
                                  
                                </div >
							
							 <!-- Go to www.addthis.com/dashboard to customize your tools -->
<div class="addthis_sharing_toolbox" style="padding-top:20px;text-align-last:center;"></div>
					</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;">Product Description</h1>

				';
	echo		$row["description"];
	echo		'
				</div>
							<!-- end page detailed info -->';}
							
elseif($p_id == 92){



	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%" >
                                    </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%" >
				</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["name"].'
			</div>';
			if(isset($row["outline"])){echo ' 
			<div class="reserve" style="margin-top:5px;font-size:18px ;">
				'.$row["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["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">Available colour and flavours:<br>
Dark (D): Dark Chocolate Mousse with Croquant<br>

White (W): White Chocolate with Macadamia<br>

Pink (P):  White Chocolate with Strawberry & Feuilletine<br>

<br>

Limited Edition:<br>

Rose: White Chocolate with Strawberry & Feuilletine<br>

Heart: Milk Chocolate with Cappuccino & Feuilletine

						</td>
						</tr>
						
						<tr  class="center" style="background-color:#E4FFFC;border: 2px #CBCBCB solid;">
						<td colSpan=8  style="text-align-last:left">Available letters and symbols:<br>
A – Z , 0 – 9 , ☺ , ♥<br>

<br>

Limited Edition:<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;">Quantity:</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="ADD TO CART" />
</form>
                               
                                
                                
                                    
                                  
                                </div >
								 
								  <!-- Go to www.addthis.com/dashboard to customize your tools -->
<div class="addthis_sharing_toolbox" style="padding-top:20px;text-align-last:center;">
								 </div></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;">Product Description</h1>
				';
	echo		$row["description"];
	echo		'
				</div>
							<!-- end page detailed info -->';

}							
							
else{
$query = "select * from products where id='$p_id'";
$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%" >
                                    </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="../timthumb/timthumb.php?src='.$row["image_".$x].'&h=500&w=500&zc=1" width="100%" >
                                    </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["name"].'
                            	</div>';
								if(isset($row["outline"])){echo ' 
								<div class="reserve" style="margin-top:5px;font-size:18px ;">
                                   '.$row["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["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;">Quantity:</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="ADD TO CART" />
</form>
                                
                                
                                    
                                  
                                </div >
								                                           
											                                <!-- Go to www.addthis.com/dashboard to customize your tools -->
<div class="addthis_sharing_toolbox" style="padding-top:20px;text-align-last:center;"></div>							                                               </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;">Product Description</h1>

				';
	echo		$row["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">More Details</h1>';
				
				$query = "select * from products 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%">
                <div class="overlay">
                <h2>
                '.$row["name"].'
                </h2>
				<p> 
                DETAIL
                </p> 
                </div>
                </div>
                <div class="product-li-text">
                <p>'.
                $row["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["name"].'
                                                </h4>
                                                </div>
                                                 <div class="lightbox-image" >
                                            <img id="s_image" src="#" alt="" width="100%" >
                                            </div> 
                                             
                                             <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'";
			$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;

?>
