<?php 
ob_start();
session_start();
include('header.php');

$id=$_GET['id'];

$querypro= "select products.id,products.rating,products.services,products.product_sku,products.estimated_shipping,products.size_guide,products.name,products.other_images,products.description,products.offers,products.specification,product_variant.price,product_variant.color,product_variant.discounted_price,subcategory.image,subcategory.category_id
from subcategory,products join
product_variant on products.id=product_variant.product_id
where products.id=$id  && products.category_id=subcategory.category_id";

$resdeal=mysqli_query($con,$querypro);
$rowd=mysqli_fetch_array($resdeal);
$querycat="select * from products where id='$id'";
$res=mysqli_query($con,$querycat);
$row_cat=mysqli_fetch_array($res);

$user_id=$_SESSION['id'];
$user_data=mysqli_query($con,"SELECT * FROM users WHERE id='$user_id'");
$user=mysqli_fetch_array($user_data);
// print_r($user);
if(isset($_POST['btncarts']))
{
	if(!empty($_SESSION['userid']))
	{
		$pr_vr_id=$_POST['product_variant'];

		$pr_id=$_GET['id'];
                      // if($pr_id!=$pr_vr_id and $pr_vr_id!=''){
                      // 	echo $pr_id=$pr_vr_id;
                      // }
		$uid=$_SESSION['userid'];
		$queryin="SELECT * from order_items where user_id='$uid' and product_variant_id='$pr_id'";
		$resin=mysqli_query($con,$queryin);
		$row=mysqli_fetch_array($resin);
				//print_r($row);
		$count=mysqli_num_rows($resin);
		if($count>=1)
		{ 

			$quantity=$row['quantity']+1;

			$queryqu="UPDATE order_items set quantity='$quantity' where user_id='$uid' and product_variant_id='$pr_id'";
			$resqu=mysqli_query($con,$queryqu);
			$msg="Item updated In Cart Successfully";


		}elseif($count==0)
		{


			$quer_join="SELECT * FROM  product_variant WHERE product_id='$pr_id'";
			$res_join=mysqli_query($con,$quer_join);
			$row_join=mysqli_fetch_assoc($res_join);


			$product_id=$pr_id;
			$product_quantity=1;
			$product_price=$row_join['price'];
			$psub_total=$product_quantity*$product_price;
			$product_userid=$uid;
			$queryc="INSERT into order_items(product_variant_id,quantity,price,sub_total,user_id)values('$product_id','$product_quantity','$product_price','$psub_total','$product_userid')";
			$resc=mysqli_query($con,$queryc);
			$msg="Item added In Cart Successfully";

		}
	}
	else
	{
		header("location:login.php");
	}
	
}


$rvw=$con->query("SELECT SUM(rating) as total,count('rating') as total_rating FROM reviews WHERE product_id=$id");
$review_avg=mysqli_fetch_assoc($rvw);
$total_rating=$review_avg['total_rating'];
$total = $review_avg['total'];
$avg = $total/$total_rating;
if ($review_avg['total']==0) {
	$avg = 0;
}
if ($avg==4) {
	$badge = 'badge_warning';
}elseif($avg<=3){
	$badge='badge_danger';
}else{
	$badge='badge_success';
}



// rating
// Assuming $con is your database connection and $id is the product ID
$reviews = $con->query("SELECT * FROM reviews WHERE product_id=$id");
?>

