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

@section('page_toolbar')
<a class="btn btn-success px-2 font-weight-bold btn-sm mr-2"  href="{{ url('admin/extended-response')}}">
<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="single_edit_form"  name="single_edit_form" action="{{ url('admin/extended-response') }}{{ ($question) ? '/'.$question->id : '' }}">
        {{csrf_field()}}
        {{ ($question) ? method_field('PUT') : '' }}
            <div class="box-body"> 
            <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"><a onclick="imageDelete('{{$image->id}}')"> ×</a></span>
                            <img class="thumb" title="{{$image->id}}" data-id="{{$image->id}}" src="{{ asset('storage/uploads/extended-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 qblock">                
                    <label class="col-xl-4 col-lg-4 col-form-label font-weight-bolder">Curriculum</label>
                    <div class="col-lg-8 col-xl-8 float-md-right">                        
                    {!! Form::select('curriculum_id', $curriculum ,$question->curriculum_id, ['class' => 'form-control new-drop-section', 'placeholder' => 'Select curriculum','id' => 'curriculum_id']) !!} 
                    </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">Subject</label>
                    <div class="col-lg-8 col-xl-8 float-md-right">                        
                    {!! Form::select('subject_id', $subjects ,$question->subject_id, ['class' => 'form-control new-drop-section', 'placeholder' => 'Select Subject','id' => 'subject_id']) !!} 
                    </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">Topic</label>
                    <div class="col-lg-8 col-xl-8 float-md-right topic_blck">                        
                    {!! Form::select('topic_id', $topics ,$question->topic_id, ['class' => 'form-control new-drop-section', 'placeholder' => 'Select Topic','id' => 'topic_id']) !!} 
                    </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">Chapter</label>
                    <div class="col-lg-8 col-xl-8 float-md-right chapter_blck">                        
                    {!! Form::select('chapter_id', $chapters ,$question->chapter_id, ['class' => 'form-control new-drop-section', 'placeholder' => 'Select Chapter','id' => 'chapter_id']) !!} 
                    </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">Unit</label>
                    <div class="col-lg-8 col-xl-8 float-md-right unit_blck">                        
                    {!! Form::select('unit_id', $units ,$question->unit_id, ['class' => 'form-control new-drop-section', 'placeholder' => 'Select Unit','id' => 'unit_id']) !!} 
                    </div>  
                </div>
              </div>
              <br>
            <div class="row"> 
              <div class="form-group col-xl-12 col-lg-12">           
                <label class="col-xl-2 col-lg-2 col-form-label font-weight-bolder">Question<sup class="redstar">*</sup></label>
                <div class="col-lg-10 col-xl-10 float-md-right" >
                  <textarea id="question" name="question" rows="4" cols="50" class="form-control"> {{ $question->question }} </textarea>
                </div>
              </div> 
            </div>
            <br>
            <div class="row"> 
              <div class="form-group col-xl-12 col-lg-12">     
                <label class="col-xl-2 col-lg-2 col-form-label font-weight-bolder">Answer<sup class="redstar">*</sup></label>
                <div class="col-lg-10 col-xl-10 float-md-right">
                  <textarea  name="answer" rows="5" cols="30" id="answer" class="form-control"> {{ $question->answer }} </textarea>
                    
                 </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-6 col-lg-6 qblock">                
                    <label class="col-xl-4 col-lg-4 col-form-label font-weight-bolder">Difficulty Level</label>
                    <div class="col-lg-8 col-xl-8 float-md-right">                        
                        <input type="text" name="difficulty_level" id="difficulty_level" placeholder="Enter Difficulty Level" value="{{$question->difficulty_level}}" class= "form-control"> 
                    </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">Summary</label>
                    <div class="col-lg-8 col-xl-8 float-md-right">                        
                        <input type="text" name="summary" id="summary" placeholder="Enter Summary" value="{{$question->summary}}" class= "form-control"> 
                    </div>  
                </div>
              </div>
              <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">Video Units</label>
                    <div class="col-lg-8 col-xl-8 float-md-right multiple_unit_blck">                        
                    {!! Form::select('video_unit_id[]', $video_units , [], ['class' => 'form-control ', 'id' => 'video_unit_id','style' => 'width:100%','placeholder'=>'Select Video Units','multiple']) !!}
                    </div>  
                </div>
              </div>
              <br>            
              <div class="form-group row">
                <div class="col-xl-9"></div>
                  <input type="hidden" name="question_type_id" value="{{$question?$question->question_type:''}}"> 

                 <div class="col-xl-3">  
                  <button type="button" class="btn btn-success mr-2"  onclick="questionCreate()" >Submit</button> 
                 </div>
              </div>
            </div>
         <!--end::Content-->
         </form>
    </div>
