@extends('layouts.app')

@section('style')
    <link rel="stylesheet" href="{{ asset('assets/front/assets/css/countrySelect.css') }}" />
@endsection

@section('sub-header')
    <div class="job-wrap">
        <h4 class="">{{ $examDetails->jobDetails->jobTitle->name ?? 'N/A' }}</h4>
        <ul>
          <li><img src="images/clock.png" alt="">Timer: <strong id="time_count"><span class="time_block">15</span>min <span class="time_block">00</span> sec</strong></li>
        </ul>
    </div>
    {{-- <p class="salary">Online Question Paper: <strong>Set A</strong></p> --}}
@endsection

@section('content')


    <div class="container">
        <div class="row">

            <div class="col-lg-8 offset-lg-2">

                {{-- <div id="question_sug" class="alert alert-warning mb-5" role="alert">
                    <p>Exam Time: {{$examDuration}} Minutes</p>
                    <p>The value of each question is equal to (10 * 1) = 10 numbers.</p>
                    <p>You are being monitored by CCTV cameras, any kind of misconduct, answering with Google search or talking to each other may be considered as cancellation of your exam. </p>
                </div> --}}
                <div id="question_end" class="alert alert-danger mb-5 p-4" role="alert">
                    <h4 class="mb-2">Time is Up!</h4>
                    <p>We are sorry to say, you are unable to answer all questions within due time. But your given answers will forward to our HR. If you need any support pleasse contact with our support team.</p>
                </div>

                <div id="wizard_container">
                    <div id="top-wizard">
                    <!-- <div id="progressbar" class="mb-5"></div> -->
                    </div>
                    <!-- /top-wizard -->
                    <form id="wrapped" method="POST" enctype="multipart/form-data" action="{{ route('mbtiExamPost') }}">
                        {{ csrf_field() }}

                        <input id="website" name="website" type="text" value="">
                        <input id="candidate_id" name="candidate_id" type="number" value="{{$candidate->id}}" hidden>
                        <input id="job_id" name="job_id" type="number" value="{{ $jobId }}" hidden>

                        <!-- Leave for security protection, read docs for details -->
                        <div id="middle-wizard">
                            @foreach ($candidate_mbti_questions as $key => $item)
                                @php
                                    $answer =  json_decode(json_encode(json_decode($item->ans_parameter)))
                                @endphp

                                <div class="step {{ $loop->index+1==70 ? 'submit' : ''}}">
                                    <div class="card">
                                        <div class="card-body">
                                            <h3 class="main_question mt-3 mb-4">
                                                <strong><span class="text-primary">{{$loop->index+1}}</span>/{{$candidate_mbti_questions->count()}}</strong>
                                                {{ucfirst($item->question)}}?
                                            </h3>
                                            <div class="form-group">
                                                <label class="container_radio version_2">{{ucfirst($answer->A)}}
                                                    <input type="radio" name="que[{{$loop->index+1}}]" value="A" class="required"
                                                           {{ isset($questionIdArrayAnswer[$loop->index+1]) && $questionIdArrayAnswer[$loop->iteration] == "A" ? "checked" : "" }} required>
                                                    <span class="checkmark"></span>
                                                </label>
                                            </div>
                                            <div class="form-group">
                                                <label class="container_radio version_2">{{ucfirst($answer->B)}}
                                                    <input type="radio" name="que[{{$loop->index+1}}]" value="B" class="required"
                                                           {{ isset($questionIdArrayAnswer[$loop->index+1]) && $questionIdArrayAnswer[$loop->iteration] == "B" ? "checked" : "" }} required>
                                                    <span class="checkmark"></span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach

                        </div>
                        <!-- /middle-wizard -->
                        <div id="bottom-wizard">
                            <button type="button" name="backward" class="btn btn-secondary backward">Prev</button>
                            <button type="button" name="forward" class="btn btn-primary forward" id="forward">Next</button>
                            <button type="submit" name="process" class="btn btn-success submit">Submit</button>
                        </div>
                        <!-- /bottom-wizard -->
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('script')

