@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;
}
.card-align{
	display: flex;
    flex-wrap: inherit;
}
</style>
@php
$isRoundZeroActive = request()->get('active_menu') === 'round_zero';
 if(!$isRoundZeroActive && session()->has('new_portal_redirect')){
    $navbarstyle = "margin-left:4px;";
 }
@endphp
<div class="pcoded-content" style={{ $navbarstyle ?? '' }}>
	<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>Assessments Available for review</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(!is_null($candidateCount))
				<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}}  - {{date('Y-m-d')}}  (<span id="total_lists_count">{{$candidateCount}}</span>)@endif</span> @if(array_key_exists("start_date", $input) && array_key_exists("end_date", $input)) @if($input["start_date"]) from <span class="font-italic m-r-5 m-l-5"> {{$input["start_date"]}} to {{$input["end_date"]}} @endif @endif</span>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-12 card-align" id="thumbnail_lists">
							@foreach($candidates as $candidate)
								@php  $photo = \HireMeeHelper::getAWSImageUrl($candidate->s3_id,config('filesystems.disks.hiremeeprodev.bucket'),'hiremeeprodev');
								@endphp	
								<div class="responsive">
								  	<div class="gallery proctoring" data-assign_id="{{$candidate->assign_id}}" data-testpin_id="{{$candidate->testpin}}" data-candidate_id="{{$candidate->id}}">
								  		<div class="{{ ($candidate->totFlagedImg>0) ? 'flagged-border' : '' }}">
											<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 class="thumb_button">
												
												<button class="btn btn-primary but_thumb terminate candidate_{{$candidate->assign_id}}" rel="{{$candidate->assign_id}}">{{  'Block' }}</button>
											</p>	
								    	</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> 	 


@if($proctoring_type==2)	
	<div class="md-modal m-w-950 md-effect-1 modal-lg" id="pro-report-view" style="width: 1200px;
max-width: none;
height: 100%;
margin: 0;">
		<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" style="height: 550px !important;">
					<div class="tab-content row p-l-0 p-r-10" id="js-pro-image-data"></div>
				</div>
			</div>
		</form>
	</div>
 @elseif($proctoring_type==1)
 	<div class="md-modal m-w-950 md-effect-1 modal-lg" id="pro-report-view" style="width: 1200px;
max-width: none;
height: 100%;
margin: 0;">
		<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" style="height: 550px !important;">
					<div class="hme-loading-mask" id="inner_modal_loader">
					    <div class="hme-loading-container">
					        <div class="hme-dual-ring"></div>
					        <div>Please wait, Loading...</div>
					    </div>
					</div> 
					{{-- @version 20.0 @author Dilip [V2E17314] - Start --}}
					<ul class="nav nav-tabs md-tabs" role="tablist" style="background:#fff;padding: 0px;">
						<li class="nav-item">
							<a class="nav-link active flaggedtabs" data-toggle="tab" href="#all-proctored" data-imcount="0" role="tab">All </a>
						</li>
						<li class="nav-item">
							<a class="nav-link flaggedtabs" data-toggle="tab" href="#flagged-proctored" data-imcount="0" role="tab">Flagged </a>
						</li>
					</ul>
					<div class="tab-content p-0">
						<div class="tab-pane active" id="all-proctored" role="tabpanel">
							<div class="tab-content row p-l-0 p-r-10" id="js-pro-image-data"></div>
						</div>
						<div class="tab-pane" id="flagged-proctored" role="tabpanel">
							<div class="tab-content row p-l-0 p-r-10" id="js-pro-image-data-flagged"></div>
						</div>
					</div>
					{{-- @version 20.0 @author Dilip [V2E17314] - End --}}
				</div>
			</div>
		</form>
	</div>

@endif

<!-- Terminate comments -->
  <div class="modal fade" id="myModal">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
      <form name="terminateForm" id="terminateForm" action="{{route('proctoring-terminate')}}">
        <!-- Modal Header -->
        <div class="modal-header">
          <h5 class="">Reason to block exam</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">Please Enter 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;

@if($proctoring_type==2)

		$(document).on('click','.proctoring',function(e){
			e.preventDefault();
			if($(e.target).hasClass('but_thumb')){
				return false;
			}
			console.log('function calling');
			//$('#pro-report-view').addClass('md-show')
			$('.hme-loading-mask').fadeIn();
			assign_id = $(this).data('assign_id');
			test_pin = $(this).data('testpin_id');
			candidate_id = $(this).data('candidate_id');
			getLiveProctoredImages(test_pin,assign_id,candidate_id,'unprocessed'); 
			$('#pro-report-view').addClass('md-show')
		});

	@elseif($proctoring_type==1)
		$(document).on('click','.proctoring',function(e){
		e.preventDefault();
		if($(e.target).hasClass('but_thumb')){
			return false;
		}
		$('#js-pro-image-data,#js-pro-image-data-flagged').html('');
		assign_id = $(this).data('assign_id');
		test_pin = $(this).data('testpin_id');
		candidate_id = $(this).data('candidate_id');
		$('#pro-report-view').addClass('md-show')
  		$('#inner_modal_loader').fadeIn();
  		setTimeout(function(){
	  		$("a[href='#all-proctored']").trigger('click');
		},500);
		getLiveProctoredImages(test_pin,assign_id,candidate_id,'unprocessed'); 
  		getLiveProctoredImages(test_pin,assign_id,candidate_id,'flagged');

  		$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
		  var target = $(e.target).attr("href") // activated tab
		  if(target == '#flagged-proctored'){
		  	$('#js-pro-image-data-flagged').html('');
  			getLiveProctoredImages(test_pin,assign_id,candidate_id,'flagged');
		  }
		});
  		
	});	
	
