<div class="container mt-5 mb-5">
    <div class="card bg-light-transparent">  
            <div class="card-header bg-white">
                <div class="float-left">
                    <h5>Admin OT Submission List</h5>
                    <a href="<?php echo base_url('hr/Overtime_report/adminOTSubmissionList_print')?>" target="_blank" class="btn btn-outline-dark btn-sm" title="Print Admin OT Submission List">
                        <i class="fa fa-print"></i> Print
                    </a>
                    <button id="btnShowFilters" type="button" class="btn btn-outline-dark btn-sm collapsed" data-trigger="hover" title="Show Filters Box" data-toggle="collapse" data-target="#collapseFilter" aria-expanded="false">
                        <i class="fas fa-filter"></i>Show Filters
                    </button>
                </div>
            </div>
            <div class="collapse" id="collapseFilter">
                <div class="card-header">
                    <div class="row">
                        <div class="col">
                            <div class="card no-shadow">
                                <div class="card-body">
                                    <input type="hidden" id="dept_id" value="<?php echo $department_id ?>">
                                    <input type="hidden" id="filter_month" value="<?php echo $month ?>">
                                    <div class="row">
                                        <div class="col">
                                            <div class="form-group row">
                                                <label class="col-lg-2">
                                                    Staff
                                                </label>                           
                                                <div class="col-lg-10" >
                                                    <select name="filter_staff" id="filter_staff" class=" form-control">
                                                        <option value="-1">Select Staff</option>
                                                            <?php if(!empty($staff)) foreach ($staff as $row): ?>
                                                                <option value="<?php echo $row['id'];?>" ><?php echo $row['name'];?></option>
                                                            <?php endforeach ?> 
                                                        <option value="-1">All</option>   
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col d-print-none">
                                            <button class="btn btn-info" id="searchBtn">search</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div> 

            <div class="tab-content">
                <div class="tab-pane fade active show" id="tableView" role="tabpanel" aria-labelledby="nav-table-tab">
                    <div class="card-body">
                        <div class="card text-white bg-dark">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-2"></div>
                                    <div class="col-12 col-md-6">
                                        <div class="row">
                                            <label class="col-12 control-label" for="name" align="left">Year :</label>
                                            <div class="col-12">
                                                <input type="text" name="year" id="year" class="form-control" 
                                                <?php if (!empty($year) && $_SESSION['module_data']['role'] == 'moderator') {  ?>value="<?php echo $year ?>" readonly/>
                                                <?php } else { ?>
                                                    value="<?php echo $year ?>" readonly/>
                                                <?php }?>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <label class="col-12 control-label" for="month" >Month:</label>
                                            <div class="col-12">
                                                <input type="text" name="month" id="month" class="form-control" 
                                                <?php if (!empty($month) && $_SESSION['module_data']['role'] == 'moderator') {  ?>value="<?php echo $month ?>" readonly/>
                                                <?php } else { ?>
                                                    value="<?php echo date("F", mktime(0, 0, 0, $month, 10)) ?>" readonly/>
                                                <?php }?>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <label class="col-12 control-label" for="dept_name">Department:</label>
                                            <div class="col-12">
                                                <input type="text" name="dept_name" id="dept_name" class="form-control" data-deptID="<?php echo $ot[0]['deptID'] ?>" value="<?php echo $ot[0]['deptName'] ?>" readonly/>
                                            </div>
                                        </div>
                                    </div>
                                </div>  
                            </div>
                        </div>
                        <div class="card no-shadow">
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-bordered p-0 m-0" width="100%" id="OTClaimTable">
                                        <thead>
                                            <th class="sorting text-center" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" aria-label="#: activate to sort column ascending" style="width: 0px;">
                                                #
                                            </th>
                                            <th class="sorting text-center" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" aria-label="Company Code/ Cost Centre: activate to sort column ascending" style="width: 0px;">
                                                Year
                                            </th>
                                            <th class="sorting text-center" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" aria-label="Company Code/ Cost Centre: activate to sort column ascending" style="width: 0px;">
                                                Month
                                            </th>
                                            <th class="sorting text-center" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" aria-label="Company Code/ Cost Centre: activate to sort column ascending" style="width: 0px;">
                                                Staff Name
                                            </th>
                                            <th class="sorting text-center" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" aria-label="Company Name: activate to sort column ascending" style="width: 0px;">
                                                Total Hour Applied
                                            </th>
                                            <th class="sorting text-center" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" aria-label="Salary/ Wage Month: activate to sort column ascending" style="width: 0px;">
                                                Total Hour Approved
                                            </th>
                                            <th class="sorting text-center" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" aria-label="Employee Total Upload: activate to sort column ascending" style="width: 0px;">
                                                OT Status
                                            </th>
                                            <th class="sorting text-center" tabindex="0" aria-controls="table_contact" rowspan="" colspan="1" aria-label="Total Net Pay: activate to sort column ascending" style="width: 0px;">
                                                Action<br>
                                                <?php if($claimNotApproved > 0){ ?>
                                                    <button type="button" class="btn btn-sm btn-warning btn-block" onclick="payAll()" title="Please verify ALL Claim first!" disabled><i class="far fa-money-bill-alt"></i> PAY ALL</button>
                                                <?php } else {?>
                                                    <button type="button" class="btn btn-sm btn-warning btn-block" onclick="payAll()" title="Pay ALL Claim"><i class="far fa-money-bill-alt"></i> PAY ALL</button>
                                                <?php } ?>    
                                            </th>           
                                        </thead> 
                                        <tbody>
                                            <?php if (!empty($ot)): ?>
                                                <?php foreach ($ot as $key => $ot): ?>
                                                <tr>
                                                    <td class="text-center"><?php echo $key+1;?></td>
                                                    <td class="text-center"><?php echo $ot['year'];?></td>
                                                    <td class="text-center"><?php echo date("F", mktime(0, 0, 0, $ot['month'], 10));?></td>
                                                    <td class="text-center"><?php echo $ot['name'];?></td> 
                                                    <td class="text-center"><?php echo $ot['totalHoursApplied'];?></td> 
                                                    <td class="text-center"><?php echo $ot['totalHoursApproved'];?></td>  
                                                    <td class="text-center">
                                                        <?php if($ot['Pending'] == 0 && $ot['Approved'] == 0 && $ot['Rejected'] == 0){ ?>
                                                            <span class="badge badge-secondary text-white">DRAFT</span><br>
                                                        <?php } else if($ot['Pending'] > 0){ ?>
                                                            <span class="badge badge-warning text-white">PENDING BY HOD</span><br>
                                                        <?php } else if($ot['Approved'] > 0){ ?>
                                                            <span class="badge badge-success text-white">APPROVED BY HOD</span><br>
                                                        <?php } else if($ot['Rejected'] > 0){ ?>
                                                            <span class="badge badge-danger text-white">REJECTED BY HOD</span><br>
                                                        <?php } else { ?>
                                                            <span class="badge badge-secondary text-white">DRAFT</span><br>
                                                        <?php } ?>

                                                        <?php if($ot['claim_status'] == 0){ ?>
                                                            <span class="badge badge-danger text-white">CLAIM PENDING</span><br>
                                                        <?php }else if($ot['claim_status'] == 1){ ?>
                                                            <span class="badge badge-primary text-white" title="CLAIM SUBMITTED on <?php echo $ot['submitTS']; ?>">CLAIM SUBMITTED</span><br>
                                                        <?php } else { ?>
                                                            <span class="badge badge-success text-white">CLAIM VERIFIED</span><br>
                                                        <?php } ?>

                                                        <?php if($ot['paid_status'] == 0){ ?>
                                                            <span class="badge badge-danger text-white">CLAIM UNPAID</span>
                                                        <?php } else { ?> 
                                                            <span class="badge badge-success text-white">CLAIM PAID</span>
                                                        <?php } ?>
                                                    </td>
                                                    <td class="text-center" claimID="<?php echo $ot['otID']; ?>">
                                                        <div class="btn-group" role="group" aria-label="Basic example">
                                                            <?php if($ot['claim_status'] == 2){ ?>
                                                                <button type="button" class="btn btn-warning" title="Pay" onclick="payOTClaim(<?php echo $ot['otID'] ?>)"><i class="far fa-money-bill-alt"></i></button>
                                                            <?php } else { ?>
                                                                <button type="button" class="btn btn-warning" title="Pay" onclick="alertVerifyClaim()"><i class="far fa-money-bill-alt"></i></button>
                                                            <?php } ?>
                                                            <button type="button" class="btn btn-success" onclick="location.href='<?php echo base_url(); ?>hr/overtime/adminOtList/<?php echo $ot['otID'] ?>/<?php echo $ot['peopleid'] ?>'"><i class="fas fa-sign-in-alt"></i></button>
                                                        </div>
                                                    </td>     
                                                <?php endforeach ?>
                                            <?php endif ?>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>      
        </div>
