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

@section('page_toolbar')
<a class="btn btn-primary px-2 font-weight-bold btn-sm"  href="{{ url('admin/resources')}}">
<i class="fas fa-list-ul" aria-hidden="true"></i> List Questions & Answers
</a>
&nbsp;<a class="btn btn-success px-2 font-weight-bold btn-sm"  href="{{ URL::previous() }}">
<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 
<style>

.btn-ks{
  background: #187DE4;
  color: #FFF;
}
.btn-ks.btn-active {
  background: #0F9D58;
  color: #FFF;
}
.btn-ks:hover{
   background: #0F9D58;
   color: #FFF !important;
}
</style>

 <form method="post"  novalidate="novalidate"  id="question_form" name="question_form" action="{{ url('admin/questions/makeQuestion') }}" 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($keyStages as $key=>$keyStage)
            <button type="button" class="btn  font-weight-bold btn-md mr-2 btn-ks btn-ks-{{ $keyStage->id }}" onclick="setKeystage(this.id)" id="{{ $keyStage->id }}"> {{ $keyStage->stage_name }}  </button>
           @endforeach
          </div>
        </div>  
        <div id="stage-head">

        </div>
        <!-- <div class="row mt-4">
           <div class="d-flex align-items-center">
             @foreach($examBoards as $key=>$examBoard)
               <button type="button" class="btn btn-primary font-weight-bold btn-md mr-2 btn-eb btn-eb-{{ $examBoard->id }}" onclick="setExamboard(this.id)" id="{{ $examBoard->id }}"> {{ $examBoard->board_name }}  </button>
            
              @endforeach
           </div> 
        </div>   
        <div class="row mt-4">
           <div class="d-flex align-items-center">
             @foreach($comSeps as $key=>$comSep)
               <button type="button" class="btn btn-warning font-weight-bold btn-md mr-2 btn-cs btn-cs-{{ $comSep->id }}" onclick="setComsep(this.id)" id="{{ $comSep->id }}"> {{ $comSep->com_sep_name }}  </button>
            
              @endforeach
           </div> 
        </div>
        <div class="row mt-4">
           <div class="d-flex align-items-center">
             @foreach($resQuestionTypes as $key=>$resQuestionType)
               <button type="button" class="btn btn-info font-weight-bold btn-md mr-2 btn-qt btn-qt-{{ $resQuestionType->id }}" onclick="setQuestiontype(this.id)" id="{{ $resQuestionType->id }}"> {{ $resQuestionType->question_type_name }}  </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-success 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 style="text-align:right;">
<button type="button" class="btn btn-success px-2 font-weight-bold btn-sm "  >
<i class="fas fa-plus" aria-hidden="true"></i> Add More
</button>
</div> -->


<div id="resource-div">
<!-- <div class="card card-custom">
    <div class="card-body">
    <div class="box-body">
        <div class="row syllubus-div1">
          
        </div>
        
            <div class="question-div">
            <style>
          .hidden{
              display: none !important;
              visibility: hidden !important;
          }
          </style>

        

        
        <div class="form-group row">
            <label class="col-xl-2 col-lg-2 col-form-label font-weight-bolder">Question Type Title<span class="text-danger">*</span><i data-toggle="tooltip" title="Click on the Add Blank Space button to add blanks to the question.Example: You can lead a horse to the _______, but you can't make it _______." class="menu-icon icon-md mt-2 mr-2 fa fa-question-circle type_tool_tip hidden"></i></label>
            

            <div class="col-lg-10 col-xl-10" >
                <input type="text" id="question_title" name="question_title" class="form-control" placeholder="Question Type Title..."/>
                <span class="text-danger" id="question_error" style="display:none"></span>
          </div>  
        </div>  
        <div id="qstion_blk"></div>

        
        
        <div class="form-group row qblock">
      
            <label class="col-xl-2 col-lg-2 col-form-label font-weight-bolder">Question Mode<span class="text-danger">*</span></label>
            <div class="radio-inline col-lg-9 col-xl-9">
                
                <label class="radio">
                    <input type="radio" name="question_mode" id="question_mode" value="free" checked>
                    <span></span>
                    Free
                </label>

                <label class="radio">
                    <input type="radio" name="question_mode" id="question_mode" value="paid">
                    <span></span>
                    Paid
                </label>

                <label class="radio">
                    <input type="radio" name="question_mode" id="question_mode" value="visitors">
                    <span></span>
                    Visitors
                </label>
            </div>  
        </div>

        <div class="row">
          
          <div class="col-sm-5 pull-right">
            <div class="form-group">
              <label class="font-weight-bolder">Upload Question</label>
              <i data-toggle="tooltip" title="Upload jpg/png images" class="menu-icon icon-md mt-2 mr-2 fa fa-question-circle type_tool_tip hidden"></i>
              <div></div>
              <div class="custom-file">
                <input type="file" class="custom-file-input question_file" name="qfiles" id="question_file"  accept="application/pdf"/>
                <label class="custom-file-label" for="customFile">Choose PDF</label>
              </div>
            </div>
            
          </div>
          <div class="col-md-12">
             <output id="Filelist">
             </output>
          </div>
        </div>


        <div class="row">
          
          <div class="col-sm-5 pull-right">
            <div class="form-group">
              <label class="font-weight-bolder">Upload Answer</label>
              <i data-toggle="tooltip" title="Upload jpg/png images" class="menu-icon icon-md mt-2 mr-2 fa fa-question-circle type_tool_tip hidden"></i>
              <div></div>
              <div class="custom-file">
                <input type="file" class="custom-file-input question_file" name="afiles" id="answer_file"  accept="application/pdf"/>
                <label class="custom-file-label" for="customFile">Choose PDF</label>
              </div>
            </div>
            
          </div>
          <div class="col-md-12">
             <output id="Filelist2">

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

         

         
         <div class="form-group row qblock">
              <label for="inputEmail3" class="col-sm-10 control-label">&nbsp; </label>
              <div class="col-sm-2">
              
              <button type="button" id="createButton" onclick="questionCreate()" class="btn btn-success font-weight-bold">Create</button>
                 
              </div>
          </div>
            </div>

            <div class="form-group">
                
                <div class="col-sm-2 qstn-btn-wrapper">
                  <input type="hidden" name="keystage_id" id="keystage_id" value="0">
                  <input type="hidden" name="board_id" id="board_id" value="0">
                  <input type="hidden" name="comsep_id" id="comsep_id" value="0">
                  <input type="hidden" name="question_type_id" id="question_type_id" value="0">
                  <input type="hidden" name="subject_id" id="subject_id" value="0">
                 
                </div>
            </div>
            
     
        </div>
  
    </div>
