@extends('physician.layouts.master')
@section('content')

  <?php
   $complainId =  session('complainTypeId');
   $parentQuestionId =  session('parentQuestionId');
   $questionoptionId =  session('questionoptionId');
   $questionId =  session('questionId');
   $questionOptionsArray =  session('questionOptionsArray');
   // $finalQuestionOptionsArray =  session('finalQuestionOptionsArray');
   // dd($duplicateQuestionsCount);   
   $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" 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" 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="ibox">
                                        <div class="ibox-head">
                                             <div class="ibox-title">Question Branching Logic</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;
                                                           }
                                                          ?>

                                                         @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>
                                </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="20%">Parent Question</th>
                                                  <th width="10%">Parent Option</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>

<!-- 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'
  });
    $('.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()
    {   
        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>";
                        });
                        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)
    {
        $('.js-question-option-dropdown select').html(html);
    }

</script>

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