@props(['img','imgClass','id','title','role','popoverdatacontent','popovertitle','popoverrol','popovertrainername','chart','value','value1','value2','value3','value4','value5','rating'])
<div class="card card-members">
    <div class="card-body card-inner d-flex align-items-center justify-content-between">
        <div class="d-flex align-items-center card-profile">
            <img src="{{$img}}" class="img-fluid avatar-48 rounded-circle card-img {{ $imgClass }} mx-2" alt="image" data-trigger="hover" data-placement="bottom" data-toggle="popover" data-content="{{$popoverdatacontent}}" title="{{$popovertitle}}">  
            <h6 class="mx-2">{{$title}}</h6>
        </div>
        <div class="d-flex align-items-center card-action">
            <a href="#" class="badge bg-success-light mx-2 " type="button" data-trigger="hover" data-placement="bottom" data-toggle="popover" data-content="{{$popoverrol}}" title="{{$popovertrainername}}" >{{$role}}</a>
            <div class="d-flex mx-2 card-progress">
                <div id="circle-progress-{{$id}}" class="circle-progress circle-progress-basic mx-2 circle-progress-primary " data-min-value="0" data-max-value="100" data-value={{$value}} data-type="percent"><div><span>M</span></div></div>
                <div id="circle-progress-{{$id}}-2" class="circle-progress circle-progress-basic mx-2 circle-progress-danger" data-min-value="0" data-max-value="100" data-value={{$value1}} data-type="percent"><div><span>T</span></div></div>
                <div id="circle-progress-{{$id}}-3" class="circle-progress circle-progress-basic mx-2 circle-progress-warning" data-min-value="0" data-max-value="100" data-value={{$value2}} data-type="percent"><div><span>W</span></div></div>
                <div id="circle-progress-{{$id}}-4" class="circle-progress circle-progress-basic mx-2 circle-progress-primary" data-min-value="0" data-max-value="100" data-value={{$value3}} data-type="percent"><div><span>T</span></div></div>
                <div id="circle-progress-{{$id}}-5" class="circle-progress circle-progress-basic mx-2 circle-progress-info" data-min-value="0" data-max-value="100" data-value={{$value4}} data-type="percent"><div><span>F</span></div></div>
                <div id="circle-progress-{{$id}}-6" class="circle-progress circle-progress-basic mx-2 circle-progress-primary" data-min-value="0" data-max-value="100" data-value={{$value5}} data-type="percent"><div><span>S</span></div></div>
            </div>
            @for ($i = 1; $i <= 5; $i++)
            @if($rating >= $i)
                <x-rating-star fill=1/>
            @else
                <x-rating-star fill=0/>
            @endif
            @endfor
            
            

            <!-- Mobile Size start -->
            <div id="{{$chart}}" class="d-lg-none chart-sm"></div>
            <!-- Mobile Size End -->
            <div class="dropdown my-md-2">
                <a href="#" class="mx-2"   role="button" id="plan" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="text-danger mx-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                    </svg>Annually Fees
                </a>
                    <div class="dropdown-menu" aria-labelledby="plan">
                    <a class="dropdown-item" href="#">Annually Fees<small><sup class="badge bg-primary-light">75%</sup></small> </a>
                    <a class="dropdown-item" href="#">Half-Annually Fees<small><sup class="badge bg-success-light">50%</sup></small>  </a>
                    <a class="dropdown-item" href="#">Quarterly Fess<small><sup class="badge bg-info-light">25%</sup></small>  </a>
                </div>
            </div>
            <div class="dropdown dropdown-sm">
                <a href="#" class="mx-2" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
                    </svg>
                </a>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
                    <a class="dropdown-item" href="#">
                        <svg xmlns="http://www.w3.org/2000/svg" class="mr-2 text-primary" width="24" height="24"fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                        </svg>View
                    </a>
                    <a class="dropdown-item" href="#">
                        <svg xmlns="http://www.w3.org/2000/svg" class="mr-2 text-success" width="24" height="24"fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                        </svg>Edit
                    </a>
                    <a class="dropdown-item" href="#">
                        <svg xmlns="http://www.w3.org/2000/svg" class="mr-2 text-danger" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                        </svg>Deleted
                    </a>
                </div>
            </div>
            <div class="d-lg-none card-action-sm">
                <a href="#" class="btn btn-sm rounded-circle py-2 mr-2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="text-primary" width="24" height="24"fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                    </svg>
                    </a>
                    <a href="#" class="btn btn-sm rounded-circle py-2 mr-2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="text-success" width="24" height="24"fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                    </svg>
                    </a>
                    <a href="#" class="btn btn-sm rounded-circle py-2 mr-2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="text-danger" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                    </svg>
                </a>
            </div>
        </div>

        
    </div>
</div>