@extends('admin.layout')

@section('title', 'Ulasan & Rating')
@section('page_heading', 'Ulasan & Rating (Evaluasi)')

@section('content')
<div class="flex-1 flex flex-col gap-4 w-full">
    <div class="flex justify-between items-center">
        <div>
            <h2 class="font-headline-lg text-3xl font-bold text-on-surface">Ulasan & Rating</h2>
            <p class="text-sm text-on-surface-variant mt-1">Pantau dan evaluasi rating yang diberikan antar pengguna.</p>
        </div>
    </div>

    <!-- Stats Bar -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div class="bg-surface-container-lowest p-6 rounded-2xl shadow-sm border border-outline-variant/30">
            <div class="flex justify-between items-start mb-2">
                <span class="text-sm text-on-surface-variant">Total Ulasan</span>
                <span class="material-symbols-outlined text-primary">reviews</span>
            </div>
            <p class="text-3xl font-bold font-headline-md">{{ number_format($totalRatings, 0, ',', '.') }}</p>
        </div>
        <div class="bg-surface-container-lowest p-6 rounded-2xl shadow-sm border border-outline-variant/30">
            <div class="flex justify-between items-start mb-2">
                <span class="text-sm text-on-surface-variant">Rata-rata Rating</span>
                <span class="material-symbols-outlined text-[#E8A838]">star</span>
            </div>
            <p class="text-3xl font-bold font-headline-md">{{ number_format($avgRating, 1, ',', '.') }}</p>
        </div>
        <div class="bg-surface-container-lowest p-6 rounded-2xl shadow-sm border border-outline-variant/30">
            <div class="flex justify-between items-start mb-2">
                <span class="text-sm text-on-surface-variant">Dari Konsumen</span>
                <span class="material-symbols-outlined text-tertiary">groups</span>
            </div>
            <p class="text-3xl font-bold font-headline-md">{{ number_format($konsumenRatings, 0, ',', '.') }}</p>
        </div>
        <div class="bg-surface-container-lowest p-6 rounded-2xl shadow-sm border border-outline-variant/30">
            <div class="flex justify-between items-start mb-2">
                <span class="text-sm text-on-surface-variant">Dari Mitra</span>
                <span class="material-symbols-outlined text-green-600">spa</span>
            </div>
            <p class="text-3xl font-bold font-headline-md">{{ number_format($mitraRatings, 0, ',', '.') }}</p>
        </div>
    </div>

    <!-- Filter Row -->
    <div class="bg-surface-container-lowest p-4 rounded-2xl shadow-sm border border-outline-variant/30 flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div class="flex gap-2 border-b border-outline-variant/30 md:border-none pb-2 md:pb-0 overflow-x-auto w-full md:w-auto custom-scrollbar">
            <a href="{{ request()->fullUrlWithQuery(['dari' => null, 'page' => 1]) }}" class="px-4 py-2 rounded-lg {{ !request('dari') ? 'bg-surface-variant text-on-surface-variant font-semibold' : 'hover:bg-surface-variant/50 text-on-surface-variant font-medium' }} text-sm transition-colors whitespace-nowrap">Semua</a>
            <a href="{{ request()->fullUrlWithQuery(['dari' => 'konsumen', 'page' => 1]) }}" class="px-4 py-2 rounded-lg {{ request('dari') == 'konsumen' ? 'bg-surface-variant text-on-surface-variant font-semibold' : 'hover:bg-surface-variant/50 text-on-surface-variant font-medium' }} text-sm transition-colors whitespace-nowrap">Dari Konsumen</a>
            <a href="{{ request()->fullUrlWithQuery(['dari' => 'mitra', 'page' => 1]) }}" class="px-4 py-2 rounded-lg {{ request('dari') == 'mitra' ? 'bg-surface-variant text-on-surface-variant font-semibold' : 'hover:bg-surface-variant/50 text-on-surface-variant font-medium' }} text-sm transition-colors whitespace-nowrap">Dari Mitra</a>
        </div>

        <form method="GET" action="{{ route('admin.ratings.index') }}" class="flex gap-3 flex-wrap md:flex-nowrap w-full md:w-auto">
            @if(request('dari'))
            <input type="hidden" name="dari" value="{{ request('dari') }}">
            @endif
            <input type="text" name="search" value="{{ request('search') }}" placeholder="Cari nama atau ulasan..." class="bg-surface-container border-none rounded-lg text-sm px-4 py-2 focus:ring-2 focus:ring-primary/20 flex-1 md:flex-none outline-none w-full md:w-64">
            <select name="sort" onchange="this.form.submit()" class="bg-surface-container border-none rounded-lg text-sm px-8 py-2 focus:ring-2 focus:ring-primary/20 outline-none">
                <option value="terbaru" {{ request('sort') == 'terbaru' ? 'selected' : '' }}>Urutkan: Terbaru</option>
                <option value="terlama" {{ request('sort') == 'terlama' ? 'selected' : '' }}>Urutkan: Terlama</option>
                <option value="tertinggi" {{ request('sort') == 'tertinggi' ? 'selected' : '' }}>Urutkan: Bintang Tertinggi</option>
                <option value="terendah" {{ request('sort') == 'terendah' ? 'selected' : '' }}>Urutkan: Bintang Terendah</option>
            </select>
            <button type="submit" class="p-2 bg-surface-container rounded-lg hover:bg-outline-variant/20 transition-all">
                <span class="material-symbols-outlined text-[20px]">search</span>
            </button>
        </form>
    </div>

    <!-- Table Card with Horizontal Scroll -->
    <div class="bg-surface-container-lowest border border-outline-variant rounded-2xl shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs min-w-[900px]">
                <thead class="bg-surface-container-low border-b border-outline-variant text-on-surface-variant font-bold text-[11px] uppercase tracking-wider">
                    <tr>
                        <th class="px-5 py-3.5 whitespace-nowrap w-32">Tanggal</th>
                        <th class="px-5 py-3.5 whitespace-nowrap w-48">Pemberi Rating</th>
                        <th class="px-5 py-3.5 whitespace-nowrap w-48">Penerima Rating</th>
                        <th class="px-5 py-3.5 whitespace-nowrap w-32 text-center">Rating</th>
                        <th class="px-5 py-3.5 min-w-[200px]">Komentar</th>
                        <th class="px-5 py-3.5 text-center">Tampil Web</th>
                        <th class="px-5 py-3.5 text-center sticky right-0 bg-surface-container-low border-l border-outline-variant w-16">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-outline-variant/60">
                    @forelse($ratings as $rating)
                    <tr class="hover:bg-surface-container-low/50 transition-colors">
                        <td class="px-5 py-3.5 text-on-surface-variant whitespace-nowrap">
                            {{ $rating->created_at->format('d/m/Y H:i') }}
                        </td>
                        <td class="px-5 py-3.5 whitespace-nowrap">
                            <div class="font-bold text-on-surface text-xs">{{ $rating->reviewer->name ?? 'User Terhapus' }}</div>
                            <div class="text-[10px] text-on-surface-variant uppercase">{{ $rating->reviewer->role ?? '-' }}</div>
                        </td>
                        <td class="px-5 py-3.5 whitespace-nowrap">
                            <div class="font-bold text-on-surface text-xs">{{ $rating->reviewee->name ?? 'User Terhapus' }}</div>
                            <div class="text-[10px] text-on-surface-variant uppercase">{{ $rating->reviewee->role ?? '-' }}</div>
                        </td>
                        <td class="px-5 py-3.5 text-center whitespace-nowrap">
                            <div class="flex items-center justify-center text-[#E8A838]">
                                @for($i = 1; $i <= 5; $i++)
                                    @if($i <= $rating->rating)
                                    <span class="material-symbols-outlined text-sm" style="font-variation-settings: 'FILL' 1;">star</span>
                                    @else
                                    <span class="material-symbols-outlined text-sm">star</span>
                                    @endif
                                @endfor
                            </div>
                        </td>
                        <td class="px-5 py-3.5 text-on-surface-variant">
                            {{ $rating->comment ?? '-' }}
                        </td>
                        <td class="px-5 py-3.5 text-center whitespace-nowrap">
                            <form method="POST" action="{{ route('admin.ratings.toggle-feature', $rating->id) }}">
                                @csrf
                                <button type="submit" class="p-1 rounded-full w-10 h-6 transition-colors {{ $rating->is_featured ? 'bg-primary' : 'bg-surface-variant' }} relative inline-flex items-center" title="Toggle Tampil Web">
                                    <span class="w-4 h-4 bg-white rounded-full shadow-sm transform transition-transform {{ $rating->is_featured ? 'translate-x-5' : 'translate-x-1' }}"></span>
                                </button>
                            </form>
                        </td>
                        <td class="px-5 py-3.5 text-center sticky right-0 bg-surface-container-lowest border-l border-outline-variant whitespace-nowrap">
                            <div class="flex items-center justify-center gap-1">
                                <form method="POST" action="{{ route('admin.ratings.destroy', $rating->id) }}" class="inline" onsubmit="return confirm('Yakin ingin menghapus rating ini?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="p-1.5 rounded-lg text-error hover:bg-error-container transition-colors flex items-center justify-center" title="Hapus Ulasan">
                                        <span class="material-symbols-outlined text-lg">delete</span>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="px-6 py-10 text-center text-on-surface-variant text-xs">
                            Tidak ada data ulasan ditemukan.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    @if($ratings->hasPages())
    <div class="mt-4">
        {{ $ratings->links() }}
    </div>
    @endif

</div>
@endsection