<!DOCTYPE html><html lang="en">
<head>
	<?php 
		include "includes/operations.php";
		include "includes/headerlinks.php";
		include "functions.php";
		
			
	$product_id = 0;
	if(isset($_GET['id'])){
		$product_id = intval($_GET['id']);
	}
	$result = mysqli_query($con, "SELECT * FROM product WHERE product_id=$product_id");
	$total_items = mysqli_num_rows($result);
	
	$prod_row = mysqli_fetch_array($result);
	
	
		
	?>
	
	<style>
		.cus-hr {
			border-top-width:0px !important;border-bottom:1px solid #e4e4e4 !important;
		}
		.fa-star {
			color:#ffc107 !important;
		}
		.reviews__comment--content {
			width:100% !important;
		}
		.desk-div {
			display:none;
		}
		@media (max-width:700px){
			.cus-mob {
				display:none;
			}
			.desk-div {
				display:block;
			}
		}
	</style>
	
</head>

<body>

    
		
	<?php include "includes/top_header.php";?>
	<?php include "includes/navigation.php";?>
	<?php include "includes/mobile_navigation.php";?>
	<?php include "includes/mobile_sticky_menus.php";?>
	<?php include "includes/cart_window.php";?>
	<?php include "includes/search.php";?>


    <main class="main__content_wrapper">
        <!-- Start slider section -->
        
		<section class="breadcrumb__section breadcrumb__bg">
            <div class="container">
                <div class="row row-cols-1">
                    <div class="col">
                        <div class="breadcrumb__content">
                            <h1 class="breadcrumb__content--title text-white mb-10">Product Details</h1>
                            <ul class="breadcrumb__content--menu d-flex">
                                <li class="breadcrumb__content--menu__items"><a class="text-white" href="index.php">Home</a></li>
                                <li class="breadcrumb__content--menu__items"><span class="text-white">Product Details</span></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
		
		<section class="product__details--section section--padding">
            <div class="container">
                <div class="row row-cols-lg-2 row-cols-md-2">
					<center>
                    <div class="col">
                        <div class="product__details--media">
                            <div class="product__media--preview swiper swiper-initialized swiper-horizontal swiper-pointer-events">
                                <div class="swiper-wrapper" id="swiper-wrapper-d5026e65a69aec106" aria-live="polite" style="transform: translate3d(-580px, 0px, 0px); transition-duration: 0ms;">
                                    <div class="swiper-slide swiper-slide-active" data-swiper-slide-index="0" role="group" aria-label="1 / 6" style="width: 570px; margin-right: 10px;">
                                        <div class="product__media--preview__items">
                                            <a class="product__media--preview__items--link glightbox main-image-popup" data-gallery="product-media-preview" href="images/product_images/<?php echo $prod_row['product_image'];?>"><img class="product__media--preview__items--img" src="images/product_images/<?php echo $prod_row['product_image'];?>" alt="product-media-img"></a>
                                            <div class="product__media--view__icon">
                                                <a class="product__media--view__icon--link glightbox" href="images/product_images/<?php echo $prod_row['product_image'];?>" data-gallery="product-media-preview">
                                                    <svg class="product__media--view__icon--svg" xmlns="http://www.w3.org/2000/svg" width="22.51" height="22.443" viewBox="0 0 512 512"><path d="M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"></path><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M338.29 338.29L448 448"></path></svg>
                                                    <span class="visually-hidden">Media Gallery</span>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
								</div>
							</div>
                        </div>
                    </div> 
					</center>
                    <div class="col">
                        <div class="product__details--info">
                            <form action="#">
                                <h2 class="product__details--info__title mb-15"><?php echo $prod_row['product_title'];?></h2>
                                <div class="product__details--info__price mb-10">
                                    <span class="current__price">$<?php echo number_format($prod_row['product_price'],2);?></span>
                                </div>
                                <p class="product__details--info__desc mb-20"><?php echo $prod_row['product_description'];?></p>
                                <div class="product__variant mb-15">
                                    <div class="product__variant--list quantity d-flex align-items-center mb-20">
                                        <div class="quantity__box">
                                            <button type="button" class="quantity__value quickview__value--quantity decrease" aria-label="quantity value" value="Decrease Value">-</button>
                                            <label>
                                                <input type="number" class="quantity__number quickview__value--number" value="1">
                                            </label>
                                            <button type="button" class="quantity__value quickview__value--quantity increase" aria-label="quantity value" value="Increase Value">+</button>
                                        </div>
										<a class="primary__btn quickview__cart--btn" id="btn_<?php echo $prod_row['product_id'];?>" onclick="add_cart(<?php echo $prod_row['product_id']; ?>,1,<?php echo $prod_row['product_id'];?>)" href="javascript:void(0)" style="margin-left:0px !important">
											 <svg class="product__list--action__cart--btn__icon" xmlns="http://www.w3.org/2000/svg" width="16.897" height="17.565" viewBox="0 0 18.897 21.565">
											  <path
											   d="M16.84,8.082V6.091a4.725,4.725,0,1,0-9.449,0v4.725a.675.675,0,0,0,1.35,0V9.432h5.4V8.082h-5.4V6.091a3.375,3.375,0,0,1,6.75,0v4.691a.675.675,0,1,0,1.35,0V9.433h3.374V21.581H4.017V9.432H6.041V8.082H2.667V21.641a1.289,1.289,0,0,0,1.289,1.29h16.32a1.289,1.289,0,0,0,1.289-1.29V8.082Z"
											   transform="translate(-2.667 -1.366)"
											   fill="currentColor"
											  ></path>
											 </svg>
											 <span class="product__list--action__cart--text cart_btn" > Add To Cart</span>
										</a>
										
                                    </div>
                                </div>
                                <div class="guarantee__safe--checkout">
                                    <h5 class="guarantee__safe--checkout__title">Guaranteed Safe Checkout</h5>
                                    <img class="guarantee__safe--checkout__img" src="images/safe-checkout.webp" alt="Payment Image">
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>
		
		<section class="product__details--tab__section section--padding">
			<div class="container">
				<div class="product__details--tab__inner border-radius-10">
					<div class="tab_content">
						<div id="reviews" class="tab_pane active show">
							<div class="product__reviews">
								<div class="product__reviews--header">
									<h3 class="product__reviews--header__title mb-20">
										Customer Reviews (<?php echo mysqli_num_rows(mysqli_query($con, "SELECT * FROM review WHERE product_id=$product_id"))?>)
									</h3>
									<div class="reviews__ratting d-flex align-items-center cus-mob">
										
										<?php
											$review_res = mysqli_query($con, "SELECT * FROM review WHERE product_id=$product_id LIMIT 5");
											if (mysqli_num_rows($review_res)>0) {
												$overall_rev_res = mysqli_query($con, "SELECT AVG(review_stars) AS overall_stars FROM review WHERE product_id=$product_id");
												$overall_rev_row = mysqli_fetch_array($overall_rev_res);
												$overall_stars = $overall_rev_row['overall_stars'];
												?>
												<h3 style="font-size:30px !important">
													<b><?php echo number_format($overall_stars, 1, '.', '') ?> <span style="font-size:12px">out of</span> 5.0</b>
												</h3>
												&nbsp;&nbsp;&nbsp;<h3><b><?php echo show_stars($overall_stars) ?></b></h3><hr class="cus-hr">
												<?php
											} else {
												?>
											<?php
											}
										?>
									</div>
									<a class="actions__newreviews--btn primary__btn" href="#writereview">Write A Review</a>
								</div>
								<div class="reviews__comment--area" style="padding:0px !important">
									<div class="reviews__comment--list d-flex">
										<div class="reviews__comment--content" style="padding-left:0px !important;">
											<?php
												$review_res = mysqli_query($con, "SELECT * FROM review WHERE product_id=$product_id LIMIT 5");
												if (mysqli_num_rows($review_res)>0) {
													$overall_rev_res = mysqli_query($con, "SELECT AVG(review_stars) AS overall_stars FROM review WHERE product_id=$product_id");
													$overall_rev_row = mysqli_fetch_array($overall_rev_res);
													$overall_stars = $overall_rev_row['overall_stars'];
													?>
													<div class="desk-div">
													<h3 style="font-size:30px !important">
														<b><?php echo number_format($overall_stars, 1, '.', '') ?> <span style="font-size:12px">out of</span> 5.0</b>
													</h3>
													<h3><b><?php echo show_stars($overall_stars) ?></b></h3><hr class="cus-hr">
													</div>
													<?php
												} else {
												?>
												<h4 class="reviews__comment--content__title">
													This product has no reviews.
												</h4>
												<?php
													
												}
											?>
											<?php $reviews_limit = 20; ?>
											<input type="hidden" id="reviews_offset" value="0">
											<div id="show_reviews_loading">
											
											</div>
											<div id="show_reviews_here">
											
											</div>
										</div>
									</div>
								</div>
								<div id="writereview" class="reviews__comment--reply__area">
									<form method="POST">
										<h3 class="reviews__comment--reply__title mb-15">Add a review </h3>
										<div class="reviews__ratting d-flex align-items-center mb-20">
											<input type="hidden" name="product_id" value="<?=$product_id?>">
											<input type="hidden" id="review_stars" name="review_stars" value="5">
											<div class="client-reating">
												<span class="raiting-list">
													<i class="fa fa-star" id="fa-star-1" style="font-size:24px !important;color:;cursor:pointer" onclick="change_stars(1)"></i>
													<i class="fa fa-star-o" id="fa-star-2" style="font-size:24px !important;color:;cursor:pointer" onclick="change_stars(2)"></i>
													<i class="fa fa-star-o" id="fa-star-3" style="font-size:24px !important;color:;cursor:pointer" onclick="change_stars(3)"></i>
													<i class="fa fa-star-o" id="fa-star-4" style="font-size:24px !important;color:;cursor:pointer" onclick="change_stars(4)"></i>
													<i class="fa fa-star-o" id="fa-star-5" style="font-size:24px !important;color:;cursor:pointer" onclick="change_stars(5)"></i>
												</span>
											</div>
										</div>
										<div class="row">
											<div class="col-lg-6 col-md-6 mb-15">
												<label>
													<input class="reviews__comment--reply__input" placeholder="Your Name...." name="review_name" type="text" required>
												</label>
											</div>  
											<div class="col-lg-6 col-md-6 mb-15">
												<label>
												<input class="reviews__comment--reply__input" placeholder="Your Email...." name="review_title" type="email" required>
												</label>
											</div> 
											<div class="col-12 mb-10">
												<textarea class="reviews__comment--reply__textarea" name="review_text" placeholder="Your Comments...." required></textarea>
											</div>
										</div>
										<button class="text-white primary__btn" data-hover="Submit" name="submit_review" type="submit">SUBMIT</button>
									</form>   
								</div> 
							</div>    
						</div>
					</div>
				</div>
			</div>
		</section>
		
    </main>

    <!-- Start footer section -->
    <?php include "includes/footer.php";?>
    <!-- End footer section -->

    <!-- Quickview Wrapper -->
    <div class="modal" id="modal1" data-animation="slideInUp">
        <div class="modal-dialog quickview__main--wrapper">
           <header class="modal-header quickview__header">
                <button class="close-modal quickview__close--btn" aria-label="close modal" data-close="">✕ </button>
            </header>
           <div class="quickview__inner">
                <div class="row row-cols-lg-2 row-cols-md-2">
                    <div class="col">
                        <div class="product__details--media">
                            <div class="product__media--preview  swiper">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <div class="product__media--preview__items">
                                            <a class="product__media--preview__items--link glightbox" data-gallery="product-media-preview" href="images/product_images/<?php echo $prod_row['product_image'];?>"><img class="product__media--preview__items--img" src="images/product_images/<?php echo $prod_row['product_image'];?>" alt="product-media-img"></a>
                                            <div class="product__media--view__icon">
                                                <a class="product__media--view__icon--link glightbox" href="images/product_images/<?php echo $prod_row['product_image'];?>" data-gallery="product-media-preview">
                                                    <svg class="product__media--view__icon--svg" xmlns="http://www.w3.org/2000/svg" width="22.51" height="22.443" viewBox="0 0 512 512"><path d="M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"></path><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M338.29 338.29L448 448"></path></svg>
                                                    <span class="visually-hidden">Media Gallery</span>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="product__media--nav swiper">
                                <div class="swiper__nav--btn swiper-button-next"></div>
                                <div class="swiper__nav--btn swiper-button-prev"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="quickview__info">
                            <form action="#">
                                <h2 class="product__details--info__title mb-15">Oversize Cotton Dress</h2>
                                <div class="product__details--info__price mb-12">
                                    <span class="current__price">$58.00</span>
                                </div>
                                <p class="product__details--info__desc mb-15">Lorem ipsum dolor sit amet, consectetur adipisicing elit is. Deserunt totam dolores ea numquam labore! Illum magnam totam tenetur fuga quo dolor.</p>
                                <div class="product__variant">
                                    <div class="quickview__variant--list quantity d-flex align-items-center mb-15">
                                        <div class="quantity__box">
                                            <button type="button" class="quantity__value quickview__value--quantity decrease" aria-label="quantity value" value="Decrease Value">-</button>
                                            <label>
                                                <input type="number" class="quantity__number quickview__value--number" value="1">
                                            </label>
                                            <button type="button" class="quantity__value quickview__value--quantity increase" aria-label="quantity value" value="Increase Value">+</button>
                                        </div>
                                        <button class="primary__btn quickview__cart--btn" type="submit">Add To Cart</button>  
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Quickview Wrapper End -->

	<?php include "includes/footerlinks.php";?>
	<?php include "includes/cart_functions.php";?>
	<script>
		function change_stars(stars) {
			for (var i=1;i<=stars;i++) {
				$('#fa-star-'+i).attr('class', 'fa fa-star');
			}
			for (var i=stars+1;i<=5;i++) {
				$('#fa-star-'+i).attr('class', 'fa fa-star-o');
			}
			$('#review_stars').val(stars);
		}
		get_reviews();
		function get_reviews() {
			$('#show_reviews_loading').html('<br><h5><i class="fa fa-spinner fa-spin"></i></h5>');
			$.ajax({
				url : 'ajax.php',
				type : 'post',
				data : {
					'get_reviews' : 1,
					'reviews_limit' : <?php echo $reviews_limit ?>,
					'product_id' : <?php echo $product_id ?>,
					'reviews_offset' : $('#reviews_offset').val()
				},
				success : function (res) {
					$('#show_reviews_loading').html('');
					$('#show_reviews_here').append(res);
					$('#reviews_offset').val(parseInt($('#reviews_offset').val())+parseInt(<?php echo $reviews_limit ?>));
				}
			});
		}
	</script>
</body></html>