@extends('admin.layout')
@section('title', 'Posts')
@section('page-title', 'Posts')

@section('content')
{{-- Filters --}}
<form method="GET" class="flex flex-wrap gap-3 mb-6">
  <input type="text" name="search" value="{{ request('search') }}" placeholder="Search posts…"
    class="bg-gray-800 border border-white/10 rounded-xl px-4 py-2 text-sm text-white w-64 focus:outline-none focus:border-blue-500">
  <select name="category" class="bg-gray-800 border border-white/10 rounded-xl px-4 py-2 text-sm text-gray-300 focus:outline-none focus:border-blue-500">
    <option value="">All Categories</option>
    @foreach($categories as $cat)
      <option value="{{ $cat->id }}" {{ request('category') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
    @endforeach
  </select>
  <select name="status" class="bg-gray-800 border border-white/10 rounded-xl px-4 py-2 text-sm text-gray-300 focus:outline-none focus:border-blue-500">
    <option value="">All Status</option>
    <option value="published" {{ request('status') === 'published' ? 'selected' : '' }}>Published</option>
    <option value="draft"     {{ request('status') === 'draft'     ? 'selected' : '' }}>Draft</option>
    <option value="archived"  {{ request('status') === 'archived'  ? 'selected' : '' }}>Archived</option>
  </select>
  <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white text-sm px-4 py-2 rounded-xl transition-colors">Filter</button>
  @if(request()->hasAny(['search','category','status']))
    <a href="{{ route('admin.posts.index') }}" class="text-sm text-gray-400 hover:text-white px-4 py-2 rounded-xl border border-white/10 hover:border-white/30 transition-colors">Clear</a>
  @endif
  <span class="ml-auto text-sm text-gray-500 self-center">{{ $posts->total() }} posts</span>
</form>

{{-- Table --}}
<div class="bg-gray-900 rounded-2xl border border-white/10 overflow-hidden">
  <table class="w-full text-sm">
    <thead>
      <tr class="border-b border-white/10 text-xs text-gray-500 uppercase tracking-wider">
        <th class="text-left px-5 py-3">Title</th>
        <th class="text-left px-4 py-3 hidden md:table-cell">Author</th>
        <th class="text-left px-4 py-3 hidden lg:table-cell">Category</th>
        <th class="text-left px-4 py-3 hidden lg:table-cell">Views</th>
        <th class="text-left px-4 py-3">Status</th>
        <th class="text-left px-4 py-3 hidden md:table-cell">Date</th>
        <th class="px-4 py-3"></th>
      </tr>
    </thead>
    <tbody class="divide-y divide-white/5">
      @forelse($posts as $post)
      <tr class="hover:bg-white/3 transition-colors">
        <td class="px-5 py-3">
          <div class="flex items-center gap-3">
            @if($post->featured_image)
              <img src="{{ $post->featured_image }}" class="w-10 h-10 rounded-lg object-cover shrink-0 bg-gray-800">
            @else
              <div class="w-10 h-10 rounded-lg bg-gray-800 shrink-0"></div>
            @endif
            <div class="min-w-0">
              <p class="text-white font-medium line-clamp-1">{{ $post->title }}</p>
              <div class="flex gap-2 mt-0.5">
                @if($post->is_featured)
                  <span class="text-[10px] bg-yellow-500/20 text-yellow-400 px-1.5 py-0.5 rounded font-medium">Featured</span>
                @endif
                @if($post->is_breaking)
                  <span class="text-[10px] bg-red-500/20 text-red-400 px-1.5 py-0.5 rounded font-medium">Breaking</span>
                @endif
              </div>
            </div>
          </div>
        </td>
        <td class="px-4 py-3 text-gray-400 hidden md:table-cell">{{ $post->author?->name ?? '—' }}</td>
        <td class="px-4 py-3 hidden lg:table-cell">
          @if($post->category)
            <span class="text-xs bg-white/10 px-2 py-1 rounded-full text-gray-300">{{ $post->category->name }}</span>
          @endif
        </td>
        <td class="px-4 py-3 text-gray-400 hidden lg:table-cell">{{ number_format($post->views_count) }}</td>
        <td class="px-4 py-3">
          @php $colors = ['published'=>'text-green-400','draft'=>'text-yellow-400','archived'=>'text-gray-500']; @endphp
          <span class="text-xs font-medium {{ $colors[$post->status] ?? 'text-gray-400' }}">{{ ucfirst($post->status) }}</span>
        </td>
        <td class="px-4 py-3 text-gray-500 text-xs hidden md:table-cell">
          {{ $post->published_at?->format('M d, Y') }}
        </td>
        <td class="px-4 py-3">
          <div class="flex items-center gap-2 justify-end">
            <a href="{{ route('admin.posts.edit', $post) }}"
               class="text-xs text-blue-400 hover:underline">Edit</a>
            <form method="POST" action="{{ route('admin.posts.featured', $post) }}" class="inline">
              @csrf
              <button type="submit" class="text-xs text-gray-500 hover:text-yellow-400 transition-colors" title="Toggle featured">★</button>
            </form>
            <form method="POST" action="{{ route('admin.posts.destroy', $post) }}" class="inline"
                  onsubmit="return confirm('Delete this post?')">
              @csrf @method('DELETE')
              <button type="submit" class="text-xs text-gray-600 hover:text-red-400 transition-colors">✕</button>
            </form>
          </div>
        </td>
      </tr>
      @empty
      <tr>
        <td colspan="7" class="px-5 py-12 text-center text-gray-500">No posts found.</td>
      </tr>
      @endforelse
    </tbody>
  </table>
</div>

{{-- Pagination --}}
<div class="mt-4">{{ $posts->links() }}</div>
@endsection
