@extends('layouts.app')

@section('title', 'Assessment - ' . $assessment->name)

@section('content')
<div id="content" class="container">
    <div class="row">
        <div>
            <div class="panel panel-default">
                <div class="panel-heading"><h3>{{ $assessment->name }} Assessment</h3></div>

                <div id="assessment-container" style="min-height:300px" class="panel-body">


                    <div id="instructions">
                      You are about to begin the assessment for <strong>{{ $assessment->name }}</strong>.<br /></br>
                      This assessment has a total of <span class="lead"><strong>{{ $assessment->question_count }}</strong></span> questions and you must answer <span class="lead"><strong>{{ $assessment->questionsNeededToPass() }}</strong></span> correctly to pass the module. You may take the assessment three times to obtain a passing score.</br></br>
                      Please click the button to begin.

                      <br /><br />
                      <div class="col-md-offset-5">
                          <button v-on:click="begin" class="btn btn-default btn-lg">
                              Begin Quiz
                          </button>
                      </div>
                    </div>

                    <div id="assessment" class="col-md-8 col-md-offset-2" style="display:none">
                      <!-- index is used to check with current question index -->
                      <div v-for="(question, index) in quiz.questions">
                        <!-- Hide all questions, show only the one with index === to current question index -->
                        <div class="col-centered" v-show="index === questionIndex">
                          <h4><em><strong>@{{ questionIndex + 1 }}. @{{ question.question_text }}</strong></em></h4>
                          <ol type="A">
                            <li v-for="response in question.answers">
                                <input type="radio" 
                                       v-bind:value="[questionIndex,response.id]" 
                                       v-bind:name="index" 
                                       v-model="userResponses[question.id]">  @{{response.answer_text}}
                            </li>
                          </ol>
                          <!-- Navigation button -->
                          <button class="btn btn-default" v-on:click="next(question.id)">
                            Continue
                          </button>
                        </div>
                      </div>
                      <div v-show="questionIndex === questions.length">
                      <h2>
                        You have completed the assessment!
                      </h2>
                          <div id="submitScore" v-show="results == null">
                            Click the button to submit your assessment
                            <br /><br />
                            <div class="col-md-offset-5">
                                <button v-on:click="submitScore" class="btn btn-success btn-lg">
                                  Submit
                                </button>
                            </div>
                          </div>
                          <div v-show="results != null">

                            <div v-if="score < {{ $assessment->pass_score }}"><strong class="bg-danger">Sorry</strong>
                              Your score for this assessment was @{{ score }}. 
                              That score is not high enough. You need at least an {{ $assessment->pass_score }} to pass.

                              <div class="row" style="margin-top:10px; margin-bottom:10px">
                                <div class="col-md-2" v-if="score < {{ $assessment->pass_score }}">
                                  <a class="btn btn-warning" href="{{ route('assessments.show', $assessment) }}">Try again</a>
                                </div>
                                <div class="col-md-2">
                                <a class="btn btn-default" href="{{ route('assessments.list') }}">Back to assessments list</a>
                                </div>
                              </div>

                            </div>
                            <div v-if="score >= {{ $assessment->pass_score }}">
                              <strong class="bg-success">Congratulations, you've passed!</strong>
                              You needed at least an {{ $assessment->pass_score }} to pass. Your score for this assessment was @{{ score }}. Click the button below to print your certificate.
                              <br /><br />
                              <a class="btn btn-success" href="{{ route('assessments.certificate', $assessment->name) }}">Save certificate</a>
                              <br />
                            </div>

                              <table class="table table-hover">
                                  <thead>
                                    <tr>
                                      <th>Question</th>
                                      <th>You answered</th>
                                      <th>Correct?</th>
                                      <th>Answer Explanation</th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                    <tr v-for="response in results">
                                      <td>@{{ response.order + 1 }}. @{{ response.question }}</td>
                                      <td>@{{ response.answered }}</td>
                                      <td>
                                        <span v-if="response.correct === 0" class="bg-danger"><strong>Incorrect<strong></span>
                                        <span v-if="response.correct === 1" class="bg-success"><strong>Correct<strong></span>
                                      </td>
                                      <td>@{{ response.explanation }}</td>
                                    </tr>
                                  </tbody>
                            </table>

                            <div class="row">
                              <div class="col-md-2" v-if="score < {{ $assessment->pass_score }}">
                                <a class="btn btn-warning" href="{{ route('assessments.show', $assessment) }}">Try again</a>
                              </div>
                              <div class="col-md-2">
                              <a class="btn btn-default" href="{{ route('assessments.list') }}">Back to assessments list</a>
                              </div>
                            </div>

                          </div>
                          <div id="error" v-show="error != null">
                          </div>

                      </div>
                    </div>
                 
                </div>
            </div>
        </div>
    </div>
