<div class="container mt-5 mb-5">
    <div class="card bg-light-transparent">  
            <div class="card-header bg-white">
                <div class="float-left">
                    <h5>Group Movement List<small> *Kindly use the filter to display the records.</small></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/group_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-2">
                                            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-2">
                                            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-2">
                                            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>
                                        <label class="col-lg-2">
                                            Department
                                        </label>                           
                                        <div class="col-lg-4" >
                                            <select class="form-control select" name="department" id="dept_id" style="width:100%;">
                                                <option value="-1" data-roc="-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 ?>                                         
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label class="col-lg-2">
                                            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">
                            
                                <span class="d-none d-sm-block">
                                    <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" 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="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 text-center" tabindex="0" aria-controls="table_contact" rowspan="1" colspan="1" aria-label="Action: activate to sort column ascending" style="width: 0px;">
                                                    Status
                                                </th>
                                                <th class="sorting text-center" 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 (!empty($movements) && $movements != 'no result'): ?>
                                                    <?php foreach ($movements as $key => $group): ?>
                                                        <tr>
                                                            <td><?php echo $key+1; ?></td>
                                                            <td nowrap> <?php echo date('d-m-Y',strtotime($group->date)); ?> </td>
                                                            <!-- <td> <?php echo $group->departmentName; ?> </td> -->
                                                            <td><?php echo $group->movementDeptName; ?></td>
                                                            <td><?php if($group->movementType == NULL){
                                                                    echo 'Others';
                                                                }else{
                                                                    echo $group->movementType;
                                                                }?>
                                                            </td>
                                                            <td> 
                                                                <?php if ($group->customerid != -1): ?>
                                                                    <?php echo $group->customerName.'<br/>'; ?>
                                                                <?php endif ?>
                                                                <?php if ($group->customerName == null): ?>
                                                                    Others <br>
                                                                <?php endif ?>
                                                                <?php echo $group->destination.'<br/> <b>Staff involved : </b><br/>';?>
                                                            <?php
                                                                foreach ($group->staffName as $key => $staffName) 
                                                                {
                                                                echo $staffName->name.',';
                                                                }
                                                            ?>
                                                            </td>
                                                            <td class="text-center">
                                                            <?php if ($group->status == 0): ?>
                                                            <span class="badge badge-warning text-white">Pending</span>
                                                            <?php endif ?> 
                                                            <?php if ($group->status == 1): ?>
                                                            <span class="badge badge-success text-white">Approved</span>
                                                            <?php endif ?>
                                                            <?php if ($group->status == 2): ?>
                                                            <span class="badge badge-danger text-white">Rejected</span>
                                                            <?php endif ?>
                                                            </td>
                                                            <td class="text-center">
                                                                <a href="<?php echo base_url('/hr/movement/edit/'.$group->id) ?>" class="mx-2" data-tooltip="tooltip" data-placement="bottom" data-trigger="hover" data-original-title="Choose movement group">
                                                                    <span class="fas fa-sign-in-alt text-info"></span> 
                                                                </a>
                                                            </td> 
                                                        </tr>
                                                    <?php endforeach ?>
                                                <?php endif ?>
                                            
                                            </tbody>
                                        </table>
                                    </div>
                                </span>
                                
                                <span class="d-block d-sm-none">
                                    <?php if (!empty($movements) && $movements != 'no result'): ?>
                                    <?php foreach ($movements as $key => $group): ?>

                                        <div class="row">
                                            <div class="col-12">
                                                <strong class="text-uppercase">Date</strong><br/>
                                                <?php echo date('d-m-Y',strtotime($group->date)); ?>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-12">
                                                <strong class="text-uppercase">Department</strong><br>
                                                <?php echo $group->movementDeptName; ?>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-12">
                                                <strong class="text-uppercase">Type</strong><br>
                                                <?php if($group->movementType == NULL)
                                                {
                                                    echo 'Others';
                                                }else{
                                                    echo $group->movementType;
                                                }?>
                                            </div>
                                        </div>
                                        
                                        <div class="row">
                                            <div class="col-12">
                                                <strong class="text-uppercase">Client / Destination</strong><br>
                                                <?php if ($group->customerid != -1): ?>
                                                    <?php echo $group->customerName.'<br/>'; ?>
                                                <?php endif ?>
                                                <?php if ($group->customerName == null): ?>
                                                    Others <br>
                                                <?php endif ?>

                                                <?php if(!empty($group->destination)): ?>
                                                    <small><?php echo $group->destination; ?></small>
                                                <?php endif; ?>
                                            </div>
                                        </div>
                                        
                                        <div class="row">
                                            <div class="col-12">
                                                <strong class="text-uppercase">Staff </strong><br>
                                                <?php
                                                if(!empty($group->staffName)) foreach ($group->staffName as $key => $staffName) 
                                                {
                                                    echo $staffName->name.',';
                                                }
                                                ?>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-12">
                                                <strong class="text-uppercase">Status</strong><br>
                                                <?php if ($group->status == 0): ?>
                                                    <span class="badge badge-warning text-white">Pending</span>
                                                <?php endif ?> 
                                                <?php if ($group->status == 1): ?>
                                                    <span class="badge badge-success text-white">Approved</span>
                                                <?php endif ?>
                                                <?php if ($group->status == 2): ?>
                                                    <span class="badge badge-danger text-white">Rejected</span>
                                                <?php endif ?>
                                            </div>
                                        </div>
                                        
                                        <div class="row">
                                            <div class="col-12">
                                                <strong class="text-uppercase">Actions</strong><br>
                                                <a href="<?php echo base_url('/hr/movement/edit/'.$group->id) ?>" class="mx-2" data-tooltip="tooltip" data-placement="bottom" data-trigger="hover" data-original-title="Choose movement group">
                                                    Choose Movement Group
                                                </a>
                                            </div>
                                        </div>

                                        <hr>
                                    <?php endforeach;endif;?>
                                </span>

                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>      
        </div>
