@extends('layouts.authorized')
@section('title', 'Penarikan Billing')
@section('content')
    <div class="row">
        <div class="col-xs-12">
            <div class="card">
                <div class="card-header">
                    <span>Penarikan Billing</span>
                </div>
                <div class="card-body padding">
                    <div class="row" style="padding-top: 15px;">
                        <div class="col-md-12">
                            <div class="col-md-3 col-lg-3 col-sm-6 col-xs-12">
                                <label for="">Tgl. Pengajuan</label>
                                <div class="input-group input-date-range">
                                    <input name="dateFrom" type="text" class="datepickerinput custom-date-range form-control" value="{{  Carbon::now()->subMonths(1)->format('d M Y') }}">
                                    <span class="input-group-addon">To</span>
                                    <input name="dateTo" type="text" class="datepickerinput custom-date-range form-control" value="{{ Carbon::now()->format('d M Y') }}">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                    </div>
                    @tableconfig
                    <div class="card-body no-padding table-responsive">
                        @tableajax(route('admin.report.billingData'))
                        <thead>
                        <tr>
                            <th data-column-name="customer" data-sortable="true">Nama Borrower</th>
                            <th data-column-name="invoice" data-sortable="true">Invoice</th>
                            <th data-column-name="transactionNumber" data-sortable="true">No. Transaksi</th>
                            <th data-column-name="dueDate" data-sortable="true">Tanggal Jatuh Tempo</th>
                            <th data-column-name="paymentDate" data-sortable="true">Tanggal Bayar</th>
                            <th data-column-name="amount" data-sortable="true">Total Pembiayaan</th>
                            <th data-column-name="billingIndex" data-sortable="true">Angsuran</th>
                            <th data-column-name="vaNumber" data-sortable="true">No. VA</th>
                        </tr>
                        </thead>
                        @endtableajax
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('jsCustom')
    <script>
        $(document).ready(function () {
            $('.custom-date-range').on('dp.change', function () {
                refreshDataTable();
            });
        });

        function customFilter(filter) {
            filter.dateFrom = $('[name=dateFrom]').val();
            filter.dateTo = $('[name=dateTo]').val();
            return filter;
        }

        function refreshDataTable() {
            dataTableList[0].clear().draw();
        }
        // function refreshDataTable() {
        //     $(dataTableList).each(function (index, data) {
        //         dataTableList[index].clear().draw();
        //     });
        // }
    </script>
@endsection