@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="kt_edit_address_form" name="kt_edit_address_form" action="{{ url('admin/questions') }}{{ ($question) ? '/'.$question->id : '' }}">
      {{csrf_field()}}
        {{ ($question) ? method_field('PUT') : '' }}
          <div class="box-body">
            
             <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', $paper , ($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-6" >
                  <label class="col-xl-2 col-lg-2 col-form-label font-weight-bolder">Images</label>
                  <span class="form-text text-muted">Allowed file types:  png, jpg, jpeg.</span>
                    <a href="javascript:void(0);" class="btn btn-light-success btn-sm mr-1 mt-5" onclick="addMoreImage();"><i class="flaticon2-image-file "></i> Add more</a>         
                </label>
               </div>
               @if( count($questionImages) > 0)
                            @php 
                                $i = 1;
                            @endphp
                            @foreach($questionImages as $key=>$image)
                                @if($image->image!=NULL)
                                   <div class="col-sm-2 increment" id="img_{{ $image->id }}">
                         
                                    <div class="col-lg-6 col-xl-6 mb-12">
                                        <div class="image-input image-input-outline" id="kt_image_{{$i}}">
                                            <div class="image-input-wrapper" style=" margin-right:12px; background-image: url({{ url('uploads/questions/'.$image->question_id.'/'.$image->image) }})"></div>

                                            <a href="javascript:void(0)" onclick="imageDelete({{$image->id}})"><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" style="display: block">
                                                <i class="ki ki-bold-close icon-xs text-muted"></i>
                                            </span></a>
                                        </div>
                                        
                                    </div>

                                </div>  
                                    @php 
                                        $i++;
                                    @endphp
                                @endif
                             @endforeach
                        
                        @endif
                        <div class="col-sm-3 increment" id="image-area">
                 
                         <div class="col-lg-6 col-xl-6 mb-12">
                             <div class="image-input image-input-outline" id="kt_image_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> 
                        

                     </div>
                     <!-- <div class="row">

                            <div class="form-group col-xl-6 col-lg-6">
                            <label class="col-xl-2 col-lg-2 col-form-label font-weight-bolder">Question<sup class="redstar">*</sup></label>
                            <textarea id="question" name="question" rows="4" cols="50" class="form-control"> {{ $question->question }} </textarea>
                            </div>
                            <div class="col-md-6" style="margin-left: 29px;">
                            <label for="mobile">Answer<sup class="redstar">*</sup> </label>
                            <input type="text" name="answer" value="{{ $answer }} " class="form-control">
                            </div>
                       </div> -->

                        <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">
                                <input type="text" name="answer" value="{{ $answer }} " 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">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">
                        <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="submit" class="btn btn-success mr-2">Submit</button> 
                         </div>
                      </div>
            <br>
          </div>
          </form>
    </div>
</div>

<!--end::Content-->
@endsection

@section('scripts')

<script>
   var table;
   var id;
   var categoryFormValidate;
   var categoryForms = $("#ManageForm");
   $(document).on('click', '.category-submit', function () {
       categoryFormValidate = categoryForms.validate();
   });
   
   function changeCategory(name) {
       console.log(name);
       $("#category_display_name").val(name.substring(0, 20));
   }
   
   
   
   
   
   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('change', '#country_id', function () {
      $.ajax({
           url: "{{ url('common/getCurriculum') }}/"+$(this).val(),
           type: "GET",
           dataType: "html"
       }).done(function (data) {
       console.log(data);
         $("#curriculum_blck").html(data);
       })
 });


 $(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) {
      
         $("#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/getUnits') }}",
           type: "POST",
           dataType: "html",
           data: { country:country,curriculum:curriculum,subject:subject,year:year,topic:topic,_token:token},
       }).done(function (data) {
      
         $("#unit_blck").html(data);
       })
 });
   
  $(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');
       //  }
  }) 
   
</script>

@endsection