@extends('Admin.Layouts.app')
@section('title')
Comment
@endsection
@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">
<div class="col-lg-12 grid-margin stretch-card">
  <div class="card">
    <div class="card-body">
      <h4><i class="ti-arrow-left" onclick="RedirectPostPage()"></i></h4>
      <p class="card-description">
        Comment list
      </p>
      <div class="table-responsive">
        <table class="table table-striped data-table">
          <thead>
            <tr>
              <th>
                Id
              </th>
              <th>
                User image
              </th>
              <th>
                User name
              </th>
              <th>
                Comment
              </th>
              <th>
                Action
              </th>
            </tr>
          </thead>
          <tbody>

          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

@endsection

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

    var table = $('.data-table').DataTable({
      processing: true,
      serverSide: true,
      ajax: "{{ route('comment.list',$id) }}",
      columns: [{
          data: 'id',
          name: 'id'
        },
        {
          data: 'userimage',
          name: 'userimage'
        },
        {
          data: 'user_name.user_name',
          name: 'UserName.user_name',
          render: function(data, type, full, meta) {
            return '<div style="width:100px; line-height: 1.2; text-wrap: wrap;">' + data + '</div>';
          }
        },
        {
          data: 'comment',
          name: 'comment',
          render: function(data, type, full, meta) {
            return '<div style="width:300px; line-height: 1.2; text-wrap: wrap;">' + data + '</div>';
          }
        },
        {
          data: 'action',
          name: 'action',
          orderable: false,
          searchable: false
        },
      ]
    });

  });

  function RedirectPostPage() {

    window.location.replace("{{route('post')}}")
  }

  function commentDetele(id) {
    Swal.fire({
      title: "Are you sure?",
      text: "You won't remove comment!",
      icon: "warning",
      showCancelButton: true,
      confirmButtonColor: "#3085d6",
      cancelButtonColor: "#d33",
      confirmButtonText: "Yes, delete it!"
    }).then((result) => {
      if (result.isConfirmed) {
        // Make an Ajax request to delete the data
        $.ajax({
          url: `{{ route('comment.delete', ':id') }}`.replace(':id', id),
          type: 'DELETE',
          headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          success: function(data) {

            Swal.fire({
              title: "Deleted!",
              text: "Your comment has been deleted.",
              icon: "success",
              showConfirmButton: false,
            });
            location.reload();
          },
          error: function(xhr, status, error) {
            console.error(xhr.responseText);
          }
        });
      }
    });
  }
</script>
@endsection