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

@section('page_toolbar')
<a class="btn btn-success px-2 font-weight-bold btn-sm mr-2"  href="{{ URL::previous()}}">
<i class="fas fa-angle-double-left" aria-hidden="true"></i> Back
</a>
@endsection

<!--begin::Content-->
@if ($errors->any())
<div class="alert alert-danger">
  <ul>
    @foreach ($errors->all() as $error)
    <li>{{ $error }}</li>
    @endforeach
  </ul>
</div>
@endif 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet"/>

<div class="card card-custom">
    <div class="card-body">
         <form method="POST"   novalidate="novalidate" id="edit_fill_form" name="edit_fill_form" action="{{ url('admin/questions') }}{{ ($question) ? '/'.$question->id : '' }}">
          {{csrf_field()}}
          {{ ($question) ? method_field('PUT') : '' }}
              <div class="row">
                <div class="col-sm-7"></div>
                <div class="col-sm-5 pull-right">
                  <div class="form-group">
                    <label>Upload Images</label>
                    <div></div>
                    <div class="custom-file">
                      <input type="file" class="custom-file-input" name="files[]" id="files" multiple accept="image/jpeg, image/png, image/gif,"/>
                      <label class="custom-file-label" for="customFile">Choose Image</label>
                    </div>
                  </div>
                  
                </div>
                <div class="col-md-12">
                  <output id="Filelist">
                    @if($questionImages)
                      <ul class="thumb-Images" id="imgList">
                        @foreach($questionImages as $image)  
                          <li>
                            <div class="img-wrap"> <span class="close">×</span>
                            <img class="thumb" title="{{$image->id}}" data-id="{{$image->id}}" src="{{ asset('storage/uploads/questions/'.$image->question_id.'/' . $image->image) }}"></div>
                            <div class="FileNameCaptionStyle">{{$image->id}}</div>
                          </li>
                        @endforeach
                      </ul>
                    @endif
                   </output>
                </div>
            </div>
            <br>
            <!--<div class="row">
              <div class="form-group col-xl-6 col-lg-6">
                <label class="col-xl-3 col-lg-3 col-form-label font-weight-bolder">Country<sup class="redstar">*</sup></label>
                  <div class="col-lg-9 col-xl-9" >
                  {!! Form::select('country_id', $countries , ($question)? $question->country_id: '', ['class' => 'form-control new-drop-section','id'=>'country_id' ,'placeholder' => 'Select Country']) !!}
                </div>
              </div>

               <div class="form-group col-xl-6 col-lg-6">
                <label class="col-xl-3 col-lg-3 col-form-label font-weight-bolder">Curriculum<sup class="redstar">*</sup></label>
                  <div class="col-lg-9 col-xl-9" id="curriculum_blck">
                  {!! Form::select('curriculum_id', $curriculum , ($question)? $question->curriculum_id: '', ['class' => 'form-control new-drop-section','id'=>'curriculum_id',  'placeholder' => 'Select Curriculum']) !!}
                </div>
              </div>
            </div>
            <br>

            <div class="row">
              <div class="form-group col-xl-6 col-lg-6">
                <label class="col-xl-3 col-lg-3 col-form-label font-weight-bolder">Year<sup class="redstar">*</sup></label>
                  <div class="col-lg-9 col-xl-9" id="year_blck">
                  {!! Form::select('year_id', $years , ($question)? $question->year_id: '', ['class' => 'form-control new-drop-section','id'=>'year_id','placeholder' => 'Select Year']) !!}
                </div>
              </div>
              <div class="form-group col-xl-6 col-lg-6">
                <label class="col-xl-3 col-lg-3 col-form-label font-weight-bolder">Subject<sup class="redstar">*</sup></label>
                  <div class="col-lg-9 col-xl-9" id="subject_blck">
                 {!! Form::select('subject_id', $subjects , ($question)? $question->subject_id: '', ['class' => 'form-control new-drop-section','id'=>'subject_id', 'placeholder' => 'Select Subject']) !!}
                </div>
              </div>
            </div>
            <br>

            <div class="row">
              <div class="form-group col-xl-6 col-lg-6">
                <label class="col-xl-3 col-lg-3 col-form-label font-weight-bolder">Paper<sup class="redstar">*</sup></label>
                  <div class="col-lg-9 col-xl-9" id="paper_blck">
                 {!! Form::select('paper_id', [] , ($question)? $question->paper_id: '', ['class' => 'form-control new-drop-section', 'placeholder' => 'Select Paper','id' => 'paper_id']) !!}
                </div>
              </div>
              <div class="form-group col-xl-6 col-lg-6">
                <label class="col-xl-3 col-lg-3 col-form-label font-weight-bolder">Topic<sup class="redstar">*</sup></label>
                  <div class="col-lg-9 col-xl-9" id="topic_blck">
                  {!! Form::select('topic_id', $topics , ($question)? $question->topic_id: '', ['class' => 'form-control new-drop-section','id'=>'topic_id', 'placeholder' => 'Select Topic']) !!}
                </div>
              </div>
            </div>
            <br>

            <div class="row">
              <div class="form-group col-xl-6 col-lg-6">
                <label class="col-xl-3 col-lg-3 col-form-label font-weight-bolder">Chapter<sup class="redstar">*</sup></label>
                  <div class="col-lg-9 col-xl-9" id="chapter_blck">
                 {!! Form::select('chapter_id', $chapters , ($question)? $question->chapter_id: '', ['class' => 'form-control new-drop-section', 'placeholder' => 'Select chapter','id' => 'chapter_id']) !!}
                </div>
              </div>
              <div class="form-group col-xl-6 col-lg-6">
                <label class="col-xl-3 col-lg-3 col-form-label font-weight-bolder">Unit<sup class="redstar">*</sup></label>
                  <div class="col-lg-9 col-xl-9" id="unit_blck">
                 {!! Form::select('unit_id', $units , ($question)? $question->unit_id: '', ['class' => 'form-control new-drop-section', 'id'=>'unit_id', 'placeholder' => 'Select Unit']) !!}
                </div>
              </div>
            </div>
            <br> -->

            <div class="row">
               <div class="col-md-10" >
                  <label class="col-xl-2 col-lg-2 col-form-label font-weight-bolder">Question</label>
                  <textarea id="question" name="question"  class="form-control"> {{ $question->question }} </textarea>

               </div>
            </div>
            <br>
            <div class="answer_div"> 
               <table id="answer_tb" class="table">
                <tbody id="answer_tb_body">
                    
                
              @foreach($answer as $key=>$value)  

              <!-- <div class = "row" id="div_{{$key}}">
                <div class="form-group col-xl-6 col-lg-6">
                  <label class="col-xl-3 col-lg-3 col-form-label font-weight-bolder"><span class="text-danger">* </span>Blank {{$key}} Answer(s)</label> 
                  <div class="col-lg-8 col-xl-8">
                    {!! Form::text('fill_blank_answers[]', ($value)? $value: '' , ['class' => 'form-control', 'id' => 'name', 'placeholder' => "Type answer. Separate multiple correct answers by comma."] ) !!}
                  </div>
                  <div class= "col-lg-1 col-xl-1"><a onclick="removeIndex({{$key}})" class="btn bg-red btn-flat pull-right">X</a></div >
                </div>
              </div> -->

              
              <tr id="b{{$key+1}}"><td class="lblblnk" width="175px">
               <label class="font-weight-bolder"><span class="text-danger">* </span>Blank {{$key}} Answer(s)</label></td>
               <td> <input type="text" class="form-control blank_answers" id="name_{{$key+1}}" placeholder="Type answer. Separate multiple correct answers by comma." name="fill_blank_answers[]" value="{{ $value }}"></td>
               <td><a href="javascript:void(0);" onclick="answerDelete('{{$key+1}}')" class="btn btn-danger btn-sm" title="Delete"> <i class="icon-1x fas fa-trash-alt"></i></a></td>
             </tr>


              @endforeach
              </tbody>
             </table>
            </div>
            
            @php $count = count($answer);@endphp
            
            <input type="hidden" name="setBlanksCount" id="setBlanksCount" value="{{$count}}">

           <!-- <div class="row">
                <div class="form-group col-xl-12 col-lg-12 qblock">
                  <label class="col-xl-2 col-lg-2 col-form-label font-weight-bolder">Difficulty Level</label>
                  <div class="radio-inline col-lg-10 col-xl-10 float-md-right">                        
                      <label class="radio">
                        <input type="radio" name="difficulty_level" id="difficulty_level" value="easey" {{ ($question->difficulty_level=="easey")? "checked" : "" }}>
                        <span></span>
                        Easy
                    </label>

                    <label class="radio">
                        <input type="radio" name="difficulty_level" id="difficulty_level" value="hard" {{ ($question->difficulty_level=="hard")? "checked" : "" }}>
                        <span></span>
                        Higher
                    </label>                       
                  </div>  
                </div>
              </div>
              <br> -->

              <div class="row">
                <div class="form-group col-xl-6 col-lg-6 qblock">                
                    <label class="col-xl-4 col-lg-4 col-form-label font-weight-bolder">Mark</label>
                    <div class="col-lg-8 col-xl-8 float-md-right">                        
                        <input type="text" name="mark" id="mark" placeholder="Enter mark" value="{{$question->mark}}" class= "form-control"> 
                    </div>  
                </div>
              </div>
              <br>

              <div class="row">
                <div class="form-group col-xl-12 col-lg-12 qblock">                
                    <label class="col-xl-2 col-lg-2 col-form-label font-weight-bolder">Question Mode</label>
                    <div class="radio-inline col-lg-10 col-xl-10 float-md-right"> 
                      <label class="radio">
                          <input type="radio" name="question_mode" id="question_mode" value="free" {{ ($question->question_mode=="free")? "checked" : "" }}>
                          <span></span>
                          Free
                      </label>

                      <label class="radio">
                          <input type="radio" name="question_mode" id="question_mode" value="paid" {{ ($question->question_mode=="paid")? "checked" : "" }}>
                          <span></span>
                          Paid
                      </label> 
                    </div>   
                </div>
              </div>
              <br>

              <!-- <div class="form-group row ">
      
                  <label class="col-xl-2 col-lg-2 col-form-label font-weight-bolder">Category<span class="text-danger">*</span></label>
                  <div class="col-10 col-form-label">
                  <div class="checkbox-inline ">
                      @php $cat = explode(',',$question->category);@endphp
                      <label class="checkbox">
                          <input type="checkbox" name="category[]" value="1"  wtx-context="169B8CE0-8BB9-4CCD-9A63-29EA93EA542F" id="set1" {{ (in_array(1,$cat))? "checked" : "" }}>
                          <span></span>
                          Key Word Test
                      </label>

                     <label class="checkbox">
                          <input type="checkbox" name="category[]" value="2"  wtx-context="169B8CE0-8BB9-4CCD-9A63-29EA93EA542F" id="set2" {{ (in_array(2,$cat))? "checked" : "" }}>
                          <span></span>
                          Formula Practice
                      </label>
                      <label class="checkbox">
                          <input type="checkbox" name="category[]" value="3"  wtx-context="169B8CE0-8BB9-4CCD-9A63-29EA93EA542F" id="set3" {{ (in_array(3,$cat))? "checked" : "" }}>
                          <span></span>
                          Converting Units
                      </label>
                  </div> 
                  </div> 
              </div> -->

            <input type="hidden" name="question_type_id" id="question_type_id" value="{{$question->question_type}}">

            
              <div class="col-xl-3">  
              <button type="button" class="btn btn-success mr-2"  onclick="questionCreate()" >Submit</button> 
                 </div>
            </form>
             
            </div>
            <br>

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