</div>

 <!-- Load Vue script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.min.js"></script>
<!-- On load, init Vue -->

<script>
  // Vue.config.debug = true
  // Create a quiz object with a title and two questions.
  // A question has one or more answer, and one or more is valid.

  var questions = (function () {
    var json = null;
    $.ajax({
        'async': false,
        'global': false,
        'url': '{{ route('assessments.quiz', $assessment) }}',
        'dataType': "json",
        'success': function (data) {
            json = data;
        }
    });
    return json;
   })(); 

  var quiz = {
    title: '{{ $assessment->name }}',
    questions: questions,
    tooManyAttempts: "<h4><span class='bg-danger'>Sorry! You cannot take this assessment again. You have either reached the limit of 3 attempts, or have already passed this assessment. Please click on the Help button to be able to try again.</span></h4>",
  };

  new Vue({
    el: '#assessment-container',
    //http: {
    //        emulateJSON: true,
    //        emulateHTTP: true
    //},
    data: {
      quiz: quiz,
      questionIndex: 0, // Store current question index
      userResponses: {}, // Initialize a hash to keep track of questions, and user responses to each question
      score: 0, // Final score to be displayed to user
      results: null, // Results after submitting score
    },
    // The view will trigger these methods on click
    methods: {
      // Go to next question
      next: function(question) {
        if(this.userResponses[question] == null){
          alert("Please choose an answer");
        }else{
          this.questionIndex++;  
        }
        // console.log(this.userResponses);
      },
      begin: function(e) {
        e.preventDefault();
        response = Vue.http.post('{{ route('assessments.begin', $assessment) }}').then((response) => {
          // success callback
          if(response["body"] === "1"){
            $("#instructions").hide();
            $("#assessment").show();  
          }else{
            $("#instructions").html(quiz.tooManyAttempts);
          }
        }, (response) => {
          // error callback
          alert("Error. Please try again, or contact the administrator.");
        });
        return;
      },
      submitScore: function(e) {
        e.preventDefault();
        Vue.http.post('{{ route('assessments.check', $assessment) }}', this.userResponses).then((response) => {
          // success callback
          this.results = response.json().results;
          this.score = response.json().score;
          this.error = response.json().error;
          if(this.error != null){
            $("#error").html(quiz.tooManyAttempts);
          }
        }, (response) => {
          // error callback
          alert("Error. Please try submitting again, or contact the administrator.");
        });
        return;
      }
    }
  });
</script>
<script>
// Get IE or Edge browser version
var version = detectIE();

if (version === false) {

} else if (version >= 12) {
  // document.getElementById('instructions').innerHTML = 'Edge ' + version;
} else {
  document.getElementById('instructions').innerHTML = '<h4>You are using Internet Explorer ' + version + ', which is not supported. Please use a modern browser such as Edge, Firefox, or Chrome to take this assessment. Click the Help button if you have any questions or need help.</h4>';

}

// add details to debug result
// document.getElementById('details').innerHTML = window.navigator.userAgent;

/**
 * detect IE
 * returns version of IE or false, if browser is not Internet Explorer
 */
function detectIE() {
  var ua = window.navigator.userAgent;

  // Test values; Uncomment to check result …

  // IE 10
  // ua = 'Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)';
  
  // IE 11
  // ua = 'Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko';
  
  // Edge 12 (Spartan)
  // ua = 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0';
  
  // Edge 13
  // ua = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Safari/537.36 Edge/13.10586';

  var msie = ua.indexOf('MSIE ');
  if (msie > 0) {
    // IE 10 or older => return version number
    return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
  }

  var trident = ua.indexOf('Trident/');
  if (trident > 0) {
    // IE 11 => return version number
    var rv = ua.indexOf('rv:');
    return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
  }

  var edge = ua.indexOf('Edge/');
  if (edge > 0) {
    // Edge (IE 12+) => return version number
    return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
  }

  // other browser
  return false;
}
</script>
@endsection