<?php $__env->startSection('styles'); ?>

<style>

.card {
    margin: auto;
    padding: 20px;
    border-radius: 15px;

    margin-bottom: 50px
}

fieldset.active {
    display: block !important
}

fieldset {
    display: none
}

.pic0 {
    width: 400px;
    height: 500px;
    margin-left: 85px;
    margin-right: auto;
    display: block
}

.product-pic {
    padding-left: auto;
    padding-right: auto;
    width: 100%
}

.thumbnails {
    position: absolute
}

.fit-image {
    width: 100%;
    object-fit: cover
}

.tb {
    width: 62px;
    height: 62px;
    border: 1px solid grey;
    margin: 2px;
    opacity: 0.4;
    cursor: pointer
}

.tb-active {
    opacity: 1
}

.thumbnail-img {
    width: 60px;
    height: 60px
}

@media  screen and (max-width: 768px) {
    .pic0 {
        width: 250px;
        height: 350px
    }
}
</style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
<?php echo $__env->make('includes.smallHeader', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
	<!-- BREADCRUMB -->
	<div id="breadcrumb">
		<div class="container">
			<ul class="breadcrumb">
				<li><a href="#">Home</a></li>
				<li><a href="#"><?php echo e($product->menu->name); ?> / </a></li>

				<li class="active"><?php echo e($product->name); ?></li>
			</ul>
		</div>
	</div>
	<!-- /BREADCRUMB -->

	<!-- section -->
	<div class="section">
		<!-- container -->
		<div class="container">
			<!-- row -->
			<div class="row">
				<!--  Product Details -->
				<div class="col-md-6">
				<div class="container-fluid px-sm-1   mx-auto">
			 <div class="row justify-content-center">
					 <div class="d-flex">
							 <div class="card">
									 <div class="d-flex flex-column thumbnails">
											 <div id="f1" class="tb tb-active"> <img class="thumbnail-img fit-image" src="<?php echo e(asset('storage/products/'.$product->image1)); ?>"> </div>
										<?php if($product->image2 != null): ?>	 <div id="f2" class="tb"> <img class="thumbnail-img fit-image" src="<?php echo e(asset('storage/products/'.$product->image2)); ?>"> </div><?php endif; ?>
								<?php if($product->image3 != null): ?>			 <div id="f3" class="tb"> <img class="thumbnail-img fit-image" src="<?php echo e(asset('storage/products/'.$product->image3)); ?>"> </div> <?php endif; ?>
								<?php if($product->image4 != null): ?>			 <div id="f4" class="tb"> <img class="thumbnail-img fit-image" src="<?php echo e(asset('storage/products/'.$product->image4)); ?>"> </div> <?php endif; ?>
									 </div>
									 <fieldset id="f11" class="active">
											 <div class="product-pic"> <img class="pic0" src="<?php echo e(asset('storage/products/'.$product->image1)); ?>"> </div>
									 </fieldset>
									 <fieldset id="f21" class="">
											 <div class="product-pic"> <img class="pic0" src="<?php echo e(asset('storage/products/'.$product->image2)); ?>"> </div>
									 </fieldset>
									 <fieldset id="f31" class="">
											 <div class="product-pic"> <img class="pic0" src="<?php echo e(asset('storage/products/'.$product->image3)); ?>"> </div>
									 </fieldset>
									 <fieldset id="f41" class="">
											 <div class="product-pic"> <img class="pic0" src="<?php echo e(asset('storage/products/'.$product->image4)); ?>"> </div>
									 </fieldset>
							 </div>
					 </div>
			 </div>
			</div>

			</div>


				<div class="col-md-6">

        <h2 class="product-name"><?php echo e($product->name); ?></h2> <?php if($product->sale != 0): ?>  <span class="new">SALE <?php echo e($product->sale); ?> %</span> <?php endif; ?>
				<h3 class="product-price"><?php if($product->sale != 0): ?> <s> <?php echo e($product->actual_price); ?> PKR</s>  <?php endif; ?> <?php echo e($product->price); ?> PKR
        </h3>
<hr style="width:100%;margin:10px;">
				<div class="product product-details clearfix">

					<div class="col-md-12">
						<div class="product-body">


							<p><strong>Availability:</strong> <?php if($product->stock == 1): ?> Available <?php else: ?> Out Of Stock <?php endif; ?></p>
							<p><strong>Vendor:</strong> <?php echo e($product->brand->name); ?></p>
							<p><?php echo e($product->details); ?></p>

              <hr style="width:100%;margin:10px;">
							<!-- <div class="product-options">
								<ul class="size-option">
									<li><span class="text-uppercase"><u>Available Sizes</u>:</span></li>
									<?php $__currentLoopData = $product->sizes; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $size): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
									<li class=""><input type="radio" name="size" value="<?php echo e($size->name); ?>" checked/>  <?php echo e($size->name); ?></li>
									<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
								</ul>
								<ul class="color-option">
									<li><span class="text-uppercase"><u>Available Colors</u>:</span></li>
									<?php $__currentLoopData = $product->colors; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $color): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
									<li class=""><input type="radio" name="color" value="<?php echo e($color->name); ?>" checked/>  <?php echo e($color->name); ?></a></li>
									<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
								</ul>
							</div> -->
						</div>
					</div>

          <div class="col-md-12">


            <!-- <div class="qty-input">
              <span class="text-uppercase"><u>QTY</u>: </span><br>
              <input class="input" type="number" class="form-control">
            </div> -->

          </div>

          <div class="col-md-12" style="margin-top:10px;">
            <a data-toggle="modal" data-target="#exampleModal" style="color:white" class="btn btn-success add-to-cart"><i class="fa fa-shopping-cart"></i> Book Now</a>
          </div>
