@extends('website.layout.master')



@section('title')



@endsection



@section('content')
<style>
.product-form__radio:checked+.product-form__label .text {
    color: var(--variant-color-active);
    background-color: var(--variant-bg-active);
    border-color: var(--swatch-border-active);
}
input[type=checkbox], input[type=radio] {
    display: none;
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    box-sizing: border-box;
}
.product-form__label {
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    margin: 5px 10px 10px 0;
}
    .product-form__label .text {
    display: block;
    width: auto;
    min-width: 48px;
    height: 40px;
    line-height:  40px;
    border-radius: 0px;
    padding: 0 10px;
    font-size:14px;
    font-weight: 400;
    text-transform: capitalize;
    color: #232323;
    background-color: #ffffff;
    border: 1px solid #cbcbcb;
    text-align: center;
    transition:all ease .3s;
}
</style>




        <!-- page-title -->

        <section class="page-title centred"> 

            <div class="pattern-layer" style="background-image:url(website/images/background/page-title.jpg);"></div>

            <div class="auto-container">

                <div class="content-box">

                    <h1>Details</h1>

                    <ul class="bread-crumb clearfix">

                        <li><i class="flaticon-home-1"></i><a href="{{route('home')}}">Home</a></li>

                        <li>Details</li>

                    </ul>

                </div>

            </div>

        </section>

        <!-- page-title end -->



        <!-- product-details -->

        <section class="product-details product-details-2">

            <div class="auto-container">

                <div class="product-details-content">

                    <div class="row align-items-center clearfix">

                        <div class="col-lg-6 col-md-12 col-sm-12 image-column">

                            <div class="bxslider">

                                @foreach($productimage as $pi)

                                <div class="slider-content">

                                    <div class="slider-pager">

                                        <ul class="thumb-box">

                                            @php
                                            $count=0;
                                            @endphp

                                            @foreach($productimage as $al)

                                            <li>

                                                <a class="active" data-slide-index="{{ $count++ }}" href="#"><figure><img src="{{ url('/admin/assets/uploads/'.$al->image) }}" alt=""></figure></a>

                                            </li>

                                            @endforeach

                                            

                                        </ul>

                                    </div>

                                    <div class="product-image">

                                        <figure class="image">

                                            <img src="{{ url('/admin/assets/uploads/'.$pi->image) }}" alt="">

                                            <a href="{{ url('/admin/assets/uploads/'.$pi->image) }}" class="lightbox-image"><i class="flaticon-search-2"></i></a>

                                        </figure>

                                    </div>

                                </div>

                                @endforeach

                                

                            </div>

                        </div>

                        <div class="col-lg-6 col-md-12 col-sm-12 content-column">

                            <div class="product-info">

                                <h3>{{ $product->name }}</h3>

                                <div class="customer-review clearfix">

                                    <ul class="rating-box clearfix">

                                        <li><i class="flaticon-star"></i></li>

                                        <li><i class="flaticon-star"></i></li>

                                        <li><i class="flaticon-star"></i></li>

                                        <li><i class="flaticon-star"></i></li>

                                        <li><i class="flaticon-star"></i></li>

                                    </ul>

                                    <div class="reviews"><a href="#">({{ count($reviews) }} Reviews)</a></div>

                                </div>

                                <span class="item-price">{{ $product->price }}</span>

                                <div class="text">

                                    <p>
{{ $product->description }}</p>

                                </div>
                                <form method="POST" action="{{ route('add_to_cart') }}" enctype="multipart/form-data">

                            @csrf

                                <div class="size-box">

                                    <h5>Size:</h5>

                                    <div class="custom-control custom-radio">

                                        <input type="radio" name="size" checked="" id="customRadio1" value="L" class="custom-control-input">

                                        <label class="custom-control-label" for="customRadio1">L</label>

                                    </div>

                                    <div class="custom-control custom-radio">

                                        <input type="radio" name="size" checked="" id="customRadio2" value="XL" class="custom-control-input">

                                        <label class="custom-control-label" for="customRadio2">XL</label>

                                    </div>

                                    <div class="custom-control custom-radio">

                                        <input type="radio" name="size" checked="" id="customRadio3" value="M" class="custom-control-input">

                                        <label class="custom-control-label" for="customRadio3">M</label>

                                    </div>

                                    <div class="custom-control custom-radio">

                                        <input type="radio" name="size" checked="" id="customRadio4" value="S" class="custom-control-input">

                                        <label class="custom-control-label" for="customRadio4">S</label>

                                    </div>

                                    <div class="custom-control custom-radio">

                                        <input type="radio" name="size" checked="" id="customRadio5" value="XS" class="custom-control-input">

                                        <label class="custom-control-label" for="customRadio5">XS</label>

                                    </div>

                                </div>
                            <div class="productView-moreItem" style="--spacing-top: 0px;
                                                --spacing-bottom: 0px">
	<div class="productView-options" style="--color-border: #e6e6e6">
		<div class="productView-variants halo-productOptions" id="product-option-8801194541361" data-type="button">
			<variant-radios class="no-js-hidden product-option has-default" data-product="8801194541361" data-section="template--20607095308593__main" data-url="/products/cg31-black">
				<fieldset class="js product-form__input clearfix" data-product-attribute="set-rectangle" data-option-index="0">
					<h5 class="form__label"> Size: <span data-header-option="">40</span> </h5>
					<input class="product-form__radio" type="radio" id="option-8801194541361-Size-0" name="Size" value="40" checked="" data-variant-id="46529534656817">
					<label class="product-form__label available" for="option-8801194541361-Size-0" data-variant-id="46529534656817"> <span class="text">40</span> </label>
					<input class="product-form__radio" type="radio" id="option-8801194541361-Size-1" name="Size" value="41" data-variant-id="46529534689585">
					<label class="product-form__label available" for="option-8801194541361-Size-1" data-variant-id="46529534689585"> <span class="text">41</span> </label>
					<input class="product-form__radio" type="radio" id="option-8801194541361-Size-2" name="Size" value="42" data-variant-id="46529534722353">
					<label class="product-form__label available" for="option-8801194541361-Size-2" data-variant-id="46529534722353"> <span class="text">42</span> </label>
					<input class="product-form__radio" type="radio" id="option-8801194541361-Size-3" name="Size" value="43" data-variant-id="46529534755121">
					<label class="product-form__label available" for="option-8801194541361-Size-3" data-variant-id="46529534755121"> <span class="text">43</span> </label>
					<input class="product-form__radio" type="radio" id="option-8801194541361-Size-4" name="Size" value="44" data-variant-id="46529534787889">
					<label class="product-form__label available" for="option-8801194541361-Size-4" data-variant-id="46529534787889"> <span class="text">44</span> </label>
					<input class="product-form__radio" type="radio" id="option-8801194541361-Size-5" name="Size" value="45" data-variant-id="46529534820657">
					<label class="product-form__label soldout" for="option-8801194541361-Size-5" data-variant-id="46529534820657"> <span class="text">45</span> </label>
				</fieldset>
				<script type="application/json"> [{"id":46529534656817,"title":"40","option1":"40","option2":null,"option3":null,"sku":"CG31-Black","requires_shipping":true,"taxable":false,"featured_image":null,"available":true,"name":"FAUX LEATHERITE LACEUPS-BLACK - 40","public_title":"40","options":["40"],"price":381000,"weight":0,"compare_at_price":635000,"inventory_quantity":1,"inventory_management":"shopify","inventory_policy":"deny","barcode":"19403","requires_selling_plan":false,"selling_plan_allocations":[]},{"id":46529534689585,"title":"41","option1":"41","option2":null,"option3":null,"sku":"CG31-Black","requires_shipping":true,"taxable":false,"featured_image":null,"available":true,"name":"FAUX LEATHERITE LACEUPS-BLACK - 41","public_title":"41","options":["41"],"price":381000,"weight":0,"compare_at_price":635000,"inventory_quantity":4,"inventory_management":"shopify","inventory_policy":"deny","barcode":"19403","requires_selling_plan":false,"selling_plan_allocations":[]},{"id":46529534722353,"title":"42","option1":"42","option2":null,"option3":null,"sku":"CG31-Black","requires_shipping":true,"taxable":false,"featured_image":null,"available":true,"name":"FAUX LEATHERITE LACEUPS-BLACK - 42","public_title":"42","options":["42"],"price":381000,"weight":0,"compare_at_price":635000,"inventory_quantity":2,"inventory_management":"shopify","inventory_policy":"deny","barcode":"19403","requires_selling_plan":false,"selling_plan_allocations":[]},{"id":46529534755121,"title":"43","option1":"43","option2":null,"option3":null,"sku":"CG31-Black","requires_shipping":true,"taxable":false,"featured_image":null,"available":true,"name":"FAUX LEATHERITE LACEUPS-BLACK - 43","public_title":"43","options":["43"],"price":381000,"weight":0,"compare_at_price":635000,"inventory_quantity":2,"inventory_management":"shopify","inventory_policy":"deny","barcode":"19403","requires_selling_plan":false,"selling_plan_allocations":[]},{"id":46529534787889,"title":"44","option1":"44","option2":null,"option3":null,"sku":"CG31-Black","requires_shipping":true,"taxable":false,"featured_image":null,"available":true,"name":"FAUX LEATHERITE LACEUPS-BLACK - 44","public_title":"44","options":["44"],"price":381000,"weight":0,"compare_at_price":635000,"inventory_quantity":3,"inventory_management":"shopify","inventory_policy":"deny","barcode":"19403","requires_selling_plan":false,"selling_plan_allocations":[]},{"id":46529534820657,"title":"45","option1":"45","option2":null,"option3":null,"sku":"CG31-Black","requires_shipping":true,"taxable":false,"featured_image":null,"available":false,"name":"FAUX LEATHERITE LACEUPS-BLACK - 45","public_title":"45","options":["45"],"price":381000,"weight":0,"compare_at_price":635000,"inventory_quantity":0,"inventory_management":"shopify","inventory_policy":"deny","barcode":"19403","requires_selling_plan":false,"selling_plan_allocations":[]}] </script>
			</variant-radios>
		</div>
		<noscript>
			<div class="product-form__input">
				<label class="form__label" for="Variants-template--20607095308593__main"> Product variants </label>
				<div class="select">
					<select name="id" id="Variants-template--20607095308593__main" class="select__select" form="product-form">
						<option selected="selected" value="46529534656817"> 40 - Rs.3,810 </option>
						<option value="46529534689585"> 41 - Rs.3,810 </option>
						<option value="46529534722353"> 42 - Rs.3,810 </option>
						<option value="46529534755121"> 43 - Rs.3,810 </option>
						<option value="46529534787889"> 44 - Rs.3,810 </option>
						<option disabled value="46529534820657"> 45 - Sold out - Rs.3,810 </option>
					</select>
				</div>
			</div>
		</noscript>
	</div>
