@extends('layouts.app')
@section('title', __('Supplier Due List'))
@section('content')
<section class="content-header"><h1>@lang('Supplier Due List')</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('location_id', $locations, null, ['class' => 'form-control select2', 'id' => 'location_id', 'placeholder' => __('All Locations')]) !!}</div>
                <div class="col-md-3"><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="due_table" style="width:100%">
                <thead><tr><th>@lang('Supplier')</th><th>@lang('Mobile')</th><th>@lang('Invoices')</th><th class="text-right">@lang('Total Purchase')</th><th class="text-right">@lang('Total Paid')</th><th class="text-right">@lang('Due Amount')</th></tr></thead>
            </table>
        </div>
    </div>
</section>
@endsection
@section('javascript')
<script>
$(document).ready(function() {
    var table = $('#due_table').DataTable({ processing: true, serverSide: true,
        ajax: { url: '{{ route("advancedreports.accounts-register.supplier-due-list") }}', data: function(d) { d.location_id = $('#location_id').val(); } },
        columns: [{ data: 'supplier_name' },{ data: 'mobile' },{ data: 'invoice_count' },{ data: 'total_purchase', className: 'text-right' },{ data: 'total_paid', className: 'text-right' },{ data: 'due_amount', className: 'text-right' }]
    });
    $('#apply_filter').click(function() { table.ajax.reload(); });
});
</script>
@endsection