@extends('admin.layouts.app')

@section('title', 'Blog Comments')
@section('breadcrumb')
<li class="flex items-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-300" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg></li>
<li><a href="#" class="hover:text-primary-600 transition-colors">Blog</a></li>
<li class="flex items-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-300" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg></li>
<li><span class="text-gray-500">Comments</span></li>
@endsection
@section('heading', 'Blog Comments')
@section('subheading', 'Moderate and manage blog post comments.')

@section('content')

<div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead>
                <tr class="border-b border-gray-100 bg-gray-50/50">
                    <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Author</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Post Title</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Comment</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Status</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Date</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach ([
                    ['author' => 'Rajesh Kumar', 'email' => 'rajesh@email.com', 'post' => '10 Tips for First-Time Home Buyers in India', 'comment' => 'Great article! Very helpful for someone like me who is planning to buy their first home. The RERA section was particularly insightful.', 'status' => 'Approved', 'date' => '15 Feb 2025'],
                    ['author' => 'Priya Sharma', 'email' => 'priya.s@email.com', 'post' => 'Mumbai Property Market Outlook 2025', 'comment' => 'Do you have any data on Andheri West specifically? I am looking to invest there.', 'status' => 'Pending', 'date' => '14 Feb 2025'],
                    ['author' => 'Amit Patel', 'email' => 'amit.p@email.com', 'post' => 'Understanding Stamp Duty in Maharashtra', 'comment' => 'Thanks for breaking this down. The calculator link would be useful - is it available?', 'status' => 'Approved', 'date' => '14 Feb 2025'],
                    ['author' => 'Spam Bot', 'email' => 'spam@fake.com', 'post' => 'Home Loan EMI Calculator Guide', 'comment' => 'Buy cheap properties!!! Click here for amazing deals!!!', 'status' => 'Spam', 'date' => '13 Feb 2025'],
                    ['author' => 'Neha Gupta', 'email' => 'neha.g@email.com', 'post' => 'NRI Property Investment Guide', 'comment' => 'As an NRI, I found the repatriation section very clear. One question: what about capital gains tax?', 'status' => 'Approved', 'date' => '12 Feb 2025'],
                    ['author' => 'Vikram Singh', 'email' => 'vikram@email.com', 'post' => 'Best Areas to Invest in Bangalore', 'comment' => 'Whitefield and Electronic City both seem promising. Which has better rental yields?', 'status' => 'Pending', 'date' => '11 Feb 2025'],
                ] as $c)
                <tr class="hover:bg-gray-50/50 transition-colors group">
                    <td class="px-5 py-3.5">
                        <div>
                            <span class="font-medium text-gray-800">{{ $c['author'] }}</span>
                            <p class="text-xs text-gray-500">{{ $c['email'] }}</p>
                        </div>
                    </td>
                    <td class="px-5 py-3.5 text-gray-600 max-w-[180px]">{{ Str::limit($c['post'], 35) }}</td>
                    <td class="px-5 py-3.5 text-gray-600 max-w-[220px]">{{ Str::limit($c['comment'], 50) }}</td>
                    <td class="px-5 py-3.5">
                        @php
                            $statusClass = match($c['status']) {
                                'Approved' => 'bg-emerald-50 text-emerald-700',
                                'Pending' => 'bg-amber-50 text-amber-700',
                                'Spam' => 'bg-red-50 text-red-700',
                                default => 'bg-gray-100 text-gray-600'
                            };
                        @endphp
                        <span class="inline-flex px-2 py-0.5 text-xs font-medium rounded-full {{ $statusClass }}">{{ $c['status'] }}</span>
                    </td>
                    <td class="px-5 py-3.5 text-gray-600">{{ $c['date'] }}</td>
                    <td class="px-5 py-3.5">
                        <div class="flex items-center gap-2 flex-wrap">
                            <a href="#" class="text-emerald-600 hover:text-emerald-700 text-sm font-medium">Approve</a>
                            <a href="#" class="text-amber-600 hover:text-amber-700 text-sm font-medium">Reject</a>
                            <a href="#" class="text-orange-600 hover:text-orange-700 text-sm font-medium">Spam</a>
                            <a href="#" class="text-red-500 hover:text-red-600 text-sm font-medium">Delete</a>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

@endsection