<?php 
include('includes/connectdb.php'); 
 
if(isset($_GET['pid'])){
	$pid = $_GET['pid'];
}else{
	header('location:index');
}

$sql = mysqli_query($con, "SELECT * FROM product WHERE product_id = '$pid' ");
$row = mysqli_fetch_array($sql);
$old_price = $row['old_price'];
$price = $row['price'];
$section = $row['section'];
$product_info = $row['product_info'];
$main_image = $row['main_image_url'];
$images = explode(',', $row['other_images_url']);

include('includes/head.php');

?>
<body>
    <div class="page-wrapper">
        <?php include('includes/header.php') ?>

        <main class="main">
            <nav aria-label="breadcrumb" class="breadcrumb-nav">
                <div class="container">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="index"><i class="icon-home"></i></a></li>
                        <li class="breadcrumb-item"><a href="#">Shop</a></li>
                        <li class="breadcrumb-item active" aria-current="page"><?php echo $row['category_name'] ?></li>
                    </ol>
                </div><!-- End .container -->
            </nav>
            <div class="container">
                <div class="row">
                    <div class="col-lg-9">
                        <div class="product-single-container product-single-default">
                            <div class="row">
                                <div class="col-lg-7 col-md-6 product-single-gallery">
                                    <div class="product-slider-container product-item">
                                        <div class="product-single-carousel owl-carousel owl-theme">
                                            <?php foreach($images as $image): ?>
                                            <div class="product-item">
											    <img class="product-single-image" src="uploads/<?php echo $image ?>" data-zoom-image="uploads/<?php echo $section . '/' . $image ?>"/>
                                            </div>
											<?php endforeach;  ?>
                                        </div>
                                        <!-- End .product-single-carousel -->
                                        <span class="prod-full-screen">
                                            <i class="icon-plus"></i>
                                        </span>
                                    </div>
                                    <div class="prod-thumbnail row owl-dots" id='carousel-custom-dots'>
                                        <?php foreach($images as $image): ?>
										<div class="col-3 owl-dot">
										    <img src="uploads/<?php echo $image ?>"/>
										</div>
										<?php endforeach;  ?>
                                    </div>
                                </div><!-- End .col-lg-7 -->

                                <div class="col-lg-5 col-md-6">
                                    <div class="product-single-details">
                                        <h1 class="product-title"><?php echo $row['product_name'] ?></h1>

                                        <div class="price-box">
                                            <span class="old-price"></span>
                                            <span class="product-price"><?php echo '$' . number_format($price) ?></span>
                                        </div><!-- End .price-box -->
										
                                        <div class="product-desc">
                                            <p><?php echo $row['product_info'] ?></p>
                                        </div><!-- End .product-desc -->

                                        <div class="product-action product-all-icons">
                                            <div class="product-single-qty">
                                                <input class="horizontal-quantity form-control" id="qty" type="text">
                                            </div><!-- End .product-single-qty -->

                                            <a onclick="addToCart(<?php echo $row['section'] ?>,<?php echo $row['product_id'] ?>,<?php echo $row['price']?>,'<?php echo $row['product_name'] ?>','<?php echo $images[0] ?>')" class="paction add-cart" title="Add to Cart">
                                                <span>Add to Cart</span>
                                            </a>
                                        </div><!-- End .product-action -->

                                    </div><!-- End .product-single-details -->
                                </div><!-- End .col-lg-5 -->
                            </div><!-- End .row -->
                        </div><!-- End .product-single-container -->

                        <div class="product-single-tabs">
                            <ul class="nav nav-tabs" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" id="product-tab-desc" data-toggle="tab" href="#product-desc-content" role="tab" aria-controls="product-desc-content" aria-selected="true">Description</a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane fade show active" id="product-desc-content" role="tabpanel" aria-labelledby="product-tab-desc">
                                    <div class="product-desc-content"><?php echo $product_info ?></div><!-- End .product-desc-content -->
                                </div><!-- End .tab-pane -->

                        </div><!-- End .tab-content -->
                        </div><!-- End .product-single-tabs -->
                    </div><!-- End .col-lg-9 -->

                    <div class="sidebar-overlay"></div>
                    <div class="sidebar-toggle"><i class="icon-sliders"></i></div>
                    <aside class="sidebar-product col-lg-3 padding-left-lg mobile-sidebar">
                        <div class="sidebar-wrapper">
                            <div class="widget widget-brand">
                                <a href="#">
                                    <img src="assets/images/product-brand.png" alt="brand name">
                                </a>
                            </div><!-- End .widget -->

                            <div class="widget widget-info">
                                <ul>
                                    <li>
                                        <i class="icon-online-support"></i>
                                        <h4>ONLINE<br>SUPPORT </h4>
                                    </li>
                                </ul>
                            </div><!-- End .widget -->

                            <div class="widget widget-banner">
                                <div class="banner banner-image">
                                    <a href="#">
                                        <img src="assets/images/banners/banner-sidebar.jpg" alt="Banner Desc">
                                    </a>
                                </div><!-- End .banner -->
                            </div><!-- End .widget -->

                            
                        </div>
                    </aside><!-- End .col-md-3 -->
                </div><!-- End .row -->
            </div><!-- End .container -->

            
        </main><!-- End .main -->

        <?php include('includes/footer.php') ?>
    </div><!-- End .page-wrapper -->

    <div class="mobile-menu-overlay"></div><!-- End .mobil-menu-overlay -->

    <?php include('includes/mobile-menu.php') ?>

    <a id="scroll-top" href="#top" title="Top" role="button"><i class="icon-angle-up"></i></a>

    <!-- Plugins JS File -->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap.bundle.min.js"></script>
    <script src="assets/js/plugins.min.js"></script>

    <!-- Main JS File -->
    <script src="assets/js/main.min.js"></script>

</body>

</html>
<script>
function addToCart(pid, price, product_name, product_image){
	
	var query = 'replace';
	var quantity = $('#qty').val();
	var action = 'replace';
	
	$.ajax({
		type: "POST",
		url: "process.php",
		data: {
			query_cart : 1,
			query : query,
			section : section,
			product_id : pid,
			product_name : product_name,
			product_image : product_image,
			price: price,
			quantity : quantity,
			action : action
		},
		success: function(data){
			    location.reload(true);
		}
	});
}
</script>