<?php
use Livewire\Component;
use Livewire\WithPagination;
use Livewire\Attributes\Url;
use App\Models\Post;
use App\Models\Category;
?>

<div class="max-content">
    <header class="flex justify-between items-center mb-10">
        <div>
            <h1 class="text-2xl font-semibold tracking-tight text-gray-900">Blog Posts</h1>
            <p class="text-sm text-gray-500 mt-1">Manage articles and progress journals.</p>
        </div>
        @can('create posts')
        <a href="{{ route('admin.blog.create') }}" class="btn-primary" style="background-color: #99BC85; color: white; padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px;">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
            New Post
        </a>
        @endcan
    </header>

    @if (session()->has('message'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-4" role="alert">
            <span class="block sm:inline">{{ session('message') }}</span>
        </div>
    @endif

    @if (session()->has('error'))
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4" role="alert">
            <span class="block sm:inline">{{ session('error') }}</span>
        </div>
    @endif

    <div class="card">
        <div class="px-6 py-4 border-b border-gray-100 flex flex-col md:flex-row md:items-center justify-between gap-4">
            
            <div class="flex flex-wrap items-center gap-1">
                <div class="relative">
                    <i class="fa-solid fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-xs"></i>
                    <input type="text" wire:model.live.debounce.300ms="search" placeholder="Search posts..." 
                        class="pl-9 pr-4 py-1.5 text-xs border border-gray-200 rounded-md focus:ring-1 focus:ring-[#99BC85] focus:border-[#99BC85] w-48">
                </div>

                <select wire:model.live="categoryFilter" class="text-xs border border-gray-200 rounded-md py-1.5 pl-2 pr-8 focus:ring-1 focus:ring-[#99BC85] focus:border-[#99BC85]">
                    <option value="">Categories</option>
                    @foreach($categories as $id => $name)
                        <option value="{{ $id }}">{{ $name }}</option>
                    @endforeach
                </select>

                <select wire:model.live="statusFilter" class="text-xs border border-gray-200 rounded-md py-1.5 pl-2 pr-8 focus:ring-1 focus:ring-[#99BC85] focus:border-[#99BC85]">
                    <option value="">Status</option>
                    <option value="published">Published</option>
                    <option value="draft">Draft</option>
                </select>

                <select wire:model.live="featuredFilter" class="text-xs border border-gray-200 rounded-md py-1.5 pl-2 pr-8 focus:ring-1 focus:ring-[#99BC85] focus:border-[#99BC85]">
                    <option value="">Featured</option>
                    <option value="1">Featured</option>
                    <option value="0">Not Featured</option>
                </select>

                <select wire:model.live="breakingFilter" class="text-xs border border-gray-200 rounded-md py-1.5 pl-2 pr-8 focus:ring-1 focus:ring-[#99BC85] focus:border-[#99BC85]">
                    <option value="">Breaking</option>
                    <option value="1">Breaking</option>
                    <option value="0">Not Breaking</option>
                </select>

                <input type="date" wire:model.live="dateFrom" class="text-xs border border-gray-200 rounded-md py-1.5 pl-2 pr-2 focus:ring-1 focus:ring-[#99BC85] focus:border-[#99BC85]">

                <input type="date" wire:model.live="dateTo" class="text-xs border border-gray-200 rounded-md py-1.5 pl-2 pr-2 focus:ring-1 focus:ring-[#99BC85] focus:border-[#99BC85]">
            </div>
        </div>

        <div class="overflow-x-auto">
            <table>
                <thead>
                    <tr>
                        <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Title</th>
                        <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
                        <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                        <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                        <th class="px-6 py-3 bg-gray-50 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @forelse($posts as $post)
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap font-medium max-w-[300px] truncate text-sm text-gray-900">
                                {{ $post->title }}
                                <div class="flex gap-2 mt-1">
                                    @if($post->is_featured)
                                        <span class="text-[9px] bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded font-bold uppercase">Featured</span>
                                    @endif
                                    @if($post->is_breaking)
                                        <span class="text-[9px] bg-red-100 text-red-700 px-1.5 py-0.5 rounded font-bold uppercase">Breaking</span>
                                    @endif
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $post->category->name }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $post->created_at->format('M d, Y') }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm">
                                <span class="status-badge {{ $post->status === 'published' ? 'success' : 'pending' }}">
                                    {{ ucfirst($post->status) }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                @can('edit posts')
                                <a href="{{ route('admin.blog.edit', $post->id) }}" wire:navigate class="text-sage font-semibold text-xs px-2" style="color: #99BC85;">Edit</a>
                                @endcan
                                @can('delete posts')
                                <button class="text-red-500 font-semibold text-xs px-2" wire:click="delete({{ $post->id }})" wire:confirm="Are you sure?" wire:loading.attr="disabled">Delete</button>
                                @endcan
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-6 py-4 text-center text-gray-500 text-sm">No posts found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="px-6 py-4 border-t border-gray-100">
            {{ $posts->links() }}
        </div>
    </div>
</div>