<div class="container-fluid mt-5 mb-5">
    <div class="card bg-light-transparent">  
        <div class="card-header bg-white">
            <h5>OT Submission List for <?php echo date("F Y",mktime(0,0,0, $rsOt['month'],1,$rsOt['year'])) ?></h5>
        </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-12 col-md-6">
                                    <div class="row">
                                        <label class="col-12 control-label" for="name" align="left">Name :</label>
                                        <div class="col-12">
                                            <input type="text" name="name" id="name" class="form-control" value="<?php echo $otLists[0]['name'] ?>" readonly/>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <label class="col-6 control-label" for="dept_name" >IC No:</label>
                                        <label class="col-6 control-label" for="dept_name" >Employee ID:</label>
                                        <div class="col-6">
                                            <input type="text" name="dept_name" id="dept_name" class="form-control" value="<?php echo $ic_no ?>" readonly/>
                                        </div>
                                        <div class="col-6">
                                            <input type="text" name="dept_name" id="dept_name" class="form-control" value="<?php echo $staff_id ?>" readonly/>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6">
                                    <div class="row">
                                        <label class="col-12 control-label" for="name" align="left">Department :</label>
                                        <div class="col-12">
                                            <input type="text" name="name" id="name" class="form-control" value="<?php echo $otLists[0]['department'] ?>" readonly/>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <label class="col-12 control-label" for="dept_name" >Designation:</label>
                                        <div class="col-12">
                                            <input type="text" name="dept_name" id="dept_name" class="form-control" value="<?php echo $otLists[0]['title'] ?>" 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="OTDetailTable">
                                    <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" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" aria-label="Company Code/ Cost Centre: activate to sort column ascending" style="width: 0px;">
                                            Date
                                        </th>
                                        <th class="sorting" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" aria-label="Salary/ Wage Month: activate to sort column ascending" style="width: 0px;">
                                            Client
                                        </th>
                                        <th class="sorting" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" aria-label="Employee Total Upload: activate to sort column ascending" style="width: 0px;">
                                            Task
                                        </th>
                                        <th class="sorting" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" aria-label="Employee Total Upload: activate to sort column ascending" style="width: 0px;">
                                            Start Time
                                        </th>
                                        <th class="sorting" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" aria-label="Employee Total Upload: activate to sort column ascending" style="width: 0px;">
                                            End Time
                                        </th>
                                        <th class="sorting" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" aria-label="Employee Total Upload: activate to sort column ascending" style="width: 0px;">
                                            Break (minutes)
                                        </th>
                                        <th class="sorting" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" aria-label="Employee Total Upload: activate to sort column ascending" style="width: 0px;">
                                            Total Hours
                                        </th>
                                        <th class="sorting" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" aria-label="Employee Total Upload: activate to sort column ascending" style="width: 0px;">
                                            Day Type
                                        </th>
                                        <th class="sorting" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" aria-label="Employee Total Upload: activate to sort column ascending" style="width: 0px;">
                                            Supervisor
                                        </th>
                                        <th class="sorting" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" aria-label="Employee Total Upload: activate to sort column ascending" style="width: 0px; padding-right: 0px;">
                                            Status/ Action <br>
                                            <!-- <?php if($rsOt['claim_status'] == 0){?>
                                                <button type="button" class="btn btn-sm btn-info btn-block" onclick="approveAll()">Approve All</button>
                                            <?php } else { ?> 
                                                <button type="button" class="btn btn-sm btn-info btn-block" onclick="approveAll()" disabled>Approve All</button>
                                            <?php } ?> -->

                                            <?php if (($rsOt['claim_status'] != 0) || ($_SESSION['user']['id'] == $user_id) || ($countOTListSV > 0)){ ?>
                                                <button type="button" class="btn btn-sm btn-info btn-block" onclick="approveAll()" disabled>Approve All</button>
                                            <?php } else { ?> 
                                                <button type="button" class="btn btn-sm btn-info btn-block" onclick="approveAll()" >Approve All</button>
                                            <?php } ?>

                                        </th>         
                                    </thead>    
                                    <tbody>
                                        <?php if (!empty($otLists)): 
                                            $totHoursApplied = 0;
                                            $normalDay = 0; 
                                            $restDay = 0; 
                                            $publicHoliday = 0;
                                            $weekend = 0;
                                            $weekdays = 0; 
                                            ?>
                                            <?php foreach ($otLists as $key => $ot): ?>       
                                            <tr>
                                                <td><?php echo $key+1;?></td>
                                                <td><?php echo date("d/m/Y", strtotime($ot['otDate'])) ?></td>
                                                <td><?php if($ot['clientID'] > 0 ){ echo $ot['clientName']; }else{ echo 'Others';};?></td>
                                                <td><?php echo $ot['task'];?></td>  
                                                <td><?php echo date("h:i A", strtotime($ot['startTime']));?></td>
                                                <td><?php echo date("h:i A", strtotime($ot['endTime']));?></td>
                                                <td><?php echo $ot['refreshment'];?></td>
                                                <td><?php echo $ot['totalHoursApplied'];?></td>
                                                <td><?php 
                                                    if($ot['dayType'] == 1){
                                                        echo 'Normal Day';
                                                    }else if($ot['dayType'] == 2){
                                                        echo 'Rest Day';
                                                    }else if($ot['dayType'] == 3){
                                                        echo 'Public Holiday';
                                                    }else if($ot['dayType'] == 4){
                                                        echo 'Weekend';
                                                    }else if($ot['dayType'] == 5){
                                                        echo 'Weekdays';
                                                    }
                                                 ?></td>
                                                <td><?php echo $ot['svName'];?> <br><small><b> - <?php echo $ot['svDeptName'];?></b></small></td>
                                                <td otDetailID="<?php echo $ot['ID']; ?>">
                                                    <?php if(($ot['claim_status'] == 2) || ($_SESSION['user']['id'] == $user_id)){?>
                                                        <?php if($ot['status'] == 0){
                                                                echo '<button class="btn btn-sm btn-warning btn-block text-white" data-tooltip="tooltip" data-placement="bottom" data-trigger="hover" data-original-title="Change status"  data-toggle="modal" data-target="" data-json="'.base64_encode(json_encode($ot)).'" onclick="changeStatus('.$ot['ID'].')" disabled>Pending</button>';
                                                                echo '<small><i><b>*Remarks : </b>' . $ot['remarks'] .'</i></small>';
                                                            }else if($ot['status'] == 1){
                                                                echo '<button class="btn btn-sm btn-success btn-block text-white" data-toggle="modal" data-target="" data-json="'.base64_encode(json_encode($ot)).'" onclick="changeStatus('.$ot['ID'].')" disabled>Approved</button><br>';
                                                                echo '<small><i><b>*Remarks : </b>' . $ot['remarks'] .'</i></small><br>';
                                                                echo '<small><i><b>*Approved by : </b>' . $ot['status_by_name'] .'</i></small>';
                                                            }else if($ot['status'] == 2){
                                                                echo '<button class="btn btn-sm btn-danger btn-block text-white"  data-toggle="modal" data-target="" data-json="'.base64_encode(json_encode($ot)).'" onclick="changeStatus('.$ot['ID'].')" disabled>Rejected</button>';
                                                                echo '<small><i><b>*Remarks : </b>' . $ot['remarks'] .'</i></small><br>';
                                                                echo '<small><i><b>*Rejected by : </b>' . $ot['status_by_name'] .'</i></small>';
                                                            }else{
                                                                echo '<button class="btn btn-sm btn-secondary btn-block text-white"  data-toggle="modal" data-target="" data-json="'.base64_encode(json_encode($ot)).'" onclick="changeStatus('.$ot['ID'].')" disabled>Draft</button>';
                                                            }
                                                        ?>
                                                    <?php } else if(($ot['svID'] != 0) && ($ot['svID'] == $_SESSION['user']['id'])) { ?>
                                                        <?php if($ot['status'] == 0){
                                                                echo '<button class="btn btn-sm btn-warning btn-block text-white" data-tooltip="tooltip" data-placement="bottom" data-trigger="hover" data-original-title="Change status"  data-toggle="modal" data-target="" data-json="'.base64_encode(json_encode($ot)).'" onclick="changeStatus('.$ot['ID'].')">Pending</button>';
                                                                echo '<small><i><b>*Remarks : </b>' . $ot['remarks'] .'</i></small>';
                                                            }else if($ot['status'] == 1){
                                                                echo '<button class="btn btn-sm btn-success btn-block text-white" data-toggle="modal" data-target="" data-json="'.base64_encode(json_encode($ot)).'" onclick="changeStatus('.$ot['ID'].')">Approved</button>';
                                                                echo '<small><i><b>*Remarks : </b>' . $ot['remarks'] .'</i></small><br>';
                                                                echo '<small><i><b>*Approved by : </b>' . $ot['status_by_name'] .'</i></small>';
                                                            }else if($ot['status'] == 2){
                                                                echo '<button class="btn btn-sm btn-danger btn-block text-white"  data-toggle="modal" data-target="" data-json="'.base64_encode(json_encode($ot)).'" onclick="changeStatus('.$ot['ID'].')">Rejected</button>';
                                                                echo '<small><i><b>*Remarks : </b>' . $ot['remarks'] .'</i></small><br>';
                                                                echo '<small><i><b>*Rejected by : </b>' . $ot['status_by_name'] .'</i></small>';
                                                            }else{
                                                                echo '<button class="btn btn-sm btn-secondary btn-block text-white"  data-toggle="modal" data-target="" data-json="'.base64_encode(json_encode($ot)).'" onclick="changeStatus('.$ot['ID'].')">Draft</button>';
                                                            }
                                                        ?>
                                                    <?php } else if(($ot['svID'] == 0)) { ?>
                                                        <?php if($ot['status'] == 0){
                                                                echo '<button class="btn btn-sm btn-warning btn-block text-white" data-tooltip="tooltip" data-placement="bottom" data-trigger="hover" data-original-title="Change status"  data-toggle="modal" data-target="" data-json="'.base64_encode(json_encode($ot)).'" onclick="changeStatus('.$ot['ID'].')">Pending</button>';
                                                                echo '<small><i><b>*Remarks : </b>' . $ot['remarks'] .'</i></small>';
                                                            }else if($ot['status'] == 1){
                                                                echo '<button class="btn btn-sm btn-success btn-block text-white" data-toggle="modal" data-target="" data-json="'.base64_encode(json_encode($ot)).'" onclick="changeStatus('.$ot['ID'].')">Approved</button>';
                                                                echo '<small><i><b>*Remarks : </b>' . $ot['remarks'] .'</i></small><br>';
                                                                echo '<small><i><b>*Approved by : </b>' . $ot['status_by_name'] .'</i></small>';
                                                            }else if($ot['status'] == 2){
                                                                echo '<button class="btn btn-sm btn-danger btn-block text-white"  data-toggle="modal" data-target="" data-json="'.base64_encode(json_encode($ot)).'" onclick="changeStatus('.$ot['ID'].')">Rejected</button>';
                                                                echo '<small><i><b>*Remarks : </b>' . $ot['remarks'] .'</i></small><br>';
                                                                echo '<small><i><b>*Rejected by : </b>' . $ot['status_by_name'] .'</i></small>';
                                                            }else{
                                                                echo '<button class="btn btn-sm btn-secondary btn-block text-white"  data-toggle="modal" data-target="" data-json="'.base64_encode(json_encode($ot)).'" onclick="changeStatus('.$ot['ID'].')">Draft</button>';
                                                            }
                                                        ?>
                                                    <?php } else { ?>
                                                        <?php if($ot['status'] == 0){
                                                                echo '<button class="btn btn-sm btn-warning btn-block text-white" data-tooltip="tooltip" data-placement="bottom" data-trigger="hover" data-original-title="Change status"  data-toggle="modal" data-target="" data-json="'.base64_encode(json_encode($ot)).'" onclick="changeStatus('.$ot['ID'].')" disabled>Pending</button>';
                                                                echo '<small><i><b>*Remarks : </b>' . $ot['remarks'] .'</i></small>';
                                                            }else if($ot['status'] == 1){
                                                                echo '<button class="btn btn-sm btn-success btn-block text-white" data-toggle="modal" data-target="" data-json="'.base64_encode(json_encode($ot)).'" onclick="changeStatus('.$ot['ID'].')" disabled>Approved</button><br>';
                                                                echo '<small><i><b>*Remarks : </b>' . $ot['remarks'] .'</i></small><br>';
                                                                echo '<small><i><b>*Approved by : </b>' . $ot['status_by_name'] .'</i></small>';
                                                            }else if($ot['status'] == 2){
                                                                echo '<button class="btn btn-sm btn-danger btn-block text-white"  data-toggle="modal" data-target="" data-json="'.base64_encode(json_encode($ot)).'" onclick="changeStatus('.$ot['ID'].')" disabled>Rejected</button>';
                                                                echo '<small><i><b>*Remarks : </b>' . $ot['remarks'] .'</i></small><br>';
                                                                echo '<small><i><b>*Rejected by : </b>' . $ot['status_by_name'] .'</i></small>';
                                                            }else{
                                                                echo '<button class="btn btn-sm btn-secondary btn-block text-white"  data-toggle="modal" data-target="" data-json="'.base64_encode(json_encode($ot)).'" onclick="changeStatus('.$ot['ID'].')" disabled>Draft</button>';
                                                            }
                                                        ?>
                                                    <?php } ?>
                                                </td>                                                 
                                            </tr> 

                                             <?php if($ot['totalHoursApplied']){
                                                $totHoursApplied =  $totHoursApplied + $ot['totalHoursApplied'];
                                            } 
                                                if($ot['dayType']){
                                                    if($ot['dayType'] == 1){
                                                        $normalDay++;
                                                    }else if($ot['dayType'] == 2){
                                                        $restDay++;
                                                    }else if($ot['dayType'] == 3){
                                                        $publicHoliday++;
                                                    }else if($ot['dayType'] == 4){
                                                        $weekend++;
                                                    }else if($ot['dayType'] == 5){
                                                        $weekdays++;
                                                    }
                                                }
                                            ?>
                                            
                                            <?php endforeach ?>
                                        <?php endif ?>

                                    </tbody>   
                                </table>
                            </div><br>
                            <!-- <div class="offset-lg-11 d-print-none">
                                <button class="btn btn-success" id="searchBtn">Submit</button>
                            </div> -->
                        </div>
                    </div>
                </div>
                <div class="card no-shadow">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <h5>OT Summary for <?php echo date("F Y",mktime(0,0,0,  $rsOt['month'],1,$rsOt['year'])); ?></h5>
                                <thead>
                                    <th></th>
                                    <th class="text-center">OT Applied (Hours)</th>
                                    <th class="text-center">OT Approved (Hours)</th>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Total OT</td>
                                        <td class="text-center"><input type="hidden" value="<?php echo $totHoursApplied; ?>" id="totalOT"><?php echo $totHoursApplied; ?></td>
                                        <td class="text-center"><?php echo $ot['totalHoursApproved']; ?></td>
                                    </tr>
                                </tbody>
                                <tfoot>
                                        <!-- <tr>
                                            <td colspan=""> 
                                                Normal Day          : 
                                            </td>
                                            <td colspan="7" class="text-center"><?php //echo $normalDay ?></td>
                                        </tr>
                                        <tr>
                                            <td colspan=""> 
                                                Rest Day            :
                                            </td>
                                            <td colspan="7" class="text-center"><?php //echo $restDay ?></td>
                                        <tr>
                                            <td colspan=""> 
                                                Public Holiday      : 
                                            </td>
                                            <td colspan="7" class="text-center"><?php //echo $publicHoliday ?></td>
                                        </tr> -->
                                        <tr>
                                            <td colspan=""> 
                                                Weekend : 
                                            </td>
                                            <td colspan="2" class="text-center"><?php if(!empty($weekend)){ echo $weekend; }else{ echo "0"; } ?></td>
                                        </tr>
                                        <tr>
                                            <td colspan=""> 
                                                Weekdays :
                                            </td>
                                            <td colspan="2" class="text-center"><?php if(!empty($weekdays)){ echo $weekdays; }else{ echo "0"; } ?></td>
                                        </tr>
                                    </tfoot>
                            </table>
                        </div>
                    </div>
                </div>

            </div>
        </div>  
    </div>
