@extends('layouts.main')
@section('title',"Candidates Stream")
@section('content')
<style>
  <style>
    .candidae-details-card{
      background-color: #fff;
      border:1px solid #dddddd;
      border-radius: 10px;
    }
    .candidate-card-head{
      padding: 5px 20px;
      background-color: #E5FFC1;
      border-radius: 10px 10px 0px 0px;
      border-bottom:1px solid #dddddd;
      display: flex;
    justify-content: space-between;
    align-items: center;
    }
    .candidate-testpin{
      color: #0B6624;
      font-size: 16px;
      font-weight: 700;
    }
    .iconset-order{
      gap:5px;
    }

.notification-custom {
  text-decoration: none;
  position: relative;
  display: inline-block;
  border-radius: 2px;
}

.notification-custom .badge-custom {
    position: absolute;
    top: -3px;
    right: -10px;
    padding-left: 4px;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background-color: #f0433a;
    color: white;
    font-size: 10px;
}
.video-customset{
  width: 100%;
  height: 80px;
  border-radius: 5px;
}
.fullscreenTag {
   position: absolute;
   left: 40%;
   top: 40%;

}
.full-screen {
    transition: 150ms;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    height: fit-content;
    width: fit-content;
    background-color: rgba(255, 255, 255, 0.5);
    border-color: transparent;
    border-radius: 50%;
    padding: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    outline: none;
    cursor: pointer;
    opacity: 0;
}
.full-screen:hover {
    background-color: rgba(255, 255, 255, 1);
    transform: scale(1.1);
    opacity: 1;
}
.modalBtns{

    height: 35px;
    align-items: center;
    display: flex;
}
 .modal-header-custom{
  background-color: #dbdbdb;
 }
 .modal-text-area{
  min-height: 80px !important;
  max-height: 80px !important;
 }
 .sweet-alert p {
    margin: 4px 0px !important;
}
.sweet-alert {
    padding: 8px !important;
}
.sweet-alert button{
margin: 5px !important;
}

