@extends('layouts.master')

@section('content')
<div class="container">
  <div class="row">
    <h2>How To Take The Pre-Assessment</h2>
  </div>
  <div class="row">
    <div class="col-6 text-center">
      <div id="player"></div>
    </div>
    <div class="col-6">
      <p>As part of this assessment process, you will complete pre-assessment for the position. Our certified assessor will reference your responses when composing the final assessment. Please watch the video (it will begin automatically); when it is completed the ‘Start the pre-assessment’ button will be accessible. Thank you.</p>
    </div>
  </div>
  <div class="row text-center">
    <div class="col">
      <a href="#" class="btn btn-secondary mt-5" id="startPreAssessment">Start the Pre-Assessment</a>
    </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: 'krdqp0zccgM',
      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('startPreAssessment')
      el.classList.remove('btn-secondary');
      el.classList.add('btn-primary');
      el.href = '/pre-assessment/manager/{{ $hashCodeManager }}'
    }
  }
</script>
@endsection