@extends('layouts.admin')

@section('title', 'Blog Posts - Admin Dashboard')
@section('page-title', 'Blog Posts')
@section('page-subtitle', 'Manage and create blog posts')

@section('content')

<div class="space-y-6">
    <!-- Header with Create Button -->
    <div class="flex justify-between items-center">
        <div>
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">All Posts</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400">Total: {{ $posts->total() }} posts</p>
        </div>
        <a href="{{ route('admin.posts.create') }}" class="px-6 py-3 bg-gradient-to-r from-amber-600 to-orange-700 text-white font-bold rounded-lg hover:shadow-lg transform hover:scale-105 transition-all duration-300 inline-flex items-center space-x-2">
            <i class="fas fa-plus"></i>
            <span>Create New Post</span>
        </a>
    </div>

    <!-- Table -->
    <div class="bg-white dark:bg-gray-900 rounded-xl shadow-lg overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
                        <th class="px-6 py-4 text-left text-sm font-bold text-gray-900 dark:text-white">Title</th>
                        <th class="px-6 py-4 text-left text-sm font-bold text-gray-900 dark:text-white">Author</th>
                        <th class="px-6 py-4 text-left text-sm font-bold text-gray-900 dark:text-white">Status</th>
                        <th class="px-6 py-4 text-left text-sm font-bold text-gray-900 dark:text-white">Published</th>
                        <th class="px-6 py-4 text-left text-sm font-bold text-gray-900 dark:text-white">Created</th>
                        <th class="px-6 py-4 text-left text-sm font-bold text-gray-900 dark:text-white">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                    @forelse($posts as $post)
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
                            <td class="px-6 py-4">
                                <div class="flex items-start space-x-3">
                                    @if($post->featured_image)
                                        <img src="{{ asset('storage/' . $post->featured_image) }}" alt="{{ $post->title }}" class="w-10 h-10 rounded object-cover">
                                    @else
                                        <div class="w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded flex items-center justify-center">
                                            <i class="fas fa-image text-gray-400 text-sm"></i>
                                        </div>
                                    @endif
                                    <div>
                                        <p class="font-medium text-gray-900 dark:text-white line-clamp-1">{{ $post->title }}</p>
                                        <p class="text-xs text-gray-500 dark:text-gray-400">{{ $post->slug }}</p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">
                                {{ $post->author->name }}
                            </td>
                            <td class="px-6 py-4">
                                <span class="inline-flex px-3 py-1 rounded-full text-sm font-semibold {{ $post->status === 'published' ? 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200' : 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-200' }}">
                                    {{ ucfirst($post->status) }}
                                </span>
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">
                                @if($post->published_at)
                                    {{ $post->published_at->format('M d, Y') }}
                                @else
                                    —
                                @endif
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">
                                {{ $post->created_at->format('M d, Y') }}
                            </td>
                            <td class="px-6 py-4 text-sm space-x-3 flex items-center">
                                <a href="{{ route('admin.posts.edit', $post) }}" class="text-amber-600 dark:text-amber-400 hover:font-bold transition-all" title="Edit">
                                    <i class="fas fa-pencil"></i>
                                </a>
                                <form action="{{ route('admin.posts.destroy', $post) }}" method="POST" class="inline" onsubmit="return confirm('Are you sure you want to delete this post?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-red-600 dark:text-red-400 hover:font-bold transition-all" title="Delete">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-6 py-12 text-center text-gray-500 dark:text-gray-400">
                                <i class="fas fa-inbox text-3xl mb-2 block"></i>
                                <p class="font-medium">No posts yet</p>
                                <p class="text-sm">Create your first blog post to get started</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Pagination -->
    <div class="flex justify-center">
        {{ $posts->links() }}
    </div>
</div>

@endsection