@extends('layouts.admin')

@section('content')
<div class="container mx-auto px-6 py-8">
    <div class="flex justify-between items-center mb-6">
        <h3 class="text-gray-700 text-3xl font-medium">مدیریت دسته‌بندی‌ها</h3>
        <a href="{{ route('categories.create') }}" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:bg-indigo-700">
            <i class="fas fa-plus ml-2"></i>افزودن دسته‌بندی
        </a>
    </div>

    <div class="bg-white shadow-md rounded-lg overflow-hidden">
        <div class="p-4 overflow-x-auto">
            <table class="w-full display datatable">
                <thead>
                    <tr>
                        <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">عنوان</th>
                        <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">آیکون</th>
                        <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">وضعیت</th>
                        <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">عملیات</th>
                    </tr>
                </thead>
                <tbody class="bg-white">
                    @foreach($categories as $category)
                        @include('admin.categories.row', ['category' => $category, 'level' => 0])
                    @endforeach
                </tbody>
            </table>
        </div>

        <div class="px-5 py-5 bg-white border-t border-gray-200">
            {{ $categories->links() }}
        </div>
    </div>
</div>
@endsection