@extends('layouts.rider')

@section('content')
@if(Auth::user()->role_as == 11)
<div class="container-fluid py-4">
    <div class="row">
        <div class="col-md-12">
            <div class="alert alert-warning" role="alert">
                Application is still in progress. Please wait for your Application to be accepted.
            </div>
        </div>
    </div>
</div>
@else
   <div class="container">
        <!-- Rider Ratings Section -->
        <div class="row">
            <div class="col-md-12">
                <div class="card">
    
                    <div class="card-header">
                        <h4>Rider Ratings</h4>
                    </div>
                    <div class="text-center">
    <div class="overall-rating">
        <p class="overall-rating-text">Overall Rating: {{ $overallRating }}</p>
        <div class="star-rating">
            @for ($i = 1; $i <= 5; $i++)
                @if ($i <= $overallRating)
                    <i class="fas fa-star"></i>
                @else
                    <i class="far fa-star"></i>
                @endif
            @endfor
        </div>
    </div>
</div>

                    <div class="card-body table-responsive">
                        <!-- Display Rider Ratings Table -->
                        <table class="table align-middle text-center">
                            <!-- Table Headings -->
                            <thead>
                                <tr>
                                    <th>Rating</th>
                                    <th>Comment</th>
                                </tr>
                            </thead>
                            <!-- Table Body -->
                            <tbody>
                                @forelse ($ratings as $rating)
                                    <tr>
                                        <td>
                                        @for ($i = 1; $i <= 5; $i++)
                                                @if ($i <= $rating->rider_rating)
                                                    <i class="fas fa-star gold-star"></i>
                                                @else
                                                    <i class="far fa-star gold-star"></i>
                                                @endif
                                            @endfor

                                        </td>
                                        <td>{{ $rating->comment }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4">No ratings available.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif
@endsection
<style>
    .overall-rating {
    margin-bottom: 20px;
}

.overall-rating-text {
    font-size: 20px;
    color: #333; /* Darker text color for better visibility */
}

.star-rating {
    color: #ffd700; /* Gold color for filled stars */
    font-size: 24px; /* Adjust the size of stars */
}

.gold-star {
    color: #ffd700; /* Gold color */
    font-size: 12px; /* Adjust the size of stars */
}

</style>