@if ($product_reviews && $product_reviews->count() > 0)
    <div class="comments-wrap" id="comments">
        <h3 class="comments-wrap-title">
            {{ $product_review_count }}
            {{ $product_review_count > 1 ? 'Reviews' : 'Review' }}
        </h3>
        <div class="latest-comments">
            <ul class="list-wrap">
                @foreach ($product_reviews as $review)
                    <li>
                        <div class="comments-box">
                            <div class="comments-avatar">
                                <a href="{{ route('blog.author', $review->user_id) }}">
                                    <img src="{{ asset($review->user?->getFirstMediaUrl('avatar') ?? 'frontend/assets/img/images/avatar.png') }}"
                                        alt="{{ $review->user?->name ?? '' }}">
                                </a>
                            </div>
                            <div class="comments-text">
                                <div class="avatar-name gap-3 mb-0">
                                    <a href="{{ route('blog.author', $review->user_id) }}">
                                        <h6 class="name">{{ $review?->user?->name ?? '' }}</h6>
                                    </a>
                                    <span class="date">{{ $review->created_at->format('d M Y') }}</span>
                                </div>
                                <div class="mb-2">
                                    @include('frontend::components.avg-ratting', [
                                    'rating' => $review->ratting,
                                    'class' => 'd-flex list-unstyled',
                                ])
                                </div>
                                <p>
                                    {{ $review->content }}
                                </p>
                            </div>
                        </div>
                        @if ($review->children && $review->children->count() > 0)
                            <ul class="children">
                                @foreach ($review->children as $child)
                                    <li>
                                        <div class="comments-box">
                                            <div class="comments-avatar">
                                                <a href="{{ route('blog.author', $child->user_id) }}">
                                                    <img src="{{ asset($child->user?->getFirstMediaUrl('avatar') ?? 'frontend/assets/img/images/avatar.png') }}"
                                                        alt="{{ $child->user?->name ?? '' }}">
                                                </a>
                                            </div>
                                            <div class="comments-text">
                                                <div class="avatar-name gap-3">
                                                    <a href="{{ route('blog.author', $child->user_id) }}">
                                                        <h6 class="name">{{ $child?->user?->name ?? '' }}</h6>
                                                    </a>
                                                    <span
                                                        class="date">{{ $child->created_at->format('d M Y') }}</span>
                                                </div>
                                                <p>
                                                    {{ $child->content }}
                                                </p>
                                            </div>
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                        @endif
                    </li>
                @endforeach
            </ul>
        </div>
        @include('frontend::components.custom-pagination', ['items' => $product_reviews])
    </div>
@endif

@push('style_section')
    <style>
        .comments-avatar img {
            width: 115px;
            height: 115px;
        }

        .comments-text .avatar-name .name {
            margin-right: 20px;
        }
    </style>
@endpush