@extends('root')
@section('title', 'WA Topups')

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'WA Topups',
        'links' => [
            ['url' => route('dashboard'), 'label' => 'Dashboard'],
        ],
        'current' => 'WA Topups'
    ])

    <div class="card card-body">
        <div class="table-responsive">
            <table class="table table-striped" id="datatable-topups">
                <thead>
                    <tr>
                        <th>Client</th>
                        <th>Amount</th>
                        <th>Metode</th>
                        <th>Status</th>
                        <th>Dibuat</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function () {
    $('#datatable-topups').DataTable({
        processing: true,
        serverSide: false,
        autoWidth: false,
        ajax: {
            url: '{{ route('admin.topups.data') }}',
            dataSrc: 'data'
        },
        columns: [
            {
                data: 'client.name',
                name: 'client.name',
                defaultContent: '-'
            },
            {
                data: 'amount',
                name: 'amount',
                render: function (data) {
                    return 'Rp ' + parseFloat(data).toLocaleString('id-ID');
                }
            },
            { data: 'method', name: 'method' },
            { data: 'status', name: 'status' },
            { data: 'created_at', name: 'created_at' },
        ]
    });
});
</script>
@endpush