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

    }

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

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

    @media(max-width:992px){
    .hall-video-class, .participant{
    max-height:200px;
    oveflow:hidden;
    }
    .hall-video-class video, .participant video{
        min-height:200px;
        max-height: 200px !important;
        object-fit: cover;
        oveflow:hidden;
    }
    }

.nav-tabs .nav-link {
    border-top: 0px !important;
    padding: 10px !important;
    border-radius: 24px;
    background: #efefef;
    color: #131313 !important;
}
.nav-tabs{
    border-bottom: 1px solid #d5d5d5 !important;
    padding:8px;
}
.nav-tabs .nav-item{
border-bottom:0px !important;
}
.nav-tabs .nav-item .nav-link.active {
    background-color: #add673 !important;
    color: #ffffff !important;
    padding: 10px !important;
    border-radius: 24px;
}
.nav-tabs .nav-link:hover {
    border-radius: 24px !important;
}

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

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

            <!-- CSS Reset -->
            <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"> -->
        
            <!-- Milligram CSS -->
           <!--  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"> -->
        
            <script type="text/javascript" src="https://cdn.metered.ca/sdk/video/1.4.5/sdk.min.js"></script>
    
 <div class="pcoded-content">
    <div class="pcoded-inner-content p-0">
        <div class="main-body">
            <div class="page-wrapper p-0">
                <div class="page-header p-15 m-b-0 pro-page-heading1">
                    <div class="page-header-title">
                        <h4>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(isset($stream_assessment))
                    <div class="pageheader bg-666666">
                        <div class="row">
                            <div class="col col-md-6 d-flex c-white align-items-center">
                                <span class="font-italic m-r-5 m-l-5">@if(!is_null($assessmentDetails)){{$assessmentDetails->name}}  - {{date('Y-m-d')}}</span>
                                @endif
                            </div>
                        </div>
                    </div>
               
                    <ul id="tabs" class="nav nav-tabs md-tabs" role="tablist" style="background:#fff;">
                        <li class="nav-item">
                            <a class="nav-link active" style="padding:10px !important" data-toggle="tab" href="#candidateTab" data-imcount="0" role="tab">Candidates Video Stream</a>
                        </li>
                            <li class="nav-item">
                            <a class="nav-link" style="padding:10px !important" data-toggle="tab" href="#hallTab" data-imcount="0" role="tab">Exam Hall Video Stream </a>
                        </li>
                        </ul>

                        <div class="tab-content p-0">
                            <div class="tab-pane active" id="candidateTab" role="tabpanel">
                                <div class="tab-content">
                                    <h4>Candidates Video</h4>
                                         <div class="">
                                           <div class="row" id="participants" data='{{$stream_assessment}}'>

                                                       <!-- <div class="col-md-4 participant pt-2"><video id="participant-64e60cbe37883e7dc77b478b" controls="" autoplay="" width="300" class="w-100"></video><span class="f-15">Test Pin :T707412</span><button class="btn btn-info terminateBtn" style="margin-left:112px" data="T707412">Terminate</button></div> -->

                                                      
                                             </div>
                                          </div>

                                </div>
                            </div>

                        <div class="tab-pane" id="hallTab" role="tabpanel">
                            <div class="tab-content">
                                <h4>Exam Hall Video</h4>
                                 <div class="row" id="hall-video-element" data='{{$stream_assessment}}'>
                                 </div>
                        </div>

                        </div>
                    
                @else
                    <div class="col-md-12">
                        <p class="text-center" style="padding-top: 100px">{{isset($err_msg)?$err_msg:''}}</p>
                    </div>
                @endif
                </div>
            </div>
        </div>
    </div>
</div>

<div class="hme-loading-mask">
    <div class="hme-loading-container">
        <div class="hme-dual-ring"></div>
        <div>Please wait, Loading...</div>
    </div>
</div>   


  <!-- Modal -->
<div class="">
    <div class="modal fade" id="view-proctoring-screen">
        <div class="modal-dialog modal-md modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-dark" id="exampleModalLongTitle"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true"><i class="hiremee-multiply f-18"></i></span>
                    </button>
                </div>
                <div class="modal-body text-center">
                    <img src="" alt="User-Profile-Image" class="report-image img-fluid" id='js-proctoring-image-preview' style="width:auto; height: 350px;" >
                    <p class="reason-content" id="exampleModalReason"></p>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Terminate comments -->
  <div class="modal fade" id="myModal">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
      <form name="terminateForm" id="terminateForm">
        <!-- Modal Header -->
        <div class="modal-header">
          <h5 class="">Reason For Terminate</h5>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
             @csrf
            <div class="form-group">
                <label for="email">Please Enter Comments <span class="text-danger">*</span>:</label>
                <textarea name="comments" id="comments" class="form-control" required></textarea>
                <div id="comment-error"></div>
              </div>
              <button type="button" id="cancel" class="btn btn-warning pull-right ml-2">Cancel</button>
              <button type="button" id="submit-comments" class="btn btn-info pull-right">Terminate</button>
              
        </div>
        </form>
      </div>
    </div>
  </div>
  <!-- Modal -->
