@extends('layouts.app')

@section('content')
<div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Error Messages -->
        @if(session('error'))
        <div class="bg-red-50 border border-red-200 rounded-xl p-4 mb-6">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-exclamation-triangle text-red-600 text-xl"></i>
                </div>
                <div class="ml-3">
                    <p class="text-sm text-red-800 font-medium">{{ session('error') }}</p>
                </div>
            </div>
        </div>
        @endif

        <!-- Success Messages -->
        @if(session('success'))
        <div class="bg-emerald-50 border border-emerald-200 rounded-xl p-4 mb-6">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-check-circle text-emerald-600 text-xl"></i>
                </div>
                <div class="ml-3">
                    <p class="text-sm text-emerald-800 font-medium">{{ session('success') }}</p>
                </div>
            </div>
        </div>
        @endif

        <!-- Page Header -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
                <div class="mb-4 sm:mb-0">
                    <div class="flex items-center">
                        <div class="bg-orange-100 rounded-lg p-3 mr-4">
                            <i class="fas fa-folder-open text-orange-600 text-xl"></i>
                        </div>
                        <div>
                            <h1 class="text-2xl font-bold text-gray-900">Inventory Categories</h1>
                            <p class="mt-1 text-sm text-gray-500">Manage inventory categories and stock</p>
                        </div>
                    </div>
                </div>
                <div class="flex flex-wrap gap-3">
                    <a href="{{ route('inventory.categories.create') }}" class="inline-flex items-center px-4 py-2 bg-orange-600 text-white text-sm font-medium rounded-lg hover:bg-orange-700 transition-all duration-200 shadow-sm hover:shadow-md">
                        <i class="fas fa-plus mr-2"></i> New Category
                    </a>
                </div>
            </div>
        </div>

        <!-- Search -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
            <form method="GET" action="{{ route('inventory.categories.index') }}" class="flex gap-3">
                <div class="flex-1 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" name="search" placeholder="Search categories..." value="{{ request('search') }}" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-colors">
                </div>
                <button type="submit" class="inline-flex items-center px-4 py-2 bg-orange-100 text-orange-700 text-sm font-medium rounded-lg hover:bg-orange-200 transition-colors">
                    <i class="fas fa-search mr-2"></i> Search
                </button>
            </form>
        </div>

        <!-- Table -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="border-b border-gray-200 bg-gray-50">
                            <th class="px-6 py-4 text-left text-sm font-semibold text-gray-900">Category Name</th>
                            <th class="px-6 py-4 text-left text-sm font-semibold text-gray-900">Code</th>
                            <th class="px-6 py-4 text-left text-sm font-semibold text-gray-900">Items</th>
                            <th class="px-6 py-4 text-left text-sm font-semibold text-gray-900">Description</th>
                            <th class="px-6 py-4 text-left text-sm font-semibold text-gray-900">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @isset($categories)
                            @forelse($categories as $category)
                            <tr class="border-b border-gray-200 hover:bg-gray-50 transition-colors">
                                <td class="px-6 py-4">
                                    <div class="flex items-center">
                                        <div class="flex-shrink-0 h-8 w-8 bg-orange-100 rounded-full flex items-center justify-center mr-3">
                                            <i class="fas fa-folder text-orange-600 text-xs"></i>
                                        </div>
                                        <a href="{{ route('inventory.categories.show', $category) }}" class="text-orange-600 hover:text-orange-700 font-medium transition-colors">
                                            {{ $category->name }}
                                        </a>
                                    </div>
                                </td>
                                <td class="px-6 py-4">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 font-mono">
                                        {{ $category->slug }}
                                    </span>
                                </td>
                                <td class="px-6 py-4">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                        <i class="fas fa-box mr-1 text-xs"></i>
                                        {{ $category->items_count ?? 0 }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 text-gray-600 text-sm">
                                    {{ Str::limit($category->description ?? '-', 50) }}
                                </td>
                                <td class="px-6 py-4 text-sm">
                                    <div class="flex gap-2">
                                        <a href="{{ route('inventory.categories.show', $category) }}" class="inline-flex items-center px-2 py-1 text-orange-600 hover:text-orange-700 hover:bg-orange-50 rounded transition-colors" title="View">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="{{ route('inventory.categories.edit', $category) }}" class="inline-flex items-center px-2 py-1 text-emerald-600 hover:text-emerald-700 hover:bg-emerald-50 rounded transition-colors" title="Edit">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <form method="POST" action="{{ route('inventory.categories.destroy', $category) }}" class="inline" onsubmit="return confirm('Are you sure?')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="inline-flex items-center px-2 py-1 text-red-600 hover:text-red-700 hover:bg-red-50 rounded transition-colors" title="Delete">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="5" class="px-6 py-12 text-center text-gray-500">
                                    <div class="bg-gray-100 rounded-full p-6 mb-4 mx-auto w-24 h-24 flex items-center justify-center">
                                        <i class="fas fa-inbox text-gray-400 text-2xl"></i>
                                    </div>
                                    <h3 class="text-lg font-medium text-gray-900 mb-2">No categories found</h3>
                                    <p class="text-sm text-gray-500 mb-4 max-w-md mx-auto">Get started by creating your first inventory category to organize your items.</p>
                                    <a href="{{ route('inventory.categories.create') }}" class="inline-flex items-center px-4 py-2 bg-orange-600 text-white text-sm font-medium rounded-lg hover:bg-orange-700 transition-all duration-200 shadow-sm hover:shadow-md">
                                        <i class="fas fa-plus mr-2"></i> Create First Category
                                    </a>
                                </td>
                            </tr>
                            @endforelse
                        @else
                            <tr>
                                <td colspan="5" class="px-6 py-12 text-center text-red-500">
                                    <div class="bg-red-100 rounded-full p-6 mb-4 mx-auto w-24 h-24 flex items-center justify-center">
                                        <i class="fas fa-exclamation-triangle text-red-400 text-2xl"></i>
                                    </div>
                                    <h3 class="text-lg font-medium text-red-900 mb-2">Unable to load categories data</h3>
                                    <p class="text-sm text-red-700 mt-2 max-w-md mx-auto">Please refresh the page or contact support if the problem persists</p>
                                </td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Pagination -->
        @isset($categories)
        <div class="mt-6">
            {{ $categories->links() }}
        </div>
        @endif
    </div>
</div>
@endsection