@extends('layouts.app')
@section('title', 'Ulasan Pelanggan')

@section('content')
<section class="bg-gradient-to-br from-brand-600 to-brand-800 text-white">
    <div class="max-w-4xl mx-auto px-4 py-14 text-center">
        <h1 class="text-3xl lg:text-4xl font-extrabold">Ulasan Pelanggan</h1>
        <p class="text-brand-100 mt-2">Apa kata mereka yang sudah memesan di {{ $brandName }}.</p>
        <p class="mt-4 text-sm text-brand-100">{{ $stats['count'] }} ulasan · rata-rata {{ number_format($stats['avg'], 1) }}★</p>
    </div>
</section>
<div class="max-w-6xl mx-auto px-4 py-10">
    <div class="bg-white border border-slate-100 rounded-2xl p-6 mb-8">
        <h2 class="font-bold text-lg mb-1">Tulis Ulasan</h2>
        @auth
            <p class="text-sm text-slate-500 mb-4">Bagikan pengalaman Anda. Ulasan tampil setelah dimoderasi admin.</p>
            <form method="POST" action="{{ route('account.reviews.store') }}" x-data="{ rating: {{ (int) old('rating', 5) }} }" class="space-y-4">
                @csrf
                <div>
                    <label class="text-sm font-medium text-slate-600">Produk (opsional)</label>
                    <select name="product_id" class="mt-1 w-full rounded-lg border border-slate-200 px-3 py-2.5 text-sm">
                        <option value="">— Umum / platform —</option>
                        @foreach ($products as $product)
                            <option value="{{ $product->id }}" @selected(old('product_id') == $product->id)>{{ $product->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="text-sm font-medium text-slate-600">Rating</label>
                    <div class="flex gap-1 mt-1">
                        @for($i=1;$i<=5;$i++)
                            <button type="button" @click="rating = {{ $i }}" class="p-1">
                                <svg class="w-7 h-7" :fill="rating >= {{ $i }} ? '#f59e0b' : '#e2e8f0'" viewBox="0 0 20 20"><path d="M9.05 2.93c.3-.92 1.6-.92 1.9 0l1.36 4.18a1 1 0 00.95.69h4.4c.97 0 1.37 1.24.59 1.81l-3.56 2.59a1 1 0 00-.36 1.12l1.36 4.18c.3.92-.75 1.69-1.54 1.12l-3.56-2.59a1 1 0 00-1.18 0l-3.56 2.59c-.79.57-1.84-.2-1.54-1.12l1.36-4.18a1 1 0 00-.36-1.12L2.4 9.61c-.78-.57-.38-1.81.59-1.81h4.4a1 1 0 00.95-.69l1.36-4.18z"/></svg>
                            </button>
                        @endfor
                    </div>
                    <input type="hidden" name="rating" :value="rating">
                </div>
                <div>
                    <label class="text-sm font-medium text-slate-600">Ulasan *</label>
                    <textarea name="comment" rows="3" required minlength="10" maxlength="1000" class="mt-1 w-full rounded-lg border border-slate-200 px-3 py-2.5 text-sm" placeholder="Ceritakan pengalaman Anda (min. 10 karakter)...">{{ old('comment') }}</textarea>
                    @error('comment')<p class="text-xs text-rose-500 mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="text-sm font-medium text-slate-600">Kota (opsional)</label>
                    <input name="location" value="{{ old('location') }}" maxlength="120" class="mt-1 w-full rounded-lg border border-slate-200 px-3 py-2.5 text-sm" placeholder="mis. Bandung">
                </div>
                <button class="bg-brand-600 hover:bg-brand-700 text-white font-semibold px-5 py-2.5 rounded-xl text-sm">Kirim Ulasan</button>
            </form>
        @else
            <p class="text-sm text-slate-500">Silakan <a href="{{ route('login', ['redirect' => url()->current()]) }}" class="text-brand-600 font-semibold">masuk</a> untuk menulis ulasan.</p>
        @endauth
    </div>

    @if ($reviews->count())
        <div class="grid md:grid-cols-3 gap-5">
            @foreach ($reviews as $review)
                <div class="bg-white border border-slate-100 rounded-2xl p-6 relative">
                    @if ($review->is_featured)
                        <span class="absolute top-3 right-3 text-[10px] font-bold px-2 py-0.5 rounded-full bg-violet-100 text-violet-700">Featured</span>
                    @endif
                    <div class="flex text-amber-400 mb-3">@for($i=0;$i<5;$i++)<svg class="w-4 h-4" fill="{{ $i < $review->rating ? 'currentColor':'#e2e8f0' }}" viewBox="0 0 20 20"><path d="M9.05 2.93c.3-.92 1.6-.92 1.9 0l1.36 4.18a1 1 0 00.95.69h4.4c.97 0 1.37 1.24.59 1.81l-3.56 2.59a1 1 0 00-.36 1.12l1.36 4.18c.3.92-.75 1.69-1.54 1.12l-3.56-2.59a1 1 0 00-1.18 0l-3.56 2.59c-.79.57-1.84-.2-1.54-1.12l1.36-4.18a1 1 0 00-.36-1.12L2.4 9.61c-.78-.57-.38-1.81.59-1.81h4.4a1 1 0 00.95-.69l1.36-4.18z"/></svg>@endfor</div>
                    <p class="text-sm text-slate-600 leading-relaxed">"{{ $review->comment }}"</p>
                    @if ($review->product)
                        <p class="text-xs text-brand-600 font-semibold mt-3">{{ $review->product->name }}</p>
                    @endif
                    <div class="mt-4 flex items-center gap-3">
                        <span class="grid place-items-center w-10 h-10 rounded-full bg-brand-100 text-brand-700 font-bold">{{ strtoupper(substr($review->name,0,1)) }}</span>
                        <div><p class="font-semibold text-sm">{{ $review->name }}</p><p class="text-xs text-slate-400">{{ $review->location }}</p></div>
                    </div>
                </div>
            @endforeach
        </div>
        <div class="mt-8">{{ $reviews->links() }}</div>
    @else
        <p class="text-center text-slate-400 py-10">Belum ada ulasan yang ditampilkan.</p>
    @endif
</div>
@endsection