@extends('layouts.admin')
@section('page-title')
FAQs
@endsection

@section('content')


<div class="row">
    <div class="col-md-12">
    <div class="text-right">
            <button type="button" class="btn btn-primary addBtn" >
                Add New
            </button>
        </div>
        <br />
        <div id="accordion">
            @foreach($faqs as $faq)
            <div class="card">
                <div class="card-header">
                    <a class="card-link" data-toggle="collapse" href="#description{{$faq->id}}" > 
                        {{$faq->title}} 
                    </a>
                </div>  
                <div id="description{{$faq->id}}" class="collapse"   data-parent="#accordion">
                    <div class="card-body">
                    {{$faq->description}}
                    </div>
                    <div class = "card-footer">
                    <button class="btn btn-sm btn-warning btnEdit" data-id="{{$faq->id}}" >
                                <i class="fa fa-edit" aria-hidden="true"></i>
                    </button>
                    <a class="btn btn-sm btn-danger btnDelete" href="javascript:(void)" 
                        onclick="Delete({{ $faq->id }});" > 
                        <i class="fa fa-trash"></i>
                    </a>               
                    <form action="{{ route('faqs.destroy',$faq->id) }}" method="POST" style="display: none;"
                        id="delete-form-{{ $faq->id }}"  >                        
                        @csrf
                        @method('DELETE')                        
                    </form>
                </div>
                </div>
               
            </div>
            @endforeach
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="AddModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modalHeaderText">Add New FAQ</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <form method="POST" action="" >
            @csrf
            <input type="hidden" id="pkid" name="id" value="0" />
            <div class="modal-body">
            <div class="form-group">
                    <label for="logo">Title</label>
                    <input type="text" id = "txtTitle" name="title" class="form-control" required  />
                </div> 
                <div class="form-group">
                <label for="description">Description</label>
                <textarea id="txtDescription" name="description" rows="4" cols="50" class="form-control" required></textarea>
                    
                </div>                 
              
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
        </form>
      </div>
    </div>
  </div>

@endsection

@push('custom-js-scripts')

<script type="text/javascript">
     $('body').on('click', '.addBtn', function () {
        $("#pkid").val(0);       
        $("#txtCustomer").val('');
        $("#modalHeaderText").text('Add New FAQ');
        $('#AddModal').modal('show');
    });

    $('body').on('click', '.btnEdit', function () {
        var pkid = $(this).data('id');        
        $("#pkid").val(pkid);
        $.get("{{ route('faqs.index') }}" +'/' + pkid +'/edit', function (data) {
           $('#txtTitle').val(data.title);
           $('#txtDescription').val(data.description);
        });       
        
        $("#modalHeaderText").text('Edit FAQ');
        $('#AddModal').modal('show');
    });

    function Delete(id){
    if (confirm("Are you sure to delete?")) {
        event.preventDefault(); 
        document.getElementById('delete-form-' + id).submit();
    }
    return false;
   }

</script>
@endpush