<?php include($_SERVER['DOCUMENT_ROOT'] . "/COMPONENTS/root/path.php"); ?>
<style>
    #tab-container {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    #tab-container .tab-content {
        display: none;
        padding: 20px 0 0;
    }

    #tab-container input[type="radio"] {
        display: none;
    }

    #tab-container input:checked+label {
        color: #bd235d;
    }

    #tab-container label {
        display: inline-block;
        padding: 0 25px;
        font-weight: 600;
    }

    #tab-container label:not(:first-of-type) {
        border-left: 2px solid #991a48;
    }

    @media screen and (max-width: 480px) {
        #tab-container label:not(:first-of-type) {
            border-left: none;
        }
    }

    @media screen and (max-width: 480px) {
        #tab-container label {
            display: block;
        }
    }

    #tab-container label:hover {
        color: #bd235d;
        cursor: pointer;
    }

    #tab-container #tab1:checked~#content1 {
        display: block;
    }

    #tab-container #tab2:checked~#content2 {
        display: block;
    }

    #tab-container #tab3:checked~#content3 {
        display: block;
    }

    #tab-container #tab4:checked~#content4 {
        display: block;
    }

    #tab-container #tab5:checked~#content5 {
        display: block;
    }

    #tab-container #tab6:checked~#content6 {
        display: block;
    }

    #tab-container #tab7:checked~#content7 {
        display: block;
    }

    #tab-container #tab8:checked~#content8 {
        display: block;
    }

    #tab-container #tab9:checked~#content9 {
        display: block;
    }

    #tab-container #tab10:checked~#content10 {
        display: block;
    }


    #tab-container .card-body {
        width: 100%;
        background: #fff;
        -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    }

    #tab-container .card-body .card-title {
        padding-top: 20px;
        text-transform: uppercase;
        font-weight: 700;
    }

    #tab-container .card-body .card-description {
        padding-bottom: 20px;
    }

    #tab-container .card-body .card-link {
        padding-bottom: 20px;
        text-transform: uppercase;
        color: #bd235d;
        display: block;
    }



























    .tabset>input[type="radio"] {
        position: absolute;
        left: -200vw;
    }

    .tabset .tab-panel {
        display: none;
    }

    .tabset>input:first-child:checked~.tab-panels>.tab-panel:first-child,
    .tabset>input:nth-child(3):checked~.tab-panels>.tab-panel:nth-child(2),
    .tabset>input:nth-child(5):checked~.tab-panels>.tab-panel:nth-child(3),
    .tabset>input:nth-child(7):checked~.tab-panels>.tab-panel:nth-child(4),
    .tabset>input:nth-child(9):checked~.tab-panels>.tab-panel:nth-child(5),
    .tabset>input:nth-child(11):checked~.tab-panels>.tab-panel:nth-child(6),
    .tabset>input:nth-child(13):checked~.tab-panels>.tab-panel:nth-child(7),
    .tabset>input:nth-child(15):checked~.tab-panels>.tab-panel:nth-child(8),
    .tabset>input:nth-child(17):checked~.tab-panels>.tab-panel:nth-child(9),
    .tabset>input:nth-child(19):checked~.tab-panels>.tab-panel:nth-child(10),
    .tabset>input:nth-child(21):checked~.tab-panels>.tab-panel:nth-child(11),
    .tabset>input:nth-child(23):checked~.tab-panels>.tab-panel:nth-child(12),
    .tabset>input:nth-child(25):checked~.tab-panels>.tab-panel:nth-child(13),
    .tabset>input:nth-child(27):checked~.tab-panels>.tab-panel:nth-child(14),
    .tabset>input:nth-child(29):checked~.tab-panels>.tab-panel:nth-child(15),
    .tabset>input:nth-child(31):checked~.tab-panels>.tab-panel:nth-child(16),
    .tabset>input:nth-child(33):checked~.tab-panels>.tab-panel:nth-child(17),
    .tabset>input:nth-child(35):checked~.tab-panels>.tab-panel:nth-child(18),
    .tabset>input:nth-child(37):checked~.tab-panels>.tab-panel:nth-child(19),
    .tabset>input:nth-child(39):checked~.tab-panels>.tab-panel:nth-child(20),
    .tabset>input:nth-child(41):checked~.tab-panels>.tab-panel:nth-child(21),
    .tabset>input:nth-child(43):checked~.tab-panels>.tab-panel:nth-child(22) {
        display: block;
    }

    .tabset>label {
        position: relative;
        display: inline-block;
        padding: 15px 15px 25px;
        border: 1px solid transparent;
        border-bottom: 0;
        cursor: pointer;
        font-weight: 500;
    }

    .tabset>label::after {
        content: "";
        position: absolute;
        left: 15px;
        bottom: 10px;
        width: 22px;
        height: 4px;
        background: #8d8d8d;
    }

    .tabset>label:hover,
    .tabset>input:focus+label {
        color: #bd235d;
    }

    .tabset>label:hover::after,
    .tabset>input:focus+label::after,
    .tabset>input:checked+label::after {
        background: #bd235d;
    }

    .tabset>input:checked+label {
        border-color: #bd235d;
        border-bottom: 1px solid #fff;
        margin-bottom: -1px;
        color: #bd235d;
    }

    .tab-panel {
        padding: 30px 0;
        border-top: 1px solid #ccc;
    }




















    style>table {
        border: 1px solid #ccc;
        border-collapse: collapse;
        table-layout: fixed;
        width: 100%;
    }



    table tr {
        border: 1px solid #ddd;
        padding: .35em;
    }

    table tr:nth-child(even) {
        background: #f8f8f8;
    }

    table th,
    table td {
        padding: .625em;
        text-align: center;

    }

    table th {
        /* background: #999; */
        color: #fff;
        font-size: .85em;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

    table td {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .btnn {
        /* width:50px !important;
        height:30px !important; */
        border-radius: 8px;
        cursor: pointer;

    }

    .ii {
        font-size: 13px;
        width: 100%;
        float: right;
        text-align: right;
    }

    .modal-lg {
        max-width: 80%;
    }

    .card {
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.082), 0 6px 6px rgba(0, 0, 0, 0.082);
    }

    .ul {
        list-style: none;
        margin: 0;
        padding: 0;
        position: relative;
    }

    .ul:before {
        content: "";
        display: inline-block;
        width: 2px;
        background: red;
        position: absolute;
        left: 3px;
        top: 5px;
        height: calc(100% - 10px);
    }

    .ul .li {
        position: relative;
        padding-left: 15px;
        margin-bottom: 15px;
    }

    .ul .li:before {
        content: "";
        display: inline-block;
        width: 8px;
        height: 8px;
        background: red;
        position: absolute;
        left: 0;
        top: 5px;
        border-radius: 10px;
    }

    /*# sourceMappingURL=a.css.map */

    /*# sourceMappingURL=a.css.map */
</style>


<div class="card">
    <div class="card-body">
        <h1 style='font-size:18px; text-align:center; color:black;' class="configHeading"></h1>

        <div class="row">
            <div class="col-md-5">

                <div class="form-group inventoryCategory">
                    <label for="iCategory" class="inventoryCategoryLabel">Select Year</label>
                    <select class="form-control year" name="year">
                        <?php
                        echo '<option value="' . Date('Y', strtotime(DATE("Y-m"))) . '" selected>' . Date('Y', strtotime(DATE("Y-m"))) . '</option>';
                        ?>
                        <option value="2010"> 2010 </option>
                        <option value="2011"> 2011 </option>
                        <option value="2012"> 2012 </option>
                        <option value="2013"> 2013 </option>
                        <option value="2014"> 2014 </option>
                        <option value="2015"> 2015 </option>
                        <option value="2016"> 2016 </option>
                        <option value="2017"> 2017 </option>
                        <option value="2018"> 2018 </option>
                        <option value="2019"> 2019 </option>
                        <option value="2020"> 2020 </option>
                        <option value="2021"> 2021 </option>
                        <option value="2022"> 2022 </option>
                        <option value="2023"> 2023 </option>
                        <option value="2024"> 2024 </option>
                        <option value="2025"> 2025 </option>
                        <option value="2026"> 2026 </option>
                        <option value="2027"> 2027 </option>
                        <option value="2028"> 2028 </option>
                        <option value="2029"> 2029 </option>
                        <option value="2030"> 2030 </option>
                    </select>
                </div>
            </div>

            <div class="col-md-5">
                <div class="form-group secondInput">
                    <label for="name" class="Description">Select Month</label>
                    <select class="form-control month" name="month">
                        <?php
                        echo '<option value="' . Date('m', strtotime(DATE("Y-m"))) . '" data-month="' . Date('F', strtotime(DATE("Y-m"))) . '" selected>' . Date('F', strtotime(DATE("Y-m"))) . '</option>';
                        ?>
                        <option value="01" data-month="January">January</option>
                        <option value="02" data-month="February">February</option>
                        <option value="03" data-month="March">March</option>
                        <option value="04" data-month="April">April</option>
                        <option value="05" data-month="May">May</option>
                        <option value="06" data-month="June">June</option>
                        <option value="07" data-month="July">July</option>
                        <option value="08" data-month="August">August</option>
                        <option value="09" data-month="September">September</option>
                        <option value="10" data-month="October">October</option>
                        <option value="11" data-month="November">November</option>
                        <option value="12" data-month="December">December</option>
                    </select>
                </div>
            </div>

            <div class="col-md-2">
                <div class="form-group text-center">
                    <button type="button" class="btn btn-rounded btn-primary searchPayrollDate" style="width:100%; margin-top:20px;"><span class='submitLoader'>Search</span></button>
                </div>
            </div>



            <div class="col-md-12" style="float:right;">
                <?php
                echo  '<div style="text-align:right; margin-bottom:10px;">';
                echo "<a class='printPAYEReport' data-url='/COMPONENTS/sub-pages/payroll-print-paye-report.php?idd='''  style='cursor: pointer; background:none; border:none; margin-bottom:10px; color:black; text-shadow: 
                            1px  1px     rgb(199, 199, 199), 
                            -1px  1px     rgb(199, 199, 199), 
                            1px -1px     rgb(199, 199, 199), 
                            -1px -1px     rgb(199, 199, 199),
                            1px  1px 5px #555;'>Print PAYE <i class='fa fa-print' style='font-size:20px; color:rgb(29, 29, 29);'></i></a>&nbsp;&nbsp;&nbsp;||&nbsp;&nbsp;&nbsp;";
                echo "<a class='printSSNIT_Tier1' data-url='/COMPONENTS/sub-pages/payroll-print-ssnit-tier1-report.php?idd='''  style='cursor: pointer; background:none; border:none; margin-bottom:10px; color:black; text-shadow: 
                            1px  1px     rgb(199, 199, 199), 
                            -1px  1px     rgb(199, 199, 199), 
                            1px -1px     rgb(199, 199, 199), 
                            -1px -1px     rgb(199, 199, 199),
                            1px  1px 5px #555;'>Print SSNIT-TIER 1 <i class='fa fa-print' style='font-size:20px; color:rgb(29, 29, 29);'></i></a>&nbsp;&nbsp;&nbsp;||&nbsp;&nbsp;&nbsp;";
                echo "<a class='printSSNIT_Tier2' data-url='/COMPONENTS/sub-pages/payroll-print-ssnit-tier2-report.php?idd='''  style='cursor: pointer; background:none; border:none; margin-bottom:10px; color:black; text-shadow: 
                            1px  1px     rgb(199, 199, 199), 
                            -1px  1px     rgb(199, 199, 199), 
                            1px -1px     rgb(199, 199, 199), 
                            -1px -1px     rgb(199, 199, 199),
                            1px  1px 5px #555;'>Print SSNIT-TIER 2 <i class='fa fa-print' style='font-size:20px; color:rgb(29, 29, 29);'></i></a>&nbsp;&nbsp;&nbsp;||&nbsp;&nbsp;&nbsp;";
                echo "<a class='printBulkPayslips' data-url='/COMPONENTS/sub-pages/payroll-print-bulk-payslips.php?idd='''  style='cursor: pointer; background:none; border:none; margin-bottom:10px; color:black; text-shadow: 
                            1px  1px     rgb(199, 199, 199), 
                            -1px  1px     rgb(199, 199, 199), 
                            1px -1px     rgb(199, 199, 199), 
                            -1px -1px     rgb(199, 199, 199),
                            1px  1px 5px #555;'>Print all payslips <i class='fa fa-print' style='font-size:20px; color:rgb(29, 29, 29);'></i></a>&nbsp;&nbsp;&nbsp;||&nbsp;&nbsp;&nbsp;";
                echo "<a class='printStaffPayslipTable' data-url='/COMPONENTS/sub-pages/payroll-print-staff-payslip-table.php?idd=''' style='cursor: pointer; background:none; border:none; margin-bottom:10px; color:black; text-shadow: 
                                1px  1px     rgb(199, 199, 199), 
                            -1px  1px     rgb(199, 199, 199), 
                                1px -1px     rgb(199, 199, 199), 
                            -1px -1px     rgb(199, 199, 199), 
                                1px  1px 5px #555;'>Print table <i class='fa fa-print' style='font-size:20px; color:rgb(29, 29, 29);'></i></a>";
                echo "</div>";
                ?>
            </div>
        </div>
    </div>
</div>

<div class="row" style="margin-top:-40px; margin-bottom:-40px;">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title" style='text-transform:uppercase;'>Payroll For The Month Of <span class="monthTitle"></span>, <span class="yearTitle"></span></h4>
                <h6 class="card-subtitle"></h6>
                <div class="table-responsive">
                    <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>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-body payroll-totals">

    </div>
</div>



<!-- under-construction -->


<div class="modals"></div>

<script>
    $(".modals").load(domain + "/COMPONENTS/sub-pages/modals.php");
    $('.yearTitle').html($(".year").val());
    $('.monthTitle').html($(".month option:selected").attr("data-month"));
    var year = $(".year").val();
    var month = $(".month").val();
    $(".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);
    $(".searchPayrollDate").off().on("click", function() {
        var year = $(".year option:selected").val();
        var month = $(".month option:selected").val();
        var monthTitle = $(".month option:selected").attr("data-month");
        sessionStorage.setItem("year", year);
        sessionStorage.setItem("month", month);
        $('.yearTitle').html(year);
        $('.monthTitle').html(monthTitle);
        $(".table-responsive").load(domain + "/COMPONENTS/super-admin/payroll-staff-details.php");
    });

    $(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');
        });
    });

    // $('.printPAYEReport,.printSSNIT_Tier1,.printSSNIT_Tier2,.printBulkPayslips,.printStaffPayslipTable,.printPaySlip').on('click', function() {
    //     alert(1);
    //   var url = $(this).attr('data-url');
    //   sessionStorage.setItem('url', url);
    //   $("#bill").load(WebsiteName + "/COMPONENTS/payroll/sub.view-payroll-paye-in-iframe.php", function() {
    //     $("#myModal_printIndividualStudentBill").modal('show');
    //   });

    // })
</script>

<script src="<?php echo $website_name; ?>/dist/js/pages/dashboards/dashboard1.min.js"></script>