@extends('admin.layout.main')

@section('admin')
<div class="flex flex-col h-full">
    <!-- Header -->
    <div class="mb-8">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <div>
                <h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white">Blog Posts</h1>
                <p class="text-gray-500 dark:text-gray-400 mt-1">Manage your blog posts and articles</p>
                
            </div>
            <a href="{{ route('admin.blog.create') }}" 
               class="inline-flex items-center gap-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white px-4 py-2 rounded-lg 
                      hover:from-blue-600 hover:to-blue-700 active:scale-[0.98] transition-all shadow-sm hover:shadow">
                <i class="fas fa-plus-circle text-sm"></i>
                New Post
            </a>
        </div>
    </div>

    <!-- Filters -->
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-700/50 shadow-sm p-5 mb-6">
        <form method="GET" class="space-y-4">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <!-- Search -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Search</label>
                    <div class="relative">
                        <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm"></i>
                        <input type="text" 
                               name="search" 
                               value="{{ request('search') }}" 
                               placeholder="Search posts..."
                               class="w-full pl-10 pr-4 py-2 text-sm border border-gray-200 dark:border-gray-700 rounded-lg 
                                      bg-gray-50 dark:bg-gray-700/50 text-gray-900 dark:text-white 
                                      focus:ring-2 focus:ring-blue-500 focus:border-transparent focus:outline-none">
                    </div>
                </div>

                <!-- Category Filter -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Category</label>
                    <select name="category" 
                            class="w-full px-4 py-2 text-sm border border-gray-200 dark:border-gray-700 rounded-lg 
                                   bg-gray-50 dark:bg-gray-700/50 text-gray-900 dark:text-white 
                                   focus:ring-2 focus:ring-blue-500 focus:border-transparent focus:outline-none">
                        <option value="">All Categories</option>
                        @foreach($categories as $category)
                            <option value="{{ $category->id }}" {{ request('category') == $category->id ? 'selected' : '' }}>
                                {{ $category->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <!-- Status Filter -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Status</label>
                    <select name="status" 
                            class="w-full px-4 py-2 text-sm border border-gray-200 dark:border-gray-700 rounded-lg 
                                   bg-gray-50 dark:bg-gray-700/50 text-gray-900 dark:text-white 
                                   focus:ring-2 focus:ring-blue-500 focus:border-transparent focus:outline-none">
                        <option value="">All Status</option>
                        <option value="published" {{ request('status') == 'published' ? 'selected' : '' }}>Published</option>
                        <option value="draft" {{ request('status') == 'draft' ? 'selected' : '' }}>Draft</option>
                        <option value="featured" {{ request('status') == 'featured' ? 'selected' : '' }}>Featured</option>
                    </select>
                </div>

                <!-- Actions -->
                <div class="flex items-end gap-2">
                    <button type="submit" 
                            class="flex-1 inline-flex items-center justify-center gap-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white px-4 py-2 rounded-lg 
                                   hover:from-blue-600 hover:to-blue-700 active:scale-[0.98] transition-all shadow-sm hover:shadow text-sm">
                        <i class="fas fa-filter text-xs"></i>
                        Filter
                    </button>
                    @if(request()->hasAny(['search', 'category', 'status']))
                        <a href="{{ route('admin.blog.index') }}" 
                           class="inline-flex items-center justify-center px-4 py-2 text-sm border border-gray-200 dark:border-gray-700 
                                  text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
                            <i class="fas fa-times text-xs"></i>
                        </a>
                    @endif
                </div>
            </div>
        </form>
    </div>

    <!-- Blog Posts Table -->
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-700/50 shadow-sm overflow-hidden flex-1 flex flex-col">
        <div class="px-5 py-4 border-b border-gray-100 dark:border-gray-700">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <h2 class="font-semibold text-gray-900 dark:text-white">All Blog Posts</h2>
                <div class="text-sm text-gray-500 dark:text-gray-400">
                    {{ $posts->firstItem() ?? 0 }}-{{ $posts->lastItem() ?? 0 }} of {{ $posts->total() }}
                </div>
            </div>
        </div>
        
        <div class="flex-1 overflow-auto">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                <thead class="bg-gray-50 dark:bg-gray-700">
                    <tr>
                        <th class="px-5 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Post
                        </th>
                        <th class="px-5 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Category
                        </th>
                        <th class="px-5 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Status
                        </th>
                        <th class="px-5 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Views
                        </th>
                        <th class="px-5 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-32">
                            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-700 transition-colors">
                            <!-- Post Column -->
                            <td class="px-5 py-4">
                                <div class="flex items-center gap-3">
                                    @if($post->featured_image)
                                        <div class="w-16 h-12 rounded-lg overflow-hidden flex-shrink-0">
                                            <img src="{{ asset($post->featured_image) }}" 
                                                 alt="{{ $post->title }}"
                                                 class="w-full h-full object-cover">
                                        </div>
                                    @else
                                        <div class="w-16 h-12 rounded-lg bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-600 
                                                  flex items-center justify-center flex-shrink-0">
                                            <i class="fas fa-newspaper text-gray-400 dark:text-gray-500 text-sm"></i>
                                        </div>
                                    @endif
                                    <div class="min-w-0 flex-1">
                                        <a href="{{ route('blog.show', $post->slug) }}" 
                                           target="_blank" 
                                           class="text-sm font-medium text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 
                                                  transition-colors block truncate">
                                            {{ Str::limit($post->title, 60) }}
                                        </a>
                                        <div class="flex items-center gap-2 mt-1">
                                            <span class="text-xs text-gray-500 dark:text-gray-400">
                                                {{ $post->read_time }} min
                                            </span>
                                            <span class="text-xs text-gray-400 dark:text-gray-500">•</span>
                                            <span class="text-xs text-gray-500 dark:text-gray-400">
                                                {{ $post->created_at->format('M d') }}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            
                            <!-- Category Column -->
                            <td class="px-5 py-4">
                                @if($post->category)
                                    <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium" 
                                          style="background-color: {{ $post->category->color }}20; color: {{ $post->category->color }}">
                                        {{ $post->category->name }}
                                    </span>
                                @else
                                    <span class="text-xs text-gray-500 dark:text-gray-400">No category</span>
                                @endif
                            </td>
                            
                            <!-- Status Column -->
                            <td class="px-5 py-4">
                                <div class="flex flex-col gap-1">
                                    @if($post->is_featured)
                                        <span class="inline-flex items-center gap-1 px-2 py-1 rounded text-xs font-medium 
                                                     bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300">
                                            <i class="fas fa-star text-xs"></i>
                                            Featured
                                        </span>
                                    @endif
                                    <span class="inline-flex items-center gap-1 px-2 py-1 rounded text-xs font-medium 
                                                {{ $post->is_published ? 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300' : 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300' }}">
                                        <i class="fas {{ $post->is_published ? 'fa-check-circle' : 'fa-pencil-alt' }} text-xs"></i>
                                        {{ $post->is_published ? 'Published' : 'Draft' }}
                                    </span>
                                </div>
                            </td>
                            
                            <!-- Views Column -->
                            <td class="px-5 py-4">
                                <div class="flex items-center gap-1 text-sm text-gray-900 dark:text-white">
                                    <i class="fas fa-eye text-gray-400 dark:text-gray-500 text-xs"></i>
                                    {{ number_format($post->views) }}
                                </div>
                            </td>
                            
                            <!-- Actions Column -->
                            <td class="px-5 py-4">
                                <div class="flex items-center gap-2">
                                    <!-- View Button -->
                                    <a href="{{ route('blog.show', $post->slug) }}" 
                                       target="_blank"
                                       class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-blue-50 dark:bg-blue-900/20 
                                              text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-900/30 
                                              active:scale-[0.95] transition-all"
                                       title="View Post">
                                        <i class="fas fa-external-link-alt text-xs"></i>
                                    </a>
                                    
                                    <!-- Edit Button -->
                                    <a href="{{ route('admin.blog.edit', $post) }}" 
                                       class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-green-50 dark:bg-green-900/20 
                                              text-green-600 dark:text-green-400 hover:bg-green-100 dark:hover:bg-green-900/30 
                                              active:scale-[0.95] transition-all"
                                       title="Edit Post">
                                        <i class="fas fa-edit text-xs"></i>
                                    </a>
                                    
                                    <!-- Featured Toggle -->
                                    <button type="button" 
                                            onclick="toggleFeatured({{ $post->id }})"
                                            class="inline-flex items-center justify-center w-8 h-8 rounded-lg 
                                                   {{ $post->is_featured ? 'bg-yellow-50 dark:bg-yellow-900/20 text-yellow-600 dark:text-yellow-400 hover:bg-yellow-100 dark:hover:bg-yellow-900/30' : 'bg-gray-50 dark:bg-gray-700 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-600' }} 
                                                   active:scale-[0.95] transition-all"
                                            title="{{ $post->is_featured ? 'Remove from Featured' : 'Mark as Featured' }}">
                                        <i class="fas fa-star text-xs"></i>
                                    </button>

                                    <!-- Publish Toggle -->
                                    <button type="button" 
                                            onclick="toggleStatus({{ $post->id }})"
                                            class="inline-flex items-center justify-center w-8 h-8 rounded-lg 
                                                   {{ $post->is_published ? 'bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400 hover:bg-green-100 dark:hover:bg-green-900/30' : 'bg-gray-50 dark:bg-gray-700 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-600' }} 
                                                   active:scale-[0.95] transition-all"
                                            title="{{ $post->is_published ? 'Unpublish' : 'Publish' }}">
                                        <i class="fas {{ $post->is_published ? 'fa-eye-slash' : 'fa-eye' }} text-xs"></i>
                                    </button>

                                    <!-- Delete Button -->
                                    <button type="button" 
                                            onclick="openDeleteModal('{{ $post->id }}', '{{ $post->title }}')"
                                            class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-red-50 dark:bg-red-900/20 
                                                   text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900/30 
                                                   active:scale-[0.95] transition-all"
                                            title="Delete Post">
                                        <i class="fas fa-trash text-xs"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-5 py-12">
                                <div class="flex flex-col items-center justify-center text-gray-400 dark:text-gray-500">
                                    <div class="w-16 h-16 rounded-full bg-gradient-to-r from-green-500 to-green-600 flex items-center justify-center mb-4">
                                        <i class="fas fa-newspaper text-white text-xl"></i>
                                    </div>
                                    <p class="text-lg font-medium text-gray-500 dark:text-gray-400 mb-2">No blog posts found</p>
                                    <p class="text-sm text-gray-400 dark:text-gray-500 mb-4">Get started by creating your first blog post</p>
                                    <a href="{{ route('admin.blog.create') }}" 
                                       class="inline-flex items-center gap-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white px-4 py-2 rounded-lg 
                                              hover:from-blue-600 hover:to-blue-700 active:scale-[0.98] transition-all shadow-sm hover:shadow">
                                        <i class="fas fa-plus-circle text-sm"></i>
                                        Create First Post
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        <!-- Pagination -->
        @if($posts->hasPages())
            <div class="px-5 py-4 border-t border-gray-100 dark:border-gray-700">
                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                    <div class="text-sm text-gray-500 dark:text-gray-400">
                        Showing {{ $posts->firstItem() }} to {{ $posts->lastItem() }} of {{ $posts->total() }} results
                    </div>
                    <div class="flex items-center gap-2">
                        {{ $posts->links() }}
                    </div>
                </div>
            </div>
        @endif
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div id="deleteModal" class="fixed inset-0 bg-black/50 dark:bg-black/70 flex items-center justify-center p-4 z-50 hidden">
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl max-w-md w-full transform transition-all duration-300 scale-95 opacity-0"
         id="modalContent">
        <!-- Modal Header -->
        <div class="p-6 border-b border-gray-200 dark:border-gray-700">
            <div class="flex items-center gap-3">
                <div class="w-12 h-12 rounded-full bg-red-50 dark:bg-red-900/20 flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-exclamation-triangle text-red-500 dark:text-red-400 text-lg"></i>
                </div>
                <div class="min-w-0 flex-1">
                    <h3 class="text-lg font-bold text-gray-900 dark:text-white">Confirm Deletion</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">This action cannot be undone</p>
                </div>
            </div>
        </div>

        <!-- Modal Body -->
        <div class="p-6">
            <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-4">
                <div class="flex items-start gap-3">
                    <i class="fas fa-info-circle text-red-500 dark:text-red-400 mt-0.5"></i>
                    <div class="min-w-0 flex-1">
                        <p class="text-sm font-medium text-red-800 dark:text-red-300">Warning: Blog Post Deletion</p>
                        <p class="text-xs text-red-600 dark:text-red-400 mt-1">
                            This will permanently delete the blog post and all associated comments.
                        </p>
                    </div>
                </div>
            </div>

            <div class="space-y-3">
                <div class="flex justify-between items-center py-2 border-b border-gray-100 dark:border-gray-700">
                    <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Post Title:</span>
                    <span class="text-sm font-semibold text-gray-900 dark:text-white" id="modalPostTitle"></span>
                </div>
                <div class="flex justify-between items-center py-2">
                    <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Created:</span>
                    <span class="text-sm text-gray-900 dark:text-white" id="modalPostDate"></span>
                </div>
            </div>
        </div>

        <!-- Modal Footer -->
        <div class="p-6 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 rounded-b-xl">
            <div class="flex gap-3 justify-end">
                <button type="button" 
                        onclick="closeDeleteModal()"
                        class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 
                               border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 
                               focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-colors duration-200">
                    Cancel
                </button>
                <form id="deleteForm" method="POST" class="inline">
                    @csrf
                    @method('DELETE')
                    <button type="submit" 
                            class="px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-red-500 to-red-600 
                                   hover:from-red-600 hover:to-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 
                                   focus:ring-red-500 rounded-lg shadow-sm transition-all duration-200 transform hover:scale-105">
                        <i class="fas fa-trash mr-2"></i>
                        Delete Post
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<style>
    .dark .bg-gray-700 {
        background-color: rgba(55, 65, 81, 0.5);
    }
    
    table {
        border-collapse: separate;
        border-spacing: 0;
    }
    
    thead th {
        position: sticky;
        top: 0;
        z-index: 10;
    }
    
    tbody tr:last-child td {
        border-bottom: none;
    }
    
    /* Smooth transitions for modal */
    #deleteModal {
        backdrop-filter: blur(4px);
    }
    
    #modalContent {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
</style>

<script>
    // Delete Modal Functions
    function openDeleteModal(postId, postTitle) {
        // Set modal content
        document.getElementById('modalPostTitle').textContent = postTitle;
        document.getElementById('modalPostDate').textContent = new Date().toLocaleDateString('en-US', {
            year: 'numeric',
            month: 'short',
            day: 'numeric'
        });

        // Set delete form action
        const deleteForm = document.getElementById('deleteForm');
        deleteForm.action = `/admin/panel/blog/${postId}`;

        // Show modal with animation
        const modal = document.getElementById('deleteModal');
        const modalContent = document.getElementById('modalContent');
        
        modal.classList.remove('hidden');
        setTimeout(() => {
            modalContent.classList.remove('scale-95', 'opacity-0');
            modalContent.classList.add('scale-100', 'opacity-100');
        }, 10);
    }

    function closeDeleteModal() {
        const modal = document.getElementById('deleteModal');
        const modalContent = document.getElementById('modalContent');
        
        modalContent.classList.remove('scale-100', 'opacity-100');
        modalContent.classList.add('scale-95', 'opacity-0');
        
        setTimeout(() => {
            modal.classList.add('hidden');
        }, 300);
    }

    // Toggle Post Status
    async function toggleStatus(postId) {
        try {
            const response = await fetch(`/admin/panel/blog/${postId}/toggle-status`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            });

            const data = await response.json();
            
            if (data.success) {
                showToast(data.message, 'success');
                setTimeout(() => location.reload(), 1500);
            }
        } catch (error) {
            showToast('An error occurred. Please try again.', 'error');
        }
    }

    // Toggle Featured Status
    async function toggleFeatured(postId) {
        try {
            const response = await fetch(`/admin/panel/blog/${postId}/toggle-featured`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            });

            const data = await response.json();
            
            if (data.success) {
                showToast(data.message, 'success');
                setTimeout(() => location.reload(), 1500);
            }
        } catch (error) {
            showToast('An error occurred. Please try again.', 'error');
        }
    }

    // Toast notification
    function showToast(message, type = 'success') {
        const toast = document.createElement('div');
        toast.className = `fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg z-50 transform transition-all duration-300 translate-x-full`;
        toast.innerHTML = `
            <div class="flex items-center gap-2 ${type === 'success' ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}">
                <i class="fas ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'}"></i>
                <span>${message}</span>
            </div>
        `;
        
        document.body.appendChild(toast);
        
        // Animate in
        setTimeout(() => {
            toast.classList.remove('translate-x-full');
        }, 10);
        
        // Remove after 3 seconds
        setTimeout(() => {
            toast.classList.add('translate-x-full');
            setTimeout(() => {
                document.body.removeChild(toast);
            }, 300);
        }, 3000);
    }

    // Event Listeners
    document.addEventListener('DOMContentLoaded', function() {
        // Close modal when clicking outside
        document.getElementById('deleteModal').addEventListener('click', function(e) {
            if (e.target === this) {
                closeDeleteModal();
            }
        });

        // Close modal with Escape key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                closeDeleteModal();
            }
        });
    });
</script>
@endsection