@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;
}
.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>Assessments Available for review</h4>
					</div>
					<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="{{secure_url('recruiter/dashboard') }}"> <span class="hiremee-home"></span> </a>
							@endif
							</li>
							<li class="breadcrumb-item"><a href="{{ secure_url('pro/company/test-result') }}">Search for Test Result</a></li>
						</ul>
					</div>
				</div>
				<div id="pro-preview-page1"></div>
				@if(!empty($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')}}  ({{$candidateCount}})@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">
							@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="">
											<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>
											<p>Total Flagged Images: {{$candidate->totFlagedImg}}</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> 	 	
<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>
			</div>
		</div>
	</form>
</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");

			});

			/* Proctoring Image Details */
				$(document).on('click','.proctoring',function(e){
					e.preventDefault();
				  //$('#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');
				    $.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 ) {
						      $('#js-pro-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();
		        $('#js-pro-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','.login-close-btn',function(e){
			e.preventDefault();
			$('#proctoring-model').removeClass('md-show');
			$('.modal-backdrop').remove();
		})
	});
	</script>
@endsection