@extends('layouts.app')
@section('title', __('installments::installment.installments_report'))

@section('content')

    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>{{ __('installments::installment.installments_report') }}</h1>
    </section>

    <!-- Main content -->
    <section class="content no-print">
        <div class="row">
            <div class="col-md-12">
                @component('components.filters', ['title' => __('report.filters')])
                    {!! Form::open(['url' => '#', 'method' => 'get', 'id' => 'installments_report_form']) !!}
                    <div class="col-md-3">
                        <div class="form-group">
                            {!! Form::label('location_id', __('purchase.business_location') . ':') !!}
                            <div class="input-group">
                                <span class="input-group-addon">
                                    <i class="fa fa-map-marker"></i>
                                </span>
                                {!! Form::select('location_id', $business_locations, null, [
                                    'class' => 'form-control select2',
                                    'placeholder' => __('messages.all'),
                                    'required',
                                ]) !!}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {!! Form::label('customer_id', __('contact.customer') . ':') !!}
                            <div class="input-group">
                                <span class="input-group-addon">
                                    <i class="fa fa-user"></i>
                                </span>
                                {!! Form::select('customer_id', $customers, null, [
                                    'class' => 'form-control select2',
                                    'placeholder' => __('messages.all'),
                                    'required',
                                ]) !!}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {!! Form::label('customer_group_filter', __('lang_v1.customer_group') . ':') !!}
                            <div class="input-group">
                                <span class="input-group-addon">
                                    <i class="fa fa-users"></i>
                                </span>
                                {!! Form::select('customer_group_filter', $customer_groups, null, ['class' => 'form-control select2']) !!}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {!! Form::label('payment_status', __('purchase.payment_status') . ':') !!}
                            {!! Form::select(
                                'payment_status',
                                [
                                    'paid' => __('lang_v1.paid'),
                                    'due' => __('lang_v1.due'),
                                    'partial' => __('lang_v1.partial'),
                                    'overdue' => __('lang_v1.overdue'),
                                ],
                                null,
                                ['class' => 'form-control select2', 'style' => 'width:100%', 'placeholder' => __('lang_v1.all')],
                            ) !!}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {!! Form::label('created_by', __('report.user') . ':') !!}
                            {!! Form::select('created_by', $users, null, ['class' => 'form-control select2', 'style' => 'width:100%']) !!}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            {!! Form::label('due_date_filter', __('report.date_range') . ':') !!}
                            {!! Form::text('date_range', null, [
                                'placeholder' => __('lang_v1.select_a_date_range'),
                                'class' => 'form-control',
                                'id' => 'due_date_filter',
                                'readonly',
                            ]) !!}
                        </div>
                    </div>
                    <div class="col-md-3">
                        {!! Form::label('amount_range', __('report.range') . ':') !!}
                        <div class="form-group">
                            {!! Form::text('start_amount_range', null, [
                                'placeholder' => __('report.from'),
                                'class' => 'form-control width-50 f-right input_number',
                                'id' => 'start_amount_range',
                            ]) !!}
                            {!! Form::text('end_amount_range', null, [
                                'placeholder' => __('report.to'),
                                'class' => 'form-control width-50 f-left input_number',
                                'id' => 'end_amount_range',
                            ]) !!}
                        </div>
                    </div>
                    <div class="col-md-3">
                        {!! Form::label('no_installments', __('installments::installment.no_installments') . ':') !!}
                        {!! Form::text('no_installments', null, [
                            'placeholder' => __('installments::installment.no_installments'),
                            'class' => 'form-control input_number',
                            'id' => 'no_installments',
                        ]) !!}
                    </div>
                    {!! Form::close() !!}
                @endcomponent
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                @component('components.widget', ['class' => 'box-primary'])
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped" id="installments_report_table">
                            <thead>
                                <tr>
                                    <th>@lang('installments::installment.conatct_name')</th>
                                    <th>@lang('installments::installment.transaction_id')</th>
                                    <th>@lang('installments::installment.installment_amount')</th>
                                    <th>@lang('installments::installment.paid_amount')</th>
                                    <th>@lang('installments::installment.total_remaining')</th>
                                    <th>@lang('installments::installment.payment_status')</th>
                                    <th>@lang('installments::installment.due_date')</th>
                                    <th>@lang('business.location')</th>
                                    <th>@lang('lang_v1.customer_group')</th>
                                    <th>@lang('lang_v1.added_by')</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr class="bg-gray font-17 footer-total text-center">
                                    <td></td>
                                    <td></td>
                                    <td class="footer_total_amount"></td>
                                    <td class="footer_paid_amount"></td>
                                    <td class="footer_remaining_amount"></td>
                                    <td class="footer_payment_status_count"></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                @endcomponent
            </div>
        </div>
    </section>
    <!-- /.content -->

