@if($members->count())
@foreach($members as $member)
    <!-- Row 1 -->
    <tr data-id="{{ $member->id }}" 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"
            >
                    <span class="text-sm font-medium text-gray-900 font-tajawal"
                    >{{ $member->FullName }}</span
                    >
                <img
                    src="{{ returnUserImage($member->image,$member->gender) }}"
                    alt="{{ $member->FullName }}"
                    class="w-8 h-8 rounded-lg object-cover border border-neutral-100"
                />
                <input
                    type="checkbox"
                    class="w-5 h-5 rounded border-gray-300 text-brand-primary focus:ring-brand-primary"
                    aria-label="Select Rami Alaa"
                />
            </div>
        </td>
        <td class="px-6 py-4 text-center border-r border-neutral-100">
            <a
                href="mailto:Rami.A@e3melbusiness.com"
                class="text-sm text-brand-primary underline font-tajawal"
            >
                {{ $member->Email }}
            </a>
        </td>
        <td
            class="px-6 py-4 text-center text-sm text-gray-500 font-tajawal border-r border-neutral-100"
        >
            {{ $member->Category?->name }}
        </td>
        <td
            class="px-6 py-4 text-center text-sm text-gray-500 font-tajawal border-r border-neutral-100"
        >
            {{ $member->Role?->name }}
        </td>
        <td
            class="px-6 py-4 text-center text-sm text-gray-500 font-tajawal border-r border-neutral-100"
        >
            {{ $member->last_login_date }}
        </td>
        <td
            class="px-6 py-4 text-center text-sm text-gray-500 font-tajawal border-r border-neutral-100"
        >
            {{ $member->courses }} دورات
        </td>
        <td class="px-6 py-4 border-r border-neutral-100">
            <div class="flex justify-center">
                <div class="progress-circle">
                    <svg width="44" height="44">
                        <circle
                            class="progress-bg"
                            cx="22"
                            cy="22"
                            r="18"
                        ></circle>
                        <circle
                            class="progress-bar"
                            cx="22"
                            cy="22"
                            r="18"
                        ></circle>
                    </svg>
                    <div class="progress-text font-tajawal">{{ $member->courses_percentage }}%</div>
                </div>
            </div>
        </td>
        {{--                        <td class="px-6 py-4 border-r border-neutral-100">--}}
        {{--                            <div class="flex justify-center">--}}
        {{--                                <label--}}
        {{--                                    class="relative inline-flex items-center cursor-pointer"--}}
        {{--                                >--}}
        {{--                                    <input--}}
        {{--                                        type="checkbox"--}}
        {{--                                        checked--}}
        {{--                                        class="sr-only peer"--}}
        {{--                                        aria-label="Select Rami Alaa"--}}
        {{--                                    />--}}
        {{--                                    <div--}}
        {{--                                        class="w-9 h-5 bg-gray-300 peer-focus:outline-none rounded-full peer peer-checked:bg-brand-primary peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:end-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all"--}}
        {{--                                    ></div>--}}
        {{--                                </label>--}}
        {{--                            </div>--}}
        {{--                        </td>--}}
        <td class="px-4 py-4 border-r border-neutral-100">
            <div class="dropdown-container">
                <button
                    class="bg-neutral-100 rounded-lg p-2 hover:bg-neutral-200 transition-colors dropdown-toggle"
                    aria-label="Options for Rami Alaa"
                >
                    <svg
                        width="16"
                        height="16"
                        viewBox="0 0 16 16"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                    >
                        <circle cx="8" cy="4" r="1.5" fill="#666" />
                        <circle cx="8" cy="8" r="1.5" fill="#666" />
                        <circle cx="8" cy="12" r="1.5" fill="#666" />
                    </svg>
                </button>
                <div class="dropdown-menu">
                    <button type="button">
                        <img
                            src="{{ asset('frontend/images') }}/admin-view/icons/view-employee-icon.svg"
                            alt="View Employee Icon"
                            class="w-4 h-4 object-contain"
                        />
                        <span>عرض تفاصيل الموظف</span>
                    </button>
                    <a download href="{{ route('company_settings_page',['exportMemberDetail'=>true,'id'=>$member->id]) }}" type="button">
                        <img
                            src="{{ asset('frontend/images') }}/admin-view/icons/download-employee-file-icon.svg"
                            alt="Download Employee File Icon"
                            class="w-4 h-4 object-contain"
                        />
                        <span>تحميل ملف الموظف</span>
                    </a>
                </div>
            </div>
        </td>
    </tr>
@endforeach
@else
    <tr>
        <td class="text-center" colspan="8">
            لا توجد بيانات
        </td>
    </tr>
@endif