@extends('physician.layouts.master')
@section('content')
      @if (\Session::has('error'))
        <div class="alert alert-danger">
            {!! \Session::get('error') !!}
        </div>
    @endif
    @if (\Session::has('success'))
     
        <div class="alert alert-success">
            {!! \Session::get('success') !!}
        </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}}</h1>
            <div class="page-content fade-in-up">
                <form class="form-purple" action="{{ $route }}" method="post" >
                    <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-validation="required">
                                                <option value="">- Select -</option>
                                                @if($categories)
                                                    @foreach($categories as $row)
                                                        <option {{ $questions->category_id == $row->id ? 'selected' :''   }} value="{{ $row->id }}">{{ $row->title }}</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-validation="required">
                                                        <option value="">- Select -</option>
                                                        @if($complain_types)
                                                            @foreach($complain_types as $row)
                                                                <option {{ $questions->complain_type_id == $row->id ? 'selected' :''   }} value="{{ $row->id }}">{{ $row->name }}</option>
                                                            @endforeach
                                                        @endif
                                                    </select>
                                            </div>
                                        <div class="form-group mb-4">
                                            <label>{{ __('Question Title') }}</label>
                                            <input class="form-control" name="name" data-validation="required" type="text"  value="{{$questions->name}}">
                                        </div>
                                           
                                     <div class="js-options">
                                            @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-validation="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-validation="required" type="text" 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-validation="required" type="text" placeholder="" >
                                                        </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</label>
                                                    <select class="form-control related_question" name="parent_question_id" data-validation="required">
                                                         <option value="">- Select -</option>
                                                         @if($questionsArray)
                                                            @foreach($questionsArray as $row)
                                                                <option {{  $row['id'] == $questions->parent_question_id ? '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</label>
                                                    <select class="form-control " name="question_option_id" data-validation="required">
                                                        <option value="">- Select -</option>
                                                        @if($parentQuestionOptions)
                                                            @foreach($parentQuestionOptions as $row)
                                                                <option {{  $questions->question_option_id == $row->id ? 'selected' :''   }}  value="{{ $row->id }}">{{ $row->title }}</option>
                                                            @endforeach                                    
                                                        @endif
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                </div>
                            </div>
                    </div>
                </form>
                <div class="js-options-controll" style="display: none;">
                                        <div class="mb-8">
                                            <div class="form-group mb-4">
                                                <label>{{ __('Option Text') }}</label>
                                                <input class="form-control" name="option_text[]" data-validation="required" type="text" placeholder="" >
                                            </div> 
                                            <div class="form-group mb-4">
                                                <label>{{ __('Option Order') }}</label>
                                                <input class="form-control" name="option_order[]" data-validation="required" type="text" placeholder="" >
                                            </div> 
                                            <div class="form-group mb-4">
                                                <label>{{ __('Patient Narrative Text For This Option') }}</label>
                                                <input class="form-control" name="option_narrative_text[]" data-validation="required" type="text" placeholder="" >
                                            </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()!='')
        {
            $.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);
                    }
                }
            }); 
        }
        
    });

    $('.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()!='')
        {
            $.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);
                    }
                }
            }); 
        }
       
        
    });
    // $('.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>
<!-- <script 
@endsection