@extends('layouts.main_layout')
@section('title', $label)

@section('icon-breadcrumbs',$icon)

@section('content')
{{ Breadcrumbs::render($breadcrumbs) }}
<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>Judul</th>
              <th>Dekripsi</th>
              <th>Tanggal</th>
              <th width="150px">Action</th>
            </tr>
          </thead>
          <tbody>
          </tbody>
      </table>  
  </div>
</div>
<!-- <div class="modal" id="modal-add-gallery">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
      	<div class="modal-header">
          <h4 class="modal-title">Tambah File</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
      </div>
  </div>
</div> -->
@endsection

@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: "{{ $datatables }}",
              columns: [
                  {data: 'DT_RowIndex', name: 'DT_RowIndex'},
                  {data: 'title', name: 'title'},
                  {data: 'description', name:"description"},
                  {data: 'created_at', name:"created_at"},
                  {
                      data: 'action', 
                      name: 'action', 
                      orderable: true, 
                      searchable: true
                  },
              ],
              columnDefs:[
               
              
              ]
          });

    $("#event-table").on('click','.btn-delete',function(){
        var val = $(this).attr('id-media');
         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