{{\App::setLocale(Session::get('locale'))}} 
@extends('user.layout.app')
@section('title', trans('Point Report'))
@section('content-heading',trans('Point Report'))
@section('content')

<div class="card">
	<div class="card-header">@lang('Point Report')</div>
	<div class="card-body">
		<table id="tblReport" class="table table-bordered" style="width:100%">				
			<thead>
				<tr>
					<th>@lang('word.no#')</th>
					<th>@lang('word.amount')</th>
					<th>@lang('word.balance')</th>
					<th>@lang('word.description')</th>
					<th>@lang('word.date')</th>	
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
	</div>
</div>
		
@endsection
@section('extra-script')
	@includeIf('components.datatable')
	<script>
	$(function() {
		$("#tblReport").DataTable({
			responsive: !0,
			oLanguage: {
				sProcessing: "@lang('word.processing')...",
				sInfoFiltered: "@lang('datatable.sInfoFiltered')",
				sInfo: "@lang('datatable.sInfo')",
				sLengthMenu: "@lang('datatable.sLengthMenu')",
				sSearch: "@lang('datatable.sSearch')",
				sEmptyTable: "@lang('datatable.sEmptyTable')",
				sInfoEmpty: "@lang('datatable.sInfoEmpty')",
				oPaginate: {
					sPrevious: "@lang('datatable.sPrevious')",
					sNext: "@lang('datatable.sNext')"
				}
			},
			scrollX: !0,
			info: !1,
			bFilter: !1,
			ordering: !1,
			bLengthChange: !1,
			ordering: !1,
			processing: !0,
			serverSide: !0,
			ajax: '{{ route("report.point.data") }}',
			columns: [{
				data: "DT_RowIndex",
				name: "DT_RowIndex"
			}, {
				data: "amount",
				name: "amount"
			}, {
				data: "balance",
				name: "balance"
			}, {
				data: "description",
				name: "description"
			}, {
				data: "created_at",
				name: "created_at"
			}],
			rowCallback: function(row, data, index) {
				console.log(data['amount']);
				if (data['amount'] > 0) {
					$(row).find('td:eq(1)').css('color', 'green');
				}else{
					$(row).find('td:eq(1)').css('color', 'red');
				}
			}
		})
	});
	</script>
@endsection