<!--end::Content-->
@endsection
@section('stylesheets')
<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 type="text/javascript">
  
//I added event handler for the file upload control to access the files properties.
document.addEventListener("DOMContentLoaded", init, false);

//To save an array of attachments
var AttachmentArray = [];

//counter for attachment array
var arrCounter = 0;

//to make sure the error message for number of files will be shown only one time.
var filesCounterAlertStatus = false;

//un ordered list to keep attachments thumbnails
var ul = document.createElement("ul");
ul.className = "thumb-Images";
ul.id = "imgList";

function init() {
  //add javascript handlers for the file upload event
  document
    .querySelector("#files")
    .addEventListener("change", handleFileSelect, false);

    console.log("here");
}

//the handler for file upload event
function handleFileSelect(e) {
  //to make sure the user select file/files
  if (!e.target.files) return;

  //To obtaine a File reference
  var files = e.target.files;

  // Loop through the FileList and then to render image files as thumbnails.
  for (var i = 0, f; (f = files[i]); i++) {
    //instantiate a FileReader object to read its contents into memory
    var fileReader = new FileReader();

    // Closure to capture the file information and apply validation.
    fileReader.onload = (function(readerEvt) {
      return function(e) {
        //Apply the validation rules for attachments upload
        ApplyFileValidationRules(readerEvt);

        //Render attachments thumbnails.
        RenderThumbnail(e, readerEvt);

        //Fill the array of attachment
        FillAttachmentArray(e, readerEvt);
      };
    })(f);

    // Read in the image file as a data URL.
    // readAsDataURL: The result property will contain the file/blob's data encoded as a data URL.
    // More info about Data URI scheme https://en.wikipedia.org/wiki/Data_URI_scheme
    fileReader.readAsDataURL(f);
  }
  document
    .getElementById("files")
    .addEventListener("change", handleFileSelect, false);
}