</div>


<div class="short-box clearfix" style="margin-bottom:5%;">

                                        <p>Kids Size</p>

                                        <div class="select-box">

                                            <select class="wide" style="display: none;">

                                               <option value="1">Select Size</option>

                                               <option value="2">0-3 M / 12</option>
                                               <option value="3">0-6 M / 14</option>
                                               <option value="4">1 Y / 16</option>
                                                <option value="5">2 Y / 18</option>
                                                <option value="6">3 Y / 20</option>
                                                <option value="7">4 Y / 22</option>
                                                <option value="8">5 Y / 24</option>
                                                <option value="9">6 Y / 26</option>
                                                <option value="10">7 Y / 28</option>
                                                <option value="11">8 Y / 30</option>
                                                <option value="12">9 Y / 32</option>
                                                <option value="13">10 Y / 34</option>
                                                <option value="14">11 Y / 36</option>
                                                <option value="15">12 Y / 38</option>
                                                <option value="16">13 Y / 40</option>
                                            </select>
                                            <div class="nice-select wide" tabindex="0">
                                                <span class="current">Select Size</span>
                                                <ul class="list">
                                                    <li data-value="1" class="option selected focus">0-3 M / 12</li>
                                                    <li data-value="2" class="option">0-6 M / 14</li>
                                                    <li data-value="3" class="option">1 Y / 16</li>
                                                    <li data-value="4" class="option">2 Y / 18</li>
                                                    <li data-value="5" class="option">3 Y / 20</li>
                                                    <li data-value="6" class="option">4 Y / 22</li>
                                                    <li data-value="7" class="option">5 Y / 24</li>
                                                    <li data-value="8" class="option">6 Y / 26</li>
                                                    <li data-value="9" class="option">7 Y / 28 </li>
                                                    <li data-value="10" class="option">8 Y / 30</li>
                                                    <li data-value="11" class="option">9 Y / 32</li>
                                                    <li data-value="12" class="option">10 Y / 34</li>
                                                    <li data-value="13" class="option">11 Y / 36</li>
                                                    <li data-value="14" class="option">12 Y / 38</li>
                                                    <li data-value="15" class="option">13 Y / 40</li>
                                                </ul>
                                            </div>

                                        </div>

                                    </div>




                                <div class="color-box">

                                    <h5>Color:</h5>
                                    <input type="hidden" value="{{ $id }}" name="product_id">

                                    <div class="color-inner">

                                        <div class="color-block black">

                                            <input type="radio" id="test1" value="black" name="color" checked>

                                            <label for="test1"></label>

                                        </div>

                                        <div class="color-block blue">

                                            <input type="radio" id="test2" value="blue" name="color">

                                            <label for="test2"></label>

                                        </div>

                                        <div class="color-block brown">

                                            <input type="radio" id="test3" value="brown" name="color">

                                            <label for="test3"></label>

                                        </div>

                                        <div class="color-block gray">

                                            <input type="radio" id="test4" value="gray" name="color">

                                            <label for="test4"></label>

                                        </div>

                                        <div class="color-block purple">

                                            <input type="radio" id="test5" value="purple" name="color">

                                            <label for="test5"></label>

                                        </div>

                                    </div>

                                </div>



                                <div class="othre-options clearfix">

                                    <div class="item-quantity">

                                        <input class="quantity-spinner" type="text" value="1" name="quantity">

                                    </div>

                                    <div class="btn-box"><button type="submit" class="theme-btn-two">Add to cart</button></div>

                                    <ul class="info clearfix">

                                        <li><a href="#"><i class="flaticon-heart"></i></a></li>

                                    </ul>

                                </div>

                            </form>

                                <div class="other-links">

                                    <ul class="clearfix">

                                        <li>SKU: 05</li>

                                        <li>Category: <a href="#">Accessories</a></li>

                                        <li>Tags: <a href="#">glasses</a>,<a href="#">t-shirts</a>,<a href="#">watches</a></li>

                                    </ul>

                                </div>

                                <ul class="share-option clearfix">

                                    <li><h5>Follow Us:</h5></li>

                                    <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>

                                    <li><a href="#"><i class="fab fa-twitter"></i></a></li>

                                    <li><a href="#"><i class="fab fa-vimeo-v"></i></a></li>

                                    <li><a href="#"><i class="fab fa-google-plus-g"></i></a></li>

                                </ul>

                            </div>

                        </div>

                    </div>

                </div>

                <div class="product-discription">

                    <div class="tabs-box">

                        <div class="tab-btn-box">

                            <ul class="tab-btns tab-buttons clearfix">

                                <li class="tab-btn active-btn" data-tab="#tab-1">Description</li>

                                <li class="tab-btn" data-tab="#tab-2">Reviews({{ count($reviews) }})</li>

                            </ul>

                        </div>

                        <div class="tabs-content">

                            <div class="tab active-tab" id="tab-1">

                                <div class="text">

                                    <p>{{ $product->description }}</p>

                                </div>

                            </div>

                            <div class="tab" id="tab-2">

                                <div class="review-box">

                                    <h5>Reviews</h5>

                                    @foreach($reviews as $rv)

                                    <div class="review-inner">

                                        <figure class="image-box"><img src="{{ URL::asset('website/images/resource/pro.jpg')}}" alt=""></figure>

                                        <div class="inner">


                                            <h6>{{ $rv->name }} <span>- {{ $rv->created_at }}</span></h6>

                                            <p>{{ $rv->comment }}</p>

                                        </div>

                                    </div>

                                    @endforeach



                                    <div class="replay-inner">

                                        <h5>Please Add Your Review here</h5>

                                        <!-- <div class="rating-box clearfix">

                                            <h6>Your Rating</h6>

                                            <ul class="rating clearfix">

                                                <li><i class="flaticon-star-1"></i></li>

                                                <li><i class="flaticon-star-1"></i></li>

                                                <li><i class="flaticon-star-1"></i></li>

                                                <li><i class="flaticon-star-1"></i></li>

                                                <li><i class="flaticon-star-1"></i></li>

                                            </ul>

                                        </div> -->

                                        <form method="POST" action="{{ route('add_review') }}" enctype="multipart/form-data"  class="review-form" >

                                @csrf

                                            <div class="row clearfix">

                                                <div class="col-lg-12 col-md-12 col-sm-12 form-group">

                                                    <label>Your Review</label>
                                                    <input type="hidden" value="{{ $product->id }}" name="pp_ii">

                                                    <textarea name="message" required=""></textarea>

                                                </div>

                                                
                                                <div class="col-lg-12 col-md-12 col-sm-12 form-group">

                                                    <div class="custom-controls-stacked">

                                                        <label class="custom-control material-checkbox">


                                                        </label>

                                                    </div>

                                                </div>

                                                <div class="col-lg-12 col-md-12 col-sm-12 form-group message-btn">

                                                    <button type="submit" class="theme-btn-two">Submit Your Review<i class="flaticon-right-1"></i></button>

                                                </div>

                                            </div>

                                        </form>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </section>

        <!-- product-details end -->



@endsection