@extends('admin.layout.main')

@section('admin')
<div class="flex flex-col h-full overflow-auto">
    <!-- Header -->
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Blog Categories</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Manage your blog post categories</p>
        </div>
        <button type="button" onclick="openCreateModal()"
           class="bg-[#10B981] text-white px-4 py-2 rounded-lg hover:bg-[#0da271] transition-colors flex items-center">
            <i class="fas fa-plus-circle mr-2"></i>
            Add New Category
        </a>
    </div>

    <!-- Success/Error Messages -->
    @if (session('success'))
        <div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 text-green-700 dark:text-green-300 px-4 py-3 rounded-lg mb-6 flex items-center justify-between">
            <div class="flex items-center">
                <i class="fas fa-check-circle mr-2"></i>
                {{ session('success') }}
            </div>
            <button type="button" class="text-green-700 dark:text-green-300 hover:text-green-900 dark:hover:text-green-100" onclick="this.parentElement.remove()">
                <i class="fas fa-times"></i>
            </button>
        </div>
    @endif

    @if (session('error'))
        <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded-lg mb-6 flex items-center justify-between">
            <div class="flex items-center">
                <i class="fas fa-exclamation-circle mr-2"></i>
                {{ session('error') }}
            </div>
            <button type="button" class="text-red-700 dark:text-red-300 hover:text-red-900 dark:hover:text-red-100" onclick="this.parentElement.remove()">
                <i class="fas fa-times"></i>
            </button>
        </div>
    @endif

    <!-- Categories Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
        @forelse($categories as $category)
            <div class="bg-white dark:bg-dark-secondary rounded-xl border border-gray-100 dark:border-gray-700 overflow-hidden hover:shadow-lg transition-shadow duration-300">
                <!-- Category Header -->
                <div class="p-6 border-b border-gray-100 dark:border-gray-700" style="background-color: {{ $category->color }}10;">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <span class="inline-block px-3 py-1 rounded-full text-sm font-medium mb-2" 
                                  style="background-color: {{ $category->color }}20; color: {{ $category->color }}; border: 1px solid {{ $category->color }}40;">
                                {{ $category->name }}
                            </span>
                            <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">
                                {{ $category->posts_count ?? 0 }} posts
                            </p>
                        </div>
                        <div class="flex items-center space-x-2">
                            @if($category->is_active)
                                <span class="px-2 py-1 text-xs rounded-full bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 border border-green-200 dark:border-green-800">
                                    Active
                                </span>
                            @else
                                <span class="px-2 py-1 text-xs rounded-full bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300 border border-red-200 dark:border-red-800">
                                    Inactive
                                </span>
                            @endif
                        </div>
                    </div>
                    
                    <!-- Color Indicator -->
                    <div class="flex items-center">
                        <div class="w-6 h-6 rounded-full mr-3 border border-gray-200 dark:border-gray-600" style="background-color: {{ $category->color }};"></div>
                        <span class="text-sm text-gray-600 dark:text-gray-400">{{ $category->color }}</span>
                    </div>
                </div>
                
                <!-- Category Content -->
                <div class="p-6">
                    <p class="text-gray-600 dark:text-gray-300 text-sm mb-4 line-clamp-2">
                        {{ $category->description ?? 'No description provided.' }}
                    </p>
                    
                    <div class="flex justify-between items-center">
                        <div class="text-sm text-gray-500 dark:text-gray-400">
                            <i class="fas fa-sort mr-1"></i>
                            Order: {{ $category->sort_order }}
                        </div>
                        
                        <div class="flex items-center space-x-2">
                            <!-- Edit Button -->
                            <button type="button" 
                                    onclick="openEditModal({{ $category->id }}, '{{ $category->name }}', '{{ $category->description }}', '{{ $category->color }}', {{ $category->is_active ? 'true' : 'false' }}, {{ $category->sort_order }})"
                                    class="inline-flex items-center justify-center w-8 h-8 bg-green-50 dark:bg-green-900/20 text-[#10B981] rounded-lg hover:bg-green-100 dark:hover:bg-green-900/30 transition-colors border border-green-200 dark:border-green-800"
                                    title="Edit Category">
                                <i class="fas fa-edit text-xs"></i>
                            </button>
                            
                            <!-- Status Toggle Button -->
                            <form action="{{ route('admin.blog.categories.toggle-status', $category) }}" method="POST" class="inline">
                                @csrf
                                <button type="submit" 
                                        class="inline-flex items-center justify-center w-8 h-8 {{ $category->is_active ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-500 dark:text-blue-400 border-blue-200 dark:border-blue-800' : 'bg-gray-50 dark:bg-gray-700 text-gray-500 dark:text-gray-400 border-gray-200 dark:border-gray-600' }} rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors border"
                                        title="{{ $category->is_active ? 'Deactivate' : 'Activate' }}">
                                    <i class="fas {{ $category->is_active ? 'fa-eye-slash' : 'fa-eye' }} text-xs"></i>
                                </button>
                            </form>

                            <!-- Delete Button -->
                            <button type="button" 
                                    onclick="openDeleteModal({{ $category->id }}, '{{ $category->name }}')"
                                    class="inline-flex items-center justify-center w-8 h-8 bg-red-50 dark:bg-red-900/20 text-red-500 dark:text-red-400 rounded-lg hover:bg-red-100 dark:hover:bg-red-900/30 transition-colors border border-red-200 dark:border-red-800"
                                    title="Delete Category">
                                <i class="fas fa-trash text-xs"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div class="md:col-span-2 lg:col-span-3 xl:col-span-4">
                <div class="bg-white dark:bg-dark-secondary rounded-xl border border-gray-100 dark:border-gray-700 p-12 text-center">
                    <div class="flex flex-col items-center justify-center text-gray-400 dark:text-gray-500">
                        <i class="fas fa-folder text-4xl mb-3"></i>
                        <p class="text-lg font-medium text-gray-500 dark:text-gray-400">No categories found</p>
                        <p class="text-sm text-gray-400 dark:text-gray-500 mt-1">Get started by creating your first category</p>
                        <button type="button" onclick="openCreateModal()"
                               class="mt-4 bg-[#10B981] text-white px-4 py-2 rounded-lg hover:bg-[#0da271] transition-colors flex items-center">
                            <i class="fas fa-plus-circle mr-2"></i>
                            Create First Category
                        </button>
                    </div>
                </div>
            </div>
        @endforelse
    </div>

    <!-- Pagination -->
    @if($categories->hasPages())
        <div class="mt-8">
            {{ $categories->links() }}
        </div>
    @endif