@endsection

@section('javascript')
    <script>
        $(document).ready(function() {
            if ($('#due_date_filter').length == 1) {
                dateRangeSettings.startDate = moment().startOf('month');
                dateRangeSettings.endDate = moment().endOf('month');
                $('#due_date_filter').daterangepicker(dateRangeSettings, function(start, end) {
                    $('#due_date_filter span').val(
                        start.format(moment_date_format) + ' ~ ' + end.format(moment_date_format)
                    );
                    installments_report.ajax.reload();
                });
                $('#due_date_filter').on('cancel.daterangepicker', function(ev, picker) {
                    $('#due_date_filter').val('');
                    installments_report.ajax.reload();
                });
            }

            installments_report = $('table#installments_report_table').DataTable({
                processing: true,
                serverSide: true,
                aaSorting: [
                    [6, 'asc']
                ],
                ajax: {
                    url: '/installments/reports/installments-report',
                    data: function(d) {
                        d.location_id = $('select#location_id').val();
                        d.customer_id = $('select#customer_id').val();
                        d.customer_group_id = $('select#customer_group_filter').val();
                        d.payment_status = $('select#payment_status').val();
                        d.created_by = $('select#created_by').val();
                        d.start_amount = $('input#start_amount_range').val();
                        d.end_amount = $('input#end_amount_range').val();
                        if ($('input#no_installments').val()) {
                            d.no_installments = $('input#no_installments').val();
                        }
                        var start = '';
                        var end = '';
                        if ($('input#due_date_filter').val()) {
                            start = $('input#due_date_filter')
                                .data('daterangepicker')
                                .startDate.format('YYYY-MM-DD');
                            end = $('input#due_date_filter')
                                .data('daterangepicker')
                                .endDate.format('YYYY-MM-DD');
                        }
                        d.start_date = start;
                        d.end_date = end;
                    },
                },
                columns: [{
                        data: 'conatct_name',
                        name: 'conatct_name'
                    },
                    {
                        data: 'invoice_no',
                        name: 't.invoice_no'
                    },
                    {
                        data: 'amount',
                        name: 'amount'
                    },
                    {
                        data: 'paid_amount',
                        name: 'paid_amount',
                        searchable: false
                    },
                    {
                        data: 'remaining_amount',
                        name: 'remaining_amount',
                        searchable: false
                    },
                    {
                        data: 'payment_status',
                        name: 'payment_status',
                        searchable: false,
                        orderable: false
                    },
                    {
                        data: 'due_date',
                        name: 'due_date'
                    },
                    {
                        data: 'business_location',
                        name: 'bl.name'
                    },
                    {
                        data: 'customer_group',
                        name: 'cg.name'
                    },
                    {
                        data: 'created_by',
                        name: 'created_by'
                    }
                ],
                fnDrawCallback: function(oSettings) {
                    var amount = sum_table_col($('#installments_report_table'), 'amount');
                    $('.footer_total_amount').text(__currency_trans_from_en(amount));

                    var paid_amount = sum_table_col($('#installments_report_table'), 'paid-amount');
                    $('.footer_paid_amount').text(__currency_trans_from_en(paid_amount));

                    var remaining_amount = sum_table_col($('#installments_report_table'),
                        'remaining-amount');
                    $('.footer_remaining_amount').text(__currency_trans_from_en(remaining_amount));

                    __currency_convert_recursively($('#installments_report_table'));

                    $('.footer_payment_status_count').html(
                        __sum_status_html($('#installments_report_table'), 'payment-status')
                    );
                },
            });

            $(
                'select#location_id, select#customer_id, select#created_by, select#payment_status, select#customer_group_filter, input#start_amount_range, input#end_amount_range, input#no_installments'
            ).on('change', function() {
                installments_report.ajax.reload();
            });


        });
    </script>
@endsection