@extends('layout.default')
@section('content')

@section('page_toolbar')

<button type="button" class="btn btn-danger px-2 font-weight-bold btn-sm"  onclick="quizUpdate({{$quiz_id}})">
    <!-- <i class="icon-1x fas fa-plus"></i>  -->
    Update Quiz
</button>
&nbsp;<a class="btn btn-success px-2 font-weight-bold btn-sm mr-2"  href="{{ url('admin/quiz')}}">
<i class="fas fa-angle-double-left" aria-hidden="true"></i> Back
</a>
@endsection
<div id="overlay" style="display:none;">
  <div class="loader">
          <span></span>
      <span></span>
      <span></span>
      <span></span>
  </div>
</div>

<!--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 class="col-xl-12">
        <!--begin::Nav Panel Widget 2-->
<div class="card card-custom gutter-b">
    <!--begin::Body-->
    <div class="card-body ">
        <div class="row">
          <div class="d-flex align-items-center">
           @foreach($countries as $key=>$country)
            <button type="button" class="btn btn-danger font-weight-bold btn-md mr-2 btn-cn btn-cn-{{ $country->id }}" onclick="setCountry(this.id)" id="{{ $country->id }}"> {{ $country->nicename }}  </button>
           @endforeach
          </div>
        </div>  
        <div class="row mt-4">
           <div class="d-flex align-items-center">
             @foreach($subjects as $key=>$subject)
               <button type="button" class="btn btn-primary font-weight-bold btn-md mr-2 btn-sb btn-sb-{{ $subject->id }}" onclick="setSubject(this.id)" id="{{ $subject->id }}"> {{ $subject->name }}  </button>
            
              @endforeach
           </div> 
        </div>   
         <div class="row mt-4">
            <div class="d-flex align-items-center curriculum-head">
               
          </div>
        </div>  
        <div class="row mt-4">
            <div class="d-flex align-items-center topic-head">
               
          </div>
        </div>  
         <div class="row mt-4">
            <div class="d-flex align-items-center syll-head">
               
          </div>
        </div>    
    

    </div>
    <!--end::Body-->
</div>
<!--begin::Nav Panel Widget 2-->
    </div>
</div>



<div class="card card-custom">
    <div class="card-body">
    <div class="box-body">
        <div class="row syllubus-div">
          
        </div>
        
            <div class="question-div">
              
            </div>

            <div class="form-group row">
                <label for="inputEmail3" class="col-sm-10 control-label">&nbsp; </label>
                <div class="col-sm-2 qstn-btn-wrapper">
                  <input type="hidden" name="country_id" id="country_id">
                  <input type="hidden" name="subject_id" id="subject_id">
                  <input type="hidden" name="curriculum_id" id="curriculum_id">
                  <input type="hidden" name="question_type" id="question_type">

                 
                </div>
            </div>
            
     
        </div>
  
    </div>
</div>
 </form>
<!--end::Content-->

<div class="modal fade" id="student_view_modal" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-md">
        <div class="modal-content">
            <div class="modal-header">
                 <h4 class="modal-title"> Question</h4>
                 <button type="button" class="close btn btn-icon btn-danger btn-sm" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body" id="student_view">
               
            </div> 
            <div class="modal-footer" style="border:0">
                 <div class="col-sm-12">
                      <div class="form-group row">
                          <label for="inputEmail3" class="col-sm-10 control-label">&nbsp; </label>
                          <div class="col-sm-2">
                          
                          <button type="button" class="btn btn-success font-weight-bold" data-dismiss="modal">Continue</button>
                             
                          </div>
                      </div>
                  </div>
              </div>

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

@endsection

@section('stylesheets')
<link rel="stylesheet" href="{{ asset('admin/css/image_upload.css') }}"/>
<style type="text/css">
 #answer_tb td:hover{
    cursor:move;
    }
</style>
@endsection

@section('scripts')
<script src="https://cdn.tiny.cloud/1/mkusqx9pnphip6lpkm2qrhpo2xcuvb32rz6203dlysxn93rm/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
<script src="{{ asset('js/pages/question/question.js') }}"/></script>

<script>
 var questionUrl = "{{ url('admin/questions') }}"; 
$('#overlay').fadeIn(); 

$(document).ready(function () {
  setCountry(1);
  setSubject(1);

});

function setCountry(country_id){
   $('#country_id').val(country_id);
   $('.btn-cn').removeClass('btn-active');
   $('.btn-cn-'+country_id).addClass('btn-active');
   $.ajax({
           url: "{{ url('common/getCurriculums') }}/"+country_id,
           type: "GET",
           dataType: "html"
   }).done(function (data) {
       $(".curriculum-head").html(data);
       cur_id = $(".curriculum-head button:first").attr('id');
       $("#curriculum_id").val(cur_id);
       $('.btn-cur').removeClass('btn-active');
      $('.btn-cur-'+cur_id).addClass('btn-active');
       setTopics();
       

   })
}

