@extends('admin.master')

@section('content')
<div class="container mx-auto px-4 py-6">
    <div class="flex justify-between items-center mb-6">
        <h2 class="text-2xl font-bold text-gray-800">Blog Posts</h2>
        <a href="{{ route('admin.blogs.create') }}" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded shadow">
            + Add Blog
        </a>
    </div>

    @if(session('success'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">{{ session('success') }}</div>
    @endif

    <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden min-h-[400px]">
        @if($blogs->isEmpty())
            <div class="flex flex-col items-center justify-center h-full py-24 text-center">
                <div class="w-16 h-16 bg-green-50 rounded-xl flex items-center justify-center mb-4">
                    <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path></svg>
                </div>
                <h3 class="text-lg font-bold text-gray-800 mb-1">No Blog Available!</h3>
                <p class="text-sm text-gray-400 mb-6">Create your first blog post to get started</p>
                <a href="{{ route('admin.blogs.create') }}" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-6 rounded shadow">
                    + Add Blog
                </a>
            </div>
        @else
            <!-- Standard Table View when blogs exist -->
            <table class="w-full text-left text-sm">
                <thead class="bg-gray-50 text-xs uppercase text-gray-500 font-bold border-b">
                    <tr>
                        <th class="px-6 py-4">Image</th>
                        <th class="px-6 py-4">Title</th>
                        <th class="px-6 py-4">Category</th>
                        <th class="px-6 py-4 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100 text-gray-700">
                    @foreach($blogs as $blog)
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-4">
                                @if($blog->image)
                                    <img src="{{ asset('storage/' . $blog->image) }}" class="w-12 h-12 rounded object-cover">
                                @else
                                    <div class="w-12 h-12 bg-gray-100 rounded border flex items-center justify-center"><span class="text-xs text-gray-400">N/A</span></div>
                                @endif
                            </td>
                            <td class="px-6 py-4 font-bold text-gray-800">{{ $blog->title }}</td>
                            <td class="px-6 py-4">{{ $blog->category?->name ?? 'None' }}</td>
                            <td class="px-6 py-4">
                                <div class="flex items-center justify-end gap-2">
                                    <a href="{{ route('admin.blogs.edit', $blog->id) }}" class="p-2 text-gray-400 hover:text-blue-600 border rounded">Edit</a>
                                    <form action="{{ route('admin.blogs.destroy', $blog->id) }}" method="POST" onsubmit="return confirm('Are you sure?');">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="p-2 text-gray-400 hover:text-red-600 border rounded">Delete</button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
            <div class="p-4">{{ $blogs->links() }}</div>
        @endif
    </div>
</div>
@endsection