@extends('admin.layouts.app')

@section('title', 'Categories Management')

@section('content')
<div class="container-fluid px-4 py-6">
    <!-- Page Header -->
    <div class="mb-8">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-3xl font-bold text-gray-900 mb-2">Categories Management</h1>
                <p class="text-gray-600">Organize your products with hierarchical categories</p>
            </div>
            <div class="flex space-x-3">
                <a href="{{ route('categories.create') }}" class="inline-flex items-center px-4 py-2 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-gradient-to-r from-primary to-blue-600 hover:from-primary/90 hover:to-blue-600/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-all duration-200 transform hover:scale-105">
                    <i class="fas fa-plus mr-2"></i>
                    Add New Category
                </a>
            </div>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600">Total Categories</p>
                    <p class="text-2xl font-bold text-gray-900">{{ $categories->count() }}</p>
                </div>
                <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-folder text-blue-600 text-xl"></i>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600">Root Categories</p>
                    <p class="text-2xl font-bold text-green-600">{{ $categories->where('parent_id', null)->count() }}</p>
                </div>
                <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-sitemap text-green-600 text-xl"></i>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600">Subcategories</p>
                    <p class="text-2xl font-bold text-purple-600">{{ $categories->where('parent_id', '!=', null)->count() }}</p>
                </div>
                <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-folder-tree text-purple-600 text-xl"></i>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600">Active Categories</p>
                    <p class="text-2xl font-bold text-indigo-600">{{ $categories->where('is_active', true)->count() }}</p>
                </div>
                <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-check-circle text-indigo-600 text-xl"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Search and Filters -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
        <div class="flex flex-col md:flex-row gap-4">
            <div class="flex-1">
                <label for="search" class="block text-sm font-medium text-gray-700 mb-2">Search Categories</label>
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <i class="fas fa-search text-gray-400"></i>
                    </div>
                    <input type="text" id="search" name="search" placeholder="Search by name or description..."
                           class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition-colors">
                </div>
            </div>
            <div class="md:w-48">
                <label for="level_filter" class="block text-sm font-medium text-gray-700 mb-2">Level</label>
                <select id="level_filter" name="level_filter"
                        class="block w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition-colors">
                    <option value="">All Levels</option>
                    <option value="1">Level 1 (Root)</option>
                    <option value="2">Level 2</option>
                    <option value="3">Level 3+</option>
                </select>
            </div>
            <div class="md:w-48">
                <label for="status_filter" class="block text-sm font-medium text-gray-700 mb-2">Status</label>
                <select id="status_filter" name="status_filter"
                        class="block w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition-colors">
                    <option value="">All Status</option>
                    <option value="active">Active</option>
                    <option value="inactive">Inactive</option>
                </select>
            </div>
        </div>
    </div>

    <!-- View Toggle -->
    <div class="flex justify-between items-center mb-6">
        <div class="flex items-center space-x-2">
            <button id="table_view" class="px-3 py-2 text-sm font-medium text-white bg-primary border border-primary rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
                <i class="fas fa-table mr-2"></i>Table View
            </button>
            <button id="tree_view" class="px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary">
                <i class="fas fa-sitemap mr-2"></i>Tree View
            </button>
        </div>
        <div class="text-sm text-gray-500">
            Showing {{ $categories->count() }} categories
        </div>
    </div>

    <!-- Categories Table View -->
    <div id="categories_table_view" class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-semibold text-gray-900">All Categories</h3>
        </div>

        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Level</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Parent</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Products</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @forelse($categories as $category)
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center">
                                @if($category->image)
                                    <img class="h-12 w-12 rounded-lg object-cover border border-gray-200" src="{{ asset('storage/' . $category->image) }}" alt="{{ $category->name }}">
                                @else
                                    <div class="h-12 w-12 rounded-lg bg-gradient-to-r from-gray-200 to-gray-300 flex items-center justify-center border border-gray-200">
                                        <span class="text-sm font-bold text-gray-600">{{ substr($category->name, 0, 2) }}</span>
                                    </div>
                                @endif
                                <div class="ml-4">
                                    <div class="text-sm font-medium text-gray-900">{{ $category->name }}</div>
                                    <div class="text-sm text-gray-500">{{ Str::limit($category->description, 60) }}</div>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">
                                Level {{ $category->level }}
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                            {{ $category->parent ? $category->parent->name : 'Root Category' }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                            {{ $category->products_count ?? 0 }} products
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <form action="{{ route('categories.toggle-status', $category) }}" method="POST" class="inline">
                                @csrf
                                @method('PATCH')
                                <button type="submit" class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium transition-colors duration-200
                                    {{ $category->is_active ? 'bg-green-100 text-green-800 hover:bg-green-200' : 'bg-red-100 text-red-800 hover:bg-red-200' }}">
                                    <i class="fas {{ $category->is_active ? 'fa-check-circle' : 'fa-times-circle' }} mr-1"></i>
                                    {{ $category->is_active ? 'Active' : 'Inactive' }}
                                </button>
                            </form>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <div class="flex items-center space-x-2">
                                <a href="{{ route('categories.show', $category) }}" class="text-blue-600 hover:text-blue-900 p-1 rounded" title="View">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="{{ route('categories.edit', $category) }}" class="text-indigo-600 hover:text-indigo-900 p-1 rounded" title="Edit">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <form action="{{ route('categories.destroy', $category) }}" method="POST" class="inline"
                                      onsubmit="return confirm('Are you sure you want to delete this category?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-red-600 hover:text-red-900 p-1 rounded" title="Delete">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="px-6 py-12 text-center">
                            <div class="flex flex-col items-center">
                                <i class="fas fa-folder text-gray-400 text-4xl mb-4"></i>
                                <h3 class="text-lg font-medium text-gray-900 mb-2">No Categories Found</h3>
                                <p class="text-gray-500 mb-4">Get started by creating your first category.</p>
                                <a href="{{ route('categories.create') }}" class="inline-flex items-center px-4 py-2 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-gradient-to-r from-primary to-blue-600 hover:from-primary/90 hover:to-blue-600/90">
                                    <i class="fas fa-plus mr-2"></i>
                                    Add New Category
                                </a>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Categories Tree View -->
    <div id="categories_tree_view" class="hidden bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-semibold text-gray-900">Category Tree</h3>
        </div>
        <div class="p-6">
            @if($categories->where('parent_id', null)->count() > 0)
                <div class="space-y-4">
                    @foreach($categories->where('parent_id', null) as $rootCategory)
                        <div class="category-tree-item">
                            {{ $rootCategory->renderTreeView($categories) }}
                        </div>
                    @endforeach
                </div>
            @else
                <div class="text-center py-12">
                    <i class="fas fa-sitemap text-gray-400 text-4xl mb-4"></i>
                    <h3 class="text-lg font-medium text-gray-900 mb-2">No Categories Found</h3>
                    <p class="text-gray-500 mb-4">Get started by creating your first category.</p>
                    <a href="{{ route('categories.create') }}" class="inline-flex items-center px-4 py-2 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-gradient-to-r from-primary to-blue-600 hover:from-primary/90 hover:to-blue-600/90">
                        <i class="fas fa-plus mr-2"></i>
                        Add New Category
                    </a>
                </div>
            @endif
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const tableViewBtn = document.getElementById('table_view');
    const treeViewBtn = document.getElementById('tree_view');
    const tableView = document.getElementById('categories_table_view');
    const treeView = document.getElementById('categories_tree_view');

    tableViewBtn.addEventListener('click', function() {
        tableView.classList.remove('hidden');
        treeView.classList.add('hidden');
        tableViewBtn.classList.add('bg-primary', 'text-white', 'border-primary');
        tableViewBtn.classList.remove('bg-white', 'text-gray-700', 'border-gray-300');
        treeViewBtn.classList.remove('bg-primary', 'text-white', 'border-primary');
        treeViewBtn.classList.add('bg-white', 'text-gray-700', 'border-gray-300');
    });

    treeViewBtn.addEventListener('click', function() {
        treeView.classList.remove('hidden');
        tableView.classList.add('hidden');
        treeViewBtn.classList.add('bg-primary', 'text-white', 'border-primary');
        treeViewBtn.classList.remove('bg-white', 'text-gray-700', 'border-gray-300');
        tableViewBtn.classList.remove('bg-primary', 'text-white', 'border-primary');
        tableViewBtn.classList.add('bg-white', 'text-gray-700', 'border-gray-300');
    });

    // Search functionality
    const searchInput = document.getElementById('search');
    searchInput.addEventListener('input', function() {
        const searchTerm = this.value.toLowerCase();
        const rows = document.querySelectorAll('#categories_table_view tbody tr');

        rows.forEach(row => {
            const text = row.textContent.toLowerCase();
            if (text.includes(searchTerm)) {
                row.style.display = '';
            } else {
                row.style.display = 'none';
            }
        });
    });

    // Level filter
    const levelFilter = document.getElementById('level_filter');
    levelFilter.addEventListener('change', function() {
        const filterValue = this.value;
        const rows = document.querySelectorAll('#categories_table_view tbody tr');

        rows.forEach(row => {
            if (filterValue === '') {
                row.style.display = '';
            } else {
                const levelText = row.querySelector('.bg-blue-100')?.textContent || '';
                if (levelText.includes('Level ' + filterValue) || (filterValue === '3' && levelText.includes('Level 3'))) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            }
        });
    });

    // Status filter
    const statusFilter = document.getElementById('status_filter');
    statusFilter.addEventListener('change', function() {
        const filterValue = this.value;
        const rows = document.querySelectorAll('#categories_table_view tbody tr');

        rows.forEach(row => {
            if (filterValue === '') {
                row.style.display = '';
            } else {
                const statusText = row.querySelector('.bg-green-100, .bg-red-100')?.textContent.toLowerCase() || '';
                if (statusText.includes(filterValue)) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            }
        });
    });

    // Tree view toggle functionality
    document.addEventListener('click', function(e) {
        if (e.target.classList.contains('tree-toggle')) {
            const toggleIcon = e.target;
            const childrenContainer = toggleIcon.closest('.tree-item').querySelector('.tree-children');

            if (childrenContainer) {
                childrenContainer.classList.toggle('hidden');
                toggleIcon.classList.toggle('fa-chevron-down');
                toggleIcon.classList.toggle('fa-chevron-right');
            }
        }
    });
});
</script>

<style>
.tree-item {
    position: relative;
}

.tree-children {
    margin-left: 24px;
    border-left: 2px solid #e5e7eb;
    padding-left: 16px;
}

.tree-toggle {
    cursor: pointer;
    transition: transform 0.2s;
}

.tree-toggle:hover {
    color: #4f46e5;
}
</style>
@endsection