@extends('provider.layout')
@section('title', 'Reviews')
@section('content')
<div style="margin-bottom:1.5rem">
    <h1 style="font-size:1.375rem;font-weight:800">Customer Reviews</h1>
    <p style="color:var(--text-muted)">What customers say about your services.</p>
</div>
@forelse($reviews as $review)
<div class="card" style="margin-bottom:1rem" id="prev-{{ $review->id }}">
    <div class="card-body">
        <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.5rem">
            <div style="display:flex;align-items:center;gap:0.75rem">
                <div style="width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--brand-500),var(--amber-500));display:flex;align-items:center;justify-content:center;font-weight:700;color:white;font-size:0.875rem;flex-shrink:0">
                    {{ strtoupper(substr($review->user->name ?? 'C', 0, 1)) }}
                </div>
                <div>
                    <div style="font-weight:600;font-size:0.9375rem">{{ $review->user->name ?? 'Customer' }}</div>
                    <div style="font-size:0.75rem;color:var(--text-muted)">{{ $review->created_at->diffForHumans() }}</div>
                </div>
            </div>
            <div style="display:flex;align-items:center;gap:0.25rem;font-size:1.125rem;color:var(--amber-400)">
                @for($i=1;$i<=5;$i++)
                    {{ $i <= $review->rating ? '★' : '☆' }}
                @endfor
                <span style="font-size:0.8125rem;font-weight:700;color:var(--text-primary);margin-left:0.375rem">({{ $review->rating }}/5)</span>
            </div>
        </div>
        @if($review->title)
        <div style="font-weight:700;margin-top:0.875rem">{{ $review->title }}</div>
        @endif
        <p style="margin-top:0.5rem;color:var(--text-secondary);font-size:0.9375rem">{{ $review->body }}</p>
    </div>
</div>
@empty
<div style="text-align:center;padding:4rem 2rem;background:white;border-radius:var(--radius-xl);border:1.5px solid var(--border-default)">
    <i data-lucide="star" style="width:52px;height:52px;opacity:0.2;display:block;margin:0 auto 1rem"></i>
    <h3 style="font-weight:700;margin-bottom:0.5rem">No reviews yet</h3>
    <p style="color:var(--text-muted)">Reviews from completed bookings will appear here.</p>
</div>
@endforelse
<div style="margin-top:1rem">{{ $reviews->links() }}</div>
@endsection