<div class="container mt-5 mb-5">
    <div class="card bg-light-transparent">  
            <div class="card-header bg-white">
                <div class="float-left">
                    <h5>My OT Claim List</h5>
                    <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>
                    <a href="<?php echo base_url('hr/Overtime_report/myClaimSubmissionList_print')?>" target="_blank" class="btn btn-outline-dark btn-sm" title="Print Staff Movement">
                        <i class="fa fa-print"></i>Print
                    </a>
                </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" name="user_id" id="user_id" value="<?php echo $_SESSION['user']['id']; ?>">
                                    <div class="form-group row">
                                        <label for="filter_year" class="col-lg-3">
                                            Year
                                        </label>                           
                                        <div class="col-lg-4">
                                            <select class="custom-select" name="filter_year" id="filter_year">
                                                <option value="-1">[All]</option>
                                                <?php if($yearList) foreach($yearList as $row){
                                                echo '<option value="'.$row->year.'" ';
                                                echo ($row->year == date('Y'))?'selected':''; 
                                                echo ' >'.$row->year.'</option>'; 
                                            }
                                            ?>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group row"> 
                                        <label for="filter_month" class="col-lg-3">
                                            Month
                                        </label>                           
                                        <div class="col-lg-4" >
                                            <select name="filter_month" id="filter_month" class=" form-control">
                                                <option value="-1">[All]</option>
                                                    <?php if(!empty($month)) foreach ($month as $row): 
                                                        echo '<option value="'. $row->id.'" ';
                                                        echo ($row->id == date('n'))?'selected':''; 
                                                        echo ' >'. $row->month.'</option>'; 
                                                     endforeach ?>  
                                            </select>
                                        </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 no-shadow">
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-bordered p-0 m-0" width="100%">
                                        <thead>
                                            <th class="sorting" 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 Name: activate to sort column ascending" style="width: 0px;">
                                                Total Hours 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 Hours 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;">
                                                Claim 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
                                            </th>           
                                        </thead>
                                        <tbody>
                                            <?php if (!empty($otSubList)): ?>
                                                <?php foreach ($otSubList 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->totalHoursApplied;?></td> 
                                                    <td class="text-center"><?php echo $ot->totalHoursApprovedFinal;?></td>  
                                                    <td class="text-center">

                                                        <?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">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"><a href="<?php echo base_url(); ?>/hr/overtime/otClaimList/<?php echo $ot->ID ?>" class="btn btn-success btn-sm" data-tooltip="tooltip" data-placement="bottom" data-trigger="hover" data-original-title="View OT"><i class="fas fa-sign-in-alt"></i></a></td>     
                                                <?php endforeach ?>
                                            <?php endif ?>
                                        </tbody> 
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>      
        </div>
</div>

<script>

    $('.datepicker').datepicker({
        uiLibrary: 'bootstrap4',
        autoclose: true,
        orientation: 'bottom',
        format: "mm-yyyy",
        viewMode: "months", 
        minViewMode: "months"
    });

    $(document).ready(function(){

        //getData();

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

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

        frmData.append('filter_year',$('#filter_year').val());
        frmData.append('filter_month',$('#filter_month').val());
        frmData.append('user_id',$('#user_id').val());
        
        $.ajax({
            url:"<?php echo base_url('/hr/api/overtime/getMyOtLists'); ?>",
            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 = "Jun";
                        }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].claim_status == 0){
                            var badge = '<span class="badge badge-danger text-white">CLAIM PENDING</span>';
                        }else if(data.table[i].claim_status == 1){
                            var badge = '<span class="badge badge-primary text-white">CLAIM SUBMITTED</span>';
                        }else var badge = '<span class="badge badge-success text-white">CLAIM VERIFIED</span>';

                        if(data.table[i].paid_status == 0){
                            var badge2 = '<span class="badge badge-danger text-white">CLAIM UNPAID</span>';
                        }else var badge2 = '<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].totalHoursApplied+'</div>',
                            4   : '<div class="text-center">'+data.table[i].totalHoursApproved+'</div>',
                            5   : '<div class="text-center">'+badge+'<br>'+badge2+'</div>',
                            6   : '<div class="text-center"><a href="<?php echo base_url(); ?>/hr/overtime/otClaimList/'+ data.table[i].otID+'" class="btn btn-success btn-sm" data-tooltip="tooltip" data-placement="bottom" data-trigger="hover" data-original-title="View Claim"><i class="fas fa-sign-in-alt"></i></a></div>',
                        }).draw();
                        console.log(data);
                    }
                    
                }
                
            },
            error:function(){
                 iziToast.warning({
                    position: 'bottomRight',
                    message: '500 Internal Server Error.'
                });
            }
        });
}

</script> 