@extends('layouts.master')

@section('content')
<div class="container">
  <div class="row text-center">
    <h2>Online Assessment Complete</h2>
  </div>
  <div class="row">
    <div class="col-12 text-center">
      <div id="player"></div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3 text-center mt-4">
      <b class="mb-3">You have completed the online portion of the assessment</b>
      <p>An assessor will review your assessment and will be contacting you to schedule a brief interview session.</p>
      <p>You may now close this browser window or navigate to another page.</p>
    </div>
  </div>
</div>
@stop

@section('footer-scripts')
<script>
  var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '300',
      width: '400',
      videoId: 'EN8bRbo5m5k',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  function onPlayerReady(event) {
    player.mute();
    event.target.playVideo();
  }

  var done = false;
  function onPlayerStateChange(event) {
    console.log('event.dataevent.dataevent.data: ', event.data)
    if (event.data === 0) {
      var el = document.getElementById('startAssessment')
      el.classList.remove('btn-secondary');
      el.classList.add('btn-primary');
      el.href = '/assessee-process'
    }
  }
</script>
@endsection