<style type="text/css">
	.btn:focus{
		box-shadow: none!important;
	}
	#quantity{
		width: 40px;
		text-align: center;
		border: 1px solid rgba(0, 0, 0, 0.1) !important;
		background-color: #fff!important;
		color: #000!important;
	}
	.product-offer-item{
		list-style-type: none;
	}
	.product-color {
		margin-top: 3px;
		margin-bottom: 5px;
		position: relative;
	}
	.product-color .title {
		display: inline-block;
		position: absolute;
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		font-size: 16px;
		font-weight: 600;
	}
	.product-color .color-list {
		display: inline-block;
		padding-left: 70px;
		padding-top: 20px;
	}
	li.show-colors {
		display: inline-block;
	}
	.product-color .color-list li {
		margin-right: 10px;
	}
	.product-color .color-list li .box {
		width: 25px;
		height: 25px;
		/*border-radius: 50%;*/
		display: inline-block;
		position: relative;
		cursor: pointer;
	}
	.product-color .color-list li .box::after {
		position: absolute;
		content: "";
		border: 1px solid rgba(0, 0, 0, 0.3);
		width: 26px;
		height: 26px;
		/*border-radius: 50%;*/
		top: -5px;
		left: -5px;
		opacity: 0;
		-webkit-transition: all 0.3s ease-in;
		transition: all 0.3s ease-in;
	}
	.btncart{
		background-color: var(--main-color);
		color: #fff;
		font-size: 14px;
		font-weight: 600;
		padding: 5px 15px;
		margin-top: 3px;
	}
	.social-icons {
		display: flex;
		flex-wrap: wrap;
		margin: -3px;
	}
	.social-icons li {
		padding: 3px;
		list-style-type: none;
	}

	.social-icons li a i {
		width: 30px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		border: 1px solid rgba(255, 255, 255, 0.1);
		color: #fff;
		-webkit-transition: all ease 0.3s;
		-moz-transition: all ease 0.3s;
		transition: all ease 0.3s;
	}
	.fab{
		font-weight: 400;
	}
	.social-icons li a i[class*="twitter"] {
		background: #55acee;
	}

	.social-icons li a i[class*="facebook"] {
		background: #3b5998;
	}
	.social-icons li a i[class*="linkedin"] {
		background: #007bb5;
	}
	.social-icons li a i[class*="pinterest"] {
		background: #007bb5;
	}
	.social-icons li a i[class*="whatsapp"] {
		background: #25d366;
	}
	#Policy{
		list-style-type: none;
	}
	#prod_variant{
		font-size: 14px!important;
		padding: 4px!important;
		width: 278px!important;
		border-radius: 5px!important;
		height: 30px!important;
	}
	.ion-ios-remove,.ion-ios-add{
		font-size: 28px!important;
	}
	.badge{
/*		color: #fff;*/
font-size: 15px;
/*		background-color:var(--main-color);*/
}
.badge-danger{
	background-color:var(--main-color);
}
.badge-success{
	color: #fff;
	background: #28a745;
	font-size: 15px
}
.mySlides {
	display: none;
	text-align: center;
}
.mySlides img{
	width: 80%!important;
	height: 395px;
	padding: 20px 0;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
	cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: auto;
	padding: 16px;
	/*margin-top: -50px;*/
	color: white;
	font-weight: bold;
	font-size: 20px;
	border-radius: 0 3px 3px 0;
	user-select: none;
	-webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
	right: 16px;
	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: var(--main-color);
	color:#ffffff!important;
}

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

/* Container for image text */
.caption-container {
	text-align: center;
	background-color: #222;
	padding: 2px 16px;
	color: white;
}

.row:after {
	content: "";
	display: table;
	clear: both;
}

/* Six columns side by side */


/* Add a transparency effect for thumnbail images */
.demo {
	opacity: 0.6;
}

.active,
.demo:hover {
	opacity: 1;
}
.demo .cursor{
	height: 200px;
}

.sidebar-box {

	padding: 8px;
}
.ftco-section 
{
	margin-top:15px;
	padding: 0em 0;
}
.categories li a span, .sidelink li a span {

	right: -29px;

}
.card.text-center:hover {
	background: #cccccc3d;
}

.icons i
{
	color:#FD6A02 ;
	font-weight: bold;
	font-size: 30px;
	padding:5px;
}

.othertab
{
	background-color:#BEBEBE;
	padding:10px;
	margin-bottom: 5px;
}

.data
{
	margin-top:10px;
	padding-top: 10px;




}
.non-veg-icon {
	background-image: url(images/nonvegicon.svg)!important;
}

.data1
{
	margin-left: 20px;

}
/*.card{
	height: 359px;
}*/
select.slc-pr {
	width: 88%;
}
.slc-dv {
	height: 40px;
}
.imgstyle

{

	box-shadow:5px 0px #d2d5d2;	
	border-style: solid;
	border-width: 0.1px;
}

