@extends('layouts.main')
@section('title',"Candidates Stream")
@section('content')
<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: 6px;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background-color: #DFCB31;
    color: white;
    font-size: 12px;
}
.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: 16px;
    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;
}
  </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="hme-loading-mask">
        <div class="hme-loading-container">
            <div class="hme-dual-ring"></div>
            <div>Please wait, Loading...</div>
        </div>
    </div>

  
<div class="container-fluid">
  <div class="row">
    <div class="col-md-6">
        <div class="total-accodion" id="participants" data='{{$stream_assessment}}'>
          <!--lOAD SCRIPT-->
        </div>
    </div>
  </div>
</div>


  <!-- Modal -->
<div class="">
    <div class="modal fade" id="view-proctoring-screen">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="hme-loading-mask" style="height: 100%;">
      <div class="hme-loading-container">
          <div class="hme-dual-ring"></div>
          <div>Please wait, Loading...</div>
      </div>
    </div>
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-dark" id="exampleModalLongTitle">Proctoring Log</h5>
                    <button type="button" class="close" id="js-honesty_level-modal-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 modal-height" id="notify-modal-body">
                <!-- <table class="table table-striped" id="reason-td">
                    <tr><td>No data found</td></tr>
                </table> -->
                </div>
            </div>
        </div>
    </div>
</div>
    <!---Flagged images modal window-->
<div id="pro-preview-page"></div>


<!-- Terminate comments -->
 {{-- <div class="modal fade" id="myModalterminate">
    <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>--}}
  <!-- Message comments -->
  {{--<div class="modal fade" id="myModalmessage">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
      <form name="messageForm" id="messageForm">
        <!-- Modal Header -->
        <div class="modal-header">
          <h5 class="">Message</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="candidate_message" id="candidate_message" class="form-control" required></textarea>
                <div id="candidate_message-error"></div>
              </div>
              <button type="button" id="message-cancel" class="btn btn-warning pull-right ml-2">Cancel</button>
              <button type="button" id="submit-message-comments" class="btn btn-info pull-right">Send</button>
              
        </div>
        </form>
      </div>
    </div>
  </div> --}}
  <!-- Modal -->
@endsection

@section('footer')
<script>

