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

@section('content')

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

<!-- Main content -->
<section class="content">
   
    @component('components.filters', ['title' => __('report.filters')])
         
         
    <div class="row mb-3">
        <div class="col-md-3">
            <div class="form-group">
                {!! Form::label('commission_tracking_filter_date', __('report.date_range') . ':') !!}
                {!! Form::text('commission_tracking_filter_date', null, ['placeholder' => __('lang_v1.select_a_date_range'), 'class' => 'form-control', 'readonly']); !!}
            </div>
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-md-3">
            <div class="form-group">
                {!! Form::label('user_type',  __('User Type')) !!}
                {!! Form::select('user_type', 
                    ['' => 'All'] + $userTypes->toArray(), 
                    'partner', 
                    ['class' => 'form-control select2']
                ) !!}
            </div>
        </div>

        <div class="col-md-3">
            <div class="form-group">
                {!! Form::label('group_by',  __('Group By')) !!}
                {!! Form::select('group_by', [
                    '' => 'None',
                    'transaction' => 'Transaction',
                    'product' => 'Product',
                    'user' => 'User',
                    'commission_group' => 'Commission Group'
                ], null, ['class' => 'form-control select2']) !!}
            </div>
        </div>
    </div>
         
    @endcomponent

    @component('components.widget', ['class' => 'box-primary'])
         
        @can('user.view')
            <div class="table-responsive">
                <table class="table table-bordered table-striped" id="commission_table">
                    <thead>
                        <tr>
                            <th>@lang('Date')</th>
                            <th>@lang('Invoice No.')</th>
                            <th>@lang('Product')</th>
                            <th>@lang('User')</th>
                            <th>@lang('Type')</th>
                            <th>@lang('Commission Group')</th>
                            <th>@lang('Commission %')</th>
                            <th>@lang('Commission Amount')</th>
                        </tr>

                    </thead>

                    <tfoot>
                        <tr class="bg-gray font-17 footer-total text-center">
                            <th colspan="7"><strong>Total:</strong></th>
                            <th></th>
                        </tr>
                    </tfoot>


                </table>
            </div>
        @endcan
    @endcomponent
    
    <div class="modal fade commission_group_modal" tabindex="-1" role="dialog" 
    	aria-labelledby="gridSystemModalLabel">
    </div>
     <div class="modal fade commission_group_products_modal" tabindex="-1" role="dialog" 
    	aria-labelledby="gridSystemModalLabel">
    </div>


</section>
<!-- /.content -->
@endsection
@section('javascript')
<script type="text/javascript">
    $(document).ready(function(){

    $('#commission_tracking_filter_date').daterangepicker(
        dateRangeSettings,
        function (start, end) {
            $('#commission_tracking_filter_date').val(start.format(moment_date_format) + ' ~ ' + end.format(moment_date_format));
            commission_table.ajax.reload();
        }
    );
    $('#commission_tracking_filter_date').on('cancel.daterangepicker', function(ev, picker) {
        $('#commission_tracking_filter_date').val('');
        commission_table.ajax.reload();
    });
    var commission_table = $('#commission_table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route("commission-tracking.index") }}',
            data: function(d) {

                if($('#commission_tracking_filter_date').val()) {
                    var start = $('#commission_tracking_filter_date').data('daterangepicker').startDate.format('YYYY-MM-DD');
                    var end = $('#commission_tracking_filter_date').data('daterangepicker').endDate.format('YYYY-MM-DD');
                    d.start_date = start;
                    d.end_date = end;
                }

                d.group_by = $('#group_by').val();
                d.user_type = $('#user_type').val();
            }
        },
        columns: [
            { data: 'updated_at', name: 'updated_at' },
            { data: 'transaction', name: 'transaction_id', searchable: function () {
                return !$('#group_by').val();
            } },
            { data: 'product', name: 'product_id', orderable:false },
            { data: 'user', name: 'user_id', orderable:false },
            { data: 'type', name: 'type'},
            { data: 'commission_group', name: 'commission_group_id', orderable:false },
            { data: 'percentage', name: 'percentage', searchable:false },
            { data: 'amount', name: 'amount' }
        ],
        footerCallback: function (row, data, start, end, display) {
            var api = this.api();

            var total = api
                .column(7, { page: 'current' })
                .data()
                .reduce(function (a, b) {
                    var x = typeof a === 'string' ? a.replace(/[^0-9.-]+/g, '') : a;
                    var y = typeof b === 'string' ? b.replace(/[^0-9.-]+/g, '') : b;
                    return parseFloat(x || 0) + parseFloat(y || 0);
                }, 0);

            $(api.column(7).footer()).html('$ ' + total.toFixed(2));
        }

    });

    $('#group_by, #user_type').change(function(){
        commission_table.ajax.reload();
    });

    $('#user_type').val('partner').trigger('change');

});

    
</script>
@endsection