<div class="container mt-5 mb-5">
    <div class="card bg-light-transparent">  

            <div class="card-header bg-white">
                <div class="float-left">
                    <h5>Staff Movement List</h5>
                    <a href="<?php echo base_url('hr/movement/create')?>" class="btn btn-outline-dark btn-sm" title="Add New Staff Movement" >
                        <span class="d-none d-sm-block"><i class="fa fa-plus"></i> Add New Movement</span>
                        <span class="d-block d-sm-none"><i class="fa fa-plus"></i></span>
                    </a>
                    <a href="<?php echo base_url('hr/movement/list_report')?>" target="_blank" class="btn btn-outline-dark btn-sm" title="Print Staff Movement">
                        <span class="d-none d-sm-block"><i class="fa fa-print"></i> Print</span>
                        <span class="d-block d-sm-none"><i class="fa fa-print"></i></span>
                    </a>
                    <a href="<?php echo base_url('hr/movement/calendar')?>" class="btn btn-outline-dark btn-sm" title="View Calendar">
                        <span class="d-none d-sm-block"><i class="fa fa-calendar"></i> Calendar</span>
                        <span class="d-block d-sm-none"><i class="fa fa-calendar"></i></span>
                    </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">
                        <span class="d-none d-sm-block"><i class="fas fa-filter"></i> Show Filters</span>
                        <span class="d-block d-sm-none"><i class="fas fa-filter"></i></span>
                    </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 class="col-lg-3">
                                            Date From
                                        </label>                           
                                        <div class="col-lg-4" >
                                            <input type="text" name="Date" class="datepicker form-control" id="start_date">
                                        </div>
                                        <label class="col-lg-1">
                                            Date To
                                        </label>
                                        <div class="col-lg-4" >
                                            <input type="text" name="Date" class="datepicker form-control" id="end_date">
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label class="col-lg-3">
                                            Department
                                        </label>
                                        <div class="col-lg-4">
                                            <select class="form-control select" name="dept" id="dept_id"  style="width:100%;">
                                                <option value="-1">Select Department</option>
                                                <?php foreach ($departments as $dept): ?>
                                                <option  value="<?php echo $dept['id']?>"><?php echo $dept['name'].' ('.$dept['branch_name'].')';?></option>
                                                <?php endforeach ?>3                                    
                                            </select>
                                        </div>                                          
                                    </div>

                                    <div class="form-group row">
                                        <label class="col-lg-3">
                                            Staff Name
                                        </label>                     
                                        <div class="col-lg-4">
                                            <select class="form-control select" name="staff" id="staff_id" style="width:100%;">
                                                <option value="-1" data-roc="0">All Staff</option>
                                                <?php foreach ($users as $staff): ?>
                                                    <option value="<?php echo $staff['id']; ?>"><?php echo $staff['name'];?></option>                                                
                                                <?php endforeach ?>                                         
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label class="col-lg-3">
                                            Type
                                        </label>                           
                                        <div class="col-lg-4" >
                                            <select class="form-control select" name="type" id="type_id" style="width:100%;">
                                                <option value="-1" data-roc="-1">Select Type</option>
                                                <?php foreach ($movementTypes as $type): ?>
                                                <option value="<?php echo $type->id;?>"><?php echo $type->movementType;?></option>
                                                <?php endforeach ?>                                         
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label class="col-lg-3">
                                            Client
                                        </label>                     
                                        <div class="col-lg-4" >
                                            <select class="form-control select" name="client" id="client_id"  placeholder="Select Client" style="width:100%;">
                                                <option value="-1">Select Client</option>
                                                <?php foreach ($customers as $cust): ?>
                                                <option value="<?php echo $cust->customer_id;?>"><?php echo $cust->name;?></option>
                                                <?php 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 d-none d-sm-block">
                                    <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" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" aria-label="Company Code/ Cost Centre: activate to sort column ascending" style="width: 0px;">
                                                Name
                                            </th>
                                            <th class="sorting" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" aria-label="Company Name: activate to sort column ascending" style="width: 0px;">
                                                Department
                                            </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;">
                                                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;">
                                                Client / Destination
                                            </th>
                                            <th class="sorting" tabindex="0" aria-controls="table_contact" rowspan="" colspan="1" aria-label="Total Net Pay: 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="Employee Total Upload: activate to sort column ascending" style="width: 0px;">
                                                Time Out
                                            </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;">
                                                Time In
                                            </th>
                                            <th class="sorting" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" aria-label="Action: activate to sort column ascending" style="width: 0px;">
                                                Action
                                            </th>                     
                                        </thead>    
                                        <tbody>
                                            <?php if ($movementLists != 'no result'): ?>
                                                <?php foreach ($movementLists as $key => $movement): ?>
                                                    
                                                <tr>
                                                    <td><?php echo $key+1;?></td>
                                                    <td>
                                                        <?php echo $movement->staffName; ?>
                                                    </td>
                                                    <td><?php echo $movement->departmentName;?></td>
                                                    <td><?php if($movement->movementType == NULL){
                                                            echo 'Others';
                                                        }else{
                                                            echo $movement->movementType;
                                                        }?>
                                                    </td>                                          
                                                    <td>
                                                        <?php if ($movement->customerid != -1): ?>
                                                            <?php echo ($movement->customerName)?$movement->customerName.'<br/>'.$movement->destination: 'Others <br/>'.$movement->destination;?>
                                                        <?php endif ?>
                                                        <?php if ($movement->customerid == -1 ): ?>
                                                            <?php echo 'Others <br/>'.$movement->destination;?>
                                                        <?php endif ?>
                                                    </td>
                                                    <td class="pl-0"><?php echo date('d-m-Y',strtotime($movement->date));?></td>
                                                    <td><?php echo date("g:i a", strtotime($movement->timeOut));?></td>
                                                    <td><?php echo date("g:i a", strtotime($movement->timeIn));?></td>
                                                    <td><a href="<?php echo base_url('/hr/movement/edit/'.$movement->id);?>"><i class="fas fa-sign-in-alt"></i></a> </td>                                                 
                                                </tr> 
                                                
                                                <?php endforeach ?>
                                            <?php endif ?>

                                        </tbody>    
                                    </table>
                                </div>

                                <div class="d-block d-sm-none">
                                    
                                <?php if ($movementLists != 'no result'): ?>
                                        <?php foreach ($movementLists as $key => $movement): ?>

                                            <div class="row">
                                                <div class="col-12">
                                                    <strong class="text-uppercase">Name</strong><br>
                                                    <?php echo $movement->staffName; ?>
                                                </div>
                                            </div>
                                            
                                            <div class="row">
                                                <div class="col-12">
                                                    <strong class="text-uppercase">Department</strong><br>
                                                    <?php echo $movement->departmentName;?>
                                                </div>
                                            </div>
                                            
                                            <div class="row">
                                                <div class="col-12">
                                                    <strong class="text-uppercase">Type</strong><br>
                                                    <?php if($movement->movementType == NULL)
                                                    {
                                                        echo 'Others';
                                                    }else{
                                                        echo $movement->movementType;
                                                    }?>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-12">
                                                    <strong class="text-uppercase">Client / Destination</strong><br>
                                                    <?php if ($movement->customerid != -1): ?>
                                                        <?php echo ($movement->customerName)?$movement->customerName.'<br/><small>'.$movement->destination.'</small>': 'Others <br/><small>'.$movement->destination.'</small>';?>
                                                    <?php endif ?>
                                                    <?php if ($movement->customerid == -1 ): ?>
                                                        <?php echo 'Others <br/>'.$movement->destination;?>
                                                    <?php endif ?>
                                                </div>
                                            </div>
                                            
                                            <div class="row">
                                                <div class="col-12">
                                                    <strong class="text-uppercase">Date</strong><br>
                                                    <?php echo date('d-m-Y',strtotime($movement->date));?>
                                                </div>
                                            </div>
                                            
                                            <div class="row">
                                                <div class="col-12">
                                                    <strong class="text-uppercase">Time Out</strong><br>
                                                    <?php echo date("g:i a", strtotime($movement->timeOut));?>
                                                </div>
                                            </div>                         
                                            
                                            <div class="row">
                                                <div class="col-12">
                                                    <strong class="text-uppercase">Time In</strong><br>
                                                    <?php echo date("g:i a", strtotime($movement->timeIn));?>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-12">
                                                    <strong class="text-uppercase">Action</strong><br>
                                                    <a href="<?php echo base_url('/hr/movement/edit/'.$movement->id);?>">Choose Movement</a>
                                                </div>
                                            </div>
                                            
                                            <hr>
                                        <?php endforeach;endif;?>
                                </div>
                                        

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

