@extends('layouts.app')
@section('content')
@include('common/dashboard-top-nav')

<!-- Breadcrumb Selection -->
<section id="breadcrmb">
  <div class="container">
    <div class="row">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="#"><i class="fas fa-home"></i></a></li>
          <li class="breadcrumb-item"><a href="#">Exams</a></li>
          <li class="breadcrumb-item active" aria-current="page">{{ $exam_info->exam_name }}</li>
        </ol>
      </nav>
    </div>
  </div>
</section>

<!-- Exam Title Section-->
<section id="exam_title">
  <div class="container">
    <div class="row">
      <div class="col md">
        <h2 class="text-left">{{ $exam_info->exam_name }}</h2>
      </div>
      <div class="col md">
        <h2 id="clockdiv" class="text-right">00:00:00</h2>
        <!-- <div id="clockdiv" class="text-right"></div> -->
        <div id="examTime" style="display: none">{{ $exam_info->examTime }}</div>
      </div>
    </div>
  </div>
</section>

<!-- Exam Table Section -->

<section id="exam_table_description">
  <div class="container">
    <div class="row">
      <div class="col-md">
        <table class="table table-borderless">
          <thead>
            <tr>
              <th scope="col" colspan="2" class="top-radius">{{ $exam_info->categoryname }}</th>
            </tr>
          </thead>
          <tbody id="question_content">
                        <tr class="">
              <td id="question_count" class="question_number" colspan="2">Question <span>01</span> / {{ $arraylen }}</td>
            </tr>
            <form id="msdp_general_mcq_exam_result" action="{{ url('/') }}/examResult/storeMemoryTest" method="post">
              {!! csrf_field() !!}
            <input type="hidden" name="exam_name" value="{{$exam_info->exam_name}}" />
            <input type="hidden" name="exam_category_name" value="{{$exam_info->categoryname}}" />  
            <input type="hidden" name="exam_category_row_id" value="{{$exam_info->categoryId}}" />
            <input type="hidden" name="total_question" value="{{$exam_info->total_question}}" />
            <input type="hidden" name="exam_row_id" value="{{$exam_info->exam_row_id}}" />
            <input type="hidden" name="class_row_id" value="{{$exam_info->class_row_id}}" />
            <input id="totaltime" type="hidden" name="totaltime" value="">
            @foreach($exam_questions as $exam_data)
            
            <input type="hidden" name="exam_question_id[]" value="{{$quesId}}" />
            <tr id="question_title_{{ $exam_data->memory_question_row_id }}" class="show_question">
              <td class="question_title" colspan="2">{!! $exam_data->question_title !!}</td>
            </tr>
            <tr id="question_title_attachment_{{ $exam_data->memory_question_row_id }}" class="show_question">
              <td class="text-center" colspan="2">
                @if(isset($exam_data->question_mimetype) && ($exam_data->question_mimetype == 2) && isset($exam_data->question_title_attachment) && !empty($exam_data->question_title_attachment))
                  <img src="{{ asset('/') }}public/question_attachment/{{$exam_data->question_title_attachment}}" alt="">
                @endif
              </td>
            </tr>
            <tr id="question_answer_title_{{ $exam_data->memory_question_row_id }}" class="show_question">
              <td class="question_answer_title" colspan="2">{!! $exam_data->question_title_answer !!}</td>
            </tr>
            <tr id="question_answer_title_attachment_{{ $exam_data->memory_question_row_id }}" class="show_question">
              <td class="text-center" colspan="2">
                @if(isset($exam_data->question_mimetype) && ($exam_data->question_mimetype == 2) && isset($exam_data->question_title_attachment_answer) && !empty($exam_data->question_title_attachment_answer))
                  <img src="{{ asset('/') }}public/question_attachment/{{$exam_data->question_title_attachment_answer}}" alt="">
                @endif
              </td>
            </tr>
            <tr id="question_ans1_{{ $quesId }}" class="show_question">
              <td class="answer_option text-left" answer="answer_1" ques_id="{{ $quesId }}"><label><span class="options" ques_id="{{ $quesId }}">A<input type="radio" id="option_a_{{$quesId}}" name="question_answer[{{ $quesId }}]" value="1" /></span>
              @if(isset($exam_data->answer_type) && ($exam_data->answer_type == 2))
                <img src="{{ asset('/') }}public/question_attachment/{{$exam_data->answer_1}}" alt="">
              @else
                {!! $exam_data->answer_1 !!}
              @endif
              </label>
              </td>

              <td class="answer_option text-left" answer="answer_2" ques_id="{{ $quesId }}"><label><span class="options" ques_id="{{ $quesId }}">B<input type="radio" name="question_answer[{{ $quesId }}]" value="2" id="option_b_{{$quesId}}" /></span>
              @if(isset($exam_data->answer_type) && ($exam_data->answer_type == 2))
                <img src="{{ asset('/') }}public/question_attachment/{{$exam_data->answer_2}}" alt="">
              @else
                {!! $exam_data->answer_2 !!}
              @endif
              </label>
              </td>
            </tr>
            <tr id="question_ans2_{{ $quesId }}" class="show_question">
              <td class="answer_option text-left" answer="answer_3" ques_id="{{ $quesId }}"><label><span class="options" ques_id="{{ $quesId }}">C<input type="radio" id="option_c_{{$quesId}}" name="question_answer[{{ $quesId }}]" value="3" /></span>
              @if(isset($exam_data->answer_type) && ($exam_data->answer_type == 2))
                <img src="{{ asset('/') }}public/question_attachment/{{$exam_data->answer_3}}" alt="">
              @else
                {!! $exam_data->answer_3 !!}
              @endif
              </label>
              </td>

              <td class="answer_option text-left" answer="answer_4" ques_id="{{ $quesId }}"><label><span class="options" ques_id="{{ $quesId }}">D<input type="radio" id="option_d_{{$quesId}}" name="question_answer[{{ $quesId }}]" value="4" /></span>
              @if(isset($exam_data->answer_type) && ($exam_data->answer_type == 2))
                <img src="{{ asset('/') }}public/question_attachment/{{$exam_data->answer_4}}" alt="">
              @else
                {!! $exam_data->answer_4 !!}
              @endif
              </label>
              </td>
            </tr>
            <tr id="show_prevnext_{{ $quesId }}" class="show_question">
                            <!--td class="text-left prev_next">
                @if($key != 0)
                  <a href="javascript:void(0)" class="btn exam_btn prev_btn" ques_id="{{ $quesId }}">Previous</a>
                @endif
              </td-->
              <td class="text-right prev_next">
                @if($key != ($arraylen-1))
                  <a href="javascript:void(0)" class="btn exam_btn next_btn" ques_id="{{ $quesId }}">Next</a>
                @else
                  <a href="javascript:void(0)" class="btn exam_btn next_btn_summary">Next</a>
                @endif
              </td>
            </tr>
            @endforeach
            </form>
          </tbody>

          <tbody class="showSummery">
            <tr class="">
              <td class="" style="padding-top: 30px;" colspan="2">
                <table class="table  table-hover table-borderless mini_table">
                  <thead class="thbg">
                    <tr class="">
                      <th class="" style="border-radius: 12px 0px 0px 0px;" scope="col">#</th>
                      <th scope="col">Question</th>
                      <th scope="col" style="border-radius: 0px 12px 0px 0px;">Your Answer</th>
                    </tr>
                  </thead>
                  <tbody class="" id="">
                                        @foreach($exam_questions as $exam_data)
                    <tr>
                      <td> {{ $slcount }}</td>
                      <td style="width:70%;">
                        <span>{!! $exam_data->question_title !!}</span>
                        @if(isset($exam_data->question_mimetype) && ($exam_data->question_mimetype == 2) && isset($exam_data->question_title_attachment) && !empty($exam_data->question_title_attachment))
                          <img src="{{ asset('/') }}public/question_attachment/{{$exam_data->question_title_attachment}}" alt="" style="max-width:500px;">
                        @endif
                        <br />
                        <span>{!! $exam_data->question_title_answer !!}</span><br />
                        @if(isset($exam_data->question_mimetype) && ($exam_data->question_mimetype == 2) && isset($exam_data->question_title_attachment_answer) && !empty($exam_data->question_title_attachment_answer))
                          <img src="{{ asset('/') }}public/question_attachment/{{$exam_data->question_title_attachment_answer}}" alt="" style="max-width:500px;">
                        @endif
                      </td>
                      <td id="ques_ans_sum_{{ $exam_data->memory_question_row_id }}" style="width:30%;"></td>
                    </tr>
                                        @endforeach
                  </tbody>
                </table>
              </td>
            </tr>
            <tr class="">
              <td class="text-center prev_nxt_btn" colspan="2">
                <!--a href="javascript:void(0)" class="btn exam_btn btn_back">Back</a-->
                <a href="javascript:void(0)" class="btn exam_btn next_btn exam_final_submit">Submit</a>
              </td>
            </tr>
          </tbody>


          <thead>
            <tr>
              <th scope="col" colspan="2" class="text-left overview_head_left_pad"><a class="white_color" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">Overview <i class="fa fa-angle-down"></i><i class="fa fa-angle-up"></i></a></th>
            </tr>
          </thead>
          <tbody class="collapse" id="collapseExample">
            <tr class="text-center">
              <td class="overview_padding" colspan="2">
                                @foreach($question_id as $key=>$val)
                                  <a id="overview_{{ $val }}" class="btn btn-primary orview_btn_red" ques_id="{{ $val }}" href="javascript:void(0)">{{ $ovcount }}</a>
                @if($ovcount == 15)
                  <div class="overview_break"></div>
                @endif
                                @endforeach
              </td>
              <tr class="text-center">
                <td class="overview_padding" colspan="2">
                  <span class="btn promo_answered"></span> <span>Answerd</span>
                  <span class="btn promo_not_answered"></span> <span>Not Answerd</span>
                </td>
              </tr>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>