//To remove attachment once user click on x button
jQuery(function($) {
  $("div").on("click", ".img-wrap .close", function() {
    var id = $(this)
      .closest(".img-wrap")
      .find("img")
      .data("id");

    //to remove the deleted item from array
    var elementPos = AttachmentArray.map(function(x) {
      return x.FileName;
    }).indexOf(id);
    if (elementPos !== -1) {
      AttachmentArray.splice(elementPos, 1);
    }

    //to remove image tag
    $(this)
      .parent()
      .find("img")
      .not()
      .remove();

    //to remove div tag that contain the image
    $(this)
      .parent()
      .find("div")
      .not()
      .remove();

    //to remove div tag that contain caption name
    $(this)
      .parent()
      .parent()
      .find("div")
      .not()
      .remove();

    //to remove li tag
    var lis = document.querySelectorAll("#imgList li");
    for (var i = 0; (li = lis[i]); i++) {
      if (li.innerHTML == "") {
        li.parentNode.removeChild(li);
      }
    }
  });
});

//Apply the validation rules for attachments upload
function ApplyFileValidationRules(readerEvt) {
  //To check file type according to upload conditions
  if (CheckFileType(readerEvt.type) == false) {
    alert(
      "The file (" +
        readerEvt.name +
        ") does not match the upload conditions, You can only upload jpg/png/gif files"
    );
    e.preventDefault();
    return;
  }

  //To check file Size according to upload conditions
  if (CheckFileSize(readerEvt.size) == false) {
    alert(
      "The file (" +
        readerEvt.name +
        ") does not match the upload conditions, The maximum file size for uploads should not exceed 300 KB"
    );
    e.preventDefault();
    return;
  }

  //To check files count according to upload conditions
  if (CheckFilesCount(AttachmentArray) == false) {
    if (!filesCounterAlertStatus) {
      filesCounterAlertStatus = true;
      alert(
        "You have added more than 10 files. According to upload conditions you can upload 10 files maximum"
      );
    }
    e.preventDefault();
    return;
  }
}