img
{
	width:100%;
	height:150px;
}

	/*.data:hover
	{
		padding:20px;
			
	}*/

	.heading a
	{
		font-weight: bold;
		color: var(--main-color) !important;
		text-transform: uppercase;
		padding-top: 10px;
		
	}
	.prname {
		/*height: 46px;*/
		font-size: 19px;
	}
	.viewbtn a
	{
		
		border-radius:8px;
		background-color: #FD6A02;
		color:white !important;
		padding:8px;
		margin-right:8px;
		text-transform: bold;
		
	}

	.viewbtn
	{
		margin: 30px;
	}
	.non-veg-icon, .veg-icon {
		width: 13px;
		height: 13px;
		left: 5px;
	}
	.veg-icon {
		background-image: url(images/vegicon.svg)!important;
	}
	.bottmban a
	{
		background-color: var(--main-color);
		color:white !important;
		/*font-size: 18px;*/
		word-wrap: normal;
		text-align: center;
		width: 100%;
		height: 40px;
		display: inline-block;
		white-space: nowrap ;
		font-size-adjust: 1.0;
		box-shadow:5px 0px #d2d5d2;
		padding:5px;
	}

	.bottmban p
	{
		border-style: solid;
		border-width: 0.5px;

	}
	.ind-icon{
		margin-left: 9px;
	}
	.soon img
	{
		/*background-position: center;
		background-size: cover;*/
		height:500px;
		width: 100%;
		margin:50px;
	}
	.col-sm-7.dmd {
		margin-left: -17px;
	}
	.card img
	{
		width: 100%;
		text-align:center;
		height: 250px;
	}
	/*-------------------------my css--------*/

	p.prname {
		text-align: initial;
	}
	.dsc_prcnt {
		text-align: initial;
		font-size: 18px;
	}
	.dsc_price {
		text-align: initial;
	}
	.dsc_prcnt {
		margin: 2px;
		text-align: center;
		font-size: 11px;
	}

	.act_price {
		text-align: initial;
	}
	del.cut-prc small {
		font-size: 16px;
	}
	.card label p 
	{

		border-radius: 7px !important;
		
	}

	.dsc_prcnt {
		position: absolute;
		left: -26px;
		top: 7px;
		width: 39% !important;
		background: url(../images/discount.png) center no-repeat !important;
		margin: 2px;
		color: white;
	}
	span.veg-icon img {
		width: 9%;
		background: white;
		height: 0px;
	}
	.ind-icon {
		text-align: justify;
		/* margin-left: 9px; */
		float: left !important;
		width: 97% !important;
		margin-left: 15px !important;
		height: 24px;
	}

	element.style {
	}
	.card label p {
		width: 100% !important;
		background-color: var(--main-color);
		font-size: 15px;
		border-radius: 50px;

	}

	/*-------------------------my css end-------------------------*/

	.card
	{
		padding: 8px;
		border: none;
		box-shadow: 0px 6px 30px rgba(7, 36, 95, 0.08);
		transition: 0.2s linear;
	}
	.card:hover{
		box-shadow: 0 3px 16px 0 rgba(0,0,0,.11)!important;
	}

	.card h4 p input
	{
		word-wrap: normal;
		display: inline-block;
		font-size: 15px;
	}

	.card label p 
	{
		background-color: var(--main-color);
		font-size: 15px;
		border-radius: 50px;
		width:200px;
	}
	
	.sidebar1
	{
		
		
		width:310px;
		float:left;
		margin-bottom: : 20px;
	}
	.sidebar-box h3.heading {
		font-size: 18px;
		margin-left: 16px;
		width: 100% ;
	}

	.sidebar1 a
	{
		text-align: center;
		margin-left:20px;
		border-width: 0.5px;
	}

	.dsc_prcnt{
		margin: 2px;
	}
	.cut-prc{
		margin-right: 2px;
		font-size: 16px;
	}
	del.cut-prc small {
		margin-right: 2px;
	}

	/*.itemsp
	{
		float:right;
	}*/


	@media only screen and (min-device-width: 1400px) {
		.sidebar1 {
			width: 399px;
		}}


		.card:hover .prname{
			color: #007bff;
		}

/*`````````````````````````````Media Query`````````````````````````````*/



