<div class="wrapper">
    <div class="container">
        <!-- Page-Title -->
        <div class="row">
            <div class="col-sm-10 pull-left">
                <h4 class="page-title">Attendance Requests: <?php echo $business[0]['business_name']; ?></h4>
            </div>
            <div class="col-sm-2">
                <div class="pull-right m-t-15">
                     <div class="btn-group">
                     <button type="button" data-toggle="modal" data-target="#addadvsalaryapp" class="btn btn-custom waves-effect waves-light" >Create New <span class="m-l-5"><i class="fa fa-plus"></i></span></button>
                    </div>
                </div>
            </div>
        </div>
        <?php if ($this->session->flashdata('Success') && $this->session->flashdata('Success') != "") { ?>
                    <div class="row hidden-print">
                        <div class="col-sm-12">
                            <div class="alert alert-success">
                                <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                                <strong>Success!</strong> <?php echo $this->session->flashdata('Success'); ?>
                            </div>
                        </div>
                    </div>
                <?php } ?>
                <?php if ($this->session->flashdata('Error') && $this->session->flashdata('Error') != "") { ?>
                    <div class="row hidden-print">
                        <div class="col-sm-12">
                            <div class="alert alert-danger">
                                <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                                <strong>Error!</strong> <?php echo $this->session->flashdata('Error'); ?>
                            </div>
                        </div>
                    </div>
                <?php } ?>
       
        
         <div class="row" >
            <div class="col-sm-12">
                <div class="card-box ">
                    <div class="row">
                        <div class="col-md-12"> 
                            <div class="table-container">
                                <div class="table-actions-wrapper ">                                
                                </div>
                                <table id="app_table" class="table table-striped table-bordered dt-responsive " cellspacing="0" >                                    
                                    <thead>
                                        <tr>
                                            <th>Request ID</th>
                                            <th>Staff ID</th>
                                            <th>Staff Name</th>   
                                            <th>Branch</th>   
                                            <th>Request Date</th>                  
                                            <th style="text-align: right;">Requested Time In</th>  
                                            <th style="text-align: right;">Requested Time Out</th>
                                            <th>Location</th>                                                                                        
                                            <th>Status</th>
                                            <th>Approved By</th>
                                            <th>Approve</th>
                                            <th>Reject</th>                                        
                                        </tr>
                                        <tr role="row" class="filter">                                            
                                            <td >
                                                <input style="width: 80px;" type="text" class="form-control form-filter input-sm" name="id_attendance_request">
                                            </td>
                                            <td >
                                                <input style="width: 80px;" type="text" class="form-control form-filter input-sm" name="staff_id">
                                            </td>
                                            <td >
                                                <input style="width: 80px;" type="text" class="form-control form-filter input-sm" name="staff_name">
                                            </td>
                                            <td >
                                                <input style="width: 80px;" type="text" class="form-control form-filter input-sm" name="business">
                                            </td>
                                            <td >
                                                <input style="width: 80px;" type="text" class="form-control form-filter input-sm" name="request_date">
                                            </td>
                                            <td >
                                                <input style="width: 80px;" type="text" class="form-control form-filter input-sm date-picker" name="request_time_in">
                                            </td>   
                                            <td>
                                                 <input style="width: 80px;" type="text" class="form-control form-filter input-sm date-picker" name="request_time_out">
                                            </td>
                                            <td>
                                                <input style="width: 80px;" type="text" class="form-control form-filter input-sm" name="address">
                                            </td>
                                            <td >
                                                <input style="width: 80px;" type="text" class="form-control form-filter input-sm" name="request_status">
                                            </td>
                                            <td >
                                                <input style="width: 80px;" type="text" class="form-control form-filter input-sm" name="approved_by">
                                            </td>                                            
                                           
                                            <td >
                                                <div class="margin-bottom-5">
                                                    <button class="btn btn-sm teal-500 filter-submit margin-bottom"><i class="icon-magnifier"></i> Search</button>                                                
                                                    
                                                </div>
                                            </td>      
                                            <td><button class="btn btn-sm orange-500 filter-cancel"><i class="icon-refresh"></i> Reset</button></td>                                      
                                        </tr>
                                    </thead>
                                    <tbody>                                        
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    
    
      <!--Edit request App Modal-->
        <div id="editattendancereq" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="editattendancereq" aria-hidden="true" style="display: none;">
            <div class="modal-dialog">
                <div class="modal-content">
                    <form id="updateLeaveApp" action="<?php echo base_url("attendance_controller/update_loan_applicaiton"); ?>" method="POST">
                        <input type="hidden" name="csrf_test_name" id="payment_csrf" value=""/>
                        <input type="hidden" name="id_attendance_request" id="txteditrequestid" value=""/>
                        <input type="hidden" name="staff_id" id="txteditstaffid" value=""/>
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h4 class="modal-title" id="custom-width-modalLabel">Update Attendance Request</h4>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="txtstaffnameedit" class="control-label date">Staff Name:</label>                                        
                                    </div> 
                                </div> 
                                <div class="col-md-6">
                                    <div class="form-group">                                        
                                        <input id="txteditstaffname" name="staff_name" class="form-control">
                                    </div> 
                                </div>                                 
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <label for="txteditrequesttimein" class="control-label date">Time In:</label>
                                </div>                                
                                <div class="col-md-6">
                                   <input id="txteditrequesttimein" name="request_time_in" class="form-control">
                                </div>                                
                            </div>
                            <hr>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <label for="txteditrequesttimeout" class="control-label date">Time Out:</label>
                                </div>                                
                                <div class="col-md-6">
                                    <input  class="form-control" name="request_time_out" id="txteditrequesttimeout" value=""/>
                                </div>                                
                            </div>
                            
                             <div class="row">
                                <div class="col-md-6">
                                    <strong>Location: </strong>
                                </div>                                
                                <div class="col-md-6">
                                    <input class="form-control " name="address" id="txteditaddress" value=""/>
                                </div>                                
                            </div>
                            <hr>
                            <div class="row">
                                <div class="col-md-6">
                                    <strong>Approval: </strong>
                                </div>                                
                                <div class="col-md-6">
                                    <select class="form-control" id="txteditrequeststatus" name="request_status">
                                        <option value="Pending">Pending</option>
                                        <option value="Approved">Approved</option>
                                        <option value="Rejected">Rejected</option>
                                    </select>
                                </div>                                
                            </div>  
                            <hr>
                          
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Close</button>
                            <button id="btnsubmit" type="submit" onclick="$('#payment_csrf').val($('#cook').val());" class="btn btn-custom waves-effect waves-light">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    
    <script src="<?php echo base_url(); ?>assets/js/datatable.js"></script>
    
    <script>
        
    jQuery(document).ready(function() {
         
         
        applicationlist.init();
     });
        
     var applicationlist = function () {
          var initPickers = function () {
            //init date pickers
                $('.date-picker').datepicker({
                    autoclose: true,
                    format: 'yyyy-mm-dd'
                });
            }

            var handleApplications = function () {
                var grid = new Datatable();

                grid.init({
                    src: $("#app_table"),
                    onSuccess: function (grid) {
                        // execute some code after table records loaded
                       
                    },
                    onError: function (grid) {
                        // execute some code on network or other general error  
                       
                    },
                    loadingMessage: 'Loading...',
                    dataTable: {
                        "dom": "<'row'<'col-md-8 col-sm-12'li><'col-md-4 col-sm-12'<'table-group-actions pull-right'>>r>t<'row'<'col-md-12 col-sm-12'><'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'p><'col-md-12 col-sm-12'i>>",
                        "lengthMenu": [
                            [10, 20, 50, 100, 150, -1],
                            [10, 20, 50, 100, 150, "All"] // change per page values here
                        ],
                        "pageLength": 10, // default record count per page
                        "pagingType": "full_numbers",
                        "stateSave":"true",
                        "ajax": {
                            
                            "url": "<?php echo base_url(); ?>attendance_controller/getattendancerequests" // ajax source
                        },
                        "order": [
                            [1, "desc"]
                        ], // set first column as a default sort by asc
                        "columns": [                           
                            {"data": "id_attendance_request"},
                            {"data": "staff_id"},
                            {"data": "staff_name"},
                            {"data": "business"},
                            {"data": "request_date"},
                            {"data": "request_time_in"},
                            {"data": "request_time_out"},   
                            {"data": "address"},                            
                            {"data": "request_status"},
                            {"data": "approved_by"},
                            {"data": "approve"},
                            {"data": "reject"}  ,
                        ],
                        "columnDefs": [{"sortable": false, "targets": 3}],
                        "responsive":1
                    }
                });

                // handle group actionsubmit button click
                grid.getTableWrapper().on('click', '.table-group-action-submit', function (e) {
                    e.preventDefault();
                    var action = $(".table-group-action-input", grid.getTableWrapper());
                    if (action.val() !== "" && grid.getSelectedRowsCount() > 0) {
                        grid.setAjaxParam("customActionType", "group_action");
                        grid.setAjaxParam("customActionName", action.val());
                        grid.setAjaxParam("id_loan_applications", grid.getSelectedRows());
                        grid.getDataTable().ajax.reload();
                        grid.clearAjaxParams();
                    } else if (action.val() == "") {
                        swal({
                            title: "Please select an action",
                            text: "",
                            type: "warning",
                            confirmButtonText: 'OK!'
                        });
                        
                    } else if (grid.getSelectedRowsCount() === 0) {
                         swal({
                            title: "No record selected",
                            text: "",
                            type: "danger",
                            confirmButtonText: 'OK!'
                        });
                    }
                });
            }
            return {
                //main function to initiate the module
                init: function () {
                    initPickers();
                   
                    handleApplications();
                }

            };
        }();
    
   
    
     function approve(id){
       
        $.ajax({
            type: 'POST',            
            url: '<?php echo base_url("attendance_controller/update_attendance"); ?>',
            data: {id_attendance_request: id, request_status : 'approved'},
            dataType: "json",
            cache: false,
            async: true,
            success: function(data) {
               console.log('here');
                location.reload();
            }
        });
        
        
    }    

    function reject(id){
       
       $.ajax({
           type: 'POST',           
           url: '<?php echo base_url("attendance_controller/update_attendance"); ?>',
           data: {id_attendance_request: id, request_status : 'rejected'},
           dataType: "json",
           cache: false,
           async: true,
           success: function(data) {
            console.log('reject');
            location.reload();
              
           }
       });
       
           
       
   }    
    
    </script>