@extends('layouts.app')
@section('title', __('Accounts Receivable'))
@section('content')
<section class="content-header"><h1>@lang('Accounts Receivable')</h1></section>
<section class="content">
    <div class="box box-primary">
        <div class="box-header with-border">
            <div class="row">
                <div class="col-md-4">{!! Form::select('customer_id', $customers, null, ['class' => 'form-control select2', 'id' => 'customer_id', 'placeholder' => __('All Customers')]) !!}</div>
                <div class="col-md-4"><button class="btn btn-primary" id="apply_filter"><i class="fas fa-search"></i> @lang('Apply')</button></div>
            </div>
        </div>
        <div class="box-body">
            <table class="table table-bordered table-striped" id="receivable_table" style="width:100%">
                <thead><tr><th>@lang('Invoice')</th><th>@lang('Date')</th><th>@lang('Customer')</th><th class="text-right">@lang('Total')</th><th class="text-right">@lang('Paid')</th><th class="text-right">@lang('Due')</th><th>@lang('Days')</th></tr></thead>
            </table>
        </div>
    </div>
</section>
@endsection
@section('javascript')
<script>
$(document).ready(function() {
    var table = $('#receivable_table').DataTable({ processing: true, serverSide: true,
        ajax: { url: '{{ route("advancedreports.accounts-register.accounts-receivable") }}', data: function(d) { d.customer_id = $('#customer_id').val(); } },
        columns: [{ data: 'invoice_no' },{ data: 'transaction_date' },{ data: 'customer_name' },{ data: 'final_total', className: 'text-right' },{ data: 'paid_amount', className: 'text-right' },{ data: 'due_amount', className: 'text-right' },{ data: 'days_outstanding' }]
    });
    $('#apply_filter').click(function() { table.ajax.reload(); });
});
</script>
@endsection