@extends('frontend.layouts.web.app')
@section('style')
    <style>
        @if(\App\Models\Language::where('code', Session::get('locale', Config::get('app.locale')))->first()->rtl == 1)
            .small-img .icon-left {
            left: 0;
        }

        .small-container .show-small-img {
            float: right;
        }
        @endif
    </style>
@endsection
@section('meta_title')
    {{ $detailedProduct->getTranslation('meta_title') }}
@stop

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

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

@section('meta')
    <!-- Schema.org markup for Google+ -->
    <meta itemprop="name" content="{{ $detailedProduct->getTranslation('meta_title') }}">
    <meta itemprop="description" content="{{ $detailedProduct->getTranslation('meta_description') }}">
    <meta itemprop="image" content="{{ uploaded_asset($detailedProduct->getTranslation('meta_img')) }}">

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

    <!-- Open Graph data -->
    <meta property="og:title" content="{{ $detailedProduct->getTranslation('meta_title') }}"/>
    <meta property="og:type" content="og:product"/>
    <meta property="og:url" content="{{ route('product', $detailedProduct->getTranslation('slug')) }}"/>
    <meta property="og:image" content="{{ uploaded_asset($detailedProduct->getTranslation('meta_img')) }}"/>
    <meta property="og:description" content="{{ $detailedProduct->meta_description }}"/>
    <meta property="og:site_name" content="{{ get_setting('meta_title') }}"/>
    <meta property="og:price:amount" content="{{ single_price($detailedProduct->unit_price) }}"/>
    <meta property="product:price:currency"
          content="{{ \App\Models\Currency::findOrFail(get_setting('system_default_currency'))->code }}"/>
    <meta property="fb:app_id" content="{{ env('FACEBOOK_PIXEL_ID') }}">
@endsection