@media only screen and (max-device-width: 560px) {
	.card img {
		object-fit: contain;
	}

	span.veg-icon img {
		width: 8%;
	}
	.viewbtn label{
		width: 100% !important;
	}
	ul.categories li a {
		margin: 0;
		width: 100%;
		padding: 0;
	}

	.dmd{
		width: 29%;
	}
	ul.categories li {
		margin: 0;
		width: 80%;
		padding: 0;
	}

	.sidebar-box{
		padding: 0 !important;
		width: 100% !important;
		text-align: center;
	}
	.sidebar1{
		margin: 0px;
		margin-bottom: 20px;
		padding: 0px;
		width: 100% !important;
	}
	.card {
		width: 100%;
		margin: 15px 0;
	}
	.sidebar-box h3.heading {
		width: 94%;
	}
	.card.text-center {
		margin-bottom: 12px;
	}
	.row.itemsp.text-center {
		padding: 20px;
		margin: 0px;
	}

}
.color-list .active{
	border: 1px solid gray;
	/*border-radius: 50%;*/
	width: 34px;
	height: 34px;
	align-items: center;
	padding: 3px 3.7px;
}
.color-list .active1{
	border: 1px solid gray;
	/*border-radius: 50%;*/
	width: 34px;
	height: 34px;
	align-items: center;
	padding: 3px 3.7px;
}
.prod_size{
	border: 2px solid #b5a9a9;
	/* padding: 5px 10px; */
/*    margin-left: 5px;*/
border-radius: 4px;
cursor: pointer;
display: inline-table;
width: 32px;
margin-top: 10px;
text-align: center;
}
.active_color{
	/*border-color: var(--main-color);*/
	font-weight: bold;
	color: var(--main-color);
	border: 3px solid var(--main-color)!important;
}
.active_color1{
	/*border-color: var(--main-color);*/
	font-weight: bold;
	color: var(--main-color);
	border: 3px solid var(--main-color)!important;
}

#prices{
	font-size:30px;
}
.column{
	text-align: center;
	width: 100%;
/*	margin-bottom: 5px;*/
padding: 10px;
border: 1px solid #00000029;
border-right: 0;
}
.column:last-child{
	border-bottom: 1px solid #00000029!important;
}
.column img{
	width: 100%;
	height: 90px;
}

@media only screen and (max-width: 600px) {
	.phone_hide{
		display:none;
	}
	.field-2{
		width: 100%;
	}
}
.btn.btn-primary:hover{
	background: #348ec3!important;
}

.available-offers ul li::before{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f02b";
	padding-right: 10px;
	color: #16BD49;
}
.available-offers ul{
	padding-left: 0;
}
.available-offers ul li{
	list-style-type: none;
	font-size: 13px;

}
.add_to_wishlist{
	cursor: pointer;
	position: absolute;
	right: 20px;
	font-size: 25px;
}

._1s_Smc {
	padding-bottom: 16px;
}
._1s_Smc ._1hKmbr {
	color: #878787;
	padding-right: 8px;
	width: 150px;
}

._1s_Smc ._21lJbe:last-child {
	padding-bottom: 0;
	list-style: none;
	color: #212121;
}
._1s_Smc ._21lJbe {
	padding-bottom: 5px;
	list-style: none;
	color: #212121;
}
._3k-BhJ {
	border-top: 1px solid #f0f0f0;
	padding: 15px;
	font-size: 14px;
}
._3k-BhJ ul{
	list-style: none;
	margin-bottom: 0;
}
._3k-BhJ table td{
	padding: 5px;
}
._5pFuey {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	padding: 24px 30px 24px 24px;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.14;
	color: #212121;
}
._3dtsli {
	border-radius: 2px;
	font-size: 12px;
	border: 1px solid #f0f0f0;
}
.field-2 {
	border: 0;
	border-bottom: 2px solid var(--main-color);
	height: 35px;
	outline: 0;
}
.field-2::-webkit-inner-spin-button, 
.field-2::-webkit-outer-spin-button { 
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	margin: 0; 
}
.field-1 {
	background: transparent;
	color: var(--main-color);
	border: 0;
	font-weight: 600;
	border-bottom: 2px solid var(--main-color);
	outline: 0;
}
.field-1:focus,.share_btn:focus{
	outline: 0;
}
.bg-light-gray {
	background: #fbfbfb;
}
.share_btn{
	float: right;
	font-size: 15px;
	font-weight: 500;
	background: transparent;
	border: 0;
}
.share_btn i{
	color: #858282;
}
body{
	background-color: #F1F3F6;
	color:#414141;
}
.position-sticky{
	top: 30px;
}
.available-offers p{
	margin-bottom: 5px;
	font-size: 14px;
}
.zoomWindow{
	border: 1px solid #00000029!important;
}
.zoomLens{
	width: 200px!important;
	height: 200px!important;
}

