<div class="container mt-5 mb-5">
    <div class="card bg-light-transparent">  
        <div class="card-header bg-white">
            <div class="">
                <h5>HOD OT Submission List For <?php echo $department_name; ?> Department</h5>					
                <a href="<?php //echo base_url('hr/movement/list_report')?>" target="_blank" class="btn btn-outline-dark btn-sm" title="Print HOD 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">
                                <div class="form-group row">
                                    <label for="filterYear" class="col-lg-3">
                                        Year
                                    </label>                           
                                    <div class="col-lg-4" >
                                        <select class="custom-select" name="filterYear" id="filterYear">
                                            <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="filterMonth" class="col-lg-3">
                                        Month
                                    </label>                           
                                    <div class="col-lg-4" >
                                        <select name="filterMonth" id="filterMonth" 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 ?> 
                                            <option value="-1">[All]</option>   
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-lg-3">
                                        Name
                                    </label>                           
                                    <div class="col-lg-4" >
                                        <select name="filterStaff" id="filterStaff" class="select form-control">
                                            <option value="-1">[All]</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 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-hover table-bordered p-0 m-0" width="100%">
                                    <thead>
                                        <th class="sorting" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1"  style="width: 0px;">
                                            #
                                        </th>
                                        <th class="sorting" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1"  style="width: 0px;">
                                            Year
                                        </th>
                                        <th class="sorting" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1"  style="width: 0px;">
                                            Month
                                        </th>
                                        <th class="sorting" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1"  style="width: 0px;">
                                            Staff Name
                                        </th>
                                        <th class="sorting text-center" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1"  style="width: 0px;">
                                            Total Hour Applied
                                        </th>
                                        <th class="sorting text-center" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1"  style="width: 0px;">
                                            Total Hour Approved
                                        </th>
                                        <th class="sorting text-center" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1"  style="width: 0px;">
                                            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 
									$no = 1; 
									if($otStaffLists) foreach($otStaffLists as $row) {
                                        echo '<tr><td>'.$no++.'</td>'; 
										echo '<td>'.$row['year'].'</td>';
                                        echo '<td>'.date('F', mktime(0, 0, 0, $row['month'], 10)).'</td>';
                                        echo '<td>'.$row['name'].'</td>';
                                        echo '<td class="text-center">'.$row['totalHoursApplied'].'</td>';
                                        echo '<td class="text-center">'.$row['totalHoursApproved'].'</td>';
                                        echo '<td><span class="badge badge-warning text-white p-1" style="border-radius: 30px" title="Pending By HOD">'.$row['Pending'].'</span>
                                                <span class="badge badge-success text-white p-1" style="border-radius: 100px" title="Approved By HOD">'.$row['Approved'].'</span>
                                                <span class="badge badge-danger text-white p-1" style="border-radius: 30px" title="Rejected By HOD">'.$row['Rejected'].'</span>
                                            </td>';
                                        echo '<td class="text-center">
                                                <a href="'. base_url().'hr/overtime/hodOtList/'.$row['otID'].'/'.$row['user_id'].'" class="btn btn-success btn-sm" data-toggle="tooltip" data-placement="top" title="Choose OT"><i class="fas fa-sign-in-alt"></i></a>
                                            </td> ';
                                        echo '</tr>'; 
									} ?> 
                                    </tbody>    
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>      
    </div><br>

    <div class="card bg-light-transparent">  
        <div class="card-header bg-white">
            <div class="">
                <h5>OT Submission List For Job Supervised</h5>                  
                <!-- <a href="<?php //echo base_url('hr/movement/list_report')?>" target="_blank" class="btn btn-outline-dark btn-sm" title="Print HOD 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="#collapseFilterSV" aria-expanded="false">
                    <i class="fas fa-filter"></i>Show Filters
                </button>
            </div>
        </div>
        <div class="collapse" id="collapseFilterSV">
            <div class="card-header">
                <div class="row">
                    <div class="col">
                        <div class="card no-shadow">
                            <div class="card-body">
                                <div class="form-group row">
                                    <label for="filterYearSV" class="col-lg-3">
                                        Year
                                    </label>                           
                                    <div class="col-lg-4" >
                                        <select class="custom-select" name="filterYearSV" id="filterYearSV">
                                            <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="filterMonthSV" class="col-lg-3">
                                        Month
                                    </label>                           
                                    <div class="col-lg-4" >
                                        <select name="filterMonthSV" id="filterMonthSV" 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 ?> 
                                            <option value="-1">[All]</option>   
                                        </select>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col d-print-none">
                                        <button class="btn btn-info" id="searchBtn2">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-hover table-bordered p-0 m-0" width="100%" id="tableSV">
                                    <thead>
                                        <th class="sorting" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1"  style="width: 0px;">
                                            #
                                        </th>
                                        <th class="sorting" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1"  style="width: 0px;">
                                            Year
                                        </th>
                                        <th class="sorting" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1"  style="width: 0px;">
                                            Month
                                        </th>
                                        <th class="sorting" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1"  style="width: 0px;">
                                            Staff Name
                                        </th>
                                        <th class="sorting text-center" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1"  style="width: 0px;">
                                            Total Hour Applied
                                        </th>
                                        <th class="sorting text-center" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1"  style="width: 0px;">
                                            Total Hour Approved
                                        </th>
                                        <th class="sorting text-center" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1"  style="width: 0px;">
                                            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 
                                    $no = 1; 
                                    if($otStaffLists2) foreach($otStaffLists2 as $row) {
                                        echo '<tr><td>'.$no++.'</td>'; 
                                        echo '<td>'.$row['year'].'</td>';
                                        echo '<td>'.date('F', mktime(0, 0, 0, $row['month'], 10)).'</td>';
                                        echo '<td>'.$row['name'].'</td>';
                                        echo '<td class="text-center">'.$row['totalHoursApplied'].'</td>';
                                        echo '<td class="text-center">'.$row['totalHoursApproved'].'</td>';
                                        echo '<td><span class="badge badge-warning text-white p-1" style="border-radius: 30px" title="Pending By HOD">'.$row['Pending'].'</span>
                                                <span class="badge badge-success text-white p-1" style="border-radius: 100px" title="Approved By HOD">'.$row['Approved'].'</span>
                                                <span class="badge badge-danger text-white p-1" style="border-radius: 30px" title="Rejected By HOD">'.$row['Rejected'].'</span>
                                            </td>';
                                        echo '<td class="text-center">
                                                <a href="'. base_url().'hr/overtime/hodOtListSv/'.$row['otID'].'/'.$row['user_id'].'" class="btn btn-success btn-sm" data-toggle="tooltip" data-placement="top" title="Choose OT"><i class="fas fa-sign-in-alt"></i></a>
                                            </td> ';
                                        echo '</tr>'; 
                                    } ?> 
                                    </tbody>    
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>      
    </div>