<script src="{{ asset('assets/front/assets/js/jquery.min.js') }}"></script>
<script src="{{ asset('assets/front/assets/js/popper.min.js') }}"></script>
<script src="{{ asset('assets/front/assets/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('assets/front/assets/js/jquery-ui.min.js') }}"></script>

<script src="{{ asset('assets/front/assets/js/jquery.wizard.js') }}"></script>
<script src="{{ asset('assets/front/assets/js/jquery.validate.js') }}"></script>

<script type="text/javascript">
    $(window).on('load', function(){
      $('#preloader').fadeOut('slow',function(){$(this).remove();});
    });
    $(document).ready(function() {
      'use strict';
      /*-------------------------------------
      Sticky NabBar
      -------------------------------------*/
      $(window).on('scroll', function () {
        var scroll = $(window).scrollTop();

        if (scroll >= 1) {
          $('.ugf-nav-wrap').addClass('fixed');
        } else {
          $('.ugf-nav-wrap').removeClass('fixed');
        }
      });
    });

    $(function() {
        $("#forward").on("click", function() {
            $.ajax({
                type: 'post',
                url: "{{ route('mbtiExamSinglePost') }}",
                data: $('form').serialize(),
                success: function() {
                    console.log('Submitted Successfully .')
                }
            });

        });
    });

    // Time Count
    $("#question_end").hide();
    function countdown( elementName, minutes, seconds )
    {
      var element, endTime, hours, mins, msLeft, time, timeCount = 0;
      function twoDigits( n ) {
        return (n <= 9 ? "0" + n : n);
      }
      function updateTimer() {
        msLeft = endTime - (+new Date);
        if ( msLeft < 1000 ) {
          element.innerHTML = "Time is up!";
          $("#wizard_container").hide();
          $("#question_sug").hide();
          $("#question_end").show();
          setTimeout(function() {
            $('form#wrapped').submit();
          }, 5000);
        } else {
          time = new Date( msLeft );
          hours = time.getUTCHours();
          mins = time.getUTCMinutes();
          element.innerHTML = "<span class='time_block'>" + (hours ? hours + ':' + twoDigits( mins ) : mins) + "</span> min <span class='time_block'>" + twoDigits( time.getUTCSeconds() ) + "</span> seconds";
          setTimeout( updateTimer, time.getUTCMilliseconds() + 500 );
        }
          timeCount++;
          if(timeCount > 5) {
              timeCount = 0;
              $(function() {
                  $.ajax({
                      type: 'post',
                      url: "{{ route('mbtiExamUpdateTime') }}",
                      data: $('form').serialize(),
                      success: function() {
                          console.log('Submitted Successfully .')
                      }
                  });
              });

          }
      }

      element = document.getElementById( elementName );
      endTime = (+new Date) + 1000 * (60*minutes + seconds) + 500;
      updateTimer();
    }
    countdown( "time_count", {{ $examDuration }}, 0 );
    /*  Wizard */
    jQuery(function ($) {
      "use strict";
      $('form#wrapped').attr('action', '{{route("mbtiExamPost")}}');
      $("#wizard_container").wizard({
        stepsWrapper: "#wrapped",
        submit: ".submit",
        beforeSelect: function (event, state) {
          if ($('input#website').val().length != 0) {
            return false;
          }
          if (!state.isMovingForward)
            return true;
          var inputs = $(this).wizard('state').step.find(':input');
          return !inputs.length || !!inputs.valid();
        }
      }).validate({
        errorPlacement: function (error, element) {
          if (element.is(':radio') || element.is(':checkbox')) {
            error.insertBefore(element.next());
          } else {
            error.insertAfter(element);
          }
        }
      });
      //  progress bar
      $("#progressbar").progressbar();
      $("#wizard_container").wizard({
        afterSelect: function (event, state) {
          $("#progressbar").progressbar("value", state.percentComplete);
          $("#location").text("(" + state.stepsComplete + "/" + state.stepsPossible + ")");
        }
      });
        var start_no = {{$start_no}}, i;
        for(i = 0; i < start_no; i++){
            $(".forward").click();
        }
    });
</script>
@endsection