.detail {
	display: none;
	position: fixed;
	width: 40%;
	top: 50px;
	height: 500px;
	z-index: 1;
}
.drift-zoom-pane img{
	height: 800px;
}
</style>
<?php 
$other_images = json_decode($row_cat['other_images']);
?>
<link rel="stylesheet" type="text/css" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/164071/drift-basic.css">
<section class="container-fluid bg-white py-2">
	<form method="post" action="add_to_cart.php" class="add_frm">
		<div class="row mx-auto" style="width: 100%;">
			<div class="col-md-5 mb-3 pt-lg-5 pt-3 position-relative">
				<div class="row position_sticky">
					<div class="col-md-2 pr-0 phone_hide">
						<div class="row">
							<div class="column border-bottom-0">
								<img class="demo cursor" src="admin/<?php echo $row_cat['image']; ?>" onclick="currentSlide(1)" >
							</div>
							<?php $x=2; for($i=0;$i<count($other_images);$i++){ ?>
								<div class="column border-bottom-0">
									<img class="demo cursor" src="admin/<?php echo $other_images[$i]; ?>" onclick="currentSlide(<?=$x++;?>)" >
								</div>
							<?php } ?>
						</div>
					</div>

					<div class="col-md-10">
						<div class="border">
							<a href="https://api.whatsapp.com/send?phone=91<?php echo $user['mobile']; ?>&text=https://uniformindia.co.in/<?php echo $url; ?>" class="ShareBtn" target="_blank"><i class="fas fa-share"></i></a>

							<?php 
							$sql = "SELECT * FROM wishlist WHERE product_id='".$id."' AND user_id='".$_SESSION['userid']."'";
							$wish=mysqli_query($con,$sql);
							$num_rows=mysqli_num_rows($wish);
							if($num_rows > 0){
								$rows=mysqli_fetch_assoc($wish);
								echo '<a onclick="wishlist_del('.$rows["id"].')" class="add_to_wishlist" data-toggle="tooltip" data-placement="top" title="Remove Wishlist"><i style="color:red;" class="fa fa-heart"></i></a>';
							}else{
								echo '<a onclick="wishlist('.$id.')" class="add_to_wishlist" data-toggle="tooltip" data-placement="top" title="Add To Wishlist"><i class="fa fa-heart"></i></a>';
							}
							?>
							<div class="mySlides">
								<img src="admin/<?php echo $row_cat['image']; ?>" data-zoom="admin/<?php echo $row_cat['image']; ?>" class="demo-trigger">
							</div>
							<?php for($i=0;$i<count($other_images);$i++){ ?>
								<div class="mySlides" id="color_img">
									<img src="admin/<?php echo $other_images[$i]; ?>" data-zoom="admin/<?php echo $other_images[$i]; ?>" class="demo-trigger<?=$i;?>">
								</div>
							<?php } ?>


							<a class="prev" onclick="plusSlides(-1)">❮</a>
							<a class="next" onclick="plusSlides(1)">❯</a>

							<script>
								let slideIndex = 1;
								showSlides(slideIndex);

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

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

								function showSlides(n) {
									let i;
									let slides = document.getElementsByClassName("mySlides");
									let dots = document.getElementsByClassName("demo");
									let captionText = document.getElementById("caption");
									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";
											captionText.innerHTML = dots[slideIndex-1].alt;
										}
									</script>
								</div>
							</div>
							<div class="col-md-12">
								<div class="product-color" data-key="false">
									<div class="script">

									</div>
									<!-- <input type="hidden" name="color" id="colorss" class="colours"> -->

								</div>
							</div>


						</div>
					</div>
					<div class="col-md-7 pt-lg-5 position-relative">
						<div class="detail"></div>
						<h5 class="productName"><?php echo $rowd['name']; ?> <a href="https://api.whatsapp.com/send?phone=91<?php echo $user['mobile']; ?>&text=https://uniformindia.co.in/<?php echo $url; ?>" class="share_btn" target="_blank"><i class="fas fa-share"></i> Share</a></h5>
						

						<div class="ratings-reviews">
							<div class="row align-items-center">
								<div class="col-lg-3 col-4">
									<div class="rating-overview">
										<div class="total"><?=round($avg,1);?> ★ <br><small><?=$reviews->num_rows;?> Ratings & Reviews</small></div>
									</div>
								</div>
								<div class="col-lg-6 col-8">
									<?php
									
									// Initialize an array to count reviews for each star rating
									$ratingCounts = [5 => 0, 4 => 0, 3 => 0, 2 => 0, 1 => 0];

									// Count the number of reviews for each star rating
									while ($review = $reviews->fetch_assoc()) {
										$rating = $review['rating'];
										if (isset($ratingCounts[$rating])) {
											$ratingCounts[$rating]++;
										}
									}

									// Calculate the total number of reviews
									$totalReviews = array_sum($ratingCounts);

									// Function to calculate the percentage width for the bar
									function calculatePercentage($count, $total) {
										return $total > 0 ? ($count / $total) * 100 : 0;
									}

									// Function to determine the color based on the percentage
									function getBarColor($percentage) {
										if ($percentage >= 80) {
								        return '#4CAF50'; // Green
								    } elseif ($percentage >= 50) {
								        return '#FFC107'; // Yellow
								    } else {
								        return '#FF0000'; // Red
								    }
								}
								?>

								<div class="rating-bars">
									<?php foreach ($ratingCounts as $stars => $count): ?>
										<?php $percentage = calculatePercentage($count, $totalReviews); ?>
										<div class="rating-bar">
											<div class="stars"><?php echo $stars; ?>★</div>
											<div class="bar">
												<div class="fill" style="width: <?php echo $percentage; ?>%; background-color: <?php echo getBarColor($percentage); ?>;"></div>
											</div>
											<div class="count"><?php echo $count; ?></div>
										</div>
									<?php endforeach; ?>
								</div>
							</div>
						</div>
					</div>

					<div class="_3dtsli">
						<?php 
						$reviews=$con->query("SELECT * FROM reviews WHERE product_id=$id");

						while($review=mysqli_fetch_array($reviews)){
							if ($review['rating']==4) {
								$badge = 'badge-warning';
							}elseif($review['rating']<=3){
								$badge='badge-danger';
							}else{
								$badge='badge-success';
							}
							?>
							<div class="_3k-BhJ">
								<div class="rating_star mb-4"><span class="badge <?=$badge;?>"><?php echo $review['rating']; ?>.0 ★</span></div>
								<?php echo $review['review']; ?>
							</div>
						<?php } ?>
					</div>
				</div>
			</div>
		</form>
	</section>



	<?php include('footer.php');
	ob_flush();
	?>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/elevatezoom/2.2.3/jquery.elevatezoom.min.js"></script>

	<script>
				

		$(document).ready(function(){
			$('.question').click(function(event){
				event.stopPropagation();
				$('#popover-card').toggle();
			});

			$(document).click(function(event) {
				if (!$(event.target).closest('#popover-card, .question').length) {
					$('#popover-card').hide();
				}
			});
		});


		$(".zoom").elevateZoom();

		
	</script>
	<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/164071/Drift.min.js"></script>
	<script>
		document.addEventListener("DOMContentLoaded", function () {
			if (window.innerWidth >= 768) {
				$(".demo-trigger").hover(function() {
					$('.detail').show();
				}, 
				function() {
					$('.detail').hide();
				});

				var demoTrigger = document.querySelector('.demo-trigger');
				var paneContainer = document.querySelector('.detail');

				new Drift(demoTrigger, {
					paneContainer: paneContainer,
					inlinePane: false,
				});
			}
		});



		for (let i = 0; i < 10; i++) {
			$(".demo-trigger"+i).hover(function() {
				$('.detail').show();
			}, 
			function() {
				$('.detail').hide();
			});

			var demoTrigger = document.querySelector('.demo-trigger'+i);
			var paneContainer = document.querySelector('.detail');

			new Drift(demoTrigger, {
				paneContainer: paneContainer,
				inlinePane: false,
			});
		}

	</script>