//To check file type according to upload conditions
function CheckFileType(fileType) {
  if (fileType == "image/jpeg") {
    return true;
  } else if (fileType == "image/png") {
    return true;
  } else if (fileType == "image/gif") {
    return true;
  } else {
    return false;
  }
  return true;
}

//To check file Size according to upload conditions
function CheckFileSize(fileSize) {
  if (fileSize < 3000000) {
    return true;
  } else {
    return false;
  }
  return true;
}

//To check files count according to upload conditions
function CheckFilesCount(AttachmentArray) {
  //Since AttachmentArray.length return the next available index in the array,
  //I have used the loop to get the real length
  var len = 0;
  for (var i = 0; i < AttachmentArray.length; i++) {
    if (AttachmentArray[i] !== undefined) {
      len++;
    }
  }
  //To check the length does not exceed 10 files maximum
  if (len > 9) {
    return false;
  } else {
    return true;
  }
}

//Render attachments thumbnails.
function RenderThumbnail(e, readerEvt) {
  var li = document.createElement("li");
  ul.appendChild(li);
  li.innerHTML = [
    '<div class="img-wrap"> <span class="close">&times;</span>' +
      '<img class="thumb" src="',
    e.target.result,
    '" title="',
    escape(readerEvt.name),
    '" data-id="',
    readerEvt.name,
    '"/>' + "</div>"
  ].join("");

  var div = document.createElement("div");
  div.className = "FileNameCaptionStyle";
  li.appendChild(div);
  div.innerHTML = [readerEvt.name].join("");
  document.getElementById("Filelist").insertBefore(ul, null);
}

