@extends('layouts.main')
@section('title',trans('core.title_test_result'))
@section('content')
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Lato);
body {
  font-family: Lato;
}
div.gallery {
  border: 1px solid #ccc;
}
div.gallery:hover {
  border: 1px solid #777;
  cursor: pointer;
  box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 15px 0 rgba(0, 0, 0, 0.19);
}
div.gallery img {
  width: 100%;
  height: 225px;
}
div.desc {
  padding: 15px;
  text-align: left;
}
* {
  box-sizing: border-box;
}
div.desc p{
	margin-bottom: 0.5rem;
}
.thumb_button{
	text-align:center;
	margin-top: 10px;
}
.responsive {
  padding: 30px 25px;
  float: left;
  width: 22.99999%;
}
@media only screen and (max-width: 1200px) {
  .responsive {
    width: 30.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 760px) {
  .responsive {
    width: 45.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 480px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
</style>
<div class="pcoded-content">
	<div class="pcoded-inner-content p-0">
		<div class="main-body">
			<div class="page-wrapper p-0">
				<div class="page-header p-15 m-b-0 pro-page-heading1">
					<div class="page-header-title">
						<h4>Blocked Candidate list</h4>
					</div>
					@if(!session()->has('new_portal_redirect'))
					<div class="page-header-breadcrumb p-r-10">
						<ul class="breadcrumb-title">
							<li class="breadcrumb-item">
							@if(Auth::guard('corporate')->user()->user_type == 1)
								<a href="{{secure_url('company/dashboard') }}"> <span class="hiremee-home"></span> </a>	
							@elseif(Auth::guard('corporate')->user()->user_type == 2)
								<a href="javascript:void(0)"> <span class="hiremee-home"></span> </a>
							@endif
							</li>
							<li class="breadcrumb-item"><a href="{{ secure_url('pro/company/ongoing-assessments-search') }}">Search for Test Result</a></li>
						</ul>
					</div>
					@endif
				</div>
				<div id="pro-preview-page1"></div>

				@if(!empty(count($candidates)))
				<div class="page-body">
					<div class="pageheader bg-666666">
						<div class="row">
							<div class="col col-md-6 d-flex c-white align-items-center">
								<span class="font-italic m-r-5 m-l-5">@if(!is_null($assessment)){{$assessment->name}} @endif</span>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-12">

							@foreach($candidates as $candidate)
								@php  $photo = \HireMeeHelper::getAWSImageUrl($candidate->s3_id,config('filesystems.disks.hiremeeprodev.bucket'),'hiremeeprodev');
								@endphp	
								<div class="responsive">
								  	<div class="gallery">
								  		<div class="proctoring" data-assign_id="{{$candidate->assign_id}}" data-testpin_id="{{$candidate->testpin}}" data-candidate_id="{{$candidate->id}}" data-proctoring-type="@if(!is_null($corporate_custom_settings) && ($corporate_custom_settings->proctor_listing_type == 1)){{1}}@else{{2}}@endif">
											<img src="{{ $photo }}" alt="User-Profile-Image" class="" id='js-proctoring-image'>
										</div>
									    <div class="desc">
								    		<p>Candiate Name: {{$candidate->first_name}} {{$candidate->last_name}}</p>
											<p>Test Pin: {{$candidate->testpin}}</p>
											<p>Start time: {{date('H:i:s',strtotime($candidate->created_at))}}</p>
											<p>Total Images: {{$candidate->totImg}}</p>
											@if(isset($candidate->totFlagedImg))
											 <p>Total Flagged Images: {{$candidate->totFlagedImg}}</p>
											@endif
											<p><a class="view-comment" href="#" rel="{{$candidate->comments}}">Show Comments</a></p>
											@if((\Carbon\Carbon::parse($candidate->start_date)->format('Y-m-d H:i:s') <= \Carbon\Carbon::now()->format('Y-m-d H:i:s')) && (\Carbon\Carbon::parse($candidate->end_date)->format('Y-m-d H:i:s') >= \Carbon\Carbon::now()->format('Y-m-d H:i:s')))
												{{--<p class="thumb_button">
													<button class="btn btn-primary but_thumb revoke candidate_{{$candidate->assign_id}}" rel="{{$candidate->assign_id}}">{{  'Revoke' }}</button>
												</p>--}}	
											@endif
								    	</div>
								  	</div>
								</div>
							@endforeach
						</div>
					</div>
					<div class="col-md-12" style="padding-top: 20px">
						{{$candidates->links()}}
					</div>
					<!-- <div class="d-flex flex-row justify-content-center">
						<button class="btn orange btn-lg" type="button" id="load_more_report" rel="2" @if($hasMore == false) disabled="disabled" @endif>Load More</button>
					</div> -->
					<div style="display:none">
						{!! Form::open(["action" => "Pro\Corporate\CorporateController@testResultSearch", "id" => "loadMoreForm"]) !!}
							{!! Form::hidden("assessment", (!empty($input['assessment']))?$input['assessment']:"") !!}
							{!! Form::hidden("assessment_type",(!empty($input['assessment_type']))? $input['assessment_type'] : "") !!}
							{!! Form::hidden("page", "2", ["id" => "skip_count"]) !!}
						{!! Form::close() !!}
					</div>
				</div>
				@else
					<div class="col-md-12">
						<p class="text-center" style="padding-top: 100px">No Records found</p>
					</div>
				@endif
			</div>
		</div>
	</div>
</div>

<div class="hme-loading-mask">
    <div class="hme-loading-container">
        <div class="hme-dual-ring"></div>
        <div>Please wait, Loading...</div>
    </div>
</div> 	 	
<div class="md-modal m-w-950 md-effect-1" id="pro-report-view">
	<form name="feedbackpost" id="feedbackpost">
		<div class="md-content p-l-0 p-r-0 p-t-0">
			<button type="button" class="btn btn-primary btn-icon-custom waves-effect md-close login-close-btn"><span class="hiremee-multiply f-18"></span></button>
			<div class="report-modal-head p-b-5 p-t-5">
				<span>Screen captured at consecutive timestamp while assessment</span>
			</div>
			<div class="report-modal-content">
				<!--<div class="tab-content row p-l-0 p-r-10" id="js-pro-image-data"></div>-->
				<ul class="nav nav-tabs md-tabs" role="tablist" style="background:#fff;padding: 0px;">
					@if(!is_null($corporate_custom_settings) && ($corporate_custom_settings->proctor_listing_type == 1))
						<li class="nav-item">
							<a class="nav-link active allImgTab" data-toggle="tab" href="#all-proctored" data-imcount="0" role="tab">All </a>
						</li>
						<li class="nav-item">
							<a class="nav-link processedImagesTab" data-toggle="tab" href="#proctored" data-imcount="0" role="tab">Flagged </a>
						</li>
						@else
							<li class="nav-item">
							<a class="nav-link active" data-toggle="tab" href="#all-proctored" data-imcount="0" role="tab">All </a>
						</li>
						@endif

					</ul>
					<div class="tab-content p-0">
						@if(!is_null($corporate_custom_settings) && ($corporate_custom_settings->proctor_listing_type == 1))
						<div class="tab-pane active" id="all-proctored" role="tabpanel">
							<div class="tab-content row p-l-0 p-r-10" id="all-image-data"></div>
						</div>
						<div class="tab-pane" id="proctored" role="tabpanel">
							<div class="tab-content row p-l-0 p-r-10" id="processed-image-data"></div>
						</div>
						@else
							<div class="tab-pane active" id="all-proctored" role="tabpanel">
							<div class="tab-content row p-l-0 p-r-10" id="all-image-data"></div>
						</div>
						@endif
						
					</div>
			</div>
		</div>
	</form>
</div>

<!-- The Modal -->
  <div class="modal fade" id="myModal">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
      <form name="revokeForm" id="revokeForm" action="{{route('proctoring-terminate')}}">
        <!-- Modal Header -->
        <div class="modal-header">
          <h5 class="">Reason to block</h5>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          	<input type="hidden" id="assign_id" name="assign_id">
          	 @csrf
          	<div class="form-group">
			    <label for="email">Proctor Comments:</label>
			    <textarea name="comments" id="comments" class="form-control" required></textarea>
			  </div>
			  <!-- <button type="button" id="submit-comments" class="btn btn-primary pull-right">Submit</button> -->
        </div>
        </form>
      </div>
    </div>
  </div>

<!-- Modal -->
<div class="">
<div class="modal fade" id="view-proctoring-screen">
  <div class="modal-dialog modal-md modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title text-dark" id="exampleModalLongTitle"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true"><i class="hiremee-multiply f-18"></i></span>
        </button>
      </div>
      <div class="modal-body text-center">
     
        <img src="" alt="User-Profile-Image" class="report-image img-fluid" id='js-proctoring-image-preview' style="width:auto; height: 350px;" >
        <p class="reason-content" id="exampleModalReason"></p>
      </div>
    </div>
  </div>
</div>
</div>

@endsection

@section('footer')
<script type="text/javascript">
var assign_id = 0;
var test_pin = 0;
var candidate_id = 0;


$(function() {
	$("#load_more_report").click(function(e) {
		$("#load_more_report").text("Processing....");
		var url = "{{ secure_url('pro/company/live-proctoring') }}";
		var form_data 	 = $("#loadMoreForm").serialize();
		var current_page = $('#skip_count').val();
		$('.hme-loading-mask').fadeIn();
		$.ajax({
		    type: 'GET',
		    url: url,
		    data: form_data,
		    dataType:'json',
		    success: function(resultData, resultStatus, resultRequest) {
		      	if(resultRequest.status == 204) {
		      		$('.hme-loading-mask').fadeIn();
		      		swal({
						html: true,
						title: '<span class="sweet-danger-text">Alert</span>',
						text: "No data to load",
						type: "error",
						showCancelButton: false,
						confirmButtonText: "OK",
						closeOnConfirm: false,
						confirmButtonColor: '#f0443a',
					});

					$("#load_more_report").text("Load More").attr("disabled", "disabled");
					return false;
		      	}
		      	$('.hme-loading-mask').fadeOut();
		      	$("#table_body").append(resultData.content);
		      	if(resultData.hasMore == false){
		      		$('#load_more_report').attr('disabled',true);
		      	}
		      	$('#skip_count').val(parseInt(current_page)+1);
		    },
		    error:function(err){
		    	$('.hme-loading-mask').fadeOut();
		    }
		});
		$("#load_more_report").text("Load More");
	});
	
	$(document).on('click','.proctoring',function(e){
		var procType = $(this).data('proctoring-type');
		assign_id = $(this).data('assign_id');
		test_pin = $(this).data('testpin_id');
		candidate_id = $(this).data('candidate_id');
		if(procType == '1'){
			if($(e.target).hasClass('but_thumb')){
			return false;
			}
			getAllImages();
			//getProcessedImg();
		}else{
			console.log('calling');
			if($(e.target).hasClass('but_thumb')){
			return false;
			}
			getAllImages();
		}
	});
	/* Proctoring Image Unprocess images */
	$(document).on('click','.allImgTab',function(e){
		e.preventDefault();
		getAllImages();
		
	});

	/* Proctoring Processed Images */
	$(document).on('click','.processedImagesTab',function(e){
		e.preventDefault();
		getProcessedImg();
	});

	function getAllImages(){
		//$('#pro-report-view').addClass('md-show')
		$('.nav-tabs a[href="#all-proctored"]').tab('show');
		$('.hme-loading-mask').fadeIn();

	/*	assign_id = $(this).data('assign_id');
		test_pin = $(this).data('testpin_id');
		candidate_id = $(this).data('candidate_id');*/
		$.ajax({
		    url:baseUrl + '/pro/company/all-proctoring-images-lists',
	        type: "get",
	        data:{assign_id:assign_id,test_pin_id:test_pin,candidate_id:candidate_id},
	        success:function(response){
		    	$('.hme-loading-mask').fadeOut();
			    if (response.status == 200 ) {
			      	$('#all-image-data').html(response.component)  
			      	$('#pro-report-view').addClass('md-show');
			    } else {
			      	swal({
			            html: true, 
			            title: '<span class="sweet-danger-text">Something Went Wrong</span>', 
			            type: "error",
			            showCancelButton: false,
			            confirmButtonText: "OK",
			            closeOnConfirm: false,
			            confirmButtonColor: '#f0443a',
			        });
		  		}
			},
		  	error:function(err){
		       	$('.hme-loading-mask').fadeOut();
		  	}
		}); 
	}

	function getProcessedImg(){
		//$('#pro-report-view').addClass('md-show')
		$('.hme-loading-mask').fadeIn();
		$.ajax({
		    url:baseUrl + '/pro/company/live-proctoring-images',
	        type: "get",
	        data:{assign_id:assign_id,test_pin_id:test_pin,candidate_id:candidate_id},
	        success:function(response){
		    	$('.hme-loading-mask').fadeOut();
			    if (response.status == 200 ) {
			      	$('#processed-image-data').html(response.component)  
			      	$('#pro-report-view').addClass('md-show');
			    } else {
			      	swal({
			            html: true, 
			            title: '<span class="sweet-danger-text">Something Went Wrong</span>', 
			            type: "error",
			            showCancelButton: false,
			            confirmButtonText: "OK",
			            closeOnConfirm: false,
			            confirmButtonColor: '#f0443a',
			        });
		  		}
			},
		  	error:function(err){
		       	$('.hme-loading-mask').fadeOut();
		  	}
		}); 
	}


	$(document).on('click','#flagged-image-loadmore',function(e){
		e.preventDefault()
		$('.hme-loading-mask').fadeIn();
		$.ajax({
		    url:baseUrl + '/pro/company/live-proctoring-images',
		    type:'get',
		    data:{'assign_id':assign_id,'test_pin_id':test_pin,'candidate_id':candidate_id,'page':$(this).attr('data-page'),'type':'remote'},
		    success:function(response){
		      	$('.hme-loading-mask').fadeOut();
		      	if (response.status == 200 ) {
		        	var page = $('#flagged-image-loadmore').attr('data-page');
		        	$('#flagged-image-loadmore').remove();
		        	$('#processed-image-data').append(response.component)  
		        	$('#flagged-image-loadmore').attr('data-page',parseInt(page)+1);
		      	} else {
		        	alert('err')
		      	}     
		    },
		    error:function(err){
				$('.hme-loading-mask').fadeOut();
		    }
	  	})
	})
	$(document).on('click','#all-image-loadmore',function(e){
		e.preventDefault()
		$('.hme-loading-mask').fadeIn();
		$.ajax({
		    url:baseUrl + '/pro/company/all-proctoring-images-lists',
		    type:'get',
		    data:{'assign_id':assign_id,'test_pin_id':test_pin,'candidate_id':candidate_id,'page':$(this).attr('data-page'),'type':'remote'},
		    success:function(response){
		      	$('.hme-loading-mask').fadeOut();
		      	if (response.status == 200 ) {
		        	var page = $('#all-image-loadmore').attr('data-page');
		        	$('#all-image-loadmore').remove();
		        	$('#all-image-data').append(response.component)  
		        	$('#all-image-loadmore').attr('data-page',parseInt(page)+1);
		      	} else {
		        	alert('err')
		      	}     
		    },
		    error:function(err){
				$('.hme-loading-mask').fadeOut();
		    }
	  	})
	})

	$(document).on('click','.login-close-btn',function(e){
		e.preventDefault();
		$('#proctoring-model').removeClass('md-show');
		$('.modal-backdrop').remove();
	})
	
	/* Terminate proctoring */
	$(document).on('click','.revoke',function(e){
		e.preventDefault();
		var assignId = $(this).attr('rel');
		$('#assign_id').val(assignId);
		$('#comments').val('');
		  swal({
		      html: true, 
		      title: '<span class="sweet-danger-text">Are you sure want to revoke candidate?</span>', 
		      type: "warning",
		      showCancelButton: true,
		      confirmButtonText: "OK",
		      confirmButtonColor: '#f0443a',
		      closeOnConfirm: false
		    },function(){
		         swal.close();
		         if(assignId !== ''){
					$.ajax({
					    url:$('#revokeForm').attr('action'),
					    type:'post',
					    data:{'assign_id':assignId,'revoke':1},
					    dataType:'json',
					    beforeSend:function(){
					    	$('.hme-loading-mask').fadeIn();
					    },
					    success:function(response){
					      	if (response.status == 200) {
					      		$('.hme-loading-mask').fadeOut();
					      		$('.candidate_'+assignId).closest('.responsive').remove();
					        	swal({
								      title: "Success",
								      text: "Candidate Revoked Successfully",
								      type: "success",
								    });
					        	
					      	}else{
					      		swal({
								      title: "Warning",
								      text: "Something Went Wrong",
								      type: "warning",
								    });
					      	}     
					    },
					    error:function(err){
					    	$('.hme-loading-mask').fadeIn();
							swal({
							      title: "Warning",
							      text: "Something Went Wrong",
							      type: "warning",
							    });
					    }
				  	})
				} 
		});
	});

	$(document).on('click','.view-comment',function(e){
		e.preventDefault();
		$('#comments').val('');
		var comments = $(this).attr('rel');
		$('#comments').attr('disabled',true).val(comments);
		$('#myModal').modal('show');
	});
	
});
</script>
@endsection