@extends('layouts.main')
@section('title',"Candidates Stream")
@section('content')
<style>
  
    .nav-tabs .nav-item .nav-link.active
    {
      background-color: #659E03;
      color:#fff !important;

    }

    .nav-tabs > li > a:hover{
      background-color: #D6E6F3 !important;
        border-radius: 5px;
        color:#000;
     }

   /*.hall-video-class, .participant{
    max-height:200px;
    oveflow:hidden;
    }
    .hall-video-class video, .participant video{
    min-height:200px;
    max-height:200px;
    height:100%;
    object-fit:cover;
    oveflow:hidden;
    }

    @media(max-width:992px){
    .hall-video-class, .participant{
    max-height:200px;
    oveflow:hidden;
    }
    .hall-video-class video, .participant video{
        min-height:200px;
        max-height: 200px !important;
        object-fit: cover;
        oveflow:hidden;
    }
    }
*/
.nav-tabs .nav-link {
    border-top: 0px !important;
    padding: 10px !important;
    border-radius: 24px;
    background: #efefef;
    color: #131313 !important;
}
.nav-tabs{
    border-bottom: 1px solid #d5d5d5 !important;
    padding:8px;
}
.nav-tabs .nav-item{
border-bottom:0px !important;
}
.nav-tabs .nav-item .nav-link.active {
    background-color: #add673 !important;
    color: #ffffff !important;
    padding: 10px !important;
    border-radius: 24px;
}
.nav-tabs .nav-link:hover {
    border-radius: 24px !important;
}

.mb-70 {
    margin-bottom: 155px;
}

.setback-video{
       background: #fff;
    border: 1px solid #8BC34A;
    padding: 20px;
    border-radius: 10px;
    border:1px solid #4CAF50;
    }
    .video-customset{
      height: 160px;
      border-radius: 10px;
    }
   .label-video{
     font-size: 16px;
    font-weight: 600;
    color: #558B2F;
   }
   .valuebox{
      background: #f0fbe4;
    padding: 10px;
    border-radius: 10px;
        border: 1px dashed #8BC34A;
   }


</style>
            <!-- Google Fonts -->
            <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">

            <!-- CSS Reset -->
            <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"> -->
        
            <!-- Milligram CSS -->
           <!--  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"> -->
        
            <script type="text/javascript" src="https://cdn.metered.ca/sdk/video/1.4.5/sdk.min.js"></script>
    
 <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>Candidate Recorded Videos</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="javascript:void(0)"> <span class="hiremee-home"></span> </a>
                            @endif
                            </li>
                            <li class="breadcrumb-item"><a href="#">Test Recorded Videos</a></li>
                        </ul>
                    </div>
                </div>
                 <div id="pro-preview-page1"></div>
                 <div class="page-body">
                  
              
                  <div></div>
              
                  
               
     <div class="row mx-0"> 
        @if(!empty($candidate))
            @foreach($candidate as $testpin=>$videos)   
        <div class="col-md-12 mt-3 mb-3">
        <div class="setback-video">
          
             
        <div class="row" id="{{$testpin}}">
          @if(isset($videos['CandidateVideo']))
          <div class="col-md-4">
            <video  class="w-100 video-customset videoTag CandidateVideo" controls autoplay muted>
              @foreach($videos['CandidateVideo'] as $video)  
               <source src="{{$video}}" type="video/mp4">
                @endforeach
             </video>
             <span>Candidate Video</span>
          </div>
          @endif

             @if(isset($videos['ScreenVideo']))
          <div class="col-md-4">
            <video class="w-100 video-customset videoTag screenShare" controls autoplay muted>
              @foreach($videos['ScreenVideo'] as $video)  
               <source src="{{$video}}" type="video/mp4">
                @endforeach
             </video>
             <span>Screen Share</span>
          </div>
          @endif

            @if(isset($videos['Third Eye']))
          <div class="col-md-4">
            <video  class="w-100 video-customset videoTag ThirdEye" controls autoplay muted>
              @foreach($videos['Third Eye'] as $video)  
              @php \Log::info($video); @endphp
               <source src="{{$video}}" type="video/mp4">
                @endforeach
             </video>
             <span>Third Eye</span>
          </div>
          @endif

        </div>
     
        <div class="row valuebox ml-0 mr-0 mt-2">
           <div class="col-md-1 label-video">
            Testpin:
           </div>
            <div class="col-md-9">
           {{$testpin}}
           </div>
               @php
           $checkstatus =  \App\Helper\HireMeeHelper::getStatusAssessment($testpin);
           @endphp
            <div class="co1-md-1">
            @if($checkstatus->status == 10)
            <button class="btn btn-primary but_thumb revoke" data="{{$testpin}}">{{  'Revoke' }}</button>
            @else
            <button class="btn btn-danger btn-md terminateBtn pull-right" data="{{$testpin}}">Terminate</button>
            @endif
          </div>
        </div>
      </div>
        </div>
        
        @endforeach
        @else
        <div class="col-md-6 mt-3 mb-3">
            <div class="setback-video">
                <p>No video found</p>
            </div>
        </div>

        @endif
  </div>
            </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>   

 <!-- 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>
