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

<style>

.table-bordered, .table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > td, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > thead > tr > th {	border: 1px solid #ddd;}

table {background-color: transparent;}

table > tbody > tr > td, .table > tbody > tr > th, table > tfoot > tr > td, .table > tfoot > tr > th, table > thead > tr > td, table > thead > tr > th {

	padding: 6px 2px; font-size:12px; 	border: 1px solid #ddd;

}

table   tr  th {

	font-size: 13px;

	padding:8px 10px;

	border: 1px solid #ddd;

	background:#F7F7F7;

	text-align:center;

}

table tr td{	

	background:#fff;

}

table {

	

	border-color: #ddd;

}

.slid_a {	

	display: block;

}

.tableheading .tableheading tr td {

	border: 0;

	background:transparent;

}

.activity .title {

	margin-bottom: 10px;

	margin-top: 10px;

}

#pagination-digg {text-align: right;}

#pagination-digg li {display: inline-block;	padding: 5px;}

#pagination-digg li {display: inline-block;	}

#pagination-digg li a {display: inline-block;	padding: 5px 15px;	background: #0476B8;	color: #fff;}

#pagination-digg li {	display: inline-block;}

.applyleaveright .apply {margin-bottom: 15px;}

.tableheading {width: 100%;border-bottom: 1px solid #c3c3c3;}

table {width: 100%;}

.button1 {background: #a90329 !important; border-radius:3px;	color: #fff;	padding: 5px 15px !important;	border: 0; margin-bottom: 15px;}

.applyleaveright .apply, .input-submit {margin-bottom: 15px;	background: #456B7B;	border: 0;	padding: 5px 15px;	color: #fff;	border-radius: 3px;}

.edit {	background:#275B89;	border: 0;	padding: 5px 15px;	border-radius: 3px;	color: #fff;}

.tableheading td {	text-align: left;}

.maxperpage h3 {margin: 0 0 10px 0;	font-size: 14px;}

#half_full {margin-bottom: 15px;}

#lenddate {	margin-bottom: 15px;}

#lstartdate, #lenddate {width: 100%;	height: 32px;margin-bottom: 15px;}

.maxperpage.mrgn-btm {	margin: 20px 0;}

#approval_setting_html {margin-bottom: 15px;}

.applyleaveright .tcal {margin-bottom: 15px !important;	margin-right: 5px !important;}

#ribbon {	margin-bottom: 15px;}

#searchText,#searchTextEmail {margin-left: 10px;color: #474544;}

/* textarea{height:auto !important;} */

.header-top-menu li {display: inline-block;}

#slip_file {height: auto;}

.leavesummary + .maxperpage h3 {margin: 20px 0 10px 0;	font-size: 14px;}

.leavereport select {margin-right: 15px;}

.product-col {text-align: center;	padding: 15px;}

.product-col .img {margin-bottom: 15px;}

.table-align-left{text-align:left !important;}

.tableheading td { padding-right: 5px; padding-left:5px;}

.header{ text-align:left; padding-left:5px !important;}



/***/

.viewlayout{

    width:100%;

}

.viewlayout table > tbody > tr > td{

    border:0px;

}

.viewlayout .row{ 

    margin:0px;

}

.viewlayout .right{

    width: 34%;

    top: 179px !important;

}

.viewlayout .right1{

    top: 63px !important;

}

body{

    font-family: "Montserrat", Helvetica, Arial, serif !important;

    font-size: 1rem !important;

    font-weight: 400 !important;

    line-height: 1.45 !important;

}

  * {

         font-family:  "Montserrat", Helvetica, Arial, serif !important;

         

  

      }

</style>

    <!-- BEGIN: Content-->

    <div class="app-content content ">

        <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"><a href="{{route('employee-dashboard')}}">Home</a>

                                    </li>                                    

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

                                    </li>

                                    <li class="breadcrumb-item active">E-Payslip View

                                    </li>

                                </ol>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

            <div class="content-body">

                <!-- Dashboard Ecommerce Starts -->

                <section id="multiple-column-form">



                    <div class="row">

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



                        </div>

                    </div>

                    <div class="row" style="margin:0px;">

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

                            <div class="card-body">

                                <ul class="nav nav-tabs nav-justified" id="myTab2" role="tablist" style="border-bottom: 1px solid #ebe9f1; border-radius: 0px;">

                                    <li class="nav-item">

                                            <a class="nav-link active" id="pay-slip-justified" data-toggle="tab" href="#pay-slip" role="tab" aria-controls="pay-slip" aria-selected="true">Pay Slip</a>

                                    </li>

                                    <li class="nav-item">

                                        <a class="nav-link" id="home-tab-justified" data-toggle="tab" href="#home-just" role="tab" aria-controls="home-just" aria-selected="true">Basic & Overtime</a>

                                    </li>

                                    <li class="nav-item">

                                        <a class="nav-link" id="profile-tab-justified" data-toggle="tab" href="#profile-just" role="tab" aria-controls="profile-just" aria-selected="true">Allowance </a>

                                    </li>

                                    <li class="nav-item">

                                        <a class="nav-link" id="permission-tab-justified" data-toggle="tab" href="#permission-just" role="tab" aria-controls="permission-just" aria-selected="true">Deduction</a>

                                    </li>

                                </ul>

                                <!-- Tab panes -->

                                <div class="tab-content pt-1">

                                    <div class="tab-pane active" id="pay-slip" role="tabpanel" aria-labelledby="pay-slip-justified">

                                        <div class="card"  style="margin-bottom:0px; border: 0px;"> 

                                            <div id="tab_0" data-id={{request()->id}} class="card-header" style="padding-top:0px;">

                                                <h1></h1>

                                            </div>                                                

                                        </div>

                                    </div>

                                    <div class="tab-pane" id="home-just" role="tabpanel" aria-labelledby="home-tab-justified">

                                        <div class="card"  style="margin-bottom:0px; border: 0px;"> 

                                            <div id="tab_1" class="card-header" style="padding-top:0px;">



                                            </div>                                                

                                        </div>

                                    </div>

                                    <div class="tab-pane" id="profile-just" role="tabpanel" aria-labelledby="profile-tab-justified">                                            

                                        <div class="card" style="border: 0px; margin-bottom:0px;">

                                            <div class="card"  style="margin-bottom:0px; border: 0px;"> 

                                                <div id="tab_2" class="card-header" style="padding-top:0px;">



                                                </div>

                                            </div>                                                

                                        </div>

                                    </div>

                                    <div class="tab-pane" id="permission-just" role="tabpanel" aria-labelledby="profile-tab-justified">                                          

                                        <div class="card" style="border: 0px; margin-bottom:0px;">

                                            <div class="card"  style="margin-bottom:0px; border: 0px;"> 

                                                <div id="tab_3" class="card-header" style="padding-top:0px;">



                                                </div>                                                    

                                            </div>                                                

                                        </div>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                </section>             

            </div>

            </div>

        </div>

    </div>

    <!-- END: Content-->

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

    @include('inc.access_management-model')

    <script>

        $("#emplevsearch").click(function(){

             $("#empleavetoday").css('display','block');

             $("#spanclose").css('display','block');

        });

        $("#spanclose").click(function(){

             $("#empleavetoday").css('display','none');

             $("#spanclose").css('display','none');

        });

        $(".apply").click(function(){

             $("#empleavetoday").css('display','none');

             $("#spanclose").css('display','none');

        });

    </script>

    <script type="text/javascript" src="{{url('app-assets/js/core/functions.js')}}"></script>

    <script type="text/javascript">

    var pageStart = 0;

    var noPages = 1;

    var currentPage = 1;

    var resObj;

    var approvecancel = "5";

    var id ={{$epayslip_id}};

    $(document).ready(function(){

        $( "#tabs" ).tabs();

        showFields();

        function wFormate(){

            var id = $('#tab_0').attr("data-id")

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

            $.get( url, {

                    action: "getFieldValues",

                    epay_slip_id: id,

                    type: "W",

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

                },

                function(data)

                {

                   $("#tab_0").html(data);

                }

            );  

            

        }

        wFormate()

    });



    

    function showFields(){   

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

        $.post( url, {

                action: "getFieldValues",

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

            },

            function(data)

            {

                var tmp_ = jQuery.parseJSON(data);

                console.log(tmp_);

                fieldlist(tmp_);

            }

        );  

    }

    function fieldlist(tmp){    

        for (var i=0; i < tmp.length; i++){

            for(var j=1;j<18;j++){

                if(tmp[i].field_name=='allowance_'+j){

                    if(tmp[i].field_value!=''){

                        $("#allowance_text_"+j).html(j+". ("+tmp[i].field_value+")");

                    }else{

                        $("#allowance_text_"+j).html(j+". ");

                    }

                }

                if(tmp[i].field_name=='deduction_'+j && j<16){

                    if(tmp[i].field_value!=''){

                        $("#deduction_text_"+j).html(j+". ("+tmp[i].field_value+")");

                    }else{

                        $("#deduction_text_"+j).html(j+". ");

                    }

                }

            }

        }

        getFieldValues();   

        /*$("#list").tablesorter({ 

            headers: { 

                16: {  sorter: false  },

                17: {  sorter: false  }

            },

            dateFormat: "uk" 

        });*/

    }

    var FieldVal;

    function getFieldValues(){   

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

        $.post( url, {

                action: "getFieldValues",

                id: id,

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

            },

            function(data)

            {

                FieldVal = jQuery.parseJSON(data);

            

                showList();

            }

        );  

    }

    function showList(){  

        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);

            }

        );  

    }

    

    function list(resObj,resObj1){  

        //resObj.name resObj.month

        console.log(resObj1.overtime_2);

        var oh = '';

        oh += '<table style="border-top:0px;border-bottom:0px;" class="tableheading" id="list1" width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" ><tr><th style="border-left:0px;" class="header" width="45%">Overtime</th><th class="header" width="10%">&nbsp;</th><th class="header" width="45%">Hrs/Days</th></tr>';

        var oh_i = 0;

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

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

        oh += '<tr><td>'+resObj1.overtime_1+'</td><td>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</td><td id="hr6">'+resObj.hr6+'</td></tr>';   

        }else{

         oh += oh_p;   

        }

        oh += '</table>';   

        var pd = '';                                    

        pd +='<table class="tableheading" id="list1" width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" style="border-bottom:0px;"><tr><th class="header" width="80%">Pay Days</th><th class="header" width="20%">&nbsp;</th></tr>';

        var pd_i = 0;   

        pd +='<tr><td>DW</td><td id="DW">'+resObj.DW+'</td></tr>';

        pd +='<tr><td>PH</td><td id="PH">'+resObj.PH+'</td></tr>';  

        pd +='<tr><td>AL</td><td id="AL">'+resObj.AL+'</td></tr>';  

        pd +='<tr><td>MC</td><td id="MC">'+resObj.MC+'</td></tr>';

        pd +='<tr><td>MT</td><td id="MT">'+resObj.MT+'</td></tr>';  

        pd +='<tr><td>MR</td><td id="MR">'+resObj.MR+'</td></tr>';  

        pd +='<tr><td>CL</td><td id="CL">'+resObj.CL+'</td></tr>';  

        pd +='<tr><td>HL</td><td id="HL">'+resObj.HL+'</td></tr>';  

        pd +='<tr><td>EX</td><td id="EX">'+resObj.EX+'</td></tr>';  

        pd +='<tr><td>PT</td><td id="PT">'+resObj.PT+'</td></tr>';  

        pd +='<tr><td>AD</td><td id="AD">'+resObj.AD+'</td></tr>';  

        pd +='</table>';    

        var npd = "";

        var npd_i = 0;  

        npd +='<table class="tableheading" id="list2" width="100%" height="100%" border="0"  cellpadding="0" cellspacing="0" style="border-bottom:0px;"><tr><th class="header" width="75%">No Pay Days</th><th class="header" width="25%">&nbsp;</th></tr>'; 

        npd +='<tr><td>No Pay LS</td><td id="OPL">'+resObj.OPL+'</td></tr>';    

        npd +='<tr><td>No Pay NPL</td><td id="NPL">'+resObj.NPL+'</td></tr>';

        npd +='<tr><td>No Pay AB</td><td id="AB">'+resObj.AB+'</td></tr>';  

        npd +='<tr><td>OOB (Days)</td><td id="OOB">'+resObj.OOB+'</td></tr>';

        //npd +='<tr><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr>';

        npd +='</table>';

        var hw = "";

        var hw_i = 0;

        hw += '<table style="border-bottom:0px;" class="tableheading" id="list2" width="100%" height="100%" border="0"  cellpadding="0" cellspacing="0" bordercolor="#CCCCCC"><tr><th class="header" width="45%">Hours</th><th class="header" width="10%">&nbsp;</th><th class="header" width="45%">&nbsp;</th></tr>';

        hw += '<tr><td>Work hours</td><td>&nbsp;</td><td id="workhr">'+resObj.workhr+'</td></tr>';

        hw += '<tr><td>Lateness</td><td>&nbsp;</td><td id="latehr">'+resObj.latehr+'</td></tr>';

        hw += '<tr><td>Early Dep.</td><td>&nbsp;</td><td id="earlyhr">'+resObj.earlyhr+'</td></tr>';

        hw += '<tr><td>No Pay Hour</td><td>&nbsp;</td><td id="nopayhr">'+resObj.nopayhr+'</td></tr>';

        hw += '</table>';

        var tab_1_html = "";

        tab_1_html = '<table class="tableheading" id="list1" width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC">';

        tab_1_html +='<tr><td style="text-align:left;padding-left:5px;">Basic Rate</td>';

                    tab_1_html +='<td id="basic_rate" style="text-align:right;">'+parseFloat(resObj.basic_rate).toFixed(2)+'</td>';

                    tab_1_html +='<th class="header">Contribution</th>';

                    tab_1_html +='<th class="header">Employee</th>';

                    tab_1_html +='<th class="header">Employer</th>';

                    //tab_1_html +='<td>&nbsp;</td>';

                    tab_1_html +='<td style="padding:0px;" colspan="3" rowspan="5" valign="top">'+oh+'</td>';

                    tab_1_html +='</tr>';

                

                    tab_1_html +='<tr><td style="text-align:left;padding-left:5px;">Working Day</td>';

            tab_1_html += '<td id="work_day" style="text-align:right;">' + resObj.work_day + '</td>';

            //tab_1_html += '<td>&nbsp;</td>';

            tab_1_html += '<td style="text-align:left;">EPF</td>';

            tab_1_html += '<td style="text-align:right;">&nbsp;' + parseFloat(resObj.total_EPF_employee).toFixed(2) + '</td>';

            tab_1_html += '<td style="text-align:right;">&nbsp;' + parseFloat(resObj.total_EPF_employer).toFixed(2) + '</td>';

            //tab_1_html += '<td>&nbsp;</td>';

            tab_1_html += '</tr>';



            tab_1_html += '<tr><td style="text-align:left;padding-left:5px;">Basic Pay</td>';

            tab_1_html += '<td id="basic_pay" style="text-align:right;">' + parseFloat(resObj.basic_pay).toFixed(2) + '</td>';

            //tab_1_html += '<td>&nbsp;</td>';

            tab_1_html += '<td style="text-align:left;">SOCSO</td>';

            tab_1_html += '<td style="text-align:right;">' + parseFloat(resObj.total_socso_employee).toFixed(2) + '</td>';

            tab_1_html += '<td style="text-align:right;">' + parseFloat(resObj.total_socso_employer).toFixed(2) + '</td>';

            //tab_1_html += '<td>&nbsp;</td>';

            tab_1_html += '</tr>';



            tab_1_html += '<tr><td style="text-align:left;padding-left:5px;"></td>';

            tab_1_html += '<td></td>';

            //tab_1_html += '<td>&nbsp;</td>';

            tab_1_html += '<td style="text-align:left;">EIS</td>';

            tab_1_html += '<td style="text-align:right;">&nbsp;' + parseFloat(resObj.Eisww).toFixed(2) + '</td>';

            tab_1_html += '<td style="text-align:right;">&nbsp;' + parseFloat(resObj.Eiscc).toFixed(2) + '</td>';

            //tab_1_html += '<td>&nbsp;</td>';

            tab_1_html += '</tr>';





            tab_1_html += '<tr><td colspan="2" rowspan="5" valign="top">' + pd + '</td>';

            //tab_1_html += '<td rowspan="5" >&nbsp;</td>';

            tab_1_html += '<td colspan="3" rowspan="5" valign="top">' + npd + '</td>';

            //tab_1_html += '<td rowspan="5">&nbsp;</td>';

            tab_1_html += '</tr>';

            //tab_1_html += '<tr><td colspan="3">&nbsp;</td>';

            //tab_1_html += '</tr>';

            tab_1_html += '<tr><td colspan="3" valign="top">' + hw + '</td></tr>';

            tab_1_html += '</table>';

            var oth = '';

            var com = (parseFloat(resObj.commision) + parseFloat(resObj.fix_commision)).toFixed(2);

            var oth_i = 0;

            oth += '<table class="tableheading" width="100%" height="100%" border="0"  cellpadding="0" cellspacing="0" style="border-bottom:0px;">';

            //alert(resObj.director_fee);

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

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

            oth += '<tr><td>Commision</td><td>' + com + '</td></tr>';

            oth += '<tr><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></tr>';

            oth += '</table>';

            var all = '';

            var all_i = 0;

            all += '<table style="border-bottom:0px;" class="tableheading" id="list2" width="100%" height="100%" border="0"  cellpadding="0" cellspacing="0" ><tr><th class="header">Allowance</th><th class="header">&nbsp;</th><th class="header">Amount</th></tr>';

            var _fieldname = "";

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

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

            } else {

                all_i++;

            }

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

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

            } else {

                all_i++;

            }

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

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

            } else {

                all_i++;

            }

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

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

            } else {

                all_i++;

            }

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

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

            } else {

                all_i++;

            }

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

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

            } else {

                all_i++;

            }

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

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

            } else {

                all_i++;

            }

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

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

            } else {

                all_i++;

            }

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

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

            } else {

                all_i++;

            }

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

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

            } else {

                all_i++;

            }

            /*for (i = 0; i < all_i; i++) {

                all += '<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>';

            }*/

            all += '</table>';

            var all1 = '';

            var all1_i = 0;

            all1 += '<table style="border-bottom:0px;" class="tableheading" width="100%" height="100%" border="0"  cellpadding="0" cellspacing="0" ><tr><th class="header">Allowance</th><th class="header">&nbsp;</th><th class="header">Amount</th></tr>';

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

                all1 += '<tr><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') {

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

            } else {

                all1_i++;

            }

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

                all1 += '<tr><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') {

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

            } else {

                all1_i++;

            }

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

                all1 += '<tr><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') {

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

            } else {

                all1_i++;

            }

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

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

            } else {

                all1_i++;

            }

            /*for (i = 0; i < all1_i; i++) {

                all1 += '<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>';

            }*/

            all1 += '</table>';

            //var tab_2_html = '<table class="tableheading" id="list2"><tr><td colspan="2" rowspan="5">' + oth + '</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td colspan="3" rowspan="11" valign="top">' + all + '</td><td>&nbsp;</td><td>&nbsp;</td><td colspan="3" rowspan="11" valign="top">' + all1 + '</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr></table>';



            //var tab_2_html = '<table class="tableheading"><tr><td valign="top">' + oth + '</td><td valign="top">' + all + '</td><td rowspan="2" valign="top">' + all1 + '</td></tr></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>';



            var ded = '';

            var ded_i = 0;



            ded += '<table class="tableheading" width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"><tr><th class="header" style="text-align:left;padding-left:5px;" width="45%">Deduction</th><th width="10%" class="header">&nbsp;</th><th width="45%" class="header">Amount</th></tr>';



            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>&nbsp;</td><td id="deduction_1">' + 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>&nbsp;</td><td id="deduction_2">' + 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>&nbsp;</td><td id="deduction_3">' + 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>&nbsp;</td><td id="deduction_4">' + 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>&nbsp;</td><td id="deduction_5">' + 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>&nbsp;</td><td id="deduction_6">' + 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>&nbsp;</td><td id="deduction_7">' + 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>&nbsp;</td><td id="deduction_8">' + 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>&nbsp;</td><td id="deduction_9">' + parseFloat(resObj.deduction_9).toFixed(2) + '</td></tr>';

            } else {

                ded_i++;

            }

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

                ded += '<tr><td style="text-align:left;padding-left:5px;" id="deduction_text_advance">' + FieldVal[38].field_value + '</td><td>&nbsp;</td><td id="deduction_advance">' + (resObj.advance) + '</td></tr>';

            } else {

                ded_i++;

            }

            



            for (i = 0; i < ded_i; i++) {

                ded += '<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>';

            }

            ded += '</table>';

            var ded1 = '';

            var ded1_i = 0;



            ded1 += '<table class="tableheading" width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"><tr><th class="header" style="text-align:left;padding-left:5px;">Deduction</th><th class="header">&nbsp;</th><th class="header">Amount</th></tr>';

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

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

            } else {

                ded1_i++;

            }

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

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

            } else {

                ded1_i++;

            }

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

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

            } else {

                ded1_i++;

            }

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

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

            } else {

                ded1_i++;

            }

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

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

            } else {

                ded1_i++;

            }

            for (i = 0; i < ded1_i; i++) {

                ded1 += '<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>';

            }

            for (i = 0; i < ded1_i; i++) {

                ded1 += '<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>';

            }

            ded1 += '</table>';





            //var tab_3_html = '<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"><tr><td>' + ded + '</td><td>' + ded1 + '</td></tr></table>';



            var tab_3_html = '<table style="border:0px;" width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"><tr><td>' + ded + '</td><td>' + ded1 + '</td></tr></table>';



            $("#tab_1").html(tab_1_html);

            $("#tab_2").html(tab_2_html);

            $("#tab_3").html(tab_3_html);



            $("#basic_rate").html(parseFloat(resObj.basic_rate).toFixed(2));

            $("#work_day").html(resObj.work_day);

            $("#day_work").html(resObj.day_work);

            $("#basic_pay").html(parseFloat(resObj.basic_pay).toFixed(2));

            $("#compensate").html(parseFloat(resObj.compensate).toFixed(2));

            $("#gratuity").html(parseFloat(resObj.gratuity).toFixed(2));

            $("#compensate_tax").html(parseFloat(resObj.compensate_tax).toFixed(2));

            $("#gratuity_tax").html(parseFloat(resObj.gratuity_tax).toFixed(2));

            $("#total_monthly_over_time_pay").html(parseFloat(resObj.total_monthly_over_time_pay).toFixed(2));

            $("#director_fee").html(parseFloat(resObj.director_fee).toFixed(2));

            $("#total_allowance").html(parseFloat(resObj.total_allowance).toFixed(2));

            $("#gross_pay").html(parseFloat(resObj.gross_pay).toFixed(2));

            $("#other_deduction").html(parseFloat(resObj.other_deduction).toFixed(2));

            $("#total_decduction").html(parseFloat(resObj.total_decduction).toFixed(2));

            $("#net_pay").html(parseFloat(resObj.net_pay).toFixed(2));

            $("#net_paynet_pay_adjustment").html(parseFloat(resObj.net_paynet_pay_adjustment).toFixed(2));

            $("#total_non_pay_leave_amount").html(parseFloat(resObj.total_non_pay_leave_amount).toFixed(2));

            $("#bonus").html(parseFloat(resObj.bonus).toFixed(2));

            $("#commision").html(parseFloat(resObj.commision).toFixed(2));

            $("#extra").html(parseFloat(resObj.extra).toFixed(2));

            $("#compensate_gratuity").html(parseFloat(parseFloat(resObj.compensate) + parseFloat(resObj.gratuity)).toFixed(2));

            $("#tax_overtime").html(parseFloat(resObj.tax_overtime).toFixed(2));

            $("#tax_allowance").html(parseFloat(resObj.tax_allowance).toFixed(2));

            $("#tax_deduct").html(parseFloat(resObj.tax_deduct).toFixed(2));

            $("#tax_relief").html(parseFloat(resObj.tax_relief).toFixed(2));

            $("#allowance_1").html(parseFloat(resObj.allowance_1).toFixed(2));

            $("#allowance_2").html(parseFloat(resObj.allowance_2).toFixed(2));

            $("#allowance_3").html(parseFloat(resObj.allowance_3).toFixed(2));

            $("#allowance_4").html(parseFloat(resObj.allowance_4).toFixed(2));

            $("#allowance_5").html(parseFloat(resObj.allowance_5).toFixed(2));

            $("#allowance_6").html(parseFloat(resObj.allowance_6).toFixed(2));

            $("#allowance_7").html(parseFloat(resObj.allowance_7).toFixed(2));

            $("#allowance_8").html(parseFloat(resObj.allowance_8).toFixed(2));

            $("#allowance_9").html(parseFloat(resObj.allowance_9).toFixed(2));

            $("#allowance_10").html(parseFloat(resObj.allowance_10).toFixed(2));

            $("#allowance_11").html(parseFloat(resObj.allowance_11).toFixed(2));

            $("#allowance_12").html(parseFloat(resObj.allowance_12).toFixed(2));

            $("#allowance_13").html(parseFloat(resObj.allowance_13).toFixed(2));

            $("#allowance_14").html(parseFloat(resObj.allowance_14).toFixed(2));

            $("#allowance_15").html(parseFloat(resObj.allowance_15).toFixed(2));

            $("#allowance_16").html(parseFloat(resObj.allowance_16).toFixed(2));

            $("#allowance_17").html(parseFloat(resObj.allowance_17).toFixed(2));



            $("#deduction_1").html(parseFloat(resObj.deduction_1).toFixed(2));

            $("#deduction_2").html(parseFloat(resObj.deduction_2).toFixed(2));

            $("#deduction_3").html(parseFloat(resObj.deduction_3).toFixed(2));

            $("#deduction_4").html(parseFloat(resObj.deduction_4).toFixed(2));

            $("#deduction_5").html(parseFloat(resObj.deduction_5).toFixed(2));

            $("#deduction_6").html(parseFloat(resObj.deduction_6).toFixed(2));

            $("#deduction_7").html(parseFloat(resObj.deduction_7).toFixed(2));

            $("#deduction_8").html(parseFloat(resObj.deduction_8).toFixed(2));

            $("#deduction_9").html(parseFloat(resObj.deduction_9).toFixed(2));

            $("#deduction_10").html(parseFloat(resObj.deduction_10).toFixed(2));

            $("#deduction_11").html(parseFloat(resObj.deduction_11).toFixed(2));

            $("#deduction_12").html(parseFloat(resObj.deduction_12).toFixed(2));

            $("#deduction_13").html(parseFloat(resObj.deduction_13).toFixed(2));

            $("#deduction_14").html(parseFloat(resObj.deduction_14).toFixed(2));

            $("#deduction_15").html(parseFloat(resObj.deduction_15).toFixed(2));

            //$("#deduction_16").html(parseFloat(resObj.deduction_16).toFixed(2));

            //$("#deduction_17").html(parseFloat(resObj.deduction_17).toFixed(2));



            $("#DW").html(resObj.DW);

            $("#PH").html(resObj.PH);

            $("#AL").html(resObj.AL);

            $("#MC").html(resObj.MC);

            $("#MT").html(resObj.MT);

            $("#MR").html(resObj.MR);

            $("#CL").html(resObj.CL);

            $("#HL").html(resObj.HL);

            $("#EX").html(resObj.EX);

            $("#PT").html(resObj.PT);

            $("#AD").html(resObj.AD);

            $("#OPL").html(resObj.OPL);

            $("#NPL").html(resObj.NPL);

            $("#AB").html(resObj.AB);

            $("#OOB").html(resObj.OOB);

            $("#hr1").html(resObj.hr1);

            $("#hr2").html(resObj.hr2);

            $("#hr3").html(resObj.hr3);

            $("#hr4").html(resObj.hr4);

            $("#hr5").html(resObj.hr5);

            $("#hr6").html(resObj.hr6);



            $("#workhr").html(resObj.workhr);

            $("#latehr").html(resObj.latehr);

            $("#earlyhr").html(resObj.earlyhr);

            $("#nopayhr").html(resObj.nopayhr);

        }

        function page(pageNo) {

            currentPage = pageNo;

            showList();

        }

        function buildPagination() {

            var pagination = '<ul id="pagination-digg">';

            pagination += "<li class=''> <a href='javascript:page(1)' >�Previous</a></li> ";

            for (var i = currentPage - 2; i <= currentPage; i++)

                if (i > 0) {

                    if (i == currentPage)

                        pagination += "<li class='active'> " + i + "</li>";

                    else

                        pagination += "<li><a href='javascript:page(" + i + ")'>" + i + "</a></li>";

                }

            for (var i = currentPage + 1; i <= currentPage + 2; i++)

                if (i <= noPages)

                    pagination += "<li><a href='javascript:page(" + i + ")'>" + i + "</a></li>";

            pagination += "<li class=''><a href='javascript:page(" + noPages + ")'> Next �</a></li>";

            pagination += '</ul>';

            document.getElementById("paginatn").innerHTML = pagination;

        }



    </script>