@extends('layouts.main')
@section('title',"Candidate's Stream")
@section('content')
            <!-- 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's 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>
                    <div class="col-md-12">
                           <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>
                @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 roomName = 'assessment-'+stream_assessment;
     var stream_url = "hiremee-livetest.metered.live/assessment-35605";
     console.log(stream_url);
     var testPin = '';
     var btnInstant = '';
     //https://www.metered.ca/docs/rest-api/create-room-api
   /* $.ajax({
            url:'https://hiremee-live-test.metered.live/token?secretKey=YOuI1tj8MItDYvM8U9bWIJuiYAIXrBZqeG51599M_iYAaS9O',
            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);
                }else{
                    alert('Stream token not generated');
                }
            }
        });*/
var token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkYXRhIjp7Im5hbWUiOiJhZG1pbiIsInJvb21OYW1lIjoiYXNzZXNzbWVudC0zNTYwNSIsImlzQWRtaW4iOnRydWUsImFwcE5hbWUiOiJoaXJlbWVlLWxpdmV0ZXN0IiwibWV0ZXJlZFBhcnRpY2lwYW50SWQiOiIxMWNlNzk3ZS03ZTMyLTQyNmItYjg4Yi1kZDE3NWEyMGQ4YzUifSwiaWF0IjoxNjkzMjA0OTM3fQ.GWOiO6a-_Jg080AC2HqVzQcMXePiVhZOXL2DZ5SZyf8";
    StreamVideo(token,stream_url);
   function StreamVideo(accessToken,stream_url){

        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.style.width='50%';*/
                let name = document.createElement('span');
                name.classList.add('f-15')
                name.innerText = 'Test Pin :'+participant.name;

                 let terminateBtn = document.createElement('button');
                terminateBtn.classList.add('btn','btn-info','terminateBtn','ml-4');
                terminateBtn.innerText = 'Terminate';
                terminateBtn.setAttribute("data",participant.name);
                terminateBtn.style='margin-left:112px;';

                box.append(video,name,terminateBtn);
                let participants_div = document.getElementById('participants');
                participants_div.appendChild(box);
            }
        }
        meeting.on("onlineParticipants", function(participants) {
            console.log('onlineParticipants:',participants);
            if(participants.length == 0){
                $('#participants').append('<div class="col-md-12 text-center"><p>Please wait untill participants are join..!</p></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];
                } 
            }
        });
    }

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