<!-- Terminate comments -->
  <div class="modal fade" id="myModal">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
      <form name="terminateForm" id="terminateForm">
        <!-- Modal Header -->
        <div class="modal-header">
          <h5 class="">Reason For Terminate</h5>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
             @csrf
            <div class="form-group">
                <label for="email">Please Enter Comments <span class="text-danger">*</span>:</label>
                <textarea name="comments" id="comments" class="form-control" required></textarea>
                <div id="comment-error"></div>
              </div>
              <button type="button" id="cancel" class="btn btn-warning pull-right ml-2">Cancel</button>
              <button type="button" id="submit-comments" class="btn btn-info pull-right">Terminate</button>
              
        </div>
        </form>
      </div>
    </div>
  </div>
  <!-- Modal -->
     <!-- The Modal -->
  <div class="modal fade" id="myModalrevoke">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
      <form name="revokeForm" id="revokeForm" action="{{route('proctorings-terminate')}}">
        <!-- Modal Header -->
        <div class="modal-header">
          <h5 class="">Reason To Revoke</h5>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
         <div class="modal-body">
             @csrf
            <div class="form-group">
                <input type="hidden" name="assign_id" id="assign_id">
                <label for="email">Please Enter Comments <span class="text-danger">*</span>:</label>
                <textarea name="comments" id="comments-revoke" class="form-control" required></textarea>
                <div id="comment-revoke-error"></div>
              </div>
              <button type="button" id="cancel-revoke" class="btn btn-warning pull-right ml-2">Cancel</button>
              <button type="button" id="submit-comments-revoke" class="btn btn-info pull-right">Revoke</button>
              
        </div>
        </form>
      </div>
    </div>
  </div>


@endsection

