@extends('layouts.master')

@section('content')
<div class="container">
  <div class="row">
    <h2>How to Take the Assessment</h2>
  </div>
  <div class="row">
    <div class="col-6 text-center">
      <div id="player"></div>
    </div>
    <div class="col-6">
      <ul>
        <li>You will be asked 152 questions.</li>
        <li>The assessment is untimed.</li>
        <li>There are no correct or incorrect answers.</li>
        <li>You may go back and change your answer for a previous question using the "Back" button</li>
        <li>Return to the current question by clicking the "Return to Current Question" button</li>
        <li>You may leave the assessment at any time. Your progress bar will be saved.</li>
      </ul>
    </div>
  </div>
  <div class="row text-center">
    <div class="col">
      <a href="#" class="btn btn-secondary mt-5" id="startAssessment">Start the 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: '5ZF7q3wBdj8',
      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