@extends('layout')
@section('title','Pengguna')
@section('content')
<div class="card">
	<div class="card-body">
		<a href="{{ route('user.create') }}" class="btn btn-primary">
			<i class="fas fa-user-plus"></i> Tambah Pengguna
		</a>
		<table class="table table-bordered" id="data-table" style="width: 100%">
			<thead>
				<tr>
					<th>#</th>
					<th>Nama</th>
					<th>Email</th>
					<th>Level</th>
					<th>Aksi</th>
				</tr>
			</thead>
		</table>
	</div>
</div>
@endsection
@section('js')
<script>
	$(document).ready(function() {
			var table = $('#data-table').DataTable({
					processing: true,
					serverSide: true,
					bFilter: false,
					ajax: "{{ route('user') }}",
					order: [[1, 'desc']],
					stateSave: true,
					columns: [
							{data: null, name: 'id'},
							{data: 'name', name: 'name'},
							{data: 'email', name: 'email'},
							{data: 'role', name: 'role'},
							{data: null},
					],
					columnDefs: [
					{
							targets: -1,
							data: null,
							orderable: false,
							render: function (data, type, row) {
									return `
											<a class="btn btn-sm btn-primary mr-2" href="{{ url('user') . '/edit' }}/${row.id}">Edit</a>
											<a class="btn btn-sm btn-danger" href="{{ url('user') . '/delete' }}/${row.id}">Hapus</a>
									`;
							},
					}
					],
					createdRow: function (row, data, dataIndex) {
							// Set the sequential number starting from 1
							$('td', row).eq(0).html(dataIndex + 1);
					}
			});
	})
</script>
@endsection