@extends('backend.template-admin')
@section('content')
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
    <script src="{{ asset('assets/js/tailwind.datatable.js') }}"></script>
    <link rel="stylesheet" href="{{ asset('assets/css/datatable.tailwind.css') }}">

    <section>
        <div class="p-6 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
            <table id="example" class="display w-full">
                <thead class="bg-orange-500">
                    <tr>
                        <th class="text-white">No</th>
                        <th class="text-white">Kempen</th>
                        <th class="text-white">User</th>
                        <th class="text-white">Jumlah Sumbangan</th>
                        <th class="text-white">Status</th>
                        <th class="text-white">Tanggal</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>

    </section>

    <script>
        $(document).ready(function() {
            let table = new DataTable('#example', {
                processing: true,
                serverSide: true,
                ajax: "{{ url('/rekod/getAll') }}",
                columns: [{
                        data: null,
                        name: 'no',
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    },
                    {
                        data: 'kempen',
                        name: 'kempen',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'user',
                        name: 'user.name'
                    },
                    {
                        data: 'nominal',
                        name: 'nominal'
                    },
                    {
                        data: 'status_transaksi',
                        name: 'status_transaksi'
                    },
                    {
                        data: 'waktu_transaksi',
                        name: 'waktu_transaksi'
                    },
                ]
            });
        });
    </script>
@endsection