@extends('layouts.main')
@section('title',"Candidates Stream")
@section('content')
<style>
.nav-tabs .nav-item .nav-link.active
{
    background-color: #659E03;
    color:#fff !important;
}
.nav-tabs > li > a:hover{
    background-color: #D6E6F3 !important;
    border-radius: 5px;
    color:#000;
 }
.nav-tabs .nav-link {
    border-top: 0px !important;
    padding: 10px !important;
    border-radius: 24px;
    background: #efefef;
    color: #131313 !important;
}
.nav-tabs{
    border-bottom: 1px solid #d5d5d5 !important;
    padding:8px;
}
.nav-tabs .nav-item{
    border-bottom:0px !important;
}
.nav-tabs .nav-item .nav-link.active {
    background-color: #add673 !important;
    color: #ffffff !important;
    padding: 10px !important;
    border-radius: 24px;
}
.nav-tabs .nav-link:hover {
    border-radius: 24px !important;
}
.mb-70 {
    margin-bottom: 155px;
}
.setback-video{
    background: #fff;
    border: 1px solid #8BC34A;
    padding: 20px;
    border-radius: 10px;
    border:1px solid #4CAF50;
}
.video-customset{
    height: 160px;
    border-radius: 10px;
}
.label-video{
    font-size: 16px;
    font-weight: 600;
    color: #558B2F;
}
.valuebox{
    background: #f0fbe4;
    padding: 10px;
    border-radius: 10px;
    border: 1px dashed #8BC34A;
}
.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;
}
.span-label{
    display: flex;
    justify-content: center;
    margin-top: 10px;
    font-weight: 600;
    font-size: 16px;
}
</style>
<!-- Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
<script type="text/javascript" src="https://cdn.metered.ca/sdk/video/1.4.5/sdk.min.js"></script>
<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-content">
    <div class="pcoded-inner-content p-0">
        <div class="main-body">
            <div class="page-wrapper p-0">
                <div class="page-header p-15 m-b-0 pro-page-heading1">
                    <div class="page-header-title">
                        <h4>Live Video Stream</h4>
                    </div>
                    <div class="page-header-breadcrumb p-r-10">
                        <ul class="breadcrumb-title">
                            <li class="breadcrumb-item">
                            @if(Auth::guard('corporate')->user()->user_type == 1)
                                <a href="{{secure_url('company/dashboard') }}"> <span class="hiremee-home"></span> </a>
                            @elseif(Auth::guard('corporate')->user()->user_type == 2)
                                <a href="javascript:void(0)"> <span class="hiremee-home"></span> </a>
                            @endif
                            </li>
                            <li class="breadcrumb-item"><a href="#">Candidates Live Stream</a></li>
                        </ul>
                    </div>
                </div>
                <div id="pro-preview-page1"></div>
                <div class="page-body">
                @if($status == true)
                    <div class="col-md-12">
                        <div class="row m-t-20" id="participants" data="{{$testpin}}">
                            <div class="col-md-4">
                                <video controls="" class="w-100 h-100 video-customset participantVideoClass"  controls="true" autoplay="true" id="participant-{{$testpin}}"></video>
                                <span class="span-label">Candidate Video</span>
                                <button class="full-screen" data-id="participant-{{$testpin}}" title="Enter full screen mode"><svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink"><g fill="none" fill-rule="evenodd" id="Page-1" stroke="none" stroke-width="1"><g fill="#000000" id="Core" transform="translate(-215.000000, -257.000000)"><g id="fullscreen" transform="translate(215.000000, 257.000000)"><path d="M2,9 L0,9 L0,14 L5,14 L5,12 L2,12 L2,9 L2,9 Z M0,5 L2,5 L2,2 L5,2 L5,0 L0,0 L0,5 L0,5 Z M12,12 L9,12 L9,14 L14,14 L14,9 L12,9 L12,12 L12,12 Z M9,0 L9,2 L12,2 L12,5 L14,5 L14,0 L9,0 L9,0 Z" id="Shape" /></g></g></g></svg></button>
                            </div>
                            <div class="col-md-4">
                                <video controls="" class="w-100 h-100 video-customset candidateVideoCls hallclass" controls="true" autoplay="true" id="hall-{{$testpin}}"></video>
                                <span class="span-label">Third Eye</span>
                                <button class="full-screen" data-id="hall-{{$testpin}}" title="Enter full screen mode"><svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink"><g fill="none" fill-rule="evenodd" id="Page-1" stroke="none" stroke-width="1"><g fill="#000000" id="Core" transform="translate(-215.000000, -257.000000)"><g id="fullscreen" transform="translate(215.000000, 257.000000)"><path d="M2,9 L0,9 L0,14 L5,14 L5,12 L2,12 L2,9 L2,9 Z M0,5 L2,5 L2,2 L5,2 L5,0 L0,0 L0,5 L0,5 Z M12,12 L9,12 L9,14 L14,14 L14,9 L12,9 L12,12 L12,12 Z M9,0 L9,2 L12,2 L12,5 L14,5 L14,0 L9,0 L9,0 Z" id="Shape" /></g></g></g></svg></button>
                            </div>
                            <div class="col-md-4">
                                <video class="w-100 h-100 video-customset screenShareCls videoTag" controls="true" autoplay="true" id="record-{{$testpin}}"></video>
                                <span class="span-label">Screen Share</span>
                                <button class="full-screen" data-id="record-{{$testpin}}" title="Enter full screen mode"><svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink"><g fill="none" fill-rule="evenodd" id="Page-1" stroke="none" stroke-width="1"><g fill="#000000" id="Core" transform="translate(-215.000000, -257.000000)"><g id="fullscreen" transform="translate(215.000000, 257.000000)"><path d="M2,9 L0,9 L0,14 L5,14 L5,12 L2,12 L2,9 L2,9 Z M0,5 L2,5 L2,2 L5,2 L5,0 L0,0 L0,5 L0,5 Z M12,12 L9,12 L9,14 L14,14 L14,9 L12,9 L12,12 L12,12 Z M9,0 L9,2 L12,2 L12,5 L14,5 L14,0 L9,0 L9,0 Z" id="Shape" /></g></g></g></svg></button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12 m-t-50">
                        <div class="row valuebox ml-0 mr-0 m-t-15"> 
                            <div class="col-md-10">
                                <div class="row m-t-5">
                                    <div class="col-md-3 label-video"> Testpin: </div> 
                                    <div class="col-md-9"><span>{{$testpin}}</span></div>
                                </div> 
                                <div class="row m-t-5">
                                    <div class="col-md-3 label-video"> Location: </div> 
                                    <div class="col-md-9" id="loc-{{$testpin}}"></div>
                                </div> 
                                <div class="row m-t-5">
                                    <div class="col-md-3 label-video pr-0"> Exam Date: </div> 
                                    <div class="col-md-9" id="time-{{$testpin}}"></div>
                                </div>
                            </div> 
                            <div class="co1-md-3 m-t-15">
                              
  <button class="btn btn-danger btn-sm terminateBtn f-16 pull-right" data="{{$testpin}}">Terminate</button>