</div>
<script type="text/javascript">
    var token = '<?php echo $this->session->userdata('token');?>';
    $(document).ready(function(){
        $('#searchBtn').click(function(){
            var start_date      = $('#start_date').val();
            var end_date        = $('#end_date').val();
            var type            = $('#type_id').val();
            var client          = $('#client_id').val();
            var department      = $('#dept_id').val();

            var frmData = new FormData();
            frmData.append('token',token);
            frmData.append('start_date',start_date);
            frmData.append('end_date',end_date);
            frmData.append('type_id',type);
            frmData.append('department_id',department);
            frmData.append('customer_id',client);

            $.ajax({
                url:"<?php echo base_url('/hr/api_movement/getGroup'); ?>",
                type:'post',
                dataType:'json', //return type value
                data:frmData,
                processData: false,
                contentType: false,
                success:function(data){
                
                    var table   = $('.table').DataTable();
                    table.clear().draw();

                    var rowCount = table.data().count();
                    if(data.table != 'no result'){
                        for (var i = 0; i < data.table.length; i++) {

                            if(data.table[i].status == 0){
                                var badge = '<span class="badge badge-warning text-white">Pending</span>';
                            }

                            if(data.table[i].status == 1){
                                var badge = '<span class="badge badge-success text-white">Approved</span>';
                            }

                            if(data.table[i].status == 2){
                                var badge = '<span class="badge badge-danger text-white">Rejected</span>';
                            }

                            if(data.table[i].customerName == null){
                                data.table[i].customerName = 'Others';
                            }
                            var staff_name = data.table[i].staffName;
                            var list_staff = '';
                            staff_name.forEach(function(staff){
                                list_staff += staff.name+',';
                            });
                           table.row.add({
                                0   : ++rowCount,
                                1   : data.table[i].date,
                                2   : data.table[i].movementDeptName,
                                3   : data.table[i].movementType,  
                                4   : data.table[i].customerName+' <br/>'+data.table[i].destination+'<br/><b>Staff Involved : </b><br/>'+list_staff,
                                5   : badge,
                                6   : '<td class="text-center">\
                                            <a href="<?php echo base_url(); ?>/hr/movement/edit/'+data.table[i].id+'" class="mx-2" data-tooltip="tooltip" data-placement="bottom" data-trigger="hover" data-original-title="Choose movement group">\
                                                <span class="fas fa-edit text-info"></span>\
                                            </a>\
                                        </td>',
                                
                            }).draw();
                        };
                    }

                    console.log(data);
                    iziToast.success({
                        title: '',
                        message: 'success'
                    });
                },error:function(){
                    iziToast.error({
                        title: '',
                        message: '500 internal server error'
                    });
                }
            });

        });
    });


    function deleteGroup(id) 
    {
        iziToast.question({
        title: '',
        timeout:20000,
        close: false,
        toastOnce: true,
        message: 'Are you sure you want to remove this record? ',
        position:"center",
        buttons: [
                    ['<button><b>YES</b></button>', function (instance, toast) {
                        removeGroup(id);
                        instance.hide(toast, {
                            transitionOut: 'fadeOutUp'
                        });
                    }],
                    ["<button>No</button>", function (instance, toast) {
                        instance.hide(toast, {
                            transitionOut: 'fadeOutUp'
                        });

                        iziToast.warning({
                            position: 'bottomRight',
                            message: 'Operation cancelled.'
                        });

                    },true]
                ]
        });
    }

    function removeGroup(id) {
        var frmData = new FormData();
            frmData.append('token',token);
            frmData.append('groupid',id);

            $.ajax({
                url:"<?php echo base_url('/hr/api_movement/remove'); ?>",
                type:'post',
                dataType:'json', //return type value
                data:frmData,
                processData: false,
                contentType: false,
                success:function(data){
                    iziToast.success({
                        title: '',
                        message: 'success'
                    });
                    //refresh the page...
                    window.location.replace("<?php echo base_url('hr/movement/groups');?>");

                },error:function(){
                    iziToast.error({
                        title: '',
                        message: '500 internal server error'
                    });
                }
            });
    }
</script>

