{{-- Extends layout --}}
@extends('layouts.default')
{{-- Styles Section --}}
@section('styles')
  <title>Lynxconnect | Candidate Details</title>
  <style>
	.modal-backdrop {
		z-index: 9 !important;
	}
	.modal {
		top: 20% !important;
	}
  </style>
@endsection
{{-- Content --}}
@section('content')
	<div class="row small-spacing">
		<div class="col-lg-3 col-12">
			<div class="box-content bordered primary margin-bottom-20">
				<div class="profile-avatar">
				    @if(isset($user->gender) && $user->gender == 'M')
					    <img src="/assets/images/profile.png" alt="">
					@else
					    <img src="/assets/images/profile.png" alt="">
					@endif
					<h3><strong>{{ $user->first_name }} {{ $user->last_name }}</strong></h3>
				<!--	<h4>{{ $user->b2b_company_name }}</h4>
					<h4>{{ $user->type }}</h4> -->
					@if(isset($orders_n_history->order_status) && $orders_n_history->order_status == 'COMPLETE' && isset($orders_n_history->report_url) && $orders_n_history->report_url != '')
					<a href="{{$orders_n_history->report_url}}" class="btn btn-success" target="_blank">Donwload Report</a>
					@endif
				</div>
			</div>
		</div>
		<!-- /.col-lg-3 col-12 -->
		<div class="col-lg-9 col-12">
			<div class="row">
				<div class="col-12">
					<div class="box-content card">
						<h4 class="box-title"><i class="fa fa-user ico"></i>About</h4>
						<!-- /.box-title -->
						<div class="dropdown js__drop_down">
							<a href="#" class="dropdown-icon fas fa-ellipsis-v js__drop_down_button"></a>
							{{-- <ul class="sub-menu">
								<li><a href="#">Edit</a></li>
								<li><a href="#">Delete</a></li>
								<li><a href="#">Deactivate</a></li>
							</ul> --}}
							<!-- /.sub-menu -->
						</div>
						{{-- @dd($user) --}}
						<!-- /.dropdown js__dropdown -->
						<div class="card-content">
							<div class="row">
								<div class="col-lg-6">
									<div class="row">
										<div class="col-5"><label>First Name:</label></div>
										<!-- /.col-5 -->
										<div class="col-7">{{ $user->first_name }}</div>
										<!-- /.col-7 -->
									</div>
									<!-- /.row -->
								</div>
								<!-- /.col-lg-6 -->
								<div class="col-lg-6">
									<div class="row">
										<div class="col-5"><label>Last Name:</label></div>
										<!-- /.col-5 -->
										<div class="col-7">{{ $user->last_name }}</div>
										<!-- /.col-7 -->
									</div>
									<!-- /.row -->
								</div>
								<!-- /.col-lg-6 -->
								<div class="col-lg-6">
									<div class="row">
										<div class="col-5"><label>User ID:</label></div>
										<!-- /.col-5 -->
										<div class="col-7">{{ $user->employee_custom_id }}</div>
										<!-- /.col-7 -->
									</div>
									<!-- /.row -->
								</div>
								<!-- /.col-lg-6 -->
								<div class="col-lg-6">
									<div class="row">
										<div class="col-5"><label>Email:</label></div>
										<!-- /.col-5 -->
										<div class="col-7"><a href="mailto: {{ $user->email }}">{{ $user->email }}</a></div>
										<!-- /.col-7 -->
									</div>
									<!-- /.row -->
								</div>
								<!-- /.col-lg-6 -->
								<div class="col-lg-6">
									<div class="row">
										<div class="col-5"><label>Age:</label></div>
										<!-- /.col-5 -->
										<div class="col-7">{{\Carbon\Carbon::parse($user->dob)->diff(\Carbon\Carbon::now())->format('%y years')}}</div>
										<!-- /.col-7 -->
									</div>
									<!-- /.row -->
								</div>
								<!-- /.col-lg-6 -->
								<div class="col-lg-6">
									<div class="row">
										<div class="col-5"><label>Phone:</label></div>
										<!-- /.col-5 -->
										<div class="col-7">+{{ $user->country_code }}-{{ $user->mobile }}</div>
										<!-- /.col-7 -->
									</div>
									<!-- /.row -->
								</div>
								<!-- /.col-lg-6 -->
							</div>
							<!-- /.row -->
						</div>
						<!-- /.card-content -->
					</div>

					<div class="row">
						@if(isset($tasks))
							@foreach($tasks as $vtype)
								<div class="col-xl-6 col-12">
									<div class="box-content">
										<h4 class="box-title text-info">{{ $vtype->internal_name }}</h4>
										<div class="task-lists">
											<span class="task-item">
												<div class="title">
													<strong>Case ID:</strong> {{ $vtype->task_number }}
													<span style="float:right;">
														In Process													</span>
												</div>
												<div class="progress">
													
													@if($vtype->status == 'COMPLETE')
													<div class="progress-bar bg-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
													@elseif($vtype->status == 'CREATED')
													<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
													@else
													<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
													@endif
												</div>
												<div class="metas">
													<div class="meta">
													    <a href="javascript::void(0)" {{ $vtype->total_comments > 0 ? 'data-toggle=modal data-target=#boostrapModal-1 data-id='.$vtype->id.'' : '' }}><i class="far fa-comment ico"></i>{{ $vtype->total_comments ?? 0 }}</a>
													</div>
													<div class="meta">
													    <a href="javascript::void(0)" {{ $vtype->total_insuffs > 0 ? 'data-toggle=modal data-target=#boostrapModal-2 data-id='.$vtype->id.'' : '' }}><i class="far fa-comment ico"></i>{{ $vtype->total_insuffs ?? 0 }}</a>
													</div>
													@if($vtype->report_url != '' && $vtype->status == 'COMPLETE')
													<div class="meta"><a href="{{ $vtype->report_url }}" target="_blank"><i class="fa fa-paperclip ico"></i></a></div>
													@endif
													@php
														$end  = $vtype->received_date;
													@endphp
												<!--	<div class="meta"><i class="fa fa-check-square-o ico"></i>{{ $now->diffInDays($end) }}/{{ $vtype->tat }}</div> -->
												</div>
											</span>
										</div>
									</div>
								</div>
							@endforeach
						@endif
					</div>
				</div>
			</div>		
		</div>
	</div>

	<!-- Modal -->
	<div class="modal fade" id="boostrapModal-1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="myModalLabel">Comments</h4>
				</div>
				<div class="modal-body">
					<div class="table-responsive" data-pattern="priority-columns">
						<table class="table table-small-font table-bordered table-striped">
							<thead>
								<tr>
									<td>#</td>
									<td>Comments</td>
									<td>Created By</td>
									<td>Created At</td>
								</tr>
							</thead>
							<tbody id="comment_results">

							</tbody>
						</table>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default btn-sm waves-effect waves-light" data-dismiss="modal">Close</button>
				</div>
			</div>
		</div>
	</div>

	<!-- Modal -->
	<div class="modal fade" id="boostrapModal-2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="myModalLabel">Insuffs</h4>
				</div>
				<div class="modal-body">
					<div class="table-responsive" data-pattern="priority-columns">
						<table class="table table-small-font table-bordered table-striped">
							<thead>
								<tr>
									<td>#</td>
									<td>insuffs</td>
									<td>Created By</td>
									<td>Created At</td>
								</tr>
							</thead>
							<tbody id="insuffs_results">

							</tbody>
						</table>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default btn-sm waves-effect waves-light" data-dismiss="modal">Close</button>
				</div>
			</div>
		</div>
	</div>
@endsection
@section('scripts')
<script>
	$('#boostrapModal-1').on('shown.bs.modal', function (e) {
		var _id = 5;
		$.ajax({
			type:'GET',
			url:'{{ url("get-comments") }}/' + _id,
			data:{},
			success:function(data) {
				$("#comment_results").html(data);
			}
		});
	});

	$('#boostrapModal-2').on('shown.bs.modal', function (e) {
		var _id = 5;
		$.ajax({
			type:'GET',
			url:'{{ url("get-insuffs") }}/' + _id,
			data:{},
			success:function(data) {
				$("#insuffs_results").html(data);
			}
		});
	});
</script>
@endsection