// Load Videos
$(document).ready(function(){

var stream_assessment = $('#participants').attr('data');
    //var stream_url = "hiremee-livetest.metered.live/assessment-35605";
    /* var stream_url = "thirdeyehiremee.metered.live/thirdeye";
    var roomName = "thirdeye";*/
    var stream_url = "testingpurpose.metered.live/assessment-70621";
    var roomName = "assessment-70621";

    console.log(stream_url);
    var testPin = '';
    var btnInstant = '';
    //https://www.metered.ca/docs/rest-api/create-room-api
    $.ajax({
        url:'https://testingpurpose.metered.live/api/v1/token?secretKey=2myhoyaK9hiU1MT4tow5KOZppqy-LhXwh9RSaODlE4FzcZlv',
        data:{'name':'Admin','roomName':roomName,'isAdmin':true},
        type:'post',
        dataType:'json',
        success:function(responce){
            var res = responce;
            //console.log(responce.token);
            if((responce != undefined)&&(responce.token !='')){
                StreamVideo(responce.token,stream_url);
                //StreamHallVideo(responce.token,stream_url);
            }else{
                alert('Stream token not generated');
            }
        }
    });

    function StreamVideo(accessToken,stream_url){
        $('.hme-loading-mask').fadeIn();
        var participants = {};
        var hallparticipants = {};
        const meeting = new Metered.Meeting();
       
       /* Candidate & Hall Video Stream */
        async function joinMeeting() {
            const response = await meeting.join({
                roomURL: stream_url,
                accessToken:accessToken,
                name:'Admin',
            });            
        }
       
        joinMeeting();
        updateScreenShareVideo();

         function loadTestpinBlock(participant)
        {
          //<img src="{{ secure_asset("assets/images/resumeicon.png") }}">
            if(!participant.isAdmin)
            {
                var testpin = participant.name.replace('ExamCenter','');
             var htmlTag  = '<div class="candidae-details-card"><div class="candidate-card-head"><div class="candidate-testpin">'+testpin+'</div>';
             htmlTag += '<div class="d-flex align-items-center iconset-order"><img src="{{ secure_asset("assets/images/blockicon.png") }}"><img src="{{ secure_asset("assets/images/chaticon.png") }}"><a href="#" rel="'+testpin+'" class="notification-custom" data-toggle="modal" data-target="#myModal"><span><img src="{{ secure_asset("assets/images/notificationicon.png") }}"/></span><span class="badge-custom" id="accordion-custom-'+testpin+'"></span></a></div></div>';
             htmlTag += '<div class="row p-1 m-0 testpinDiv" id="'+testpin+'">';
             htmlTag += '<div class="col-md-4 col-12 p-1"><video class="video-customset screenShareCls videoTag" controls="true" autoplay="true" id="record-'+testpin+'" muted></video>'+fullscreenHtmlBlock('videoTagFullscreen',`record-${testpin}`)+'</div>';
             htmlTag += '<div class="col-md-4 col-12 p-1"><video class="video-customset participantVideoClass"  controls="true" autoplay="true" muted></video>'+fullscreenHtmlBlock('participantVideoClassFullscreen')+'</div>';
             htmlTag += '<div class="col-md-4 col-12 p-1"><video  class="video-customset candidateVideoCls hallclass" controls="true" autoplay="true" muted></video>'+fullscreenHtmlBlock('hallclassVideoFullscreen')+'</div>';
             htmlTag += '</div></div>';
                let participants_div = document.querySelector('#participants');
                
                if($("#participants").find('#'+testpin).length==0)
                {
                    participants_div.insertAdjacentHTML('beforeend',htmlTag);
                    console.log(participants_div);
                }
                //getLocationData(testpin);
                addParticipant(participant);
               
            }
           
        }
        function fullscreenHtmlBlock(videoblockClass,dataId='')
        {
            return '<button class="full-screen '+videoblockClass+'" data-id="'+dataId+'" 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>';
        }
        function addParticipant(participant)
        {
            if(participant.name.includes("ExamCenter"))
            {
                console.log("Exam Center");
                var participant_name = participant.name.replace('ExamCenter','');
                hallparticipants[participant._id] = new MediaStream();
                $("#participants").find('#'+participant_name).find('.hallclass').attr('id','hall-'+participant._id);
                $("#participants").find('#'+participant_name).find('.hallclassVideoFullscreen').attr('data-id','hall-'+participant._id);
                
                console.log("Hall Medias");
               
            }
            else{
                console.log("Participant");
                var participant_name = participant.name.replace('ExamCenter','');
                participants[participant._id] = new MediaStream();
                $("#participants").find('#'+participant_name).find('.participantVideoClass').attr('id','participant-'+participant._id);
                 $("#participants").find('#'+participant_name).find('.participantVideoClassFullscreen').attr('data-id','participant-'+participant._id);
                console.log("Participant Medias");
              
            }
        }
        meeting.on("onlineParticipants", function(participants) {
            console.log('onlineParticipants:',participants);
            $('.hme-loading-mask').fadeOut();
            if(participants.length == 0){
                $('#participants').append('<div class="col-md-12 text-center"><h6>Please wait untill participants are join..!</h6></div>')
            }
            participants.forEach(loadTestpinBlock);
        });
        meeting.on("participantLeft", function(participant) {
            console.log('participantLeft:',participant);
            if(participant.name.includes("ExamCenter"))
            {
                let video = document.getElementById('hall-'+participant._id);
                if(video && hallparticipants[participant._id]!=undefined)
                {
                    video.parentElement.remove();
                    delete hallparticipants[participant._id];
                }
            }
            else{
                let video = document.getElementById('participant-'+participant._id);
                if(video && participants[participant._id]!=undefined)
                {
                    video.parentElement.remove();
                    delete participants[participant._id];
                }
            }
        });
        // meeting.on("participantJoined", function(remoteTrack) {
        //     console.log('participantJoined:',remoteTrack);
        // });
        meeting.on("remoteTrackStarted", function(remoteTrack) {
            console.log('remoteTrackStarted: ',remoteTrack);
            loadVideoStream(remoteTrack);
            
            //Appending Screen share video
            /*var mediaStream = new MediaStream();
            mediaStream.addTrack(remoteTrack.track);
            var videoTag = document.createElement("video");
            videoTag.autoplay = true;
            videoTag.srcObject = mediaStream;
            videoTag.id = remoteTrack.streamId;
            videoTag.style.maxWidth = "1920px";
            if (remoteTrack.type === "video") {
                
                videoTag.muted = true;
            } else {
                videoTag.controls = true;
            }
            document.getElementById("screen-share-div-"+remoteTrack.participant._id).appendChild(videoTag);*/

        });

        function loadVideoStream(remoteTrack)
        {
            var participant_name = remoteTrack.participant.name;
            console.log("Load VIDEO: "+participant_name);
            if(participant_name.includes("ExamCenter"))
            {
                var testpin = participant_name.replace('ExamCenter','');
                console.log("EXAM CENTER: "+testpin);
                let hallvideo = document.getElementById('hall-'+remoteTrack.participant._id);
                if(hallvideo)
                {   
                    // Checking if the remoteTrack is video
                    // If it is video then removing the old video tracks from the media stream
                    // and adding the new video track
                    if (remoteTrack.type === "video") {
                        hallparticipants[remoteTrack.participant._id].getVideoTracks().forEach((track) => {
                            hallparticipants[remoteTrack.participant._id].removeTrack(track);
                        });
                        hallparticipants[remoteTrack.participant._id].addTrack(remoteTrack.track);
                        hallvideo.srcObject = hallparticipants[remoteTrack.participant._id];
                    }
                    // Checking if the remoteTrack is audio
                    // If it is audio then removing the old audio tracks from the media stream
                    // and adding the new audio track
                    if (remoteTrack.type === "audio") {
                        hallparticipants[remoteTrack.participant._id].getAudioTracks().forEach((track) => {
                            hallparticipants[remoteTrack.participant._id].removeTrack(track);
                        });
                        hallparticipants[remoteTrack.participant._id].addTrack(remoteTrack.track);
                        hallvideo.srcObject = hallparticipants[remoteTrack.participant._id];
                    }
                }
            }
            else{
                console.log("NON EXAM CENTER: "+participant_name);
                var video = document.getElementById('participant-'+remoteTrack.participant._id);
                if(video)
                {
                    // Checking if the remoteTrack is video
                    // If it is video then removing the old video tracks from the media stream
                    // and adding the new video track
                    if (remoteTrack.type === "video") {
                        participants[remoteTrack.participant._id].getVideoTracks().forEach((track) => {
                            participants[remoteTrack.participant._id].removeTrack(track);
                        });
                        participants[remoteTrack.participant._id].addTrack(remoteTrack.track);
                        video.srcObject = participants[remoteTrack.participant._id];
                    }
                    // Checking if the remoteTrack is audio
                    // If it is audio then removing the old audio tracks from the media stream
                    // and adding the new audio track
                    if (remoteTrack.type === "audio") {
                        participants[remoteTrack.participant._id].getAudioTracks().forEach((track) => {
                            participants[remoteTrack.participant._id].removeTrack(track);
                        });
                        participants[remoteTrack.participant._id].addTrack(remoteTrack.track);
                        video.srcObject = participants[remoteTrack.participant._id];
                    } 
                }
            }
        }

        
    }
    function getLocationData(testpin){
        
         $.ajax({
            url:baseUrl+'/pro/company/get-testpin-location',
            data:{'testpin':testpin},
            type:'post',
            dataType:'json',
            beforeSend:function(){
                 $('#loc-'+testpin).html('<span>Please wait..</span>');
            },
            success:function(responce){
                if((responce != undefined)&&(responce.status ==200)){
                    var location = responce.location!=null ? responce.location : `Lat: ${responce.latitude}, Long: ${responce.longitude}`; 
                    $('#loc-'+testpin).html('<span>'+location+'</span>');
                    $('#time-'+testpin).html('<span>'+responce.created_at+'</span>');
                }else{
                    $('#loc-'+testpin).html('<span>Location not detected</span>');
                }
            }
        });
    }


    function StreamHallVideo(accessToken,stream_url){
    
        var hallVideos = {};
        const hallMeeting = new Metered.Meeting();
       
        async function joinHallMeeting() {
            const response = await hallMeeting.join({
                roomURL: stream_url,
                accessToken:accessToken,
                name:'Admin',
            });            
        }
        joinHallMeeting();

        function addHallVideo(videoObj)
        {
           if(videoObj.isAdmin == false && hallVideos[videoObj._id]==undefined)
            {
                hallVideos[videoObj._id] = new MediaStream();
                let video = document.createElement('video');
                video.id = 'hall-'+videoObj._id;
                video.controls = true;
                video.autoplay = true;
                video.muted = true;
                video.width = 300;
                video.classList.add("w-100");
                let box = document.createElement('div');
                box.classList.add("col-md-4");
                box.classList.add("hall-video-class");
                box.classList.add("pt-2");
                let name = document.createElement('span');
                name.classList.add('f-15')
                name.innerText = 'Hall Name :'+videoObj.name;
                box.append(video,name);
                let participants_div = document.getElementById('hall-video-element');
                //participants_div.innerHTML = "";
                participants_div.appendChild(box);
            }
        }
         hallMeeting.on("onlineParticipants", function(participants) {
            console.log('Hall Video:',participants);
            $('.hme-loading-mask').fadeOut();
            if(participants.length == 0){
                $('#hall-video-element').append('<div class="col-md-12 text-center"><h6>Please wait..!</h6></div>')
            }
            participants.forEach(addHallVideo);
            
        });

           hallMeeting.on("participantLeft", function(participant) {
            console.log('participantLeft:',participant);
            let video = document.getElementById('hall-'+participant._id);
            if(video && hallVideos[participant._id]!=undefined)
            {
                video.parentElement.remove();
                delete hallVideos[participant._id];
            }
        });
        hallMeeting.on("remoteTrackStarted", function(remoteTrack) {
            console.log('remoteTrackStarted:',remoteTrack);
            // Checking if the remoteTrack is video
            // If it is video then removing the old video tracks from the media stream
            // and adding the new video track

            let video = document.getElementById('hall-'+remoteTrack.participant._id);
            if(video)
            {
                if (remoteTrack.type === "video") {
                    hallVideos[remoteTrack.participant._id].getVideoTracks().forEach((track) => {
                        hallVideos[remoteTrack.participant._id].removeTrack(track);
                    });
                    hallVideos[remoteTrack.participant._id].addTrack(remoteTrack.track);
                    video.srcObject = hallVideos[remoteTrack.participant._id];
                }
                // Checking if the remoteTrack is audio
                // If it is audio then removing the old audio tracks from the media stream
                // and adding the new audio track
                if (remoteTrack.type === "audio") {
                    hallVideos[remoteTrack.participant._id].getAudioTracks().forEach((track) => {
                        hallVideos[remoteTrack.participant._id].removeTrack(track);
                    });
                    hallVideos[remoteTrack.participant._id].addTrack(remoteTrack.track);
                    video.srcObject = hallVideos[remoteTrack.participant._id];
                } 
            }
        });
    }

 
    /* Terminate scripts start */
    $(document).on('click','#submit-comments',function(e){
        e.preventDefault();
        testPin = $(this).attr('data');
        var comments = $(this).closest($("#terminateForm_"+testPin+"")).find("textarea[id='comments_"+testPin+"']").val(); 
        var _this = $(this);
          if(testPin !=''){
            if(comments != ''){
                if(comments.length > 250){
                   $('#comments_'+testPin+'-error').addClass('text-danger').text('Comments should be less the 250 characters');
                    return false
                }
                if(comments.length < 3){
                    $('#comments_'+testPin+'-error').addClass('text-danger').text('Comments should be greater than 3 characters');
                    return false
                }
                $('#comments_'+testPin+'-error').text('');
                    $.ajax({
                        url:baseUrl+'/pro/company/terminate-candidate',
                        data:{'testpin':testPin,'comments':comments},
                        type:'post',
                        dataType:'json',
                        beforeSend:function(){
                            _this.attr('disabled',true).text('Processing..!');
                        },
                        success:function(responce){
                            $("#terminateForm_"+testPin+"")[0].reset();
                            var res = responce;
                            if((responce != undefined)&&(responce.status ==200)){
                                //_this.removeClass('btn-info').attr('disabled',true).addClass('btn-danger').attr('disabled',true).text('Terminated');
                                _this.attr('disabled',false).attr('id','submit-comments-revoke').text('Revoke');
$('#home_'+testPin+'-tab').text('Revoke');
                                swal({
                                       title: "Success",
                                       text: "Terminated Successfully",
                                        type: "success",
                               });
                                sendMessage(comments,testPin,'10');
                            }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{
                
                $('#comments_'+testPin+'-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');
        $('#myModalterminate').modal('hide');
    })




    // Message   Candidate ajax call  //
    $(document).on('click','#submit-message-comments',function(e){
        e.preventDefault();
        testPin = $(this).attr('data');
        //var comments = $(this).closest($("#messageForm_"+testPin+"")).find("input[id='candidate_message_"+testPin+"']").val();
        var comments = $(this).closest($("#messageForm_"+testPin+"")).find("textarea[id='candidate_message_"+testPin+"']").val(); 
        var _this = $(this);
       comments = comments.replace(/[0-9`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi,'');
        if(testPin !=''){
            if(comments != ''){
                if(comments.length > 600){
                    $('#candidate_message_'+testPin+'-error').addClass('text-danger').text('Message should be less the 600 characters');
                    return false
                }
                if(comments.length < 3){
                    $('#candidate_message_'+testPin+'-error').addClass('text-danger').text('Message should be greater than 3 characters');
                    return false
                }
                $('#candidate_message_'+testPin+'-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_"+testPin+"")[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');
                               // $('.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_'+testPin+'-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');
    })

    /* Message scripts end */



    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
	   var target = $(e.target).attr("href") // activated tab
	  	/*if(target == '#hallTab'){
            $('.hme-loading-mask').fadeIn();
	  		$('#hall-video-element').html('');
	  		//var HallVideotoken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkYXRhIjp7Im5hbWUiOiJFeGFtQ2VudGVyIDEiLCJyb29tTmFtZSI6ImFzc2Vzc21lbnRleGFtaGFsbCIsImFwcE5hbWUiOiJzaXZha3VtYXJzIiwibWV0ZXJlZFBhcnRpY2lwYW50SWQiOiJiZjcxMjQ5ZS1mNzc2LTQ4MTctYjQ5MC00NjdkNjY1ZGM5ZDUifSwiaWF0IjoxNzMyODAyNDIyfQ.QkQfC_RyJ9L-JthzXzKRxtliuwMkDj6o3XjNS2kYIY4';
	  		var HallRoom_url = "sivakumars.metered.live/assessmentexamhall";
	  		StreamHallVideo(HallVideotoken,HallRoom_url);
	  		 $.ajax({
            url:'https://hiremee-app.metered.live/api/v1/token?secretKey=ve_4kV4qy7beM2WCASIgMle0enFd7qmjaWhWkc2sBQYvDP0r',
            data:{'name':'Admin','roomName':stream_url,'isAdmin':true},
            type:'post',
            dataType:'json',
            success:function(responce){
                var res = responce;
                if((responce != undefined)&&(responce.token !='')){
                    StreamHallVideo(responce.token,stream_url);
                }else{
                    alert('Stream token not generated');
                }
            }
        });
	  	}*/
	});

    setInterval(function () {
        updateScreenShareVideo();
    },20000);

    

/*Revoke script ajax start */
    $(document).on('click','#submit-comments-revoke',function(e){
        e.preventDefault();
        var _this = $(this);
        testPin = $(this).attr('data');
        var comments = $(this).closest($("#terminateForm_"+testPin+"")).find("textarea[id='comments_"+testPin+"']").val(); 
        if(testPin !=''){
            if(comments != ''){
                if(comments.length > 250){
                    $('#comments_'+testPin+'-error').addClass('text-danger').text('Comments should be less the 250 characters');
                    return false
                }
                if(comments.length < 3){
                    $('#comments_'+testPin+'-error').addClass('text-danger').text('Comments should be greater than 3 characters');
                    return false
                }
                $('#comments_'+testPin+'-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){
                          $("#terminateForm_"+testPin+"")[0].reset();
                           var res = response;
                           if((response != undefined)&&(response.status ==200)){
                                 _this.attr('disabled',false).attr('id','submit-comments').text('Block');
                                 $('#home_'+testPin+'-tab').text('Block');
                                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{
               $('#comments_'+testPin+'-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',
            });
        }
    })  

    /*Block message tab reset form start */
     $(document).on('click','.blockTab',function(e){
         var _this = $(this);
        testPin = $(this).attr('data');
        $("#messageForm_"+testPin+"")[0].reset();
     });
     $(document).on('click','.ChatTab',function(e){
         var _this = $(this);
        testPin = $(this).attr('data');
        $("#terminateForm_"+testPin+"")[0].reset();
 
     });
 
     /*Block message tab reset form End */
});
/*function accordionTab(){
	var acc = document.getElementsByClassName("accordion-custom");
	var i;
	 console.log(acc.length)
	for (i = 0; i < acc.length; i++) {
	  acc[i].addEventListener("click", function() {
	    this.classList.toggle("active-custom");
	    var panel = this.nextElementSibling;
	     if (panel.style.display === "block") {
	      panel.style.display = "none";
	    } else {
	      panel.style.display = "block";
	    }
	 
	  });
	}
}*/
function updateScreenShareVideo(){
    var testpins = {};
      
   // if(parseInt($('video').length) > 0){
        $('.testpinDiv').each(function(){
            _testpinDiv = $(this);
            _id = _testpinDiv.attr('id');
            testpins[_id] = {};
        
            var videoTag = $('#'+_id+' video');
            var videoType = {};
            testpins[_id]['screenShare'] = $('#'+_id).find('.screenShareCls source').length;
            //To get multiple video by class screenshareClass,candidate video and Thired Eye
            /* 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,'page':'live_stream'},
            success:function(res){
                if(res.status == 200){
                    data = res.content;
                    notifications = res.flagData.flagcounts;
                    var redFlags = res.flagData.redflags;
             	
                    $.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').append('<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').append('<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){
                              console.log(video)
                              data =$('#'+tstpin+' .candidateVideoCls').append('<source src="'+video+'" type="video/mp4" class="active">');
                            })
                        }

                    })
                    if(notifications !=null && notifications !='' ){
                         $.each(notifications,function(testpin,count){
                                $('#'+testpin+'-notification-icon').text(count);
                                
                             if((redFlags !=null && redFlags !='') && (testpin in redFlags)){
                             	
                             	$('#accordion-custom-'+testpin).addClass('redFlag');
                             }else{
                             	$('#accordion-custom-'+testpin).removeClass('redFlag');
                             	
                             }   
                        });
                    }


                }
            }
        });
        loadVideo(); //play autometically
    //}
}
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",".full-screen",function(e){
    var fullscreenEle = $(this).attr('data-id');
    if(fullscreenEle !== undefined && fullscreenEle !== null && fullscreenEle !== '')
    {
        var element = document.getElementById(fullscreenEle);       
        if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if (element.webkitRequestFullScreen) {
            element.webkitRequestFullScreen();
        }  
    }
    else{
        e.preventDefault();
    }
});


$('#participants').on('click','.notification-custom',function(e){
    e.preventDefault();
   // function proctoringLog(){
        _testpin = $(this).attr('rel');
      /*  _testpin = 'H740514';
        alert(_testpin);*/
     $.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(){
            var testpin =  $(this).data('testpin'); 
            var assign_id =  278353; //$(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},
            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');
      });
});

  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 }),
      });
      //console.log('notification called');
  }
</script>
@endsection