@extends('layouts.main')

@section('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>
@endsection

@section('content')
@include('includes.smallHeader')
	<!-- BREADCRUMB -->
	<div id="breadcrumb">
		<div class="container">
			<ul class="breadcrumb">
				<li><a href="#">Home</a></li>
				<li><a href="#">{{$product->menu->name}} / </a></li>
				<li><a href="#">{{$product->submenu->name}} / </a></li>
				<li class="active">{{$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="{{ asset('storage/products/'.$product->image1)}}"> </div>
											 <div id="f2" class="tb"> <img class="thumbnail-img fit-image" src="{{ asset('storage/products/'.$product->image2)}}"> </div>
											 <div id="f3" class="tb"> <img class="thumbnail-img fit-image" src="{{ asset('storage/products/'.$product->image3)}}"> </div>
											 <div id="f4" class="tb"> <img class="thumbnail-img fit-image" src="{{ asset('storage/products/'.$product->image4)}}"> </div>
									 </div>
									 <fieldset id="f11" class="active">
											 <div class="product-pic"> <img class="pic0" src="{{ asset('storage/products/'.$product->image1)}}"> </div>
									 </fieldset>
									 <fieldset id="f21" class="">
											 <div class="product-pic"> <img class="pic0" src="{{ asset('storage/products/'.$product->image2)}}"> </div>
									 </fieldset>
									 <fieldset id="f31" class="">
											 <div class="product-pic"> <img class="pic0" src="{{ asset('storage/products/'.$product->image3)}}"> </div>
									 </fieldset>
									 <fieldset id="f41" class="">
											 <div class="product-pic"> <img class="pic0" src="{{ asset('storage/products/'.$product->image4)}}"> </div>
									 </fieldset>
							 </div>
					 </div>
			 </div>
			</div>

			</div>


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

        <h2 class="product-name">{{$product->name}}</h2>
				<h3 class="product-price">{{$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> @if($product->stock == 1) Available @else Out Of Stock @endif</p>
							<p><strong>Brand:</strong> {{$product->brand->name}}</p>
							<p>{{$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>
									@foreach($product->sizes as $size)
									<li class=""><input type="radio" name="size" value="{{$size->name}}" checked/>  {{$size->name}}</li>
									@endforeach
								</ul>
								<ul class="color-option">
									<li><span class="text-uppercase"><u>Available Colors</u>:</span></li>
									@foreach($product->colors as $color)
									<li class=""><input type="radio" name="color" value="{{$color->name}}" checked/>  {{$color->name}}</a></li>
									@endforeach
								</ul>
							</div>
						</div>
					</div>

          <div class="col-md-12">
            <button style="" class="btn btn-success add-to-cart pull-right"><i class="fa fa-shopping-cart"></i> Add to Cart</button>

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

          </div>
<hr style="width:100%;margin:10px;">

					<div class="col-md-12">
<li><span class="text-uppercase"><u>Description</u>:</span></li>
									<p>{{$product->description}}.</p>

					</div>




				</div>
</div>


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



@endsection

@section('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>
@endsection