<table id="example" style='Width:100%'>
    <thead class="bg-info">
        <tr>
            <!-- <th scope="col" style="width:50px;"></th> -->
            <th scope="col">Staff</th>
            <th scope="col">Role</th>
            <th scope="col">Basic</th>
            <th scope="col">Allowances</th>
            <th scope="col">Gross</th>
            <th scope="col">Ssnit</th>
            <th scope="col">Tax</th>
            <th scope="col">Other Ded.</th>
            <th scope="col">Net Salary</th>
            <th scope="col">Actions</th>
        </tr>
    </thead>
</table>



<script>
    $(".modals").load(domain + "/COMPONENTS/sub-pages/modals.php");
    var year = sessionStorage.getItem("year");
    var month = sessionStorage.getItem("month");
    $(".payroll-totals").load(domain + "/COMPONENTS/sub-pages/payroll-totals.php?year=" + encodeURIComponent(year) + "&month=" + encodeURIComponent(month) + "");
    var table = $('#example').DataTable({
        responsive: true,
        "ajax": {
            "url": domain_api + "/payroll/select-staff.php?year=" + encodeURIComponent(year) + "&month=" + encodeURIComponent(month) + "",
            "dataSrc": "staff_list_payroll"
        },
        "columns": [{
                "data": null,
                render: function(data, type, row) {
                    var name = data.first_name + " " + data.last_name;
                    return name;
                }
            },
            {
                "data": "role"
            },
            {
                "data": "BasicSalary"
            },
            {
                "data": null,
                render: function(data, type, row) {
                    if (isNaN(data.Allowances)) {
                        return "0.00";
                    } else {
                        return data.Allowances;
                    }
                }
            },
            {
                "data": null,
                render: function(data, type, row) {
                    if (isNaN(data.GrossSalary)) {
                        return "0.00";
                    } else {
                        return data.GrossSalary;
                    }
                }
            },
            {
                "data": null,
                render: function(data, type, row) {
                    if (isNaN(data.SsnitRelief)) {
                        return "0.00";
                    } else {
                        return data.SsnitRelief;
                    }
                }
            },

            {
                "data": null,
                render: function(data, type, row) {
                    if (isNaN(data.TotalTax)) {
                        return "0.00";
                    } else {
                        return data.TotalTax;
                    }
                }
            },
            {
                "data": null,
                render: function(data, type, row) {
                    if (isNaN(data.OtherDeductions)) {
                        return "0.00";
                    } else {
                        return data.OtherDeductions;
                    }
                }
            },
            {
                "data": null,
                render: function(data, type, row) {
                    if (isNaN(data.NetSalary)) {
                        return "0.00";
                    } else {
                        return data.NetSalary;
                    }
                }
            },
            {
                "data": null,
                render: function(data, type, row) {
                    return '<div class="btn btnn btn-primary preparePayroll" data-idd="' + data.unique_user_id + '" title="Profile"><i class="ii far fa-edit"></i></div>' +
                        '<div class="btn btnn btn-success printPaySlip" data-id="' + data.unique_user_id + '" data-url="/COMPONENTS/sub-pages/payroll-print-payslip.php?idd=' + data.unique_user_id + '" title="Edit" style="margin-left:5px; margin-right:5px;"><i class="ii fas fa-print"></i></div>'
                }
            }

        ]
    });

    new $.fn.dataTable.FixedHeader(table);

    $(document).unbind().on("click", ".preparePayroll", function() {
        var idd = $(this).attr('data-idd');
        var year = $(".year option:selected").val();
        var month = $(".month option:selected").val();
        $(".profileView").load(domain + "/COMPONENTS/sub-pages/payroll-form.php?idd=" + encodeURIComponent(idd) + "&year=" + encodeURIComponent(year) + "&month=" + encodeURIComponent(month) + "", function() {
            $(".modal-lg").css("width","1100px");
            $("#myModal_profile").modal("show");
        });
    });

    $(document).on("click", ".printPAYEReport,.printSSNIT_Tier1,.printSSNIT_Tier2,.printBulkPayslips,.printStaffPayslipTable,.printPaySlip", function() {
        var id = $(this).attr("data-id");
        var url = $(this).attr("data-url");
        var year = $(".year option:selected").val();
        var month = $(".month option:selected").val();
        sessionStorage.setItem('url-print', domain + url + "&year=" + year + "&month=" + month + "");
        $("#bill").load(domain + "/COMPONENTS/sub-pages/print-in-iframe.php", function() {
            $("#myModal_printIndividualStudentBill").modal('show');
        });
    });
</script>
