@extends('layouts.admin')

@section('page-title', trans('crm.reports').' - '.$title)

@section('content')

    <div class="page-header page-header-light">
        <div class="page-header-content header-elements-md-inline">
            <div class="page-title d-flex">
                <h4><a href="javascript:history.back()" style="color: black;"><i class="icon-arrow-left52 mr-2"></i></a> <span class="font-weight-semibold">Client Balances</span></h4>
            </div>

        </div>
    </div>

    @include('partials.messages')

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <table class="table" id="balances-table">
                        <thead>
                            <th>@lang('crm.id')</th>
                            <th>@lang('crm.client')</th>
                            <th>@lang('crm.deposits')</th>
                            <th>@lang('crm.withdrawals')</th>
                            <th>Balance</th>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@stop

@section('scripts_scope')

    <script>
        $(document).ready(function () {
            let table = $('#balances-table').DataTable({
                'processing': true,
                'serverSide': true,
                'serverMethod': 'post',
                'ajax': {
                    'url': '{{ url('admin/reports/getBalancesReport') }}'
                },
                'columns': [
                    {data: 'id'},
                    {data: 'customer'},
                    {data: 'deposits'},
                    {data: 'withdrawals'},
                    {data: 'balance'},
                ],
            });
        });

    </script>

@stop