@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;
}

 <style>

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

</style>
    <div class="page-content fade-in-up">
     <div class="row">
        <div class="col-md-12">
            <div class="ibox">
                <form class="form-purple" action="{{ $route }}" method="post" >
                    <div class="ibox-head">
                        <div class="ibox-title">
                            <!-- {{ $id == 0 ? 'Add ' :'Edit '   }} -->
                            {{ $heading}}
                        </div>
                    </div>
                    <div class="ibox-body col-md-8">
                        <div class="form-group mb-4">
                            <label>{{ __('Question Category') }}</label>
                            <select class="form-control" name="category" data-validation="required">
                                @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>
                        <hr>
                        <!-- <div class="form-group mb-4" id="hideDiv">
                            <label>{{ __('Parent Question') }}</label>
                            <select class="form-control related_question" name="old_option_question_id">
                                <option value="">Option For Parent Question</option>
                            </select>
                        </div> -->
                        <div class="js-question-dropdown">
                            <div class='form-group mb-4'><label>Parent Question</label>
                                <select class='form-control related_question' name='question_id'>
                                    <option>- Select - </option>
                                    @if($questionsArray)
                                    @foreach($questionsArray as $row)
                                        <option {{  $row['name'] ? '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'>
                                    <option>- Select - </option>
                                    @if($questionOptions)
                                    @foreach($questionOptions as $row)
                                        <option {{  $row->title ? 'selected' :''   }}  value="{{ $row->id }}">{{ $row->title }}</option>
                                    @endforeach                                    
                                    @endif
                                </select>
                            </div>
                        </div>
                        <hr>
                        <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="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>
                        <hr>
                         <!-- <div class="form-group mb-4">
                            <label>{{ __('Question Sort Order') }}</label>
                            <input class="form-control" name="sort_order" data-validation="required" type="text" value="{{@$questions->sort_order}}">
                        </div>  -->
                        <div class="js-options">
                                 @if($questionOptions)
                                    @foreach($questionOptions as $row)
                                        <div class="mb-8">
                                            <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>  
                    <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>
                </form>
            </div>
        </div>
    </div>
</div>
<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>  
    <hr>
    </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 type="text/javascript">
    $(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $("#add_field_button"); //Add button ID
    
    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<label>{{ __('Question') }}</label><div><input class="form-control" type="text" name="questionOptions[]"/><label>{{ __('Question Options Sort Order') }}</label><input class="form-control" name="question_options_sort_order[]" data-validation="required" type="text" value=""><button href="#" id="remove_field" class="float-lg-right btn btn-outline-success btn-icon-only btn-circle btn-sm btn-thick"><i class="la la-minus"></i></button></div>'); //add input box
        }
    });
    
    $(wrapper).on("click","#remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});
</script> -->
@endsection