@extends('frontend.layouts.template')
@section('content')
<!-- START SECTION BREADCRUMB -->
<div class="breadcrumb_section bg_gray page-title-mini">
    <div class="container"><!-- STRART CONTAINER -->
        <div class="row align-items-center">
        	<div class="col-md-6">
                <div class="page-title">
            		<h1>{{ objectName( $product->subject ) }}</h1>
                </div>
            </div>
            <div class="col-md-6">
                <ol class="breadcrumb justify-content-md-end">
                    <li class="breadcrumb-item"><a href="#">{{ trans('label.home') }}</a></li>
                    <li class="breadcrumb-item"><a href="#">{{ trans('label.products') }}</a></li>
                    <li class="breadcrumb-item"><a href="{{ url('products/category/'. $category_bread->id .'/'. encodelink( category_name( $category_bread ) ) ) }}">{{ category_name( $category_bread ) }}</a></li>
                    @if ($sub_category_bread)
                        <li class="breadcrumb-item"><a href="{{ url('products/category/'. $category_bread->id .'-' . $sub_category_bread->id .'/'. encodelink( category_name( $category_bread ) .'-'. category_name( $sub_category_bread ) ) ) }}">{{ category_name( $sub_category_bread ) }}</a></li>
                    @endif
                    {{-- <li class="breadcrumb-item"><a href="{{ url('products/category/'. $category->id .'/'. encodelink( category_name( $category ) ) ) }}">{{ category_name( $category ) }}</a></li> --}}
                    <li class="breadcrumb-item active">{{ objectName( $product->subject ) }}</li>
                </ol>
            </div>
        </div>
    </div><!-- END CONTAINER-->
</div>
<!-- END SECTION BREADCRUMB -->

<!-- START MAIN CONTENT -->
<div class="main_content">

<!-- START SECTION SHOP -->
<div class="section">
	<div class="container">
		<div class="row">
            <div class="col-lg-6 col-md-6 mb-4 mb-md-0">
             <div class="product-image">
                @if ($product->product_images )
                    <div class="product_img_box">
                        <img id="product_img" src='{{ asset( $product->product_images[0]->link ) }}' data-zoom-image="{{ asset( $product->product_images[0]->link ) }}" alt="{{ objectName($product->subject) }}1" />
                    </div>
                    <div id="pr_item_gallery" class="product_gallery_item slick_slider" data-slides-to-show="4" data-slides-to-scroll="1" data-infinite="false">
                        @foreach ($product->product_images as $idx => $image)
                            <div class="item">
                                <a href="#" class="product_gallery_item {{ $idx == 0 ? 'active' : '' }}" data-image="{{ asset( $image->link ) }}" data-zoom-image="{{ asset( $image->link ) }}">
                                    <img src="{{ asset( $image->link ) }}" alt="product_small_img{{ $idx }}" />
                                </a>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
            </div>
            <div class="col-lg-6 col-md-6">
                <div class="pr_detail">
                    <div class="product_description">
                        <h4 class="product_title"><a href="#">{{ objectName($product->subject) }}</a></h4>
                        <div class="product_price">
                            <span class="price">฿{{ nb( $product->price, 2) }}</span>
                            @if( $product->discount > 0)
                                <del>฿{{ nb( $product->discount, 2) }}</del>
                                <div class="on_sale">
                                    <span>{{ nb( discount_of( $product->price, $product->discount), 2) }}% Off</span>
                                </div>
                            @endif
                        </div>
                        <div class="rating_wrap">
                                <div class="rating">
                                    <div class="product_rate" style="width:{{ rating($product->id) }}%"></div>
                                </div>
                                <span class="rating_num">({{ review($product->id) }})</span>
                            </div>
                        <div class="pr_desc">
                            <p>{!! objectName($product->short_description) !!}</p>
                            @if ($product->shipping_price != 0)
                                <p style="font-size: 14px;">*{{ trans('label.shipping_per_cost') }} {{ $product->shipping_price }} บาท</p>

                            @endif
                        </div>
                    </div>
                    <hr />
                    <div class="cart_extra">
                        <div class="cart-product-quantity">
                            <div class="quantity">
                                <input type="button" value="-" class="minus">
                                <input type="text" name="quantity" value="1" title="Qty" class="qty" size="4">
                                <input type="button" value="+" class="plus">
                            </div>
                        </div>
                        <div class="cart_btn">
                            <button product-id="{{ $product->id }}" class="btn btn-fill-out btn-addtocart add-cart" type="button"><i class="icon-basket-loaded"></i> {{ trans('label.add_to_cart') }}</button>
                            <a class="add_wishlist" href="{{ url('account/wishlist/'. $product->id ) }}"><i class="icon-heart"></i></a>
                        </div>
                    </div>
                    <hr />
                    <ul class="product-meta">
                        <li>SKU: <a href="#">{{ $product->sku}}</a></li>
                        <li>{{ trans('label.category') }}: {!! category_product($product->category) !!}</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="row">
        	<div class="col-12">
            	<div class="large_divider clearfix"></div>
            </div>
        </div>
        <div class="row">
        	<div class="col-12">
            	<div class="tab-style3">
					<ul class="nav nav-tabs" role="tablist">
						<li class="nav-item">
							<a class="nav-link active" id="Description-tab" data-toggle="tab" href="#Description" role="tab" aria-controls="Description" aria-selected="true">{{ trans('label.description') }}</a>
                      	</li>
                      	<li class="nav-item">
                        	<a class="nav-link" id="Reviews-tab" data-toggle="tab" href="#Reviews" role="tab" aria-controls="Reviews" aria-selected="false">{{ trans('label.reviews') }} ({{ review($product->id) }})</a>
                      	</li>
                    </ul>
                	<div class="tab-content shop_info_tab">
                      	<div class="tab-pane fade show active" id="Description" role="tabpanel" aria-labelledby="Description-tab">
                        	{!! objectName( $product->description ) !!}
                      	</div>
                      	<div class="tab-pane fade" id="Reviews" role="tabpanel" aria-labelledby="Reviews-tab">
                        	@include('frontend.products.inc-review')
                      	</div>
                	</div>
                </div>
            </div>
        </div>
        <div class="row">
        	<div class="col-12">
            	<div class="small_divider"></div>
            	<div class="divider"></div>
                <div class="medium_divider"></div>
            </div>
        </div>
        @include('frontend.products.inc-releted')
    </div>
</div>
<!-- END SECTION SHOP -->

</div>
<!-- END MAIN CONTENT -->
@endsection
@section('javascript')
    <script type="text/javascript">

    </script>
@endsection