@extends('master')
@section('content')

<section>
    <div class="container-fluid">
        <div class="card mb-4">
            <div class="card-header with-border">
                <h3 class="card-title text-center"> {{__('Generate Payslip')}} </h3>
            </div>
            <span id="bulk_payment_result"></span>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12">
                        <form method="post" id="filter_form" class="form-horizontal">
                            @csrf
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <select class="form-select form-select-solid dynamic" data-control="select2" name="filter_company" id="company_id" data-dependent="department_name" data-placeholder="Company" data-column="1" required tabindex="-1" aria-hidden="true">
                                            <option value="0">{{__('Select Company')}}</option>
                                            @foreach($companies as $company)
                                            <option value="{{$company->id}}">{{$company->company_name}}</option>
                                            @endforeach
                                            {{ csrf_field() }}
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <select class="form-select form-select-solid default_dept" data-control="select2" name="filter_department" id="department_id" data-placeholder="Department" required tabindex="-1" aria-hidden="true">
                                            <option value="0">{{__('Select Department')}}</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <input class="form-select form-select-solid month_year" placeholder="{{__('Select Month')}}" readonly id="month_year" name="month_year" type="text" value="">
                                    </div>
                                </div>
                            </div>

                            <div class="text-center">
                                <div class="form-group">
                                    <div class="form-actions mt-5">
                                        <button id="payslip_filter" type="submit" class="filtering btn btn-primary"> <i class="fa fa-search"></i> {{trans('Search')}} </button>
                                        <button id="bulk_payment" type="submit" class="filtering btn btn-primary"> <i class="fa fa-check-square-o"></i> {{__('BULK PAYMENT')}} </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="card-header border-0 pt-5 p-0">
                <div class="container-fluid">
                    <div class="card-title text-center">
                        <h3>{{__('Payment Info')}} <span id="details_month_year"></span></h3>
                    </div>
                    <div class="container-fluid"><span id="general_result"></span></div>
                </div>
            </div>
            <div class="card-body py-4">
                <div class="table-responsive">
                    <table id="pay_list-table" class="table table-row-dashed table-row-gray-300 align-middle gs-0 gy-4">
                        <thead>
                            <tr class="text-start text-muted text-uppercase fw-bolder fs-7 gs-0">
                                <th class="not-exported">#</th>
                                <th>{{trans('Name')}}</th>
                                <th>{{__('Payslip Type')}}</th>
                                <th>{{__('Basic Salary')}}</th>
                                <th>{{__('Net Salary')}}</th>
                                <th>{{trans('Status')}}</th>
                                <th class="not-exported">{{trans('action')}}</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>



    <!-- View Details -->
    @include('hr.salary.pay_list.includes.view_details')


    <!--  Generate Payment -->
    @include('hr.salary.pay_list.includes.payslip_generate_info_show')
</section>
@endsection

