<div id="reviews" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
    <div class="card-body">
        <div class="review">
            <div class="card mb-4">
                <div class="card-body">
                    <span class="heading">Product Rating</span>

                    @if ($average_rating == 0)
                        <i class="far fa-star"></i>
                        <i class="far fa-star"></i>
                        <i class="far fa-star"></i>
                        <i class="far fa-star"></i>
                        <i class="far fa-star"></i>
                    @elseif ($average_rating > 0 && $average_rating < 1.5)
                        <i class="fas fa-star"></i>
                        <i class="far fa-star"></i>
                        <i class="far fa-star"></i>
                        <i class="far fa-star"></i>
                        <i class="far fa-star"></i>
                    @elseif ($average_rating >= 1.5 && $average_rating < 2)
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half-alt"></i>
                        <i class="far fa-star"></i>
                        <i class="far fa-star"></i>
                        <i class="far fa-star"></i>
                    @elseif ($average_rating >= 2 && $average_rating < 2.5)
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="far fa-star"></i>
                        <i class="far fa-star"></i>
                        <i class="far fa-star"></i>
                    @elseif ($average_rating >= 2.5 && $average_rating < 3)
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="far fa-star"></i>
                        <i class="far fa-star"></i>
                    @elseif ($average_rating >= 3 && $average_rating < 3.5)
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="far fa-star"></i>
                        <i class="far fa-star"></i>
                    @elseif ($average_rating >= 3.5 && $average_rating < 4)
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half-alt"></i>
                        <i class="far fa-star"></i>
                    @elseif ($average_rating >= 4 && $average_rating < 4.5)
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="far fa-star"></i>
                    @elseif ($average_rating >= 4.5 && $average_rating < 5)
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half-alt"></i>
                    @elseif ($average_rating >= 5)
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                    @endif
                    <p>{{ $average_rating }} average based on {{ $product->reviews->count() }} reviews.
                    </p>
                    <hr style="border:3px solid #f1f1f1">

                    <div class="row">
                        <div class="side">
                            <div>5 star</div>
                        </div>
                        <div class="middle">
                            <div class="bar-container">
                                <div class="bar-5"></div>
                            </div>
                        </div>
                        <div class="side right">
                            <div>{{ $product->reviews->where('rating', 5)->count() }}</div>
                        </div>
                        <div class="side">
                            <div>4 star</div>
                        </div>
                        <div class="middle">
                            <div class="bar-container">
                                <div class="bar-4"></div>
                            </div>
                        </div>
                        <div class="side right">
                            <div>{{ $product->reviews->where('rating', 4)->count() }}</div>
                        </div>
                        <div class="side">
                            <div>3 star</div>
                        </div>
                        <div class="middle">
                            <div class="bar-container">
                                <div class="bar-3"></div>
                            </div>
                        </div>
                        <div class="side right">
                            <div>{{ $product->reviews->where('rating', 3)->count() }}</div>
                        </div>
                        <div class="side">
                            <div>2 star</div>
                        </div>
                        <div class="middle">
                            <div class="bar-container">
                                <div class="bar-2"></div>
                            </div>
                        </div>
                        <div class="side right">
                            <div>{{ $product->reviews->where('rating', 2)->count() }}</div>
                        </div>
                        <div class="side">
                            <div>1 star</div>
                        </div>
                        <div class="middle">
                            <div class="bar-container">
                                <div class="bar-1"></div>
                            </div>
                        </div>
                        <div class="side right">
                            <div>{{ $product->reviews->where('rating', 1)->count() }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="{{ $product->reviews->count() > 0 ? 'card' : '' }}" style="margin-bottom: 20px;">
                @forelse ($product->reviews as $review)
                    <div class="row mb-2">
                        <div class="review-head col-1">
                            @if ($review->user->avatar)
                                <img src="{{ $review->user->avatar == 'default.png' ? '/default/default.png' : '/uploads/admin/' . $review->user->avatar }}"
                                    alt="">
                            @endif
                        </div>
                        <div class="side-2 col-11">
                            <b>{{ $review->user->name }}</b>
                            <div class="rating1">
                                @if ($review->rating == 1)
                                    <i class="fas fa-star"></i>
                                    <i class="far fa-star"></i>
                                    <i class="far fa-star"></i>
                                    <i class="far fa-star"></i>
                                    <i class="far fa-star"></i>
                                @elseif ($review->rating == 2)
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="far fa-star"></i>
                                    <i class="far fa-star"></i>
                                    <i class="far fa-star"></i>
                                @elseif ($review->rating == 3)
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="far fa-star"></i>
                                    <i class="far fa-star"></i>
                                @elseif ($review->rating == 4)
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="far fa-star"></i>
                                @elseif ($review->rating == 5)
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star" aria-hidden="true"></i>
                                    <i class="fas fa-star" aria-hidden="true"></i>
                                    <i class="fas fa-star" aria-hidden="true"></i>
                                    <i class="fas fa-star" aria-hidden="true"></i>
                                @endif
                                <span style="color: #333;">{{ $review->rating }} rating</span>
                            </div>

                            <p style="margin-bottom: 0;">{{ $review->body }}</p>
                            <style type="text/css">
                                .crv img {
                                    width: 80px;
                                    height: 80px;
                                    object-fit: cover;
                                    margin: 5px;
                                    border: 2px solid black;
                                }
                            </style>
                            <div class="d-flex crv">
                                @if ($review->file)
                                    <a href="{{ asset('/') }}uploads/review/{{ $review->file }}">
                                        <img width="100px"
                                            src="{{ asset('/') }}uploads/review/{{ $review->file }}">
                                    </a>
                                @endif
                                @if ($review->file2)
                                    <a href="{{ asset('/') }}uploads/review/{{ $review->file2 }}">
                                        <img width="100px"
                                            src="{{ asset('/') }}uploads/review/{{ $review->file2 }}">
                                    </a>
                                @endif
                                @if ($review->file3)
                                    <a href="{{ asset('/') }}uploads/review/{{ $review->file3 }}">
                                        <img width="100px"
                                            src="{{ asset('/') }}uploads/review/{{ $review->file3 }}">
                                    </a>
                                @endif
                                @if ($review->file4)
                                    <a href="{{ asset('/') }}uploads/review/{{ $review->file4 }}">
                                        <img width="100px"
                                            src="{{ asset('/') }}uploads/review/{{ $review->file4 }}">
                                    </a>
                                @endif
                                @if ($review->file5)
                                    <a href="{{ asset('/') }}uploads/review/{{ $review->file5 }}">
                                        <img width="100px"
                                            src="{{ asset('/') }}uploads/review/{{ $review->file5 }}">
                                    </a>
                                @endif

                            </div>

                        </div>
                    </div>
                @empty
                    <div class="row">
                        <div class="col-12">
                            <h3 class="text-center text-danger">Reviews not available</h3>
                        </div>
                    </div>
                @endforelse

            </div>
        </div>
    </div>
</div>
