@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: 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 src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/3.1.18/signalr.min.js"></script>

<div class="pcoded-content">
    <button id="fullscreen-btn" style="display:none"></button>
    <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="pcoded-inner-content p-0">
        <div class="main-body">
          <div class="container-fluid">


          @if(!is_null($assessmentDetails->live_streaming_room_url))
            <div class="row" id="participants" data='{{$stream_assessment}}'>
            
            </div>
          @else
          <div class="row">
              <div class="col-md-12 text-center pt-5"><h3>Assessment Room URL Not created</h3></div>
            </div>
          @endif
           
          
  </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 modal-header-custom">
                    <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="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
      <form name="terminateForm" id="terminateForm">
        <!-- Modal Header -->
        <div class="modal-header modal-header-custom">
          <h5 class="">Reason for block <span id="terminateTestPin"></span></h5>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
             @csrf
            <div class="form-group">
                <textarea name="comments" id="comments" placeholder="Enter Comments" class="form-control modal-text-area" required></textarea>
                <div id="comment-error"></div>
              </div>
              <button type="button" id="cancel" class="btn btn-warning pull-right ml-2 modalBtns">Cancel</button>
              <button type="button" id="submit-comments" class="btn btn-info pull-right modalBtns">Block</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 -->
@endsection

@section('footer')
 @if(!is_null($assessmentDetails->live_streaming_room_url))
<script>

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

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


var stream_assessment = $('#participants').attr('data');
      var stream_url = "{{$assessmentDetails->live_streaming_room_url}}";
    /* var stream_url = "thirdeyehiremee.metered.live/thirdeye";
    var roomName = "thirdeye";*/
    var domainUrl = 'https://'+"{{$live_stream_domain}}"+'/api/v1/token?secretKey='+"{{$live_stream_key}}"
    /*var roomName = "assessment-70621";*/
    var roomName = "{{$roomName}}";

    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',
        url:domainUrl,
        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="col-md-4 col-12 p-2 position-relative"><div class="candidae-details-card" id="accordion-custom-'+testpin+'"><div class="candidate-card-head"><div class="candidate-testpin">'+testpin+'</div>';
             htmlTag += '<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>';
             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 += '<span class="spanmessage" id="candidate-message-'+testpin+'" style="display:none;"></span></div></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"))
            {
                //var removeTestpin = participant.name.replace('ExamCenter','');
                let video = document.getElementById('hall-'+participant._id);
                if(video && hallparticipants[participant._id]!=undefined)
                {
                    video.parentElement.remove();
                    delete hallparticipants[participant._id];
                }
                //$('#accordion-custom-'+removeTestpin).remove();
            }
            else{
              var removeTestpin = participant.name;
                let video = document.getElementById('participant-'+participant._id);
                console.log(video);
                if(video && participants[participant._id]!=undefined)
                {
                    video.parentElement.remove();
                    delete participants[participant._id];
                }
                $('#accordion-custom-'+removeTestpin).remove();
            }
            
        });
        // 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','.terminateBtn',function(e){
        e.preventDefault();
        testPin = $(this).attr('data');
        console.log(testPin);
        $('#terminateTestPin').text('( '+testPin+' )');
        $('#submit-comments').attr('data','')
        $('#submit-comments').removeClass('btn-danger');
        $('#submit-comments').attr('data',testPin)
        $('#myModal').modal('show');
    });
   
    $(document).on('click','#submit-comments',function(e){
        e.preventDefault();
        
        var _this = $(this);
       var testPin = _this.attr('data');
       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
                }
                if(comments.length < 3){
                    $('#comment-error').addClass('text-danger').text('Comments should be greater than 3 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(response){
                           var res = response;
                           if((response != undefined)&&(response.status ==200)){
                                 _this.attr('disabled',true).text('Block');
                                
                                $('#cancel').trigger('click');
                                swal({
                                    html: true, 
                                    title: '<span class="sweet-sucess-text">Blocked Sucessfully</span>', 
                                    type: "success",
                                    showCancelButton: false,
                                    confirmButtonText: "Ok",
                                    closeOnConfirm: false,
                                    confirmButtonColor: '#28e1bd',
                                });
                                //console.log(testPin);
                                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{
                
                $('#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('data','');
        $('#submit-comments').attr('disabled',false).text('Block');
        $('#myModal').modal('hide');
    })

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

    /* 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 */
    //$('#fullscreen-btn').trigger('click');
    document.addEventListener(
      "keydown",
      (e) => {
        if (e.key === "Enter") {
          //toggleFullScreen();
          $('#fullscreen-btn').trigger('click')
        }
      },
      false,
    );
});
/*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;
           /*testpins[_id]['ThirdEye'] = $('#'+_id).find('.screenShareCls source').length;
           testpins[_id]['CandidateVideo'] = $('#'+_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(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 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');
  }

  $(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>
@endif
@endsection