{{View::make('layout.header')}}

<style>

     

     .timeline .timeline-item .timeline-event h6{ 

         word-break : break-all; }



    .table thead th, .table tbody td {

        padding-left:6px !important;

        padding-right:6px !important;

    }



    table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before, 

    table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after {

        display : none;

    }

</style>

    <!-- BEGIN: Content-->

    <div class="app-content content " style="border:0px;">

        <div class="content-overlay"></div>

        <div class="header-navbar-shadow"></div>

        <div class="content-wrapper">

            <div class="content-header row">

                <div class="content-header-left col-md-9 col-12 mb-2">

                    <div class="row breadcrumbs-top">

                        <div class="col-12">

                            <div class="breadcrumb-wrapper">

                                <ol class="breadcrumb">

                                    <li class="breadcrumb-item">Home

                                    </li>

                                    

                                    <li class="breadcrumb-item active"><a href="{{route('admin.epayslip')}}">E-Payslip</a>

                                    </li>

                                </ol>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

            <div class="content-body">

            <section id="dashboard-ecommerce">

                    <div class="row match-height">

                        <div class="col-md-12">

                            <div class="card">

                                <div class="card-header">

                                     <div class="btn-group">                                        

                                        <div class="col-md-12 pull-left">

                                            <div class="row" style="padding-left: 0px; padding-bottom: 5px;"> User Pay List - Admin </div> 

                                            <div class="row">

                                                <div class="col-md-4" style="padding-left: 0px;"> 

                                                    <select name="year" id="year" class=" form-control">                                                          

                                                            @php

                                                            $year = Helper::getSoftwareStartDate();

                                                            for($i=$year; $i<=date('Y'); $i++){

                                                            @endphp

                                                            <option @php if ($i==date('Y')){ @endphp selected="selected" @php } @endphp value="@php echo $i; @endphp">@php echo $i;@endphp</option>

                                                            @php

                                                            }

                                                            @endphp

                                                    </select>

                                                </div>

                                                

                                                <div class="dropdown" style="margin-top: 4px;">

                                                    <button class="dropbtn fa fa-gear"></button>

                                                    <div style="left: 0 !important;" id="myDropdown" class="dropdown-content">



                                                    </div>

                                                </div>

                                                

                                                <div class="col-md-2"> 

                                                    <button  onclick="viewEpaySlip()" class="btn btn-primary" tabindex="0" type="button">

                                                        <span>View</span>

                                                    </button>

                                                </div>

                                                <div class="col-md-2" > 

                                                    <button style="margin-left:22px;" onclick="downloadpayslip()" class="btn btn-primary"  type="button">

                                                        <span>Download</span>

                                                    </button>                                                    

                                                </div>

                                            </div>

                                        </div>

                                    </div>

                                    

                                    

                                </div>

                                

                                <div class="card-body" style="padding-top:0px !important; "> 

                                    <div class="table-responsive" style="overflow-x: unset !important;">

                                        <table class="table table-striped nowrap" id="reporttable" style=" font-size:12px;">

                                            <thead>

                                                <tr>

                                                    <th style="text-transform: capitalize;" >Select</th> 

                                                    <th style="text-transform: capitalize;" >Month</th>

                                                    <th style="text-transform: capitalize;" >Basic Rate</th>

                                                    <th style="text-transform: capitalize;" >Basic Pay</th>

                                                    <th style="text-transform: capitalize;" >Overtime</th>

                                                    <th style="text-transform: capitalize;" >Allowance</th>

                                                    <th style="text-transform: capitalize;" >Director Fee</th>

                                                    <th style="text-transform: capitalize;" >Bonus</th>

                                                    <th style="text-transform: capitalize;" >Commision</th>

                                                    <th style="text-transform: capitalize;" >Extra</th>

                                                    <th style="text-transform: capitalize;" >Compensation</th>

                                                    <th style="text-transform: capitalize; text-align:center" >Gross Pay</th>

                                                    <th style="width:20%;text-align:center;text-transform: capitalize; padding-left: 0px !important; padding-right: 0px !important; padding-bottom: 0px !important;" >Employee

                                                    <table class="tableheading" style="width:100%; margin-top: 0.72rem !important;     border-top: 1px solid #ebe9f1;">

                                                            <tbody>

                                                                <tr style="background:transparent;">

                                                                    <td style="border-top:none;border-bottom:none; border-left:none; width:33.33%">EPF</td>

                                                                    <td style="border-top:none;border-bottom:none; border-left:none; width:33.33%">SOSCO</td>

                                                                    <td style="border-top:none;border-bottom:none; border-left:none; width:33.33%">EIS</td>

                                                                </tr>

                                                            </tbody>

                                                        </table>

                                                </th>

                                                <th style="width:20%;text-align:center;text-transform: capitalize; padding-left: 0px !important; padding-right: 0px !important; padding-bottom: 0px !important;" >Employer

                                                    <table class="tableheading" style="width:100%; margin-top: 0.72rem !important;     border-top: 1px solid #ebe9f1;">

                                                            <tbody>

                                                                <tr style="background:transparent;">

                                                                    <td style="border-top:none;border-bottom:none; border-left:none; width:33.33%">EPF</td>

                                                                    <td style="border-top:none;border-bottom:none; border-left:none; width:33.33%;">SOSCO</td>

                                                                    <td style="border-top:none;border-bottom:none; border-left:none; width:33.33%;">EIS</td>

                                                                </tr>

                                                            </tbody>

                                                        </table>

                                                </th>

                                                    <th style="text-transform: capitalize;" >EPF</th>

                                                    <th style="text-transform: capitalize;" >Socso</th>

                                                    <th style="text-transform: capitalize;" >EIS</th>  

                                                    <th style="text-transform: capitalize;" >PCB</th>

                                                    <th style="text-transform: capitalize;" >Deduction</th>

                                                    <th style="text-transform: capitalize;" >Net Pay</th>

                                                 </tr>

                                            </thead>

                                            <tbody>

                                              

                                            </tbody>

                                        </table>

                                        <input type="hidden" id="epayslip_id" value="">

                                    </div>

                                </div>    

                            </div>

                        </div>

                    </div>

                </section>

            </div>

        </div>

    </div>

    <form id="exportempForm" action="{{route('admin.epayslipReportDownload')}}" method="GET">

        <input type="hidden" name="action" value="getEPaySLipDownload">

        <input type="hidden" name="epay_slip_id" id="epay_slip_id">

        <input type="hidden" name="pdf" id="pdf">

        <input type="hidden" name="random" id="random">

        <input type="submit" style="display:none;">

    </form>

    

    <!-- END: Content-->

    {{View::make('layout.footer')}}

    @include('inc.timline-model')

    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script type="text/javascript">        

        $(document).ready(function(){

            var table = $('#reporttable').DataTable({

                "lengthMenu": [[20, 50, 100, -1], [20, 50,100, "All"]],

                "order": [],

                "destroy": true,

                "scrollX": true,

                'processing': true,

                'serverSide': true,

                "bDestroy": true,

                'serverMethod': 'post',

                //'searching': false, // Remove default Search Control

                'ajax': {

                'url':"{{route('admin.getEpayslipGridData')}}",

                'headers': {

                   'X-CSRF-TOKEN': '{{ csrf_token() }}'

                },

                'data': function(data){

                  // Read values

                  var year = $('#year').val();

                  csrf_token=$('meta[name=csrf_token]').attr("content");

                  // Append to data

                  data.year = year; 

                  data.csrf_token = csrf_token;              

                }

                },

                'columns': [

                        { data: 'select', name: 'Select' },

                        { data: 'month', name: 'Month' },

                        { data: 'basic_rate', name: 'Basic Rate'},

                        { data: 'basic_pay', name: 'Basic Pay'},

                        { data: 'total_monthly_over_time_pay',name:'Overtime',

                            "render": function (data,type,row,meta){ 

                            var empno1='<input type="hidden" id="lastindex" value="'+row.lastindex+'"> <input type="hidden" id="userindex" value="'+row.userindex+'"><a class="popper" onmouseover="ventitle1('+row.id+');"   onmouseout="ventitle1('+row.id+');"  href="">'+row.total_monthly_over_time_pay+'</a>';

                            empno1+='<div id="pop1'+row.id+'" style=" width: 20%; display : none; position : absolute;  z-index : 99999; padding : 0px;  background : #fff; border : 1px solid #A2ADBC; -moz-border-radius : 3px; -webkit-border-radius: 3px; margin : 0px; -webkit-box-shadow   : 0px 0px 5px 0px rgba(164, 164, 164, 1); box-shadow : 0px 0px 5px 0px rgba(164, 164, 164, 1);  left: 18%;"><div class="table-responsive" style="padding: 0px;">';

                            empno1+='<table id="entitle1'+row.id+'" class="table table-bordered my-leave-summary-entitle" style="width:100%; font-size:11px;text-align: center;" width="100%" border="1">';

                            empno1+='<thead>'

                            empno1+='<tr><th class="header">Overtime</th><th class="header">Hrs/Days</th>';

                        

                            empno1+='</thead>';

                            empno1+='<tbody>';

                            empno1+='</tbody>';

                            empno1+='</table>';

                            empno1+='</div>';

                            empno1+='</div>';

                            return empno1;

                        }

                    },

                    { data: 'total_allowance',name:'Allowance',

                        "render": function (data,type,row,meta){ 

                        var empno='<input type="hidden" id="lastindex" value="'+row.lastindex+'"> <input type="hidden" id="userindex" value="'+row.userindex+'"><a class="popper" onmouseover="ventitle('+row.id+');"   onmouseout="ventitle('+row.id+');"  href="">'+row.total_allowance+'</a>';

                        empno+='<div id="pop'+row.id+'" style=" width: 45%; display : none; position : absolute;  z-index : 99999; padding : 0px;  background : #fff; border : 1px solid #A2ADBC; -moz-border-radius : 3px; -webkit-border-radius: 3px; margin : 0px; -webkit-box-shadow   : 0px 0px 5px 0px rgba(164, 164, 164, 1); box-shadow : 0px 0px 5px 0px rgba(164, 164, 164, 1);  left: 8%;"><div class="table-responsive" style="padding: 0px;">';

                            empno+='<table id="entitle'+row.id+'" class="table table-bordered my-leave-summary-entitle" style="width:100%; font-size:11px;text-align: center;" width="100%" border="1">';

                            empno+='<thead>'

                            empno+='<tr><th class="header">Allowance</th><th class="header">Amount</th>';

                            empno+='<th class="header">Allowance</th><th class="header">Amount</th></tr>';

                        

                            empno+='</thead>';

                            empno+='<tbody>';

                            empno+='</tbody>';

                            empno+='</table>';

                            empno+='</div>';

                            empno+='</div>';

                            return empno;

                        }

                    },

                    { data: 'director_fee', name: 'Director fees'},

                    { data: 'bonus', name: 'Bonus'},

                    {"render": function (data,type,row,meta){ 

                        var commision = row.commision ? parseFloat(row.commision) : 0;
                        var fix_commision = row.fix_commision ? parseFloat(row.fix_commision) : 0;
                        var totalcommision = commision + fix_commision;
                        return totalcommision.toFixed(2);                  

                    } },

                    { data: 'extra', name: 'Commision'},

                    { data: 'CompensateGratuity', name: 'Extra Compensation'},

                    { data: 'GrossPay', name: 'Gross Pay'},

                    {

                        name: 'Employee',

                        "render": function (data,type,row,meta){ 

                            var taken ='<table class="tableheading" style="width:100%; "> <tbody><tr style="background:transparent;"> <td style="border-left:none;border-top:none;border-bottom:none;width:33.33%;border-right:1px solid; border-color:#ebe9f1; text-align:center;">'+row.total_EPF_employee+'</td> <td style="width:33.33%;  text-align:center; border-top:none;border-bottom:none;border-right:1px solid; border-color:#ebe9f1;">'+row.total_socso_employee+'</td><td style="width:33.33%;  text-align:center; border-top:none;border-bottom:none;border-right:none;border-right:none;">'+row.Eisww+'</td> </tr></tbody></table>';

                            return taken;                     

                    } },

                    {

                        name: 'Employer',

                        "render": function (data,type,row,meta){ 

                        var taken ='<table class="tableheading1" style="width:100%; "> <tbody><tr style="background:transparent;"> <td style="border-left:none;border-top:none;border-bottom:none;width:33.33%;border-right:1px solid; border-color:#ebe9f1; text-align:center;">'+row.total_EPF_employer+'</td> <td style="width:33.33%;  text-align:center; border-top:none;border-bottom:none;border-right:1px solid; border-color:#ebe9f1;">'+row.total_socso_employer+'</td><td style="width:33.33%;  text-align:center; border-top:none;border-bottom:none;border-right:none;border-right:none;">'+row.Eiscc+'</td> </tr></tbody></table>';

                        return taken;                     

                    } },

                    { data: 'total_EPF_employee', name: 'EPF'},

                    { data: 'total_socso_employee', name: 'Socso'},                

                    { data: 'Eisww', name: 'EIS'},

                    { data: 'itaxpcb', name: 'PCB'},

                    { data: 'other_deduction',name:'Deduction',

                        "render": function (data,type,row,meta){ 

                        var empno2='<input type="hidden" id="lastindex" value="'+row.lastindex+'"> <input type="hidden" id="userindex" value="'+row.userindex+'"><a class="popper" onmouseover="ventitle2('+row.id+');"   onmouseout="ventitle2('+row.id+');"  href="">'+row.other_deduction+'</a>';

                        empno2+='<div id="pop2'+row.id+'" style=" width: 20%; display : none; position : absolute;  z-index : 99999; padding : 0px;  background : #fff; border : 1px solid #A2ADBC; -moz-border-radius : 3px; -webkit-border-radius: 3px; margin : 0px; -webkit-box-shadow   : 0px 0px 5px 0px rgba(164, 164, 164, 1); box-shadow : 0px 0px 5px 0px rgba(164, 164, 164, 1);  left: 120%;"><div class="table-responsive" style="padding: 0px;">';

                            empno2+='<table id="entitle2'+row.id+'" class="table table-bordered my-leave-summary-entitle" style="width:100%; font-size:11px;text-align: center;" width="100%" border="1">';

                            empno2+='<thead>'

                            empno2+='<tr><th class="header">Deduction</th><th class="header">Amount</th>';

                            empno2+='</thead>';

                            empno2+='<tbody>';

                            empno2+='</tbody>';

                            empno2+='</table>';

                            empno2+='</div>';

                            empno2+='</div>';

                            return empno2;

                        }

                    },

                    { data: 'NetPay', name: 'Next Pay'},

                ]

                ,

                'columnDefs': [{

                    "targets": [7],

                    "orderable": false

                }],

                "language": {

                    "paginate": {

                    // remove previous & next text from pagination

                    "previous": '&nbsp;',

                    "next": '&nbsp;'

                    }

                },

                'rowCallback': function(row, data, index){

                    $(row).find('td:eq(12)').css('padding', '0px');

                    $(row).find('td:eq(16)').css('padding', '0px');

                }

            });

            $('#year').change(function(){

            table.draw();

            });

            

        var columns = table.settings().init().columns;

        for (let i = 0; i < columns.length; i++) {

            //

            var dCol =

                `<div class="toggle-vis custom-control mt-1 ml-1 custom-control-success custom-checkbox"><input class='inp custom-control-input' data-column="${i}" key="{!! $c_key !!}" id="{!! $c_key !!}_${i}"  type="checkbox" checked><label for="{!! $c_key !!}_${i}" class="custom-control-label" style="cursor: pointer">${columns[i].name}</label></div>`;

            $("#myDropdown").append(dCol);

        }



        // show hide and show data

        var daraArr = {!! json_encode($columnHideShowData) !!}

        hidefun(table, '{!! $c_key !!}', daraArr);

        });

        

        



        

        function epayslip(id){

            $("#epayslip_id").val(id);

        }

        function viewEpaySlip(){

             var epayslip_id = $("#epayslip_id").val(); 

             if(epayslip_id!=''){

               window.location.href="{{url('e-payslip/epayslip-view')}}/"+epayslip_id; 

             }else{

               alert('Select Any one');

               return false; 

             }  

        }

        function downloadpayslip(){

            $('#random').val(Math.random().toString(36).substring(2));

            var epayslip_id = $("#epayslip_id").val(); 

            if(epayslip_id!=''){

                $("#epay_slip_id").val(epayslip_id); 

                setTimeout(function(){

                    $("#exportempForm").submit();

                    document.getElementById("exportempForm").submit();

                }, 500);                

                

            }else{

                alert('Select Any one');

                return false;               

            }

        } 



        function ventitle(id) {

            $('#pop'+id).toggle();

            getFieldValues(id,'Allowance')   

        } 



        function ventitle1(id) {

            $('#pop1'+id).toggle();

            getFieldValues(id,'Overtime')   

        } 



        function ventitle2(id) {

            $('#pop2'+id).toggle();

            getFieldValues(id,'Deduction')   

        } 

    var FieldVal;

        function getFieldValues(id,type){ 

            var url = "{{route('admin.getAllowanceDeduction')}}";

            $.post( url, {

                    action: "getFieldValues",

                    id: id,

                    "_token": "{{ csrf_token() }}"

                },

                function(data)

                {

                    FieldVal = jQuery.parseJSON(data);

                

                    showList(id,FieldVal,type);

                }

            );  

        }       



    

    function showList(id,FieldVal,type){  

        var url = "{{route('admin.getUserEPayDetail')}}";

        $.post( url, {

                action: "getUserEPayDetail",

                "_token": "{{ csrf_token() }}",

                id: id,

            },

            function(data)

            {

                data1 = data.split('##');

            

                resObj = jQuery.parseJSON(data1[0]);

                resObj1 = jQuery.parseJSON(data1[1]);

            

                list(resObj,resObj1,id,FieldVal,type);

            }

        );  

    }   



       function list(resObj,resObj1,id,FieldVal,type){ 

           if(type == 'Deduction') {

            var ded    = '';

            var ded_i  = 0;

            if (resObj.deduction_1 != '0') {

                ded += '<tr><td style="text-align:left;padding-left:5px;" id="deduction_text_1">' + FieldVal[17].field_value + '</td><td>' + parseFloat(resObj.deduction_1).toFixed(2) + '</td></tr>';

            } else {

                ded_i++;

            }

            if (resObj.deduction_2 != '0') {

                ded += '<tr><td style="text-align:left;padding-left:5px;" id="deduction_text_2">' + FieldVal[18].field_value + '</td> <td>' + parseFloat(resObj.deduction_2).toFixed(2) + '</td></tr>';

            } else {

                ded_i++;

            }

            if (resObj.deduction_3 != '0') {

                ded += '<tr><td style="text-align:left;padding-left:5px;" id="deduction_text_3">' + FieldVal[19].field_value + '</td> <td>' + parseFloat(resObj.deduction_3).toFixed(2) + '</td></tr>';

            } else {

                ded_i++;

            }

            if (resObj.deduction_4 != '0') {

                ded += '<tr><td style="text-align:left;padding-left:5px;" id="deduction_text_4">' + FieldVal[20].field_value + '</td> <td>' + parseFloat(resObj.deduction_4).toFixed(2) + '</td></tr>';

            } else {

                ded_i++;

            }

            if (resObj.deduction_5 != '0') {

                ded += '<tr><td style="text-align:left;padding-left:5px;" id="deduction_text_5">' + FieldVal[21].field_value + '</td> <td>' + parseFloat(resObj.deduction_5).toFixed(2) + '</td></tr>';

            } else {

                ded_i++;

            }

            if (resObj.deduction_6 != '0') {

                ded += '<tr><td style="text-align:left;padding-left:5px;" id="deduction_text_6">' + FieldVal[22].field_value + '</td> <td>' + parseFloat(resObj.deduction_6).toFixed(2) + '</td></tr>';

            } else {

                ded_i++;

            }

            if (resObj.deduction_7 != '0') {

                ded += '<tr><td style="text-align:left;padding-left:5px;" id="deduction_text_7">' + FieldVal[23].field_value + '</td> <td>' + parseFloat(resObj.deduction_7).toFixed(2) + '</td></tr>';

            } else {

                ded_i++;

            }

            if (resObj.deduction_8 != '0') {

                ded += '<tr><td style="text-align:left;padding-left:5px;" id="deduction_text_8">' + FieldVal[24].field_value + '</td> <td>' + parseFloat(resObj.deduction_8).toFixed(2) + '</td></tr>';

            } else {

                ded_i++;

            }

            if (resObj.deduction_9 != '0') {

                ded += '<tr><td style="text-align:left;padding-left:5px;" id="deduction_text_9">' + FieldVal[25].field_value + '</td> <td>' + parseFloat(resObj.deduction_9).toFixed(2) + '</td></tr>';

            } else {

                ded_i++;

            }

            if (resObj.deduction_10 != '0') {

                ded += '<tr><td style="text-align:left;padding-left:5px;" id="deduction_text_10">' + FieldVal[26].field_value + '</td> <td>' + parseFloat(resObj.deduction_10).toFixed(2) + '</td></tr>';

            } else {

                ded_i++;

            }



            if (resObj.deduction_11 != '0') {

                ded += '<tr><td id="deduction_text_11" style="text-align:left;padding-left:5px;">' + FieldVal[27].field_value + '</td> <td>' + parseFloat(resObj.deduction_11).toFixed(2) + '</td></tr>';

            } else {

                ded_i++;

            }

            if (resObj.deduction_12 != '0') {

                ded += '<tr><td id="deduction_text_12" style="text-align:left;padding-left:5px;">' + FieldVal[28].field_value + '</td> <td>' + parseFloat(resObj.deduction_12).toFixed(2) + '</td></tr>';

            } else {

                ded_i++;

            }

            if (resObj.deduction_13 != '0') {

                ded += '<tr><td id="deduction_text_13" style="text-align:left;padding-left:5px;">' + FieldVal[29].field_value + '</td> <td>' + parseFloat(resObj.deduction_13).toFixed(2) + '</td></tr>';

            } else {

                ded_i++;

            }

            if (resObj.deduction_14 != '0') {

                ded += '<tr><td id="deduction_text_14" style="text-align:left;padding-left:5px;">' + FieldVal[30].field_value + '</td> <td>' + parseFloat(resObj.deduction_14).toFixed(2) + '</td></tr>';

            } else {

                ded_i++;

            }

            if (resObj.deduction_15 != '0') {

                ded += '<tr><td id="deduction_text_15" style="text-align:left;padding-left:5px;">' + FieldVal[31].field_value + '</td> <td>' + parseFloat(resObj.deduction_15).toFixed(2) + '</td></tr>';

            } else {

                ded_i++;

            }

            ded += '</table>';

            $("#entitle2"+id+' tbody').html(ded);

         }

         else if(type == 'Overtime'){

            var oh = '';

            var oh_i = 0;

            var oh_p = '<tr><td>--</td><td id="hr1">--</td></tr>';

            if(resObj1.overtime_1!='' || resObj1.overtime_1!='undefined'){

            oh += '<tr><td>'+resObj1.overtime_1+'</td><td id="hr1">'+resObj.hr1+'</td></tr>';

            }else{

            oh += oh_p;   

            }

            if(typeof resObj1.overtime_2!='undefined'){

            oh += '<tr><td>'+resObj1.overtime_2+'</td><td id="hr2">'+resObj.hr2+'</td></tr>';  

            }else{

            oh += oh_p;   

            }

            if(typeof resObj1.overtime_3!='undefined'){

            oh += '<tr><td>'+resObj1.overtime_3+'</td><td id="hr3">'+resObj.hr3+'</td></tr>';  

            }else{

            oh += oh_p;   

            }

            if(typeof resObj1.overtime_4!='undefined'){

            oh += '<tr><td>'+resObj1.overtime_4+'</td><td id="hr4">'+resObj.hr4+'</td></tr>';  

            }else{

            oh += oh_p;   

            }

            if(typeof resObj1.overtime_5!='undefined'){

            oh += '<tr><td>'+resObj1.overtime_5+'</td><td id="hr5">'+resObj.hr5+'</td></tr>';   

            }else{

            oh += oh_p;   

            }

            if(typeof resObj1.overtime_6!='undefined'){

            oh += '<tr><td>'+resObj1.overtime_6+'</td><td id="hr6">'+resObj.hr6+'</td></tr>';   

            }else{

            oh += oh_p;   

            }

            oh += '</table>';   

            $("#entitle1"+id+' tbody').html(oh);

        }

        else if(type == 'Allowance'){

            var oth_i = 0;

            //alert(resObj.director_fee);

            var oth = '<tr><td>Director Fee</td><td>' + parseFloat(resObj.director_fee).toFixed(2) + '</td>';

            oth += '<td>Bonus</td><td>' + parseFloat(resObj.bonus).toFixed(2) + '</td></tr>';

            oth += '<tr><td>Commision</td><td>' + parseFloat(resObj.commision).toFixed(2) + '</td>';

            oth += '<td>Extra</td><td>' + parseFloat(resObj.extra).toFixed(2) + '</td></tr>';

           

            var compensate_gratuity_val = parseFloat(parseFloat(resObj.compensate) + parseFloat(resObj.gratuity)).toFixed(2);

            oth += '<tr><td>Compensate & Gratuity</td><td>' + compensate_gratuity_val + '</td>';

            var all = '';

            var all_i = 0;

          

            var _fieldname = "";

            var all1_i = "";

            var all1 = "";

            if (resObj.allowance_1 != '0') {

                oth += '<td>' + FieldVal[0].field_value + '</td><td id="allowance_1">' + resObj.allowance_1 + '</td></tr>';

            } else {

                all_i++;

            }

            if (resObj.allowance_2 != '0') {

                oth += '<tr><td>' + FieldVal[1].field_value + '</td><td id="allowance_2">' + resObj.allowance_2 + '</td>';

            } else {

                all_i++;

            }

            if (resObj.allowance_3 != '0') {

                oth += '<td>' + FieldVal[2].field_value + '</td><td id="allowance_3">' + resObj.allowance_3 + '</td></tr>';

            } else {

                all_i++;

            }

            if (resObj.allowance_4 != '0') {

                oth += '<tr><td>' + FieldVal[3].field_value + '</td><td id="allowance_4">' + resObj.allowance_4 + '</td>';

            } else {

                all_i++;

            }

            if (resObj.allowance_5 != '0') {

                oth += '<td>' + FieldVal[4].field_value + '</td><td id="allowance_5">' + resObj.allowance_5 + '</td></tr>';

            } else {

                all_i++;

            }

            if (resObj.allowance_6 != '0') {

                oth += '<tr><td>' + FieldVal[5].field_value + '</td><td id="allowance_6">' + resObj.allowance_6 + '</td>';

            } else {

                all_i++;

            }

            if (resObj.allowance_7 != '0') {

                oth += '<td>' + FieldVal[6].field_value + '</td><td id="allowance_7">' + resObj.allowance_7 + '</td></tr>';

            } else { 

                all_i++;

            }

            if (resObj.allowance_8 != '0') {

                oth += '<tr><td>' + FieldVal[7].field_value + '</td><td id="allowance_8">' + resObj.allowance_8 + '</td>';

            } else {

                all_i++;

            }

            if (resObj.allowance_9 != '0') {

                oth += '<td>' + FieldVal[8].field_value + '</td><td id="allowance_9">' + resObj.allowance_9 + '</td></tr>';

            } else {

                all_i++;

            }

            if (resObj.allowance_10 != '0') {

                oth += '<tr><td>' + FieldVal[9].field_value + '</td><td id="allowance_10">' + resObj.allowance_10 + '</td>';

            } else {

                all_i++;

            }

           

         

          

            if (resObj.allowance_11 != '0') {

                oth += '<td>' + FieldVal[10].field_value + '</td><td>&nbsp;</td><td id="allowance_11">' + resObj.allowance_11 + '</td></tr>';

            } else {

                all1_i++;

            }

            if (resObj.allowance_12 != '0') {

                oth += '<tr><td>' + FieldVal[11].field_value + '</td><td>&nbsp;</td><td id="allowance_12">' + resObj.allowance_12 + '</td>';

            } else {

                all1_i++;

            }

            if (resObj.allowance_13 != '0') {

                oth += '<td>' + FieldVal[12].field_value + '</td><td>&nbsp;</td><td id="allowance_13">' + resObj.allowance_13 + '</td></tr>';

            } else {

                all1_i++;

            }

            if (resObj.allowance_14 != '0') {

                oth += '<tr><td>' + FieldVal[13].field_value + '</td><td>&nbsp;</td><td id="allowance_14">' + resObj.allowance_14 + '</td>';

            } else {

                all1_i++;

            }

            if (resObj.allowance_15 != '0') {

                oth += '<td>' + FieldVal[14].field_value + '</td><td>&nbsp;</td><td id="allowance_15">' + resObj.allowance_15 + '</td></tr>';

            } else {

                all1_i++;

            }

            if (resObj.allowance_16 != '0') {

                oth += '<tr><td>' + FieldVal[15].field_value + '</td><td>&nbsp;</td><td id="allowance_16">' + resObj.allowance_16 + '</td>';

            } else {

                all1_i++;

            }

            if (resObj.allowance_17 != '0') {

                oth += '<td>' + FieldVal[16].field_value + '</td><td>&nbsp;</td><td id="allowance_17">' + resObj.allowance_17 + '</td></tr>';

            } else {

                all1_i++;

            }

            oth += '</table>';

           



            // var tab_2_html =  '<table class="tableheading"> <tr> <td>' + oth + '</td><td rowspan="2" valign="top">' + all1 + '</td></tr><tr> <td valign="top">' + all + '</td></tr></table>';

            $("#entitle"+id+' tbody').html(oth);

        }

        }

       

    </script>