</div>

<!-- Create/Edit Category Modal -->
<div id="categoryModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white dark:bg-dark-secondary rounded shadow-xl max-w-md w-full mx-4 transform transition-all">
        <div class="p-6">
            <!-- Modal Header -->
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-emerald-100 dark:bg-emerald-900/20 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-folder text-[#10B981] dark:text-emerald-400"></i>
                    </div>
                    <h3 id="modalTitle" class="text-lg font-semibold text-gray-900 dark:text-white">Create New Category</h3>
                </div>
                <button type="button" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors" onclick="closeModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <!-- Modal Body -->
            <form id="categoryForm" method="POST" class="space-y-4">
                @csrf
                <input type="hidden" id="categoryId" name="id">
                
                <!-- Category Name -->
                <div>
                    <label for="categoryName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Category Name *
                    </label>
                    <input type="text" id="categoryName" name="name" required
                           class="w-full px-4 py-2 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-[#10B981] focus:border-[#10B981] outline-none transition-colors duration-200 text-gray-900 dark:text-white"
                           placeholder="Enter category name">
                    <div id="nameError" class="text-red-500 text-sm mt-1 hidden"></div>
                </div>
                
                <!-- Description -->
                <div>
                    <label for="categoryDescription" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Description
                    </label>
                    <textarea id="categoryDescription" name="description" rows="3"
                              class="w-full px-4 py-2 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-[#10B981] focus:border-[#10B981] outline-none transition-colors duration-200 text-gray-900 dark:text-white resize-none"
                              placeholder="Brief description of the category"></textarea>
                </div>
                
                <!-- Color Picker -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Color
                    </label>
                    <div class="flex items-center space-x-4">
                        <input type="color" id="categoryColor" name="color" value="#10B981"
                               class="w-12 h-12 rounded-lg cursor-pointer border border-gray-200 dark:border-gray-600">
                        <input type="text" id="colorHex" name="color_hex" value="#10B981"
                               class="flex-1 px-4 py-2 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-[#10B981] focus:border-[#10B981] outline-none transition-colors duration-200 text-gray-900 dark:text-white font-mono text-sm">
                    </div>
                    <div class="mt-2 flex flex-wrap gap-2">
                        @php
                            $defaultColors = ['#10B981', '#3B82F6', '#8B5CF6', '#F59E0B', '#EC4899', '#EF4444', '#6366F1', '#14B8A6'];
                        @endphp
                        @foreach($defaultColors as $color)
                            <button type="button" 
                                    onclick="setColor('{{ $color }}')"
                                    class="w-8 h-8 rounded-full border-2 border-transparent hover:border-gray-300 dark:hover:border-gray-600 transition-colors"
                                    style="background-color: {{ $color }};"
                                    title="{{ $color }}">
                            </button>
                        @endforeach
                    </div>
                </div>
                
                <!-- Status & Order -->
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="flex items-center">
                            <input type="checkbox" id="categoryStatus" name="is_active" value="1" checked
                                   class="rounded border-gray-300 text-[#10B981] focus:ring-[#10B981] dark:border-gray-600 dark:bg-gray-800">
                            <span class="ml-2 text-gray-700 dark:text-gray-300">Active</span>
                        </label>
                    </div>
                    <div>
                        <label for="categoryOrder" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Sort Order
                        </label>
                        <input type="number" id="categoryOrder" name="sort_order" value="0"
                               class="w-full px-4 py-2 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-[#10B981] focus:border-[#10B981] outline-none transition-colors duration-200 text-gray-900 dark:text-white">
                    </div>
                </div>
                
                <!-- Modal Footer -->
                <div class="flex justify-end space-x-3 pt-4 border-t border-gray-100 dark:border-gray-700">
                    <button type="button" 
                            class="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
                            onclick="closeModal()">
                        Cancel
                    </button>
                    <button type="submit" 
                            id="submitButton"
                            class="px-4 py-2 bg-[#10B981] text-white rounded-lg hover:bg-[#0da271] transition-colors flex items-center">
                        <i class="fas fa-save mr-2"></i>
                        Save Category
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div id="deleteModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white dark:bg-dark-secondary rounded shadow-xl max-w-md w-full mx-4 transform transition-all">
        <div class="p-6">
            <!-- Modal Header -->
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-red-100 dark:bg-red-900/20 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-exclamation-triangle text-red-500 dark:text-red-400"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Confirm Deletion</h3>
                </div>
                <button type="button" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors" onclick="closeDeleteModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <!-- Modal Body -->
            <div class="mb-6">
                <p class="text-gray-600 dark:text-gray-300">
                    Are you sure you want to delete category 
                    <span id="deleteCategoryName" class="font-semibold text-gray-900 dark:text-white"></span>?
                </p>
                <p class="text-sm text-red-500 dark:text-red-400 mt-2 flex items-center">
                    <i class="fas fa-info-circle mr-1"></i>
                    This action cannot be undone.
                </p>
            </div>
            
            <!-- Modal Footer -->
            <div class="flex justify-end space-x-3">
                <button type="button" 
                        class="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
                        onclick="closeDeleteModal()">
                    Cancel
                </button>
                <form id="deleteForm" method="POST" class="inline">
                    @csrf
                    @method('DELETE')
                    <button type="submit" 
                            class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors flex items-center">
                        <i class="fas fa-trash mr-2"></i>
                        Delete Category
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<style>
    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .pagination {
        display: flex;
        justify-content: center;
        list-style: none;
        padding: 0;
    }
    
    .pagination li {
        margin: 0 2px;
    }
    
    .pagination li a,
    .pagination li span {
        display: block;
        padding: 8px 12px;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        color: #6b7280;
        text-decoration: none;
        transition: all 0.2s;
    }
    
    .pagination li a:hover {
        background-color: #f9fafb;
        border-color: #d1d5db;
    }
    
    .pagination li.active span {
        background-color: #10B981;
        border-color: #10B981;
        color: white;
    }
    
    .pagination li.disabled span {
        color: #9ca3af;
        background-color: #f9fafb;
    }

    /* Dark mode pagination styles */
    .dark .pagination li a,
    .dark .pagination li span {
        border: 1px solid #374151;
        color: #9ca3af;
        background-color: #1f2937;
    }

    .dark .pagination li a:hover {
        background-color: #374151;
        border-color: #4b5563;
    }

    .dark .pagination li.active span {
        background-color: #10B981;
        border-color: #10B981;
        color: white;
    }

    .dark .pagination li.disabled span {
        color: #6b7280;
        background-color: #374151;
    }

    /* Modal Animation */
    #categoryModal, #deleteModal {
        transition: opacity 0.3s ease;
    }

    #categoryModal > div, #deleteModal > div {
        transition: transform 0.3s ease;
    }

    #categoryModal.hidden, #deleteModal.hidden {
        opacity: 0;
        pointer-events: none;
    }

    #categoryModal:not(.hidden) > div, #deleteModal:not(.hidden) > div {
        transform: scale(1);
    }
    
    /* Color picker styling */
    input[type="color"]::-webkit-color-swatch-wrapper {
        padding: 0;
    }
    
    input[type="color"]::-webkit-color-swatch {
        border: none;
        border-radius: 4px;
    }
