@extends('layouts.main_layout')
@section('title', $label)
@push('styles')
<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet">
@endpush
@push('scripts')
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $('#event-table').DataTable({
              processing: true,
              serverSide: true,
              ajax: "{{ route('forum.datatables') }}",
              columns: [
                  {data: 'DT_RowIndex', name: 'DT_RowIndex'},
                  {
                    data:'image',
                    orderable: false,
                    name:'image',
              
                  },
                  {data: 'title', name: 'title'},
                  {data: 'created_at', name:"created_at"},
                  {data: 'seen', name:"seen"},
                  {data: 'count_replies', name:"count_replies"},
                  {data: 'status', name:"status"},
                  {
                      data: 'action', 
                      name: 'action', 
                      orderable: true, 
                      searchable: true
                  },
              ],
              columnDefs:[
               {
                    targets: 1,
                    className: "text-center",
               },
               {
                    targets: 4,
                    className: "text-center",
               },
               {
                    targets: 5,
                    className: "text-center",
               },
              {
                    targets: 6,
                    className: "text-center",
               },
               {
                    targets: 7,
                    className: "text-center",
               }
              ]
          });

    $("#event-table").on('click','.btn-pinned',function(){
      var val = $(this).attr('id-event');
      swal({
            title: "Peringatan",
            text: "Highlight data ini?",
            showCancelButton: true,
            closeOnConfirm: true,
            dangerMode: false,
            confirmButtonText: 'IYA',
            cancelButtonText: "TIDAK",
        },function(confirm){
          if(confirm){
            $.ajax({
              headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            type: "POST",
            url: val,
            data:{_method: "POST", },
            dataType: "json",
            success: function(res){
              if(res.status){
                  toastr.success(res.message);
                  $('#event-table').DataTable().ajax.reload();
              }else{
                  toastr.error(res.message);
              }

            },
            error: function (xhr, ajaxOptions, thrownError) {
              ajaxError(xhr.status, xhr.statusText)
            }
          })
          }
        })
    });

    $("#event-table").on('click','.btn-delete',function(){
        var val = $(this).attr('id-event');
         swal({
            title: "Peringatan",
            text: "Hapus data ini?",
            showCancelButton: true,
            closeOnConfirm: true,
            dangerMode: true,
            confirmButtonText: 'HAPUS',
            cancelButtonText: "TIDAK",
        },function(confirm){
          if(confirm){

            $.ajax({
              headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            type: "DELETE",
            url: val,
            data:{_method: "DELETE", },
            dataType: "json",
            success: function(res){
              if(res.status){
                  toastr.success(res.message);
                  $('#event-table').DataTable().ajax.reload();
              }else{
                  toastr.error(res.message);
              }

            },
            error: function (xhr, ajaxOptions, thrownError) {
              ajaxError(xhr.status, xhr.statusText)
            }
          })
          }
        })
      });
    })
  </script>
@endpush
@section('icon-breadcrumbs',$icon)

@section('content')
{{ Breadcrumbs::render($breadcrumbs,$data) }}
<div class="card">
  <div class="card-body table-responsive">
    <a href="{{$create}}" class="btn btn-primary btn-sm">TAMBAH DATA</a>
      <table class="table table-bordered" id="event-table">
          <thead>
            <tr>
              <th>No</th>
              <th>Foto</th>
              <th>Judul</th>
              <th>Tanggal</th>
              <th>Dilihat</th>
              <th>Replys</th>
              <th>Status</th>
              <th width="150px">Action</th>
            </tr>
          </thead>
          <tbody>
          </tbody>
      </table>  
  </div>
</div>
@endsection