//Fill the array of attachment
function FillAttachmentArray(e, readerEvt) {
  AttachmentArray[arrCounter] = {
    AttachmentType: 1,
    ObjectType: 1,
    FileName: readerEvt.name,
    FileDescription: "Attachment",
    NoteText: "",
    MimeType: readerEvt.type,
    Content: e.target.result.split("base64,")[1],
    FileSizeInBytes: readerEvt.size
  };
  arrCounter = arrCounter + 1;
  

}
      tinymce.init({
           selector: 'textarea#question',
           max_height: 300,
           menubar: false,
           branding: false,
           statusbar: false,
           plugins: [
             'advlist autolink lists link image charmap print preview anchor',
             'searchreplace visualblocks code fullscreen',
             'insertdatetime media table paste code'
           ],
           toolbar: 'undo redo | ' +
            'bold italic backcolor | alignleft aligncenter ' +
            'alignright alignjustify | bullist numlist outdent indent | ' +
            'setAnswer | previewOpt',
           content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
            setup: function (editor) {
       
               editor.ui.registry.addButton('setAnswer', {
                 text: 'Add Blank Space',
                 icon:'plus',
                 onAction: function (_) {
                        
                       setBlankAnswer(); 
                       tinymce.activeEditor.selection.setContent('________');
                 }
               });


             editor.ui.registry.addButton('previewOpt', {
                 text: 'Preview',
                 icon:'preview',
                 onAction: function (_) {
                   console.log("abc");
                    //var myContent = tinymce.activeEditor.getContent({ format: "text" });
                    var myContent = tinymce.activeEditor.getContent();

                    var res = str.replace("________", "<input type='text'>");
                     console.log(res);
                    $("#student_view").html(res);
                    

                   $("#student_view_modal").modal("show");
                   
                 }
               });

          }
        });

</script>

<script>

