@extends('admin.layouts.app')

@section('title', 'News & Stories')
@section('page-title', 'News & Stories')
@section('page-subtitle', 'Content management')

@section('content')
<div class="p-4 lg:p-6">
  <!-- Filter and Actions -->
  <div class="flex flex-wrap items-center justify-between gap-3 mb-6">
    <div class="flex flex-wrap gap-2">
      <a href="{{ route('admin.news.index') }}" class="px-3 py-2 {{ !request('status') ? 'bg-primary-500 text-white' : 'bg-white text-slate-600 border border-slate-200' }} text-xs font-medium rounded-lg">All</a>
      <a href="{{ route('admin.news.filter.status', 'published') }}" class="px-3 py-2 bg-white text-slate-600 text-xs font-medium rounded-lg border border-slate-200">Published</a>
      <a href="{{ route('admin.news.filter.status', 'draft') }}" class="px-3 py-2 bg-white text-slate-600 text-xs font-medium rounded-lg border border-slate-200">Draft</a>
    </div>
    <a href="{{ route('admin.news.create') }}" class="px-4 py-2 bg-primary-500 text-white text-xs font-medium rounded-lg shadow-lg shadow-primary-500/30">
      <i class="fas fa-plus mr-2"></i>New Article
    </a>
  </div>

  <!-- Articles Grid -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    @forelse($articles as $article)
      <div class="bg-white rounded-xl border border-slate-100 shadow-sm overflow-hidden hover:shadow-md transition">
        @if($article->featured_image)
          <img src="{{ asset('storage/' . $article->featured_image) }}" class="w-full h-40 object-cover">
        @else
          <div class="w-full h-40 bg-gradient-to-br from-blue-500 to-violet-600 flex items-center justify-center">
            <i class="fas fa-newspaper text-4xl text-white"></i>
          </div>
        @endif
        
        <div class="p-4">
          <div class="flex items-center gap-2 mb-2">
            <span class="px-2 py-0.5 bg-blue-50 text-blue-600 text-[10px] font-medium rounded-full">
              {{ $article->category }}
            </span>
            @if($article->is_featured)
              <span class="px-2 py-0.5 bg-amber-50 text-amber-600 text-[10px] font-medium rounded-full">
                <i class="fas fa-star mr-1"></i>Featured
              </span>
            @endif
            <span class="px-2 py-0.5 bg-{{ $article->status == 'published' ? 'primary' : 'slate' }}-50 text-{{ $article->status == 'published' ? 'primary' : 'slate' }}-600 text-[10px] font-medium rounded-full">
              {{ ucfirst($article->status) }}
            </span>
          </div>
          
          <h3 class="font-bold text-slate-800 text-sm mb-1 line-clamp-2">{{ $article->title }}</h3>
          <p class="text-xs text-slate-500 mb-3 line-clamp-2">{{ $article->excerpt }}</p>
          
          <div class="flex items-center justify-between text-xs text-slate-500 mb-3">
            <div class="flex items-center gap-1">
              <img src="{{ $article->author->avatar ? asset('storage/' . $article->author->avatar) : 'https://ui-avatars.com/api/?name=' . urlencode($article->author->name) }}" class="w-5 h-5 rounded-full">
              <span>{{ $article->author->name }}</span>
            </div>
            <span><i class="fas fa-eye mr-1"></i>{{ $article->views }}</span>
          </div>
          
          <div class="flex items-center justify-between">
            <span class="text-[10px] text-slate-400">
              {{ $article->published_at ? $article->published_at->format('M d, Y') : 'Not published' }}
            </span>
            <div class="flex gap-1">
              <a href="{{ route('admin.news.show', $article) }}" class="p-1.5 text-slate-400 hover:text-blue-600 hover:bg-blue-50 rounded">
                <i class="fas fa-eye text-xs"></i>
              </a>
              <a href="{{ route('admin.news.edit', $article) }}" class="p-1.5 text-slate-400 hover:text-primary-600 hover:bg-primary-50 rounded">
                <i class="fas fa-edit text-xs"></i>
              </a>
              <form method="POST" action="{{ route('admin.news.destroy', $article) }}" class="inline" onsubmit="return confirm('Are you sure?')">
                @csrf
                @method('DELETE')
                <button type="submit" class="p-1.5 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded">
                  <i class="fas fa-trash text-xs"></i>
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>
    @empty
      <div class="col-span-full bg-white rounded-xl border border-slate-100 p-8 text-center">
        <i class="fas fa-newspaper text-4xl text-slate-300 mb-3"></i>
        <p class="text-slate-500">No articles found</p>
        <a href="{{ route('admin.news.create') }}" class="inline-block mt-3 px-4 py-2 bg-primary-500 text-white text-xs font-medium rounded-lg">
          Create Your First Article
        </a>
      </div>
    @endforelse
  </div>
  
  <!-- Pagination -->
  @if($articles->hasPages())
    <div class="mt-6">
      {{ $articles->links() }}
    </div>
  @endif
</div>
@endsection