</div>

<!-- Modal change status -->

<div class="modal fade" id="modal_paid" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog ">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Claim Paid Status</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row form-group">
                    <div class="col-lg-3">
                        <label for="change_status">Paid Status</label>
                        <input type="hidden" name="claimID" id="claimID" value="">
                    </div>
                    <div class="col">
                        <select name="change_status" class="form-control" id="change_status">
                            <option value="0">Unpaid</option>
                            <option value="1">Paid</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button onclick="saveClaimPaid()" type="button" id="saveButtonBank" class="btn btn-success btn-sm" style="margin-bottom:15px; width: 200px;"><i class="fa fa-save"></i> Save</button>
                <button type="button" class="btn btn-danger btn-sm" style="margin-bottom:15px; width: 200px;" data-dismiss="modal"><i class="fa fa-ban"></i> Cancel</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal add OT -->

<script>
    var token = "<?php echo $_SESSION['token'];?>"; 
    $(document).ready(function(){

        //getStaffOt();

        $('#searchBtn').click(function(){
            getStaffOt();
        });
    });

    function getStaffOt() 
    {
        var table = $('.table').DataTable();
        table.clear().draw();
        var frmData = new FormData();

        frmData.append('filter_year',$('#year').val());
        frmData.append('filter_month',$('#filter_month').val());
        frmData.append('filter_staff',$('#filter_staff').val());
        frmData.append('filter_department',$('#dept_name').attr('data-deptID'));
        
        $.ajax({
            url:"<?php echo base_url('/hr/api/overtime/getStaffOt'); ?>",
            type:'post',
            dataType:'json',
            data:frmData,
            processData: false,
            contentType: false,
            success:function(data){

                iziToast.success({
                    position: 'bottomRight',
                    message: 'filtering data',
                });

                if(data.table){
                    for (var i = 0; i < data.table.length; i++) {
                        if(data.table[i].month == 1){
                            var month = "January";
                        }else if(data.table[i].month == 2){
                            var month = "February";
                        }else  if(data.table[i].month == 3){
                            var month = "March";
                        }else  if(data.table[i].month == 4){
                            var month = "April";
                        }else  if(data.table[i].month == 5){
                            var month = "May";
                        }else  if(data.table[i].month == 6){
                            var month = "June";
                        }else  if(data.table[i].month == 7){
                            var month = "July";
                        }else  if(data.table[i].month == 8){
                            var month = "August";
                        }else  if(data.table[i].month == 9){
                            var month = "September";
                        }else  if(data.table[i].month == 10){
                            var month = "October";
                        }else  if(data.table[i].month == 11){
                            var month = "November";
                        }else  if(data.table[i].month == 12){
                            var month = "December";
                        }else var month = "Unknown";

                        if(data.table[i].Pending == 0 && data.table[i].Approved == 0 && data.table[i].Rejected == 0){
                            var badge = '<span class="badge badge-secondary text-white">DRAFT</span>';
                        }else if(data.table[i].Pending > 0){
                            var badge = '<span class="badge badge-warning text-white">PENDING BY HOD</span>';
                        }else if(data.table[i].Approved > 0){
                            var badge = '<span class="badge badge-success text-white">APPROVED BY HOD</span>';
                        }else if(data.table[i].Rejected > 0){
                            var badge = '<span class="badge badge-danger text-white">REJECTED BY HOD</span>';
                        }else var badge = '<span class="badge badge-secondary text-white">DRAFT</span>';

                        if(data.table[i].claim_status == 0){
                            var badge2     = '<span class="badge badge-danger text-white">CLAIM PENDING</span>';
                        }else if(data.table[i].claim_status == 1){
                            var badge2     = '<span class="badge badge-primary text-white" title="CLAIM SUBMITTED on '+data.table[i].submitTS+'">CLAIM SUBMITTED</span>';
                        }else var badge2   = '<span class="badge badge-success text-white">CLAIM APPROVED</span>';
                              

                        if(data.table[i].claim_status == 2){
                            var buttonPaid = '<button type="button" class="btn btn-warning" title="Pay" onclick="payOTClaim()"><i class="far fa-money-bill-alt"></i></button>';
                        }else var buttonPaid = '<button type="button" class="btn btn-warning" title="Pay" onclick="alertVerifyClaim()"><i class="far fa-money-bill-alt"></i></button>';

                        if(data.table[i].paid_status == 0){
                            var badge3 = '<span class="badge badge-danger text-white">CLAIM UNPAID</span>';
                        }else var badge3 = '<span class="badge badge-success text-white">CLAIM PAID</span>';
                        
                        table.row.add({
                            0   : i+1,
                            1   : '<div class="text-center">'+data.table[i].year+'</div>',
                            2   : '<div class="text-center">'+month+'</div>',
                            3   : '<div class="text-center">'+data.table[i].name+'</div>',
                            4   : '<div class="text-center">'+data.table[i].totalHoursApplied+'</div>',
                            5   : '<div class="text-center">'+data.table[i].totalHoursApproved+'</div>',
                            6   : '<div class="text-center">'+badge+'<br>'+badge2+'<br>'+badge3+'</div>',
                            7   : '<div class="text-center">'+
                                    '<div class="btn-group" role="group" aria-label="Basic example">'+
                                        buttonPaid +
                                        '<button type="button" class="btn btn-success" onclick="location.href=' +"'<?php echo base_url(); ?>" + "hr/overtime/adminOtList/" + data.table[i].otID + "/" + data.table[i].peopleID + "'"+'"><i class="fas fa-sign-in-alt"></i></button>'+
                                    '</div>'+
                                  '</div>'
                        }).draw();
                        console.log(data);
                    }
                    
                }
                
            },
            error:function(){
                 iziToast.warning({
                    position: 'bottomRight',
                    message: '500 Internal Server Error.'
                });
            }
        });
    }


    function changeStaffList(obj) 
    {
        var id = obj.value;

        $.ajax({
            type: "POST",
            url: "<?php echo base_url() ?>hr/overtime/getStaffList",
            data: "department_id=" + id,
            dataType: "json",
            success: function(content) {

                if (content.status == "success") {

                    var items = [];
                    items.push('<option>ALL</option>');
                    for (var i = 0; i < content.message.length; i++) {
                        items.push('<option value="' + content.message[i].id + '">'
                                + content.message[i].name + '</option>');
                    }
                    jQuery("#filter_staff").empty();
                    jQuery("#filter_staff").append(items.join('</br>'));
                } else {
                    $("#error").html('<p>' + content.message + '</p>');
                }
            }
        });
        return false;
    }

    function payOTClaim(claimID)
    {
        $("#modal_paid").modal();
        $("#claimID").val(claimID);

    }

    function saveClaimPaid()
    {
        $.ajax({
            url:'<?php echo base_url('hr/overtime/changeStatusPaid') ?>',
            data: {
                otID        : $("#claimID").val(),
                paid_status : $('#change_status').val(),
            },
            type: 'post',
            dataType: 'json',
            success: (data) => {
                if(data.status == "Success") {
                localStorage.setItem("status", data.status);
                localStorage.setItem("msg", data.msg);

                location.reload();
                }
            }
        });
    }

    function payAll() {
        validateForm("#tableView", "Are you sure you want to pay ALL OT Claim?", function() {
            var oTable = $('#OTClaimTable').dataTable();
            var aTrs = oTable.fnGetNodes();

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

                var postData = {
                    claimID : $('td:nth-child(8)',aTrs[i]).attr('claimID')
                }

                $.ajax({
                    type: "POST",
                    url: "<?php echo base_url(); ?>hr/Overtime/payAllOTClaim",
                    data: postData,
                    dataType:'json',
                    success: function(data){
                        if(data.status = 'success'){

                            localStorage.setItem("status", data.status);
                            localStorage.setItem("msg", data.msg);

                            location.reload();
                        }
                    }
                });
            }
        });
    }

    function alertVerifyClaim()
    {
        alert("Please verify this OT Claim first.");
        return false;
    }

</script> 