<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('start_date',$('#start_date').val());
        frmData.append('end_date',$('#end_date').val());
        frmData.append('dept_id',$('#dept_id').val());
        frmData.append('staff_id',$('#staff_id').val());
        frmData.append('type_id',$('#type_id').val());
        frmData.append('customer_id',$('#client_id').val());
        // console.log($('#type_id').val());
        $.ajax({
            url:"<?php echo base_url('/hr/api_movement/get'); ?>",
            type:'post',
            dataType:'json',
            data:frmData,
            processData: false,
            contentType: false,
            success:function(data){

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


                if(data.table != 'no result'){
                    console.log(data.table);
                    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/movement/edit/');?>"+data.table[i].id;
                        if(data.table[i].customerName == null){
                            data.table[i].customerName = 'Others';
                        }
                        table.row.add({
                            0   : i+1,
                            1   : data.table[i].staffName,
                            2   : data.table[i].departmentName,
                            3   : data.table[i].movementType,
                            4   : data.table[i].customerName+'<br/>'+data.table[i].destination,
                            5   : dd+'-'+mm+'-'+yy,
                            6   : timeTo12(data.table[i].timeOut),
                            7   : timeTo12(data.table[i].timeIn),
                            8   : '<a href="'+url+'"><i class="fas fa-sign-in-alt"></i></a>',
                        }).draw();
                    }
                }
                
            },
            error:function(){
                 iziToast.warning({
                    position: 'bottomRight',
                    message: '500 Internal Server Error.'
                });
            }
        });
    });



});

</script> 