<style type="text/css">
</style>
<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</h5>
                    <a href="<?php echo base_url('hr/movement/create')?>" class="btn btn-outline-dark btn-sm" title="Add New Staff Movement" >
                        <i class="fa fa-plus"></i>Add New Movement
                    </a>
                    <a href="<?php echo base_url('hr/movement/group_report')?>" target="_blank" class="btn btn-outline-dark btn-sm" title="Print Staff Movement">
                        <i class="fa fa-print"></i>Print
                    </a>
                    <a href="<?php echo base_url('hr/movement/calendar')?>" class="btn btn-outline-dark btn-sm" title="View Calendar">
                        <i class="fa fa-calendar"></i> Calendar
                    </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 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">
                                            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">

                                <!-- <canvas id="myChart" height="100"></canvas> -->

                                <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 ($movements != 'no result'): ?>
                                                <?php foreach ($movements as $key => $group): ?>
                                                    <tr>
                                                        <td><?php echo $key+1; ?></td>
                                                        <td><?php echo $group->date; ?> </td>
                                                        <td><?php echo $group->movementDeptName; ?></td>
                                                        <td> <?php 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): ?>
                                                            <button class="btn btn-sm btn-warning btn-block text-white" data-toggle="modal" data-target="#mdlStatus" data-movementid="<?php echo $group->id;?>" onclick="getDetails(<?php echo $group->id;?>,<?php echo $group->status;?>);">Pending</button>
                                                         <?php endif ?> 
                                                         <?php if ($group->status == 1): ?>
                                                            <button class="btn btn-sm btn-success btn-block" data-toggle="modal" data-target="#mdlStatus" data-movementid="<?php echo $group->id;?>" onclick="getDetails(<?php echo $group->id;?>,<?php echo $group->status;?>);">Approved</button>
                                                         <?php endif ?>
                                                         <?php if ($group->status == 2): ?>
                                                            <button class="btn btn-sm btn-danger btn-block" data-toggle="modal" data-target="#mdlStatus" data-movementid="<?php echo $group->id;?>" onclick="getDetails(<?php echo $group->id;?>,<?php echo $group->status;?>);">Rejected</button>
                                                         <?php endif ?>
                                                        </td>

                                                        <td class="text-center"> 
                                                            <!-- <a href="<?php echo base_url('/hr/movement/movement_list/'.$group->id) ?>" class="mx-2" data-tooltip="tooltip" data-placement="bottom" data-trigger="hover" data-original-title="view details movement group">
                                                                <span class="fas fa-eye text-secondary"></span> 
                                                            </a> -->
                                                            <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>
                            </div>
                        </div>
                    </div>
                </div>
            </div>      
        </div>
</div>

