@extends('backend.layout')
@section('title', $title)

@section('headerStyles')
 <style>
     *{margin:0px; padding:0px;}
	 body{font-family: 'Poppins', sans-serif; background:#fff;}
.l_ft {
    margin-bottom: 15px;
    width: 24%;
    box-shadow: 0 1px 1px 0 rgb(0 0 0 / 5%), 0 1px 2px 0 rgb(0 0 0 / 10%), 0 2px 20px 0 rgb(0 0 0 / 20%);
    border-radius: 8px;
    margin-left: 1%;
}
.fu_grid {
    margin-top: 25px;
}
.i_text{
    padding: 0px;
}
.l_ft {
    height: 100px;
    padding-top: 15px !important;
}
.p_na {
    color: #333;
    padding-top: 10px;
}
	 .im_das {
    margin-top: 14px;
	}
	
	.b_tag {
		font-weight: 600;
		color: #8f23f8;
	}
	
@media screen and (min-width:320px) and (max-width:767px) {
  .l_ft {
    height: 111px;
    width: 100%;
}
.i_sbg {
    width: 30%;
    float: left;
    padding-top: 15px;
}
.i_text {
    padding-top: 13px;
}


}
	 
	
  </style>
 
@endsection

@section('footerScripts')
@endsection
@section('content')  
  
 <div class="container">
    <div class="col-md-12 fu_grid">
        <div class="col-md-3 l_ft" style="padding:0px;">
             <div class="col-md-4 i_sbg">
               <img src="{{ asset('images/Job_Roles.png') }}" class="im_das">
             </div>
             <div class="col-md-8 i_text text-center">
                 <h3 class="b_tag">{{ $rolecount }}</h3>
                 <p class="p_na">Job Roles</p>
             </div>
        </div>
        
        <div class="col-md-3 l_ft" style="padding:0px;">
             <div class="col-md-4 i_sbg">
               <img src="{{ asset('images/Completed_Users.png') }}" class="im_das">
             </div>
             <div class="col-md-8 i_text text-center">
                 <h3 class="b_tag">{{ $completeduserscount }}</h3>
                 <p class="p_na">Completed Users</p>
             </div>
        </div>
        
        <div class="col-md-3 l_ft" style="padding:0px;">
             <div class="col-md-4 i_sbg">
               <img src="{{ asset('images/In_completed_Users.png') }}" class="im_das">
             </div>
             <div class="col-md-8 i_text text-center">
                 <h3 class="b_tag">{{ $incompleteduserscount }}</h3>
                 <p class="p_na">In completed Users</p>
             </div>
        </div>
        
        <div class="col-md-3 l_ft" style="padding:0px;">
             <div class="col-md-4 i_sbg">
               <img src="{{ asset('images/Shortlisted_Profiles.png') }}" class="im_das">
             </div>
             <div class="col-md-8 i_text text-center">
                 <h3 class="b_tag">{{ $shortlistuserscount }}</h3>
                 <p class="p_na">Shortlisted Profiles</p>
             </div>
        </div>
        
        <div class="col-md-3 l_ft" style="padding:0px;">
             <div class="col-md-4 i_sbg">
               <img src="{{ asset('images/Rejected_Profiles.png') }}" class="im_das">
             </div>
             <div class="col-md-8 i_text text-center">
                 <h3 class="b_tag">{{ $rejectuserscount }}</h3>
                 <p class="p_na">Rejected Profiles</p>
             </div>
        </div>
        
    </div>
 </div>

@endsection
