@extends('layouts.app')
@section('title', __('Customer Due Ageing'))
@section('content')
<section class="content-header"><h1>@lang('Customer Due Ageing')</h1></section>
<section class="content">
    <div class="box box-primary">
        <div class="box-header with-border">
            <div class="row"><div class="col-md-4"><button class="btn btn-primary" id="apply_filter"><i class="fas fa-refresh"></i> @lang('Refresh')</button></div></div>
        </div>
        <div class="box-body">
            <table class="table table-bordered table-striped" id="ageing_table" style="width:100%">
                <thead><tr><th>@lang('Customer')</th><th class="text-right">@lang('0-30 Days')</th><th class="text-right">@lang('31-60 Days')</th><th class="text-right">@lang('61-90 Days')</th><th class="text-right">@lang('Over 90 Days')</th><th class="text-right">@lang('Total')</th></tr></thead>
            </table>
        </div>
    </div>
</section>
@endsection
@section('javascript')
<script>
$(document).ready(function() {
    var table = $('#ageing_table').DataTable({ processing: true, serverSide: true,
        ajax: { url: '{{ route("advancedreports.accounts-register.customer-due-ageing") }}' },
        columns: [{ data: 'customer_name' },{ data: 'days_0_30', className: 'text-right' },{ data: 'days_31_60', className: 'text-right' },{ data: 'days_61_90', className: 'text-right' },{ data: 'over_90', className: 'text-right' },{ data: 'total', className: 'text-right' }]
    });
    $('#apply_filter').click(function() { table.ajax.reload(); });
});
</script>
@endsection