@extends('layouts.admin')
@section('title', 'Posts')
@section('header', 'Posts')

@section('content')
<div class="mb-6 flex flex-wrap items-center justify-between gap-4">
    <form method="GET" class="flex flex-wrap gap-2">
        <input type="text" name="search" placeholder="Search posts..." value="{{ request('search') }}" class="px-4 py-2 border rounded-lg focus:ring-2 focus:ring-accent">
        <select name="type" class="px-4 py-2 border rounded-lg focus:ring-2 focus:ring-accent">
            <option value="">All Types</option>
            <option value="image" {{ request('type') === 'image' ? 'selected' : '' }}>Image</option>
            <option value="video" {{ request('type') === 'video' ? 'selected' : '' }}>Video</option>
            <option value="article" {{ request('type') === 'article' ? 'selected' : '' }}>Article</option>
        </select>
        <select name="category" class="px-4 py-2 border rounded-lg focus:ring-2 focus:ring-accent">
            <option value="">All Categories</option>
            <option value="energy" {{ request('category') === 'energy' ? 'selected' : '' }}>Energy</option>
            <option value="it" {{ request('category') === 'it' ? 'selected' : '' }}>IT</option>
            <option value="electronics" {{ request('category') === 'electronics' ? 'selected' : '' }}>Electronics</option>
            <option value="news" {{ request('category') === 'news' ? 'selected' : '' }}>News</option>
        </select>
        <select name="status" class="px-4 py-2 border rounded-lg focus:ring-2 focus:ring-accent">
            <option value="">All Status</option>
            <option value="published" {{ request('status') === 'published' ? 'selected' : '' }}>Published</option>
            <option value="draft" {{ request('status') === 'draft' ? 'selected' : '' }}>Draft</option>
        </select>
        <button type="submit" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-700">Filter</button>
    </form>
    <a href="{{ route('admin.posts.create') }}" class="px-4 py-2 bg-accent text-primary font-semibold rounded-lg hover:bg-primary-100">Add Post</a>
</div>

<form method="POST" action="{{ route('admin.posts.bulk-action') }}" class="mb-4">
    @csrf
    <div class="flex items-center gap-4 mb-4">
        <select name="action" class="px-4 py-2 border rounded-lg">
            <option value="">Bulk Actions</option>
            <option value="publish">Publish</option>
            <option value="draft">Draft</option>
            <option value="delete">Delete</option>
        </select>
        <button type="submit" class="px-4 py-2 bg-gray-700 text-white rounded-lg hover:bg-gray-800">Apply</button>
    </div>

    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
        <table class="w-full">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-4 py-3 text-left"><input type="checkbox" id="select-all"></th>
                    <th class="px-4 py-3 text-left text-sm font-semibold text-gray-600">Title</th>
                    <th class="px-4 py-3 text-left text-sm font-semibold text-gray-600">Type</th>
                    <th class="px-4 py-3 text-left text-sm font-semibold text-gray-600">Category</th>
                    <th class="px-4 py-3 text-left text-sm font-semibold text-gray-600">Status</th>
                    <th class="px-4 py-3 text-left text-sm font-semibold text-gray-600">Views</th>
                    <th class="px-4 py-3 text-left text-sm font-semibold text-gray-600">Date</th>
                    <th class="px-4 py-3 text-left text-sm font-semibold text-gray-600">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($posts as $post)
                <tr class="border-t hover:bg-gray-50">
                    <td class="px-4 py-3"><input type="checkbox" name="posts[]" value="{{ $post->id }}" class="post-checkbox"></td>
                    <td class="px-4 py-3">
                        <div class="font-medium text-primary">{{ $post->title }}</div>
                    </td>
                    <td class="px-4 py-3">
                        <span class="px-2 py-1 text-xs rounded bg-gray-100 text-gray-700">{{ $post->type }}</span>
                    </td>
                    <td class="px-4 py-3">
                        <span class="px-2 py-1 text-xs rounded bg-blue-100 text-blue-700">{{ $post->category }}</span>
                    </td>
                    <td class="px-4 py-3">
                        <span class="px-2 py-1 text-xs rounded {{ $post->is_published ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700' }}">
                            {{ $post->is_published ? 'Published' : 'Draft' }}
                        </span>
                    </td>
                    <td class="px-4 py-3 text-gray-500">{{ $post->views }}</td>
                    <td class="px-4 py-3 text-gray-500 text-sm">{{ $post->created_at->format('M d, Y') }}</td>
                    <td class="px-4 py-3">
                        <div class="flex items-center gap-2">
                            <a href="{{ route('admin.posts.edit', $post) }}" class="text-blue-600 hover:text-blue-800">Edit</a>
                            @if($post->is_published)
                            <form method="POST" action="{{ route('admin.posts.draft', $post) }}">@csrf<button type="submit" class="text-yellow-600 hover:text-yellow-800">Draft</button></form>
                            @else
                            <form method="POST" action="{{ route('admin.posts.publish', $post) }}">@csrf<button type="submit" class="text-green-600 hover:text-green-800">Publish</button></form>
                            @endif
                            <form method="POST" action="{{ route('admin.posts.destroy', $post) }}" onsubmit="return confirm('Are you sure?')">@csrf @method('DELETE')<button type="submit" class="text-red-600 hover:text-red-800">Delete</button></form>
                        </div>
                    </td>
                </tr>
                @endforeach
                @if($posts->isEmpty())
                <tr>
                    <td colspan="8" class="px-4 py-8 text-center text-gray-500">No posts found</td>
                </tr>
                @endif
            </tbody>
        </table>
    </div>

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

<script>
document.getElementById('select-all').addEventListener('change', function() {
    document.querySelectorAll('.post-checkbox').forEach(cb => cb.checked = this.checked);
});
</script>
@endsection