</div>

<!-- Modal change status -->

<div class="modal fade" id="modal_approve" 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">Change 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="bank_name">Status</label>
                    </div>
                    <div class="col">
                        <select name="month" class=" form-control">
                            <option value="">Approve</option>
                            <option value="">Pending</option>
                            <option value="">Reject</option>
                        </select>
                    </div>
                </div>
                <div class="row form-group">
                    <div class="col-lg-3">
                        <label for="bank_branch"> Comment</label>
                    </div>
                    <div class="col">
                       <textarea class=" form-control" name="" id="" rows="2"></textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button onclick="saveBankDetail()" 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>

<div class="modal fade" id="approve_all" 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">Approve all OT</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Are you sure want to approve all pending OT?
            </div>
            <div class="modal-footer">
                <button onclick="" type="button" id="saveButtonBank" class="btn btn-success btn-sm" style="margin-bottom:15px; width: 200px;"><i class="fa fa-check"></i> Approve all</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  -->

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

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

        frmData.append('token',token); 
        frmData.append('filter_year',$('#filterYear').val());
        frmData.append('filter_month',$('#filterMonth').val());
        frmData.append('filter_staff',$('#filterStaff').val());

        $.ajax({
            url:"<?php echo base_url('/hr/api/overtime/getStaffOtModerator'); ?>",
            type:'post',
            dataType:'json',
            data:frmData,
            processData: false,
            contentType: false,
            success:function(data){

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

                if(data.table){
                    console.log(data);
                    for (var i = 0; i < data.table.length; i++) {

                        var date = new Date(data.table[i].date,);
                        var dd = date.getDate();
                        var mm = date.getMonth()+1;
                        var yy = date.getFullYear();
                        var url = "<?php echo base_url('hr/overtime/hodOtList/');?>"+data.table[i].otID+'/'+data.table[i].peopleID;
                        if(data.table[i].customerName == null){
                            data.table[i].customerName = 'Others';
                        }

						var status = '<span class="badge badge-warning text-white p-1" style="border-radius: 30px" title="Pending By HOD">' + data.table[i].Pending + '</span>'+' '+'<span class="badge badge-success text-white p-1" style="border-radius: 100px" title="Approved By HOD">' + data.table[i].Approved +'</span>'+' '+'<span class="badge badge-danger text-white p-1" style="border-radius: 30px" title="Rejected By HOD">' + data.table[i].Rejected +'</span>';

                        table.row.add({
                            0   : i+1,
                            1   : data.table[i].year,
                            2   :  moment().month(data.table[i].month - 1).format('MMMM'),
                            3   : data.table[i].name,
                            4   : '<div class="text-center">' + data.table[i].totalHoursApplied + '</div>',
                            5   : '<div class="text-center">' + data.table[i].totalHoursApproved + '</div>',					
                            6   : status,
                            7   : '<div class="text-center"><a href="'+url+'" class="btn btn-success btn-sm" data-toggle="tooltip" data-placement="top" title="Choose OT"><i class="fas fa-sign-in-alt"></i></a></div>',
                        }).draw();
                    }
                }
                
            },
            error:function(){
                 iziToast.warning({
                    position: 'bottomRight',
                    message: '500 Internal Server Error.'
                });
            }
        });
    });

    $('#searchBtn2').click(function(){
        var table = $('#tableSV').DataTable();
        table.clear().draw();
        var frmData = new FormData();

        frmData.append('token',token); 
        frmData.append('filter_year',$('#filterYearSV').val());
        frmData.append('filter_month',$('#filterMonthSV').val());

        $.ajax({
            url:"<?php echo base_url('/hr/api/overtime/getStaffOtModeratorSV'); ?>",
            type:'post',
            dataType:'json',
            data:frmData,
            processData: false,
            contentType: false,
            success:function(data){

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

                if(data.table){
                    console.log(data);
                    for (var i = 0; i < data.table.length; i++) {

                        var date = new Date(data.table[i].date,);
                        var dd = date.getDate();
                        var mm = date.getMonth()+1;
                        var yy = date.getFullYear();
                        var url = "<?php echo base_url('hr/overtime/hodOtListSv/');?>"+data.table[i].otID+'/'+data.table[i].peopleID;
                        if(data.table[i].customerName == null){
                            data.table[i].customerName = 'Others';
                        }

                        var status = '<span class="badge badge-warning text-white p-1" style="border-radius: 30px" title="Pending By HOD">' + data.table[i].Pending + '</span>'+' '+'<span class="badge badge-success text-white p-1" style="border-radius: 100px" title="Approved By HOD">' + data.table[i].Approved +'</span>'+' '+'<span class="badge badge-danger text-white p-1" style="border-radius: 30px" title="Rejected By HOD">' + data.table[i].Rejected +'</span>';

                        table.row.add({
                            0   : i+1,
                            1   : data.table[i].year,
                            2   :  moment().month(data.table[i].month - 1).format('MMMM'),
                            3   : data.table[i].name,
                            4   : '<div class="text-center">' + data.table[i].totalHoursApplied + '</div>',
                            5   : '<div class="text-center">' + data.table[i].totalHoursApproved + '</div>',                    
                            6   : status,
                            7   : '<div class="text-center"><a href="'+url+'" class="btn btn-success btn-sm" data-toggle="tooltip" data-placement="top" title="Choose OT"><i class="fas fa-sign-in-alt"></i></a></div>',
                        }).draw();
                    }
                }
                
            },
            error:function(){
                 iziToast.warning({
                    position: 'bottomRight',
                    message: '500 Internal Server Error.'
                });
            }
        });
    });


});

</script> 