</style>

<script>
    // Category Modal Functions
    function openCreateModal() {
        const modal = document.getElementById('categoryModal');
        const form = document.getElementById('categoryForm');
        const title = document.getElementById('modalTitle');
        const submitButton = document.getElementById('submitButton');
        
        // Reset form
        form.reset();
        form.action = "{{ route('admin.blog.categories.store') }}";
        form.method = "POST";
        
        // Set modal title
        title.textContent = "Create New Category";
        
        // Set button text
        submitButton.innerHTML = '<i class="fas fa-save mr-2"></i>Create Category';
        
        // Show modal
        modal.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
        
        // Focus on name field
        document.getElementById('categoryName').focus();
    }
    
    function openEditModal(id, name, description, color, isActive, sortOrder) {
        const modal = document.getElementById('categoryModal');
        const form = document.getElementById('categoryForm');
        const title = document.getElementById('modalTitle');
        const submitButton = document.getElementById('submitButton');
        
        // Set form values
        document.getElementById('categoryId').value = id;
        document.getElementById('categoryName').value = name;
        document.getElementById('categoryDescription').value = description || '';
        document.getElementById('categoryColor').value = color;
        document.getElementById('colorHex').value = color;
        document.getElementById('categoryStatus').checked = isActive;
        document.getElementById('categoryOrder').value = sortOrder;
        
        // Set form action
        form.action = `/admin/panel/blog/categories/${id}`;
        form.method = "POST";
        
        // Add method spoofing for PUT
        if (!form.querySelector('input[name="_method"]')) {
            const methodInput = document.createElement('input');
            methodInput.type = 'hidden';
            methodInput.name = '_method';
            methodInput.value = 'PUT';
            form.appendChild(methodInput);
        } else {
            form.querySelector('input[name="_method"]').value = 'PUT';
        }
        
        // Set modal title
        title.textContent = "Edit Category";
        
        // Set button text
        submitButton.innerHTML = '<i class="fas fa-save mr-2"></i>Update Category';
        
        // Show modal
        modal.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }
    
    function closeModal() {
        const modal = document.getElementById('categoryModal');
        modal.classList.add('hidden');
        document.body.style.overflow = 'auto';
        
        // Reset form
        const form = document.getElementById('categoryForm');
        form.reset();
        
        // Remove method spoofing if exists
        const methodInput = form.querySelector('input[name="_method"]');
        if (methodInput) {
            methodInput.remove();
        }
    }
    
    // Delete Modal Functions
    function openDeleteModal(categoryId, categoryName) {
        const modal = document.getElementById('deleteModal');
        const categoryNameElement = document.getElementById('deleteCategoryName');
        const deleteForm = document.getElementById('deleteForm');
        
        categoryNameElement.textContent = categoryName;
        deleteForm.action = `/admin/panel/blog/categories/${categoryId}`;
        
        modal.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }
    
    function closeDeleteModal() {
        const modal = document.getElementById('deleteModal');
        modal.classList.add('hidden');
        document.body.style.overflow = 'auto';
    }
    
    // Utility Functions
    function setColor(color) {
        document.getElementById('categoryColor').value = color;
        document.getElementById('colorHex').value = color;
    }
    
    // Color picker sync
    document.getElementById('categoryColor').addEventListener('input', function() {
        document.getElementById('colorHex').value = this.value;
    });
    
    document.getElementById('colorHex').addEventListener('input', function() {
        const color = this.value;
        if (/^#[0-9A-F]{6}$/i.test(color)) {
            document.getElementById('categoryColor').value = color;
        }
    });
    
    // Form Submission
    document.getElementById('categoryForm').addEventListener('submit', async function(e) {
        e.preventDefault();
        
        const form = this;
        const formData = new FormData(form);
        const submitButton = form.querySelector('button[type="submit"]');
        const originalText = submitButton.innerHTML;
        
        // Show loading state
        submitButton.innerHTML = `
            <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            Saving...
        `;
        submitButton.disabled = true;
        
        try {
            const response = await fetch(form.action, {
                method: form.method,
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            });
            
            const data = await response.json();
            
            if (response.ok) {
                // Show success message and reload
                showToast(data.message || 'Category saved successfully!', 'success');
                setTimeout(() => location.reload(), 1500);
            } else {
                // Show error message
                showToast(data.message || 'An error occurred. Please try again.', 'error');
                submitButton.innerHTML = originalText;
                submitButton.disabled = false;
            }
        } catch (error) {
            console.error('Error:', error);
            showToast('An error occurred. Please try again.', 'error');
            submitButton.innerHTML = originalText;
            submitButton.disabled = false;
        }
    });
    
    // Toast notification function
    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-transform duration-300 ${type === 'success' ? 'bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 text-green-700 dark:text-green-300' : 'bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300'}`;
        toast.innerHTML = `
            <div class="flex items-center">
                <i class="fas ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'} mr-2"></i>
                <span>${message}</span>
            </div>
        `;
        
        document.body.appendChild(toast);
        
        setTimeout(() => {
            toast.remove();
        }, 3000);
    }
    
    // Event Listeners
    document.addEventListener('DOMContentLoaded', function() {
        // Close modals when clicking outside
        document.getElementById('categoryModal').addEventListener('click', function(e) {
            if (e.target === this) {
                closeModal();
            }
        });
        
        document.getElementById('deleteModal').addEventListener('click', function(e) {
            if (e.target === this) {
                closeDeleteModal();
            }
        });
        
        // Close modals with Escape key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                closeModal();
                closeDeleteModal();
            }
        });
        
        // Auto-close success/error messages after 5 seconds
        // setTimeout(() => {
        //     document.querySelectorAll('[class*="bg-"]').forEach(el => {
        //         if (el.textContent.includes('success') || el.textContent.includes('error')) {
        //             el.remove();
        //         }
        //     });
        // }, 5000);
    });
</script>
@endsection