@endsection

@section('footer')
<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 = "demotst.metered.live/assessment-35605";
     var roomName = "assessment-35605";

     console.log(stream_url);
     var testPin = '';
     var btnInstant = '';
     //https://www.metered.ca/docs/rest-api/create-room-api
    $.ajax({
            url:'https://demotst.metered.live/api/v1/token?secretKey=9Pi9WLau48-XyHd8Tnrq4WxXTJRdT3Q4Dlnm0NuQmg3CGb51',
            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');
                }
            }
        });

/*var token ='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkYXRhIjp7Im5hbWUiOiJUNjM1MDM1Iiwicm9vbU5hbWUiOiJhc3Nlc3NtZW50LTcwNjIxIiwiYXBwTmFtZSI6ImhpcmVtZWUtbGl2ZWRlbW8iLCJtZXRlcmVkUGFydGljaXBhbnRJZCI6ImViMTc0MzlhLTk4ZWYtNDVhNC04ZDM0LWI2OGYyYmIyZGQyMCJ9LCJpYXQiOjE3MzI4MDEzNDl9.ZOtEjD0P-aBtKgIdsT4DUbIv-RQOvorJcttvQ3gWlEs';

    StreamVideo(token,stream_url);*/

   function StreamVideo(accessToken,stream_url){
        $('.hme-loading-mask').fadeIn();
        var participants = {};
        const meeting = new Metered.Meeting();
       
        async function joinMeeting() {
            const response = await meeting.join({
                roomURL: stream_url,
                accessToken:accessToken,
                name:'Admin',
            });            
        }
        joinMeeting();
        function addParticipant(participant)
        {
            if(!participant.isAdmin && participants[participant._id]==undefined)
            {
                participants[participant._id] = new MediaStream();
                let video = document.createElement('video');
                video.id = 'participant-'+participant._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("participant");
                box.classList.add("pt-2");
                box.classList.add("mb-70");
                
                /*box.style.width='50%';*/
                var participantName = participant.name;
                console.log(participantName);
                let name = document.createElement('span');
                name.classList.add('f-15')
                
                if(!participantName.includes("ExamCenter")){
                    console.log('hi1');
                    name.innerText = 'Test Pin :'+participant.name;
                     var terminateBtn = document.createElement('button');
                    terminateBtn.classList.add('btn','btn-info','terminateBtn');
                    terminateBtn.innerText = 'Terminate';
                    terminateBtn.setAttribute("data",participant.name);
                    terminateBtn.style='margin-left:115px;';
                }else{
                    var terminateBtn=document.createElement('div');
                    name.innerText = 'Hall Name :'+participant.name;
                    console.log('hi');
                }
                let locationDiv = document.createElement('div');
                locationDiv.setAttribute('id',participant.name);
             
                box.append(video,name,terminateBtn,locationDiv);
                let participants_div = document.getElementById('participants');
                //participants_div.innerHTML = "";
                participants_div.appendChild(box);
                getLocationData(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(addParticipant);
        });
        //meeting.on("participantJoined", addParticipant);
        meeting.on("participantLeft", function(participant) {
            console.log('participantLeft:',participant);
            let video = document.getElementById('participant-'+participant._id);
            if(video && participants[participant._id]!=undefined)
            {
                video.parentElement.remove();
                delete participants[participant._id];
            }
        });
        meeting.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('participant-'+remoteTrack.participant._id);
            if(video)
            {
                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(){
                 $('#'+testpin).html('<p>Please wait..</p>');
            },
            success:function(responce){
                
                if((responce != undefined)&&(responce.status ==200)){
                    $('#'+testpin).html('<p>Timestamp: '+responce.created_at+'<br>Location: '+ responce.location +'</p>')

                }else{
                    $('#'+testpin).html('<p>Location not detected</p>');
                }
               
            }
        });
    }
    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');
    })


    $('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');
                }
            }
        });
        }*/
    });
});
    </script>
@endsection