<x-app-layout>

{{-- resources/views/components/ratings-and-review.blade.php --}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ratings and Reviews</title>
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> {{-- Font Awesome --}}
</head>
<body>
    <div class="container mx-auto mt-5">
        <h1 class="text-2xl font-bold mb-4 text-center">Ratings and Reviews</h1>

        <!-- Responsive grid for reviews -->
        <div class="d-flex col-12 gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
            @foreach($reviews as $review)
                <div class="bg-white border border-gray-300 rounded-lg shadow-md p-6 transform transition duration-500 hover:scale-105 col-3 p-4">
                    <h2 class="font-bold mb-2">
                        {{ ucfirst($review->userRole) }} Name: {{ $review->userName }}
                    </h2>
                    <p class="text-gray-600 mb-1">Customer Name: {{ $review->customerName }}</p>
                    <div class="mb-2">
                        <span class="font-bold">Star Rating:</span>
                        <span>
                            @for($i = 1; $i <= 5; $i++)
                                @if($review->star >= $i)
                                    <i class="fas fa-star text-yellow-500"></i> <!-- Full star -->
                                @elseif($review->star >= $i - 0.5)
                                    <i class="fas fa-star-half-alt text-yellow-500"></i> <!-- Half star -->
                                @else
                                    <i class="far fa-star text-yellow-500"></i> <!-- Empty star -->
                                @endif
                            @endfor
                        </span>
                    </div>
                    <p class="text-gray-600 mb-1">Feedback: {{ $review->feedback }}</p>
                    <p class="text-gray-600 mb-1">Order ID: {{ $review->orderID }}</p>
                  
                </div>
            @endforeach
        </div>
    </div>
</body>
</html>

<style>
    /* Ensure stars are consistently yellow */
    .text-yellow-500 {
        color: yellow !important;
    }
</style>

</x-app-layout>
