@php
    $status_array = ['Pending', 'Inactive', 'Active'];
    $badge_array = ['bg-warning', 'bg-danger', 'bg-success'];
@endphp

@if(count($users) > 0)
    @foreach($users as $user)
        <div class="col-sm-12 col-xl-4 col-lg-6 col-md-6 ">
            <div class="card user-wideget user-wideget-widget widget-user">
                <div class="widget-user-header modalb">
                    <h3 class="widget-user-username">{{ ucwords($user->first_name) }} {{ $user->last_name }}
                        <span style="float:right; font-size:12px;">
                            {{-- @if ($role->hasPermissionTo('clients show')) --}}
                                <a href="{{ url('service-provider/view',$user->id) }}" target="_blank" title=" Client Detail" class=" text-white ">
                                    <i class="fas fa-eye"></i>
                                </a>
                            {{-- @endif --}}
                        </span>
                    </h3>
                    <h6 class="widget-user-desc">&nbsp;
                        <span style="float:right">&nbsp;</span>
                    </h6>
                    <span class="badge rounded-pill {{ $badge_array[$user->status] }}">{{ $status_array[$user->status] }}</span>
                    <p class="pt-3" style="float:right"> <i class="fas fa-calendar-week"></i> {{ $user->created_at->format('M d Y') }}</p>
                </div>
                <div class="widget-user-image">
                    <img src="{{ !empty($user->images) ? 'images/product/'.$user->images : 'assets/img/faces/6.jpg' }}" class="brround" alt="User Avatar" style="object-fit: cover;height: 88px; margin-top: 7px;">
                </div>
                <div class="user-wideget-footer">
                    <div class="row">
                        <div class="col-sm-5 border-right">
                            <div class="description-block">
                                <span class="description-text">{{ $user->roles[0]->name }}</span>
                            </div>
                        </div>
                        <div class="col-sm-7">
                            <div class="description-block" style="text-align: left !important">
                                <span class="description-text">Review:
                                    <i class="fa fa-star" aria-hidden="true" style="color:yellow;"></i>
                                    <i class="fa fa-star" aria-hidden="true" style="color:yellow;"></i>
                                    <i class="fa fa-star" aria-hidden="true" style="color:yellow;"></i>
                                    <i class="fa fa-star" aria-hidden="true" style="color:yellow;"></i>
                                    <i class="fa fa-star" aria-hidden="true"></i> (5)
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endforeach
    @else
    <div class="row card mt-3" style="min-height: 62vh;position: relative; ">
        <div class="col-12 text-center" style="margin: 0;
        position: absolute;
        top: 50%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);">
            <h1 class="h3">No Service Provider Found</h1>
        </div>
    </div>
@endif

<div class="row mt-2">
    <div class="col-12">
        {{ $users->render("pagination::bootstrap-4") }}
    </div>
</div>