@extends('layout.master')
@section('content')
    <section class="content pb-5">
        <div class="container-fluid">
            <div class="row pt-4">
                <div class="col-md-12">
                    <div class="title-section">
                        <p>Billing & Transaction</p>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="row">
                              <div class="col-md-2">
                                <div class="form-group custom-form-group">
                                  <label class="form-label" for="customer">Generate Bill</label>
                                  <select class="form-control">
                                    <option value=""></option>
                                  </select>
                                </div>
                              </div>
                                <div class="col-md-12">
                                    <div class="table-responsive">
                                        <table class="table table-striped" id="forward-datatable">
                                            <thead>
                                                <tr>
                                                <th scope="col">Invoice Date</th>
                                                <th scope="col">Invoice No.</th>
                                                <th scope="col">Status</th>
                                                <th scope="col">Payment Mode </th>
                                                <th scope="col">Transaction ID </th>
                                                <th scope="col">Payment Date</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>

                                    </div>
                                </div>
                            </div>
            </div>
        </div>
    </section>
<script>
        $(document).ready(function() {
            

            $("#forward-datatable").DataTable({
                "language": {
                    "zeroRecords": "No record(s) found."
                },
                "autoWidth": false,
                select: {
                    style: 'os',
                    selector: 'td:first-child'
                },
                order: [
                    [1, 'asc']
                ],
                processing: true,
                serverSide: true,
                lengthChange: true,
                order: [0, 'asc'],
                searchable: true,
                bStateSave: false,
                responsive: true,
                ajax: {
                    url: "{{ url('/agent/billing-transactions-data') }}",
                    data: function(d){
                        /*d.status = status;*/
                    }
                },
                columns: [
                    {
                        data: 'invoice_date',
                        name: 'invoice_date',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'invoice_no',
                        name: 'invoice_no',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'status',
                        name: 'status',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'payment_mode',
                        name: 'payment_mode',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'transaction_id',
                        name: 'transaction_id',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    },
                    {
                        data: 'payment_date',
                        name: 'payment_date',
                        searchable: true,
                        orderable: true,
                        defaultContent: 'NA'
                    }
                ],
                
                select: {
                    style: 'multi',
                },
            });

        });
</script>
@endsection