@extends('app.app-master')

@section('content')

<div class="container">
   <div class="row">
      <div class="col-md-12 col-sm-3 col-xs-12">
         {{-- Quick Search --}}
            <div class="card opaque-white">
               <div class="card-header bg-darkblue">
                      QUESTIONS
               </div>
               <div class="card-body">
                 {{-- Session Messages --}}
                  @if (session('success'))
                  <div class="alert alert-success">
                      {{ session('success') }}
                  </div>
                  @endif
                  @if(session('deleted'))
                      <div class="alert alert-danger">
                          {{ session('deleted') }}
                      </div>
                  @endif
                  <div class="col-md-12">
                    
                    <!-- Button trigger modal -->
                    <button type="button" class="btn btn-success m-2" data-toggle="modal" data-target="#addQuestion"><i class="fas fa-plus"></i>
                      ADD QUESTION
                    </button>

     
                    {{-- Question Name--}}
                    <div class="bs-example">
                      <div class="accordion" id="accordionExample">
                        <div class="card">
                          @foreach($question as $questions)
                          <div class="card-header" id="headingOne">
                            <div class="row">
                            <div class="col-md-1"><button type="button" class="btn btn-link" data-toggle="collapse" data-target="#collapse{{$questions->id}}"><i class="fa fa-plus"></i></button></div> 
                              <div class="col-md-9"><h5 class="mb-0">{{$questions->question_details}}</h5></div>
                              <div class="col-md-2"><button type="button" class="btn btn-warning" data-toggle="modal" data-target="#editQuestion" data-id={{$questions->id}}><i class="fas fa-edit"></i></button> 
                              <a class="btn btn-danger" href="{{route('question.delete', $questions->id)}}" onclick="return confirm('Are you sure you want to delete this Question?')"><i class="fa fa-trash-alt"></i></a></div> 
                            </div>
                          </div>
                          <div id="collapse{{$questions->id}}" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
                            <div class="card-body">
                                @foreach($questions->answer AS $answer)
                                <div class="row">
                                      <div class="col-md-6"><p>{{$answer->answer_details}}</p></div>
                                      <div class="col-md-6"><button type="button" class="btn btn-warning"><i class="fas fa-edit"></i></button> 
                                        <button type="button" class="btn btn-danger"><i class="fa fa-trash-alt"></i></button>
                                      </div>
                                </div>
                                @endforeach
                            </div>  
                          </div>
                          @endforeach
                        </div>
                      </div>

                      </div>
                    </div>
                  </div>
                </div>
                  
          </div>
        </div>
      </div>
   </div>
</div>
 {{--Add Question--}}
 <div class="modal fade" id="addQuestion" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header bg-darkblue">
          <h5 class="modal-title" id="exampleModalLabel">ADD QUESTION</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
        <form method="POST" action={{route('question.store')}}>
          @csrf
          <div class="form-group">
              <label>Question</label>
              <input type="text" class="form-control" id="question" name="question_details" placeholder="Enter question" required>           
          </div>
              <label>Answers</label>  
            <div class="input-group control-group after-add-more input_fields_wrap">
              <input type="text" name="answer_details[]" class="form-control" placeholder="Enter answer">
              <div class="input-group-btn">
                <button class="btn btn-success add_field_button" type="button"><i class="fas fa-plus"></i> Add</button>
              </div>
            </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-success" aria-hidden="true">Save changes</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal" aria-hidden="true">Close</button>
        </div>
      </form>
      </div>
    </div>
  </div>

      {{--Edit Question Modal--}}
    <div class="modal fade" id="editQuestion" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content edit-question">
         
        </div>
      </div>
    </div>

@endsection

@section('js')
  <script type="text/javascript">

  // Add new field in Add Question Modal
    $(document).ready(function() {
      var max_fields = 5; //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('<div class="input-group control-group after-add-more input_fields_wrap"><input type="text" name="answer_details[]" class="form-control" placeholder="Enter answer" required><div class="remove_field input-group-btn"><button class="btn btn-danger" type="button"><i class="fas fa-trash-alt"></i>Remove</button></div></div></div>'); //add input box
        }
      });
    
      $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
      })
  });


  // Add new field in Edit Question Modal
  $(document).ready(function() {
      var max_fields = 5; //maximum input boxes allowed
      var wrapper = $(".input_fields_wrap2"); //Fields wrapper
      var add_button = $(".edit_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('<div class="input-group control-group after-add-more input_fields_wrap2"><input type="text" name="answer_details[]" class="form-control" placeholder="Enter answer" required><div class="remove_field input-group-btn"><button class="btn btn-danger" type="button"><i class="fas fa-trash-alt"></i>Remove</button></div></div></div>'); //add input box
        }
      });
    
      $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
      })
  });

  // AJAX Edit Question Modal
  $(document).ready(function(){
        $('#editQuestion').on('shown.bs.modal', function (e) {
        
            var question_id = $(e.relatedTarget).data('id');
            $.ajax({
                type : 'POST',
                headers: {'X-CSRF-TOKEN':$('meta[name="csrf-token"]').attr('content')},
                url : "{{route('question.editQuestionModal')}}", 
                data :   {id:question_id},
                success : function(data){
                $('.edit-question').html(data);
                }
            });
        })
    });

  </script>
@endsection