@section('footer')
<script type="text/javascript">
   $(document).ready(function(){
      //document.getElementsByTagName('video').play();
    var myvid = document.getElementsByClassName('videoTag');
      for (var i = 0 ; i < myvid.length; i++) {
      myvid[i].addEventListener('ended', function(event) {
         _this = $(this);
           var targetElement = event.target || event.srcElement;
         console.log(targetElement);
        // get the active source and the next video source.
        // I set it so if there's no next, it loops to the first one
        var activesource = targetElement.querySelector(".videoTag source.active");

        var nextsource = targetElement.querySelector(".videoTag source.active + source") || targetElement.querySelector(".videoTag source:first-child");
        
        // deactivate current source, and activate next one
        //activesource.className = "";
        nextsource.className = "active";
        
        // update the video source and play
        targetElement.src = nextsource.src;
        targetElement.play();
      });
    }
});
    $(document).on('click','.terminateBtn',function(e){
        e.preventDefault();
        btnInstant = $(this);
        $('#submit-comments').removeClass('btn-danger');
        testPin = $(this).attr('data');
        $('#myModal').modal('show');
    });
   
    $(document).on('click','#submit-comments',function(e){
        e.preventDefault();
        
        var _this = $(this);
        var comments = $('#comments').val();
        if(testPin !=''){
            if(comments != ''){
                if(comments.length > 250){
                    $('#comment-error').addClass('text-danger').text('Comments should be less the 250 characters');
                    return false
                }
                $('#comment-error').text('');
                    $.ajax({
                        url:"{{secure_url('pro/company/terminate-candidate') }}",
                        data:{'testpin':testPin,'comments':comments},
                        type:'post',
                        dataType:'json',
                        beforeSend:function(){
                            _this.attr('disabled',true).text('Processing..!');
                        },
                        success:function(responce){
                            var res = responce;
                            if((responce != undefined)&&(responce.status ==200)){
                                _this.removeClass('btn-info').attr('disabled',true).addClass('btn-danger').text('Terminated');
                                btnInstant.removeClass('btn-info').attr('disabled',true).addClass('btn-danger').text('Terminated');
                                $('#cancel').trigger('click');
								swal({
                                    html: true, 
                                    title: '<span class="sweet-sucess-text">Terminated Sucessfully</span>', 
                                    type: "success",
                                    showCancelButton: false,
                                    confirmButtonText: "Ok",
                                    closeOnConfirm: false,
                                    confirmButtonColor: '#28e1bd',
                                });
                            }else{
                                swal({
                                    html: true, 
                                    title: '<span class="sweet-danger-text">Something went wrong</span>', 
                                    type: "warning",
                                    showCancelButton: false,
                                    confirmButtonText: "Ok",
                                    closeOnConfirm: false,
                                    confirmButtonColor: '#28e1bd',
                                });
                            }
                            testPin = '';
                        }
                    });
            }else{
                
                $('#comment-error').addClass('text-danger').html('<span>Please enter comments</span>');
            }
        }else{
            swal({
                html: true, 
                title: '<span class="sweet-danger-text">Testpin is empty</span>', 
                type: "warning",
                showCancelButton: false,
                confirmButtonText: "Ok",
                closeOnConfirm: false,
                confirmButtonColor: '#28e1bd',
            });
           
        }
    })    
    $(document).on('click','#cancel',function(e){
        e.preventDefault();
        testPin = '';
        $('#comment-error').text('');
        $('#comments').val('');
        $('#submit-comments').attr('disabled',false).text('Terminate');
        $('#myModal').modal('hide');
    })
	
	 $(document).on('click','.revoke',function(e){
        e.preventDefault();
        btnInstant = $(this);
        $('#submit-comments-revoke').removeClass('btn-danger');
        testPin = $(this).attr('data');
        $('#myModalrevoke').modal('show');
    });
   
    $(document).on('click','#submit-comments-revoke',function(e){
        e.preventDefault();
        
        var _this = $(this);
       testPin = $('.revoke').attr('data');
       var comments = $('#comments-revoke').val();
        if(testPin !=''){
            if(comments != ''){
                if(comments.length > 250){
                    $('#comment-revoke-error').addClass('text-danger').text('Comments should be less the 250 characters');
                    return false
                }
                $('#comment-revoke-error').text('');
                    $.ajax({
                        url:"{{secure_url('pro/company/proctorings/terminate') }}",
                        data:{'testpin':testPin,'revoke':1,'comments':comments},
                        type:'post',
                        dataType:'json',
                        beforeSend:function(){
                            _this.attr('disabled',true).text('Processing..!');
                        },
                        success:function(response){
                           var res = response;
                           if((response != undefined)&&(response.status ==200)){
                                _this.removeClass('btn-info').attr('disabled',true).addClass('btn-danger').text('Revoked');
                                btnInstant.removeClass('btn-info').attr('disabled',true).addClass('btn-danger').text('Revoked');
                                $('#cancel-revoke').trigger('click');
                                swal({
                                    html: true, 
                                    title: '<span class="sweet-sucess-text">Candidate Revoked Sucessfully</span>', 
                                    type: "success",
                                    showCancelButton: false,
                                    confirmButtonText: "Ok",
                                    closeOnConfirm: false,
                                    confirmButtonColor: '#28e1bd',
                                });

                            }else{
                                swal({
                                    html: true, 
                                    title: '<span class="sweet-danger-text">Something went wrong</span>', 
                                    type: "warning",
                                    showCancelButton: false,
                                    confirmButtonText: "Ok",
                                    closeOnConfirm: false,
                                    confirmButtonColor: '#28e1bd',
                                });
                            }
                            testPin = '';
                        }
                    });
            }else{
                
                $('#comment-revoke-error').addClass('text-danger').html('<span>Please enter comments</span>');
            }
        }else{
            swal({
                html: true, 
                title: '<span class="sweet-danger-text">Testpin is empty</span>', 
                type: "warning",
                showCancelButton: false,
                confirmButtonText: "Ok",
                closeOnConfirm: false,
                confirmButtonColor: '#28e1bd',
            });
           
        }
    })    
    $(document).on('click','#cancel-revoke',function(e){
        e.preventDefault();
        testPin = '';
        $('#comment-revoke-error').text('');
        $('#comments-revoke').val('');
        $('#submit-comments-revoke').attr('disabled',false).text('Revoke');
        $('#myModalrevoke').modal('hide');
    });

    </script>
@endsection