<x-app-layout>
    <div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
        <h1 class="text-3xl font-black text-slate-950 dark:text-white">Moderate Community Posts</h1>

        <form method="GET" class="mt-6 flex flex-wrap gap-3">
            <input name="search" value="{{ request('search') }}" placeholder="Search posts" class="rounded-lg border-blue-100 dark:border-blue-900 dark:bg-slate-950 dark:text-white">
            <select name="status" class="rounded-lg border-blue-100 dark:border-blue-900 dark:bg-slate-950 dark:text-white">
                <option value="">All</option>
                <option value="pending" @selected(request('status') === 'pending')>Pending</option>
                <option value="published" @selected(request('status') === 'published')>Published</option>
            </select>
            <button class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-black text-white">Filter</button>
        </form>

        <div class="mt-6 overflow-hidden rounded-lg border border-blue-100 bg-white dark:border-blue-900/50 dark:bg-slate-900">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-blue-100 dark:divide-blue-900/50">
                    <thead class="bg-blue-50 dark:bg-blue-950/40">
                        <tr>
                            <th class="px-4 py-3 text-left text-xs font-black uppercase">Post</th>
                            <th class="px-4 py-3 text-left text-xs font-black uppercase">Status</th>
                            <th class="px-4 py-3 text-left text-xs font-black uppercase">Stats</th>
                            <th class="px-4 py-3 text-left text-xs font-black uppercase">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-blue-100 dark:divide-blue-900/50">
                        @foreach ($posts as $post)
                            <tr>
                                <td class="px-4 py-3">
                                    <p class="font-bold text-slate-900 dark:text-white">{{ $post->title }}</p>
                                    <p class="text-xs text-slate-500">{{ $post->user->name }} &bull; {{ $post->category?->name }}</p>
                                    @include('community.partials.image-grid', [
                                        'images' => $post->images,
                                        'post' => $post,
                                        'deleteRouteName' => 'admin.community.posts.images.destroy',
                                        'deletable' => true,
                                    ])
                                </td>
                                <td class="px-4 py-3 text-sm text-slate-700 dark:text-slate-200">{{ $post->status }} {{ $post->is_hidden ? '/ hidden' : '' }} {{ $post->is_featured ? '/ featured' : '' }}</td>
                                <td class="px-4 py-3 text-sm text-slate-700 dark:text-slate-200">{{ $post->likes_count }} likes &bull; {{ $post->comments_count }} comments &bull; {{ $post->reports_count }} reports</td>
                                <td class="px-4 py-3">
                                    <div class="flex flex-wrap gap-2">
                                        @if ($post->status === 'pending')
                                            <form method="POST" action="{{ route('admin.community.posts.approve', $post) }}">
                                                @csrf
                                                @method('PATCH')
                                                <button class="text-sm font-bold text-blue-700 dark:text-blue-300">Approve</button>
                                            </form>
                                        @endif
                                        <form method="POST" action="{{ route('admin.community.posts.toggle-hidden', $post) }}">
                                            @csrf
                                            @method('PATCH')
                                            <button class="text-sm font-bold text-blue-700 dark:text-blue-300">{{ $post->is_hidden ? 'Unhide' : 'Hide' }}</button>
                                        </form>
                                        <form method="POST" action="{{ route('admin.community.posts.toggle-featured', $post) }}">
                                            @csrf
                                            @method('PATCH')
                                            <button class="text-sm font-bold text-blue-700 dark:text-blue-300">{{ $post->is_featured ? 'Unfeature' : 'Feature' }}</button>
                                        </form>
                                        <form method="POST" action="{{ route('admin.community.posts.destroy', $post) }}" onsubmit="return confirm('Delete this community post?');">
                                            @csrf
                                            @method('DELETE')
                                            <button class="text-sm font-bold text-red-600">Delete</button>
                                        </form>
                                        <form method="POST" action="{{ route('admin.community.users.ban', $post->user) }}" onsubmit="return confirm('Ban this user from community?');">
                                            @csrf
                                            <button class="text-sm font-bold text-red-600">Ban User</button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        <div class="mt-6">{{ $posts->links() }}</div>
    </div>
</x-app-layout>