.candidae-details-card {
    background-color: #fff;
    border: 1px solid #679e02;
    border-radius: 10px;
}
.redFlag{
   border: 2px solid red;
}
.spanmessage{
   font-size: 10px;
   color:red;
   padding-left: 5px;padding-right: 5px;
  }
  </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>
    <script type="text/javascript" src="https://cdn.metered.ca/sdk/video/1.4.5/sdk.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/3.1.18/signalr.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>Test 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 col-md-12">
                  
                @if(isset($stream_assessment))
                    <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($assessmentDetails)){{$assessmentDetails->name}}  - {{date('Y-m-d')}}</span>
                                @endif
                            </div>
                        </div>
                    </div>
               @endif
    <div class="row"> 
        @if(!empty($candidate))
            @foreach($candidate as $testpin=>$videos)   
        

          <div class="col-md-4 col-12 position-relative pb-2 ">
            <div class="candidae-details-card" id="{{'accordion-custom-'.$testpin}}">
              <div class="candidate-card-head">
                <div class="candidate-testpin">{{$testpin}}</div>
                <div class="d-flex align-items-center iconset-order">
                  <img class="terminateBtn" title="Block" data="{{$testpin}}" src="{{ secure_asset('assets/images/blockicon.png') }}"><img  class="messageBtn" title="Message" data="{{$testpin}}" src="{{ secure_asset('assets/images/chaticon.png') }}"><a href="#" class="notification-custom" rel="{{$testpin}}" data-toggle="modal" data-target="#myModalnotification"><span>
                <img src="{{ secure_asset('assets/images/notificationicon.png') }}" title="Proctoring Log"/></span>
                <span class="badge-custom" id="{{$testpin}}.'-notification-icon'" ></span></a>
              </div>
            </div>
            <!--- Head end-->

             <div class="row p-1 m-0 testpinDiv" id="{{$testpin}}">
              <div class="col-md-4 col-12 p-1">
         
                @if(isset($testpin))
                @php 
                 $profileImg = \App\Helper\HireMeeHelper::getTestpinProfileImage($testpin); @endphp
                     <img class="w-100 video-customset videoTag" src="{{$profileImg}}">
                    {{--<video  class="w-100 video-customset videoTag thirdEyeCls" id="ThirdEye" rel="ThirdEye"  controls autoplay muted>
                          @foreach($videos['Third Eye'] as $video)  
                           <source src="{{$video}}" type="video/mp4" class="active">
                            @endforeach
                      </video>--}}
                         <span>Profile Img</span>
                   <button class="full-screen" onclick="goFullscreen('ThirdEye'); return false" title="Enter full screen mode">
                          <svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink">
                            <g fill="none" fill-rule="evenodd" id="Page-1" stroke="none" stroke-width="1">
                              <g fill="#000000" id="Core" transform="translate(-215.000000, -257.000000)">
                                <g id="fullscreen" transform="translate(215.000000, 257.000000)">
                                  <path d="M2,9 L0,9 L0,14 L5,14 L5,12 L2,12 L2,9 L2,9 Z M0,5 L2,5 L2,2 L5,2 L5,0 L0,0 L0,5 L0,5 Z M12,12 L9,12 L9,14 L14,14 L14,9 L12,9 L12,12 L12,12 Z M9,0 L9,2 L12,2 L12,5 L14,5 L14,0 L9,0 L9,0 Z" id="Shape" />
                                </g>
                              </g>
                            </g>
                          </svg>
                        </button>
                   
                      @endif
             
             </div>
             <div class="col-md-4 col-12 p-1">
             
               @if(isset($videos['CandidateVideo']))
                      <video  class="w-100 video-customset videoTag candidateVideoCls" id="CandidateVideo" rel="CandidateVideo" controls autoplay muted>
                        @foreach($videos['CandidateVideo'] as $video)  
                         <source src="{{$video}}" type="video/mp4" class="active">
                          @endforeach
                       </video>
                       <span>Candidate Video</span>
                 <button class="full-screen" onclick="goFullscreen('CandidateVideo'); return false" title="Enter full screen mode">
                          <svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink">
                            <g fill="none" fill-rule="evenodd" id="Page-1" stroke="none" stroke-width="1">
                              <g fill="#000000" id="Core" transform="translate(-215.000000, -257.000000)">
                                <g id="fullscreen" transform="translate(215.000000, 257.000000)">
                                  <path d="M2,9 L0,9 L0,14 L5,14 L5,12 L2,12 L2,9 L2,9 Z M0,5 L2,5 L2,2 L5,2 L5,0 L0,0 L0,5 L0,5 Z M12,12 L9,12 L9,14 L14,14 L14,9 L12,9 L12,12 L12,12 Z M9,0 L9,2 L12,2 L12,5 L14,5 L14,0 L9,0 L9,0 Z" id="Shape" />
                                </g>
                              </g>
                            </g>
                          </svg>
                        </button>
                    @endif
            
            </div>

             <div class="col-md-4 col-12 p-1">
               @if(isset($videos['ScreenVideo']))
             
                    <video class="w-100 video-customset videoTag screenShareCls" id="screenShare" rel="screenShare" controls autoplay muted>
                      @foreach($videos['ScreenVideo'] as $video)  
                       <source src="{{$video}}" type="video/mp4" class="active">
                        @endforeach
                     </video>
                     <span>Screen Share</span>
                <button class="full-screen" onclick="goFullscreen('screenShare'); return false" title="Enter full screen mode">
                      <svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <g fill="none" fill-rule="evenodd" id="Page-1" stroke="none" stroke-width="1">
                          <g fill="#000000" id="Core" transform="translate(-215.000000, -257.000000)">
                            <g id="fullscreen" transform="translate(215.000000, 257.000000)">
                              <path d="M2,9 L0,9 L0,14 L5,14 L5,12 L2,12 L2,9 L2,9 Z M0,5 L2,5 L2,2 L5,2 L5,0 L0,0 L0,5 L0,5 Z M12,12 L9,12 L9,14 L14,14 L14,9 L12,9 L12,12 L12,12 Z M9,0 L9,2 L12,2 L12,5 L14,5 L14,0 L9,0 L9,0 Z" id="Shape" />
                            </g>
                          </g>
                        </g>
                      </svg>
                    </button>
                
                  @endif

            </div>  

             
             <span class="spanmessage" id="candidate-message-'+testpin+'" style="display:none;"></span>
          </div>
        </div>
          </div>
            
        <!--<div class="col-md-6 mt-3 mb-3">
        <div class="setback-video">
        <div class="row testpinDiv" id="{{$testpin}}">
          @if(isset($videos['CandidateVideo']))
          <div class="col-md-4">
            <video  class="w-100 video-customset videoTag candidateVideoCls" id="CandidateVideo" rel="CandidateVideo" controls autoplay muted>
              @foreach($videos['CandidateVideo'] as $video)  
               <source src="{{$video}}" type="video/mp4" class="active">
                @endforeach
             </video>
             <span>Candidate Video</span>
			 <button class="full-screen" onclick="goFullscreen('CandidateVideo'); return false" title="Enter full screen mode">
                <svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink">
                  <g fill="none" fill-rule="evenodd" id="Page-1" stroke="none" stroke-width="1">
                    <g fill="#000000" id="Core" transform="translate(-215.000000, -257.000000)">
                      <g id="fullscreen" transform="translate(215.000000, 257.000000)">
                        <path d="M2,9 L0,9 L0,14 L5,14 L5,12 L2,12 L2,9 L2,9 Z M0,5 L2,5 L2,2 L5,2 L5,0 L0,0 L0,5 L0,5 Z M12,12 L9,12 L9,14 L14,14 L14,9 L12,9 L12,12 L12,12 Z M9,0 L9,2 L12,2 L12,5 L14,5 L14,0 L9,0 L9,0 Z" id="Shape" />
                      </g>
                    </g>
                  </g>
                </svg>
              </button>
          </div>
          @endif

             @if(isset($videos['ScreenVideo']))
          <div class="col-md-4">
            <video class="w-100 video-customset videoTag screenShareCls" id="screenShare" rel="screenShare" controls autoplay muted>
              @foreach($videos['ScreenVideo'] as $video)  
               <source src="{{$video}}" type="video/mp4" class="active">
                @endforeach
             </video>
             <span>Screen Share</span>
			  <button class="full-screen" onclick="goFullscreen('screenShare'); return false" title="Enter full screen mode">
              <svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink">
                <g fill="none" fill-rule="evenodd" id="Page-1" stroke="none" stroke-width="1">
                  <g fill="#000000" id="Core" transform="translate(-215.000000, -257.000000)">
                    <g id="fullscreen" transform="translate(215.000000, 257.000000)">
                      <path d="M2,9 L0,9 L0,14 L5,14 L5,12 L2,12 L2,9 L2,9 Z M0,5 L2,5 L2,2 L5,2 L5,0 L0,0 L0,5 L0,5 Z M12,12 L9,12 L9,14 L14,14 L14,9 L12,9 L12,12 L12,12 Z M9,0 L9,2 L12,2 L12,5 L14,5 L14,0 L9,0 L9,0 Z" id="Shape" />
                    </g>
                  </g>
                </g>
              </svg>
            </button>
          </div>
          @endif

            @if(isset($videos['Third Eye']))
          <div class="col-md-4">
            <video  class="w-100 video-customset videoTag thirdEyeCls" id="ThirdEye" rel="ThirdEye"  controls autoplay muted>
              @foreach($videos['Third Eye'] as $video)  
               <source src="{{$video}}" type="video/mp4" class="active">
                @endforeach
             </video>
             <span>Third Eye</span>
			 <button class="full-screen" onclick="goFullscreen('ThirdEye'); return false" title="Enter full screen mode">
              <svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink">
                <g fill="none" fill-rule="evenodd" id="Page-1" stroke="none" stroke-width="1">
                  <g fill="#000000" id="Core" transform="translate(-215.000000, -257.000000)">
                    <g id="fullscreen" transform="translate(215.000000, 257.000000)">
                      <path d="M2,9 L0,9 L0,14 L5,14 L5,12 L2,12 L2,9 L2,9 Z M0,5 L2,5 L2,2 L5,2 L5,0 L0,0 L0,5 L0,5 Z M12,12 L9,12 L9,14 L14,14 L14,9 L12,9 L12,12 L12,12 Z M9,0 L9,2 L12,2 L12,5 L14,5 L14,0 L9,0 L9,0 Z" id="Shape" />
                    </g>
                  </g>
                </g>
              </svg>
            </button>
          </div>
          @endif

        </div>
       
        <a href="{{secure_url('pro/company/stream-recorded-video-search') }}/{{$testpin}}" target="_blank"><div class="row valuebox ml-0 mr-0 mt-2">
           <div class="col-md-2 label-video">
            Testpin:
           </div>
            <div class="col-md-7">
           {{$testpin}}
           </div>
           @php
           $checkstatus =  \App\Helper\HireMeeHelper::getStatusAssessment($testpin);
           @endphp
            <div class="co1-md-2">
            @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></a>
      </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>

