@extends('frontend.layouts.app')

@section('meta_title')
    {{ $detailedProduct->meta_title }}
@stop

@section('meta_description')
    {{ $detailedProduct->meta_description }}
@stop

@section('meta_keywords')
    {{ $detailedProduct->tags }}
@stop

@section('meta')
    <style type="text/css">
        .discount {
            background: #50250d;
            width: 35px;
            height: 35px;
            font-size: 11px;
            font-weight: 600;
            border-radius: 100%;
            position: absolute;
            right: 5px;
            top: 5px;
            color: #fff;
            line-height: 11px;
            padding: 7px 5px;
            text-align: center;
        }

        .product-gal-img {
            position: relative;
        }

        .dis-1 {
            width: 26px;
            height: 26px;
            line-height: 7px;
            font-size: 9px
        }
    </style>
    <!-- Schema.org markup for Google+ -->
    <meta itemprop="name" content="{{ $detailedProduct->meta_title }}">
    <meta itemprop="description" content="{{ $detailedProduct->meta_description }}">
    <meta itemprop="image" content="{{ my_asset($detailedProduct->meta_img) }}">

    <!-- Twitter Card data -->
    <meta name="twitter:card" content="product">
    <meta name="twitter:site" content="@publisher_handle">
    <meta name="twitter:title" content="{{ $detailedProduct->meta_title }}">
    <meta name="twitter:description" content="{{ $detailedProduct->meta_description }}">
    <meta name="twitter:creator" content="@author_handle">
    <meta name="twitter:image" content="{{ my_asset($detailedProduct->meta_img) }}">
    <meta name="twitter:data1" content="{{ single_price_new($detailedProduct->unit_price) }}">
    <meta name="twitter:label1" content="Price">

    <!-- Open Graph data -->
    <meta property="og:title" content="{{ $detailedProduct->meta_title }}" />
    <meta property="og:type" content="og:product" />
    <meta property="og:url" content="{{ route('product', $detailedProduct->slug) }}" />
    <meta property="og:image" content="{{ my_asset($detailedProduct->meta_img) }}" />
    <meta property="og:description" content="{{ $detailedProduct->meta_description }}" />
    <meta property="og:site_name" content="{{ env('APP_NAME') }}" />
    <meta property="og:price:amount" content="{{ single_price_new($detailedProduct->unit_price) }}" />
    <meta property="product:price:currency" content="{{ session('currency_code') ?? 'Rs' }}" />
    <meta property="fb:app_id" content="{{ env('FACEBOOK_PIXEL_ID') }}">
@endsection

