<?php $__env->startSection('content'); ?>

  <?php
    $complainId =  session('complainTypeId');
    $parentQuestionId =  session('parentQuestionId');
    $questionoptionId =  session('questionoptionId');
    $questionId =  session('questionId');
    $questionOptionsArray =  session('questionOptionsArray');
    //dd(session()->get( 'QuestionBranchingLogics' ));
    if (empty($QuestionBranchingLogics)) 
    {
      $QuestionBranchingLogics = session()->get( 'QuestionBranchingLogics' ); 
      $questionsArray          = session()->get( 'questionsArray' ); 
    }
    //dd($questionsArray);
  // dd($questionsArray);
   // $finalQuestionOptionsArray =  session('finalQuestionOptionsArray');
   $success = false; ?>
    <?php if(\Session::has('error')): ?>
        <div class="alert alert-danger">
            <?php echo \Session::get('error'); ?>

        </div>
    <?php endif; ?>
    <?php if(\Session::has('success')): ?>
    <?php $success = true; ?> 
        <div class="alert alert-success">
            <?php echo \Session::get('success'); ?>

        </div>
    <?php endif; ?>
     <?php if($errors->any()): ?>
          <div class="alert alert-danger">
              <ul>
                  <?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                      <li><?php echo e($error); ?></li>
                  <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
              </ul>
          </div>
    <?php endif; ?>
    <style>
        .js-options .mb-8:nth-child(even) {background: #ebebec}
.js-options .mb-8:nth-child(odd) {background: #f7f7f7}


.js-options .mb-8
{
    padding: 10px;
}


        .ibox { margin-bottom: 3px; }
    </style>

   <div class="page-heading">
                <br /><h1 class="page-title"><?php echo e($heading); ?> <?php if($questions->id): ?>
                <a href="<?php echo e(route('duplicate_user',$questions->id)); ?>" class="btn btn-primary pull-right mr-3">Duplicate Question</a>
                <?php endif; ?></h1> 
                
            <div class="page-content fade-in-up">
                <form class="form-purple" id="questionForm" action="<?php echo e($route); ?>" method="post" enctype="multipart/form-data">
                    <input type="hidden" name="questionId" value="<?php echo e($questions->id); ?>">
                    <div class="row">
                            <div class="col-md-6">
                                <div class="ibox">
                                        <div class="ibox-head">
                                            <div class="ibox-title">Question Details</div>
                                        </div>
                                        <div class="ibox-body">
                                            <div class="form-group mb-4">
                                                <label><?php echo e(__('Question Category')); ?></label>
                                                <select class="form-control" name="category" >
                                                <option value="">- Select -</option>
                                                <?php if($categories): ?>
                                                    <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $row): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                        <?php if($row->status == 0): ?>
                                                        <?php ($status = ' (Inactive)'); ?>
                                                        <?php else: ?>
                                                        <?php ($status = ''); ?>
                                                        <?php endif; ?>
                                                        <option <?php echo e($questions->category_id == $row->id ? 'selected' :''); ?> value="<?php echo e($row->id); ?>" <?php if(old('category') == $row->id): ?> selected="selected" <?php endif; ?>><?php echo e($row->title); ?><?php echo e($status); ?></option>
                                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                                <?php endif; ?>
                                                </select>
                                            </div>
                                            <div class="form-group mb-4 ">
                                                <label><?php echo e(__('Chief Complain')); ?></label>
                                                    <select class="form-control complain_types" name="complain_type_id" >
                                                        <option value="">- Select -</option>
                                                        <?php if($complain_types): ?>
                                                            <?php $__currentLoopData = $complain_types; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $row): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                                <?php if($row->status == 0): ?>
                                                                <?php ($status = ' (Inactive)'); ?>
                                                                <?php else: ?>
                                                                <?php ($status = ''); ?>
                                                                <?php endif; ?>
                                                                <option <?php echo e($questions->complain_type_id == $row->id ? 'selected' :''); ?> value="<?php echo e($row->id); ?>" <?php if(old('complain_type_id') == $row->id): ?> selected="selected" <?php endif; ?>><?php echo e($row->name); ?><?php echo e($status); ?></option>
                                                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                                        <?php endif; ?>
                                                    </select>
                                            </div>
                                        <div class="form-group mb-4">
                                            <label><?php echo e(__('Question Title')); ?></label>
                                            <input class="form-control" name="name" type="text"  value="<?php echo e(old('name', $questions->name)); ?>">
                                        </div>
                                            <div class="form-group mb-4">
                                              <label><?php echo e(__('Is Multiselect')); ?></label>
                                                <div class="mt-1">
                                                  <label class="radio radio-inline radio-grey radio-primary">
                                                  <input class="js-is-multiselect" type="checkbox" name="is_multiselect" value="1" <?php if(old('is_multiselect', @$isMultiselect) == '1'): ?> checked <?php endif; ?>>
                                                  <span class="input-span"></span>multiselect</label>
                                                </div>
                                            </div>
                                            <div class="form-group mb-4 js-prefix">
                                                <label><?php echo e(__('Prefix')); ?></label>
                                                <input class="form-control "  type="text" name="prefix" value="<?php echo e(@$prefix); ?>" >
                                            </div>
                                             <div class="form-group mb-4 js-postfix">
                                                  <label><?php echo e(__('Postfix')); ?></label>
                                                  <input class="form-control " type="text" name="postfix" value="<?php echo e(@$postfix); ?>" >
                                            </div>
                                             <div class="form-group mb-4">
                                              <label><?php echo e(__('Select Type')); ?></label>
                                                <div class="mt-1">
                                                  <label class="radio radio-inline radio-grey radio-primary">
                                                  <input class="js-image-only" type="checkbox" name="image_only" value="1" <?php if(old('is_multiselect', @$imageOnly) == '1'): ?> checked <?php endif; ?>>
                                                  <span class="input-span"></span>Image Only</label>
                                                   <label class="radio radio-inline radio-grey radio-primary">
                                                  <input class="js-option-only" type="checkbox" name="option_only" value="1" <?php if(old('is_multiselect', @$optionOnly) == '1'): ?> checked <?php endif; ?>>
                                                  <span class="input-span"></span>Options Only</label>
                                                   <label class="radio radio-inline radio-grey radio-primary">
                                                  <input class="js-image-and-options" type="checkbox" name="image_and_options" value="1" <?php if(old('is_multiselect', @$imageAndOptions) == '1'): ?> checked <?php endif; ?>>
                                                  <span class="input-span"></span>Image And Options</label>
                                                </div>
                                            </div>
                                              <div class="form-group mb-4 js-question-image">
                                              <?php if(!@$questionImage): ?>
                                              <label><?php echo e(__('Image')); ?></label><br>
                                              <?php endif; ?>
                                              <?php if(@$questionImage): ?>
                                                <label><?php echo e(__('select option for image')); ?></label>
                                                <select class="form-control js-option-text" data-validation="required">
                                                <?php $__currentLoopData = $questionOptions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $row): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                    <option class="dropdown-item" value="<?php echo e($row->title); ?>" data-option-text-id="<?php echo e($row->id); ?>"><?php echo e($row->title); ?>

                                                    </option>                                   
                                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?> 
                                                </select>
                                              <?php endif; ?>
                                              <?php if(@$questionImage): ?>
                                              <img src="<?php echo e(@$questionImage); ?>" class="annotatable"> 
                                              <?php endif; ?>

                                              <input type="hidden" name="old_front_image" value="<?php echo e(@basename($questionImage)); ?>" >
                                              <input class="form-control" name="image_front"  type="file"  value="" >
                                            </div> 
                                     <div class="js-options">

                                            <?php if($questionOptionsArray): ?>
                                              <?php ($questionOptions = $questionOptionsArray); ?>
                                            <?php endif; ?>

                                            <?php if($questionOptions): ?>
                                                <?php $__currentLoopData = $questionOptions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $row): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                    <div class="mb-8">
                                                        <input type="hidden" name="old_questions_opt_id[]" value="<?php echo e(@$row->id); ?>">
                                                        <div class="form-group mb-4">
                                                            <label><?php echo e(__('Option Text')); ?></label>
                                                            <input class="form-control" value="<?php echo e($row->title); ?>" name="option_text[]"  type="text" placeholder="" >
                                                        </div> 
                                                        <div class="form-group mb-4">
                                                            <label><?php echo e(__('Option Order')); ?></label>
                                                            <input class="form-control" value="<?php echo e($row->sort_order); ?>" name="option_order[]"  type="number" placeholder="" >
                                                        </div> 
                                                        <div class="form-group mb-4">
                                                            <label><?php echo e(__('Option Narrative Text')); ?></label>
                                                            <input class="form-control" value="<?php echo e($row->narrative_text); ?>" name="option_narrative_text[]"  type="text" placeholder="" >
                                                        </div> 
                                                        <div class="form-group mb-4">
                                                            <label><?php echo e(__('Require Input Field')); ?></label>
                                                            <select class="form-control" name="option_required_input[]" data-validation="required">
                                                                <option  <?php echo e($row->required_input == config('constants.CONSTANT_REQUIRED_INPUT_INACTIVE') ? 'selected' :''); ?>  value="<?php echo e(config('constants.CONSTANT_REQUIRED_INPUT_INACTIVE')); ?>">No</option>
                                                                <option  <?php echo e($row->required_input == config('constants.CONSTANT_REQUIRED_INPUT_ACTIVE') ? 'selected' :''); ?>  value="<?php echo e(config('constants.CONSTANT_REQUIRED_INPUT_ACTIVE')); ?>">Yes</option>
                                                            </select>
                                                        </div> 
                                                        <div class="form-group mb-4">
                                                            <label><?php echo e(__('Require Input Field Label')); ?></label>
                                                            <input class="form-control" value="<?php echo e($row->required_input_label); ?>" name="option_required_input_label[]"  type="text" >
                                                        </div> 
                                                        <div class="form-group mb-4">
                                                            <label><?php echo e(__('Input Field Rules')); ?></label>
                                                            <input class="form-control opt-rules"  name="question_option_rules[]" value="<?php echo e(@$row->required_input_rules); ?>">
                                                            <span>required|min-10|max-10|numeric</span>
                                                        </div> 
                                              <div class="form-group mb-4">
                                                            <label><?php echo e(__('Multiselect Text')); ?></label>
                                                            <input class="form-control "  name="single_line_text[]" value="<?php echo e(@$row->single_line_text); ?>">
                                                        </div>           
                                                        <div class="form-group mb-4">
                                                            <div class="icon-container">
                                                                <a href="javascript:void(0)" class="js-remove-option btn-outline-danger"><span class="ti-close"></span><small><span class="icon-name"> Remove Option</span></small></a>
                                                            </div>
                                                        </div>  
                                                         <hr>
                                                    </div>
                                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                            <?php endif; ?>
                                     </div>
                                    <div class="form-group mb-4">
                                        <div class="icon-container">
                                            <a href="javascript:void(0)" class="js-add-option btn-outline-success"><span class="ti-plus"></span><small><span class="icon-name"> Add Option</span></small></a>
                                        </div>
                                    </div>
                                    
                                    <div class="form-group mb-4">
                                        <label><?php echo e(__('Status')); ?></label>
                                        <select class="form-control" name="status" data-validation="required">
                                            <option  value="1" <?php echo e($questions->status == config('constants.CONSTANT_STATUS_ACTIVE') ? 'selected' :''); ?> >Active</option>
                                            <option  value="0" <?php echo e($questions->status == config('constants.CONSTANT_STATUS_INACTIVE') ? 'selected' :''); ?>>Inactive</option>
                                        </select>
                                    </div> 
                                    </div> 
                                    <div class="ibox-footer">
                                        <button title="Submit" class="btn btn-primary mr-2 btn-submit" type="submit" name="btn-submit" value="submit"><?php echo e(__('Submit')); ?></button>
                                        <!-- <button class="btn btn-outline-secondary" type="reset">Cancel</button> -->
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                              <div class="js-question-branching-logic">
                                  <?php if($QuestionBranchingLogics): ?>
                                    <?php $__currentLoopData = $QuestionBranchingLogics; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $val): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                      <div class="ibox ">
                                          <div class="ibox-head">
                                              <div class="ibox-title">Question Branching Logic</div>
                                              <div class="icon-container">
                                                  <a href="javascript:void(0)" class="js-remove-parent-question  btn-outline-danger"><small><span class="ti-close"></span></small><span class="icon-name" ></span></a>
                                              </div>
                                          </div>
                                          <div class="ibox-body" >
                                              <div class="form-group mb-4 ">
                                                <label><?php echo e(__('Show Multiselect')); ?></label>
                                                  <div class="mt-1">
                                                    <label class="radio radio-inline radio-grey radio-primary">
                                                    <input class="js-show-multiselect js-multiselect"  type="checkbox" name="show_multiselect[]" value="1" <?php if(old('show_multiselect', @$val['is_multiselect']) == '1'): ?> checked <?php endif; ?>>
                                                    <span class="input-span"></span>multiselect</label>
                                                  </div>
                                              </div>
                                           
                                              <div class="js-question-dropdown">
                                                  <div class="form-group mb-4">
                                                      <label>Parent Question <img src="https://i.gifer.com/ZZ5H.gif" class="loader" id="parentQuestionAjaxId"></label>
                                                      <select class="form-control related_question " name="parent_question_id[]" >
                                                           <option value="">- Select -</option>
                                                           <?php
                                                             $parentQuestionId = $val['parent_question_id'];
                                                             $val['is_multiselect'] = isset($val['is_multiselect']) ? $val['is_multiselect'] : null;
                                                            ?>
                                                            
                                                            <?php if($questionsArray && $val['is_multiselect'] == config('constants.CONSTANT_STATUS_INACTIVE')): ?>

                                                              <?php $__currentLoopData = $questionsArray; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $row): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                                  <option <?php echo e($row['id'] == $parentQuestionId ? 'selected' :''); ?>  value="<?php echo e($row['id']); ?>" ><?php echo e($row['name']); ?></option>                                   
                                                              <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?> 
                                                            <?php endif; ?>

                                                            <?php if($val['is_multiselect'] == config('constants.CONSTANT_STATUS_ACTIVE')): ?>
                                                              <?php $__currentLoopData = $questionsArray; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $row): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                                  <?php if($row['is_multiselect'] == config('constants.CONSTANT_STATUS_ACTIVE')): ?>
                                                                  <option <?php echo e($row['id'] == $parentQuestionId ? 'selected' :''); ?>  value="<?php echo e($row['id']); ?>" ><?php echo e($row['name']); ?></option>          
                                                                  <?php endif; ?>                         
                                                              <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>                                 
                                                            <?php endif; ?>
                                                      </select>
                                                  </div>
                                              </div>
                                              <div class="js-question-option-dropdown">
                                                  <div class="form-group mb-4 ">
                                                      <label>Options For Parent Question <img src="https://i.gifer.com/ZZ5H.gif" class="loader" id="questionOptionAjaxId"></label>
                                                      <select class="form-control jsSelectBox" name="question_option_id[]" >
                                                          <option value="">- Select -</option>
                                                          <?php
                                                              $parentQuestionOptions = $question_model->getQuestionOptionsArrayByParentQuestion($val['parent_question_id']);
                                                              $questionoptionId =  $val['parent_question_option_id'];
                                                            ?> 
                                                          <?php if($parentQuestionOptions): ?>
                                                              <?php $__currentLoopData = $parentQuestionOptions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $row): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                                  <option <?php echo e($questionoptionId ==  $row['id'] ? 'selected' :''); ?>  value="<?php echo e($row['id']); ?>"><?php echo e($row['title']); ?></option>
                                                              <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>                                    
                                                          <?php endif; ?>
                                                      </select>
                                                  </div>
                                              </div>
                                          </div>
                                      </div>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                <?php endif; ?>
                              </div>
                             
                              <div class="ibox-body js-add-more">
                                <div class="icon-container">
                                    <a href="javascript:void(0)" class="js-add-branch btn-outline-success"><span class="ti-plus"></span><small><span class="icon-name"> Add More</span></small></a>
                                </div>
                              </div>
                            </div>

                            </div>
                    </div>
                    <?php if($duplicateQuestionsCount > 0): ?>

                    <br />
                    <div class="row">
                        <div class="col-md-12">
                          <div class="ibox">
                                <div class="ibox-head">
                                     <div class="ibox-title">Duplicate Questions</div>
                                </div>
                                <div class="ibox-body">
                                    <table
                                      class="table table-bordered table-hover" 
                                      id="duplicate_questions" 
                                      data-source = "<?php echo e(route('duplicate_questions_ajax',$questions->id)); ?>"
                                      data-source = "<?php echo e($questions->id); ?>"
                                      data-cols = ",,,"
                                      data-search = "false"
                                      >
                                          <thead class="thead-default thead-lg">
                                               <tr>
                                                  <th width="5%">ID</th>
                                                  <th width="30%">Title</th>
                                                  <th width="30%">Options</th>
                                                  <th width="5%">Actions</th>


                                              </tr>
                                          </thead>
                                      </table>
                                </div>
                        </div>
                      </div>
                      <?php endif; ?>
                    </div>
                </form>
                <div class="js-options-controll" style="display: none;">
                    <div class="mb-8">
                        <input type="hidden" name="old_questions_opt_id[]" value="">
                        <div class="form-group mb-4">
                            <label><?php echo e(__('Option Text')); ?></label>
                            <input class="form-control" name="option_text[]"  type="text"  >
                        </div> 
                        <div class="form-group mb-4">
                            <label><?php echo e(__('Option Order')); ?></label>
                            <input class="form-control" name="option_order[]" type="number" >
                        </div> 
                        <div class="form-group mb-4">
                            <label><?php echo e(__('Patient Narrative Text For This Option')); ?></label>
                            <input class="form-control" name="option_narrative_text[]"  type="text" >
                        </div> 
                        <div class="form-group mb-4">
                            <label><?php echo e(__('Require Input Field')); ?></label>
                            <select class="form-control" name="option_required_input[]" >
                                <option  value="<?php echo e(config('constants.CONSTANT_REQUIRED_INPUT_INACTIVE')); ?>">No</option>
                                <option  value="<?php echo e(config('constants.CONSTANT_REQUIRED_INPUT_ACTIVE')); ?>">Yes</option>
                            </select>
                        </div> 
                        <div class="form-group mb-4">
                            <label><?php echo e(__('Require Input Field Label')); ?></label>
                            <input class="form-control" name="option_required_input_label[]"  type="text" >
                        </div> 
                        <div class="form-group mb-4">
                            <label><?php echo e(__('Input Field Rules')); ?></label>
                            <input class="form-control opt-rules"  name="question_option_rules[]" >
                            <span>required|min-10|max-10|numeric</span>
                        </div> 
                        <div class="form-group mb-4">
                            <label><?php echo e(__('Single Line Text')); ?></label>
                            <input class="form-control "  name="single_line_text[]" >
                        </div> 
                        <div class="form-group mb-4">
                            <div class="icon-container">
                                <a href="javascript:void(0)" class="js-remove-option  btn-outline-danger"><small><span class="ti-close"></span></small><span class="icon-name" ><small> Remove Option</small></span></a>
                            </div>
                        </div>  
                    </div> 
                </div>


             

                <div class="js-question-controll" style="display: none;">
                    <div class="ibox">
                        <div class="ibox-head">
                              <div class="ibox-title">Question Branching Logic</div>
                              <div class="icon-container">
                                  <a href="javascript:void(0)" class="js-remove-parent-question  btn-outline-danger"><small><span class="ti-close"></span></small><span class="icon-name" ></span></a>
                              </div>
                        </div>
                        <div class="ibox-body" >
                                <div class="form-group mb-4">
                                  <label><?php echo e(__('Show Multiselect')); ?></label>
                                    <div class="mt-1">
                                      <label class="radio radio-inline radio-grey radio-primary">
                                      <input class="js-show-multiselect js-multiselect" type="checkbox" name="show_multiselect[]" value="1" >
                                      <span class="input-span"></span>multiselect</label>
                                    </div>
                                </div>
                            <div class="js-question-dropdown">
                                <div class="form-group mb-4">
                                    <label>Parent Question <img src="https://i.gifer.com/ZZ5H.gif" class="loader" id="parentQuestionAjaxId"></label>
                                    <select class="form-control related_question js-parent-question" name="parent_question_id[]" >
                                         <option value="">- Select -</option>
                                    </select>
                                </div>
                            </div>
                            <div class="js-question-option-dropdown">
                                <div class="form-group mb-4 ">
                                    <label>Options For Parent Question <img src="https://i.gifer.com/ZZ5H.gif" class="loader" id="questionOptionAjaxId"></label>
                                    <select class="form-control jsSelectBox"  name="question_option_id[]" >

                                        <option value="">- Select -</option>
                                       
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div> 
                </div>
                
            </div>

