@extends('frontend.layouts.master')
@section('content')
    <section class="section border-0 m-0">
        <div class="container-xxl">
            <x-user-panel>
                <div class="row row-lg">
                    <div class="col-lg-12 col-md-12 col-sm-12 mb-3">
                        <div class="card">
                            <div class="card-header py-3 bg-white ">
                                <h3 class="card-title mb-0 text-capitalize">
                                    {{ trans("routes.My Reviews & Ratings") }}
                                </h3>
                            </div>
                            <div class="card-body py-2" id="pagination">
                                <ul class="comments">
                                    @forelse ($reviews as $key => $review)
                                        <li>
                                            <div class="comment">
                                                <div class="img-thumbnail border-0 p-0 d-none d-md-block">
                                                    <img style="width: 50px; height: 50px; object-fit: cover;" class="avatar rounded-circle" alt="" src="{{ $review->user->getFirstMediaUrl(Helper::PROFILE_COLLECTION) }}">
                                                </div>
                                                <div class="comment-block">
                                                    <div class="comment-arrow"></div>
                                                    <span class="comment-by">
                                                <strong>
                                                    {{ $review->user->first_name ?? 'guest' }}
                                                </strong>
                                                <span class="float-end">
                                                    <div class="pb-0 clearfix">
                                                        <div title="Rated 3 out of 5" class="float-start">
                                                            <input type="text" class="" value="{{ $review->rate }}" title="" data-plugin-star-rating data-plugin-options="{'displayOnly': true, 'color': 'primary', 'size':'xs'}">
                                                        </div>
                                                    </div>
                                                </span>
                                            </span>
                                                    <div>
                                                        {{ trans("routes.This is a review of the") }} <a href="{{ route('products.show', $review->product->slug) }}">{{ $review->product->name }}</a>
                                                        <hr class="m-0 mb-3">
                                                    </div>
                                                    <p>
                                                        {{ $review->review }}
                                                    </p>
                                                </div>
                                            </div>
                                        </li>
                                    @empty
                                        <div class="row">
                                            <div class="col text-center">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-star" viewBox="0 0 16 16">
                                                    <path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z" />
                                                </svg>
                                                <p>
                                                    {{ __('routes.You do not have any reviews') }}
                                                </p>
                                            </div>
                                        </div>
                                    @endforelse
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </x-user-panel>
        </div>
    </section>
@endsection