document.addEventListener('DOMContentLoaded', function(e) {
    const curriculumValidators = {
        validators: {
            notEmpty: {
                message: 'Please select curriculum'
            }
        }
    };

    const topicValidators = {
      validators: {
        notEmpty: {
            message: 'Please select topic'
        }
      }
    };
    

    const questionform = document.getElementById('edit_fill_form');
    const fv = FormValidation.formValidation(questionform, {
        fields: {
         
            country_id: {
                validators: {
                    notEmpty: {
                        message: 'Please select country'
                    }
                }
            },
            'curriculum_id': curriculumValidators,
            subject_id: {
                validators: {
                    notEmpty: {
                        message: 'Please select subject'
                    }
                }
            },
            year_id: {
                validators: {
                    notEmpty: {
                        message: 'Please select year'
                    }
                }
            },
            'topic_id':topicValidators,
            chapter_id: {
                validators: {
                    notEmpty: {
                        message: 'Please select chapter'
                    }
                }
            },
            paper_id: {
                validators: {
                    notEmpty: {
                        message: 'Please select paper'
                    }
                }
            },
            unit_id: {
                validators: {
                    notEmpty: {
                        message: 'Please select unit'
                    }
                }
            },
            question: {
                validators: {
                    notEmpty: {
                        message: 'Please enter question'
                    }
                }
            },
            
            difficulty_level: {
                validators: {
                    notEmpty: {
                        message: 'Please select difficulty_level'
                    }
                }
            },
            mark: {
                validators: {
                    notEmpty: {
                        message: 'Please enter mark'
                    }
                }
            },
            question_mode: {
                validators: {
                    notEmpty: {
                        message: 'Please select question mode'
                    }
                }
            },
        },
        plugins: {
            trigger: new FormValidation.plugins.Trigger(),
            bootstrap: new FormValidation.plugins.Bootstrap(),
            submitButton: new FormValidation.plugins.SubmitButton(),
            trigger: new FormValidation.plugins.Trigger(),
        },
    }).on('core.form.valid', function() {
            $("#edit_fill_form").submit();
            
    });

    function setBlankAnswer() {
      setBlanks = parseInt($("#setBlanksCount").val())+1;
      var fill = '<tr id="b'+setBlanks+'"><td class="lblblnk" width="175px"> <label class="font-weight-bolder"><span class="text-danger">* </span>Blank '+ setBlanks +' Answer(s)</label></td><td> <input type="text" class="form-control blank_answers" id="name_'+setBlanks+'" placeholder="Type answer. Separate multiple correct answers by comma." name="fill_blank_answers[]"></td><td><a href="javascript:void(0);" id="" onclick="answerDelete('+setBlanks+')" class="btn btn-danger btn-sm" title="Delete"> <i class="fas fa-fw fa-trash-o"></i></a></td></tr>';
      $("#answer_tb_body").append(fill);

       $("#setBlanksCount").val(setBlanks);
       fillsort();
  }


$(document).on('change', '#country_id', function () {
      $.ajax({
           url: "{{ url('common/getCurriculum') }}/"+$(this).val(),
           type: "GET",
           dataType: "html"
       }).done(function (data) {
       console.log(data);

         $('#year_id').prop('selectedIndex',0);
         $('#subject_id').prop('selectedIndex',0);

         var ch = $("#chapter_id").empty();
         ch.append('<option value="0">Please Choose</option>');

         var tp = $("#topic_id").empty();
         tp.append('<option value="0">Please Choose</option>');

         var un = $("#unit_id").empty();
         un.append('<option value="0">Please Choose</option>');

         $("#curriculum_blck").html(data);
       })
 });

 $(document).on('change', '#curriculum_id', function () {
      
         $('#year_id').prop('selectedIndex',0);
         $('#subject_id').prop('selectedIndex',0);

         var ch = $("#chapter_id").empty();
         ch.append('<option value="0">Please Choose</option>');

         var tp = $("#topic_id").empty();
         tp.append('<option value="0">Please Choose</option>');

         var un = $("#unit_id").empty();
         un.append('<option value="0">Please Choose</option>');
 });


 $(document).on('change', '#year_id', function () {
    var country = $("#country_id").val();
    var curriculum = $("#curriculum_id").val();
    var subject = $("#subject_id").val();
    var year = $("#year_id").val();
    var token = "{{ csrf_token() }}";
      $.ajax({
           url: "{{ url('common/getTopics') }}",
           type: "POST",
           dataType: "html",
           data: { country:country,curriculum:curriculum,subject:subject,year:year,_token:token},
       }).done(function (data) {
         
         var ch = $("#chapter_id").empty();
         ch.append('<option value="0">Please Choose</option>');

         var tp = $("#topic_id").empty();
         tp.append('<option value="0">Please Choose</option>');

         var un = $("#unit_id").empty();
         un.append('<option value="0">Please Choose</option>');

         $("#topic_blck").html(data);
       })
 });

 $(document).on('change', '#subject_id', function () {
    var country = $("#country_id").val();
    var curriculum = $("#curriculum_id").val();
    var subject = $("#subject_id").val();
    var year = $("#year_id").val();
    var token = "{{ csrf_token() }}";
      $.ajax({
           url: "{{ url('common/getTopics') }}",
           type: "POST",
           dataType: "html",
           data: { country:country,curriculum:curriculum,subject:subject,year:year,_token:token},
       }).done(function (data) {
         
         var ch = $("#chapter_id").empty();
         ch.append('<option value="0">Please Choose</option>');

         var tp = $("#topic_id").empty();
         tp.append('<option value="0">Please Choose</option>');

         var un = $("#unit_id").empty();
         un.append('<option value="0">Please Choose</option>');

         $("#topic_blck").html(data);
       })
 });
   
 $(document).on('change', '#topic_id', function () {
    var country = $("#country_id").val();
    var curriculum = $("#curriculum_id").val();
    var subject = $("#subject_id").val();
    var year = $("#year_id").val();
    var topic = $(this).val();
    var token = "{{ csrf_token() }}";
      $.ajax({
           url: "{{ url('common/getChapters') }}",
           type: "POST",
           dataType: "html",
           data: { country:country,curriculum:curriculum,subject:subject,year:year,topic:topic,_token:token},
       }).done(function (data) {
         
         var ch = $("#chapter_id").empty();
         ch.append('<option value="0">Please Choose</option>');

         var un = $("#unit_id").empty();
         un.append('<option value="0">Please Choose</option>');

         $("#chapter_blck").html(data);
       })
 });

 $(document).on('change', '#chapter_id', function () {
    var country = $("#country_id").val();
    var curriculum = $("#curriculum_id").val();
    var subject = $("#subject_id").val();
    var year = $("#year_id").val();
    var topic = $("#topic_id").val();
    var chapter = $(this).val();
    var token = "{{ csrf_token() }}";
      $.ajax({
           url: "{{ url('common/getUnits') }}",
           type: "POST",
           dataType: "html",
           data: { country:country,curriculum:curriculum,subject:subject,year:year,topic:topic,chapter:chapter,_token:token},
       }).done(function (data) {
         
         var un = $("#unit_id").empty();
         un.append('<option value="0">Please Choose</option>');

         $("#unit_blck").html(data);
       })
 });


 });