<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>

  <!-- Message comments -->
 <div class="modal fade" id="myModalmessage" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
      <div class="modal-content">
      <form name="messageForm" id="messageForm">
        <!-- Modal Header -->
        <div class="modal-header modal-header-custom">
          <h5 class="">Message <span id="msgTestPin"></span></h5>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
             @csrf
            <div class="form-group">
                <textarea name="candidate_message" id="candidate_message" placeholder="Enter Message" class="form-control modal-text-area" required></textarea>
                <div id="candidate_message-error"></div>
              </div>
              <button type="button" id="message-cancel" class="btn btn-warning pull-right ml-2 modalBtns">Cancel</button>
              <button type="button" id="submit-message-comments" class="btn btn-info pull-right modalBtns">Send</button>
              
        </div>
        </form>
      </div>
    </div>
  </div>
  <!-- Modal -->

<!-- Modal -->
@endsection

@section('footer')
<script type="text/javascript">
   $(document).ready(function(){

/* Sinnal R initiate */
const connection = new signalR.HubConnectionBuilder()
    .withUrl("https://uatproapi.hiremee.co.in/hubs/message")
    .build();
 
 
connection.on("ReceivedMessage", (testpin, message, status, platform) => {
      if(status == 1 && testpin != null && testpin !=''){
         $('#candidate-message-'+testpin).show();
        $('#candidate-message-'+testpin).html(message);
        $('#accordion-custom-'+testpin).addClass('redFlag');
        setTimeout(function(){
            $('#candidate-message-'+testpin).hide("slow");
            $('#candidate-message-'+testpin).html('');
            $('#accordion-custom-'+testpin).removeClass('redFlag');
        },5000);
      }else{
         $('#candidate-message-'+testpin).show();
        $('#accordion-custom-'+testpin).removeClass('redFlag');
        $('#candidate-message-'+testpin).html('');
      }
});
connection.start()
    .then(() => {
        console.log("started")
    })
    .catch(err => {
        console.log("Error connecting to SignalR: ", err);
    });
 
window.addEventListener("beforeunload", () => {
    connection.stop().then(() => {
        console.log("SignalR connection stopped.");
    }).catch(err => {
        console.error("Error stopping SignalR connection: ", err);
    });
});




    loadVideo();
    setInterval(function () {
        updateRecordedVideo();
    },10000);


    /* Notifications */
$('#participants').on('click','.notification-custom',function(e){
    e.preventDefault();
       _testpin = $(this).attr('rel');

     $.ajax({
            url:'{{secure_url("pro/company/proctoring-with-counts")}}',
            cache:false,
            //contentType: "application/json",
            type:'post',
            data:{'testpin':_testpin},
            beforeSend:function(){
                 $('.hme-loading-mask').fadeIn();
              $('#notify-modal-body').html('');
            },
            success:function(res){
               $('.hme-loading-mask').fadeOut();
                if(res.status == 200){
                    var td='';
                    if(res.component !=''){
                        /*$.each(res.reasonList,function(index,val){
                           td=td+'<tr><td>'+val.created_at+'</td><td>'+val.reason+'</td></tr>'
                        })
                        $('#reason-td').html(td);*/
                        $('#notify-modal-body').html(res.component)
                    }
                    
                  $('#view-proctoring-screen').modal('show');
                }
            }
        });
   });

    $('#notify-modal-body').on('click','#js-pro-proctoring-flagged-img', function(e){
                e.preventDefault();
            var testpin =  $(this).data('testpin'); 
            //var assign_id =  278353; //$(this).data('assign_id'); 
            var assign_id =  $(this).data('assign_id'); 
            $('.hme-loading-mask').fadeIn();
           // AJAX request
           $.ajax({
            url: '/pro/get-flagged-img-details',
            type: 'get',
            data: {test_pin: testpin,assign_id: assign_id},
            beforeSend:function(){
              $('#pro-preview-page').html('');
            },
            success: function(response){ 
              $('.hme-loading-mask').fadeOut();
             $('#pro-preview-page').html(response.component);
                   $('#pro-preview-flagged-image-large-Modal').modal('show');

            }
          });
     });

      $(document).on('click','#js-honesty_level-modal-close',function(){
        $('#view-proctoring-screen').removeClass('md-show');
        //$('#view-proctoring-screen').modal('hide');
        $('.modal-backdrop').remove();
         
      });
      $(document).on('click','.login-close-btn',function(e){
        e.preventDefault();
        $('#pro-preview-flagged-image-large-Modal').removeClass('md-show');
        //$('.modal-backdrop').remove();
      })

  });

  function loadVideo(){
      //document.getElementsByClassName('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;
        
        // 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 nextsource = targetElement.querySelector(".videoTag source.active + source") || targetElement.querySelector(".videoTag source:first-child");
        var activesource = targetElement.querySelector(".videoTag source.active");

        // 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');
    })

    /* Message */

    // Message   Candidate ajax call  //
    $(document).on('click','.messageBtn',function(e){
        e.preventDefault();
        testPin = $(this).attr('data');
        $('#msgTestPin').text('( '+testPin+' )');
        $('#submit-message-comments').attr('rel',testPin);
        console.log(testPin);
        $('#submit-message-comments').removeClass('btn-danger');
        
        $('#myModalmessage').modal('show');
    });

     $(document).on('click','#submit-message-comments',function(e){
        e.preventDefault();
        var comments = $('#candidate_message').val();
        var _this = $(this);
        testPin = _this.attr('rel');
        comments = comments.replace(/[0-9`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi,'');
        if(testPin !=''){
            if(comments != ''){
                if(comments.length > 600){
                    $('#candidate_message-error').addClass('text-danger').text('Message should be less the 600 characters');
                    return false
                }
                if(comments.length < 3){
                    $('#candidate_message-error').addClass('text-danger').text('Message should be greater than 3 characters');
                    return false
                }
                $('#candidate_message-error').text('');
                    $.ajax({
                        url:baseUrl+'/pro/company/message-candidate',
                        data:{'testpin':testPin,'message':comments},
                        type:'post',
                        dataType:'json',
                        beforeSend:function(){
                            _this.attr('disabled',true).text('Processing..!');
                        },
                        success:function(responce){
                            $("#messageForm")[0].reset();
                            var res = responce;
                            if((responce != undefined)&&(responce.status ==200)){
                                 // $("#home"+testPin+"").hide();
                                 sendMessage(comments,testPin);
                                    swal({
                                          title: "Success",
                                          text: "Sent Successfully",
                                          type: "success",
                                        });
        _this.attr('disabled',false).text('Send');
        $('#myModalmessage').modal('hide');
                               // $('.candidate_'+assign_id).closest('.responsive').remove();
                            }else{
                                swal({
                                      title: "Warning",
                                      text: "Something Went Wrong",
                                      type: "warning",
                                    });
                            }     
                             _this.attr('disabled',false).text('Send');
                            
                            testPin = '';
                        }
                    });
            }else{
                
                $('#candidate_message-error').addClass('text-danger').html('<span>Please enter message</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','#message-cancel',function(e){
        e.preventDefault();
        testPin = '';
        $('#candidate_message-error').text('');
        $('#candidate_message').val('');
        $('#submit-message-comments').attr('disabled',false).text('Send');
        $('#myModalmessage').modal('hide');
    })

      function sendMessage(message,user,status='')
          {
     /* const user = document.getElementById("userInput").value;
      const message = document.getElementById("messageInput").value;*/
   
      fetch("https://uatproapi.hiremee.co.in/api/notification", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ testpin: user, msgContent: message,status:status,platform:'Assessment' }),
      });
      //console.log('notification called');
  }


    /* Message scripts end */


   function updateRecordedVideo(){
      var testpins = {};
      
      if(parseInt($('video').length) > 0){
        $('.testpinDiv').each(function(){
          _testpinDiv = $(this);
          _id = _testpinDiv.attr('id');
          testpins[_id] = {};
        
          var videoTag = $('#'+_id+' video');
          var videoType = {};
      
          videoTag.each(function(ele){
              _this = $(this);
             _class  =  _this.attr('rel');
             totVideo = _this.find('source').length;
             videoType[_class] = totVideo
             testpins[_id][_class] = totVideo
          })
          })
       
        $.ajax({
          url:'{{secure_url("pro/company/get-testpin-recorded-video")}}',
          cache:false,
          //contentType: "application/json",
          type:'post',
          data:{'req':testpins},
          success:function(res){
            if(res.status == 200){
              data = res.content;
              
                $.each(data,function(tstpin,videos){
                  if((videos['ThirdEye'] != undefined) && (videos['ThirdEye'].length >0)){
                    
                    $.each(videos['ThirdEye'],function(index,video){
                      console.log(video)
                      data =$('#'+tstpin+' .thirdEyeCls').prepend('<source src="'+video+'" type="video/mp4" class="active">');
                      //console.log(data);
                    })

                  }
                  if((videos['screenShare'] != undefined) && (videos['screenShare'].length >0)){
                    
                    $.each(videos['screenShare'],function(index,video){
                      console.log(video)
                      data =$('#'+tstpin+' .screenShareCls').prepend('<source src="'+video+'" type="video/mp4" class="active">');
                      //console.log(data);
                    })

                  }

                  if((videos['CandidateVideo'] != undefined) && (videos['CandidateVideo'].length >0)){
                    
                    $.each(videos['CandidateVideo'],function(index,video){
                      data =$('#'+tstpin+' .candidateVideoCls').prepend('<source src="'+video+'" type="video/mp4" class="active">');
                      //console.log(data);
                        })
                      }
                    })
                }
              }
            })
          }
       }
	   
	   $(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');
    });

function goFullscreen(id) {
  var element = document.getElementById(id);       
  if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullScreen) {
    element.webkitRequestFullScreen();
  }  
}

$(document).on('click','#fullscreen-btn',function(e){
     e.preventDefault();
     console.log(document.fullscreenElement);
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }


});


    </script>
@endsection