@section('page_script')
<script nonce="{{ $cspNonce }}">
    (function($) {
        "use strict";
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $(document).ready(function () {

           let date = $('.month_year');
           date.flatpickr({
               dateFormat: "F Y",
               minDate: "today",
             
           });

            fill_datatable();

            function fill_datatable(filter_company = '', filter_department = '',filter_month_year = '') {
                $('#details_month_year').html($('#month_year').val());
                let table_table = $('#pay_list-table').DataTable({
                    initComplete: function () {
                        this.api().columns([1]).every(function () {
                            var column = this;
                            var select = $('<select><option value=""></option></select>')
                                .appendTo($(column.footer()).empty())
                                .on('change', function () {
                                    var val = $.fn.dataTable.util.escapeRegex(
                                        $(this).val()
                                    );

                                    column
                                        .search(val ? '^' + val + '$' : '', true, false)
                                        .draw();
                                });

                            column.data().unique().sort().each(function (d, j) {
                                select.append('<option value="' + d + '">' + d + '</option>');
                                $('select').selectpicker('refresh');
                            });
                        });
                    },
                    responsive: true,
                    fixedHeader: {
                        header: true,
                        footer: true
                    },
                  
                    serverSide: true,
                    ajax: {
                        url: "{{ route('payroll.index') }}",
                        data: {
                            filter_company: filter_company,
                            filter_department: filter_department,
                            filter_month_year: filter_month_year,
                            "_token": "{{ csrf_token()}}"
                        }
                    },

                    columns: [
                        {
                            data: 'id',
                            orderable:false,
                            searchable:false
                        },
                        {
                            data: 'employee_name',
                            name: 'employee_name'
                        },
                        {
                            data: 'payslip_type',
                            name: 'payslip_type'
                        },
                        {
                            data: 'basic_salary',
                            name: 'basic_salary',
                            render: function (data) {
                                if ('{{config('variable.currency_format') =='suffix'}}') {
                                    return data + ' {{config('variable.currency')}}';
                                } else {
                                    return '{{config('variable.currency')}} ' + data;

                                }
                            }
                        },
                        {
                            data: 'net_salary',
                            name: 'net_salary',
                            render: function (data) {
                                if ('{{config('variable.currency_format') =='suffix'}}') {
                                    return data + ' {{config('variable.currency')}}';
                                } else {
                                    return '{{config('variable.currency')}} ' + data;

                                }
                            }
                        },
                        {
                            data: 'status',
                            name: 'status',
                            render: function (data) {
                                if (data == 1) {
                                    return "<td><div class = 'badge badge-success'>{{trans('Paid')}}</div>"
                                } else {
                                    return "<td><div class = 'badge badge-danger'>{{trans('Unpaid')}}</div>"
                                }
                            }
                        },
                        {
                            data: 'action',
                            name: 'action',
                            orderable: false
                        }
                    ],


                    "order": [],
                    'language': {
                        'lengthMenu': '_MENU_ {{__("records per page")}}',
                        "info": '{{trans("Showing")}} _START_ - _END_ (_TOTAL_)',
                        "search": '{{trans("Search")}}',
                        'paginate': {
                            'previous': '{{trans("Previous")}}',
                            'next': '{{trans("Next")}}'
                        }
                    },
                    'columnDefs': [
                        {
                            "orderable": false,
                            'targets': [0],
                        },
                        {
                            'render': function (data, type, row, meta) {
                                if (type == 'display') {
                                    data = '<div class="checkbox"><input type="checkbox" class="dt-checkboxes"><label></label></div>';
                                }

                                return data;
                            },
                            'checkboxes': {
                                'selectRow': true,
                                'selectAllRender': '<div class="checkbox"><input type="checkbox" class="dt-checkboxes"><label></label></div>'
                            },
                            'targets': [0]
                        }
                    ],

                    'select': {style: 'multi', selector: 'td:first-child'},
                    'lengthMenu': [[10, 25, 50, -1], [10, 25, 50, "All"]],
                    dom: '<"row"lfB>rtip',
                    buttons: [
                        {
                            extend: 'pdf',
                            text: '<i title="export to pdf" class="fa fa-file-pdf"></i>',
                            exportOptions: {
                                columns: ':visible:Not(.not-exported)',
                                rows: ':visible'
                            },
                        },
                        {
                            extend: 'csv',
                            text: '<i title="export to csv" class="fa fa-file-csv"></i>',
                            exportOptions: {
                                columns: ':visible:Not(.not-exported)',
                                rows: ':visible'
                            },
                        },
                        {
                            extend: 'print',
                            text: '<i title="print" class="fa fa-print"></i>',
                            exportOptions: {
                                columns: ':visible:Not(.not-exported)',
                                rows: ':visible'
                            },
                        }
                    ],
                });
            }


            new $.fn.dataTable.FixedHeader($('#pay_list-table').DataTable());

            $('#filter_form').on('submit',function (e) {
                e.preventDefault();
                var filter_company = $('#company_id').val();
                var filter_department = $('#department_id').val();
                var filter_month_year = $('#month_year').val();
                if (filter_company !== '' && filter_department !== '' && filter_month_year !== '' ) {
                    $('#pay_list-table').DataTable().destroy();
                    fill_datatable(filter_company, filter_department,filter_month_year);
                } else {
                    alert('{{__('Select Both filter option')}}');
                }
            });
        });

        $('#payment_form').on('submit', function(event) {
            event.preventDefault();
            //individual salary id from pay_list table
            let id = $('#employee_id').val();

           $('#hidden_month_year').val($('#month_year').val());

            //target contains payslip.pay
            let target = '{{route('paySlip.index')}}/pay/' + id;
            $.ajax({
                url: target,
                method: "POST",
                data: new FormData(this),
                contentType: false,
                cache: false,
                processData: false,
                dataType: "json",
                success: function (data) {
                    console.log(data);
                    let html = '';
                    if (data.payment_type_error) {
                        html = '<div class="alert alert-danger">' + data.payment_type_error + '</div>';
                        $('#payment_type_error').html(html).slideDown(300).delay(5000).slideUp(300);
                    }
                    if (data.error) {
                        html = '<div class="alert alert-danger">' + data.error + '</div>';
                    }
                    if (data.success) {
                        html = '<div class="alert alert-success">' + data.success + '</div>';
                        $('#pay_list-table').DataTable().ajax.reload();
                        $('#payment_model').modal('hide').delay(3000);
                    }
                    $('#bulk_payment_result').html(html).slideDown(300).delay(5000).slideUp(300);
                }
            });

        });

        $('#bulk_payment').on('click', function(event) {
            event.preventDefault();

            // var filter_company = $("#filter_company").val();
            // var filter_department = $("#filter_department").val();
            var month_year = $("#month_year").val();

            var allCheckboxId = [];
            let table = $('#pay_list-table').DataTable();
            allCheckboxId = table.rows({selected: true}).ids().toArray();

            //console.log(allCheckboxId);

            let target = '{{route('paySlip.bulk_pay')}}' ;

            $.ajax({
                url: target,
                method: "POST",
                data : {all_checkbox_id : allCheckboxId, month_year:month_year},
                // data: new FormData(document.getElementById("filter_form")),
                // contentType: false,
                // cache: false,
                // processData: false,
                // dataType: "json",
                success: function (data) {
                    console.log(data);
                    let html = '';
                    if (data.payment_type_error) {
                        html = '<div class="alert alert-danger">' + data.payment_type_error + '</div>';
                    }
                    if (data.error) {
                        html = '<div class="alert alert-danger">' + data.error + '</div>';
                    }
                    if (data.success) {
                        html = '<div class="alert alert-success">' + data.success + '</div>';
                    }
                    $('#bulk_payment_result').html(html).slideDown(300).delay(5000).slideUp(300);
                    $('#pay_list-table').DataTable().rows('.selected').deselect();
                    $('#pay_list-table').DataTable().ajax.reload();
                }
            });

        });

        $('.dynamic').change(function() {
            if ($(this).val() !== '') {
                let value = $(this).val();
                let dependent = $(this).data('dependent');
                let _token = $('input[name="_token"]').val();
                $.ajax({
                    url:"{{ route('dynamic_department') }}",
                    method:"POST",
                    data:{ value:value, _token:_token, dependent:dependent},
                    success:function(result)
                    {
                        $('#department_id').html(result);
                     
                     
                    }
                });
            }
        });

        $('.payment_dynamic').change(function() {
            if ($(this).val() !== '') {
                let value = $(this).val();
                let dependent = $(this).data('dependent');
                let _token = $('input[name="_token"]').val();
                $.ajax({
                    url:"{{ route('dynamic_department') }}",
                    method:"POST",
                    data:{ value:value, _token:_token, dependent:dependent},
                    success:function(result)
                    {
                        $('select').selectpicker("destroy");
                        $('#payment_department_id').html(result);
                        $('.payment_default_dept').prepend('<option value="0" selected>{{__('All Departments')}}</option>');
                        $('select').selectpicker();
                    }
                });
            }
        });

        $(document).on('click', '.delete', function () {
            //individual salary id from pay_list table
            let id = $(this).attr('id');


            $.ajax({
                url: "{{ route('paySlip.index') }}/delete/" + id,
                success: function (data) {
                    let html = '';
                    if (data.error) {
                        html = '<div class="alert alert-danger">' + data.error + '</div>';
                    }
                    if (data.success) {
                        html = '<div class="alert alert-success">' + data.success + '</div>';
                    }
                    $('#pay_list-table').DataTable().ajax.reload();
                    $('#general_result').html(html).slideDown(300).delay(5000).slideUp(300);
                }
            });
        });

        $('.close').on('click', function () {
            $('#allowance_info').html('');
            $('#commission_info').html('');
            $('#loan_info').html('');
            $('#deduction_info').html('');
            $('#overtime_info').html('');
            $('#other_payment_info').html('');
            $('#total_salary').html('');
            $('#total_deduction').html('');
            $('#total_allowance').html('');
            $('#total_loan').html('');
            $('#total_overtime').html('');
            $('#total_other_payment').html('');
            $('#total_commission').html('');
            $('#pay_list-table').DataTable().ajax.reload();

        });

        $(document).on('click', '.details', function () {
            //individual salary id from pay_list table
            let id = $(this).attr('id');
            let filter_month_year = $('#month_year').val();
            let currency_format = '{{config('variable.currency_format')}}';

            //target contains payslip.show
            // let target = '{{route('paySlip.index')}}/' + id;
            let target = '{{route('paySlip.show')}}';

            $.ajax({
                url: target,
                // dataType: "json",
                type: "GET",
                data: {id:id, filter_month_year:filter_month_year},
                success: function (result) {
                    console.log(result.data);
                    // console.log(result.data.allowances[0]);

                    $('#employee_username').html(result.data.employee_username);
                    $('#employee_full_name').html(result.data.employee_full_name);
                    if (result.data.employee_designation=='') {
                        $('#employee_designation').html(result.data.employee_designation);
                    }
                    else {
                        $('#employee_designation').html(result.data.employee_designation + ', ');
                    }
                    $('#employee_department').html(result.data.employee_department);
                    $('#employee_join_date').html(result.data.employee_join_date);
                    $('#employee_id').attr("href","{{ url('staff/employees/') }}/"+result.data.employee_id);
                    if (result.data.employee_profile_photo=='') {
                        $('#employee_profile_photo').html("<img src={{ URL::to('/public') }}/uploads/profile_photos/avatar.jpg  width='100'  class='rounded-circle' />");
                    }
                    else {
                        $('#employee_profile_photo').html("<img src={{ URL::to('/public') }}/uploads/profile_photos/" + result.data.employee_profile_photo + " width='100'  class='rounded-circle' />");
                    }
                    $('#pension_type').html(result.data.pension_type);

                    let total_allowance = 0;
                    (result.data.allowances).forEach(function (a) {
                        total_allowance = total_allowance + parseFloat(a.allowance_amount);
                        $('#allowance_info').append('<tr><td><strong>'+ a.allowance_title+ '---</strong><div class="pull-right">'+a.allowance_amount+'</div></td></tr>');
                    });

                    let total_commission = 0;
                    (result.data.commissions).forEach(function (a) {
                        total_commission = total_commission + parseFloat(a.commission_amount);
                        $('#commission_info').append('<tr><td><strong>'+ a.commission_title+'---</strong><span class="pull-right">'+a.commission_amount+'</span></td></tr>');
                    });

                    let total_loan = 0;
                    (result.data.loans).forEach(function (a) {
                        total_loan = total_loan + parseFloat(a.monthly_payable);
                        $('#loan_info').append('<tr>' +
                            '<td><strong>Total Loan---     </strong> <div class="float-right">'+a.loan_amount+'</div></td>' +
                            '<td><strong>Monthly Payable---     </strong> <div class="float-right">'+a.monthly_payable+'</div></td>' +
                            '<td><strong>Installment Remaining---     </strong> <div class="float-right">'+a.time_remaining+'</div></td>' +
                            '<td><strong>Amount Remaining---     </strong> <div class="float-right">'+a.amount_remaining+'</div></td>' +
                            '</tr>');
                    });

                    let count = 0;
                    let total_overtime = 0;
                    (result.data.overtimes).forEach(function (a) {
                        count = count +1;
                        total_overtime = total_overtime + (parseFloat(a.overtime_rate) * parseInt(a.overtime_hours));
                        $('#overtime_info').append(
                            '<tr>'+
                            '<td><strong>'+ count+'</strong></td>' +
                            '<td><strong>'+ a.overtime_title+'</strong></td>' +
                            '<td><strong>'+ a.no_of_days+'</strong></td>' +
                            '<td><strong>'+ a.overtime_hours+'</strong></td>' +
                            '<td><strong>'+ a.overtime_rate+'</strong></td>'+
                                '</tr>'
                            );
                    });

                    let total_deduction = 0;
                    (result.data.deductions).forEach(function (a) {
                        total_deduction = total_deduction + parseFloat(a.deduction_amount);
                        $('#deduction_info').append('<tr><td><strong>'+ a.deduction_title+'---</strong> <span class="float-right">'+a.deduction_amount+'</span></td></tr>');
                    });

                    let total_other_payment = 0;
                    (result.data.other_payments).forEach(function (a) {
                        total_other_payment = total_other_payment + parseFloat(a.other_payment_amount);
                        $('#other_payment_info').append('<tr><td><strong>'+ a.other_payment_title+'---</strong><div class="float-right">'+a.other_payment_amount+'</div></td></tr>');
                    });

                    let total_salary = result.data.basic_total - result.data.pension_amount + total_allowance - total_loan + total_commission
                        - total_deduction + total_other_payment + total_overtime;

                    if (total_salary < 0) {
                        total_salary = 0;
                    }

                    if (result.data.payslip_type == 'Monthly') {
                        $('#payslip_type').html('{{__('Monthly Payslip')}}');
                        $('#monthly_hourly').html('{{__('Basic Salary')}}');
                        $('.hide-div').hide();
                        $('#hours_worked').html('');
                        $('#total_hours_worked').html('');
                        $('#hours_worked_amount').html('');
                        $('#total_hours_worked_amount').html('');
                    }
                    else {
                        $('.hide-div').show();
                        $('#payslip_type').html('{{__('Hourly Payslip')}}');
                        $('#monthly_hourly').html('{{__('Per Hour Salary')}}');
                        $('#hours_worked').html('{{__('Total Hours Worked This Month')}}');
                        $('#total_hours_worked').html(result.data.monthly_worked_hours);
                        $('#hours_worked_amount').html('{{__('Total Amount')}}');
                        $('#total_hours_worked_amount').html(result.data.monthly_worked_amount);
                    }

                    if (currency_format == 'suffix') {

                        $('#basic_salary_amount').html(result.data.basic_salary + ' {{config('variable.currency')}}');
                        $('#pension_amount').html(result.data.pension_amount + ' {{config('variable.currency')}}');
                        $('#total_allowance').html(total_allowance + ' {{config('variable.currency')}}');
                        $('#total_commission').html(total_commission + ' {{config('variable.currency')}}');
                        $('#total_loan').html(total_loan + ' {{config('variable.currency')}}');
                        $('#total_overtime').html(total_overtime + ' {{config('variable.currency')}}');
                        $('#total_deduction').html(total_deduction + ' {{config('variable.currency')}}');
                        $('#total_other_payment').html(total_other_payment + ' {{config('variable.currency')}}');
                        $('#total_salary').html(total_salary + ' {{config('variable.currency')}}');
                    }
                    else {
                        $('#basic_salary_amount').html('{{config('variable.currency')}} ' + result.data.basic_salary);
                        $('#pension_amount').html('{{config('variable.currency')}} ' + result.data.pension_amount);
                        $('#total_allowance').html('{{config('variable.currency')}} '+ total_allowance);
                        $('#total_commission').html('{{config('variable.currency')}} ' + total_commission);
                        $('#total_loan').html('{{config('variable.currency')}} '+ total_loan);
                        $('#total_overtime').html('{{config('variable.currency')}} '+ total_overtime);
                        $('#total_deduction').html('{{config('variable.currency')}} '+ total_deduction);
                        $('#total_other_payment').html('{{config('variable.currency')}} '+ total_other_payment);
                        $('#total_salary').html('{{config('variable.currency')}} '+ total_salary);
                    }

                    $('#salary_model').modal('show');
                }
            });
        });

        $(document).on('click', '.generate_payment', function (event) {
            event.preventDefault();
            //individual salary id from pay_list table
            let id = $(this).attr('id');
            $('#payment_month_year_show').html($('#month_year').val());
            let filter_month_year = $('#month_year').val();

            //target contains payslip.show
            // let target = '{{route('paySlip.index')}}/generate/' + id;
            let target = '{{route('paySlip.generate')}}';

            $.ajax({
                url: target,
                // dataType: "json",
                type: "GET",
                data: {id:id, filter_month_year:filter_month_year},
                success: function (result) {
                    console.log(result.data.total_salary);
                    if (result.data.payslip_type == 'Hourly') {
                        $('.hide-element').show();
                        $('#worked_hours').val(result.data.total_hours);
                        $('#worked_amount').val(result.data.worked_amount.toFixed(2));
                    }
                    else
                    {
                        $('.hide-element').hide();
                        $('#worked_hours').val('');
                        $('#worked_amount').val('');
                    }
                    $('#payslip_type_payment').val(result.data.payslip_type);
                    $('#basic_salary_payment').val(result.data.basic_salary);
                    $('#total_allowance_payment').val(result.data.total_allowance);
                    $('#total_commission_payment').val(result.data.total_commission);
                    $('#monthly_payable').val(result.data.monthly_payable);
                    $('#amount_remaining').val(result.data.amount_remaining);
                    $('#total_deduction_payment').val(result.data.total_deduction);
                    $('#total_other_payment_payment').val(result.data.total_other_payment);
                    $('#total_overtime_payment').val(result.data.total_overtime);
                    $('#total_salary_payment').val(result.data.total_salary.toFixed(2));
                    $('#net_salary_payment').val(result.data.total_salary.toFixed(2));
                    $('#pension_amount_payment').val(result.data.pension_amount);
                    $('#employee_id').val(result.data.employee);
                    $('#payment_model').modal('show');
                }
            });
        });
    })(jQuery);


    $(document).ready(function(){
        $('[data-toggle="popover"]').popover();
    });
