@extends('layouts.master')

@section('content')
<div class="container">
	<div class="card card-custom gutter-b">
		<div class="card-header flex-wrap py-3">
			<div class="card-title">
				<h3 class="card-label">List of Commissions</h3>
			</div>
			<div class="card-toolbar">
                <div class="form-group row">
                    <a class="btn btn-info" href="{{ route('report.comm.export', ['role' => 3]) }}">{{__('Export Commissions')}}</a>
                </div>
			</div>
		</div>
		<div class="card-body">
			<!--begin: Datatable-->
			<table class="table table-bordered table-checkable" id="commission-table">
				<thead>
					<tr>
						<th>No.</th>
						<th>Name</th>
                        <th>Email</th>
						<th>Phone</th>
						<th>Total Commissions</th>
                        <th>Total Sales</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
			<!--end: Datatable-->
		</div>
	</div>
</div>
@endsection
@push('script')
<script type="text/javascript">
	var table = $('#commission-table').DataTable({
        responsive: false,
        scrollX: true,
        lengthMenu: [10, 20, 50, 100],
        columns: [
            {
                "data": null,
                "orderable": false,
                "render": function (data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    if(row.detail != null && row.detail.first_name != null)
                        return '<span>'+row.detail.first_name+' '+row.detail.last_name+'</span>';
                    else
                        return '<span>'+row.name+'</span>';
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    return '<span>'+row.email+'</span>';
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    if(row.detail != null && row.detail.phone != null)
                        return '<span>'+row.detail.phone+'</span>';
                    else
                        return '<span>-</span>';
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    if(row.total_comm != null)
                        return '<span>RM '+row.total_comm.toFixed(2)+'</span>';
                    else
                        return '<span>RM '+(0.00).toFixed(2)+'</span>';
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    if(row.total_sales != null)
                        return '<span>RM '+row.total_sales.toFixed(2)+'</span>';
                    else
                        return '<span>RM '+(0.00).toFixed(2)+'</span>';
                }
            },
        ],

        ajax: {
            method : 'get',
            url: "{{ route('report.commissions.dt') }}",
            dataSrc:"data",
            dataType : "json"
        }
    });
</script>
@endpush