@extends('layouts.app')
@section('title', __( 'report.customer_balances_report' ))

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>@lang( 'report.customer_balances_report' )
        <small>@lang( 'report.customer_balances_report' )</small>
    </h1>
</section>

<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="col-md-12">
            @component('components.filters', ['title' => __('report.filters')])
                
                <div class="col-md-12 hide">
                <div class="col-md-6">
                    <div class="form-group">
                        {!! Form::label('tax_report_date_range', __('report.date_range') . ':') !!}
                        {!! Form::text('tax_report_date_range', @format_datetime('now'), ['placeholder' => __('lang_v1.select_a_date_range'), 'class' => 'form-control', 'id' => 'tax_report_date_range', 'readonly']); !!}
                    </div>
                </div>
                </div>
                <div class="col-md-12">
                    <div class="form-group">
					<button type="button" id="reload" class="btn btn-primary pull-right"><i class="fa fa-search"></i> @lang( 'report.load_report' )</button>
                    </div>
                </div>
            @endcomponent
        </div>
    </div> 
  
    <div class="row">
        <div class="col-md-12">
           <!-- Custom Tabs -->
            <div class="nav-tabs-custom">
                <ul class="nav nav-tabs"> 
                    <li class="active">
                        <a href="#customer_balance_tab" data-toggle="tab" aria-expanded="true"><i class="fa fas fa-arrow-circle-right" aria-hidden="true"></i> @lang( 'report.customer_balances_report' )</a>
                    </li> 
                </ul>

                <div class="tab-content"> 
				
                    <div class="tab-pane active" id="customer_balance_tab">
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped" id="customer_balance_table">
                            <thead> 
                                <tr>
									<th>@lang('user.name')</th>
									<th>@lang('contact.mobile')</th>
									<th>@lang('business.email')</th>
									<th>@lang('lang_v1.total_due')</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr class="bg-gray font-17 text-center footer-total">
                                    <td colspan="3"><strong>@lang('report.totals'):</strong></td>
                                    <td><span class="display_currency" id="total_due" data-currency_symbol ="false"></span></td>
                                </tr>
                            </tfoot>
                        </table>
                   
				   </div>
				   </div>
					
                </div>
            </div>
        </div>
    </div>
    

</section>
<!-- /.content -->
@stop
@section('javascript')
<script type="text/javascript">
    $(document).ready(function() {
		
	var dateRangeSettings = {
		ranges: ranges,
		startDate: moment(),
		endDate: moment(),
		locale: {
			cancelLabel: LANG.clear,
			applyLabel: LANG.apply,
			customRangeLabel: LANG.custom_range,
			format: moment_date_format,
			toLabel: '~',
		},
	};
        $('#tax_report_date_range').daterangepicker(
            dateRangeSettings, 
            function(start, end) {
                $('#tax_report_date_range').val(
                    start.format(moment_date_format) + ' ~ ' + end.format(moment_date_format)
                );
            }
        );
		
			customer_balance_table=$('#customer_balance_table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: '/reports/customer-balance-report',
                data: function(d) {
                    var start = $('input#tax_report_date_range')
                        .data('daterangepicker')
                        .startDate.format('YYYY-MM-DD');
                    var end = $('input#tax_report_date_range')
                        .data('daterangepicker')
                        .endDate.format('YYYY-MM-DD');
                    d.start_date = start;
                    d.end_date = end;
                }
            },
            columns: [
                { data: 'name', name: 'contacts.name' },
                { data: 'mobile', name: 'contacts.mobile' },
                { data: 'email', name: 'contacts.email', },
                { data: 'total_due', name: 'total_due',searchable:false, }
            ],
								
			
            fnDrawCallback: function(oSettings) {
				 
                $('#total_due').text(
                    sum_table_col($('#customer_balance_table'), 'total_due')
                );
                __currency_convert_recursively($('#customer_balance_table'));
            },
			}); 
	 
       
	   $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
			if ($("#customer_balance_tab").hasClass('active')) {
				customer_balance_table.ajax.reload();
			} 
           
        });
        $('#reload').on('click', function(){ 
				customer_balance_table.ajax.reload();
			
		});
		 
    });
</script>
<script src="{{ asset('js/report.js?v=' . $asset_v) }}"></script>
@endsection