/* Fill blank answer */
 function fillsort(){
   var fixHelperModified = function(e, tr) {
    var $originals = tr.children();
    var $helper = tr.clone();
    $helper.children().each(function(index) {
      $(this).width($originals.eq(index).width())

    });
    return $helper;
  },
    updateIndex = function(e, ui) {
       console.log(ui);
      $('td.lblblnk', ui.item.parent()).each(function (i) {
         let txt = '<label><span class="text-danger">* </span>Blank '+(i+1)+' Answer(s)</label>';
         $(this).html(txt);
       
      });
      
    };

  $("#answer_tb tbody").sortable({
    helper: fixHelperModified,
    stop: updateIndex
  }).disableSelection();
  
    $("#answer_tb tbody").sortable({
    distance: 5,
    delay: 100,
    opacity: 0.6,
    cursor: 'move',
    update: function() {}
      });
}

function answerDelete(id){
 
  $("#b"+id).remove();
  $('td.lblblnk').each(function (i) {
     let txt = '<label><span class="text-danger">* </span>Blank '+(i+1)+' Answer(s)</label>';
     $(this).html(txt);
   
  });
  fillsort();

}


  function myFunction() {
    var checkBox = document.getElementById("myCheck");
    var text = document.getElementById("update-password");
    if (checkBox.checked == true){
      text.style.display = "block";
    } else {
       text.style.display = "none";
    }
  }
  function questionCreate(qid){
  
  // var Qtype = $("#question_type").val();
  var error = 0;

    
  var editorContent = tinyMCE.get('question').getContent();
      if(editorContent.trim().length <= 0){
        $('#question').addClass('is-invalid');
        $("#question_error").html('Question required').show();
        var qstnError = 1;
        console.log("1");
      } else {
        $('#question').removeClass('is-invalid');
        $("#question_error").html('').hide();
        var qstnError = 0;
        console.log("2");
      }


      var editorContent = tinyMCE.get('question').getContent();
      if(editorContent.trim().length > 0){
        var blankItem =  (editorContent.match(/________/g))?(editorContent.match(/________/g)).length:0;
      }
      else{
        var blankItem = 0;
      }

      if(blankItem == 0){
        var blankError = 1;
        console.log("3");
        showAlert("Atleast one blank space is required", "error");
      }else{
        console.log("4");
       var blankError = 0;
      }

      var blankAnserror = 1;
      var blank_answers_count = 0;
      $('.blank_answers').filter(function() {
        blank_answers_count++;
        console.log("abc:"+this.value.length);
          if (this.value.length != 0) {
              blankAnserror = 0;
             $("#answer_div_error").html("").hide();
             console.log("efg:"+this.value.length);
          }else{
            blankAnserror = 1;
            $("#answer_div_error").html("Please fill out fields").show();
            return false;
            console.log("hij:"+this.value.length);
          }
        });

      if(blankAnserror == 0){
        return true;
      }

      if(blankItem != blank_answers_count){
          var misMatchError = 1;
          console.log("7");
           showAlert("Question blanks didn't matched the answer count.", "error");
      }else{
         var misMatchError = 0;
         console.log("8");
      }
      
      if($('#mark').val().trim().length <= 0){
        $('#mark').addClass('is-invalid');
        $("#mark_error").html('Mark required').show();
        console.log("9");
        var markError = 1;
      } else {
        $('#mark').removeClass('is-invalid');
        $("#mark_error").html('').hide();
        var markError = 0;
        console.log("10");
      }
      
      if(qstnError == 0 && blankError == 0 && blankAnserror == 0 && markError == 0 && misMatchError == 0 ){
        error = 0;
        console.log("11");
      }else{
        console.log("12");
        error = 1;
      }

  if(error == 0){
     

   //var data = new FormData();
     var data = $('#edit_fill_form').serializeArray();



     for (var i = 0; i < AttachmentArray.length; i++) {
        if (AttachmentArray[i] !== undefined) {
            console.log(AttachmentArray[i]);
            imgArray = JSON.stringify(AttachmentArray[i]);
            var img = {'name':'images[]','value':imgArray};
            data.push(img);
        }
      }

          $.ajax({
               url: "{{ url('admin/questions') }}/"+qid,
               type: "PUT",
               data: data,
               dataType: "json"
           }).done(function (data) {
            
                if(data.flagError){
                  showAlert(data.message, "error");
                }else{
                 showAlert(data.message, "success");
                 setTimeout(function () {
                    window.location.href = "{{ url('admin/questions') }}/"+qid+"/edit";
                    }, 1000);

                }
              
           });

  } else {
    return false;
  }
};
  function imageDelete(id){
      $.ajax({
          url: "{{ url('admin/questions/remove-image') }}/" + id, 
          type: "GET", 
          dataType: "html"
      })
      .done(function (a) {
              var data = JSON.parse(a);
            
            if(data.flagError){
                  showAlert(data.message, "error");
              }else{
                  showAlert(data.message, "success");
              }   
          }).fail(function () {
                  showAlert("Somthing went wrong!", "error");
      });         
  }
fillsort();
</script>

@endsection