@extends('admin.layout')

@section('title', 'Reviews & Moderation')

@section('content')
<h1 class="text-2xl font-bold mb-6">Reviews & Moderation</h1>

<div class="bg-white rounded-lg shadow overflow-hidden relative z-10">
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200 relative">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Barber</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Rating</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Comment</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                </tr>
            </thead>
            <tbody id="reviewsTable" class="bg-white divide-y divide-gray-200">
                <tr><td colspan="6" class="px-6 py-4 text-center text-gray-500">Loading...</td></tr>
            </tbody>
        </table>
    </div>
</div>
@endsection

@section('scripts')
<script>
async function loadReviews() {
    const data = await window.apiCall('/reviews');
    if (data && data.success) {
        const tbody = document.getElementById('reviewsTable');
        tbody.innerHTML = data.data.data.map(review => `
            <tr class="hover:bg-gray-50">
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${review.barber?.user?.first_name || '-'}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${review.user?.first_name || '-'}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-yellow-500">${'★'.repeat(review.rating)}${'☆'.repeat(5-review.rating)}</td>
                <td class="px-6 py-4 text-sm text-gray-500 max-w-xs truncate">${review.comment || '-'}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${new Date(review.created_at).toLocaleDateString()}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                    <button onclick="deleteReview(${review.id})" class="text-red-600 hover:text-red-900">Delete</button>
                </td>
            </tr>
        `).join('');
    }
}

function deleteReview(id) {
    if (confirm('Delete this review?')) {
        window.apiCall(`/reviews/${id}`, { method: 'DELETE' }).then(() => loadReviews());
    }
}

loadReviews();
</script>
@endsection