</div>
<!--end::Content-->
@endsection
@section('scripts')
<script src="https://cdn.tiny.cloud/1/mkusqx9pnphip6lpkm2qrhpo2xcuvb32rz6203dlysxn93rm/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script src="{{ url('vendor/formvalidation/dist/js/FormValidation.min.js') }}"></script>
<script src="{{ url('vendor/formvalidation/dist/js/plugins/Bootstrap.min.js') }}"></script>
<script>
  tinymce.init({
        selector: '#question',
        setup: function (editor) {
        editor.on('change', function () {
            tinymce.triggerSave();
        });
    },
        height: 500,
        menubar: true,
        plugins: [
            'advlist autolink lists link image charmap print preview anchor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table paste code help wordcount'
        ],
        toolbar: 'undo redo | formatselect | ' +
        'bold italic backcolor | alignleft aligncenter ' +
        'alignright alignjustify | bullist numlist outdent indent | ' +
        'removeformat | help',
        content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
  });
  tinymce.init({
        selector: '#answer',
        setup: function (editor) {
        editor.on('change', function () {
            tinymce.triggerSave();
        });
    },
        height: 500,
        menubar: true,
        plugins: [
            'advlist autolink lists link image charmap print preview anchor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table paste code help wordcount'
        ],
        toolbar: 'undo redo | formatselect | ' +
        'bold italic backcolor | alignleft aligncenter ' +
        'alignright alignjustify | bullist numlist outdent indent | ' +
        'removeformat | help',
        content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
  });
  tinymce.init({
        selector: '#summary',
        setup: function (editor) {
        editor.on('change', function () {
            tinymce.triggerSave();
        });
    },
        height: 500,
        menubar: true,
        plugins: [
            'advlist autolink lists link image charmap print preview anchor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table paste code help wordcount'
        ],
        toolbar: 'undo redo | formatselect | ' +
        'bold italic backcolor | alignleft aligncenter ' +
        'alignright alignjustify | bullist numlist outdent indent | ' +
        'removeformat | help',
        content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
  });
  var classSelected = 0;
  $(document).ready(function() {
      openTriggerBoxHere();
      var ExtendedQuestionVideoUnits = '{{ $ExtendedQuestionVideoUnits }}';
      $('#video_unit_id option').each(function() {
        if (ExtendedQuestionVideoUnits.includes(parseInt($(this).val()))) {
            $(this).prop('selected', true); 
        }
      });
      $("#video_unit_id").trigger('change');
  });
  
  function openTriggerBoxHere(){
      classSelected = 0;
      $("select").on("select2:close", function (e) {  
          ////
          console.log(0);
          classSelected = 0;
          $('.select2-selection .select2-selection__rendered').each(function(i, items_list){
              $(items_list).find('li').each(function(j, li){
                  classSelected = classSelected + 1;
              })
          });
          ////
          if(classSelected > 1){
              $('#class_blck .fv-plugins-message-container').slideUp('fast', function() {});
          }else{
              $('#class_blck .fv-plugins-message-container').slideDown('fast', function() {});
          }
          ////
      });
  }

  $('#class_id').select2().on('change', function(){ 
          selectedValue = $('.select2-selection__choice').data('select2-id'); 
          if(selectedValue !== undefined){ 
              $('.fv-plugins-message-container').remove();
          }
          else{
              $('#class_blck').append('<div class="fv-plugins-message-container"><div data-field="class_id[]" data-validator="notEmpty" class="fv-help-block">Please select class</div></div>')
          }
});

