@extends('backend.handoff.layouts.app')
@section('content')
<div class="col-md-12">

		<div class="panel panel-default">
			<div class="panel-heading">
				<div class="panel-title" >
					{{_lang('Profile')}}
				</div>
			</div>
			<div class="panel-body">
				<table class="table table-bordered" width="100%">
					<tbody style="text-align: center;">
						<tr class="text-center">
							<td colspan="2"><img style="margin: auto;" class="thumb-image-lg thumbnail" src="{{ $profile->profile_picture != "" ? asset('uploads/profile/'.$profile->profile_picture) : '' }}"></td>
						</tr>
						<tr class="text-center">
							<td>{{ _lang('Name') }}</td>
							<td>{{ $profile->name }}</td>
						</tr>
						<tr class="text-center">
							<td>{{ _lang('User Type') }}</td>
							<td>{{ $profile->user_type }}</td>
						</tr>
						<tr class="text-center">
							<td>{{ _lang('Email') }}</td>
							<td>{{ $profile->email }}</td>
						</tr>
			
					</tbody>
				</table>
				 
				<!-- <br>
				<h3><p style="font-family: Rubik, sans-serif; margin-bottom: 0px;" class="text-muted">Performance Analytics</p></h3>
		
		<div class="col-md-13">

			<div class="card" style="width: 20rem; height: 20rem; margin-left: 180px; border-radius: 20px;">
			  <div class="card-body">
			 	<center><i class="fas fa-comments fa-2x" style="margin: 5px; color: #5A4E98;"></i></center>
			  	<br>
			  	<center><h1><span id='total_handoff' style="font-family: Baloo, cursive;">1.8 mins</span></h1></center>
			  	<center><small><b class="text-muted">Average Handle Time</b></small></center>
			  </div>
			</div>
			
			<div class="card" style="width: 20rem; height: 20rem; margin: 28px; border-radius: 20px;">
			  <div class="card-body">
			  <center><i class="fas fa-comments fa-2x" style="margin: 5px; color: #5A4E98;"></i></center>
			  <br>
			  <center><h1><span id='total_handoff' style="font-family: Baloo, cursive;">23 secs</span></h1></center>
			  <center><small><b class="text-muted">Shortest Handle Time</b></small></center>
			  </div>
			</div>

			<div class="card" style="width: 20rem; height: 20rem; border-radius: 20px;">
			  <div class="card-body">
			  <center><i class="fas fa-comments fa-2x" style="margin: 5px; color: #5A4E98;"></i></center>
			  <br>
			  <center><h1><span id='total_handoff' style="font-family: Baloo, cursive;">8 mins</span></h1></center>
			  <center><small><b class="text-muted">Longest Handle Time</b></small></center>
			  </div>
			</div>
		</div>

		<div class="col-md-13">

			<div class="card" style="width: 20rem; height: 20rem; margin-left: 180px; border-radius: 20px;">
			  <div class="card-body">
			  <center><i class="far fa-comment-dots fa-2x" style="margin: 5px; color: #5A4E98;"></i></center>
			  <br>
			  <center><h1><span id='total_handoff' style="font-family: Baloo, cursive;">N/A</span></h1></center>
			  <center><small><b class="text-muted">Average <br>Answered Rate</b></small></center>
			  </div>
			</div>

			<div class="card" style="width: 20rem; height: 20rem; margin: 28px; border-radius: 20px;">
			  <div class="card-body">
			  <center><i class="fas fa-comment-slash fa-2x" style="margin: 5px; color: #5A4E98;"></i></center>
			  <br>
			  <center><h1><span id='total_handoff' style="font-family: Baloo, cursive;">N/A</span></h1></center>
			  <center><small><b class="text-muted">Average <br>Abandoned Rate</b></small></center>
			  </div>
			</div>

			<div class="card" style="width: 20rem; height: 20rem; border-radius: 20px;">
			  <div class="card-body">
			  <center><i class="fas fa-sign-out-alt fa-2x" style="margin: 5px; color: #5A4E98;"></i></center>
			  <br>
			  <center><h1><span id='total_handoff' style="font-family: Baloo, cursive;">N/A</span></h1></center>
			  <center><small><b class="text-muted">Total <br>Left out Sessions</b></small></center>
			  </div>
			</div>

		</div>

			<br>
			<br> -->
			<!-- <h3><p style="font-family: Rubik, sans-serif; margin-bottom: 0px;" class="text-muted">User Rating</p></h3>
			
			<div class="main-section">
		<div class="rating-part">
			<div class="average-rating">
				<h2>2.5</h2>
				<i aria-hidden="true" class="fa fa-star"></i>
				<i aria-hidden="true" class="fa fa-star"></i>
				<i class="fa fa-star-half-o" aria-hidden="true"></i>
				<i aria-hidden="true" class="fa fa-star-o"></i>
				<i aria-hidden="true" class="fa fa-star-o"></i>
				<p>Average Rating</p>
			</div>
			<div class="loder-ratimg">
				<div class="progress"></div>
				<div class="progress-2"></div>
				<div class="progress-3"></div>
				<div class="progress-4"></div>
				<div class="progress-5"></div>
			</div>
			<div class="start-part">
				<i aria-hidden="true" class="fa fa-star"></i>
				<i aria-hidden="true" class="fa fa-star"></i>
				<i aria-hidden="true" class="fa fa-star"></i>
				<i aria-hidden="true" class="fa fa-star"></i>
				<i aria-hidden="true" class="fa fa-star"></i>
				<span>80%</span><br>
				<i aria-hidden="true" class="fa fa-star"></i>
				<i aria-hidden="true" class="fa fa-star"></i>
				<i aria-hidden="true" class="fa fa-star"></i>
				<i aria-hidden="true" class="fa fa-star"></i>
				<i aria-hidden="true" class="fa fa-star-o"></i>
				<span>60%</span><br>
				<i aria-hidden="true" class="fa fa-star"></i>
				<i aria-hidden="true" class="fa fa-star"></i>
				<i aria-hidden="true" class="fa fa-star"></i>
				<i aria-hidden="true" class="fa fa-star-o"></i>
				<i aria-hidden="true" class="fa fa-star-o"></i>
				<span>40%</span><br>
				<i aria-hidden="true" class="fa fa-star"></i>
				<i aria-hidden="true" class="fa fa-star"></i>
				<i aria-hidden="true" class="fa fa-star-o"></i>
				<i aria-hidden="true" class="fa fa-star-o"></i>
				<i aria-hidden="true" class="fa fa-star-o"></i>
				<span>20%</span><br>
				<i aria-hidden="true" class="fa fa-star"></i>
				<i aria-hidden="true" class="fa fa-star-o"></i>
				<i aria-hidden="true" class="fa fa-star-o"></i>
				<i aria-hidden="true" class="fa fa-star-o"></i>
				<i aria-hidden="true" class="fa fa-star-o"></i>
				<span>10%</span>
			</div>
			<div style="clear: both;"></div>
			<div class="reviews"><h1>Reviews</h1></div>
				<div class="comment-part">
					<div class="user-img-part">
						<div class="user-img">
							<img src="{{ asset('public/images/avatar.png') }}">
						</div>
						<div class="user-text">
							<h4>8 days ago</h4>
							<p>Tom kok</p>
							<span>Report</span>
						</div>
						<div style="clear: both;"></div>
					</div>
					<div class="comment">
						<i aria-hidden="true" class="fa fa-star"></i>
						<i aria-hidden="true" class="fa fa-star"></i>
						<i aria-hidden="true" class="fa fa-star"></i>
						<i aria-hidden="true" class="fa fa-star"></i>
						<i aria-hidden="true" class="fa fa-star-o"></i>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
						tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
						quis nostrud exercitation ullamco.</p>
					</div>
					<div style="clear: both;"></div>
				</div>
				<div class="comment-part">
					<div class="user-img-part">
						<div class="user-img">
							<img src="{{ asset('public/images/avatar.png') }}">
						</div>
						<div class="user-text">
							<h4>30 days ago</h4>
							<p>Win Rool</p>
							<span>Report</span>
						</div>
						<div style="clear: both;"></div>
					</div>
					<div class="comment">
						<i aria-hidden="true" class="fa fa-star"></i>
						<i aria-hidden="true" class="fa fa-star"></i>
						<i aria-hidden="true" class="fa fa-star"></i>
						<i aria-hidden="true" class="fa fa-star-o"></i>
						<i aria-hidden="true" class="fa fa-star-o"></i>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
						tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
						quis nostrud exercitation ullamco.</p>
					</div>
					<div style="clear: both;"></div>
				</div>
				<div class="comment-part">
					<div class="user-img-part">
						<div class="user-img">
							<img src="{{ asset('public/images/avatar.png') }}">
						</div>
						<div class="user-text">
							<h4>1 days ago</h4>
							<p>Jui Choal</p>
							<span>Report</span>
						</div>
						<div style="clear: both;"></div>
					</div>
					<div class="comment">
						<i aria-hidden="true" class="fa fa-star"></i>
						<i aria-hidden="true" class="fa fa-star"></i>
						<i aria-hidden="true" class="fa fa-star-o"></i>
						<i aria-hidden="true" class="fa fa-star-o"></i>
						<i aria-hidden="true" class="fa fa-star-o"></i>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
						tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
						quis nostrud exercitation ullamco.</p>
					</div>
					<div style="clear: both;"></div>
				</div>	
				<div class="comment-part">
					<div class="user-img-part">
						<div class="user-img">
							<img src="{{ asset('public/images/avatar.png') }}">
						</div>
						<div class="user-text">
							<h4>24 days ago</h4>
							<p>Jack Mins</p>
							<span>Report</span>
						</div>
						<div style="clear: both;"></div>
					</div>
					<div class="comment">
						<i aria-hidden="true" class="fa fa-star"></i>
						<i aria-hidden="true" class="fa fa-star-o"></i>
						<i aria-hidden="true" class="fa fa-star-o"></i>
						<i aria-hidden="true" class="fa fa-star-o"></i>
						<i aria-hidden="true" class="fa fa-star-o"></i>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
						tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
						quis nostrud exercitation ullamco.</p>
					</div>
					<div style="clear: both;"></div>
				</div>		
		</div>
	</div> -->

			</div>
		</div>

</div>
@endsection