@extends('admin.layouts.app')

@section('title', 'Blog Comments')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-slate-900 dark:text-white">Blog Comments</h1>
            <p class="text-slate-500 dark:text-slate-400 mt-1">Moderate blog comments</p>
        </div>
    </div>

    <!-- Filters -->
    <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm p-4">
        <form method="GET" class="flex flex-wrap gap-4">
            <select name="status" onchange="this.form.submit()" class="px-4 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700">
                <option value="">Pending Comments</option>
                <option value="approved" {{ request('status') == 'approved' ? 'selected' : '' }}>Approved</option>
                <option value="rejected" {{ request('status') == 'rejected' ? 'selected' : '' }}>Rejected</option>
            </select>
        </form>
    </div>

    <!-- Comments List -->
    <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm overflow-hidden">
        @if($comments->count() > 0)
        <div class="divide-y divide-slate-200 dark:divide-slate-700">
            @foreach($comments as $comment)
            <div class="p-6">
                <div class="flex items-start justify-between">
                    <div class="flex-1">
                        <div class="flex items-center gap-3 mb-2">
                            <span class="font-medium text-slate-900 dark:text-white">{{ $comment->name }}</span>
                            <span class="text-sm text-slate-500">{{ $comment->email }}</span>
                            <span class="px-2 py-0.5 text-xs rounded-full {{ $comment->status === 'approved' ? 'bg-emerald-100 text-emerald-700' : ($comment->status === 'rejected' ? 'bg-red-100 text-red-700' : 'bg-amber-100 text-amber-700') }}">
                                {{ ucfirst($comment->status) }}
                            </span>
                        </div>
                        <p class="text-slate-600 dark:text-slate-300 mb-2">{{ $comment->comment }}</p>
                        <div class="flex items-center gap-4 text-sm text-slate-500">
                            <span>On: <a href="{{ route('admin.blogs.edit', $comment->blog_id) }}" class="text-indigo-600 hover:underline">{{ $comment->blog->title ?? 'Unknown Post' }}</a></span>
                            <span>{{ $comment->created_at->diffForHumans() }}</span>
                        </div>
                    </div>
                    <div class="flex items-center gap-2">
                        @if($comment->status === 'pending')
                        <form action="{{ route('admin.blog-comments.approve', $comment) }}" method="POST" class="inline">
                            @csrf
                            <button type="submit" class="p-2 text-emerald-600 hover:bg-emerald-50 dark:hover:bg-emerald-900/20 rounded-lg" title="Approve">
                                <i data-lucide="check" class="w-5 h-5"></i>
                            </button>
                        </form>
                        <form action="{{ route('admin.blog-comments.reject', $comment) }}" method="POST" class="inline">
                            @csrf
                            <button type="submit" class="p-2 text-amber-600 hover:bg-amber-50 dark:hover:bg-amber-900/20 rounded-lg" title="Reject">
                                <i data-lucide="x" class="w-5 h-5"></i>
                            </button>
                        </form>
                        @endif
                        <form action="{{ route('admin.blog-comments.destroy', $comment) }}" method="POST" class="inline" onsubmit="return confirm('Delete this comment?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="p-2 text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg" title="Delete">
                                <i data-lucide="trash-2" class="w-5 h-5"></i>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        
        <div class="px-6 py-4 border-t border-slate-200 dark:border-slate-700">
            {{ $comments->links() }}
        </div>
        @else
        <div class="p-12 text-center">
            <i data-lucide="message-square" class="w-12 h-12 mx-auto text-slate-300 dark:text-slate-600 mb-4"></i>
            <p class="text-slate-500 dark:text-slate-400">No comments found</p>
        </div>
        @endif
    </div>
</div>
@endsection