@extends('layouts.admin')
@section('content')
@can('user_create')
    <div style="margin-bottom: 10px;" class="row">
        <div class="col-lg-12">
            <a class="btn btn-success" href="{{route('admin.Apisettings.add')}}">
                {{ trans('global.add') }} {{ trans('cruds.user.title_singular') }}
            </a>
        </div>
    </div>
@endcan
<div class="card">
    <div class="card-header">
        {{ trans('cruds.user.title_singular') }} {{ trans('global.list') }}
    </div>

    <div class="card-body">
        <table class="table table-bordered table-striped table-hover datatable datatable-apisettings">
            <thead>
                <tr>
                    <th width="10">ID</th>
                    <th>Domain</th>
                    <th>User</th>
                    <th>Email</th>
                    <th>Status</th>
                    <th>Secret Key</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>

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



@endsection


@section('scripts')
@parent
<script>
$(function () {
  let dtButtons = $.extend(true, [], $.fn.dataTable.defaults.buttons);
  console.log(dtButtons);

  let dtOverrideGlobals = {
    buttons: [],
    processing: true,
    serverSide: true,
    retrieve: true,
    aaSorting: [],
    ajax: "{{ route('admin.Apisettings.index') }}",
    columns: [
        { data: 'id', name: 'id' },
        { data: 'domain', name: 'domain' },
        { data: 'user_id', name: 'user_id' },
        { data: 'email', name: 'email' },
        { data: 'status', name: 'status' },
        { data: 'secret_key', name: 'secret_key' },
        { data: 'actions', name: '{{ trans('global.actions') }}', orderable: false, searchable: false }  // Actions column (with buttons)
    ],
    orderCellsTop: true,
    order: [[1, 'desc']],
    pageLength: 10,
    columnDefs: [
      { width: '2%', targets: 0 },
      { width: '10%', targets: 1 },
      { width: '10%', targets: 2 },
      { width: '10%', targets: 3 },
      { width: '10%', targets: 4 },
      { width: '10%', targets: 5 },
      { width: '10%', targets: 6 }
    ],
  };

  let table = $('.datatable-apisettings').DataTable(dtOverrideGlobals);

  $('a[data-toggle="tab"]').on('shown.bs.tab click', function(e){
    $($.fn.dataTable.tables(true)).DataTable()
      .columns.adjust();
  });

});
</script>
@endsection