function setSubject(subject_id){
   $('#subject_id').val(subject_id);
   $('.btn-sb').removeClass('btn-active');
   $('.btn-sb-'+subject_id).addClass('btn-active');
    setTopics();
}

function setCurriculum(curriculum_id){
   $('#curriculum_id').val(curriculum_id);
   $('.btn-cur').removeClass('btn-active');
   $('.btn-cur-'+curriculum_id).addClass('btn-active');
    setTopics();
}


function setTopics(){
  var country_id = $("#country_id").val();
  var curriculum_id = $("#curriculum_id").val();
  var subject_id = $("#subject_id").val();
  var token = "{{ csrf_token() }}";
  if(country_id!='' && curriculum_id!='' && subject_id!=''){
      $.ajax({
               url: "{{ url('common/getTopicCodes') }}",
               type: "POST",
               data:{'country_id':country_id,'curriculum_id':curriculum_id,'subject_id':subject_id,_token:token},
               dataType: "html"
       }).done(function (data) {
            $(".topic-head").html(data);
            // top_id = $(".topic-head button:first").attr('id');
            // $("#topic_id").val(top_id);
            // $('.btn-top').removeClass('btn-active');
            // $('.btn-top-'+top_id).addClass('btn-active');
            getSyllubus();
            $(".syllubus-div").show();
            $(".question-div").hide();
       })
   }    

}

function getSyllubus(){
  var country_id = $("#country_id").val();
  var curriculum_id = $("#curriculum_id").val();
  var subject_id = $("#subject_id").val();
  var token = "{{ csrf_token() }}";
  if(country_id!='' && curriculum_id!='' && subject_id!=''){
      $.ajax({
               url: "{{ url('admin/quiz/getSyllubus') }}",
               type: "POST",
               data:{'country_id':country_id,'curriculum_id':curriculum_id,'subject_id':subject_id,_token:token},
               dataType: "html"
       }).done(function (data) {
            $(".syllubus-div").html(data);
            // top_id = $(".topic-head button:first").attr('id');
            // $("#topic_id").val(top_id);
            // $('.btn-top').removeClass('btn-active');
            // $('.btn-top-'+top_id).addClass('btn-active');
            $('#overlay').fadeOut();

       })
  }

}

function gotoTopic(id){
  var scrollPos =  $("#topic-"+id).offset().top;
  $(window).scrollTop(scrollPos);
}


function createQuestion(unit_id){
  $('#overlay').fadeIn();
  var country_id = $("#country_id").val();
  var curriculum_id = $("#curriculum_id").val();
  var subject_id = $("#subject_id").val();
  var unit_id = unit_id;
  var token = "{{ csrf_token() }}";
  $.ajax({
           url: "{{ url('admin/questions/makeQuestion') }}",
           type: "POST",
           data:{'country_id':country_id,'curriculum_id':curriculum_id,'subject_id':subject_id,'unit_id':unit_id,_token:token},
           dataType: "json"
   }).done(function (data) {
        if(data.flagError){
          showAlert(data.message, "error");
        }else{
          console.log(data);
          $(".question-div").html(data.html);
          $(".syllubus-div").hide();
          $(".question-div").show();
          $(".syll-head").html(data.sel_syll);
          var top_id = data.topic_id;
          $('.btn-top').removeClass('btn-active');
          $('.btn-top-'+top_id).addClass('btn-active');
          init();
          chooseQuestion(1);

        }

   })
  
}

  $("#mark").keypress(function(e) {
        $(this).val(Math.min(5, Math.max(1, $(this).val())));
      });

function quizUpdate(quiz_id) {

var check_quizs     = [];
var check_videos    = [];
var quiz_id         = quiz_id;

$('input:checkbox.checkquiz').each(function () {
   var sThisVal = (this.checked ? check_quizs.push($(this).val()) : "");
});

$('input:checkbox.checkvideo').each(function () {
   var sThisVal = (this.checked ? check_videos.push($(this).val()) : "");
});


if( (check_quizs.length !=0) || (check_videos.length !=0) ){
  $.ajax({
      url: "{{ url('admin/quiz/set-units') }}" ,  type: 'POST',
      data: {"check_quizs" : check_quizs, 'check_videos' : check_videos, 'quiz_id' : quiz_id},
  }).done(function (data) {
      if(data.status == 'success'){
        showAlert(data.message, "success");
        setCountry(1);
        // location.reload();
      }else{
        alert("Error! Please try again.")
      }
  });
}else{
    alert("Please select any units !");
}

}



</script>
@endsection