//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 5 MB"
    );
    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 < 5120000) {
    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;
  

}

   var table;
   var id;
   function chooseQuestion(type){

    if(type>0){

         $.ajax({
               url: "{{ url('questions/question') }}/"+type,
               type: "GET",
               dataType: "html"
           }).done(function (data) {
           
             $("#qstion_blk").html(data);

             if(type==3){
                tinymce.init({
                 selector: 'textarea#question',
                 height: 500,
                 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 | ' +
                 'removeformat | setAnswer',
                 content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
                  setup: function (editor) {
               
                       editor.ui.registry.addButton('setAnswer', {
                         text: 'Set as Blank',
                         onAction: function (_) {
                         
                         swal.fire({
                            title: "Are you sure?",
                            text: "The selected text will be blank and set as curresponding position answer",
                            buttonsStyling: !1,
                            confirmButtonText: "Yes!",
                            showCancelButton: true,
                            customClass: {
                                confirmButton: "btn font-weight-bold btn-light-primary",
                                cancelButton: "btn font-weight-bold btn-light-danger",
                            }
                        }).then((function (result) { 
                            if (result.value) {
                                tinymce.activeEditor.selection.setContent("<span id='t1'>______</span>");       
                                   // $.ajax({
                                   //     url: "{{ url('products/categories/create') }}",
                                   //     type: "GET",
                                   //     dataType: "html"
                                   // }).done(function (a) {

                                         
                                   //  }    
                            }        
                            
                        }))
                         
               
               
                          //editor.insertContent(toblankHtml();
                         }
                       });
                  }
               });
             }
             if(type == 4){
                imageReInit();
             }


           }).fail(function () {
               alert("Please try again...");
           });


    }
    console.log("here");
    console.log(type);

   }
   

   
   
   function addMoreImage(){

        var count =document.getElementsByClassName("image-input").length;
        html = "<div class='col-sm-3 increment'><div class='col-lg-6 col-xl-6 '> <div class='image-input image-input-outline' id='kt_image_"+(count+1)+"''> <div class='image-input-wrapper' ></div><label class='btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow' data-action='change' data-toggle='tooltip' title='' data-original-title='Change image'> <i class='fas fa-pen icon-sm text-muted'></i> <input type='file' name='image[]' id='uploadFile' accept='.png, .jpg, .jpeg'/> <input type='hidden' name='profile_avatar_remove'/> </label> <span class='btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow' data-action='cancel' data-toggle='tooltip' title='Cancel image'> <i class='ki ki-bold-close icon-xs text-muted'></i> </span> </div></div></div>";

        $(".increment:last").after(html);

        imageReInit();

     }


     function imageReInit(){
        // Class definition
            var KTImageInputDemo = function () {
                // Private functions
                var initDemos = function () {
                    // Example 1
                    var count =document.getElementsByClassName("image-input").length;
                    for (var i = 1; i <=count ; i++) {
                        var avatar2 = new KTImageInput('kt_image_'+i);
                    }
                    
                }

                return {
                    // public functions
                    init: function() {
                        initDemos();
                    }
                };
            }();

            KTUtil.ready(function() {
                KTImageInputDemo.init();
            });
     }
   
   
  $(document).on('click', '.btn-next', function () {
   
        $('.nav-tabs > .nav-item > .active').parent().next('li').find('a').trigger('click');

       // console.log(next);
       //  if(next.length){
       //    console.log("aba");
       //    next.find('a').trigger('click');
       //  }else{
       //    console.log("sdsa");
       //    jQuery('#myTab a:first').tab('show');
       //  }
  }) 

  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('single_edit_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'
                    }
                }
            },
            'topic_id':topicValidators,
            chapter_id: {
                validators: {
                    notEmpty: {
                        message: 'Please select chapter'
                    }
                }
            },
            unit_id: {
                validators: {
                    notEmpty: {
                        message: 'Please select unit'
                    }
                }
            },
            question: {
                validators: {
                    notEmpty: {
                        message: 'Please enter question'
                    }
                }
            },
            answer: {
                validators: {
                    notEmpty: {
                        message: 'Please enter answer'
                    }
                }
            },
            difficulty_level: {
                validators: {
                    notEmpty: {
                        message: 'Please select difficulty_level'
                    }
                }
            },
            mark: {
                validators: {
                    notEmpty: {
                        message: 'Please enter mark'
                    }
                }
            },
        },
        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() {
            $("#single_edit_form").submit();
            
    });
 

  
 $(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>');

         var un = $("#video_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>');

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

 $(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) {
           $(".topic_blck").html('');
           $(".topic_blck").html(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>');
           var un = $("#video_unit_id").empty();
           un.append('<option value="0">Please Choose</option>');

       });
 });
  
 $(document).on('change', '#topic_id', function () {
    var topic = $(this).val();
    var token = "{{ csrf_token() }}";
      $.ajax({
           url: "{{ url('common/getExtendedChapters') }}/"+topic,
           type: "GET",
           dataType: "html",
       }).done(function (data) {
           $(".chapter_blck").html('');
           $(".chapter_blck").html(data);
       });
 });

 $(document).on('change', '#chapter_id', function () {
    var chapter = $(this).val();
    var token = "{{ csrf_token() }}";
      $.ajax({
           url: "{{ url('common/getExtendedUnits') }}/"+chapter,
           type: "GET",
           dataType: "html",
       }).done(function (data) {
           $(".unit_blck").html('');
           $(".unit_blck").html(data);
       });
 });

 
 $(document).on('change', '#chapter_id', function () {
    var curriculum = $("#curriculum_id").val();
    var subject = $("#subject_id").val();
    var token = "{{ csrf_token() }}";
      $.ajax({
           url: "{{ url('common/getExtendedMultipleUnits') }}/"+curriculum+"/"+subject_id,
           type: "GET",
           dataType: "html",
       }).done(function (data) {
           $(".multiple_unit_blck").html('');
           $(".multiple_unit_blck").html(data);
       });
 });
 
 });



 function questionCreate(qid)
 {
    var error = 0;
    if($('#question').val().trim().length <= 0){
        $('#question').addClass('is-invalid');
        $("#question_error").html('Question required').show();
        var qstnError = 1;
    
      } else {
        $('#question').removeClass('is-invalid');
        $("#question_error").html('').hide();
        var qstnError = 0;
      }
      if($('#answer').val().trim().length <= 0){
         $('#answer').addClass('is-invalid');
        $("#answer_error").html('Answer required').show();
        var AnsError = 1;
      } else {
        $('#answer').removeClass('is-invalid');
        $("#answer_error").html('').hide();
         var AnsError = 0;
      }
      if($('#mark').val().trim().length <= 0){
         $('#mark').addClass('is-invalid');
         $("#mark_error").html('* Mark required').show();
        var markError = 1;
       
      } else {
        $('#mark').removeClass('is-invalid');
        $("#mark_error").html('').hide();
        var markError = 0;
      }

      if(qstnError == 0 && AnsError == 0 && markError == 0){
        error = 0;
      }else{
        error = 1;
      }

      if(error == 0)
      {
              var data = $('#single_edit_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/extended-response') }}/"+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/extended-response') }}/"+qid+"/edit";
                        }, 1000);
                    }              
              });

      } else {
        return false;
      }
};

function imageDelete(id){
      $.ajax({
          url: "{{ url('admin/extended-response/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");
      });         
}
</script>
@endsection