<!-- JS FORM VALIDATION -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo e(asset('')); ?>assets/js/annotorious.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>

<script>
  $.validate({
    lang: 'en'
  });
    
    
 
  jQuery(document).ready(function($) 
  {
      var image_only = $(".js-image-only").is(':checked') ;
      var option_only = $(".js-option-only").is(':checked') ;
      var image_and_option__only = $(".js-image-and-options").is(':checked') ;
      if (image_only == true) 
      {
        $('.js-question-image').show();
      }
      else if (option_only == true) 
      {
        $('.js-question-image').hide();
      }
      else if (image_and_option__only == true) 
      {
        $('.js-question-image').show();
      }
      else
      {
        $('.js-question-image').hide();
      }
  });
  
  $(".btn-submit").click(function(){
    $(".related_question option").each(function(){
    });
  });
    
 $(".js-image-only").click(function(){

  var image_only = $(".js-image-only").is(':checked') ;
  if (image_only == true) 
  {
     $('.js-question-image').show();
  }
  else
  {
    $('.js-question-image').hide();
  }
    
  });
  
    $(".js-option-only").click(function(){

      var image_only = $(".js-option-only").is(':checked') ;
      if (image_only == true) 
      {
         $('.js-question-image').hide();
      }
      else
      {
        if ($(".js-image-only").is(':checked') == true) 
        {
          $('.js-question-image').show();
        }
        else if($(".js-image-and-options").is(':checked') == true)
        {
          $('.js-question-image').show();
        }
        else
        {
          $('.js-question-image').hide();
        }
      }
    
    });
    
     $(".js-image-and-options").click(function(){

      var image_only = $(".js-image-and-options").is(':checked') ;
      if (image_only == true) 
      {
         $('.js-question-image').show();
      }
      else if($(".js-image-only").is(':checked') == true)
      {
        $('.js-question-image').show();
      }
      else
      {
        $('.js-question-image').hide();
      }
    
     });

    $( window ).load(function() {
    var multiselectChecked = $(".js-is-multiselect").is(':checked') ;
    if (!multiselectChecked) 
    {
      $(".js-postfix").hide();
      $(".js-prefix").hide();
    }
  });
   
  $(".js-is-multiselect").click(function() 
    {
      var is_multiselect = $(".js-is-multiselect").is(':checked') ;
      if (is_multiselect) 
      {
          $(".js-postfix").show();
          $(".js-prefix").show();
      }
      else
      {
          $(".js-postfix").hide();
          $(".js-prefix").hide();
      }
  });

  $('.js-add-option').click(function()
  {
      $('.js-options').append($('.js-options-controll').html())
  });
  $('body').delegate('.js-remove-option','click',function() 
  {
      $(this).closest('.mb-8').remove();
  });
  $('body').delegate('.related_question','change',function()
  {  
    $(this).parents('.ibox-body').addClass('active'); 

    updateOptionListElement(html='');

    if($(this).val()!='')
    {
      $('#questionOptionAjaxId').addClass('is--loading');

        $.ajax(
        {
            type:"GET",
            url: "<?php echo e(route('question_options_list')); ?>",
            data:
            {
                question_id:$(this).val(),
                _token:"<?php echo e(csrf_token()); ?>"
            },
            success: function(result)
            {   
                result = $.parseJSON(result);
                if(result.data)
                {
                    let html = "<option value=''>- Select -</option>";
                    $(result.data).each(function( key,row ) 
                    {
                       html += "<option value='"+row.id+"'>"+row.title+"</option>";
                    });
                    $('.ibox-body.active').find('.jsSelectBox').html(html);
                    $('.ibox-body.active').removeClass('active');
                    // updateOptionListElement(html);
                    $('#questionOptionAjaxId').removeClass('is--loading');
                }
            }
        }); 
    }
      
  });

   $('body').delegate('.js-show-multiselect','change',function()
  {  
    var myClass = Math.random().toString(36).substring(2, 15);
    $(this).parents('.ibox-body').addClass(myClass); 
    
    if($('.ibox-body.'+myClass).find('.js-show-multiselect').is(':checked'))
    {
      $('.js-show-multiselect').addClass('is--loading');
        $.ajax(
        {
            type:"GET",
            url: "<?php echo e(route('question_list')); ?>",
            data:
            {
                complain_type_id:$('.complain_types').val(),
                _token:"<?php echo e(csrf_token()); ?>"
            },
            success: function(result)
            {   
                result = $.parseJSON(result);
                if(result.data)
                {
                    let html = "<option value=''>- Select -</option>";
                    $(result.data).each(function( key,row ) 
                    {
                    
                       html += "<option value='"+row.id+"'>"+row.name+"</option>";
                    });
                    console.log(html, $('.ibox-body.'+myClass));
                    $('.ibox-body.'+myClass).find('.related_question').html(html);
                    $('.ibox-body.'+myClass).removeClass(myClass);
                    $('.ibox-body.'+myClass).find('.jsSelectBox').val('');
                    // $('#parentQuestionAjaxId').removeClass('is--loading');
                }
                else
                {
                    $('.ibox-body.'+myClass).removeClass(myClass);
                }
            }
        }); 
    }
    else if($(this).attr('checked', false))
    {
      $('.ibox-body.'+myClass).removeClass(myClass);
      var target = $(this).parents('.ibox-body').find('.related_question');
      updateParentQuestionControl(target);
    }
      
  });

  $('.complain_types').change(function()
  {   
    $('.jsSelectBox').html('<option> -Select-</option>');
      
      updateQuestionListElement(html='');
     
      updateParentQuestionControl(target="");
     
  });

  // $('.js-show-multiselect').change(function()
  // {   
  //   $('.jsSelectBox').html('<option> -Select-</option>');
      
  //     updateQuestionListElement(html='');
     
  //     updateParentQuestionControl(target="");
     
  // });

  function updateQuestionListElement(html)
  {
    $('.js-question-dropdown select').html(html);
  }

  function updateOptionListElement(html)
  {
      $('.ibox-body.active .js-question-option-dropdown select').html(html);
  }

  function updateParentQuestionControl(target='')
  {   
      // if($(".js-show-multiselect").is(':checked')) 
      // {
      //   var route = "<?php echo e(route('question_list')); ?>";
      // }
      // else
      // {
      //   var route = "<?php echo e(route('chief_complains_list')); ?>";
      // }  
      if($('.complain_types').val()!='')
      {
        $('#parentQuestionAjaxId').addClass('is--loading');
        $.ajax(
        {
            type:"GET",
            url: "<?php echo e(route('chief_complains_list')); ?>",
            data:
            {
                complain_type_id:$('.complain_types').val(),
                _token:"<?php echo e(csrf_token()); ?>"
            },
            success: function(result)
            {   
                result = $.parseJSON(result);
                if(result.data)
                {
                  let html = "<option value=''>- Select -</option>";
                  $(result.data).each(function( key,row ) 
                  {
                    html += "<option value='"+row.id+"'>"+row.name+"</option>";
                  });
                  if(target) 
                  {
                    $(target).html(html)
                  }   
                  else
                  {
                    updateQuestionListElement(html);
                  }
                  $('#parentQuestionAjaxId').removeClass('is--loading');
                }
            }
        }); 
      }
  }

  // $('.js-show-multiselect').click(function(){
   
  //     updateParentQuestionControl(target="");
  // });

  $('.js-add-branch').click(function()
  {
    $('.js-question-branching-logic').append($('.js-question-controll').html());
    addParentQuestionInControll()
  });
  $('body').delegate('.js-remove-parent-question','click',function() 
  {
      $(this).closest('.ibox').remove();
  });
  $('#questionForm').submit(function(e)
  {

  });
    <?php 
    // TODO's
    // AJAX CAll Multiple will fix this later ?>
  function addParentQuestionInControll()
  { 
    index = $('.related_question').length;
    target = ".related_question:eq("+(index-2)+")";
    updateParentQuestionControl(target)
  }

  var QuestionBranchingLogics = "<?php echo e(is_array($QuestionBranchingLogics) ? '1' :'0'); ?>";
  if(QuestionBranchingLogics == 0) 
  {
    $('.js-add-branch').trigger('click')
  }

  