</div>

<!-- Modal  -->

<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">
            <form class="form" id="otStat">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Change OT Status</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <input type="hidden" id="otID">
                <div class="modal-body">
                    <div class="row form-group">
                        <div class="col-lg-3">
                            <label for="change_status">Status</label>
                        </div>
                        <div class="col">
                            <select name="change_status" id="change_status" class="form-control">
                                <option value="0">Pending</option>
                                <option value="1">Approved</option>
                                <option value="2">Rejected</option>
                            </select>
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-lg-3">
                            <label for="reason">Reason</label>
                        </div>
                        <div class="col">
                            <textarea class="form-control" rows="3" id="reason"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button onclick="updateData()" type="button" id="saveStatusButton" 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>
            </form>
        </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="approveAll()" type="button" id="approveAllButton" 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(){

    });

    function fillModal(elem) {

        var json = JSON.parse(atob($(elem).data('json')));
        //console.log(json.ID);
        $('#otID').val(json.ID);
        if(json.status == 0){
            $('#change_status').val(0);
        }else if(json.status == 1){
            $('#change_status').val(1);
        }else if(json.status == 2){
            $('#change_status').val(2);
        }
    }

    function changeStatus(otDetail_id)
    {

        $.ajax({
            type: "POST",
            dataType:"json",
            url: "<?php echo base_url() ?>hr/overtime/getStatus",
            data: {
              id: otDetail_id
            },
            success: function(data) {

                if ($.trim(data.status) == "success")
                {
                    var detailStatusData = data.detailStatusData;

                    $("#change_status").val(detailStatusData['status']);
                    $("#reason").val(detailStatusData['remarks']);
                   
                }
            }
        });

        $('#saveStatusButton').attr('onClick', 'updateData('+ otDetail_id +')');
        $('#modal_approve').modal('show');
    }

    function updateData(otDetail_id) {
        validateForm("#otStat", "Are you sure you want to change status for this OT?", function() {
            $.ajax({
                url:'<?php echo base_url('hr/overtime/changeStatus') ?>',
                data: {
                    otID   : otDetail_id,
                    status : $('#change_status').val(),
                    reason : $('#reason').val(),
                },
                type: 'post',
                dataType: 'json',
                success: (data) => {
                    if(data.status == "Success") {
                    localStorage.setItem("status", data.status);
                    localStorage.setItem("msg", data.msg);

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

    function approveAll() {
        validateForm("#otStat", "Are you sure you want to approve ALL OT?", function() {
            var oTable = $('#OTDetailTable').dataTable();
            var aTrs = oTable.fnGetNodes();

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

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

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

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

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

</script> 