@extends('admin.layout')
@section('title', 'Ulasan')
@section('subtitle', 'Penilaian customer terhadap mitra')

@section('content')
    <div class="grid md:grid-cols-2 gap-4">
        @forelse ($reviews as $rev)
            <div class="bg-white rounded-2xl border border-line p-5">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <span class="w-9 h-9 rounded-full bg-brand-soft text-brand-dark grid place-items-center text-xs font-bold">{{ $rev->customer?->initials() }}</span>
                        <div>
                            <div class="font-semibold text-sm">{{ $rev->customer?->name ?? 'Anonim' }}</div>
                            <div class="text-xs text-sub">untuk {{ $rev->mitra?->name ?? '—' }}</div>
                        </div>
                    </div>
                    <span class="text-amber-500 text-sm">{{ str_repeat('★', $rev->rating) }}<span class="text-line">{{ str_repeat('★', 5 - $rev->rating) }}</span></span>
                </div>
                @if ($rev->body)<p class="mt-3 text-sm text-ink/80">{{ $rev->body }}</p>@endif
                @if (!empty($rev->tags))
                    <div class="mt-2 flex flex-wrap gap-1.5">
                        @foreach ($rev->tags as $tag)<x-badge color="orange">{{ $tag }}</x-badge>@endforeach
                    </div>
                @endif
                <div class="mt-3 flex items-center justify-between text-xs text-sub">
                    <span>{{ $rev->created_at?->format('d M Y') }}</span>
                    @if ($rev->order)<a href="{{ route('admin.orders.show', $rev->order) }}" class="font-semibold text-brand hover:text-brand-dark">Order {{ $rev->order->code }} ›</a>@endif
                </div>
            </div>
        @empty
            <p class="text-sub">Belum ada ulasan.</p>
        @endforelse
    </div>

    <x-pagination :paginator="$reviews" unit="ulasan" />
@endsection