@section('content')
    <section class="mb-4 pt-3">
        <div class="container">
            <div class="bg-white shadow-sm rounded p-3">
                <div class="row">
                    <div class="col-xl-5 col-lg-6 mb-4">
                        @php
                            $photos = explode(',', $detailedProduct->photos);
                        @endphp

                        <div class="show">
                            <img id="show-img" width="400" height="400"
                                 src="{{ uploaded_asset($detailedProduct->thumbnail_img) }}"
                                 onerror="this.onerror=null;this.src='{{ static_asset('assets/img/placeholder.jpg') }}';">
                        </div>

                        <div class="small-img">
                            <img src="{{asset('assets/img/next-icon.png')}}" class="icon-left" alt="" id="prev-img">
                            <div class="small-container">
                                <div id="small-img-roll">
                                    <!-- Secondary carousel image thumbnail gallery -->
                                    <img id="show-img" class="show-small-img"
                                         src="{{ uploaded_asset($detailedProduct->thumbnail_img) }}"
                                         onerror="this.onerror=null;this.src='{{ static_asset('assets/img/placeholder.jpg') }}';">

                                    @foreach ($photos as $key => $photo)
                                        @if($photo)
                                            <img id="show-img" class="show-small-img"
                                                 src="{{ uploaded_asset($photo) }}"
                                                 onerror="this.onerror=null;this.src='{{ static_asset('assets/img/placeholder.jpg') }}';">
                                        @endif
                                    @endforeach
                                    @foreach ($detailedProduct->stocks as $key => $stock)
                                        @if ($stock->image != null)
                                            <img id="show-img" class="show-small-img"
                                                 src="{{ uploaded_asset($stock->image) }}"
                                                 onerror="this.onerror=null;this.src='{{ static_asset('assets/img/placeholder.jpg') }}';">

                                        @endif
                                    @endforeach
                                </div>
                            </div>
                            <img src="{{asset('assets/img/next-icon.png')}}" class="icon-right" alt="" id="next-img">
                        </div>
                    </div>
                    <div class="col-xl-7 col-lg-6">
                        <div class="text-left">
                            <h3 class="mb-2 fs-20 fw-600">
                                {{ $detailedProduct->getTranslation('name') }}
                            </h3>

                            <div class="row align-items-center product-grid ">
                                <div class="col-12 d-flex">
                                    @php
                                        $total = 0;
                                        $total += $detailedProduct->reviews->count();
                                    @endphp
                                    <span class="showcase-rating d-flex">
                                        {{ renderStarRating($detailedProduct->rating) }}

                                    <span class="ml-2 h5">({{ $total }})</span>
                                         </span>
                                </div>
                                @if ($detailedProduct->est_shipping_days)
                                    <div class="col-auto ml">
                                        <small class="mr-2 opacity-50">{{ translate('Estimate Shipping Time') }}:
                                        </small>{{ $detailedProduct->est_shipping_days }} {{ translate('Days') }}
                                    </div>
                                @endif
                            </div>


                            @if ($detailedProduct->wholesale_product)
                                <table class="table mb-0">
                                    <thead>
                                    <tr>
                                        <th>{{ translate('Min Qty') }}</th>
                                        <th>{{ translate('Max Qty') }}</th>
                                        <th>{{ translate('Unit Price') }}</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach ($detailedProduct->stocks->first()->wholesalePrices as $wholesalePrice)
                                        <tr>
                                            <td>{{ $wholesalePrice->min_qty }}</td>
                                            <td>{{ $wholesalePrice->max_qty }}</td>
                                            <td>{{ single_price($wholesalePrice->price) }}</td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            @else
                                @if (home_price($detailedProduct) != home_discounted_price($detailedProduct))
                                    <div class="row">
                                        <div class="col-sm-4">
                                            <div class="card price-box-product">
                                                <div class="card-body p-1 ">
                                                    @if(discount_in_percentage($detailedProduct) > 0)
                                                        <a class="sale_product">
                                                            <ion-icon
                                                                name="flash-outline"></ion-icon> {{translate('sale').' '. discount_in_percentage($detailedProduct)}}
                                                            %</a>
                                                    @endif
                                                    <span
                                                        class="text-decoration-line-through opacity-50">{{ home_price($detailedProduct) }}</span>
                                                    <span
                                                        class="text-web h5 ml-2"> {{ home_discounted_price($detailedProduct) }}</span>
                                                    @if ($detailedProduct->unit != null)
                                                        <span
                                                            class="opacity-70">/{{ $detailedProduct->getTranslation('unit') }}</span>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @else
                                    <div class="row">
                                        <div class="col-sm-4">
                                            <div class="card price-box-product">
                                                <div class="card-body p-1 ">

                                                    <span
                                                        class="text-web h5 ml-2"> {{ home_discounted_price($detailedProduct) }}</span>
                                                    @if ($detailedProduct->unit != null)
                                                        <span
                                                            class="opacity-70">/{{ $detailedProduct->getTranslation('unit') }}</span>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            @endif

                            @if (  $detailedProduct->earn_point > 0)
                                <div class="row no-gutters mt-4">
                                    <div class="col-sm-2">
                                        <div class="opacity-50 ">{{ translate('Club Point') }}:</div>
                                    </div>
                                    <div class="col-sm-10">
                                        <div
                                            class="d-inline-block rounded px-2 bg-soft-primary border-soft-primary border">
                                            <span class="strong-700">{{ $detailedProduct->earn_point }}</span>
                                        </div>
                                    </div>
                                </div>
                            @endif

                            <br>

                            <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-sm-2">
                                                <div class="opacity-50 ">
                                                    {{ \App\Models\Attribute::find($choice->attribute_id)->getTranslation('name') }}
                                                    :
                                                </div>
                                            </div>
                                            <div class="col-sm-10">
                                                <div class="aiz-radio-inline">
                                                    @foreach ($choice->values as $key => $value)
                                                        <label class="aiz-megabox pl-0 mr-2">
                                                            <input type="radio"
                                                                   name="attribute_id_{{ $choice->attribute_id }}"
                                                                   value="{{ $value }}"
                                                                   @if ($key == 0) checked @endif>
                                                            <span
                                                                class="aiz-megabox-elem rounded d-flex align-items-center justify-content-center py-2 px-3 mb-2">
                                                                {{ $value }}
                                                            </span>
                                                        </label>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                @endif
                                <div class="row align-items-center">


                                    @if ($detailedProduct->brand != null)
                                        <div class="col-sm-1">
                                            <div class="opacity-50 ">{{ translate('Brand') }}:</div>
                                        </div>
                                        <div class="col-sm-11">
                                            <a class="d-flex"
                                               href="{{ route('products.brand', $detailedProduct->brand->slug) }}">
                                                <img src="{{ uploaded_asset($detailedProduct->brand->logo) }}"
                                                     alt="{{ $detailedProduct->brand->getTranslation('name') }}"
                                                     height="30">
                                                <span>{{ $detailedProduct->brand->getTranslation('name') }}</span>
                                            </a>
                                        </div>
                                    @endif
                                </div>
                                <br>
                                @if (count(json_decode($detailedProduct->colors)) > 0)
                                    <div class="row no-gutters">
                                        <div class="col-sm-1">
                                            <div class="opacity-50 ">{{ translate('Color') }}:</div>
                                        </div>
                                        <div class="col-sm-11">
                                            <div class="aiz-radio-inline">
                                                @foreach (json_decode($detailedProduct->colors) as $key => $color)
                                                    <label class="aiz-megabox pl-0 mr-2" data-toggle="tooltip"
                                                           data-title="{{ \App\Models\Color::where('code', $color)->first()->name }}">
                                                        <input type="radio" name="color"
                                                               value="{{ \App\Models\Color::where('code', $color)->first()->name }}"
                                                               @if ($key == 0) checked @endif>
                                                        <span
                                                            class="aiz-megabox-elem rounded d-flex align-items-center justify-content-center p-1 mb-2">
                                                            <span class="size-30px d-inline-block rounded"
                                                                  style="background: {{ $color }};padding: 12px"></span>
                                                        </span>
                                                    </label>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>

                                    <hr>
                                @endif


                                <div class="row no-gutters pb-3 d-none" id="chosen_price_div">
                                    <div class="col-sm-3">
                                        <div class="opacity-50 ">{{ translate('Total Price') }}:</div>
                                    </div>
                                    <div class="col-sm-9 d-flex">
                                        <div class="product-price mr-3">
                                            <strong id="chosen_price" class="h4 fw-600 text-web">

                                            </strong>
                                        </div>
                                        <div class="product-quantity d-flex align-items-center"
                                             style="margin-left: 5%;">
                                            <div class="row no-gutters align-items-center aiz-plus-minus"
                                                 style="width: 150px;margin-right: 10px">
                                                <button class="btn col-auto  btn-circle btn-light"
                                                        type="button" data-type="minus" data-field="quantity"
                                                        disabled="">
                                                    <ion-icon name="remove-circle-outline"></ion-icon>
                                                </button>
                                                <input type="number" name="quantity"
                                                       class="col border-0 text-center flex-grow-1 fs-16 input-number"
                                                       placeholder="1" value="{{ $detailedProduct->min_qty }}"
                                                       min="{{ $detailedProduct->min_qty }}" max="10"
                                                       lang="en">
                                                <button class="btn  col-auto btn-circle btn-light"
                                                        type="button" data-type="plus" data-field="quantity">
                                                    <ion-icon name="add-circle-outline"></ion-icon>
                                                </button>
                                            </div>
                                            @php
                                                $qty = 0;
                                                foreach ($detailedProduct->stocks as $key => $stock) {
                                                    $qty += $stock->qty;
                                                }
                                            @endphp
                                            <div class="avialable-amount opacity-60 ">
                                                @if ($detailedProduct->stock_visibility_state == 'quantity')
                                                    (<span id="available-quantity">{{ $qty }}</span>
                                                    {{ translate('qty') }})
                                                @elseif($detailedProduct->stock_visibility_state == 'text' && $qty >= 1)
                                                    (<span
                                                        id="available-quantity">{{ translate('In Stock') }}</span>)
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </form>

                            <div class="mt-3 d-flex">
                                @if ($detailedProduct->external_link != null)
                                    <a type="button" class="btn btn-primary buy-now fw-600"
                                       href="{{ $detailedProduct->external_link }}">
                                        <i class="la la-share"></i> {{ translate($detailedProduct->external_link_btn) }}
                                    </a>
                                @else
                                    <button type="button" class="btn btn-primary m-2 d-flex fw-600"
                                            onclick="addToCart()">
                                        <ion-icon name="cart-outline" class="mt-1"></ion-icon>
                                        {{ translate('Add to cart') }}
                                    </button>
                                    <button type="button" class="btn d-flex btn-primary m-2 buy-now fw-600"
                                            onclick="buyNow()">
                                        <ion-icon name="card-outline"
                                                  class="mt-1"></ion-icon> {{ translate('Buy Now') }}
                                    </button>
                                    <button type="button" class="btn btn-heart  "
                                            onclick="addToWishList({{ $detailedProduct->id }})">
                                        <ion-icon name="heart-outline" class="h4 mt-2"></ion-icon>

                                    </button>
                                @endif
                                <button type="button" class="btn btn-secondary out-of-stock fw-600 d-none" disabled>
                                    <i class="la la-cart-arrow-down"></i> {{ translate('Out of Stock') }}
                                </button>
                            </div>


                            <div class="d-table width-100 mt-3">
                                <div class="d-table-cell">


                                    <!-- Add to compare button -->
                                    <button type="button" class="btn btn-link d-flex btn-icon-left fw-600"
                                            onclick="addToCompare({{ $detailedProduct->id }})">
                                        <ion-icon name="repeat-outline"></ion-icon> {{ translate('Add to compare') }}
                                    </button>
                                    @if (Auth::check() &&  (\App\Models\AffiliateOption::where('type', 'product_sharing')->first()->status || \App\Models\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->getTranslation('slug') . "?product_referral_code=$referral_code";
                                            }
                                        @endphp
                                        <div>
                                            <button type=button id="ref-cpurl-btn" class="btn btn-sm btn-secondary"
                                                    data-attrcpy="{{ translate('Copied') }}"
                                                    onclick="CopyToClipboard(this)"
                                                    data-url="{{ $referral_code_url }}">{{ translate('Copy the Promote Link') }}</button>
                                        </div>
                                    @endif
                                </div>
                            </div>


                            @php
                                $refund_sticker = get_setting('refund_sticker');
                            @endphp

                            <div class="row no-gutters mt-3">
                                <div class="col-2">
                                    <div class="opacity-50 mt-2">{{ translate('Refund') }}:</div>
                                </div>
                                <div class="col-10">
                                    <a href="{{ route('returnpolicy') }}" target="_blank">
                                        @if ($refund_sticker != null)
                                            <img src="{{ uploaded_asset($refund_sticker) }}" height="36">
                                        @else
                                            <img src="{{ static_asset('assets/img/refund-sticker.jpg') }}"
                                                 height="36">
                                        @endif
                                    </a>
                                    {{--                                    <a href="{{ route('returnpolicy') }}" class="ml-2"--}}
                                    {{--                                       target="_blank">{{ translate('View Policy') }}</a>--}}
                                </div>
                            </div>
                            <div class="row no-gutters mt-4">
                                <div class="col-auto">
                                    <small class="mr-2 opacity-50">{{ translate('Sold by') }}: </small><br>
                                    @if ($detailedProduct->added_by == 'seller' && get_setting('vendor_system_activation') == 1)
                                        <a href="{{ route('shop.visit', $detailedProduct->user->shop->slug) }}"
                                           class="text-reset">{{ $detailedProduct->user->shop->name }}</a>
                                    @else
                                        {{ translate('Inhouse product') }}
                                    @endif
                                </div>

                                @if (get_setting('conversation_system') == 1)
                                    <div class="col-auto">
                                        <button class="btn btn-sm btn-primary"
                                                onclick="show_chat_modal()">{{ translate('Message Seller') }}</button>
                                    </div>
                                @endif
                            </div>

                            {{--                            <div class="row no-gutters mt-4">--}}
                            {{--                                <div class="col-sm-2">--}}
                            {{--                                    <div class="opacity-50 ">{{ translate('Share') }}:</div>--}}
                            {{--                                </div>--}}
                            {{--                                <div class="col-sm-10">--}}
                            {{--                                    <div class="aiz-share"></div>--}}
                            {{--                                </div>--}}
                            {{--                            </div>--}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="mb-4">
        <div class="container">
            <div class="row gutters-10">
                <div class="col-xl-3 order-1 order-xl-0">
                    @if ($detailedProduct->added_by == 'seller' && $detailedProduct->user->shop != null)
                        <div class="bg-white shadow-sm mb-3">
                            <div class="position-relative p-3 text-left">
                                @if ($detailedProduct->user->shop->verification_status)
                                    <div class="absolute-top-right p-2 bg-white z-1">
                                        <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
                                             xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
                                             viewBox="0 0 287.5 442.2" width="22" height="34">
                                            <polygon style="fill:#F8B517;"
                                                     points="223.4,442.2 143.8,376.7 64.1,442.2 64.1,215.3 223.4,215.3 "/>
                                            <circle style="fill:#FBD303;" cx="143.8" cy="143.8"
                                                    r="143.8"/>
                                            <circle style="fill:#F8B517;" cx="143.8" cy="143.8"
                                                    r="93.6"/>
                                            <polygon style="fill:#FCFCFD;"
                                                     points="143.8,55.9 163.4,116.6 227.5,116.6 175.6,154.3 195.6,215.3 143.8,177.7 91.9,215.3 111.9,154.3
                                            60,116.6 124.1,116.6 "/>
                                        </svg>
                                    </div>
                                @endif
                                <div class="opacity-50 fs-12 border-bottom">{{ translate('Sold by') }}</div>
                                <a href="{{ route('shop.visit', $detailedProduct->user->shop->slug) }}"
                                   class="text-reset d-block fw-600">
                                    {{ $detailedProduct->user->shop->name }}
                                    @if ($detailedProduct->user->shop->verification_status == 1)
                                        <span class="ml-2"><i class="fa fa-check-circle"
                                                              style="color:green"></i></span>
                                    @else
                                        <span class="ml-2"><i class="fa fa-times-circle" style="color:red"></i></span>
                                    @endif
                                </a>
                                <div class="location opacity-70">{{ $detailedProduct->user->shop->address }}</div>
                                <div class="text-center border rounded p-2 mt-3">
                                    <div class="rating">
                                        @if ($total > 0)
                                            {{ renderStarRating($detailedProduct->user->shop->rating) }}
                                        @else
                                            {{ renderStarRating(0) }}
                                        @endif
                                    </div>
                                    <div class="opacity-60 fs-12">({{ $total }}
                                        {{ translate('customer reviews') }})
                                    </div>
                                </div>
                            </div>
                            <div class="row no-gutters align-items-center border-top">
                                <div class="col">
                                    <a href="{{ route('shop.visit', $detailedProduct->user->shop->slug) }}"
                                       class="d-block btn btn-primary rounded-0">{{ translate('Visit Store') }}</a>
                                </div>
                                <div class="col">
                                    <ul class="social list-inline mb-0">
                                        <li class="list-inline-item mr-0">
                                            <a href="{{ $detailedProduct->user->shop->facebook }}" class="facebook"
                                               target="_blank">
                                                <i class="lab la-facebook-f opacity-60"></i>
                                            </a>
                                        </li>
                                        <li class="list-inline-item mr-0">
                                            <a href="{{ $detailedProduct->user->shop->google }}" class="google"
                                               target="_blank">
                                                <i class="lab la-google opacity-60"></i>
                                            </a>
                                        </li>
                                        <li class="list-inline-item mr-0">
                                            <a href="{{ $detailedProduct->user->shop->twitter }}" class="twitter"
                                               target="_blank">
                                                <i class="lab la-twitter opacity-60"></i>
                                            </a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="{{ $detailedProduct->user->shop->youtube }}" class="youtube"
                                               target="_blank">
                                                <i class="lab la-youtube opacity-60"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    @endif
                    <div class="bg-white rounded shadow-sm mb-3">
                        <div class="p-3 border-bottom fs-16 fw-600">
                            {{ translate('Top Selling Products') }}
                        </div>
                        <div class="p-3 product-minimal">
                            <div class="showcase-container">
                                @foreach (filter_products(\App\Models\Product::where('user_id', $detailedProduct->user_id)->orderBy('num_of_sale', 'desc'))->limit(6)->get()
        as $key => $top_product)
                                    <x-small-product-card :product="$top_product"></x-small-product-card>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-9 order-0 order-xl-1">
                    <div class="bg-white mb-3 shadow-sm rounded">
                        <div class="nav border-bottom aiz-nav-tabs">
                            <a href="#tab_default_1" data-toggle="tab"
                               class="p-3 fs-16 fw-600 text-reset active show">{{ translate('Description') }}</a>
                            @if ($detailedProduct->video_link != null)
                                <a href="#tab_default_2" data-toggle="tab"
                                   class="p-3 fs-16 fw-600 text-reset">{{ translate('Video') }}</a>
                            @endif
                            @if ($detailedProduct->pdf != null)
                                <a href="#tab_default_3" data-toggle="tab"
                                   class="p-3 fs-16 fw-600 text-reset">{{ translate('Downloads') }}</a>
                            @endif
                            <a href="#tab_default_4" data-toggle="tab"
                               class="p-3 fs-16 fw-600 text-reset">{{ translate('Reviews') }}</a>
                        </div>

                        <div class="tab-content pt-0">
                            <div class="tab-pane fade active show" id="tab_default_1">
                                <div class="p-4">
                                    <div class="mw-100 overflow-auto text-left aiz-editor-data">