@extends('site.master')
@section('title','Product Details')
@section('content')
    <style>
        div#social-links ul li a {
            margin-right: 5px;
        }
    </style>
    <!-- Page Banner Section Start -->
    @include('site.layouts.breadcrumb')
    <!-- Page Banner Section End -->
    <!-- Star Ratings -->
    <link href="{!! asset('site_assets/plugins/star-rating/star-rating.min.css') !!}" rel="stylesheet">
    <link rel="stylesheet" href="{!! asset('site_assets/plugins/star-rating/themes/krajee-fa/theme.css') !!}" media="all" type="text/css"/>
    <link rel="stylesheet" href="{!! asset('site_assets/plugins/star-rating/themes/krajee-svg/theme.css') !!}" media="all" type="text/css"/>
    <link rel="stylesheet" href="{!! asset('site_assets/plugins/star-rating/themes/krajee-uni/theme.css') !!}" media="all" type="text/css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="{!! asset('site_assets/plugins/star-rating/star-rating.min.js')!!}"></script>
    <script src="{!! asset('site_assets/plugins/star-rating/themes/krajee-fa/theme.js')!!}" type="text/javascript"></script>
    <script src="{!! asset('site_assets/plugins/star-rating/themes/krajee-svg/theme.js')!!}" type="text/javascript"></script>
    <script src="{!! asset('site_assets/plugins/star-rating/themes/krajee-uni/theme.js')!!}" type="text/javascript"></script>
    <script>
        $("#input-id").rating({'size': 'lg'});
    </script>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
            integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
    <script src="{{ asset('js/share.js') }}"></script>
    <!-- Single Product Section Start -->
    <div class="product-section section mt-20 mb-10">
        <div class="container-fluid">

            <div class="row">
                <div class="col-xl-9 col-lg-8 col-12 order-2 order-lg-1 mb-20">

                    <div class="row mb-10">

                        <div class="col-lg-6 col-12 mb-20">

                            <!-- Image -->
                            <div class="single-product-image">

                                <div class="tab-content">
                                    <div id="single-image-1" class="tab-pane fade show active big-image-slider">
                                        <div class="big-image">
                                            @if(file_exists(public_path().'/uploads/product/'.$singleProduct->image_one) && !empty($singleProduct->image_one))
                                                <img src="{{ asset('uploads/product/'.$singleProduct->image_one) }}"
                                                     alt="Big Image" class="imagezooms">
                                            @else
                                                <img src="{{ asset('site_assets/images/single-product/big-1.png') }}"
                                                     alt="Big Image" class="imagezooms">
                                            @endif
                                        </div>
                                    </div>
                                    @if(file_exists(public_path().'/uploads/product/'.$singleProduct->image_two) && !empty($singleProduct->image_two))
                                        <div id="single-image-2" class="tab-pane fade big-image-slider">
                                            <div class="big-image">
                                                <img src="{{ asset('uploads/product/'.$singleProduct->image_two) }}" alt="Big Image" class="imagezooms">
                                            </div>
                                        </div>
                                    @endif
                                    @if(file_exists(public_path().'/uploads/product/'.$singleProduct->image_three) && !empty($singleProduct->image_three))
                                        <div id="single-image-3" class="tab-pane fade big-image-slider">
                                            <div class="big-image">
                                                <img src="{{ asset('uploads/product/'.$singleProduct->image_three) }}" alt="Big Image" class="imagezooms">
                                            </div>
                                        </div>
                                    @endif
                                </div>

                                <div class="thumb-image-slider nav">
                                    @if(file_exists(public_path().'/uploads/product/'.$singleProduct->image_one) && !empty($singleProduct->image_one))
                                        <a class="thumb-image active" data-toggle="tab" href="#single-image-1">
                                            <img src="{{ asset('uploads/product/'.$singleProduct->image_one) }}"
                                                 alt="Thumbnail Image"></a>
                                    @else
                                        <a class="thumb-image active" data-toggle="tab" href="#single-image-1">
                                            <img src="{{ asset('site_assets/images/single-product/thumb-1.png') }}"
                                                 alt="Thumbnail Image"></a>
                                    @endif
                                    @if(file_exists(public_path().'/uploads/product/'.$singleProduct->image_two) && !empty($singleProduct->image_two))
                                        <a class="thumb-image" data-toggle="tab" href="#single-image-2">
                                            <img src="{{ asset('uploads/product/'.$singleProduct->image_two)  }}"
                                                 alt="Thumbnail Image"></a>
                                    @endif
                                    @if(file_exists(public_path().'/uploads/product/'.$singleProduct->image_three) && !empty($singleProduct->image_three))
                                        <a class="thumb-image" data-toggle="tab" href="#single-image-3">
                                            <img src="{{ asset('uploads/product/'.$singleProduct->image_three)}}"
                                                 alt="Thumbnail Image"></a>
                                    @endif
                                </div>

                            </div>

                        </div>

                        <div class="col-lg-6 col-12 mb-30">

                            <!-- Content -->
                            <div class="single-product-content p-0">

                                <!-- Category & Title -->
                                <div class="head-content">

                                    <div class="category-title" style="width: 100%">
                                        <a href="#"
                                           class="cat">@if(isset($singleProduct->category)){{ $singleProduct->category->name }} @else {{ "Unknown" }}@endif</a>
                                        <h5 class="title">{{ $singleProduct->name }}</h5>
                                    </div>

                                    <h5 class="price">
                                        ৳&nbsp;
                                        @if(!empty($singleProduct->retail_price_after_discount))
                                            <span class="old">{{ $singleProduct->retail_price }}</span>
                                            {{ $singleProduct->retail_price_after_discount }}
                                        @else
                                            {{ $singleProduct->retail_price }}
                                        @endif


                                    </h5>

                                </div>

                                <div class="single-product-description">

                                    <div class="ratting">
                                        @php
                                            $rating=\App\SiteCommonHelper::getProductReviewCount(floor($avgRating * 2) / 2);
                                        @endphp
                                        {!!   $rating!!}
                                    </div>

                                    <div class="desc">
                                        <p>{!!  $singleProduct->short_description !!} </p>
                                    </div>

                                    @php $totalQty = 0; @endphp
                                    @if(isset($singleProduct->stock_qty))
                                        @foreach($singleProduct->stock_qty as $qty)
                                            @php $totalQty += $qty->quantity; @endphp
                                        @endforeach
                                    @endif

                                    <span class="availability" style="font-size: 15px">Availability: <span class="badge @if($totalQty>0) {{"badge-success"}}@else{{"badge-danger"}} @endif"> @if($totalQty>0) {{ "In Stock" }} @else {{ "Out of Stock" }} @endif</span></span>

                                    <div class="quantity-colors">

                                        <div class="quantity">
                                            <h5>Quantity</h5>
                                            <div class="pro-qty"><input type="number" name="qty" class="product_quantity" value="1" min="1"></div>
                                        </div>

                                        @if($singleProduct->variant)
                                        <div class="colors">
                                            <h5>Variant</h5>
                                            <select class="nice-select">
                                                @foreach(explode(',',$singleProduct->variant) as $variant)
                                                <option>{{ $variant }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        @endif

                                    </div>

                                    @php
                                   $productExists= \App\SiteCommonHelper::isProductExitsOnCart($singleProduct->id);
                                    @endphp

                                    @if($totalQty>0)
                                    <div class="actions">
                                        <a href="javascript:void(0)" class="add-to-cart header-cart {{ ($productExists) ? "added" : null }}"
                                           data-id="{{ $singleProduct->id }}"><i class="ti-shopping-cart {{ ($productExists) ? "ti-check" : null }} "></i>
                                            <span>{{ ($productExists) ? "added" : "ADD TO CART" }}</span>
                                        </a>
                                        <div class="wishlist-compare">
                                            {{-- <a href="#" data-tooltip="Compare"><i class="ti-control-shuffle"></i></a>--}}
                                            <a href="javascript:void(0)" data-tooltip="Wishlist"
                                               class="wishlist-product"
                                               data-id="{{ $singleProduct->id }}"><i class="ti-heart"></i>
                                            </a>
                                        </div>
                                    </div>
                                    @endif

                                    <div class="share">

                                        <h5>Share: </h5>
                                        {!!  Share::currentPage()
                                        ->facebook()
                                        ->twitter()
                                        ->linkedin('Extra linkedin summary can be passed here')
                                        ->whatsapp()  !!}

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                    <div class="row">

                        <div class="col-12 mb-10">

                            <ul class="single-product-tab-list nav">
                                <li><a href="#product-description" class="active" data-toggle="tab">description</a></li>
                                <li><a href="#product-specifications" data-toggle="tab">specifications</a></li>
                                <li><a href="#product-reviews" data-toggle="tab">reviews</a></li>
                            </ul>

                            <div class="single-product-tab-content tab-content">
                                <div class="tab-pane fade show active" id="product-description">

                                    <div class="row">
                                        <div class="single-product-description-content col-lg-8 col-12">
                                            <h4>{{ $singleProduct->name }}</h4><br>
                                            {!! $singleProduct->description !!}
                                        </div>
                                        @if(file_exists(public_path().'/uploads/product/'.$singleProduct->thumb_image) && !empty($singleProduct->thumb_image))
                                            <div class="single-product-description-image col-lg-4 col-12">
                                                <img src="{{ asset('uploads/product/'.$singleProduct->thumb_image) }}"
                                                     alt="description">
                                            </div>
                                        @endif
                                    </div>

                                </div>
                                <div class="tab-pane fade" id="product-specifications">
                                    <div class="single-product-specification">
                                        {!! $singleProduct->specification !!}
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="product-reviews">

                                    <div class="product-ratting-wrap">
                                        <div class="pro-avg-ratting">
                                            <h4> {{ number_format($avgRating,1) }}<span>(Overall)</span></h4>
                                            <span>Based on Comments</span>
                                        </div>
                                        <div class="rattings-wrapper">

                                            @foreach($reviews as $review)
                                                <div class="sin-rattings">
                                                    <div class="ratting-author">
                                                        <h3>{{ $review->name }}</h3>
                                                        <div class="ratting-star">
                                                            @php
                                                                $rating=\App\SiteCommonHelper::getProductReviewCount($review->rating);
                                                            @endphp
                                                            {!!   $rating!!}
                                                            <span>({{ $review->rating }})</span>
                                                        </div>
                                                    </div>
                                                    <p>{{ $review->review }}</p>
                                                </div>
                                            @endforeach

                                        </div>
                                        <div class="ratting-form-wrapper fix">
                                            <h3>Add your Comments</h3>
                                            <form method="post" action="{{ route('review.store') }}">
                                                @csrf
                                                <div class="ratting-form row">
                                                    <div class="col-12 mb-15">
                                                        <h5>Rating:</h5>
                                                        <div class="ratting-star fix">
                                                            <input id="input-id" name="rating" type="text"
                                                                   class="rating" data-size="sm">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6 col-12 mb-15">
                                                        <label for="name">Name:</label>
                                                        <input id="name" name="name" placeholder="Name" type="text"
                                                               required>
                                                        <input name="hdnProductID" type="hidden"
                                                               value="{{ $singleProduct->id }}">
                                                    </div>
                                                    <div class="col-md-6 col-12 mb-15">
                                                        <label for="email">Email:</label>
                                                        <input id="email" name="email" placeholder="Email" type="email"
                                                               required>
                                                    </div>
                                                    <div class="col-12 mb-15">
                                                        <label for="your-review">Your Review:</label>
                                                        <textarea name="review" id="your-review"
                                                                  placeholder="Write a review"></textarea>
                                                    </div>
                                                    <div class="col-12">
                                                        <input value="add review" type="submit">
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>

                                </div>
                            </div>

                        </div>

                    </div>

                    <div class="row">

                        <!-- Section Title Start -->
                        <div class="col-12 mb-40">
                            <div class="section-title-one" data-title="RELATED PRODUCT"><h1>RELATED PRODUCT</h1></div>
                        </div>
                        <!-- Section Title End -->

                        <!-- Product Tab Content Start -->
                        <div class="col-12">
                            <!-- Product Slider Wrap Start -->
                            <div class="product-slider-wrap product-slider-arrow-two">
                                <!-- Product Slider Start -->
                                <div class="product-slider product-slider-3">
                                    @foreach($categoryProducts as $categoryProduct)
                                        <div class="col pb-20 pt-10">
                                            <!-- Product Start -->
                                            <div class="ee-product">

                                                <!-- Image -->
                                                <div class="image">

                                                    <a href="{{ route('single-product',$categoryProduct->id) }}"
                                                       class="img">
                                                        @if(file_exists(public_path().'/uploads/product/'.$categoryProduct->thumb_image) && !empty($categoryProduct->thumb_image))
                                                            <img src="{{ asset('uploads/product/'.$categoryProduct->thumb_image) }}"
                                                                 alt="Product Image">
                                                        @else
                                                            <img src="{{  asset('site_assets/images/product/product-1.png') }}"
                                                                 alt="Product Image">
                                                        @endif
                                                    </a>
                                                    @if (Auth::guard('customers')->check())
                                                        <div class="wishlist-compare">
                                                            <a href="javascript:void(0)" data-tooltip="Wishlist"
                                                               class="wishlist-product"
                                                               data-id="{{$categoryProduct->id}}">
                                                                <i class="ti-heart"></i></a>
                                                        </div>
                                                    @endif

                                                    <a href="javascript:void(0)" class="add-to-cart header-cart" data-id="{{ $categoryProduct->id }}"><i
                                                                class="ti-shopping-cart"></i><span>ADD TO CART</span></a>

                                                </div>

                                                <!-- Content -->
                                                <div class="content">

                                                    <!-- Category & Title -->
                                                    <div class="category-title">

                                                        <a href="#"
                                                           class="cat">@if(isset($categoryProduct->category)){{ $categoryProduct->category->name }} @else {{ "Unknown" }} @endif</a>
                                                        <h5 class="title textLimit">
                                                            <a href="{{ route('single-product',$categoryProduct->id) }}">{{ $categoryProduct->name }}</a>
                                                        </h5>

                                                    </div>

                                                    <!-- Price & Ratting -->
                                                    <div class="price-ratting">

                                                        <h5 class="price">
                                                            ৳&nbsp;
                                                            @if(!empty($categoryProduct->retail_price_after_discount))
                                                                <span class="old">{{ $categoryProduct->retail_price }}</span>
                                                                {{ $categoryProduct->retail_price_after_discount }}
                                                            @else
                                                                {{ $categoryProduct->retail_price }}
                                                            @endif
                                                        </h5>
                                                        <div class="ratting">
                                                            @php
                                                                $avgProductRating=\App\SiteCommonHelper::getProductAvgRating($categoryProduct->id);
                                                                $rating=\App\SiteCommonHelper::getProductReviewCount(floor($avgProductRating * 2) / 2);
                                                            @endphp
                                                            {!!   $rating!!}
                                                        </div>

                                                    </div>

                                                </div>

                                            </div><!-- Product End -->
                                        </div>
                                    @endforeach
                                </div>
                                <!-- Product Slider End -->
                            </div>
                            <!-- Product Slider Wrap End -->
                        </div>

                        <!-- Product Tab Content End -->

                    </div>

                </div>
                @include('site.layouts.shop-sidebar')


            </div>

        </div>
    </div>
    <!-- Single Product Section End -->
@stop
@section('page_scripts')

    <script src="{!! asset('site_assets/plugins/stylish-magnifying-glass/zoomsl.min.js')!!}" type="text/javascript"></script>
    <script>
        $(window).load(function(){
            if($(window).width()>500)
            {
                //alert($(window).width());
                $(function(){
                    $(".imagezooms").imagezoomsl({

                        // loading spinner
                       // loadinggif: 'loading.gif',

                        // opacity
                        loadopacity: 0.1,

                        // background color
                        loadbackground: '#878787',
                        // zoom step
                        stepzoom: 0.5,

                        // zoom range
                        zoomrange: [2, 2],

                        // start zoom level
                        zoomstart: 2,

                    });
                });
            }
        });

    </script>


@endsection