@section('content')
    <!-- SHOP GRID WRAPPER -->
    <section class="product-details-area gry-bg">
        <div class="container">

            <div class="bg-white">

                <!-- Product gallery and Description -->
                <div class="row no-gutters cols-xs-space cols-sm-space cols-md-space">
                    <div class="col-lg-5">
                        <div class="product-gal sticky-top d-flex flex-row-reverse">
                            @if(is_array(json_decode($detailedProduct->photos)) && count(json_decode($detailedProduct->photos)) > 0)
                                <div class="product-gal-img">
                                    @if(!empty($detailedProduct->discount))
                                        <span class="discount">{{$detailedProduct->discount}}% off</span>
                                    @endif
                                    <img src="{{Storage::disk('s3')->url('frontend/images/placeholder.jpg')}}"
                                         class="xzoom img-fluid lazyload"
                                         src="{{Storage::disk('s3')->url('frontend/images/placeholder.jpg')}}"
                                         data-src="{{Storage::disk('s3')->url(json_decode($detailedProduct->photos)[0])}}"
                                         xoriginal="{{Storage::disk('s3')->url(json_decode($detailedProduct->photos)[0])}}" />
                                </div>
                                <div class="product-gal-thumb">
                                    <div class="xzoom-thumbs">
                                        @foreach (json_decode($detailedProduct->photos) as $key => $photo)
                                            <a href="{{ my_asset($photo) }}">
                                                <img
                                                    src="{{Storage::disk('s3')->url('frontend/images/placeholder.jpg')}}"
                                                    class="xzoom-gallery lazyload"
                                                    src="{{Storage::disk('s3')->url('frontend/images/placeholder.jpg')}}"
                                                    width="80" data-src="{{Storage::disk('s3')->url($photo)}}"
                                                    @if($key == 0) xpreview="{{Storage::disk('s3')->url($photo)}}" @endif>
                                            </a>
                                        @endforeach
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>

                    <div class="col-lg-7">
                        <!-- Product description -->
                        <div class="product-description-wrapper">
                            <!-- Product title -->
                            <h1 class="product-title mb-2">
                                {{  __($detailedProduct->name) }}
                            </h1>
                            <div class="product_cat">
                                <span>{{@$detailedProduct->category->name. ' > ' .@$detailedProduct->subcategory->name}}</span>
                            </div>
                            <div class="row align-items-center my-1">
                                <div class="col-6">
                                    <!-- Rating stars -->
                                    <div class="rating">
                                        @php
                                            $total = 0;
                                            $total += $detailedProduct->reviews->count();
                                        @endphp
                                        <span class="star-rating">
                                            {{ renderStarRating($detailedProduct->rating) }}
                                        </span>
                                        <span class="rating-count ml-1">({{ $total }} {{ translate('reviews')}})</span>
                                        @auth
                                            <a href="{{ route('frontend.review.create', $detailedProduct) }}"
                                               class="review-link ml-2">Write a review </a>
                                        @else
                                            <a href="#loginAlert" data-toggle="modal" class="review-link ml-2">Write a
                                                review </a>
                                            @push('modals')
                                                @include('modals.login-alert')
                                            @endpush
                                        @endauth

                                    </div>
                                </div>
                                <div class="col-6 text-right">
                                    <ul class="inline-links inline-links--style-1">
                                        @php
                                            $qty = 0;
                                            if($detailedProduct->variant_product){
                                                foreach ($detailedProduct->stocks as $key => $stock) {
                                                    $qty += $stock->qty;
                                                }
                                            }
                                            else{
                                                $qty = $detailedProduct->current_stock;
                                            }
                                        @endphp
                                        @if ($qty > 0)
                                            <li>
                                                <span
                                                    class="badge badge-md badge-pill bg-green badgein">{{ translate('In stock')}}</span>
                                            </li>
                                        @else
                                            <li>
                                                <span
                                                    class="badge badge-md badge-pill bg-red badgein">{{ translate('Sold Out')}}</span>
                                            </li>
                                        @endif
                                    </ul>
                                </div>
                            </div>


                            <hr>

                            <div class="row align-items-center">
                                <div class="sold-by col-auto">
                                    <small class="mr-2">{{ translate('Visit the Store')}}: </small><br>
                                    @if ($detailedProduct->added_by == 'seller' && $business->where('type', 'vendor_system_activation')->first()->value == 1)
                                        <a href="{{ route('shop.visit', @$detailedProduct->productSeller->shop->slug) }}">{{ @$detailedProduct->productSeller->name }}</a>
                                    @else
                                        @if($detailedProduct->manage_by == 0)
                                            KVIO
                                        @else
                                            @php $sellerName = \App\Product::with('productSeller')->where('id', $detailedProduct->id)->first(); @endphp
                                            @if(!empty($sellerName))
                                                <a href="{{ route('shop.visit', @$sellerName->productSeller->shop->slug) }}"> {{ucwords($sellerName->productSeller->name)}}</a>
                                            @else
                                                {{  translate('Khadi') }}
                                            @endif

                                        @endif
                                    @endif
                                </div>
                                @if ($business->where('type', 'conversation_system')->first()->value == 1)
                                    <div class="col-auto">
                                        <button class="btn btn-secondary  btn-sm"
                                                onclick="show_chat_modal()">{{ translate('Bulk Order Enquiry')}}</button>
                                    </div>
                                @endif

                                @if (@$detailedProduct->brand != null)
                                    <div class="col-auto">
                                        <img src="{{Storage::disk('s3')->url(@$detailedProduct->brand->logo)}}"
                                             alt="{{ @$detailedProduct->brand->name }}" height="30">
                                    </div>
                                @endif
                            </div>

                            <hr>

                            @if(home_price($detailedProduct->id) != home_discounted_price($detailedProduct->id))

                                <div class="row no-gutters mt-4">
                                    <div class="col-2">
                                        <div class="product-description-label">{{ translate('Price')}}:</div>
                                    </div>
                                    <div class="col-10">
                                        <div class="product-price-old">
                                            <del>
                                                {{session('currency_symbol')}} {{number_format($detailedProduct->unit_price, 2)}}
                                            </del>
                                        </div>
                                    </div>
                                </div>

                                <div class="row no-gutters mt-3">
                                    <div class="col-2">
                                        <div class="product-description-label mt-1">{{ translate('Discount Price')}}:
                                        </div>
                                    </div>
                                    <div class="col-10">
                                        <div class="product-price">
                                            <strong>
                                                {{ home_discounted_base_price($detailedProduct->id) }}
                                            </strong>
                                        </div>
                                    </div>
                                </div>
                            @else
                                <div class="row no-gutters mt-3">
                                    <div class="col-2">
                                        <div class="product-description-label">{{ translate('Price')}}:</div>
                                    </div>
                                    <div class="col-10">
                                        <div class="product-price">
                                            <strong>
                                                {{ home_discounted_price($detailedProduct->id) }}
                                            </strong>
                                        </div>
                                    </div>
                                </div>
                            @endif

                            @if ($addons->where('unique_identifier', 'club_point')->first() != null && $addons->where('unique_identifier', 'club_point')->first()->activated && $detailedProduct->earn_point > 0)
                                <div class="row no-gutters mt-4">
                                    <div class="col-2">
                                        <div class="product-description-label">{{  translate('Club Point') }}:</div>
                                    </div>
                                    <div class="col-10">
                                        <div
                                            class="d-inline-block club-point bg-soft-base-1 border-light-base-1 border">
                                            <span class="strong-700">{{ $detailedProduct->earn_point }}</span>
                                        </div>
                                    </div>
                                </div>
                            @endif

                            <hr>

                            <form id="option-choice-form">
                                @csrf
                                <input type="hidden" name="id" value="{{ $detailedProduct->id }}">

                                @if ($detailedProduct->choice_options != null)
                                    @foreach (json_decode($detailedProduct->choice_options) as $key => $choice)

                                        <div class="row no-gutters">
                                            <div class="col-2">
                                                <div
                                                    class="product-description-label mt-2">{{\App\Attribute::find($choice->attribute_id)->name }}
                                                    :
                                                </div>
                                            </div>
                                            <div class="col-10">
                                                @if(\App\Attribute::find($choice->attribute_id)->name == 'Color')
                                                    <ul class="list-inline checkbox-alphanumeric checkbox-alphanumeric--style-1 mb-2 pro-det">
                                                        @foreach ($choice->values as $key => $value)
                                                            <li>
                                                                <input type="radio"
                                                                       id="{{ $choice->attribute_id }}-{{ $value }}"
                                                                       name="attribute_id_{{ $choice->attribute_id }}"
                                                                       value="{{ $value }}"
                                                                       @if($key == 0) checked @endif>


                                                                <label
                                                                    for="{{ $choice->attribute_id }}-{{ $value }}">{{ $value }}</label>
                                                            </li>
                                                        @endforeach</ul>

                                                @else
                                                    <ul class="list-inline checkbox-alphanumeric checkbox-alphanumeric--style-1 mb-2 pro-det">
                                                        @foreach ($choice->values as $key => $value)

                                                            <li>
                                                                <input type="radio"
                                                                       id="{{ $choice->attribute_id }}-{{ $value }}"
                                                                       name="attribute_id_{{ $choice->attribute_id }}"
                                                                       value="{{ $value }}" required=""
                                                                       @if(count($choice->values) == 1) checked @endif>
                                                                <label
                                                                    for="{{ $choice->attribute_id }}-{{ $value }}">{{ $value }}</label>
                                                            </li>
                                                        @endforeach
                                                    </ul>
                                                @endif

                                            </div>
                                        </div>

                                    @endforeach
                                @endif

                                @if (count(json_decode($detailedProduct->colors)) > 0)
                                    <div class="row no-gutters">
                                        <div class="col-2">
                                            <div class="product-description-label mt-2">{{ translate('Color')}}:</div>
                                        </div>
                                        <div class="col-10">
                                            <ul class="list-inline checkbox-color mb-1">
                                                @foreach (json_decode($detailedProduct->colors) as $key => $color)
                                                    <li>
                                                        <input type="radio"
                                                               id="{{ $detailedProduct->id }}-color-{{ $key }}"
                                                               name="color" value="{{ $color }}"
                                                               @if($key == 0) checked @endif>
                                                        <label style="background: {{ $color }};"
                                                               for="{{ $detailedProduct->id }}-color-{{ $key }}"
                                                               data-toggle="tooltip"></label>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>

                                    <hr>
                                @endif

                                <!-- Quantity + Add to cart -->
                                <div class="row no-gutters">
                                    <div class="col-2">
                                        <div class="product-description-label mt-2">{{ translate('Quantity')}}:</div>
                                    </div>
                                    <div class="col-10">
                                        <div class="product-quantity d-flex align-items-center">
                                            <div class="input-group input-group--style-2 pr-3" style="width: 160px;">
                                                <span class="input-group-btn">
                                                    <button class="btn btn-number" type="button" data-type="minus"
                                                            data-field="quantity" disabled="disabled">
                                                        <i class="la la-minus"></i>
                                                    </button>
                                                </span>
                                                <input type="text" name="quantity"
                                                       class="form-control h-auto input-number text-center"
                                                       placeholder="1" value="{{ $detailedProduct->min_qty ?? 1 }}"
                                                       min="{{ $detailedProduct->min_qty ?? 1 }}" max="10">
                                                <span class="input-group-btn">
                                                    <button class="btn btn-number" type="button" data-type="plus"
                                                            data-field="quantity">
                                                        <i class="la la-plus"></i>
                                                    </button>
                                                </span>
                                            </div>
                                            <!-- <div class="avialable-amount">(<span id="available-quantity">{{ $qty }}</span> {{ translate('available')}})</div> -->
                                        </div>
                                    </div>
                                </div>

                                <hr>

                                <div class="row no-gutters pb-3 d-none" id="chosen_price_div">
                                    <div class="col-2">
                                        <div class="product-description-label">{{ translate('Total Price')}}:</div>
                                    </div>
                                    <div class="col-10">
                                        <div class="product-price">
                                            <strong id="chosen_price">

                                            </strong>
                                        </div>
                                    </div>
                                </div>

                            </form>

                            <style type="text/css">
                                .check-delivery {
                                    position: relative;
                                    padding: 10px 0
                                }

                                .check-delivery i {
                                    position: absolute;
                                    top: 18px
                                }

                                .check-delivery input {
                                    border: 0;
                                    border-bottom: solid 1px #ccc;
                                    padding-left: 15px;
                                    padding-bottom: 5px;
                                    width: 180px;
                                    font-size: 14px
                                }

                                .check-delivery .btn {
                                    background: none;
                                    border: 0;
                                    font-weight: 700;
                                    color: #e8492e
                                }

                                .green {
                                    color: #1e7722;
                                }
                            </style>

                            <input type="hidden" id="product_hidden_price"
                                   value="{{home_discounted_price_currency($detailedProduct->id)}}">

                            <div class="check-delivery">
                                @if(Auth::check())
                                    @php $defaultAddress = Auth::user()->addresses->where('set_default', 1)->first(); @endphp
                                    @if(!empty($defaultAddress) && Estimate_delivery($defaultAddress->postal_code, $detailedProduct->id) != '0')
                                        <div><i class="fa fa-map-marker"></i>
                                            <input placeholder="Enter delivery pincode" type="text" class="est_delivery"
                                                   value="@if(Session::has('postal_code')){{Session::get('postal_code')}}@else{{$defaultAddress->postal_code}}@endif"
                                                   maxlength="6">
                                            <button class="btn" id="Est_del" productid="{{$detailedProduct->id}}">
                                                Check
                                            </button>
                                        </div>
                                        <strong><p class="deliverystatus">Delivery by

                                                {{Estimate_delivery($defaultAddress->postal_code, $detailedProduct->id) }}
                                                |
                                                @if(home_discounted_price_currency($detailedProduct->id) > 1000)
                                                    <span class="green">Free Shipping</span>
                                                    <strike>&#x20b9;49.00</strike>
                                                @else
                                                    <span class="green">Shipping & Handling Cost</span> &#x20b9;49.00
                                                @endif

                                            </p></strong>
                                    @else
                                        <div><i class="fa fa-map-marker"></i>
                                            <input placeholder="Enter delivery pincode" type="text" class="est_delivery"
                                                   maxlength="6" value="{{Session::get('postal_code')}}">
                                            <button class="btn" id="Est_del" productid="{{$detailedProduct->id}}">
                                                Check
                                            </button>
                                        </div>
                                        <strong><p class="deliverystatus">Usually delivered in 2-3 days!<br>
                                                Enter pincode for exact delivery dates/charges</p></strong>
                                        <strong><p>Minimum Order Quantity : {{$detailedProduct->min_qty}}</p></strong>
                                    @endif
                                @else
                                    <div><i class="fa fa-map-marker"></i>
                                        <input placeholder="Enter delivery pincode" type="text" class="est_delivery"
                                               maxlength="6" value="{{Session::get('postal_code')}}">
                                        <button class="btn" id="Est_del" productid="{{$detailedProduct->id}}">Check
                                        </button>
                                    </div>
                                    <strong><p class="deliverystatus">Usually delivered in 2-3 days!<br>
                                            Enter pincode for exact delivery dates/charges</p></strong>
                                    <strong><p>Minimum Order Quantity : {{$detailedProduct->min_qty}}</p></strong>
                                @endif
                            </div>

                            <div class="d-table width-100 mt-3">
                                <div class="d-table-cell">
                                    <!-- Buy Now button -->
                                    @if ($qty > 0)
                                        <button type="button"
                                                class="btn btn-styled btn-base-1 btn-icon-left strong-700 hov-bounce hov-shaddow buy-now"
                                                onclick="buyNow()">
                                            <i class="la la-shopping-cart"></i> {{ translate('Buy Now')}}
                                        </button>
                                        <button type="button"
                                                class="btn btn-styled btn-alt-base-1 c-white btn-icon-left strong-700 hov-bounce hov-shaddow ml-2 add-to-cart"
                                                onclick="addToCart()">
                                            <i class="la la-shopping-cart"></i>
                                            <span class="d-none d-md-inline-block"> {{ translate('Add to cart')}}</span>
                                        </button>
                                    @else
                                        <!--  <button type="button" class="btn btn-styled btn-base-3 btn-icon-left strong-700 showbuttonClass" disabled>
                                            <i class="la la-cart-arrow-down"></i> {{ translate('Sold Out')}}
                                        </button> -->
                                    @endif

                                    <button type="button"
                                            class="btn btn-styled btn-base-3 btn-icon-left strong-700 showbuttonClass"
                                            disabled style="display: none;">
                                        <i class="la la-cart-arrow-down"></i> {{ translate('Sold Out')}}
                                    </button>
                                </div>
                            </div>

                            <div class="d-table width-100 mt-3">
                                <div class="d-table-cell">
                                    <!-- Add to wishlist button -->
                                    <button type="button" class="btn pl-0 btn-link strong-700"
                                            onclick="addToWishList({{ $detailedProduct->id }})">
                                        {{ translate('Add to wishlist')}}
                                    </button>
                                    <!-- Add to compare button -->
                                    <button type="button" class="btn btn-link btn-icon-left strong-700"
                                            onclick="addToCompare({{ $detailedProduct->id }})">
                                        {{ translate('Add to compare')}}
                                    </button>
                                    @if(Auth::check() && $addons->where('unique_identifier', 'affiliate_system')->first() != null && $addons->where('unique_identifier', 'affiliate_system')->first()->activated && (\App\AffiliateOption::where('type', 'product_sharing')->first()->status || \App\AffiliateOption::where('type', 'category_wise_affiliate')->first()->status) && Auth::user()->affiliate_user != null && Auth::user()->affiliate_user->status)
                                        @php
                                            if(Auth::check()){
                                                if(Auth::user()->referral_code == null){
                                                    Auth::user()->referral_code = substr(Auth::user()->id.Str::random(10), 0, 10);
                                                    Auth::user()->save();
                                                }
                                                $referral_code = Auth::user()->referral_code;
                                                $referral_code_url = URL::to('/product').'/'.$detailedProduct->slug."?product_referral_code=$referral_code";
                                            }
                                        @endphp
                                        <div class="form-group">
                                            <textarea id="referral_code_url" class="form-control" readonly type="text"
                                                      style="display:none">{{$referral_code_url}}</textarea>
                                        </div>
                                        <button type=button id="ref-cpurl-btn" class="btn btn-sm btn-secondary"
                                                data-attrcpy="{{ translate('Copied')}}"
                                                onclick="CopyToClipboard('referral_code_url')">{{ translate('Copy the Promote Link')}}</button>
                                    @endif
                                </div>
                            </div>

                            <hr class="mt-2">

                            @php
                                $refund_request_addon = $addons->where('unique_identifier', 'refund_request')->first();
                                $refund_sticker = $business->where('type', 'refund_sticker')->first();
                            @endphp

                            <div class="row no-gutters mt-3">
                                <div class="col-2">
                                    <div class="product-description-label">{{ translate('Refund')}}:</div>
                                </div>
                                <div class="col-10">
                                    <a href="{{ route('returnpolicy') }}"
                                       target="_blank"> @if ($refund_sticker != null && $refund_sticker->value != null)
                                            <img src="{{ my_asset($refund_sticker->value) }}" height="36">
                                        @else
                                            <img
                                                src="{{ asset('frontend/images/refund-sticker.jpg') }}"
                                                height="36">
                                        @endif</a>
                                    <a href="{{ route('returnpolicy') }}" class="ml-2" target="_blank">View Policy</a>
                                </div>
                            </div>
                            @if ($detailedProduct->added_by == 'seller')
                                <div class="row no-gutters mt-3">
                                    <div class="col-2">
                                        <div class="product-description-label">{{ translate('Seller Guarantees')}}:
                                        </div>
                                    </div>
                                    <div class="col-10">
                                        @if ($detailedProduct->productSeller->seller->verification_status == 1)
                                            {{ translate('Verified seller')}}
                                        @else
                                            {{ translate('Non verified seller')}}
                                        @endif
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="gry-bg">
        <div class="container">
            <div class="row">
                @livewire('products.top-selling-products-by-seller',['product' => $detailedProduct])
                <div class="col-xl-9">
                    <div class="product-desc-tab bg-white">
                        <div class="tabs tabs--style-2">
                            <ul class="nav nav-tabs justify-content-center sticky-top bg-white">
                                <li class="nav-item">
                                    <a href="#tab_default_1" data-toggle="tab"
                                       class="nav-link text-uppercase strong-600 active show">{{ translate('Description')}}</a>
                                </li>
                                @if($detailedProduct->video_link != null)
                                    <li class="nav-item">
                                        <a href="#tab_default_2" data-toggle="tab"
                                           class="nav-link text-uppercase strong-600">{{ translate('Video')}}</a>
                                    </li>
                                @endif
                                @if($detailedProduct->pdf != null)
                                    <li class="nav-item">
                                        <a href="#tab_default_3" data-toggle="tab"
                                           class="nav-link text-uppercase strong-600">{{ translate('Downloads')}}</a>
                                    </li>
                                @endif
                                <li class="nav-item">
                                    <a href="#tab_default_4" data-toggle="tab"
                                       class="nav-link text-uppercase strong-600">{{ translate('Reviews')}}</a>
                                </li>
                            </ul>

                            <div class="tab-content pt-0">
                                <div class="tab-pane active show" id="tab_default_1">
                                    <div class="py-2 px-4">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="mw-100 overflow--hidden aiz-product-description">
                                                                                                    </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="tab-pane" id="tab_default_2">
                                    <div class="fluid-paragraph py-2">
                                        <!-- 16:9 aspect ratio -->
                                        <div class="embed-responsive embed-responsive-16by9 mb-5">
                                            @if ($detailedProduct->video_provider == 'youtube' && $detailedProduct->video_link != null)
                                                <iframe class="embed-responsive-item"
                                                        src="https://www.youtube.com/embed/{{ explode('=', $detailedProduct->video_link)[1] }}"></iframe>
                                            @elseif ($detailedProduct->video_provider == 'dailymotion' && $detailedProduct->video_link != null)
                                                <iframe class="embed-responsive-item"
                                                        src="https://www.dailymotion.com/embed/video/{{ explode('video/', $detailedProduct->video_link)[1] }}"></iframe>
                                            @elseif ($detailedProduct->video_provider == 'vimeo' && $detailedProduct->video_link != null)
                                                <iframe
                                                    src="https://player.vimeo.com/video/{{ explode('vimeo.com/', $detailedProduct->video_link)[1] }}"
                                                    width="500" height="281" frameborder="0" webkitallowfullscreen
                                                    mozallowfullscreen allowfullscreen></iframe>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane" id="tab_default_3">
                                    <div class="py-2 px-4">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <a href="{{ my_asset($detailedProduct->pdf) }}">{{  translate('Download') }}</a>
                                            </div>
                                        </div>
                                        <span class="space-md-md"></span>
                                    </div>
                                </div>
                                <div class="tab-pane" id="tab_default_4">
                                    <div class="fluid-paragraph py-4">
                                        @if(count($detailedProduct->reviews) > 0)
                                            @foreach ($detailedProduct->reviews as $key => $review)
                                                <div class="block block-comment">
                                                    <div class="block-image">
                                                        <img
                                                            src="{{ asset('frontend/images/placeholder.jpg') }}"
                                                            @if($review->user->avatar_original !=null)
                                                                data-src="{{ my_asset($review->user->avatar_original) }}"
                                                            @else
                                                                data-src="{{ my_asset('img/avatar-place.png') }}"
                                                            @endif
                                                            class="rounded-circle lazyload"
                                                        >
                                                    </div>
                                                    <div class="block-body">
                                                        <div class="block-body-inner">
                                                            <div class="row no-gutters">
                                                                <div class="col">
                                                                    <h3 class="heading heading-6">
                                                                        <a href="javascript:void(0);">{{ $review->display_name ?? $review->user->name }}</a>
                                                                    </h3>
                                                                    {{--<h5 class="heading heading-6">
                                                                        <a href="javascript:void(0);">{{ $review->heading ?? null }}</a>
                                                                    </h5>
    --}}
                                                                    <span class="comment-date">
                                                                    {{ date('M Y', strtotime($review->created_at)) }}
                                                                </span>
                                                                    @if($review->images->isNotEmpty() )
                                                                        <div class="row mt-2 mb-2">
                                                                            @foreach($review->images as $reviewImage)
                                                                                <div class="col-xs-6 col-md-4">
                                                                                    <a href="{{ my_asset($reviewImage->path) }}"
                                                                                       target="_blank"
                                                                                       class="thumbnail">
                                                                                        <img
                                                                                            src="{{ my_asset($reviewImage->path) }}"
                                                                                            height="80" width="80"
                                                                                            alt=""
                                                                                            data-src="{{ my_asset($reviewImage->path) }}"></a>
                                                                                </div>
                                                                            @endforeach
                                                                        </div>
                                                                    @endif
                                                                </div>
                                                                <div class="col">
                                                                    <div class="rating text-right clearfix d-block">
                                                                    <span
                                                                        class="star-rating star-rating-sm float-right">
                                                                        @for ($i=0; $i < $review->rating; $i++)
                                                                            <i class="fa fa-star active"></i>
                                                                        @endfor
                                                                        @for ($i=0; $i < 5-$review->rating; $i++)
                                                                            <i class="fa fa-star"></i>
                                                                        @endfor
                                                                    </span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <h5 class="heading-6">
                                                                <a href="javascript:void(0)">{{ ucwords($review->heading) ?? null }}</a>
                                                            </h5>
                                                            <p class="comment-text">
                                                                {{ $review->comment }}
                                                            </p>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        @else
                                            <div class="text-center">
                                                {{  translate('There have been no reviews for this product yet.') }}
                                            </div>
                                        @endif

                                        @if(Auth::check())
                                            @php
                                                $commentable = false;
                                            @endphp
                                            @foreach ($detailedProduct->orderDetails as $key => $orderDetail)
                                                @if($orderDetail->order != null && $orderDetail->order->user_id == Auth::user()->id && $orderDetail->delivery_status == 'delivered' && \App\Review::where('user_id', Auth::user()->id)->where('product_id', $detailedProduct->id)->first() == null)
                                                    @php
                                                        $commentable = true;
                                                    @endphp
                                                @endif
                                            @endforeach
                                            @if ($commentable)
                                                <div class="leave-review">
                                                    <div class="section-title section-title--style-1">
                                                        <h3 class="section-title-inner heading-6 strong-600 text-uppercase">
                                                            {{ translate('Write a review')}}
                                                        </h3>
                                                    </div>
                                                    <form class="form-default" role="form"
                                                          action="{{ route('reviews.store') }}" method="POST">
                                                        @csrf
                                                        <input type="hidden" name="product_id"
                                                               value="{{ $detailedProduct->id }}">
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <label for=""
                                                                           class="text-uppercase c-gray-light">{{ translate('Your name')}}</label>
                                                                    <input type="text" name="name"
                                                                           value="{{ Auth::user()->name }}"
                                                                           class="form-control" disabled required>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <label for=""
                                                                           class="text-uppercase c-gray-light">{{ translate('Email')}}</label>
                                                                    <input type="text" name="email"
                                                                           value="{{ Auth::user()->email }}"
                                                                           class="form-control" required disabled>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-sm-12">
                                                                <div class="c-rating mt-1 mb-1 clearfix d-inline-block">
                                                                    <input type="radio" id="star5" name="rating"
                                                                           value="5" required />
                                                                    <label class="star" for="star5" title="Awesome"
                                                                           aria-hidden="true"></label>
                                                                    <input type="radio" id="star4" name="rating"
                                                                           value="4" required />
                                                                    <label class="star" for="star4" title="Great"
                                                                           aria-hidden="true"></label>
                                                                    <input type="radio" id="star3" name="rating"
                                                                           value="3" required />
                                                                    <label class="star" for="star3" title="Very good"
                                                                           aria-hidden="true"></label>
                                                                    <input type="radio" id="star2" name="rating"
                                                                           value="2" required />
                                                                    <label class="star" for="star2" title="Good"
                                                                           aria-hidden="true"></label>
                                                                    <input type="radio" id="star1" name="rating"
                                                                           value="1" required />
                                                                    <label class="star" for="star1" title="Bad"
                                                                           aria-hidden="true"></label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row mt-3">
                                                            <div class="col-sm-12">
                                                                <textarea class="form-control" rows="4" name="comment"
                                                                          placeholder="{{ translate('Your review')}}"
                                                                          required></textarea>
                                                            </div>
                                                        </div>

                                                        <div class="text-right">
                                                            <button type="submit"
                                                                    class="btn btn-styled btn-base-1 btn-circle mt-4">
                                                                {{ translate('Send review')}}
                                                            </button>
                                                        </div>
                                                    </form>
                                                </div>
                                            @endif
                                        @endif
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    @livewire('products.related-products',['product' => $detailedProduct])
                </div>
            </div>
        </div>
    </section>
    <div class="modal fade" id="chat_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-zoom product-modal" id="modal-size" role="document">
            <div class="modal-content position-relative">
                <div class="modal-header">
                    <h5 class="modal-title strong-600 heading-5">{{ translate('Any query about this product')}}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form class="" action="{{ route('conversations.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="product_id" value="{{ $detailedProduct->id }}">
                    <div class="modal-body gry-bg px-3 pt-3">
                        <div class="form-group">
                            <input type="text" class="form-control mb-3" name="title"
                                   value="{{ $detailedProduct->name }}" placeholder="{{ translate('Product Name') }}"
                                   required>
                        </div>
                        <div class="form-group">
                            <textarea class="form-control" rows="8" name="message" required
                                      placeholder="{{ translate('Your Question') }}">{{ route('product', $detailedProduct->slug) }}</textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-link"
                                data-dismiss="modal">{{ translate('Cancel')}}</button>
                        <button type="submit" class="btn btn-base-1 btn-styled">{{ translate('Send')}}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="login_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-zoom" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="exampleModalLabel">{{ translate('Login')}}</h6>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="p-3">
                        <form class="form-default" role="form" action="{{ route('cart.login.submit') }}" method="POST">
                            @csrf
                            @if ($addons->where('unique_identifier', 'otp_system')->first() != null && $addons->where('unique_identifier', 'otp_system')->first()->activated)
                                <span>{{  translate('Use country code before number') }}</span>
                            @endif
                            <div class="form-group">
                                @if ($addons->where('unique_identifier', 'otp_system')->first() != null && $addons->where('unique_identifier', 'otp_system')->first()->activated)
                                    <input type="text"
                                           class="form-control h-auto form-control-lg {{ $errors->has('email') ? ' is-invalid' : '' }}"
                                           value="{{ old('email') }}" placeholder="{{ translate('Email Or Phone')}}"
                                           name="email" id="email">
                                @else
                                    <input type="email"
                                           class="form-control h-auto form-control-lg {{ $errors->has('email') ? ' is-invalid' : '' }}"
                                           value="{{ old('email') }}" placeholder="{{  translate('Email') }}"
                                           name="email">
                                @endif
                            </div>

                            <div class="form-group">
                                <input type="password" name="password" class="form-control form-control-lg h-auto"
                                       placeholder="{{ translate('Password')}}">
                            </div>

                            <div class="row align-items-center">
                                <div class="col-md-6">
                                    <a href="#"
                                       class="link link-xs link--style-3">{{ translate('Forgot password?')}}</a>
                                </div>
                                <div class="col-md-6 text-right">
                                    <button type="submit"
                                            class="btn btn-styled btn-base-1 px-4">{{ translate('Sign in')}}</button>
                                </div>
                            </div>
                        </form>

                        <div class="text-center pt-3">
                            <p class="text-md">
                                {{ translate('Need an account?')}} <a href="{{ route('user.registration') }}"
                                                                      class="strong-600">{{ translate('Register Now')}}</a>
                            </p>
                        </div>
                        @if($business->where('type', 'google_login')->first()->value == 1 || $business->where('type', 'facebook_login')->first()->value == 1 || $business->where('type', 'twitter_login')->first()->value == 1)
                            <div class="or or--1 my-3 text-center">
                                <span>{{ translate('or')}}</span>
                            </div>
                            @if($business->where('type', 'google_login')->first()->value == 1)
                                <a href="{{ route('social.login', ['provider' => 'google']) }}"
                                   class="btn btn-styled btn-block btn-google btn-icon--2 btn-icon-left px-4 mb-3">
                                    <i class="icon fa fa-google"></i> {{ translate('Login with Google')}}
                                </a>
                            @endif
                            @if ($business->where('type', 'facebook_login')->first()->value == 1)
                                <a href="{{ route('social.login', ['provider' => 'facebook']) }}"
                                   class="btn btn-styled btn-block btn-facebook btn-icon--2 btn-icon-left px-4 mb-3">
                                    <i class="icon fa fa-facebook"></i> {{ translate('Login with Facebook')}}
                                </a>
                            @endif
                            @if ($business->where('type', 'twitter_login')->first()->value == 1)
                                <a href="{{ route('social.login', ['provider' => 'twitter']) }}"
                                   class="btn btn-styled btn-block btn-twitter btn-icon--2 btn-icon-left px-4 mb-3">
                                    <i class="icon fa fa-twitter"></i> {{ translate('Login with Twitter')}}
                                </a>
                            @endif
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('script')
    <script type="text/javascript">
        $(document).ready(function () {
            $('#share').jsSocials({
                shareIn: "popup",
                showLabel: false,
                showCount: false,
                shares: ["email", "facebook", "whatsapp"]
            });
            getVariantPrice();
        });

        function CopyToClipboard(containerid) {
            if (document.selection) {
                var range = document.body.createTextRange();
                range.moveToElementText(document.getElementById(containerid));
                range.select().createTextRange();
                document.execCommand("Copy");

            } else if (window.getSelection) {
                var range = document.createRange();
                document.getElementById(containerid).style.display = "block";
                range.selectNode(document.getElementById(containerid));
                window.getSelection().addRange(range);
                document.execCommand("Copy");
                document.getElementById(containerid).style.display = "none";
            }
            showFrontendAlert('success', 'Copied');
        }

        function show_chat_modal() {
            @if (Auth::check())
            $('#chat_modal').modal('show');
            @else
            $('#login_modal').modal('show');
            @endif
        }

    </script>
    <style type="text/css">
        .checkbox-color label {
            width: 1.5rem !important;
            height: 1.5rem !important;
        }

        .product_cat span {
            font-size: 0.75rem;
            color: #818a91;
            position: relative;
        }

        .product_cat {
            margin-bottom: 6px;
        }
    </style>
@endsection