<button class="btn btn-success btn-md messageBtn pull-right" data="{{$testpin}}">Message</button>

                            </div> 
                        </div>
                    </div>
                @else
                    <div class="row"  data="{{$testpin}}">
                        <div class="col-md-12 text-center">
                            <h5>Invalid Testpin</h5>
                        </div>
                    </div>
                @endif
				</div>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="">
    <div class="modal fade" id="view-proctoring-screen">
        <div class="modal-dialog modal-md modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-dark" id="exampleModalLongTitle"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true"><i class="hiremee-multiply f-18"></i></span>
                    </button>
                </div>
                <div class="modal-body text-center">
                    <img src="" alt="User-Profile-Image" class="report-image img-fluid" id='js-proctoring-image-preview' style="width:auto; height: 350px;" >
                    <p class="reason-content" id="exampleModalReason"></p>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Terminate comments -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h5 class="">Reason For Terminate</h5>
            </div>
        
            <!-- Modal body -->
            <div class="modal-body">
                <form name="terminateForm" id="terminateForm">
                    @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>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
@endsection
@section('footer')
@if($status == true)
<script type="text/javascript">
$(document).ready(function(){
    var stream_assessment = $('#participants').attr('data');
      //var stream_url = "hiremee-livetest.metered.live/assessment-35605";
    var stream_url = "testingpurpose.metered.live/assessment-70621";
    var roomName = "assessment-70621";

    console.log(stream_url);
    var testPin = $('#participants').attr('data');
    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;
            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)
        {
            var testpin_received = participant.name.replace('ExamCenter','');

            if(!participant.isAdmin && testpin_received==testPin)
            {
                //participant.name = 'H568467';
                // var screenShareVideoDiv = '<div class="col-md-4"> <video class="w-100 h-100 video-customset videoTag" controls="true" autoplay="true" id="record-'+testpin_received+'"></video>'+fullscreenHtmlBlock('videoTagFullscreen',`record-${testpin_received}`)+'</div>';

                // var htmlTag = '<div class="col-md-6 mt-3 mb-3 testpinDiv" id="'+testpin_received+'">';
                // htmlTag += '<div class="setback-video"><div class="row">';
                // htmlTag += '<div class="col-md-4"><video controls="" class="w-100 video-customset participantVideoClass"  controls="true" autoplay="true" id="participant-'+participant._id+'"></video>'+fullscreenHtmlBlock('participantVideoClassFullscreen',"participant-"+participant._id)+'</div>';
                // htmlTag += '<div class="col-md-4"> <video controls="" class="w-100 video-customset candidateVideoCls hallclass" controls="true" autoplay="true" id="hall-'+participant._id+'"></video>'+fullscreenHtmlBlock('hallclassVideoFullscreen',"hall-"+participant._id)+'</div>';
                // htmlTag += screenShareVideoDiv;
                // htmlTag += '</div>';
                // htmlTag += '<div class="row valuebox ml-0 mr-0 mt-2"> <div class="col-md-9 pl-0"><div class="row"><div class="col-md-3 label-video"> Testpin: </div> <div class="col-md-9"><span>'+testpin_received+'</span></div></div> <div class="row"><div class="col-md-3 label-video"> Location: </div> <div class="col-md-9" id="loc-'+testpin_received+'"></div></div> <div class="row"><div class="col-md-3 label-video pr-0"> Exam Date: </div> <div class="col-md-9" id="time-'+testpin_received+'"></div></div></div> <div class="co1-md-3 m-t-5"><button class="btn btn-danger btn-sm terminateBtn f-16 pull-right" data="'+testpin_received+'">Terminate</button></div> </div>';
                // htmlTag += '</div></div>';

              	// var htmlTag = '<div class="col-md-12 mt-3 mb-3 testpinDiv" id="'+testpin_received+'"><div class="setback-video"><div class="row"> <div class="col-md-4"><video controls="" class="w-100 h-100 video-customset participantVideoClass" id="participant-'+participant._id+'" controls="true" autoplay="true" ></video></span> </div><div class="col-md-4"> <video controls="" class="w-100 h-100 video-customset hallclass" id="hall-'+participant._id+'" controls="true" autoplay="true" ></video></div>'+screenShareVideoDiv+' </div> <div class="row valuebox ml-0 mr-0 mt-5"> <div class="col-md-2 label-video"> Testpin: </div> <div class="col-md-10">'+testpin_received+'</div> <div class="col-md-2 label-video"> Location: </div> <div class="col-md-10" id="loc-'+testpin_received+'"></div><div class="co1-md-12"><button class="btn btn-danger btn-md terminateBtn pull-right" data="'+testpin_received+'">Terminate</button></div></div>  </div></div>';
              	
                // let participants_div = document.getElementById('participants');
                // if($("#participants").find('#'+testpin_received).length==0)
                // {
                //     participants_div.insertAdjacentHTML( 'beforeend', htmlTag )
                //     //participants_div.appendChild(box);
                // }
                getLocationData(testpin_received);
                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"))
            {
                var participant_name = participant.name.replace('ExamCenter','');
                hallparticipants[participant_name] = new MediaStream();
                $("#participants").find('#'+participant_name).find('.hallclass').attr('id','hall-'+participant_name);
            }
            else{
                var participant_name = participant.name.replace('ExamCenter','');
                participants[participant_name] = new MediaStream();
                $("#participants").find('#'+participant_name).find('.participantVideoClass').attr('id','participant-'+participant_name);
            }
        }

        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("participantJoined", addParticipant);
        meeting.on("participantLeft", function(participant) {
            // console.log('participantLeft:',participant);
            if(participant.name.includes("ExamCenter"))
            {
                var testpin = participant.name.replace('ExamCenter','');
                let video = document.getElementById('hall-'+testpin);
                if(video && hallparticipants[testpin]!=undefined)
                {
                    video.parentElement.remove();
                    delete hallparticipants[testpin];
                }
            }
            else{
                var testpin = participant.name.replace('ExamCenter','');
                let video = document.getElementById('participant-'+testpin);
                if(video && participants[testpin]!=undefined)
                {
                    video.parentElement.remove();
                    delete participants[testpin];
                }
            }
        });
        meeting.on("remoteTrackStarted", function(remoteTrack) {
            // console.log('remoteTrackStarted:',remoteTrack);
            loadVideoStream(remoteTrack);
        });

        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-'+testpin);
                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[testpin].getVideoTracks().forEach((track) => {
                            hallparticipants[testpin].removeTrack(track);
                        });
                        hallparticipants[testpin].addTrack(remoteTrack.track);
                        hallvideo.srcObject = hallparticipants[testpin];
                    }
                    // 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[testpin].getAudioTracks().forEach((track) => {
                            hallparticipants[testpin].removeTrack(track);
                        });
                        hallparticipants[testpin].addTrack(remoteTrack.track);
                        hallvideo.srcObject = hallparticipants[testpin];
                    }
                }
            }
            else{
                console.log("NON EXAM CENTER: "+participant_name);
                var testpin = participant_name.replace('ExamCenter','');
                var video = document.getElementById('participant-'+testpin);
                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[testpin].getVideoTracks().forEach((track) => {
                            participants[testpin].removeTrack(track);
                        });
                        participants[testpin].addTrack(remoteTrack.track);
                        video.srcObject = participants[testpin];
                    }
                    // 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[testpin].getAudioTracks().forEach((track) => {
                            participants[testpin].removeTrack(track);
                        });
                        participants[testpin].addTrack(remoteTrack.track);
                        video.srcObject = participants[testpin];
                    } 
                }
            }
        }
    }

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

    $(document).on('click','.terminateBtn',function(e){
        e.preventDefault();
        btnInstant = $(this);
        $('#submit-comments').removeClass('btn-danger');
        testPin = $(this).attr('data');
        $('#myModal').modal('show');
    });
   
    $(document).on('click','#submit-comments',function(e){
        e.preventDefault();
        
        var _this = $(this);
        var comments = $('#comments').val();
        if(testPin !=''){
            if(comments != ''){
                if(comments.length > 250){
                    $('#comment-error').addClass('text-danger').text('Comments should be less the 250 characters');
                    return false
                }
                $('#comment-error').text('');
                    $.ajax({
                        url: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){
                            var res = responce;
                            if((responce != undefined)&&(responce.status ==200)){
                                _this.removeClass('btn-info').attr('disabled',true).addClass('btn-danger').text('Terminated');
                                btnInstant.removeClass('btn-info').attr('disabled',true).addClass('btn-danger').text('Terminated');
                                $('#cancel').trigger('click');

                            }else{
                                swal({
                                    html: true, 
                                    title: '<span class="sweet-danger-text">Something went wrong</span>', 
                                    type: "warning",
                                    showCancelButton: false,
                                    confirmButtonText: "Ok",
                                    closeOnConfirm: false,
                                    confirmButtonColor: '#28e1bd',
                                });
                            }
                            testPin = '';
                        }
                    });
            }else{
                
                $('#comment-error').addClass('text-danger').html('<span>Please enter comments</span>');
            }
        }else{
            swal({
                html: true, 
                title: '<span class="sweet-danger-text">Testpin is empty</span>', 
                type: "warning",
                showCancelButton: false,
                confirmButtonText: "Ok",
                closeOnConfirm: false,
                confirmButtonColor: '#28e1bd',
            });
        }
    })

    $(document).on('click','#cancel',function(e){
        e.preventDefault();
        testPin = '';
        $('#comment-error').text('');
        $('#comments').val('');
        $('#submit-comments').attr('disabled',false).text('Terminate');
        $('#myModal').modal('hide');
    });

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

function updateScreenShareVideo(){
    var testpins = {};
      
    if(parseInt($('video').length) > 0){
        _id = $('#participants').attr('data');
        testpins[_id] = {};
        testpins[_id]['screenShare'] = $('#'+_id).find('.screenShareCls source').length;

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

                        if((videos['CandidateVideo'] != undefined) && (videos['CandidateVideo'].length >0)){
                            $.each(videos['CandidateVideo'],function(index,video){
                                data =$('#'+tstpin+' .candidateVideoCls').append('<source src="'+video+'" type="video/mp4" class="active">');
                            })
                        }
                    })
                }
            }
        });
        loadVideo(); //play autometically
    }
}

function loadVideo(){
    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();
    }
});
</script>
@endif
@endsection