@extends('dashboard.layouts.default')
@section('content')
@push('page-css')
<style>
  #header { display: none!important;}
  body { background: #fff;}
</style>    
@endpush
<div class="qanda sticky-top">
  <div class="container-fluid">
    <div class="row g-2 align-items-center justify-content-center text-center">
      <div class="col-md-3 col-6 order-1 d-flex justify-content-md-start justify-content-center">
        @php
        $url = 'teacher-exam-questions/worksheet-generator/Quizstart';
        @endphp
        <a href="{{url($url)}}" class="btn btn-back me-1 active"><i class='bx bx-chevrons-left'></i></a>
        <!-- <button class="btn btn-new" id="new_question">New Questions</button> -->
      </div>
      <div class="col-md-6 col-12 order-md-2 order-3 text-center">
        <div class="form-group d-flex justify-content-center">
        <input type="hidden" name="_token" value="{{ csrf_token() }}">
          <textarea onkeyup="textAreaAdjust(this)" style="overflow:hidden" type="text" name="question_title" value="{{$display_title}}" class="form-control question_title" placeholder="Insert Title" rows="1">{{$display_title}}</textarea>
        </div>
      </div>
      <div class="col-md-3 col-6 order-md-3 order-2 d-flex justify-content-md-end justify-content-center">
        <div class="btn btn-date me-1">{{date('d/m/Y')}}</div>
        <button class="btn btn-answer active" id="answers_btn">Answers </button>
        <button class="btn btn-new" id="questions_btn" style="display:none;">Questions </button>
      </div>
    </div>
    <input type="hidden" id="current_question_number"/>
  </div>
</div>
<section class="pb-3 min-vh-100" id="ds-3">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div id="div_list">
          <!--begin::Content-->
          @if ($errors->any())
          <div class="alert alert-danger">
            <ul>
              @foreach ($errors->all() as $error)
              <li>{{ $error }}</li>
              @endforeach
            </ul>
          </div>
          @endif
          <form method="post" novalidate="novalidate" id="q_form" name="question_form"
            enctype="multipart/form-data">
            {{ csrf_field() }}
            <div class="row div_questions" id="question-answer-div">
              <div class="col-md-12 no-data-found" style="display:none;">
                <div class="subject-detail-box-section">
                  <div class="listed-section">
                    <h4>No videos and quizzes found</h4>
                  </div>
                </div>
              </div>
              <div class="col-md-12" id="question-div">
                @if(count($questions)<=0)
                <h4>No questions found</h4>
                @else
                {{ csrf_field() }}
                @php
                $i = 1;
                $enable = 0;
                $qno = 1;
                @endphp
                @foreach($questions as $key=>$quest)
                @php
                $curAnswerArray =$answers[$key];
                $answer = mb_convert_encoding($curAnswerArray , 'UTF-8', 'UTF-8');
                $curQuestionIdArray =$question_ids[$key];
                $qId = mb_convert_encoding($curQuestionIdArray , 'UTF-8', 'UTF-8');
                @endphp
                <div class="form-group custom_grp_fm">
                  <div class="question-lnk" data-qid="{{ $qId }}" id="question-{{ $qId }}"><label class="question_section question_sec{{$qId}}"> {{ $qno }}. {!! $quest !!} </label></div>
                  <div class="answer-lnk hideClass answer-{{$qId}}"   style="cursor:pointer;"  data-qid="{{ $qId }}">
                                            {!! $answer !!}
                                            </div>
                </div>
                @php
                $i++;
                $qno++;
                @endphp
                @endforeach
                @endif
              </div>
              @php
              $i = 1;
              $enable = 0;
              @endphp
              </div>
            </div>
            <input type="hidden" id="current_question_number"/>
          </form>
        </div>
      </div>
      <!-- include('layout.bottom-ads') -->
    </div>
  </div>
</section>
@endsection
@section('scripts')
<script>
  function textAreaAdjust(element) {
  element.style.height = "0px";
  element.style.height = (2+element.scrollHeight)+"px";
}
</script>
<script>
  //var questionUrl = "{{ url('revision') }}";
  // $('#overlay').fadeIn();
  //showQuiz();
  $("#new_question").click(function (e) {
      e.preventDefault();
      $("#questions_btn").hide();
      $("#answers_btn").show();
      showQuiz();
  });
  $("#questions_btn").click(function (e) {
      e.preventDefault();
      $(".answer-lnk").removeClass('showClass');
      $(".answer-lnk").addClass('hideClass');
      $("#questions_btn").hide();
      $("#answers_btn").show();
  });
  $("#answers_btn").click(function (e) {
      e.preventDefault();
      $(".answer-lnk").addClass('showClass');
      $(".answer-lnk").removeClass('hideClass');
      $("#answers_btn").hide();
      $("#questions_btn").show();
  });
  function showQuiz() {
      // checkedIds = encodeURIComponent(checkedIds);
      var token = "{{ csrf_token() }}";
      $.ajax({
          url: "{{ url('teacher/lsq/showQuiz') }}",
          type: "POST",
          data: {
              _token: token
          },
          
          dataType: "html"
      }).done(function (data) {
          //$("#div_list").hide();
          $("#question-answer-div").html(data);
          $("#div_questions").show();
      })
  
  }
  
  //$(".question-lnk").click(function (e) {
  $('body').on('click', '.question-lnk', function(e) {
      e.preventDefault();
      //showQuiz();
      var qid = $(this).data("qid");
      $('.question_sec'+qid).attr('style', 'font-size: 26px !important');
      $('.answer-'+qid).removeClass('hideClass');
      $('.answer-'+qid).addClass('showClass');
     // $(".answer-lnk").css('display','block');
      if($('.answer-'+qid).hasClass("hideClass"))
      {
      $('.question_sec'+qid).attr('style', 'font-size: 34px !important');
      }
  });
  $('body').bind('copy paste',function(e) {
            e.preventDefault(); return false; 
  });  
  //$(".answer-lnk").click(function (e) {
  $('body').on('click', '.answer-lnk', function(e) {
      e.preventDefault();
      //showQuiz();
      var qid = $(this).data("qid");
      $('.question_sec'+qid).attr('style', 'font-size: 34px !important');
      $('.answer-'+qid).removeClass('showClass');
      $('.answer-'+qid).addClass('hideClass');
  });
</script>
@endsection