@endif

   function getLiveProctoredImages(test_pin,assign_id,candidate_id,forimg)
	{
		console.log('function called');
	  	$.ajax({
	      	url:baseUrl + '/pro/company/live-proctoring-images-lists',
	      	type: "get",
	      	data:{assign_id:assign_id,test_pin_id:test_pin,candidate_id:candidate_id,flaged_images:forimg},
	      	success:function(response){
	          	$('.hme-loading-mask').fadeOut();
	          	if(response.status == 200 ) {
	              	if(forimg=='flagged'){
	                  	$('#js-pro-image-data-flagged').html(response.component);
	                  	$('a[href="#flagged-proctored"]').attr("data-imcount",response.count);
	              	}else{
	                  	$('#js-pro-image-data').html(response.component);
	                  	$('a[href="#all-proctored"]').attr("data-imcount",response.count);
	                }
	            } 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();
	        	console.log(err)
	      	},
	   	});
	}

	$(document).on('click','.live-proctoring-load-more',function(){
		var load_more_id = $(this).attr('id');
		$('#inner_modal_loader').fadeIn();
		if(load_more_id=="js-pro-live-proctoring-flagged-loadmore"){
			request_data = {'assign_id':assign_id,'test_pin_id':test_pin,'candidate_id':candidate_id,'page':$(this).attr('data-page'),'type':'remote','flaged_images':'flagged'};
		}else{
			request_data = {'assign_id':assign_id,'test_pin_id':test_pin,'candidate_id':candidate_id,'page':$(this).attr('data-page'),'type':'remote','flaged_images':'unprocessed'};
		}
		$.ajax({
		    url:baseUrl + '/pro/company/live-proctoring-images-lists',
		    type:'get',
		    data: request_data,
		    success:function(response){
		      	$('#inner_modal_loader').fadeOut();
		      	if (response.status == 200 ) {
		      		if(load_more_id=="js-pro-live-proctoring-flagged-loadmore"){
		      			var page = $('#js-pro-live-proctoring-flagged-loadmore').attr('data-page');
				        $('#js-pro-live-proctoring-flagged-loadmore').remove();
				        $('#js-pro-image-data-flagged').append(response.component)  
				        $('#js-pro-live-proctoring-flagged-loadmore').attr('data-page',parseInt(page)+1)
		      		}else{
			        	var page = $('#js-pro-live-proctoring-loadmore').attr('data-page');
			       		$('#js-pro-live-proctoring-loadmore').remove();
			       		$('#js-pro-image-data').append(response.component)  
			        	$('#js-pro-live-proctoring-loadmore').attr('data-page',parseInt(page)+1)
			        }	
		      	} else {
		        	alert('err')
		      	}     
		    },
		    error:function(err){
		    	$('#inner_modal_loader').fadeOut();
			    console.log(err)
		    },
		})
	})

/* @Version 23 */
	$(document).on('click','.login-close-btn',function(e){
		e.preventDefault();
		$('#proctoring-model').removeClass('md-show');
		$('.modal-backdrop').remove();
	})
	
	/* Terminate proctoring */
	$(document).on('click','.terminate',function(e){
		e.preventDefault();
		var assignId = $(this).attr('rel');
		$('#assign_id').val(assignId);
		$('#comments').val('');
		$('#myModal').modal('show');
	});
	$( "#terminateForm" ).validate({
	  rules: {
	    comments: {
	      required: true,
	      maxlength: 200
	    }
	  }
	});

	$(document).on('click','#submit-comments',function(e){
		e.preventDefault();
		var comments = $('#comments').val();
		var assign_id = $('#assign_id').val();
		if($('#terminateForm').valid()){
			$.ajax({
			    url:$('#terminateForm').attr('action'),
			    type:'post',
			    data:$('#terminateForm').serialize(),
			    beforeSend:function(){
			    	$('#submit-comments').attr('disabled',true);
			    	$('#submit-comments').text('Processing..');
			    },
			    success:function(response){
			      	if (response.status == 200 ) {
			        	$('#terminateForm')[0].reset();
			        	$('#myModal').modal('hide');
			        	swal({
						      title: "Success",
						      text: "Candidate blocked From Assessment",
						      type: "success",
						    });
			        	$('.candidate_'+assign_id).closest('.responsive').remove();
			      	}else{
			      		swal({
						      title: "Warning",
						      text: "Something Went Wrong",
						      type: "warning",
						    });
			      	}     
			      	$('#submit-comments').text('Submit');
			      	$('#submit-comments').attr('disabled',false);
			    },
			    error:function(err){
					$('#submit-comments').text('Submit');
					$('#submit-comments').attr('disabled',false);
					swal({
					      title: "Warning",
					      text: "Something Went Wrong",
					      type: "warning",
					    });
			    }
		  	})
		}
	})


@if(isset($candidateCount) && $candidateCount>0)
	setInterval(function(){
		refreshLists();
	},45000);

	function refreshLists(){
		var assessment_type = "{{ $input['assessment_type'] }}";
		var assessment = "{{ $input['assessment'] }}";
		$('.hme-loading-mask').fadeIn();
		$.ajax({
		    url:baseUrl+'/pro/company/live-proctoring',
		    type:'get',
		    data:{'assessment':assessment,'assessment_type':assessment_type},
		    success:function(response){
		      	$('.hme-loading-mask').fadeOut();
		      	if (response.status == 200 ) {
		      		$('#thumbnail_lists').html('');
		        	$('#thumbnail_lists').html(response.refreshlists);
		        	$("#total_lists_count").html(response.lcount);
		      	}   
		    },
		    error:function(err){
				$('.hme-loading-mask').fadeOut();
		    }
	  	})
	}
@endif
</script>
@endsection