</script>

<!-- <script nonce="{{ $cspNonce }}">
    (function($) {
        "use strict";

        $(document).ready(function () {


            fill_datatable();

            function fill_datatable(filter_company = '', filter_department = '',filter_month_year = '') {
                $('#details_month_year').html($('#month_year').val());
                let table_table = $('#pay_list-table').DataTable({
                    initComplete: function () {
                        this.api().columns([1]).every(function () {
                            var column = this;
                            var select = $('<select><option value=""></option></select>')
                                .appendTo($(column.footer()).empty())
                                .on('change', function () {
                                    var val = $.fn.dataTable.util.escapeRegex(
                                        $(this).val()
                                    );

                                    column
                                        .search(val ? '^' + val + '$' : '', true, false)
                                        .draw();
                                });

                            column.data().unique().sort().each(function (d, j) {
                                select.append('<option value="' + d + '">' + d + '</option>');
                                $('select').selectpicker('refresh');
                            });
                        });
                    },
                    responsive: true,
                    fixedHeader: {
                        header: true,
                        footer: true
                    },
                  
                    serverSide: true,
                    ajax: {
                        url: "{{ route('payroll.index') }}",
                        data: {
                            filter_company: filter_company,
                            filter_department: filter_department,
                            filter_month_year: filter_month_year,
                            "_token": "{{ csrf_token()}}"
                        }
                    },

                    columns: [
                        {
                            data: 'id',
                            orderable:false,
                            searchable:false
                        },
                        {
                            data: 'employee_name',
                            name: 'employee_name'
                        },
                        {
                            data: 'payslip_type',
                            name: 'payslip_type'
                        },
                        {
                            data: 'basic_salary',
                            name: 'basic_salary',
                            render: function (data) {
                                if ('{{config('variable.currency_format') =='suffix'}}') {
                                    return data + ' {{config('variable.currency')}}';
                                } else {
                                    return '{{config('variable.currency')}} ' + data;

                                }
                            }
                        },
                        {
                            data: 'net_salary',
                            name: 'net_salary',
                            render: function (data) {
                                if ('{{config('variable.currency_format') =='suffix'}}') {
                                    return data + ' {{config('variable.currency')}}';
                                } else {
                                    return '{{config('variable.currency')}} ' + data;

                                }
                            }
                        },
                        {
                            data: 'status',
                            name: 'status',
                            render: function (data) {
                                if (data == 1) {
                                    return "<td><div class = 'badge badge-success'>{{trans('Paid')}}</div>"
                                } else {
                                    return "<td><div class = 'badge badge-danger'>{{trans('Unpaid')}}</div>"
                                }
                            }
                        },
                        {
                            data: 'action',
                            name: 'action',
                            orderable: false
                        }
                    ],


                    "order": [],
                    'language': {
                        'lengthMenu': '_MENU_ {{__("records per page")}}',
                        "info": '{{trans("Showing")}} _START_ - _END_ (_TOTAL_)',
                        "search": '{{trans("Search")}}',
                        'paginate': {
                            'previous': '{{trans("Previous")}}',
                            'next': '{{trans("Next")}}'
                        }
                    },
                    'columnDefs': [
                        {
                            "orderable": false,
                            'targets': [0],
                        },
                        {
                            'render': function (data, type, row, meta) {
                                if (type == 'display') {
                                    data = '<div class="checkbox"><input type="checkbox" class="dt-checkboxes"><label></label></div>';
                                }

                                return data;
                            },
                            'checkboxes': {
                                'selectRow': true,
                                'selectAllRender': '<div class="checkbox"><input type="checkbox" class="dt-checkboxes"><label></label></div>'
                            },
                            'targets': [0]
                        }
                    ],

                    'select': {style: 'multi', selector: 'td:first-child'},
                    'lengthMenu': [[10, 25, 50, -1], [10, 25, 50, "All"]],
                    dom: '<"row"lfB>rtip',
                    buttons: [
                        {
                            extend: 'pdf',
                            text: '<i title="export to pdf" class="fa fa-file-pdf"></i>',
                            exportOptions: {
                                columns: ':visible:Not(.not-exported)',
                                rows: ':visible'
                            },
                        },
                        {
                            extend: 'csv',
                            text: '<i title="export to csv" class="fa fa-file-csv"></i>',
                            exportOptions: {
                                columns: ':visible:Not(.not-exported)',
                                rows: ':visible'
                            },
                        },
                        {
                            extend: 'print',
                            text: '<i title="print" class="fa fa-print"></i>',
                            exportOptions: {
                                columns: ':visible:Not(.not-exported)',
                                rows: ':visible'
                            },
                        }
                    ],
                });
            }

            new $.fn.dataTable.FixedHeader($('#pay_list-table').DataTable());

            $('#filter_form').on('submit',function (e) {
                e.preventDefault();
                var filter_company = $('#company_id').val();
                var filter_department = $('#department_id').val();
                var filter_month_year = $('#month_year').val();
                if (filter_company !== '' && filter_department !== '' && filter_month_year !== '' ) {
                    $('#pay_list-table').DataTable().destroy();
                    fill_datatable(filter_company, filter_department,filter_month_year);
                } else {
                    alert('{{__('Select Both filter option')}}');
                }
            });
        });

        $('#payment_form').on('submit', function(event) {
            console.log(123);
            event.preventDefault();
            //individual salary id from pay_list table
            let id = $('#employee_id').val();

           $('#hidden_month_year').val($('#month_year').val());

            //target contains payslip.pay
            let target = '{{route('paySlip.index')}}/pay/' + id;
            $.ajax({
                url: target,
                method: "POST",
                data: new FormData(this),
                contentType: false,
                cache: false,
                processData: false,
                dataType: "json",
                success: function (data) {
                    console.log(data);
                    let html = '';
                    if (data.payment_type_error) {
                        html = '<div class="alert alert-danger">' + data.payment_type_error + '</div>';
                        $('#payment_type_error').html(html).slideDown(300).delay(5000).slideUp(300);
                    }
                    if (data.error) {
                        html = '<div class="alert alert-danger">' + data.error + '</div>';
                    }
                    if (data.success) {
                        html = '<div class="alert alert-success">' + data.success + '</div>';
                        $('#pay_list-table').DataTable().ajax.reload();
                        $('#payment_model').modal('hide').delay(3000);
                    }
                    $('#bulk_payment_result').html(html).slideDown(300).delay(5000).slideUp(300);
                }
            });

        });

        $('#bulk_payment').on('click', function(event) {
            event.preventDefault();

            // var filter_company = $("#filter_company").val();
            // var filter_department = $("#filter_department").val();
            var month_year = $("#month_year").val();

            var allCheckboxId = [];
            let table = $('#pay_list-table').DataTable();
            allCheckboxId = table.rows({selected: true}).ids().toArray();

            //console.log(allCheckboxId);

            let target = '{{route('paySlip.bulk_pay')}}' ;

            $.ajax({
                url: target,
                method: "POST",
                data : {all_checkbox_id : allCheckboxId, month_year:month_year},
                // data: new FormData(document.getElementById("filter_form")),
                // contentType: false,
                // cache: false,
                // processData: false,
                // dataType: "json",
                success: function (data) {
                    console.log(data);
                    let html = '';
                    if (data.payment_type_error) {
                        html = '<div class="alert alert-danger">' + data.payment_type_error + '</div>';
                    }
                    if (data.error) {
                        html = '<div class="alert alert-danger">' + data.error + '</div>';
                    }
                    if (data.success) {
                        html = '<div class="alert alert-success">' + data.success + '</div>';
                    }
                    $('#bulk_payment_result').html(html).slideDown(300).delay(5000).slideUp(300);
                    $('#pay_list-table').DataTable().rows('.selected').deselect();
                    $('#pay_list-table').DataTable().ajax.reload();
                }
            });

        });

        $('.dynamic').change(function() {
            if ($(this).val() !== '') {
                let value = $(this).val();
                let dependent = $(this).data('dependent');
                let _token = $('input[name="_token"]').val();
                $.ajax({
                    url:"{{ route('dynamic_department') }}",
                    method:"POST",
                    data:{ value:value, _token:_token, dependent:dependent},
                    success:function(result)
                    {
                        $('select').selectpicker("destroy");
                        $('#department_id').html(result);
                        $('.default_dept').prepend('<option value="0" selected>{{__('All Departments')}}</option>');
                        $('select').selectpicker();
                    }
                });
            }
        });

        $('.payment_dynamic').change(function() {
            if ($(this).val() !== '') {
                let value = $(this).val();
                let dependent = $(this).data('dependent');
                let _token = $('input[name="_token"]').val();
                $.ajax({
                    url:"{{ route('dynamic_department') }}",
                    method:"POST",
                    data:{ value:value, _token:_token, dependent:dependent},
                    success:function(result)
                    {
                        $('select').selectpicker("destroy");
                        $('#payment_department_id').html(result);
                        $('.payment_default_dept').prepend('<option value="0" selected>{{__('All Departments')}}</option>');
                        $('select').selectpicker();
                    }
                });
            }
        });

        $(document).on('click', '.delete', function () {
            //individual salary id from pay_list table
            let id = $(this).attr('id');


            $.ajax({
                url: "{{ route('paySlip.index') }}/delete/" + id,
                success: function (data) {
                    let html = '';
                    if (data.error) {
                        html = '<div class="alert alert-danger">' + data.error + '</div>';
                    }
                    if (data.success) {
                        html = '<div class="alert alert-success">' + data.success + '</div>';
                    }
                    $('#pay_list-table').DataTable().ajax.reload();
                    $('#general_result').html(html).slideDown(300).delay(5000).slideUp(300);
                }
            });
        });

        $('.close').on('click', function () {
            $('#allowance_info').html('');
            $('#commission_info').html('');
            $('#loan_info').html('');
            $('#deduction_info').html('');
            $('#overtime_info').html('');
            $('#other_payment_info').html('');
            $('#total_salary').html('');
            $('#total_deduction').html('');
            $('#total_allowance').html('');
            $('#total_loan').html('');
            $('#total_overtime').html('');
            $('#total_other_payment').html('');
            $('#total_commission').html('');
            $('#pay_list-table').DataTable().ajax.reload();

        });
    })(jQuery);


    $(document).ready(function(){
        $('[data-toggle="popover"]').popover();
    });
</script> -->
@endsection