</div> -->

        </div>
        <div class="form-group">
                
                <div class="col-sm-2 qstn-btn-wrapper">
                  <input type="hidden" name="keystage_id" id="keystage_id" value="0">
                  <input type="hidden" name="board_id" id="board_id" value="0">
                  <input type="hidden" name="comsep_id" id="comsep_id" value="0">
                  <input type="hidden" name="question_type_id" id="question_type_id" value="0">
                  <input type="hidden" name="subject_id" id="subject_id" value="0">
                  <input type="hidden" name="levelsix_id" id="levelsix_id" value="0">
                 
                </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>
                          
                          
                          <button type="button" class="btn btn-success font-weight-bold" data-dismiss="modal">Continue</button>
                    
                      </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/resourcesquestion.js') }}"/></script>

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

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

function setKeystage(keystage_id){
   $('#keystage_id').val(keystage_id);
   $('.btn-ks').removeClass('btn-active');
   $('.btn-ks-'+keystage_id).addClass('btn-active');
   $.ajax({
           url: "{{ url('admin/resources/getStages') }}/"+keystage_id,
           type: "GET",
           dataType: "json"
   }).done(function (data) {
    console.log(data);
    if(data.flagError)
    {
      showAlert(data.message, "error");
    }else{
      
        $("#stage-head").html(data.html);
      
        resetstages();
      createQuestion();
    }
       
       
      //  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();
       

   })

  //createQuestion();
  
}

function resetstages()
{
  setExamboard(0);
  setComsep(0);
  setQuestiontype(0);
  setSubject(0);
}

function setExamboard(board_id){
   $('#board_id').val(board_id);
   $('.btn-eb').removeClass('btn-active');
   $('.btn-eb-'+board_id).addClass('btn-active');
    //setTopics();
}

function setComsep(comsep_id){
   $('#comsep_id').val(comsep_id);
   $('.btn-cs').removeClass('btn-active');
   $('.btn-cs-'+comsep_id).addClass('btn-active');
    //setTopics();
}

function setQuestiontype(question_type_id){
   $('#question_type_id').val(question_type_id);
   $('.btn-qt').removeClass('btn-active');
   $('.btn-qt-'+question_type_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 setLevelSix(level_id){
   $('#levelsix_id').val(level_id);
   $('.btn-lv').removeClass('btn-active');
   $('.btn-lv-'+level_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('common/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(){
  $('#overlay').fadeIn();
  var keystage_id = $("#keystage_id").val();
  var board_id = $("#board_id").val();
  var subject_id = $("#subject_id").val();
  //var unit_id = unit_id;
  var token = "{{ csrf_token() }}";
  $.ajax({
           url: "{{ url('admin/resources/makeResources') }}",
           type: "POST",
           data:{'keystage_id':keystage_id,'board_id':board_id,'subject_id':subject_id,_token:token},
           dataType: "json"
   }).done(function (data) {
        if(data.flagError){
          showAlert(data.message, "error");
        }else{
          console.log(data);
          $("#resource-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();
          $('#overlay').fadeOut();
          //chooseQuestion(1);

        }

   })
  
}

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




</script>
@endsection