@if($categories->count())
    @foreach($categories as $category)
        <!-- Row 1 -->
        <tr class="bg-neutral-50 border-b border-neutral-100">
            <td class="px-6 py-4">
                <div
                    class="flex items-center justify-end gap-3 flex-row-reverse"
                >
                    <p class="text-sm font-medium text-[#101828] font-tajawal">
                        {{ $category->name }}
                    </p>
                    <input
                        type="checkbox"
                        class="category-checkbox w-5 h-5 rounded border-2 border-gray-300 cursor-pointer"
                        aria-label="Select Accounting Department"
                    />
                </div>
            </td>
            <td class="px-6 py-4 text-center border-r border-neutral-100">
                <p class="text-sm font-medium text-[#4a4a4a] font-tajawal">
                    {{ $category->courses }}
                    دورة
                </p>
            </td>
            <td class="px-6 py-4 text-center border-r border-neutral-100">
                <p class="text-sm font-medium text-[#4a4a4a] font-tajawal">
                    {{ $category->members }} موظف
                </p>
            </td>
            <td class="px-6 py-4 border-r border-neutral-100">
                <div class="flex items-center justify-center gap-4">
                    <button
                        data-id="{{ $category->id }}"
                        class="viewCategoryItem bg-neutral-100 px-4 py-2 rounded-lg flex items-center gap-2 hover:bg-neutral-200 transition-colors"
                    >
                        <img
                            src="{{ asset('frontend/images') }}/admin-view/icons/view-department-icon.svg"
                            alt="View Department Icon"
                            class="w-4 h-4 object-contain"
                        />

                        <span
                            class="text-sm font-medium text-brand-primary font-tajawal tracking-wide"
                        >عرض كامل</span
                        >
                    </button>
                    <button
                        data-json="{{ json_encode(['category_id'=>$category->id,'category_name'=>$category->name,'category_course_ids'=>\App\Models\CompaniesCategoriesCourse::where('category_id',$category->id)->pluck('course_id')->toArray(),'category_employee_ids'=>\App\Models\CompaniesCategoriesUser::where('category_id',$category->id)->pluck('user_id')->toArray()]) }}"
                        class="editCategoryItem bg-[#e8ecf4] px-4 py-2 rounded-lg flex items-center gap-2 hover:bg-[#d9e0ec] transition-colors"
                    >
                        <img
                            src="{{ asset('frontend/images') }}/admin-view/icons/edit-department-icon.svg"
                            alt="Edit Department Icon"
                            class="w-4 h-4 object-contain"
                        />
                        <span
                            class="text-sm font-medium text-brand-primary font-tajawal tracking-wide"
                        >تعديل</span
                        >

                    </button>
                    <button
                        data-id="{{ $category->id }}"
                        class="removeCategoryItem  bg-[#fdeaea] px-4 py-2 rounded-lg flex items-center gap-2 hover:bg-[#fcd5d5] transition-colors"
                    >
                        <img
                            src="{{ asset('frontend/images') }}/admin-view/icons/delete-department-icon.svg"
                            alt="Delete Department Icon"
                            class="w-4 h-4 object-contain"
                        />
                        <span
                            class="text-sm font-medium text-[#a72222] font-tajawal tracking-wide"
                        >مسح</span
                        >

                        </svg>
                    </button>
                </div>
            </td>
        </tr>
    @endforeach
@else
    <tr>
        <td class="text-center" colspan="4">
            لا توجد بيانات
        </td>
    </tr>
@endif