@extends('layouts.back-end.app-seller')

@section('title', translate('product_Preview'))

@section('content')
    <div class="content container-fluid text-start">
        <div class="d-flex align-items-center justify-content-between flex-wrap gap-10 mb-3">
            <div class="">
                <h2 class="h1 mb-0 text-capitalize d-flex align-items-center gap-2">
                    <img src="{{ asset('public/assets/back-end/img/inhouse-product-list.png') }}" alt="">
                    {{ translate('product_details') }}
                </h2>
            </div>
        </div>

        <div class="card card-top-bg-element">
            <div class="card-body">
                <div>
                    <div class="media flex-nowrap flex-column flex-sm-row gap-3 flex-grow-1 align-items-center align-items-md-start">
                        <div class="d-flex flex-column align-items-center __min-w-165px">
                            <div class="position-relative">
                                @if($product?->clearanceSale)
                                    <div class="position-absolute z-index-1 badge badge-soft-warning user-select-none m-2">
                                        {{ translate('Clearance_Sale') }}
                                    </div>
                                @endif
                                <a class="aspect-1 float-left overflow-hidden"
                                   href="{{ getStorageImages(path:$product->thumbnail_full_url,type: 'backend-basic') }}"
                                   data-lightbox="product-gallery-{{ $product['id'] }}">
                                    <img class="avatar avatar-170 rounded-0 img-fit"
                                         src="{{ getStorageImages(path:$product->thumbnail_full_url,type: 'backend-basic') }}"
                                         alt="">
                                </a>
                            </div>
                            @if ($productActive && $isActive)
                                <a href="{{ route('product', $product['slug']) }}"
                                   class="btn btn-outline--primary mr-1 mt-2" target="_blank">
                                    <i class="tio-globe"></i>
                                    {{ translate('view_live') }}
                                </a>
                            @endif

                            @if ($product->digital_file_ready_full_url['path'])
                                <span data-file-path="{{ $product->digital_file_ready_full_url['path'] }}"
                                      class="btn btn-outline--primary mr-1 mt-2 text-nowrap d-flex align-items-center justify-content-center gap-1 getDownloadFileUsingFileUrl" data-toggle="tooltip" data-placement="top" data-title="{{translate('Download')}}">
                                    <i class="tio-download"></i>
                                    <span class="d-block d-md-none">
                                    {{ translate('download') }}
                                    </span>
                                </span>
                            @endif
                        </div>

                        <div class="d-block flex-grow-1 w-max-md-100">
                            <div class="d-flex flex-wrap justify-content-between align-items-center">
                                @php($languages = getWebConfig(name:'pnc_language'))
                                @php($defaultLanguage = 'en')
                                @php($defaultLanguage = $languages[0])
                                <ul class="nav nav-tabs w-fit-content mb-2">
                                    @foreach($languages as $language)
                                        <li class="nav-item text-capitalize">
                                            <a class="nav-link lang-link {{$language == $defaultLanguage? 'active':''}}"
                                            href="javascript:"
                                            id="{{$language}}-link">{{ getLanguageName($language).'('.strtoupper($language).')' }}
                                            </a>
                                        </li>
                                    @endforeach
                                </ul>
                                <div class="pb-4">
                                    <a href="{{ route('vendor.products.update', [$product['id']]) }}" class="btn btn-sm btn--primary">{{translate('Edit')}} <i class="tio-edit"></i> </a>
                                </div>
                            </div>
                            <div class="d-flex flex-wrap align-items-center flex-sm-nowrap justify-content-between gap-3 min-h-50">
                                <div class="d-flex flex-wrap gap-2 align-items-center">
                                    @if ($product->product_type == 'physical' && !empty($product->color_image) && count(json_decode($product->color_image))>0)
                                        @foreach ($product->color_images_full_url as $colorImageKey => $photo)
                                            <div class="{{$colorImageKey > 4 ? 'd-none' : ''}}">
                                                <a class="aspect-1 float-left overflow-hidden d-block border rounded-lg position-relative"
                                                   href="{{ getStorageImages(path: $photo['image_name'], type: 'backend-basic') }}"
                                                   data-lightbox="product-gallery-{{ $product['id'] }}">
                                                    <img width="50"  class="img-fit max-50" alt=""
                                                         src="{{ getStorageImages(path: $photo['image_name'], type: 'backend-basic') }}">
                                                    @if($colorImageKey > 3)
                                                        <div class="extra-images">
                                                            <span class="extra-image-count">
                                                                +{{ (count($product->color_images_full_url) - $colorImageKey) }}
                                                            </span>
                                                        </div>
                                                    @endif
                                                </a>
                                            </div>
                                        @endforeach
                                    @else
                                        @foreach ($product->images_full_url as $imageKey => $photo)
                                            <div class="{{$imageKey > 4 ? 'd-none' : ''}}">
                                                <a class="aspect-1 float-left overflow-hidden d-block border rounded-lg position-relative {{$imageKey > 4 ? 'd-none' : ''}}"
                                                   href="{{ getStorageImages(path: $photo, type: 'backend-basic') }}"
                                                   data-lightbox="product-gallery-{{ $product['id'] }}">
                                                    <img width="50"  class="img-fit max-50" alt=""
                                                         src="{{ getStorageImages(path: $photo, type: 'backend-basic') }}">
                                                    @if($imageKey > 4)
                                                        <div class="extra-images">
                                                            <span class="extra-image-count">
                                                                +{{ (count($product->images_full_url) - $imageKey) }}
                                                            </span>
                                                        </div>
                                                    @endif
                                                </a>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>

                                <div class="d-flex flex-column gap-2">
                                    <div class="d-flex gap-3 flex-nowrap justify-content-sm-end align-items-center lh-1 badge badge--primary-light height-30px ">
                                        <span class="text-dark">
                                            {{ count($product->orderDetails) }} {{ translate('orders') }}
                                        </span>
                                            <span class="border-left py-2"></span>
                                            <div class="review-hover position-relative cursor-pointer d-flex gap-2 align-items-center">
                                                <i class="tio-star"></i>
                                                <span>
                                                {{ count($product->rating)>0 ? number_format($product->rating[0]->average, 2, '.', ' '):0 }}
                                            </span>
                                                <div class="review-details-popup">
                                                    <h6 class="mb-2">{{ translate('rating') }}</h6>
                                                    <div class="">
                                                        <ul class="list-unstyled list-unstyled-py-2 mb-0">
                                                            @php($total = $product->reviews->count())

                                                            <li class="d-flex align-items-center font-size-sm">
                                                                @php($five = getRatingCount($product['id'], 5))
                                                                <span
                                                                    class="{{ Session::get('direction') === "rtl" ? 'ml-3' : 'mr-3' }}">
                                                            {{ translate('5') }} {{ translate('star') }}
                                                        </span>
                                                                <div class="progress flex-grow-1">
                                                                    <div class="progress-bar" role="progressbar"
                                                                         style="width: {{ $total == 0 ? 0 : ($five/$total)*100 }}%;"
                                                                         aria-valuenow="{{ $total == 0 ? 0 : ($five/$total)*100 }}"
                                                                         aria-valuemin="0" aria-valuemax="100"></div>
                                                                </div>
                                                                <span
                                                                    class="{{ Session::get('direction') === "rtl" ? 'mr-3' : 'ml-3' }}">{{ $five }}</span>
                                                            </li>

                                                            <li class="d-flex align-items-center font-size-sm">
                                                                @php($four=getRatingCount($product['id'],4))
                                                                <span
                                                                    class="{{ Session::get('direction') === "rtl" ? 'ml-3' : 'mr-3' }}">{{ translate('4') }} {{ translate('star') }}</span>
                                                                <div class="progress flex-grow-1">
                                                                    <div class="progress-bar" role="progressbar"
                                                                         style="width: {{ $total == 0 ? 0 : ($four/$total)*100}}%;"
                                                                         aria-valuenow="{{ $total == 0 ? 0 : ($four/$total)*100}}"
                                                                         aria-valuemin="0" aria-valuemax="100"></div>
                                                                </div>
                                                                <span
                                                                    class="{{ Session::get('direction') === "rtl" ? 'mr-3' : 'ml-3' }}">{{ $four }}</span>
                                                            </li>

                                                            <li class="d-flex align-items-center font-size-sm">
                                                                @php($three=getRatingCount($product['id'],3))
                                                                <span
                                                                    class="{{ Session::get('direction') === "rtl" ? 'ml-3' : 'mr-3'}}">{{ translate('3') }} {{ translate('star') }}</span>
                                                                <div class="progress flex-grow-1">
                                                                    <div class="progress-bar" role="progressbar"
                                                                         style="width: {{ $total == 0 ? 0 : ($three/$total)*100 }}%;"
                                                                         aria-valuenow="{{ $total == 0 ? 0 : ($three/$total)*100 }}"
                                                                         aria-valuemin="0" aria-valuemax="100"></div>
                                                                </div>
                                                                <span
                                                                    class="{{ Session::get('direction') === "rtl" ? 'mr-3' : 'ml-3'}}">{{ $three }}</span>
                                                            </li>

                                                            <li class="d-flex align-items-center font-size-sm">
                                                                @php($two=getRatingCount($product['id'],2))
                                                                <span
                                                                    class="{{ Session::get('direction') === "rtl" ? 'ml-3' : 'mr-3'}}">{{ translate('2') }} {{ translate('star') }}</span>
                                                                <div class="progress flex-grow-1">
                                                                    <div class="progress-bar" role="progressbar"
                                                                         style="width: {{ $total == 0 ? 0 : ($two/$total)*100}}%;"
                                                                         aria-valuenow="{{ $total == 0 ? 0 : ($two/$total)*100}}"
                                                                         aria-valuemin="0" aria-valuemax="100"></div>
                                                                </div>
                                                                <span
                                                                    class="{{ Session::get('direction') === "rtl" ? 'mr-3' : 'ml-3'}}">{{ $two }}</span>
                                                            </li>

                                                            <li class="d-flex align-items-center font-size-sm">
                                                                @php($one=getRatingCount($product['id'],1))
                                                                <span
                                                                    class="{{ Session::get('direction') === "rtl" ? 'ml-3' : 'mr-3'}}">{{ translate('1') }} {{ translate('star') }}</span>
                                                                <div class="progress flex-grow-1">
                                                                    <div class="progress-bar" role="progressbar"
                                                                         style="width: {{ $total == 0 ? 0 : ($one/$total)*100}}%;"
                                                                         aria-valuenow="{{ $total == 0 ? 0 : ($one/$total)*100}}"
                                                                         aria-valuemin="0" aria-valuemax="100"></div>
                                                                </div>
                                                                <span
                                                                    class="{{ Session::get('direction') === "rtl" ? 'mr-3' : 'ml-3'}}">{{ $one }}</span>
                                                            </li>

                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <span class="border-left py-2"></span>
                                            <span class="text-dark">
                                            {{ $product->reviews->whereNotNull('comment')->count() }} {{ translate('reviews') }}
                                        </span>
                                    </div>

                                    <div class="d-flex align-items-center gap-2">
                                        <span>{{translate('Status')}}</span>
                                        @if($product['request_status'] == 0)
                                            <span class="__badge badge badge--primary-2">{{translate('pending')}}</span>
                                        @elseif($product['request_status'] == 1)
                                            <span class="__badge badge badge-soft-success">{{translate('approved')}}</span>
                                        @else
                                            <span class="__badge badge badge-soft-danger">{{translate('rejected')}}</span>
                                        @endif
                                    </div>
                                </div>

                            </div>
                            <div class="d-block mt-2">
                                @foreach($languages as $language)