<div class="fade modal" id="mdlStatus" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document" style="width:100%;">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <input type="hidden" id="mdlGroupid">
        <div class="row">
            <div class="col-2">
                Date
            </div>
            <div class="col">
                <input type="text" class="form-control" id="mdlDate" disabled>
            </div>
        </div>
        
        <div class="row">
            <div class="col-2">
                Department
            </div>
            <div class="col">
                <input type="text" class="form-control" id="mdlDept" disabled>
            </div>
        </div>

        <div class="row">
            <div class="col-2">
                Client / Destination
            </div>
            <div class="col">
                <input type="text" class="form-control" id="mdlClient" disabled>
            </div>
        </div>

        <div class="row">
            <div class="col-2">
                Type
            </div>
            <div class="col">
                <input type="text" class="form-control" id="mdlType" disabled>
            </div>
        </div>

        <div class="row">
            <div class="col-2">
                Venue
            </div>
            <div class="col">
                <input type="text" class="form-control" id="mdlVenue" disabled>
            </div>
        </div>

        <div class="row">
            <div class="col-2">
                Description
            </div>
            <div class="col">
                <textarea class="form-control" id="mdlDesc" disabled></textarea>
            </div>
        </div>
        
        <div class="row">
            <div class="col">
                <table class="table table-bordered" style="100%" id="mdlTable">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>Date</th>
                            <th>Name</th>
                            <th>Timeout</th>
                            <th>Timein</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>

        <hr>

        <div class="row">
            <div class="col-2">
                Status
            </div>
            <div class="col">
                <select class="form-control" id="mdlSelectStatus">
                    <option value="0">Pending</option>
                    <option value="1">Approved</option>
                    <option value="2">Rejected</option>
                </select>
            </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" id="saveStatus">Save changes</button>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
    var movementTable = new Array();
    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 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('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();
                    console.log(data);
                    var rowCount = table.data().count();
                    if(data.table != 'no result'){
                        for (var i = 0; i < data.table.length; i++) {

                            var pending_status = '<button class="btn btn-sm btn-warning btn-block text-white" data-toggle="modal" data-target="#mdlStatus" data-movementid="1" onclick="getDetails('+data.table[i].id+','+data.table[i].status+');">Pending</button>';
                            var success_status = '<button class="btn btn-sm btn-success btn-block text-white" data-toggle="modal" data-target="#mdlStatus" data-movementid="1" onclick="getDetails('+data.table[i].id+','+data.table[i].status+');">Pending</button>';
                            var rejected_status = '<button class="btn btn-sm btn-danger btn-block text-white" data-toggle="modal" data-target="#mdlStatus" data-movementid="1" onclick="getDetails('+data.table[i].id+','+data.table[i].status+');">Pending</button>';

                            if(data.table[i].status == 0){
                                status = pending_status;
                            }

                            if(data.table[i].status == 1){
                                status = success_status;
                            }

                            if(data.table[i].status == 2){
                                status = rejected_status;
                            }

                            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   : status,
                                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();
                        };
                    }
                    iziToast.success({
                        title: '',
                        message: 'success'
                    });
                },error:function(){
                    iziToast.error({
                        title: '',
                        message: '500 internal server error'
                    });
                }
            });

        });

        $('#saveStatus').click(function(){
            var frmData = new FormData();
            frmData.append('token',token);
            frmData.append('group_id',$('#mdlGroupid').val());
            frmData.append('status',$('#mdlSelectStatus').val());
            frmData.append('update_by',<?php echo $_SESSION['user']['id']; ?>);

            $.ajax({
                url:"<?php echo base_url('/hr/api_movement/changeStatus'); ?>",
                type:'post',
                dataType:'json',
                data:frmData,
                processData: false,
                contentType: false,
                success:function(data){
                    console.log(data);
                    iziToast.success({
                        title: '',
                        message: data.message
                    });
                    location.reload();
                },error:function(){
                    iziToast.error({
                        title: '',
                        message: '500 internal server error'
                    });
                }
            });
        });
    });

    function getDetails(id,statusId) {
        clearModal();
        $('#mdlSelectStatus').val(statusId).change();
        $('#mdlGroupid').val(id);
        var frmData = new FormData();
        frmData.append('token',token);
        frmData.append('groupid',id);
        $.ajax({
            url:"<?php echo base_url('/hr/api_movement/getDetails'); ?>",
            type:'post',
            dataType:'json',
            data:frmData,
            processData: false,
            contentType: false,
            success:function(data){

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

                       var name     = data.table[i].staffName;
                       var dept     = data.table[i].departmentName;
                       var moveType = data.table[i].movementType;
                       var staffOut = data.table[i].timeOut;
                       var staffIn  = data.table[i].timeIn;


                       var table = [{
                            date        : data.table[i].date,
                            staffName   : data.table[i].staffName,
                            timeout     : timeTo12(data.table[i].timeOut),
                            timein      : timeTo12(data.table[i].timeIn)
                        }];

                        movementTable.push(table);
                    };
                }

                if(data.similar.length > 0){
                    for (var i = 0; i < data.similar.length; i++) {
                       if(data.similar[i].id == id){
                            $('#mdlDate').val(data.similar[i].date);
                            $('#mdlDept').val(data.similar[i].departmentName);
                            $('#mdlClient').val(data.similar[i].customerName);
                            $('#mdlType').val(data.similar[i].movementType);
                            $('#mdlVenue').val(data.similar[i].destination);
                            $('#mdlDesc').val(data.similar[i].description);
                       }
                    };
                }
            populateTable();

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

    function clearModal() {
        $('#mdlDate').empty();
        $('#mdlDept').empty();
        $('#mdlClient').empty();
        $('#mdlType').empty();
        $('#mdlVenue').empty();
        $('#mdlDesc').empty();
        movementTable = [];
    }

    function populateTable(){
       var table   = $('#mdlTable').DataTable();
       table.clear().draw();
       if(movementTable.length > 0)
        {      
            for (var i = 0; i < movementTable.length; i++) 
            {    
                var rowCount = table.data().count();
                table.row.add({
                    0   : ++rowCount,
                    1   : movementTable[i][0].date,
                    2   : movementTable[i][0].staffName,  
                    3   : movementTable[i][0].timeout,
                    4   : movementTable[i][0].timein
                }).draw();
            };
        }

    }
</script>