@extends('layouts.master')

@section('content')
  <div class="container">
    <div id="{{ $pageName }}" class="row d-none">
      <div class="col-md-10 offset-md-1">
        <div class="row progress-container">
          <div class="col">
            <div class="progress" style="height: 30px;">
              <div style="background-color: #E78F08" class="progress-bar progress-bar-striped" role="progressbar"></div>
            </div> 
            <b class="fs-5"></b>   
          </div>
        </div>

        <div class="row mt-4">
          <div class="col-12 text-center question-container">
            <b class="fs-4"></b>
          </div>
          <div class="col-12">
            <div class="row answer-container">
            </div>
          </div>
        </div>

        <div class="row mt-5 text-center">
          <div class="col">
            <button id="btnBack" type="button" class="btn btn-primary btn-lg" disabled>Back</button>
            <button id="btnCurrent" type="button" class="btn btn-primary btn-lg" disabled>Return to Current Question</button>
          </div>
        </div>
      </div>
    </div>
  </div>
@stop

@section('footer-scripts')
  <script type="text/javascript">
    var el = document.getElementById('global-loading')
    el.classList.remove('d-none');
    el.classList.add('d-block');

    $(document).ready(function(index) {
      var savingCount = 0
      var questionDetails = JSON.parse('{!! json_encode($questionDetails) !!}')
      var currentIndex = window._.findIndex(questionDetails, { answer_id: null })

      var questionsLenth = questionDetails.length

      var setQuestion = (index) => {
        var questionIndex = index ?? window._.findIndex(questionDetails, { answer_id: null })
        var question = questionDetails[questionIndex]
        var questionNoAnswerIndex = window._.findIndex(questionDetails, { answer_id: null })
        
        var progress = 100 - Math.ceil((window._.filter(questionDetails, { answer_id: null }).length / questionsLenth) * 100)

        $('.progress-container .progress .progress-bar').css('width', progress + '%')

        if (question) {
          $('.progress-container b').html('Progress: ' + (questionNoAnswerIndex + 1) + ' of ' + questionsLenth)
          $('.question-container b').html((questionIndex + 1) + '. ' + question.question.question_text)
          
          var answers = ''

          window._.each(question.answers, (answer) => {
            var isChecked = answer['id'] === question['answer_id'] ? 'checked' : ''

            answers += '<div class="d-grid col-4 mt-4">' 
            + '<input name="answer" value="' + answer['id'] + '" type="radio" class="btn-check answerInput" id="answer' + answer['id'] + '" autocomplete="off" ' + isChecked + '>'
            + '<label class="btn ' + (isChecked ? 'btn-outline-success' : '') + '" for="answer' + answer['id'] + '">' + answer['answer_text'] + '</label>'
            + '</div>'
          })

          $('.answer-container').html(answers)
        } else {
          $('#global-loading').addClass('d-block').removeClass('d-none')
          $('.progress-container .progress .progress-bar').css('background-color', 'green')
          var interval = setInterval(() => {
            if (savingCount === 0) {
              $.post('/assessee-process-done', () => {
                window.location.replace('/assessee-process-done')
              })
              clearInterval(interval)
            }
          }, 1000)
        }
        
        if (questionIndex !== 0) {
          $('#btnBack').removeAttr('disabled')
        } else {
          $('#btnBack').prop('disabled', 'disabled')
        }

        if (currentIndex !== questionNoAnswerIndex) {
          $('#btnCurrent').removeAttr('disabled')
        } else {
          $('#btnCurrent').prop('disabled', 'disabled')
        }
      }

      setQuestion()

      $('.answer-container').on('click', '.answerInput', () => {
        questionDetails[currentIndex].answer_id = parseInt($('.answerInput:checked').val())

        var payload = {
          questionId: questionDetails[currentIndex].question.id,
          questionType: questionDetails[currentIndex].question.type,
          answerId: questionDetails[currentIndex].answer_id
        }

        savingCount++
        $.post('/assessee-process', payload, (data) => {
          savingCount--
        });

        currentIndex++
        setQuestion(currentIndex)
      })

      $('#btnBack').click(() => {
        currentIndex--
        setQuestion(currentIndex)
      })

      $('#btnCurrent').click(() => {
        currentIndex = window._.findIndex(questionDetails, { answer_id: null })
        setQuestion(currentIndex)
      })

      $('#global-loading').removeClass('d-block').addClass('d-none')
      $('#assessee-process').removeClass('d-none')
    })
  </script>
@endsection