@extends('layouts.app')
@section('title', 'FAQs List')

@section('content')
<section class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1>FAQs</h1>
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
          <li class="breadcrumb-item active">FAQs</li>
        </ol>
      </div>
    </div>
  </div>
</section>

<section class="content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-header d-flex justify-content-end">
            <a href="{{ route('faqs.create') }}" class="btn btn-primary mr-2">
              <i class="fa fa-plus nav-icon"></i> Add
            </a>
          </div>
          <div class="card-body">

            <table id="faq-table" class="table table-bordered table-striped">
              <thead>
                <tr>
                  <th>Faq Id</th>
                  <th>Question</th>
                  <th>Answer</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody></tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
@endsection

@section('scripts')
<script src="{{asset('js/custom.js')}}"></script>

<script>

  $.ajaxSetup({
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
  });


  $(function() {


    const table = $('#faq-table').DataTable({
      processing: true,
      serverSide: true,
      ajax: {
        url: '{{ route("faqs.index") }}',
        data: function(d) {
          d.type = $('#filter-type').val();
          d.name = $('#filter-name').val();
        }
      },
      columns: [
        {
          data: 'id',
          name: 'id',
          defaultContent: '-',
        },
        {
          data: 'question',
          name: 'question',
          defaultContent: '-',
        },
        {
          data: 'answer',
          name: 'answer',
          defaultContent: '-',
        },
        {
          data: 'actions',
          name: 'actions',
          orderable: false,
          searchable: false
        }
      ],
      order: [
        [0, 'desc']
      ],
      language: {
        emptyTable: "No FAQs available."
      }
    });

    // Filter by type
    $('#filter-type').on('change', function() {
      populateName(this.value);
      table.ajax.reload();
    });

    // Filter by name
    $('#filter-name').on('change', function() {
      table.ajax.reload();
    });
    populateName(null);

    $(document).on('click', '.delete-btn', function(e) {
      e.preventDefault();
      var deleteUrl = '/admin/faqs/delete/' + $(this).data('id');
      var faqId = $(this).data('id');

      if (confirm('Are you sure you want to delete this FAQ detail?')) {
        $.ajax({
          url: deleteUrl,
          type: 'DELETE',
          success: function(response) {
            alert(response.message);
            table.ajax.reload();
          },
          error: function(xhr) {
            alert('Error: ' + xhr.responseJSON.message);
          }
        });
      }
    });
  });
</script>
@endsection