@extends('backend.layouts.main')

@section('panel')
    <h4 class="fw-bold py-3 mb-3">🏆 Riwayat Pembagian Bonus Rollingan</h4>

    <div class="card">
        <div class="card-datatable table-responsive pt-3">
            <table id="table-history" class="table table-bordered table-sm table-hover w-100">
                <thead class="table-dark">
                    <tr>
                        <th class="text-center" width="5%">No</th>
                        <th class="text-center">Tanggal Dibagikan</th>
                        <th class="text-center">Username</th>
                        <th class="text-center">Jenis Bonus</th>
                        <th class="text-center">Total TO Terkumpul</th>
                        <th class="text-center">Bonus Cair</th>
                    </tr>
                </thead>
                <tbody>
                    {{-- Data diisi otomatis oleh DataTables AJAX --}}
                </tbody>
            </table>
        </div>
    </div>
@endsection

@push('script')
<script type="text/javascript">
    $(document).ready(function() {
        $('#table-history').DataTable({
            processing: true,
            serverSide: true,
            pageLength: 25, // 🟢 Set limit default ke 25 data
            lengthMenu: [[25, 50, 100, 500], [25, 50, 100, 500]],
            ajax: "{{ route('admin.rollingan.history') }}",
            columns: [
                {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false, className: 'text-center'},
                {data: 'created_at', name: 'created_at', className: 'text-center'},
                {data: 'username', name: 'users.username', className: 'text-center'},
                {data: 'bonus_type', name: 'bonus_type', className: 'text-center'},
                {data: 'total_turnover', name: 'total_turnover', className: 'text-end pe-3'},
                {data: 'bonus_amount', name: 'bonus_amount', className: 'text-end pe-3'}
            ]
        });
    });
</script>
@endpush