</script>


<script>
//   DataTable.initDataTable('#duplicate_questions');

  function init() {
    // anno.addPlugin('PolygonSelector', { activate: true });

    // anno.setProperties({
    //      units: 'pixels',
    //      outline:'red'

    // });
    $(".js-option-text").click(function() 
    {
      var html = $(".js-option-text option:selected").val();
      var questionOptionId = $(this).find(':selected').attr('data-option-text-id');
      // alert(questionOptionId);
      $('.annotorious-editor-text').val(html);
    });
    

    var imageMapping= <?php echo json_encode($imageMapping, 15, 512) ?>;
    var imagePath= <?php echo json_encode($questionImage, 15, 512) ?>;
    $.each(imageMapping, function (index, row) {
        $.each(row, function (i2, value) {
            var myAnnotation = {
                /** The URL of the image where the annotation should go **/
                src : imagePath,

                image_map_id : value.id,

                /** The annotation text **/
                text : value.label,

                /** The annotation shape **/
                shapes : [{
                    /** The shape type **/
                    type : 'rect',

                    /** The shape geometry (relative coordinates) **/
                    geometry : { x : value.coordinate_x, y: value.coordinate_y, width :value.coordinate_width, height: value.coordinate_height }
                }]
            }
            anno.addAnnotation(myAnnotation, "");
             
        });
    })
    anno.makeAnnotatable(document.getElementById('myImage'));
    anno.setProperties({
        editable:false
    });
     anno.addHandler('onAnnotationRemoved', function(annotation) {
        imageMapping = annotation;
        
        // var coordinatesX =  imageMapping.shapes[0].geometry.x;
        // var coordinatesY =  imageMapping.shapes[0].geometry.y;
        // var coordinatesWidth =  imageMapping.shapes[0].geometry.width;
        // var coordinatesHeight =  imageMapping.shapes[0].geometry.height;
        // console.log(imageMapping);
         let data = new FormData();
         var myJSON = JSON.stringify(imageMapping);
         data.append('myJSON',  myJSON);
          $.ajax({
            url: "<?php echo e(route('question_image_map_delete')); ?>",
            data:data,
            type: "POST",
            processData: false,
            contentType: false,
              success:function(data)
            {
                
                // $('#something').html(response);
            }

        }); 

     });

    anno.addHandler('onAnnotationUpdated', function(annotation) {
        imageMapping = annotation;
        
        // var coordinatesX =  imageMapping.shapes[0].geometry.x;
        // var coordinatesY =  imageMapping.shapes[0].geometry.y;
        // var coordinatesWidth =  imageMapping.shapes[0].geometry.width;
        // var coordinatesHeight =  imageMapping.shapes[0].geometry.height;


        var imageType = <?php echo json_encode($image_type, 15, 512) ?>;
         var complain_type_id = <?php echo json_encode($complain_type_id, 15, 512) ?>;

         let data = new FormData();
         var myJSON = JSON.stringify(imageMapping);
         data.append('myJSON',  myJSON);
         data.append('image_type',  imageType);
         var questionOptionId = $('.js-option-text').find(':selected').attr('data-option-text-id');
         data.append('question_option_id',  questionOptionId);
         data.append('complain_type_id',  complain_type_id);
          $.ajax({
            url: "<?php echo e(route('question_image_map_ajax_edit')); ?>",
            data:data,
            type: "POST",
            processData: false,
            contentType: false,
              success:function(data)
            {
                // $('#something').html(response);
            }

        }); 

     });
    anno.addHandler('onAnnotationCreated', function(annotation) {
        // var imageMapping= <?php echo json_encode($imageMapping, 15, 512) ?>;
        var myImg = document.querySelector(".annotatable");
        // console.log(myImg);
        var realWidth = myImg.naturalWidth;
        var realHeight = myImg.naturalHeight;
        // alert("Original width=" + realWidth + ", " + "Original height=" + realHeight);



        var imageMapping = [];
        imageMapping = annotation;
        console.log(imageMapping);
        // var coordinatesX =  imageMapping.shapes[0].geometry.x;
        // var coordinatesY =  imageMapping.shapes[0].geometry.y;
        // var coordinatesWidth =  imageMapping.shapes[0].geometry.width;
        // var coordinatesHeight =  imageMapping.shapes[0].geometry.height;
         var imageType = <?php echo json_encode($image_type, 15, 512) ?>;
         var complain_type_id = <?php echo json_encode($complain_type_id, 15, 512) ?>;
         let data = new FormData();
         var myJSON = JSON.stringify(imageMapping);
         data.append('myJSON',  myJSON);
         data.append('image_type',  imageType);
         var questionOptionId = $('.js-option-text').find(':selected').attr('data-option-text-id');
         data.append('question_option_id',  questionOptionId);
         data.append('complain_type_id',  complain_type_id);
          $.ajax({
            url: "<?php echo e(route('question_image_map_ajax_add')); ?>",
            data:data,
            type: "POST",
            processData: false,
            contentType: false,
              success:function(data)
            {
                console.log(data);

                annotation.image_map_id = data; //-->22;
            }

        });

    });
  }
  jQuery.noConflict();
  
</script>


<body onload="init();">
      <img src="<?php echo e(@$questionImage); ?>" id="myImage"  style="display: none;" />
</body>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('physician.layouts.master', \Illuminate\Support\Arr::except(get_defined_vars(), array('__data', '__path')))->render(); ?>