WWWWWW

Current Directory: /home/u588966950/domains/snackbot.in/public_html/shop
Viewing File: /home/u588966950/domains/snackbot.in/public_html/shop/index04092025.php
<?php include "../conn.php" ?>
<?php
$fetch = $conn->query("SELECT * FROM rk_item WHERE id='" . $_REQUEST['flag'] . "' OR slugname='" . $_REQUEST['slug'] . "'")->fetch_assoc();
?>
<!DOCTYPE html>
<html lang="en">
 
<head>
	<title><?php echo $fetch['name']; ?> | SNACKBOT</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link rel="shortcut icon" href="../favicon.png" />
	<link rel="preconnect" href="https://fonts.googleapis.com" />
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
	<link href="https://fonts.googleapis.com/css2?family=Marcellus&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet" />
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
	<script src="https://kit.fontawesome.com/b4f8a3cdf0.js" crossorigin="anonymous"></script>
	<link href="../style/sp-style.css" rel="stylesheet" />
	<link href="../style/sp-responsive.css" rel="stylesheet" />
	<!-- Lightbox2 CSS -->
	<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" />
	<!-- jQuery -->
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

	<!-- Bootstrap 5 JS -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

	<!-- Lightbox2 JS -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
		.upload-container {
			max-width: 300px;
			margin: auto;
			text-align: center;
		}

		.upload-container h4 {
			margin-bottom: 10px;
		}

		.photo-frame {
			width: 100%;
			height: 100%;
			border: 2px dashed #201c35;
			border-radius: 15px;
			overflow: hidden;
			margin: 10px auto;
			background-color: white;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 10px;
		}

		.photo-frame img {
			max-width: 100%;
			max-height: 100%;
			object-fit: cover;
		}

		input[type="file"] {
			 display: none; 
		}

		#collapseOne ul {
			list-style: disc;
			padding: inherit;
			margin: 0;
			padding-left: 40px;
		}
	</style>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.7.20/sweetalert2.all.min.js"></script>

	<?php

	if (isset($_POST['feedbackbtn'])) {

		$rating  = $_POST['rating'];

		$user = $_POST['name'];

		$remarks = $_POST['remarks'];

		$proid = $_POST['proid'];

		$reviewtitle = $_POST['reviewtitle'];

		$email = $_POST['email'];

		
		if (isset($_FILES['photo']['name']) && $_FILES['photo']['name'] != '') {
			$file_name = $_FILES["photo"]["name"];
			$temp_name = $_FILES["photo"]["tmp_name"];
			$imgtype = $_FILES["photo"]["type"];
			$imagename = date("d-m-Y") . "-" . time() . $file_name;
			$target_path = "../uploads/" . $imagename;
			move_uploaded_file($temp_name, $target_path);
		} else {
			$imagename = '';
		}
		$sql = "INSERT INTO tbl_feedback (rating,user,remarks,proid,photo,reviewtitle,email,datereview) VALUES ('$rating','$user','$remarks','$proid','$imagename','$reviewtitle','$email','" . date('Y-m-d') . "')";

		if ($conn->query($sql)) {



			header("Location: https://snackbot.in/thankyou/");
			exit;
			
		}
	} ?>


</head>

