@extends('physician.layouts.master')
@section('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; ?>
    @if (\Session::has('error'))
        <div class="alert alert-danger">
            {!! \Session::get('error') !!}
        </div>
    @endif
    @if (\Session::has('success'))
    <?php $success = true; ?> 
        <div class="alert alert-success">
            {!! \Session::get('success') !!}
        </div>
    @endif
     @if ($errors->any())
          <div class="alert alert-danger">
              <ul>
                  @foreach ($errors->all() as $error)
                      <li>{{ $error }}</li>
                  @endforeach
              </ul>
          </div>
    @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">{{$heading}} @if($questions->id)
                <a href="{{route('duplicate_user',$questions->id)}}" class="btn btn-primary pull-right mr-3">Duplicate Question</a>
                @endif</h1> 
                
            <div class="page-content fade-in-up">
                <form class="form-purple" id="questionForm" action="{{ $route }}" method="post" >
                    <input type="hidden" name="questionId" value="{{$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>{{ __('Question Category') }}</label>
                                                <select class="form-control" name="category" data-validation1="required">
                                                <option value="">- Select -</option>
                                                @if($categories)
                                                    @foreach($categories as $row)
                                                        @if($row->status == 0)
                                                        @php($status = ' (Inactive)')
                                                        @else
                                                        @php($status = '')
                                                        @endif
                                                        <option {{ $questions->category_id == $row->id ? 'selected' :''   }} value="{{$row->id }}" @if(old('category') == $row->id) selected="selected" @endif>{{ $row->title }}{{$status}}</option>
                                                    @endforeach
                                                @endif
                                                </select>
                                            </div>
                                            <div class="form-group mb-4 ">
                                                <label>{{ __('Chief Complain') }}</label>
                                                    <select class="form-control complain_types" name="complain_type_id" data-validation1="required">
                                                        <option value="">- Select -</option>
                                                        @if($complain_types)
                                                            @foreach($complain_types as $row)
                                                                @if($row->status == 0)
                                                                @php($status = ' (Inactive)')
                                                                @else
                                                                @php($status = '')
                                                                @endif
                                                                <option {{ $questions->complain_type_id == $row->id ? 'selected' :''   }} value="{{  $row->id}}" @if(old('complain_type_id') == $row->id) selected="selected" @endif>{{ $row->name }}{{$status}}</option>
                                                            @endforeach
                                                        @endif
                                                    </select>
                                            </div>
                                        <div class="form-group mb-4">
                                            <label>{{ __('Question Title') }}</label>
                                            <input class="form-control" name="name" data-validation1="required" type="text"  value="{{old('name', $questions->name)}}">
                                        </div>
                                           
                                     <div class="js-options">

                                            @if($questionOptionsArray)
                                              @php($questionOptions = $questionOptionsArray)
                                            @endif

                                            @if($questionOptions)
                                                @foreach($questionOptions as $row)
                                                    <div class="mb-8">
                                                        <input type="hidden" name="old_questions_opt_id[]" value="{{ @$row->id }}">
                                                        <div class="form-group mb-4">
                                                            <label>{{ __('Option Text') }}</label>
                                                            <input class="form-control" value="{{ $row->title }}" name="option_text[]" data-validation1="required" type="text" placeholder="" >
                                                        </div> 
                                                        <div class="form-group mb-4">
                                                            <label>{{ __('Option Order') }}</label>
                                                            <input class="form-control" value="{{ $row->sort_order }}" name="option_order[]" data-validation1="required" type="number" placeholder="" >
                                                        </div> 
                                                        <div class="form-group mb-4">
                                                            <label>{{ __('Option Narrative Text') }}</label>
                                                            <input class="form-control" value="{{ $row->narrative_text }}" name="option_narrative_text[]" data-validation1="required" type="text" placeholder="" >
                                                        </div> 
                                                        <div class="form-group mb-4">
                                                            <label>{{ __('Require Input Field') }}</label>
                                                            <select class="form-control" name="option_required_input[]" data-validation="required">
                                                                <option  {{ $row->required_input == config('constants.CONSTANT_REQUIRED_INPUT_INACTIVE') ? 'selected' :''   }}  value="{{config('constants.CONSTANT_REQUIRED_INPUT_INACTIVE')}}">No</option>
                                                                <option  {{ $row->required_input == config('constants.CONSTANT_REQUIRED_INPUT_ACTIVE') ? 'selected' :''   }}  value="{{config('constants.CONSTANT_REQUIRED_INPUT_ACTIVE')}}">Yes</option>
                                                            </select>
                                                        </div> 
                                                        <div class="form-group mb-4">
                                                            <label>{{ __('Require Input Field Label') }}</label>
                                                            <input class="form-control" value="{{ $row->required_input_label }}" name="option_required_input_label[]" data-validation1="required" type="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>
                                                @endforeach
                                            @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>{{ __('Status') }}</label>
                                        <select class="form-control" name="status" data-validation="required">
                                            <option  value="1">Active</option>
                                            <option  value="0">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">{{__('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">

                                @if($QuestionBranchingLogics)
                                    @foreach($QuestionBranchingLogics as $val)
                                      <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="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
                                                            
                                                             // if ($complainId) 
                                                             // {
                                                             //    $parentQuestionId = $parentQuestionId;

                                                             //    $questionsArray = $question_model->getQuestionsArrayByComplainType($complainId,$questionId);
                                                                
                                                             // }
                                                             // else
                                                             // {
                                                             //      // $parentQuestionId = $questions->parent_question_id;
                                                             //     //var_dump('Mahmood asdasasd');die;
                                                             //      $parentQuestionId = $val['parent_question_id'];
                                                             // }
                                                             $parentQuestionId = $val['parent_question_id'];
                                                            ?>

                                                           @if($questionsArray)

                                                              @foreach($questionsArray as $row)
                                                                  <option {{  $row['id'] == $parentQuestionId ? 'selected' :'' }}  value="{{ $row['id'] }}" >{{ $row['name'] }}</option>                                   
                                                              @endforeach                                    
                                                           @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
                                                             // if ($parentQuestionId) 
                                                             // {
                                                             //    $parentQuestionOptions = $question_model->getQuestionOptionsArrayByParentQuestion($parentQuestionId);
                                                             //    $questionoptionId = $val['parent_question_option_id'];
                                                             //   // if($questionoptionId)
                                                             //   // {
                                                             //   //      //$questionoptionId = $questionoptionId;
                                                             //   // }
                                                             //   // else
                                                             //   // {
                                                             //   //      // $questionoptionId = $questions->question_option_id;
                                                             //   //      $questionoptionId = $val['parent_question_option_id'];
                                                             //   //      $parentQuestionOptions = $question_model->getQuestionOptionsArrayByParentQuestion($parentQuestionId);
                                                             //   // }
                                                             // }
                                                             // else
                                                             // {
                                                             //      $questionoptionId =  $val['parent_question_option_id'];
                                                             // }
                                                              $parentQuestionOptions = $question_model->getQuestionOptionsArrayByParentQuestion($val['parent_question_id']);
                                                              $questionoptionId =  $val['parent_question_option_id'];
                                                            ?>
                                                          @if($parentQuestionOptions)
                                                              @foreach($parentQuestionOptions as $row)
                                                                  <option {{  $questionoptionId ==  $row['id'] ? 'selected' :''   }}  value="{{  $row['id'] }}">{{ $row['title'] }}</option>
                                                              @endforeach                                    
                                                          @endif
                                                      </select>
                                                  </div>
                                              </div>
                                          </div>
                                      </div>
                                    @endforeach
                                @endif
                              </div>
                             
                              <div class="ibox-body">
                                <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 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 = "{{ route('duplicate_questions_ajax',$questions->id) }}"
                                              data-source = "{{ $questions->id }}"
                                              data-cols = ",,,,,"
                                              data-search = "false"
                                              data-scroll_y = "200"
                                              data-scroll_x = "true"
                                              >
                                                  <thead class="thead-default thead-lg">
                                                       <tr>
                                                          <th width="5%">Question ID</th>
                                                          <th width="30%">Title</th>
                                                          <th width="30%">Options</th>
                                                          <th width="20%">Parent Question</th>
                                                          <th width="10%">Option</th>
                                                          <th width="5%">Actions</th>


                                                      </tr>
                                                  </thead>
                                              </table>
                                        </div>
                                </div> -->
                            </div>
                    </div>
                    @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 = "{{ route('duplicate_questions_ajax',$questions->id) }}"
                                      data-source = "{{ $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>
                      @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>{{ __('Option Text') }}</label>
                            <input class="form-control" name="option_text[]" data-validation1="required" type="text"  >
                        </div> 
                        <div class="form-group mb-4">
                            <label>{{ __('Option Order') }}</label>
                            <input class="form-control" name="option_order[]" data-validation1="required" type="number" >
                        </div> 
                        <div class="form-group mb-4">
                            <label>{{ __('Patient Narrative Text For This Option') }}</label>
                            <input class="form-control" name="option_narrative_text[]" data-validation1="required" type="text" >
                        </div> 
                        <div class="form-group mb-4">
                            <label>{{ __('Require Input Field') }}</label>
                            <select class="form-control" name="option_required_input[]" data-validation="required">
                                <option  value="{{config('constants.CONSTANT_REQUIRED_INPUT_INACTIVE')}}">No</option>
                                <option  value="{{config('constants.CONSTANT_REQUIRED_INPUT_ACTIVE')}}">Yes</option>
                            </select>
                        </div> 
                        <div class="form-group mb-4">
                            <label>{{ __('Require Input Field Label') }}</label>
                            <input class="form-control" name="option_required_input_label[]" data-validation1="required" type="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-body mb-9">
                      <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
                                     
                                     if ($complainId) 
                                     {
                                         $parentQuestionId = $parentQuestionId;

                                         $questionsArray = $question_model->getQuestionsArrayByComplainType($complainId,$questionId);
                                     }
                                     else
                                     {
                                          $parentQuestionId = $questions->parent_question_id;
                                     }
                                    ?>

                                   @if($questionsArray)

                                      @foreach($questionsArray as $row)
                                          <option {{  $row['id'] == $parentQuestionId ? 'selected' :'' }}  value="{{ $row['id'] }}" >{{ $row['name'] }}</option>                                   
                                      @endforeach                                    
                                   @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 " name="question_option_id" >
                                  <option value="">- Select -</option>
                                  <?php
                                     if ($parentQuestionId) 
                                     {
                                         $parentQuestionOptions = $question_model->getQuestionOptionsArrayByParentQuestion($parentQuestionId);

                                         if($questionoptionId)
                                         {
                                              //$questionoptionId = $questionoptionId;
                                         }
                                         else
                                         {
                                              $questionoptionId = $questions->question_option_id;
                                         }
                                     }
                                     else
                                     {
                                          $questionoptionId = $questions->question_option_id;
                                     }
                                    ?>
                                  @if($parentQuestionOptions)
                                      @foreach($parentQuestionOptions as $row)
                                          <option {{  $questionoptionId ==  $row['id'] ? 'selected' :''   }}  value="{{  $row['id'] }}">{{ $row['title'] }}</option>
                                      @endforeach                                    
                                  @endif
                              </select>
                          </div>
                      </div>
                      <div class="form-group mb-4">
                          <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" ><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="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>
                                    </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 src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
<script>
  $.validate({
    lang: 'en'
  });

     $(".btn-submit").click(function(){
      $(".related_question option").each(function(){
      });
     });
     


    $('.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).parent().parent().parent().addClass('active'); 
        // var refSelect = $(this).siblings().className();
        // var ref = $(this)
        // console.log(ref);
        // $(refSelect).html('<h1>mahmood</h1>');
        // var ref = $(this).parent().siblings().find('.jsSelectBox');

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

            $.ajax(
            {
                type:"GET",
                url: "{{ route('question_options_list') }}",
                data:
                {
                    question_id:$(this).val(),
                    _token:"{{ 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');

                    }
                }
            }); 
        }
        
    });

    $('.complain_types').change(function()
    {   
        // var link = document.getElementById('hideDiv');
        // link.style.display = 'none'; //or
        // link.style.visibility = 'hidden';
        updateQuestionListElement(html='');
        // updateOptionListElement(html='');
        if($('.complain_types').val()!='')
        {
          $('#parentQuestionAjaxId').addClass('is--loading');
            $.ajax(
            {
                type:"GET",
                url: "{{ route('chief_complains_list') }}",
                data:
                {
                    complain_type_id:$('.complain_types').val(),
                    _token:"{{ 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>";
                        });
                        updateQuestionListElement(html);
                        $('#parentQuestionAjaxId').removeClass('is--loading');
                    }
                }
            }); 
        }
       
        
    });
    // $('.js-question-dropdown').change(function()
    // {   
    //     updateOptionListElement(html='');
        
    //      if($('.js-question-dropdown').val()!='')
    //     {
    //         $.ajax(
    //         {
    //             type:"GET",
    //             url: "{{ route('question_options_list') }}",
    //             data:
    //             {
    //                 question_id:$('.js-question-dropdown').val(),
    //                 _token:"{{ csrf_token() }}"
    //             },
    //             success: function(result)
    //             {   
    //                 result = $.parseJSON(result);
    //                 if(result.data)
    //                 {
    //                     let html = "<div class='form-group mb-4'><label>Parent Question Option</label><select class='form-control' name='question_option_id'>";
    //                     $(result.data).each(function( key,row ) 
    //                     {
    //                        html += "<option value='"+row.id+"'>"+row.title+"</option>";
    //                     });
    //                     html += "</select></div>";
    //                     updateOptionListElement(html);
    //                 }
    //             }
    //         }); 
    //     }
        
    // });

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

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

    $('.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()
    {
      if($('.complain_types').val()!='')
      {
        $('#parentQuestionAjaxId').addClass('is--loading');
          $.ajax(
          {
              type:"GET",
              url: "{{ route('chief_complains_list') }}",
              data:
              {
                  complain_type_id:$('.complain_types').val(),
                  _token:"{{ 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>";
                      });
                      index = $('.related_question').length;
                      $(".related_question:eq("+(index-2)+")").html(html)
                      $('#parentQuestionAjaxId').removeClass('is--loading');
                  }
              }
          }); 
      }
    }
    // <?php
    // // Add branching option if empty
    // // if(empty($QuestionBranchingLogics) && $id)
    // // {
    // //   ?>
    // //   $('.js-add-branch').trigger('click');
    // //   <?php
    // // }
    // ?>

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

@section('scripts')
<script>
  DataTable.initDataTable('#duplicate_questions');
</script>
@endsection
<!-- <script 
@endsection