@forelse ($users as $id => $user)
    <tr>
        <td class="text-center">
            {{ ++$id }}
        </td>
        <td class="text-center">
            @if ($user->image)
                <img class="w-[50px] h-[50px] rounded-full" width="50px" src="{{ asset($user->image) }}" alt="">
            @else
                <div class="w-[50px] h-[50px] bg-danger text-white rounded-full flex items-center justify-center text-lg font-bold">
                    {{ strtoupper(substr($user->first_name ?? 'U', 0, 1)) }}
                </div>
            @endif
        </td>


        <td>
            {{ $user->created_at->format('y-m-d') }}
            <p>{{ $user->created_at->diffForHumans() }}</p>
        </td>
        <td>
            {{ $user->first_name }} {{ $user->last_name }}
            <p>
                <span class="badge badge-info">
                    <i class="fa fa-building mr-2"></i> {{ $user->company }}
                </span>
            </p>

        </td>
        <td>
            {{ $user->email }}
            <p>{{ $user->phone }}</p>
        </td>
        <td>{{ $user->getRoleNames()->first() ?? 'No Role Assigned' }}</td>

        <td class="text-center">
            @if ($user->status == 'active')
                <span class="badge badge-success">Active</span>
            @elseif ($user->status == 'pending')
                <span class="badge badge-info">Pending</span>
            @elseif ($user->status == 'blocked')
                <span class="badge badge-danger">Blocked</span>
            @endif
        </td>
        <td>
            <div class="btn-group d-flex justify-content-center">
                <div class="btn-group mx-1">
                    <button type="button" class="btn btn-success btn-sm rounded-start">Action</button>
                    <button type="button"
                        class="btn btn-success btn-sm dropdown-toggle dropdown-hover dropdown-icon rounded-end"
                        data-toggle="dropdown" aria-expanded="false">
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <div class="dropdown-menu" role="menu">
                            <a class="dropdown-item" href="#" id="approveUser"
                                data-user_id="{{ $user->id }}">Active User</a>
                            <a class="dropdown-item" href="#" id="pendingUser"
                                data-user_id="{{ $user->id }}">Pending User</a>
                            <a class="dropdown-item" href="#" id="blockUser" data-user_id="{{ $user->id }}">Block
                                User</a>
                            <a class="dropdown-item" href="{{ route('admin.user.edit', $user->id) }}">Edit
                                User</a>
                        {{-- <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="{{ route('admin.user.password.edit', $user->id) }}">Change
                                Password</a> --}}
                    </div>
                </div>

                @if ($user->status == 'blocked')

                    <form id="deleteform" class="deleteform d-inline-block"
                        action="{{ route('admin.user.delete', $user->id) }}" method="post">
                        @csrf
                        <button type="submit" class="btn btn-danger btn-sm deletebtn" id="delete">
                            <span class="btn-label">
                                <i class="fas fa-trash"></i>
                            </span>
                            Delete
                        </button>
                    </form>

                @endif
            </div>
        </td>
    </tr>
@empty
    <tr>
        <td colspan="6" class="text-center text-muted">No users available.</td>
    </tr>
@endforelse