<hr style="width:100%;margin:10px;">

					<div class="col-md-12">
<li><span class="text-uppercase"><u>Description</u>:</span></li>
									<p><?php echo e($product->description); ?>.</p>

					</div>




				</div>
</div>


				<!-- /Product Details -->
			</div>
			<!-- /row -->
		</div>
		<!-- /container -->
	</div>
	<!-- /section -->


    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document" >
        <div class="modal-content" style="padding:50px">
          <div class="modal-header" style="    text-align: center;
    align-items: center;">
            <h5 class="modal-title" id="exampleModalLabel" style="width: 100%;">Book Product</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body" >
            <form method="post" action="<?php echo e(route('booknow')); ?>">
            <div class="row">
              <div class="col-md-12">
                <input type="hidden" name="pname" value="<?php echo e($product->name); ?>"/>
                <label>Name</label>
                <input type="text" name="name" class="form-control" required></input>
              </div>

              <div class="col-md-12">
                <label>Contact</label>
                <input type="text" name="contact" class="form-control" required></input>
              </div>

              <div class="col-md-12">
                <label>Email</label>
                <input type="email" name="email" class="form-control" required></input>
              </div>

              <div class="col-md-12">
                <label>Message</label>
                <textarea type="text" name="message" class="form-control" required></textarea>
              </div>

            </div>

          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Book Now</button>
          </div>
          <?php echo e(csrf_field()); ?>

          </form>
        </div>
      </div>
    </div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>

<script>
$(document).ready(function(){

$(".tb").hover(function(){

$(".tb").removeClass("tb-active");
$(this).addClass("tb-active");

current_fs = $(".active");

next_fs = $(this).attr('id');
next_fs = "#" + next_fs + "1";

$("fieldset").removeClass("active");
$(next_fs).addClass("active");

current_fs.animate({}, {
step: function() {
current_fs.css({
'display': 'none',
'position': 'relative'
});
next_fs.css({
'display': 'block'
});
}
});
});

});
</script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.main', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\xampp\htdocs\freelance\hemp\resources\views/web/itemDetail.blade.php ENDPATH**/ ?>