@if( isset($data->members) && $data->members->count() > 0) 
    <div class="row mt-3">
        <div class="col-md-12 mb-3 d-flex align-items-baseline">
            <button type="button" class="col-md-1 btn btn-success mdload" data-route="{{route('invite.html',$data->id)}}" data-bs-toggle="modal" data-bs-target="#inviteUsers">
                    Invite <i class="fa-user-plus fa"></i>
            </button>

            <span class="col-md-1">&nbsp;</span>
            <span class="col-md-2 btn btn-primary m-2" onclick="filter_member_by_status('all')">
                All Users : {{$data->members->count()}} 
            </span>
            <span class="col-md-2 btn btn-success m-2" onclick="filter_member_by_status('accepted')">
                Total Members : {{$data->members->where('member_status','accepted')->count()}} 
            </span>
            
            <span class="col-md-2 btn btn-warning m-2" onclick="filter_member_by_status('invited')">
                Total Invited Users : {{$data->members->where('member_status','invited')->count()}} 
            </span>                                        

            <span class="col-md-2 btn btn-danger m-2" onclick="filter_member_by_status('pending')">
                Total Pending Users : {{$data->members->where('member_status','pending')->count()}} 
            </span>                                        
        </div> 
    </div>    
    <div class="row">
        @foreach( $data->members as $i=>$values )
            @php 
                $status = $values->member_status;
                $color = $status == 'pending'?'danger':($status == 'invited'?'warning':'success');
                $user_id = isset( $values->user->id ) ? $values->user->id : 0;
            @endphp
            <div class="col-md-3 text-center member-cards user-{{$status}}">
                <a href="{{route('users.edit',$user_id)}}">
                <div class="card border ">
                    <div class="card-body">
                        <div class="col-md-12 text-center">
                            @if(!empty( $values->user->image))
                                @if(strpos($values->user->image, "http") !== false)
                                    <img src="{{asset($values->user->image)}}" width="100" height="100" class="circle-image">
                                @elseif( file_exists(base_path($values->user->image)) )    
                                    <img src="{{asset($values->user->image)}}" width="100" height="100" class="circle-image">
                                @else    
                                    <img src="{{asset('public/assets/images/default-user.png')}}" width="100" height="100" class="circle-image">
                                @endif    
                            @else    
                                <img src="{{asset('public/assets/images/default-user.png')}}" width="100" height="100" class="circle-image">
                            @endif
                        </div>    
                        <div class="col-md-12">
                            {{ $values->user->name ?? 'Guest' }} ({{ $values->user->id ?? 0  }})
                            <br>
                            <span>({{$values->user->username ?? 'Guest'}})</span>
                        </div>    
                        <div class="text-center text-{{$color}}">
                            {{$values->member_status}}
                        </div>
                        <div class="text-center text-capitalize {{ $values->member_status == 'pending'?'text-danger':($values->member_status == 'invited'?'text-warning':'text-success') }}">
                            {{$values->user_type}}
                        </div>
                    </div>    

                </div>   
                </a> 
            </div>                                             
        @endforeach
    </div>

@else
    <div class="col-md-12 text-center">
        No memebers added yet.    
    </div>    
@endif