@if($separateAllEmployee->isEmpty())
    <div class="mx-3">
        <x-record-not-found />
    </div>
@else
    <div id="employee-total-count-hidden" style="display: none;">{{ $separateAllEmployee->total() }}</div>

    <div class="table-responsive">
        <table class="table table-bordered table-hover table-striped mb-0 text-nowrap align-middle">
            <thead class="sticky-top shadow-sm">
                <tr class="text-center">
                    <th>{{ __('global.no') }}</th>
                    <th>{{ __('employee.image') }}</th>
                    <th>{{ __('employee.name') }} [{{ __('employee.last_name') }}]</th>
                    <th>{{ __('employee.father_name') }}</th>
                    <th>{{ __('employee.grand_father_name') }}</th>
                    <th>{{ __('employee.id_number') }}</th>
                    <th>{{ __('employee.phone') }}</th>
                    <th>{{ __('employee.email') }}</th>
                    <th>{{ __('employee.status') }}</th>
                    <th>{{ __('employee.created_date') }}</th>
                    @if(auth()->user()->hasAnyPermission(['Employee - Separate Employee', 'Employee - Delete Employee']))
                        <th colspan="2"><i class="bx bx-cog"></i></th>
                    @endif
                </tr>
            </thead>
            <tbody>
                @php $counter = ($separateAllEmployee->currentPage() - 1) * $separateAllEmployee->perPage() + 1; @endphp
                @foreach($separateAllEmployee as $employee)
                    <tr>
                        <td class="text-center">
                            <span class="badge">{{ $counter++ }}</span>
                        </td>
                        <td class="text-center">
                            <img src="{{ $employee->image && file_exists(storage_path('app/public/attachment/employee/photo/' . $employee->image))
                                ? asset('storage/attachment/employee/photo/' . $employee->image)
                                : asset('assets/img/default-img.png') }}"
                                alt="{{ $employee->name }}" class="rounded-circle border">
                        </td>
                        <td>{{ $employee->name }} [{{ $employee->last_name }}]</td>
                        <td>{{ $employee->father_name }}</td>
                        <td>{{ $employee->grand_father_name }}</td>
                        <td>{{ $employee->id_number }}</td>
                        <td>{{ $employee->phone }}</td>
                        <td>{{ $employee->email }}</td>
                        <td>
                            <span class="badge {{ $employee->status === 'active' ? 'bg-active' : 'bg-inactive' }}">
                                {{ $employee->status === 'active' ? __('employee.active') : __('employee.inactive') }}
                            </span>
                        </td>
                        <td>{{ date('Y-m-d', strtotime($employee->created_at)) }}</td>

                        @can('Employee - Separate Employee')
                            <td class="text-center">
                                <i class="mdi-account-outline btn btn-sm unseparate-btn unseparateBtn"
                                   data-id="{{ encryption($employee->id) }}"
                                   data-url="unzeparate_zingle_employee"
                                   title="{{ __('employee.unseparate') }}"></i>
                            </td>
                        @endcan

                        @can('Employee - Delete Employee')
                            <td class="text-center">
                                <i class="mdi mdi-trash-can-outline btn btn-sm delete-btn deleteBtn"
                                   data-id="{{ encryption($employee->id) }}"
                                   data-url="deletes_employee_route"
                                   title="{{ __('employee.delete') }}"></i>
                            </td>
                        @endcan
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <div class="mt-3">
        <x-pagination-links :paginator="$separateAllEmployee" />
    </div>
    <hr>
    <div class="text-center">
        <div class="m-3 p-1 bg-light border rounded shadow-sm" style="font-size: 1.2rem; font-weight: 600; color: #333;">
            {{ __('employee.total_ajeers') }}: 
            <strong class="text-primary">{{ $ajeerCount ?? '0' }}</strong> 
            &nbsp;&nbsp;&nbsp;&nbsp; 
            {{ __('employee.total_rasmees') }}: 
            <strong class="text-success">{{ $rasmiCount ?? '0' }}</strong>
        </div>
    </div>
@endif