@extends('layouts.app')
@section('content')
    <div class="container">
        <div class="row margin-top-10">
            <div>
                <table class="table table-striped tableStyle no-bottom dataTables dt-responsive"
                    style="width: 100% !important;">
                    <thead>
                        <tr>
                            <th>
                                ID
                            </th>
                            <th>
                                User Name
                            </th>
                            <th>
                                Payment Method
                            </th>
                            <th>
                                Number of Documents
                            </th>
                            <th>
                                Transaction Amount
                            </th>
                            <th>
                                Status
                            </th>
                            <th>
                                Message
                            </th>
                            <th>
                                Date
                            </th>
                            <th>
                                Document IDs
                            </th>
                        </tr>
                    </thead>

                </table>
            </div>
        </div>
    </div>
    <!--container-->
@stop

@push('footer_js')
    <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
    <script>
        $(function() {
            var oTable = $('.dataTables').DataTable({
                processing: true,
                serverSide: true,

                ajax: {
                    url: '{!! route('ajax.get.doctracking') !!}',
                    data: function(d) {
                        d.status = $('select[name=status]').val();
                    }
                },
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'username',
                        name: 'username'
                    },
                    {
                        data: 'payment_method',
                        name: 'payment_method'
                    },
                    {
                        data: 'no_of_docs',
                        name: 'no_of_docs'
                    },
                    {
                        data: 'trans_amount',
                        render: $.fn.dataTable.render.number(',', '.', 2),
                        name: 'trans_amount'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'bank_message',
                        name: 'bank_message'
                    },
                    {
                        data: 'updated_at',
                        type: 'num',
                        render: {
                            _: 'display',
                            sort: 'timestamp'
                        }
                    },
                    {
                        data: 'trans_ids',
                        name: 'trans_ids'
                    },
                ]
            });

            $('form[name="search"]').on('submit', function(e) {
                oTable.draw();
                e.preventDefault();
            });

            $('.delete-btn').on('click', function(e) {
                e.preventDefault();
                confirm('Are you sure you want to delete?');
            })
        });
    </script>
@endpush