<body>
	<?php include "../header.php" ?>

	<div class="container-fluid sp-breadcrumb">
		<div class="container">
			<div class="row">
				<ul class="site-breadcrumbs collapsed">
					<li><a href="https://snackbot.in/shop/">Home</a></li>
					<li><?php echo $fetch['name']; ?></li>
				</ul>
			</div>
		</div>
	</div>
	<div class="container-fluid sp-product-new">
		<div class="container">
			<div class="row">
				<div class="col-sm-7">
					<div class="row">
						<div class="col-2">
							<!-- Thumbnail Slider -->
							<div id="thumbnailSlider" class="list-group">
								<a href="javascript:void(0);" class="list-group-item list-group-item-action" data-bs-target="#mainImage" data-bs-slide-to="0">
									<img src="<?php echo '../images/' . $fetch['photo']; ?>" alt="Product 1" class="img-fluid thumbnail" />
								</a>
								<a href="javascript:void(0);" class="list-group-item list-group-item-action" data-bs-target="#mainImage" data-bs-slide-to="1">
									<img src="<?php echo '../images/' . $fetch['photo2']; ?>" alt="Product 2" class="img-fluid thumbnail" />
								</a>
								<?php if (isset($fetch['photo3']) && $fetch['photo3'] != '') { ?>
									<a href="javascript:void(0);" class="list-group-item list-group-item-action" data-bs-target="#mainImage" data-bs-slide-to="2">
										<img src="<?php echo '../images/' . $fetch['photo3']; ?>" alt="Product 2" class="img-fluid thumbnail" />
									</a>
								<?php } ?>
								<!-- Add more thumbnails as needed -->
							</div>
						</div>
						<div class="col-10">
							<!-- Main Image Slider with Zoom on Hover -->
							<div id="mainImage" class="carousel slide" data-bs-ride="carousel">
								<div class="carousel-inner">
									<div class="carousel-item active">
										<a href="<?php echo '../images/' . $fetch['photo']; ?>" data-lightbox="carousel">
											<img src="<?php echo '../images/' . $fetch['photo']; ?>" class="d-block w-100 zoom" alt="ban 1" />
										</a>
									</div>
									<div class="carousel-item">
										<a href="<?php echo '../images/' . $fetch['photo2']; ?>" data-lightbox="carousel">
											<img src="<?php echo '../images/' . $fetch['photo2']; ?>" class="d-block w-100 zoom" alt="ban 2" />
										</a>
									</div>
									<?php if (isset($fetch['photo3']) && $fetch['photo3'] != '') { ?>
										<div class="carousel-item">
											<a href="<?php echo '../images/' . $fetch['photo3']; ?>" data-lightbox="carousel">
												<img src="<?php echo '../images/' . $fetch['photo3']; ?>" class="d-block w-100 zoom" alt="ban 3" />
											</a>
										</div>
									<?php } ?>
								</div>

								<button class="carousel-control-prev" type="button" data-bs-target="#mainImage" data-bs-slide="prev">
									<span class="carousel-control-prev-icon" aria-hidden="true"></span>
									<span class="visually-hidden">Previous</span>
								</button>
								<button class="carousel-control-next" type="button" data-bs-target="#mainImage" data-bs-slide="next">
									<span class="carousel-control-next-icon" aria-hidden="true"></span>
									<span class="visually-hidden">Next</span>
								</button>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-5">
					<h2><?php echo $fetch['name']; ?></h2>
					<?php
					// Assuming you have a valid database connection in $conn
					$product_id = $fetch['id']; // Get the product ID from the URL

					// Query to get all reviews for the specific product
					$query = "SELECT rating FROM tbl_feedback WHERE proid = '$product_id'";
					$result = mysqli_query($conn, $query);

					// Initialize variables
					$total_ratings = 0;
					$total_reviews = 0;
					$rating_count = [1 => 0, 2 => 0, 3 => 0, 4 => 0, 5 => 0];

					// Loop through the results and count ratings
					while ($row = mysqli_fetch_assoc($result)) {
						$rating = $row['rating'];
						$total_ratings += $rating;
						$rating_count[$rating]++;
						$total_reviews++;
					}

					// Calculate average rating
					$average_rating = ($total_reviews > 0) ? $total_ratings / $total_reviews : 0;

					// Display the average rating as stars
					echo '<div class="star-rating">';
					for ($i = 1; $i <= 5; $i++) {
						if ($average_rating >= $i) {
							echo '<i class="fas fa-star"></i>'; // Full star
						} elseif ($average_rating >= $i - 0.5) {
							echo '<i class="fas fa-star-half-alt"></i>'; // Half star
						} else {
							echo '<i class="far fa-star"></i>'; // Empty star
						}
					}
					echo '</div>';

					// Display the total count of reviews in parentheses
					echo '<div><strong>Total Reviews:</strong> (' . $total_reviews . ')</div>';
					?>
					<p><?php echo $fetch['sdescription']; ?></p>

					<?php
					if ($fetch['id'] == 6 || $fetch['id'] == 7) {
					?>

						<div class="accordion" id="productDetailsAccordion" style="margin-top:15px;">
							<div class="accordion-item accordion-item-custom">
								<h2 class="accordion-header accordion-header-custom" id="headingOne">
									<button class="accordion-button accordion-button-custom" type="button">
										PRODUCT DETAILS
									</button>
								</h2>
								<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#productDetailsAccordion" style="margin-top: -25px;">
									<div class="accordion-body accordion-body-custom" style="padding:0;">
										<p><?php echo $fetch['ldescription']; ?></p>

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


						</div>

					<?php
					}
					?>





					<?php
					$price = $fetch['mrp'];
					$offerprice = $fetch['nrp'];
					?>






					<?php
					if ($fetch['id'] == 6) {
					?>

						<div class="row">
							<div class="col-xs-12 col-sm-4">
								<div class="upload-container">
									<h4 style="font-size:12px;">Upload <br>Wedding Logo</h4>
									<div class="photo-frame" id="photoFrame">
										<img id="previewImage" src="../upload.png" alt="Live Preview">
									</div>
									<input type="file" name="photo" id="photoInput" accept="image/*" required>
								</div>
							</div>
							<div class="col-xs-12 col-sm-4">
								<div class="upload-container">
									<h4 style="font-size:12px;">Couple <br>Photo/Caricature</h4>
									<div class="photo-frame" id="photoFrame1">
										<img id="previewImage1" src="../upload.png" alt="Live Preview">
									</div>
									<input type="file" name="photo1" id="photoInput1" accept="image/*" required>
								</div>
							</div>
							<div class="col-xs-12 col-sm-4">
								<div class="upload-container">
									<h4 style="font-size:12px;">Wedding <br>Itinerary</h4>
									<div class="photo-frame" id="photoFrame2">
										<img id="previewImage2" src="../upload.png" alt="Live Preview">
									</div>
									<input type="file" name="photo2" id="photoInput2" accept="image/*" required>
								</div>
							</div>
							<div class="col-xs-12 col-sm-12">
								<div class="upload-container">
									<h4 style="font-size:12px;">Do you want to print?</h4>
									<input type="radio" name="printside" value="Both the Side" checked="checked">Both the Side <br>
									<input type="radio" name="printside" value="Only one Side">Only one Side
								</div>
							</div>
						</div>

						<script>
							const input = document.getElementById('photoInput');
							const img = document.getElementById('previewImage');
							const frame = document.getElementById('photoFrame');

							// Click frame to trigger file input
							frame.addEventListener('click', function() {
								input.click();
							});

							// Show preview
							input.addEventListener('change', function() {
								const file = this.files[0];
								if (file) {
									const reader = new FileReader();
									img.style.display = "block";
									reader.onload = function(e) {
										img.src = e.target.result;
									}
									reader.readAsDataURL(file);
								}
							});
						</script>

						<script>
							const input1 = document.getElementById('photoInput1');
							const img1 = document.getElementById('previewImage1');
							const frame1 = document.getElementById('photoFrame1');

							// Click frame to trigger file input
							frame1.addEventListener('click', function() {
								input1.click();
							});

							// Show preview
							input1.addEventListener('change', function() {
								const file1 = this.files[0];
								if (file1) {
									const reader1 = new FileReader();
									img1.style.display = "block";
									reader1.onload = function(e) {
										img1.src = e.target.result;
									}
									reader1.readAsDataURL(file1);
								}
							});
						</script>

						<script>
							const input2 = document.getElementById('photoInput2');
							const img2 = document.getElementById('previewImage2');
							const frame2 = document.getElementById('photoFrame2');

							// Click frame to trigger file input
							frame2.addEventListener('click', function() {
								input2.click();
							});

							// Show preview
							input2.addEventListener('change', function() {
								const file2 = this.files[0];
								if (file2) {
									const reader2 = new FileReader();
									img2.style.display = "block";
									reader2.onload = function(e) {
										img2.src = e.target.result;
									}
									reader2.readAsDataURL(file2);
								}
							});
						</script>
						<div class="row">
							<div class="col-xs-12 col-sm-12">
								<h4 style="font-size:14px;">Enter Your Message/Hashtag</h4>
								<textarea style="width:100%; height:100px;"></textarea>
							</div>
						</div>
						
							<div class="sp_price" style="overflow:hidden;">
								<?php
									$chkcustomprice = $conn->query("SELECT 
															SUM(mrp*qnty)   AS price, 
															SUM(price*qnty) AS offerprice 
														FROM `tbl_cart_customitem` 
														WHERE vid='" . $fetch['id'] . "' 
														AND sessionid='" . session_id() . "'")->fetch_assoc();
									?>
									<div id="cart-total" class="sp_price" style="font-size:16px; float:left;">
										<span style="text-decoration:line-through; color:#999999;">
											₹<?php echo number_format($chkcustomprice['price']); ?>
										</span>&nbsp;
										<strong>₹<?php echo number_format($chkcustomprice['offerprice']); ?></strong>
									</div>
									
									<?php
								// Calculate discount
								if ($price > $offerprice) {
									$discountAmount = $price - $offerprice;
									$discountPercentage = ($discountAmount / $price) * 100;
								?>
									<div id="discountTag" style="float: left;padding-left: 15px;margin-top: -7px;">
										<?php if ($discountPercentage > 0): ?>
											<div class="discount-tag" style="background-color: red;color: white;padding: 3px;font-size: 12px;font-weight: bold;float:left;margin-top: 5px;">
												<?php echo round($discountPercentage, 0); ?>% OFF
											</div>
										<?php endif; ?>
									</div>
								<?php
								}else{
								?>
								
									<div id="discountTag" style="float: left;padding-left: 15px;margin-top: -7px;">
										
											<div class="discount-tag" style="background-color: red;color: white;padding: 3px;font-size: 12px;font-weight: bold;float:left;margin-top: 5px;">
												
											</div>
										
									</div>
								<?php } ?>	
								
							</div>
						
						<div class="card mb-4">
							<span style="color:#FF0000;">***You can select 6 to 10 products</span>
							<div class="card-body" style="padding:5px;">

								<?php
								$sql = "SELECT * FROM rk_item WHERE category!='2' ORDER BY name ASC";
								$query = $conn->query($sql);
								while ($row = $query->fetch_assoc()) {
									$imagephoto = (!empty($row['photo'])) ? '../images/' . $row['photo'] : '../images/noimage.jpeg';

									$price = $row['mrp'];
									$offerprice = $row['nrp'];

									$chkcccart = $conn->query("SELECT * FROM `tbl_cart_customitem` 
									   WHERE pid='" . $row['id'] . "' 
									   AND vid='" . $fetch['id'] . "' 
									   AND sessionid='" . session_id() . "'")->fetch_assoc();

									$qnty = isset($chkcccart['qnty']) ? (int)$chkcccart['qnty'] : 0;
									$itemTotal = ($qnty > 0) ? $chkcccart['qnty'] * $chkcccart['price'] : 0;
								?>
									<div class="row cart-item mb-3"
										data-pid="<?php echo $row['id']; ?>"
										data-vid="<?php echo $fetch['id']; ?>"
										style="padding:0;">
										<div class="col-md-2">
											<img src="<?php echo $imagephoto; ?>" style="width:30px; height:30px;" alt="Product Image" class="img-fluid rounded">
										</div>
										<div class="col-md-4">
											<h5 class="card-title" style="font-size:14px;"><?php echo $row['name']; ?></h5>
											<div class="sp_price" style="font-size:14px;">
												<span style="text-decoration:line-through; font-weight:normal; color:#999999;font-size: 14px;">₹<?php echo number_format($price); ?></span>&nbsp;
												₹<?php echo number_format($offerprice); ?>
											</div>
										</div>
										<div class="col-md-3">
											<div class="input-group" style="width:100px;">
												<button class="btn btn-outline-secondary btn-sm qty-decrease">-</button>
												<input type="text" class="form-control form-control-sm text-center quantity-input" value="<?php echo $qnty; ?>" readonly style="width:50px;height:31px;border:1px solid #000;background:#e5e5e5;">
												<button class="btn btn-outline-secondary btn-sm qty-increase">+</button>
											</div>
										</div>
										<div class="col-md-3 text-end">
											<p class="fw-bold item-total">₹<?php echo (int)$itemTotal; ?></p>
										</div>
									</div>
								<?php
								}
								?>
							</div>
						</div>

						<script>
						$(document).ready(function() {
    $(".qty-increase, .qty-decrease").click(function(e) {
        e.preventDefault();

        let row = $(this).closest(".cart-item");
        let pid = row.data("pid");
        let vid = row.data("vid");
        let input = row.find(".quantity-input");
        let currentQty = parseInt(input.val()) || 0;

        if ($(this).hasClass("qty-increase")) {
            currentQty++;
        } else if ($(this).hasClass("qty-decrease") && currentQty > 0) {
            currentQty--;
        }

        input.val(currentQty);

        $.ajax({
            url: "../update_cart_ajax.php",
            type: "POST",
            dataType: "json",
            data: { pid: pid, vid: vid, qnty: currentQty },
            success: function(data) {
                if (data.status === "success") {
                    // update row total
                    row.find(".item-total").text("₹" + data.item_total);

                    // update global totals
                    $("#mrpPrice").text("₹" + data.mrp_total);
                    $("#offerPrice").text("₹" + data.grand_total);
					
					$("#cart-total").html(
												'<span style="text-decoration:line-through; color:#999999;">₹' + data.mrp_total + '</span>&nbsp;' +
												'<strong>₹' + data.grand_total + '</strong>'
											);

                    // update discount tag
                    if (data.discount > 0) {
                        $("#discountTag").html(
                            `<div class="discount-tag" style="background-color:red;color:#fff;padding:3px;font-size:12px;font-weight:bold;float:left;margin-top:5px;">
                                ${data.discount}% OFF
                             </div>`
                        );
                    } else {
                        $("#discountTag").empty();
                    }
                }
            },
            error: function(xhr, status, err) {
                console.error("AJAX error:", err);
            }
        });
    });
});
						</script>

							<div class="sp-add-to-cart-box mt-4">
								<div class="d-flex align-items-center gap-2">
									<form action="https://snackbot.in/cart/" method="post" name="cartform">
										<input type="hidden" name="atc" value="<?php echo $fetch['id']; ?>">
										<input type="submit" class="add-to-cart" name="customcartbtn" style="text-transform:uppercase;background: #201c35;" value="Add to Cart">
									</form>
								</div>
							</div>
						
					<?php
					} else if ($fetch['id'] == 7) {
					?>


					 <div class="row">
							<div class="col-xs-12 col-sm-4">
								<div class="upload-container">
									<h4 style="font-size:14px;">UPLOAD FAVOURITE CHARACTER</h4>
									<div class="photo-frame" id="photoFrame">
										<img id="previewImage" src="../upload.png" alt="Live Preview">
									</div>
									<input type="file" name="photo" id="photoInput" accept="image/*" required>
								</div>
							</div>
					</div>		

						<script>
							const input = document.getElementById('photoInput');
							const img = document.getElementById('previewImage');
							const frame = document.getElementById('photoFrame');

							// Click frame to trigger file input
							frame.addEventListener('click', function() {
								input.click();
							});

							// Show preview
							input.addEventListener('change', function() {
								const file = this.files[0];
								if (file) {
									const reader = new FileReader();
									img.style.display = "block";
									reader.onload = function(e) {
										img.src = e.target.result;
									}
									reader.readAsDataURL(file);
								}
							});
						</script>
						<div class="row">
							<div class="col-xs-12 col-sm-12">
								<h4 style="font-size:14px;">Enter Your Name & Age / Message/ Event</h4>
								<textarea style="width:100%; height:150px;"></textarea>
							</div>
						</div>
						<div style="width:100%; overflow:hidden;">
						<?php
						$chkcustomprice = $conn->query("SELECT 
                                                SUM(mrp*qnty)   AS price, 
                                                SUM(price*qnty) AS offerprice 
                                            FROM `tbl_cart_customitem` 
                                            WHERE vid='" . $fetch['id'] . "' 
                                            AND sessionid='" . session_id() . "'")->fetch_assoc();
						?>
						<div id="cart-total" class="sp_price" style="font-size:16px; float:left;">
							<span style="text-decoration:line-through; color:#999999;">
								₹<?php echo number_format($chkcustomprice['price']); ?>
							</span>&nbsp;
							<strong>₹<?php echo number_format($chkcustomprice['offerprice']); ?></strong>
						</div>
						
						<?php
								// Calculate discount
								if ($price > $offerprice) {
									$discountAmount = $price - $offerprice;
									$discountPercentage = ($discountAmount / $price) * 100;
								?>
									<div id="discountTag" style="float: left;padding-left: 15px;margin-top: -7px;">
										<?php if ($discountPercentage > 0): ?>
											<div class="discount-tag" style="background-color: red;color: white;padding: 3px;font-size: 12px;font-weight: bold;float:left;margin-top: 5px;">
												<?php echo round($discountPercentage, 0); ?>% OFF
											</div>
										<?php endif; ?>
									</div>
								<?php
								}else{
								?>
								
									<div id="discountTag" style="float: left;padding-left: 15px;margin-top: -7px;">
										
											<div class="discount-tag" style="background-color: red;color: white;padding: 3px;font-size: 12px;font-weight: bold;float:left;margin-top: 5px;">
												
											</div>
										
									</div>
								<?php } ?>
								
						</div>		
						
						<div class="card mb-4">
							<span style="color:#FF0000;">***You can select 6 to 10 products</span>
							<div class="card-body" style="padding:5px;">

								<?php
								$sql = "SELECT * FROM rk_item WHERE category!='2' ORDER BY name ASC";
								$query = $conn->query($sql);
								while ($row = $query->fetch_assoc()) {
									$imagephoto = (!empty($row['photo'])) ? '../images/' . $row['photo'] : '../images/noimage.jpeg';

									$price      = $row['mrp'];   // Original MRP
									$offerprice = $row['nrp'];   // Discounted Price

									$chkcccart  = $conn->query("SELECT * FROM `tbl_cart_customitem` 
                                        WHERE pid='" . $row['id'] . "' 
                                        AND vid='" . $fetch['id'] . "' 
                                        AND sessionid='" . session_id() . "'")->fetch_assoc();

									$qty = (int)$chkcccart['qnty'];
									$itemTotal = $qty * (float)$chkcccart['price'];
								?>
									<div class="row cart-item mb-3 align-items-center" style="padding:0;">
										<div class="col-md-2">
											<img src="<?php echo $imagephoto; ?>" style="width:30px; height:30px;" alt="Product" class="img-fluid rounded">
										</div>

										<div class="col-md-4">
											<h5 class="card-title" style="font-size:14px;"><?php echo $row['name']; ?></h5>
											<div class="sp_price" style="font-size:14px;">
												<span style="text-decoration:line-through; color:#999999;">
													₹<?php echo number_format($price); ?>
												</span>&nbsp;
												<span style="font-weight:bold;">
													₹<?php echo number_format($offerprice); ?>
												</span>
											</div>
										</div>

										<div class="col-md-3">
											<div class="input-group">
												<a href="javascript:void(0);"
													class="btn btn-outline-secondary btn-sm qty-decrease"
													data-product-id="<?php echo $row['id']; ?>"
													data-action="decrease">-</a>

												<input style="max-width:100px;height: 31px;border: 1px solid #000;background: #e5e5e5;"
													type="text"
													class="form-control form-control-sm text-center quantity-input"
													id="quantity-<?php echo $row['id']; ?>"
													value="<?php echo $qty; ?>"
													readonly>

												<a href="javascript:void(0);"
													class="btn btn-outline-secondary btn-sm qty-increase"
													data-product-id="<?php echo $row['id']; ?>"
													data-action="increase">+</a>
											</div>
										</div>

										<div class="col-md-3 text-end">
											<p class="fw-bold item-total" id="item-total-<?php echo $row['id']; ?>">
												₹<?php echo number_format($itemTotal, 2); ?>
											</p>
										</div>
									</div>
								<?php } ?>
							</div>

							<!-- CART TOTAL -->

						</div>


						<script>
							$(document).ready(function() {
								$(".qty-decrease, .qty-increase").on("click", function() {
									let productId = $(this).data("product-id");
									let action = $(this).data("action");

									$.ajax({
										url: "../update_cart.php",
										type: "POST",
										data: {
											pid: productId,
											vid: "<?php echo $fetch['id']; ?>",
											action: action
										},
										success: function(response) {
											let data = JSON.parse(response);

											$("#quantity-" + productId).val(data.qty);
											$("#item-total-" + productId).text("₹" + data.itemTotal);

											// ✅ update the cart total div
											$("#cart-total").html(
												'<span style="text-decoration:line-through; color:#999999;">₹' + data.cartPrice + '</span>&nbsp;' +
												'<strong>₹' + data.cartOffer + '</strong>'
											);
										}
									});
								});
							});
						</script>


						
							<div class="sp-add-to-cart-box mt-4">
								<div class="d-flex align-items-center gap-2">
									<form action="https://snackbot.in/cart/" method="post" name="cartform">
										<input type="hidden" name="atc" value="<?php echo $fetch['id']; ?>">
										<input type="submit" class="add-to-cart" name="customcartbtn" style="text-transform:uppercase;background: #201c35;" value="Add to Cart">
									</form>
								</div>
							</div>
						
					<?php
					} else {
					?>
						<hr style="opacity: 1;" />


						<div class="sp_price" style="overflow:hidden;">
							<div style="float:left; margin-right:15px;">
								<span style="text-decoration:line-through; font-weight:normal; color:#999999;font-size: inherit;">₹<?php echo number_format($price); ?></span>&nbsp;
								₹<?php echo number_format($offerprice); ?>
							</div>

							<?php
							// Calculate discount
							if ($price > $offerprice) {
								$discountAmount = $price - $offerprice;
								$discountPercentage = ($discountAmount / $price) * 100;
							?>
								<div class="discount-tag" style="background-color: red;color: white;padding: 3px;font-size: 12px;font-weight: bold;float:left;margin-top: 5px;">
									<?php echo round($discountPercentage, 0); ?>% OFF
								</div>
							<?php
							}
							?>

						</div>

						<div class="sp-add-to-cart-box mt-4">
							<div class="d-flex align-items-center gap-2">
								<form action="https://snackbot.in/cart/" method="post" name="cartform">
									<input type="hidden" name="atc" value="<?php echo $fetch['id']; ?>">
									<input type="number" id="quantityInput" name="qnty" class="quantity-box" value="1" min="1" required="">
									<input type="submit" class="add-to-cart" name="cartbtn" style="text-transform:uppercase;background: #201c35;" value="Add to Cart">
								</form>
							</div>
						</div>
					<?php
					}
					?>


					<?php
					if ($fetch['id'] == 6 || $fetch['id'] == 7) {
					} else {
					?>

						<div class="accordion" id="productDetailsAccordion" style="margin-top:15px;">
							<div class="accordion-item accordion-item-custom">
								<h2 class="accordion-header accordion-header-custom" id="headingOne">
									<button class="accordion-button accordion-button-custom" type="button">
										PRODUCT DETAILS
									</button>
								</h2>
								<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#productDetailsAccordion" style="margin-top: -25px;">
									<div class="accordion-body accordion-body-custom" style="padding:0;">
										<p><?php echo $fetch['ldescription']; ?></p>
										<div class="row">
											<div class="col-sm-12">
												<p><strong>Product & Ingredients:</strong><br>
													<?php echo $fetch['ingredients']; ?>
												</p>
											</div>


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


						</div>

					<?php
					}
					?>

					<div class="col-sm-12" style="margin-top: 15px;">
						<div class="sp-info-box">
							<p style="margin-bottom:0;"><strong style="font-weight:bold;">Allergen Advice:</strong></p> <?php echo $fetch['allergenadvice']; ?>
						</div>
						<p style="margin-bottom:0;"><strong style="font-weight:bold;">Important:</strong>
							<?php echo $fetch['importantnote']; ?></p>
						<hr>
						<p style="font-style: italic;font-size: 12px;font-weight: 600;letter-spacing: 0;">* Enlarged image on the front is only for representation purpose.
						</p>
					</div>


				</div>
			</div>
		</div>
		<style>
			.review-section {
				max-width: 800px;
				padding: 20px;
				border: 1px solid #ddd;
				background: #fff;
				margin: 30px auto;
				border-radius: 8px;
			}

			.review-summary {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				margin-bottom: 20px;
			}

			.avg-rating {
				flex: 1;
				text-align: center;
			}

			.avg-rating .stars {
				font-size: 22px;
				color: gold;
			}

			.rating-bars {
				flex: 2;
			}

			.bar {
				display: flex;
				align-items: center;
				margin: 5px 0;
				font-size: 14px;
			}

			.bar span {
				width: 40px;
			}

			.bar-bg {
				flex: 1;
				background: #eee;
				height: 10px;
				margin: 0 5px;
				border-radius: 5px;
				overflow: hidden;
			}

			.bar-fill {
				height: 100%;
				background: #00c39a;
			}

			.btn-custom {
				margin-top: 15px;
				padding: 10px 20px;
				background: #00c39a;
				color: white;
				border: none;
				cursor: pointer;
				border-radius: 5px;
			}

			.btn-custom:hover {
				background: #00a880;
			}

			/* Review Form */
			.review-form {
				display: none;
				max-width: 700px;
				margin: 20px auto 0;
				padding: 20px;
				border: 1px solid #ddd;
				border-radius: 8px;
				background: #fff;
			}

			.star {
				cursor: pointer;
			}

			.star i {
				color: #ccc;
			}

			.star i.fa-solid {
				color: gold;
			}

			.review-entry {
				border: 1px solid #ddd;
				border-radius: 6px;
				padding: 12px;
				margin-bottom: 15px;
				background: #fff;
			}

			.review-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.reviewer-name {
				font-weight: bold;
				color: #333;
			}

			.review-date {
				font-size: 13px;
				color: #888;
			}

			.review-text {
				margin: 10px 0;
				color: #444;
			}

			.review-actions {
				display: flex;
				gap: 15px;
				margin-top: 5px;
				font-size: 14px;
			}

			.review-actions span {
				cursor: pointer;
				display: flex;
				align-items: center;
				color: #666;
			}

			.review-actions span i {
				margin-right: 5px;
			}
		</style>

		<div class="container my-4 review-section">
			<h5>Customer Reviews</h5>

			<!-- Review Summary -->
			<?php
			// Assuming you're already connected to the database

			// Get the product ID from the URL
			$product_id = $fetch['id'];

			// Query the feedback table to get all reviews for the given product
			$query = "SELECT * FROM tbl_feedback WHERE proid = '$product_id'";
			$result = mysqli_query($conn, $query);

			// Initialize variables to count the number of reviews for each rating
			$rating_5 = 0;
			$rating_4 = 0;
			$rating_3 = 0;
			$rating_2 = 0;
			$rating_1 = 0;
			$total_reviews = 0;
			$average_rating = 0;

			// Check if there are any matching reviews
			if (mysqli_num_rows($result) > 0) {
				// Fetch reviews and count the ratings
				while ($row = mysqli_fetch_assoc($result)) {
					$rating = $row['rating'];

					// Increment the appropriate rating counter
					switch ($rating) {
						case 5:
							$rating_5++;
							break;
						case 4:
							$rating_4++;
							break;
						case 3:
							$rating_3++;
							break;
						case 2:
							$rating_2++;
							break;
						case 1:
							$rating_1++;
							break;
					}
					$total_reviews++;
				}

				// Calculate the average rating
				if ($total_reviews > 0) {
					$average_rating = (($rating_5 * 5) + ($rating_4 * 4) + ($rating_3 * 3) + ($rating_2 * 2) + ($rating_1 * 1)) / $total_reviews;
				}
			} else {
				// If no reviews exist, set the ratings and average to 0
				$rating_5 = 0;
				$rating_4 = 0;
				$rating_3 = 0;
				$rating_2 = 0;
				$rating_1 = 0;
				$total_reviews = 0;
				$average_rating = 0;
			}

			// Display the dynamic content
			?>
			<!--<div class="review-summary">
				<div class="avg-rating">
					<span class="stars">
						<?php for ($i = 1; $i <= 5; $i++): ?>
							<i class="fa fa-star <?php echo ($i <= floor($average_rating)) ? 'filled' : ''; ?>"></i>
						<?php endfor; ?>
					</span>
					<p><strong><?php echo number_format($average_rating, 2); ?> out of 5</strong></p>
					<p>Based on <?php echo $total_reviews; ?> reviews</p>
				</div>
				<div class="rating-bars">
					<div class="bar">
						<span>5 ★</span>
						<div class="bar-bg">
							<div class="bar-fill" style="width: <?php echo ($total_reviews > 0) ? ($rating_5 / $total_reviews) * 100 : 0; ?>%"></div>
						</div>
						<span><?php echo $rating_5; ?></span>
					</div>
					<div class="bar">
						<span>4 ★</span>
						<div class="bar-bg">
							<div class="bar-fill" style="width: <?php echo ($total_reviews > 0) ? ($rating_4 / $total_reviews) * 100 : 0; ?>%"></div>
						</div>
						<span><?php echo $rating_4; ?></span>
					</div>
					<div class="bar">
						<span>3 ★</span>
						<div class="bar-bg">
							<div class="bar-fill" style="width: <?php echo ($total_reviews > 0) ? ($rating_3 / $total_reviews) * 100 : 0; ?>%"></div>
						</div>
						<span><?php echo $rating_3; ?></span>
					</div>
					<div class="bar">
						<span>2 ★</span>
						<div class="bar-bg">
							<div class="bar-fill" style="width: <?php echo ($total_reviews > 0) ? ($rating_2 / $total_reviews) * 100 : 0; ?>%"></div>
						</div>
						<span><?php echo $rating_2; ?></span>
					</div>
					<div class="bar">
						<span>1 ★</span>
						<div class="bar-bg">
							<div class="bar-fill" style="width: <?php echo ($total_reviews > 0) ? ($rating_1 / $total_reviews) * 100 : 0; ?>%"></div>
						</div>
						<span><?php echo $rating_1; ?></span>
					</div>
				</div>
			</div>-->

			<!-- Display reviews -->
			<?php
			// Reset the result pointer and display the reviews
			mysqli_data_seek($result, 0);
			while ($row = mysqli_fetch_assoc($result)) {
			?>
				<div class="review-entry" style="display:none">
					<div class="review-header">
						<span class="reviewer-name"><?php echo $row['user']; ?></span>
						<span class="review-date"><?php echo date('d/m/Y', strtotime($row['datereview'])); ?></span>
					</div>
					<p class="review-text"><?php echo $row['remarks']; ?></p>
					<div class="review-actions">
						<!-- <span><i class="fa fa-thumbs-up"></i></span>
            <span><i class="fa fa-thumbs-down"></i></span> -->
					</div>
				</div>
			<?php
			}
			?>

			
			<!--<button class="btn-custom" id="toggle-review-btn">Write a review</button>

			
			<div id="review-form" class="review-form">
				<h5>Write a Review</h5>
				<form action="" method="post" enctype="multipart/form-data">
					
					<input type="hidden" name="proid" id="proid" value="<?php echo $fetch['id']; ?>">
					<div class="mb-3">
						<label>Your Rating</label><br>
						<input type="hidden" name="rating" id="rating" value="0">
						<span class="star" data-value="1"><i class="fa-regular fa-star fa-2x"></i></span>
						<span class="star" data-value="2"><i class="fa-regular fa-star fa-2x"></i></span>
						<span class="star" data-value="3"><i class="fa-regular fa-star fa-2x"></i></span>
						<span class="star" data-value="4"><i class="fa-regular fa-star fa-2x"></i></span>
						<span class="star" data-value="5"><i class="fa-regular fa-star fa-2x"></i></span>
					</div>

					
					<div class="mb-3">
						<label>Review Title</label>
						<input type="text" class="form-control" name="reviewtitle" placeholder="Enter Review Title" required>
					</div>

					
					<div class="mb-3">
						<label>Your Name</label>
						<input type="text" class="form-control" name="name" placeholder="Enter your name" required>
					</div>

					
					<div class="mb-3">
						<label>Your Email</label>
						<input type="email" class="form-control" name="email" placeholder="Enter your email" required>
					</div>

					
					<div class="mb-3">
						<label>Feedback / Remarks</label>
						<textarea class="form-control" name="remarks" rows="4" placeholder="Write your feedback..." required></textarea>
					</div>

					
					<div class="mb-3" style="margin-bottom: 1rem;">
						<label for="photo" style="font-weight: bold; font-size: 16px; display: block;">Upload Photo/Video</label>
						<input type="file" id="photo" name="photo" accept="image/*,video/*"
							style="padding: 8px; border-radius: 5px; border: 1px solid #ccc; width: 100%; font-size: 14px; display:block;">
						<small style="color: #6c757d; font-size: 12px; display: block; margin-top: 5px;">
							You can upload an image or a video.
						</small>
					</div>

					
					<button type="submit" class="btn-custom" name="feedbackbtn">Submit Review</button>
				</form>
			</div>-->
			
			  <!--New review section-->
  <!-- Product Review Carousel -->
<div id="reviewCarousel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="d-flex flex-column align-items-center">
        <p class="fw-bold">Saurav Banthia</p>
        <p class="rating">⭐⭐⭐⭐⭐</p>
        <p class="review-title">Amazing Product!</p>
        <p class="review-text">I loved the product. It’s exactly as described and works perfectly!</p>
      </div>
    </div>
    <div class="carousel-item">
      <div class="d-flex flex-column align-items-center">
        <p class="fw-bold">Avinash Dewan</p>
        <p class="rating">⭐⭐⭐⭐</p>
        <p class="review-title">Good Quality</p>
        <p class="review-text">Good quality but the delivery took a bit long. Overall, I'm satisfied.</p>
      </div>
    </div>
    <!-- Add more carousel items for other reviews -->
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#reviewCarousel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#reviewCarousel" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

<!-- Write a Review Button -->
<button class="btn btn-primary mt-3" id="writeReviewBtn">
  Write a Review
</button>

<!-- Review Form (Initially Hidden) -->
<div id="reviewForm" class="mt-4" style="display: none;">
  <h5>Write a Review</h5>
  <form>
    <!-- Star Rating -->
    <div class="mb-3">
      <label for="rating" class="form-label">Your Rating</label>
      <div class="star-rating" id="starRating">
        <div class="star" data-value="1">&#9733;</div>
        <div class="star" data-value="2">&#9733;</div>
        <div class="star" data-value="3">&#9733;</div>
        <div class="star" data-value="4">&#9733;</div>
        <div class="star" data-value="5">&#9733;</div>
      </div>
      <input type="hidden" id="ratingValue" name="rating" value="0">
    </div>
    
    <!-- Review Title -->
    <div class="mb-3">
      <label for="reviewTitle" class="form-label">Review Title</label>
      <input type="text" class="form-control" id="reviewTitle" placeholder="Enter Review Title" required>
    </div>
    
    <!-- Your Name -->
    <div class="mb-3">
      <label for="yourName" class="form-label">Your Name</label>
      <input type="text" class="form-control" id="yourName" placeholder="Enter your name" required>
    </div>

    <!-- Your Email -->
    <div class="mb-3">
      <label for="yourEmail" class="form-label">Your Email</label>
      <input type="email" class="form-control" id="yourEmail" placeholder="Enter your email" required>
    </div>

    <!-- Feedback/Remarks -->
    <div class="mb-3">
      <label for="feedback" class="form-label">Feedback / Remarks</label>
      <textarea class="form-control" id="feedback" rows="4" placeholder="Write your feedback..." required></textarea>
    </div>

    <!-- Upload Photo/Video -->
    <div class="mb-3">
      <label for="fileUpload" class="form-label">Upload Photo/Video</label>
      <input class="form-control" type="file" id="fileUpload">
    </div>

    <!-- Submit Button -->
    <button type="submit" class="btn btn-primary sp_submit">Submit Review</button>
  </form>
</div>
 

<script>
  // Get the Write a Review button and review form
  const writeReviewBtn = document.getElementById('writeReviewBtn');
  const reviewForm = document.getElementById('reviewForm');

  // Add an event listener to the Write a Review button to toggle the form visibility
  writeReviewBtn.addEventListener('click', () => {
    if (reviewForm.style.display === 'none') {
      reviewForm.style.display = 'block';
    } else {
      reviewForm.style.display = 'none';
    }
  });

  // Star Rating functionality
  const stars = document.querySelectorAll('.star');
  const ratingValue = document.getElementById('ratingValue');

  stars.forEach(star => {
    star.addEventListener('click', function() {
      const rating = this.getAttribute('data-value');
      setRating(rating);
    });

    star.addEventListener('mouseover', function() {
      const rating = this.getAttribute('data-value');
      setHover(rating);
    });

    star.addEventListener('mouseout', function() {
      clearHover();
    });
  });

  function setRating(rating) {
    ratingValue.value = rating; // Update hidden input with the selected rating
    stars.forEach(star => {
      if (star.getAttribute('data-value') <= rating) {
        star.classList.add('filled'); // Fill the star
      } else {
        star.classList.remove('filled'); // Empty the star
      }
    });
  }

  function setHover(rating) {
    stars.forEach(star => {
      if (star.getAttribute('data-value') <= rating) {
        star.classList.add('filled'); // Show filled stars on hover
      } else {
        star.classList.remove('filled');
      }
    });
  }

  function clearHover() {
    stars.forEach(star => {
      if (star.getAttribute('data-value') <= ratingValue.value) {
        star.classList.add('filled'); // Keep filled stars after hover ends
      } else {
        star.classList.remove('filled');
      }
    });
  }
</script>

<!-- CSS for Star Rating -->
<style>
  /* Style for the star rating */
  .star-rating {
    display: flex;
    gap: 5px;
  }

  .star {
    font-size: 2rem;
    cursor: pointer;
    color: #ccc; /* Empty star color */
  }

  .star.filled {
    color: #ffcc00; /* Filled star color (yellow) */
  }

  .star:hover {
    color: #ffcc00; /* Color when hovering over a star */
  }

  /* Additional styling for the review form */
  #reviewForm {
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 8px;
    background-color: #f9f9f9;
    max-width: 600px;
    margin: 20px auto;
  }

  #reviewForm h5 {
    margin-bottom: 15px;
    font-size: 1.25rem;
  }

  .form-label {
    font-weight: bold;
  }

  .form-control {
    margin-bottom: 15px;
  }

  .btn {
    width: 100%;
  }

  .carousel-item {
    padding: 10px;
  }

  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    background-color: #000;
  }
  
  #writeReviewBtn, .sp_submit{
	  background: #00c39a;
    width: max-content;
    margin: 0 auto;
    display: table;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 500;
  }
</style>

  <!--./New review section-->
		</div>

		<script>
			// Toggle Review Form
			const toggleBtn = document.getElementById('toggle-review-btn');
			const reviewForm = document.getElementById('review-form');

			toggleBtn.addEventListener('click', function() {
				if (reviewForm.style.display === 'block') {
					reviewForm.style.display = 'none';
					toggleBtn.textContent = 'Write a review';
				} else {
					reviewForm.style.display = 'block';
					toggleBtn.textContent = 'Cancel review';
				}
			});

			// Star Rating
			const stars = document.querySelectorAll('.star');
			const ratingInput = document.getElementById('rating');

			stars.forEach(star => {
				star.addEventListener('click', () => {
					let val = star.getAttribute('data-value');
					ratingInput.value = val;

					stars.forEach(s => {
						let i = s.querySelector('i');
						i.classList.remove('fa-solid');
						i.classList.add('fa-regular');
					});

					for (let i = 0; i < val; i++) {
						let icon = stars[i].querySelector('i');
						icon.classList.remove('fa-regular');
						icon.classList.add('fa-solid');
					}
				});
			});
		</script>

		<?php include "../footer.php" ?>


</body>

</html>
F1l3 Manager