<script>
        
        let seconds = 0,
            minutes = 0,
            hours = 0,
            t,
            clockdiv = document.getElementById('clockdiv');

        function add() {
            seconds++;
            if (seconds >= 60) {
                seconds = 0;
                minutes++;
                if (minutes >= 60) {
                    minutes = 0;
                    hours++;
                }
            }

            clockdiv.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + "h" + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + "m" + ":" + (seconds > 9 ? seconds : "0" + seconds) + "s";

            timer();
        }

        function timer() {
            t = setTimeout(add, 1000);
        }
        timer();


        /* Start */
        window.load = timer;

        /* Stop */
        // clockdiv.onclick = function() {
        //     clearTimeout(t);
        //     let totalTime = clockdiv.textContent.split(":");
        //     //make integer
        //     totalTime = totalTime.map(m => m.replace(/h|m|s/gi, ""));
        //     alert(`you took ${totalTime[0]}hour ${totalTime[1]}minute ${totalTime[2]}second`);
        // }
    </script>

<script type="text/javascript">
  $(document).ready(function(){
    history.pushState(null, null, location.href);
    history.back();
    history.forward();
    window.onpopstate = function () {
        history.go(1);
    };
    $(document).on("keydown", function (e) {
        if (e.key == "F5" || e.key == "F11" || 
            (e.ctrlKey == true && (e.key == 'r' || e.key == 'R')) || 
            e.keyCode == 116 || e.keyCode == 82) {
              e.preventDefault();
        }
    });
    $('.show_question').hide();
    $('.showSummery').hide();
    var qarray = null;
    var qlen = qarray.length;
    //console.log(jQuery.type(qarray));
    var i=0;
    $('#question_title_'+qarray[i]).show();
    $('#question_title_attachment_'+qarray[i]).show();
    timer_timeout = setTimeout(function () {
      $('#question_title_'+qarray[i]).hide();
      $('#question_title_attachment_'+qarray[i]).hide();  
      /* for memory test */
      $('#question_answer_title_'+qarray[i]).show();
      $('#question_answer_title_attachment_'+qarray[i]).show();
      $('#question_ans1_'+qarray[i]).show();
      $('#question_ans2_'+qarray[i]).show();
      $('#show_prevnext_'+qarray[i]).show();
      }, 5000);
    

    function leftPad(value, length) { 
      return ('0'.repeat(length) + value).slice(-length); 
    }

    $('.options').click(function() {
      var ques_id = $(this).attr('ques_id');
      $('#question_ans1_'+ques_id+' .options').removeClass('options-selected');
      $('#question_ans2_'+ques_id+' .options').removeClass('options-selected');
      $(this).addClass('options-selected').find('input').attr('checked', 'checked');
    });

    $('.next_btn').on("click", function() {
      $('.show_question').hide();
      var ques_id = $(this).attr('ques_id');
      var questioncount = $('#question_count span').text();
      var qnumber = parseInt(questioncount)+1;
      //console.log(jQuery.type(questioncount));

      $('#question_count span').html(leftPad(qnumber, 2));
      $.each(qarray, function(key, val){
        if(val == ques_id) {
          $('#question_title_'+qarray[key+1]).show();
          $('#question_title_attachment_'+qarray[key+1]).show();
          timer_timeout = setTimeout(function () {
          /* time based memory test */
          $('#question_title_'+qarray[key+1]).hide();
          $('#question_title_attachment_'+qarray[key+1]).hide();
          $('#question_answer_title_'+qarray[key+1]).show();
          $('#question_answer_title_attachment_'+qarray[key+1]).show();
          $('#question_ans1_'+qarray[key+1]).show();
          $('#question_ans2_'+qarray[key+1]).show();
          $('#show_prevnext_'+qarray[key+1]).show();
          }, 5000);
        }
      }); 
    });

    $('.prev_btn').on("click", function() {
      $('.show_question').hide();
      var ques_id = $(this).attr('ques_id');
      var questioncount = $('#question_count span').text();
      var qnumber = parseInt(questioncount)-1;
      $('#question_count span').html(leftPad(qnumber, 2));
      $.each(qarray, function(key, val){
        if(val == ques_id) {
          $('#question_count span').text();
          $('#question_title_'+qarray[key-1]).hide();
          $('#question_title_attachment_'+qarray[key-1]).hide();
          $('#question_answer_title_'+qarray[key-1]).show();
          $('#question_answer_title_attachment_'+qarray[key-1]).show();
          $('#question_ans1_'+qarray[key-1]).show();
          $('#question_ans2_'+qarray[key-1]).show();
          $('#show_prevnext_'+qarray[key-1]).show();
        }
      }); 
    });

    $('.next_btn_summary').on("click", function() {
      $('#question_content').hide();
      $('.showSummery').show();
    });

    
    $('.btn_back').on("click", function() {
      $('#question_content').show();
      $('.showSummery').hide();
      var questioncount = $('#question_count span').text();
      var qnumber = parseInt(questioncount);
      $('#question_count span').html(leftPad(qnumber, 2));
      $('#question_count span').text();
      $('#question_title_'+qarray[qnumber-1]).show();
      $('#question_title_attachment_'+qarray[qnumber-1]).show();
      $('#question_answer_title_'+qarray[key-1]).show();
      $('#question_answer_title_attachment_'+qarray[key-1]).show();
      $('#question_ans1_'+qarray[qnumber-1]).show();
      $('#question_ans2_'+qarray[qnumber-1]).show();
      $('#show_prevnext_'+qarray[qnumber-1]).show();
    });

    $('.answer_option').on("click", function() {
        var ques_id = $(this).attr('ques_id');
        var answer = $(this).attr('answer');
        //console.log(ques_id+' '+answer);
        $('#overview_'+ques_id).removeClass("orview_btn_red");
        $('#overview_'+ques_id).addClass("orview_btn");
        $.ajax({
            type: 'GET',
            url: "{{ url('/memoryGetAnswer') }}",
            data: {
                ques_id: ques_id,
                answer: answer
            },
            success: function(data){
                $('#ques_ans_sum_'+ques_id).html(data);
                if(typeof MathJax !== 'undefined') {MathJax.Hub.Queue(["Typeset",MathJax.Hub]);}
            }
        });
    });

    $('.exam_final_submit').on("click", function(){
      let totalTime = clockdiv.textContent.split(":");
      //make integer
      totalTime = totalTime.map(m => m.replace(/h|m|s/gi, ""));
      //alert(`you took ${totalTime[0]}hour ${totalTime[1]}minute ${totalTime[2]}second`);
      $("#totaltime").val(totalTime[1]+':'+totalTime[2]);
      $("#msdp_general_mcq_exam_result").submit();
    });

  });
</script>
@endsection