@extends('front.layouts.app', ['title' => $product->name, 'description' => $product->description,
'image' => isset($product->productsImageFirst) && isset($product->productsImageFirst->filename) ? url('storage') . '/' . $product->productsImageFirst->filename: ''])

@section('content')
    @include('front.layouts.app-header')


    <!-- <section class="page_banner" style="background:rgb(0 0 0 / 60%) url({{asset('images/product_details_page.png')}}) center / cover no-repeat;background-blend-mode:color; ">
    <div class="container">
        <div class="row">
            <div class="col col-12">
                <div class="page_banner_title">
                    <h1>Cras In Laoreet Libero</h1>
                </div>
                <div class="c_breadcrumb">
                    <ul class="c_breadcrumb_inner">
                        <li class="c_breadcrumb_item">
                            <a href="#!">all</a>
                        </li>
                        <li class="c_breadcrumb_item">
                            <a href="#!">Wines</a>
                        </li>
                        <li class="c_breadcrumb_item">Cras In Laoreet Libero</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section> -->

    <section class="breadcrumb_sec">
        <div class="container">
            <div class="row">
                <div class="col col-12">
                    <div class="breadcrumb">
                        <ul>
                            <li><a href="{{route('home')}}">Home</a></li>
                            <li>{{$product->name}}</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="product_details_sec">
        <div class="container">
            <div class="row">
                <div class="col col-5">
                    <div class="pd_item_slider">
                        <div class="pd_item_slider_main_img">
                            <div class="expand_slider">
                                @if($product->productsImageFirst != '')
                                    <a href="#!" data-fancybox="product-slider"
                                       data-src="{{url('storage') . '/' . $product->productsImageFirst->filename}}">
                                        <img src="{{asset('images/expand_arrows.svg')}}" alt=""></a>
                                @endif
                            </div>
                            <div class="pd_item_slider_for">
                                @if(count($product->productImages) > 0)
                                    @foreach($product->productImages as $image)
                                        <div class="pd_main_img_item">
                                            <a href="#!" data-fancybox="product-slider"
                                               data-src="{{url('storage') . '/' . $image->filename}}">
                                                <img src="{{url('storage') . '/' . $image->filename}}" alt="">
                                            </a>
                                        </div>
                                    @endforeach
                                @else
                                    <div class="pd_main_img_item">
                                        <a href="#!" data-fancybox="product-slider" data-src="{{url('storage') . '/no_image.png'}}">
                                            <img src="{{url('storage') . '/no_image.png'}}" alt="">
                                        </a>
                                    </div>
                                @endif
                            </div>
                        </div>
                        <div class="pd_item_slider_thumb_img">
                            <div class="pd_item_slider_nav">
                                @if(count($product->productImages) > 0)
                                    @foreach($product->productImages as $image)
                                        <div class="pd_thumb_img_item">
                                            <img src="{{url('storage') . '/' . $image->filename}}" alt="">
                                        </div>
                                    @endforeach
                                @else
                                    <div class="pd_thumb_img_item">
                                        <img src="{{url('storage') . '/no_image.png'}}" alt="">
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col col-6">
                    @include('front.product-detail.product-common-detail')
                </div>
            </div>
            <div class="row" id="infoRow">
                <div class="col col-9 mx-auto">
                    <div class="product_details_tab_wrapper">
                        <div class="product_details_tab_btn">
                            <ul class="tab_btn_wrap">
                                <li><a href="#!" data-rel="tab_1" class="active">Product Description</a></li>
                                <li><a href="#!" data-rel="tab_2">Shipping Details</a></li>
                                <li><a href="#!" data-rel="tab_3">Reviews</a></li>
                            </ul>
                        </div>
                        <div class="product_details_tab_content">
                            <div id="tab_1" class="tab_content_inner" style="display: block;">
                                <h2 class="d-none">Product Description</h2>
                                <div class="tab_content_inner_desc">
                                    <p> {{$product->description}}</p>
                                </div>
                            </div>
                            <div id="tab_2" class="tab_content_inner">
                                <h2 class="d-none">Shipping Details</h2>
                                <div class="tab_content_inner_desc">
                                    <p>{{$product->shipping_detail}} </p>
                                </div>
                            </div>
                            <div id="tab_3" class="tab_content_inner">
                                <h2 class="d-none">Reviews</h2>
                                <div class="tab_content_inner_desc">
                                    <div class="pd_cust_review_wrapper">
                                        <div class="pd_cust_review_inner">
                                            <div class="pad_write_review_btn">
                                                <div class="c_btn c_btn_border">
                                                    <a href="javascript:;">Write a review <i class="fas fa-pen"></i></a>
                                                </div>
                                            </div>
                                            <div class="pad_write_review_form d-none">
                                                <div class="pad_write_review_form_inner card">
                                                    <div class="card_title">
                                                        <h3>Write A Review</h3>
                                                    </div>
                                                    <div class="card_content">
                                                        <form name="product_review_form" id="product_review_form"
                                                              data-parsley-validate="">
                                                            <div class="row">
                                                                <input type="hidden" name="product_id"
                                                                       value="{{$product->id}}" id="product_id" require>
                                                                <div class="col col-12">
                                                                    <div class="c_filed">
                                                                        <label for="name">Your name *</label>
                                                                        <input type="text" name="name" id="name"
                                                                               required>
                                                                    </div>
                                                                </div>
                                                                <div class="col col-12">
                                                                    <div class="c_filed">
                                                                        <label for="comment">Comment *</label>
                                                                        <textarea name="comment" id="comment" rows="3"
                                                                                  required></textarea>
                                                                    </div>
                                                                </div>
                                                                <div class="col col-12">
                                                                    <div class="pad_write_review_input">
                                                                        <div class="c_filed">
                                                                            <label for="">Rating *</label>
                                                                        </div>
                                                                        <ul>
                                                                            <li>
                                                                                <label for="">Bad</label>
                                                                            </li>
                                                                            <li>
                                                                                <div class="c_radio">
                                                                                    <input type="radio" name="rating"
                                                                                           value="1" id="">
                                                                                    <label for="">
                                                                                        <i class="far fa-star"></i>
                                                                                        <i class="fas fa-star"></i>
                                                                                    </label>
                                                                                </div>
                                                                            </li>
                                                                            <li>
                                                                                <div class="c_radio">
                                                                                    <input type="radio" name="rating"
                                                                                           value="2" id="">
                                                                                    <label for="">
                                                                                        <i class="far fa-star"></i>
                                                                                        <i class="fas fa-star"></i>
                                                                                    </label>
                                                                                </div>
                                                                            </li>
                                                                            <li>
                                                                                <div class="c_radio">
                                                                                    <input type="radio" name="rating"
                                                                                           value="3" id="">
                                                                                    <label for="">
                                                                                        <i class="far fa-star"></i>
                                                                                        <i class="fas fa-star"></i>
                                                                                    </label>
                                                                                </div>
                                                                            </li>
                                                                            <li>
                                                                                <div class="c_radio">
                                                                                    <input type="radio" name="rating"
                                                                                           value="4" id="">
                                                                                    <label for="">
                                                                                        <i class="far fa-star"></i>
                                                                                        <i class="fas fa-star"></i>
                                                                                    </label>
                                                                                </div>
                                                                            </li>
                                                                            <li>
                                                                                <div class="c_radio">
                                                                                    <input type="radio" name="rating"
                                                                                           value="5" checked id="">
                                                                                    <label for="">
                                                                                        <i class="far fa-star"></i>
                                                                                        <i class="fas fa-star"></i>
                                                                                    </label>
                                                                                </div>
                                                                            </li>
                                                                            <li>
                                                                                <label for="">Good</label>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                                <div class="col col-12">
                                                                    <div class="c_btn c_btn_red">
                                                                        <button type="submit">Submit</button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="pd_cust_review_lists" id="review-list">
                                                @if (count($reviews) > 0)
                                                    @include('front.product-detail.product-review-list')
                                                @else
                                                    <h3>No review found</h3>
                                                @endif
                                            </div>
                                            @if (count($reviews) > 3)
                                                <div class="review_item_load_more">
                                                    <div class="c_btn c_btn_red">
                                                        <a href="javascript:;" data-id="{{$product->id}}"
                                                           class="load-more">Load More</a>
                                                    </div>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                <!-- <p>{{$product->shipping_detail}}</p> -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="related_product_sec">
        <div class="container">
            <div class="row">
                <div class="col col-12">
                    <div class="section_title">
                        <h2>Related Products</h2>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col col-12">
                    <div class="related_product_slider">
                        @foreach ($relatedProducts as $product)
                            <div class="slider_item filter_card_item">
                                <div class="filter_card_img">
                                    @if(!empty($product->productsImageFirst->filename) && \Illuminate\Support\Facades\Storage::exists($product->productsImageFirst->filename))
                                        <img src="{{ url('storage') . '/' .  $product->productsImageFirst->filename}}"
                                             alt="">
                                    @else
                                        <img src="{{ url('storage') . '/' . '/no_image.png'}}" alt="">
                                    @endif
                                </div>
                                <div class="filter_card_content">
                                    <h4>
                                        <a href="{{route('product-detail', ['slug' => $product->slug])}}">{{$product->name}}</a>
                                    </h4>
                                    <ul>
                                        {{-- <li class="filter_card_old_price ">$259.00</li> --}}
                                        <li class="filter_card_price">{{ config('constant.CURRENCY_SIGN') }}{{$product->productsVariantMax->selling_price}}</li>
                                    </ul>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        <!-- <div class="row">
            <div class="col col-4 filter_card_item ">
                <div class="filter_card_img">
                    <img src="{{asset('images/cate_1.png')}}" alt="">
                </div>
                <div class="filter_card_content">
                    <h4><a href="#!">Western Belle Wine</a></h4>
                    <ul>
                        <li class="filter_card_old_price ">$259.00</li>
                        <li class="filter_card_price">$259.00</li>
                    </ul>
                </div>
            </div>
            <div class="col col-4 filter_card_item ">
                <div class="filter_card_img">
                    <img src="{{asset('images/cate_2.png')}}" alt="">
                </div>
                <div class="filter_card_content">
                    <h4><a href="#!">Western Belle Wine</a></h4>
                    <ul>
                        <li class="filter_card_price">$259.00</li>
                    </ul>
                </div>
            </div>
            <div class="col col-4 filter_card_item ">
                <div class="filter_card_img">
                    <img src="{{asset('images/cate_3.png')}}" alt="">
                </div>
                <div class="filter_card_content">
                    <h4><a href="#!">Western Belle Wine</a></h4>
                    <ul>
                        <li class="filter_card_price">$259.00</li>
                    </ul>
                </div>
            </div>
        </div> -->
        </div>
    </section>


    @include('front.layouts.app-footer')
@endsection
@section('custom-js')
    <script>
    </script>
@endsection