@extends('app.app')
@section('title', '')
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <h4 class="py-3 mb-4">{{ __('titles.merchants_administration') }}
            <span class="text-muted fw-light"> / {{ $Merchant->company_name }} / {{ $data->name }}</span>
        </h4>



        <div class="row">
            @include('/app/layouts.alert')
            <div class="col-md-8 mb-4">
                <div class="card h-100">
                    <div class="card-body row widget-separator g-0">
                        <div class="col-sm-5 border-shift border-end">
                            <h2 class="text-primary d-flex align-items-center gap-1 mb-2">
                                {{ $TabRating['0'] ? $TabRating['0'] : '0' }}<i class="ti ti-star-filled"></i>
                            </h2>
                            <p class="h6 mb-1">{{ __('titles.total') }} {{ __('titles.reviews') }} : {{ $TabRating['6'] }}
                            </p>
                            <p class="pe-2 mb-2">{{ __('titles.text_reviews') }}</p>
                            <hr class="d-sm-none">
                        </div>

                        <div
                            class="col-sm-7 gap-2 text-nowrap d-flex flex-column justify-content-between ps-sm-4 pt-2 py-sm-2">
                            <div class="d-flex align-items-center gap-3">
                                <small>5 <i class="ti ti-star-filled"></i></small>
                                <div class="progress w-100" style="height: 10px">
                                    <div class="progress-bar bg-primary" role="progressbar"
                                        style="width: {{ $TabRating['6']>0 ? ($TabRating['5'] / $TabRating['6']) * 100 : 0}}%"
                                        aria-valuenow="{{$TabRating['6']>0 ?  ($TabRating['5'] / $TabRating['6']) * 100 : 0 }}" aria-valuemin="0"
                                        aria-valuemax="100"></div>
                                </div>
                                <small class="w-px-20 text-end">{{ $TabRating['5'] }}</small>
                            </div>
                            <div class="d-flex align-items-center gap-3">
                                <small>4 <i class="ti ti-star-filled"></i></small>
                                <div class="progress w-100" style="height: 10px">
                                    <div class="progress-bar bg-primary" role="progressbar"
                                        style="width: {{$TabRating['6']>0 ?  ($TabRating['4'] / $TabRating['6']) * 100 : 0 }}%"
                                        aria-valuenow="{{$TabRating['6']>0 ?  ($TabRating['4'] / $TabRating['6']) * 100 : 0 }}" aria-valuemin="0"
                                        aria-valuemax="100"></div>
                                </div>
                                <small class="w-px-20 text-end">{{ $TabRating['4'] }}</small>
                            </div>
                            <div class="d-flex align-items-center gap-3">
                                <small>3 <i class="ti ti-star-filled"></i></small>
                                <div class="progress w-100" style="height: 10px">
                                    <div class="progress-bar bg-primary" role="progressbar"
                                        style="width: {{$TabRating['6']>0 ?  ($TabRating['3'] / $TabRating['6']) * 100 : 0 }}%"
                                        aria-valuenow="{{$TabRating['6']>0 ?  ($TabRating['3'] / $TabRating['6']) * 100 : 0 }}" aria-valuemin="0"
                                        aria-valuemax="100"></div>
                                </div>
                                <small class="w-px-20 text-end">{{ $TabRating['3'] }}</small>
                            </div>
                            <div class="d-flex align-items-center gap-3">
                                <small>2 <i class="ti ti-star-filled"></i></small>
                                <div class="progress w-100" style="height: 10px">
                                    <div class="progress-bar bg-primary" role="progressbar"
                                        style="width: {{$TabRating['6']>0 ?  ($TabRating['2'] / $TabRating['6']) * 100 : 0 }}%"
                                        aria-valuenow="{{$TabRating['6']>0 ?  ($TabRating['2'] / $TabRating['6']) * 100 : 0 }}" aria-valuemin="0"
                                        aria-valuemax="100"></div>
                                </div>
                                <small class="w-px-20 text-end">{{ $TabRating['2'] }}</small>
                            </div>
                            <div class="d-flex align-items-center gap-3">
                                <small>1 <i class="ti ti-star-filled"></i></small>
                                <div class="progress w-100" style="height: 10px">
                                    <div class="progress-bar bg-primary" role="progressbar"
                                        style="width: {{$TabRating['6']>0 ?  ($TabRating['1'] / $TabRating['6']) * 100 : 0 }}%"
                                        aria-valuenow="{{$TabRating['6']>0 ?  ($TabRating['1'] / $TabRating['6']) * 100 : 0 }}" aria-valuemin="0"
                                        aria-valuemax="100"></div>
                                </div>
                                <small class="w-px-20 text-end">{{ $TabRating['1'] }}</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 mb-4 card bg-white">
                <div class="swiper-container swiper-container-horizontal swiper swiper-card-advance-bg"
                    id="swiper-with-pagination-cards">
                    <div class="swiper-wrapper">
                        @foreach ($data->product_pictures as $pic)
                            <div class="swiper-slide">
                                <div class="row">
                                    <div class="col-12 text-center">
                                        <img src="{{ URL::asset($pic->picture) }}" alt="Website Analytics"
                                            style="height:200px" class="card-website-analytics-img" />
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 mb-4">
                <div class="card">
                    <div class="card-body row  g-0">
                        <div class="col-sm-4 border-shift border-end">
                            <div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between mx-1">
                                <h6 class="mb-2 mt-2">{{ __('titles.merchant') }} : </h6>
                                <span class="mx-1 text-primary">{{ $Merchant->company_name }}</span>
                            </div>
                            <hr>
                            <div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between mx-1">
                                <h6 class="mb-2 mt-2">{{ __('titles.sku') }} : </h6>
                                <span class="mx-1 text-primary">{{ $data->sku }}</span>
                            </div>
                            <hr>
                            <div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between mx-1">
                                <h6 class="mb-2 mt-2">{{ __('titles.category') }} : </h6>
                                <span class="mx-1 text-primary">{{ $data->product_categorie->name }}</span>
                            </div>
                        </div>

                        <div
                            class="col-sm-8 gap-2 d-flex flex-column ps-sm-4 pt-2 py-sm-2">
                            <h6 class="mb-2 mt-2">{{ __('titles.description') }} </h6>
                            <p class="mb-0 pt-1">
                                {!! $data->description !!}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection