@extends('admin.layouts.container')

@section('content')
<div class="side-title">
    <h3>{{ $head ?? '' }}</h3>
</div>

<div class="border-item">
    <form class="form-row" method="post" action="{{ $action }}">
        @if($question ?? ''  && $question->id)
            @method('PUT')
        @endif
        @CSRF

        <div class="form-group col-lg-6">
            <label>{{ meta('name', getCurrentLocale()) ?? __('questions.question') }} </label>
            <input type="text" class="form-control {{ $errors->has('question') ? 'is-invalid' : '' }}" name="question" placeholder="{{ meta('question', getCurrentLocale()) ??__('questions.question') }}" value='{{ old("question", $question->question ?? "") }}'/>
        </div>
<div class="form-group col-lg-6"></div>
<div class=" col-12">
<div class="row" @if($question ?? ''  && $question->id) style="display:none" @endif id="answers">
@if($question ?? ''  && $question->id)
                   @foreach($answers as $key_answer=>$row_answer)
                     
                     
                       <div class="row pricing-list-item border-item mb-4 form-group col-12"  style="background-color: rgba(21,97,203,0.1);">
          <div class="form-group col-lg-6">
            <label>{{ __('questions.answer')}} </label>
            <input type="text" class="form-control" name="questions[{{$key_answer}}][answer]" placeholder="{{ __('questions.answer')}}" value="{{$row_answer->answer}}" />
            </div>
            <div class="col-lg-12">
            <div class="row"id="answer{{$key_answer}}">
                @foreach(questions($row_answer->id) as $key_question=>$question)
                
                <div class="row pricing-list-item border-item mb-4 form-group col-12"  >
          <div class="form-group col-lg-6">
            <label>{{ __('questions.question')}} </label>
            <input type="text" class="form-control" name="questions[{{$key_answer}}][questions][{{$key_question}}][question]" placeholder="{{ __('questions.question')}}" value="{{$question->question}}" />
            </div>
            <div class="form-group col-lg-6"></div>
            @foreach(answers($question->id) as $key=>$row)
            <div class="col-lg-12">
            <div class="row"id="question{{$key_answer.$key_question}}">
                <div class="form-group col-lg-6">
            <label>{{ __('questions.answer')}} </label>
            <input type="text" class="form-control" name="questions[{{$key_answer}}][questions][{{$key_question}}][answers][{{$key}}][answer]" placeholder="{{ __('questions.answer')}}" value="{{$row->answer}}" />
            </div>
            <div class="form-group col-lg-6"></div>
            </div>
            </div>
           
@endforeach
                      <div class="col-lg-12">
       <a style="cursor: pointer;" data-id="{{count(answers($question->id))}}" row-id="{{$key_question}}" parent-id="{{$key_answer}}"  onclick="addanswers(this)" class="btn_1 gray "><i class="fa fa-fw fa-plus-circle"></i>{{__("questions.add_answer")}}</a>
                   
</div>
        </div>  
                
        @endforeach
                
            </div>
            </div>
           
            <div class="col-lg-12">
       <a style="cursor: pointer;" data-id="{{count(questions($row_answer->id))}}" row-id="{{$key_answer}}"  onclick="addquestion(this)" class="btn_1 gray "><i class="fa fa-fw fa-plus-circle"></i>{{__("questions.add_question")}}</a>
                   
</div>
        </div>
        @endforeach
        @endif
                </div>
                </div>
<div class="col-lg-12">
       <a style="cursor: pointer;" @if($question ?? ''  && $question->id) data-id="{{count($answers)}}" @else data-id="0" @endif  onclick="addanswer(this)" class="btn_1 gray "><i class="fa fa-fw fa-plus-circle"></i>{{__("questions.add_answer")}}</a>
                   
</div>
      

        <div class="text-center mt-5 col-12">
            <button class="butn"><span>{{ __('dashboard.save') }}</span></button>
        </div>
    </form>
</div>

@endsection

@section('inner_js')

<script>
    function addquestion(elem){
       
        var num = $(elem).attr('data-id');
        var target = $(elem).attr('row-id');
        
        var newrow = parseInt(num)+1; 
        $(elem).attr('data-id', newrow);
        
         $.ajax({
          url : urls+'/'+num+','+target,
          type : 'GET',
          data : 'nothing',
          dataType : 'json',
          success:function(data)
          {
            $('#answer'+target).append(data);
          }
        })
    }
     function addanswers(elem){
       
        var num = $(elem).attr('data-id');
        var target = $(elem).attr('row-id');
        var parent = $(elem).attr('parent-id');
        
        var newrow = parseInt(num)+1; 
        $(elem).attr('data-id', newrow);
        
         $.ajax({
          url : url_anwers+'/'+num+','+target+','+parent,
          type : 'GET',
          data : 'nothing',
          dataType : 'json',
          success:function(data)
          {
            $('#question'+parent+target).append(data);
          }
        })
    }
    function addanswer(elem){
        $("#answers").css("display", "block");
        var num = $(elem).attr('data-id');
        
        var newrow = parseInt(num)+1; 
        $(elem).attr('data-id', newrow);
        
         $.ajax({
          url : urls_answer+'/'+num,
          type : 'GET',
          data : 'nothing',
          dataType : 'json',
          success:function(data)
          {
            $('#answers').append(data);
          }
        })
    }
</script>
    <!-- Editor JS files -->
{{--    <script src="{{ asset('/assets/admin/js/lib/tinymce.min.js') }}"></script>--}}
            <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
    <script>
        let route_prefix = "{{ url(config('lfm.prefix')) }}",
            url = "{{url('/')}}/",
            urls = "{{url('/')}}/admin/addquestion",
            urls_answer = "{{url('/')}}/admin/addanswer",
            url_anwers = "{{url('/')}}/admin/addanswers",
            imagePath = "{{asset('')}}";
    </script>
    <script src="{{ asset('assets/admin/js/editor.js') }}"></script>
    <script src="{{ asset('assets/admin/js/lfm.js') }}"></script>
@endsection