<div class="wrapper">
    <div class="container">
        <!-- Page-Title -->
        <div class="row">
            <div class="col-sm-10 pull-left">
                <h4 class="page-title">Staff Loan Applications: <?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>Application ID</th>
                                            <th>Staff ID</th>
                                            <th>Staff Name</th>   
                                            <th>Application Date</th>                  
                                            <th style="text-align: right;">Requested Amount</th>  
                                            <th style="text-align: right;">Approved Amount</th>
                                            <th>Approved By</th>
                                            <th>Approved On</th>
                                            <th>Installment</th>
                                            <th>No. of Months</th>
                                            <th>Status</th>
                                            <th>Action</th>                                        
                                        </tr>
                                        <tr role="row" class="filter">                                            
                                            <td >
                                                <input style="width: 80px;" type="text" class="form-control form-filter input-sm" name="id_loan_applications">
                                            </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 date-picker" name="created_on">
                                            </td>   
                                            <td>
                                                 <input style="width: 80px;" type="text" class="form-control form-filter input-sm" name="required_loan_amount">
                                            </td>
                                            <td>
                                                <input style="width: 80px;" type="text" class="form-control form-filter input-sm" name="approved_amount">
                                            </td>
                                            <td >
                                                <input style="width: 80px;" type="text" class="form-control form-filter input-sm" name="approved_by">
                                            </td>
                                            <td >
                                                <input style="width: 80px;" type="text" class="form-control form-filter input-sm date-picker" name="approved_on">
                                            </td>                                            
                                            <td >
                                                <input style="width: 80px;" type="text" class="form-control form-filter input-sm" id="installment" name="installment">
                                            </td>                                            
                                            <td >
                                                <input style="width: 80px;" name="num_of_months" class="form-control form-filter input-sm">
                                            </td>
                                            <td >
                                                <select style="width: 80px;" name="application_status" class="form-control form-filter input-sm">
                                                    <option value=""></option>
                                                    <option value='Pending'>Pending</option>
                                                    <option value='Approved'>Approved</option>
                                                    <option value='Rejected'>Rejected</option>
                                                    <option value='Disbursed'>Disbursed</option>
                                                </select>
                                            </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>
                                                
                                                    <button class="btn btn-sm orange-500 filter-cancel"><i class="icon-refresh"></i> Reset</button>
                                                </div>
                                            </td>                                            
                                        </tr>
                                    </thead>
                                    <tbody>                                        
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    
    <!--Add Loan App Modal-->
    <div id="addadvsalaryapp" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="addadvsalaryapp" aria-hidden="true" style="display: none;">
            <div class="modal-dialog">
                <div class="modal-content">
                    <form id="updateLeaveApp" action="<?php echo base_url("attendance_controller/insert_loan_app"); ?>" method="POST">
                       
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h4 class="modal-title" id="custom-width-modalLabel">Add New Loan Application</h4>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="txtstaffname" class="control-label date">Staff Name:</label>                                        
                                    </div> 
                                </div> 
                                <div class="col-md-6">
                                    <div class="form-group">                                        
                                        <select onchange="var data = $('#txtstaffname').select2('data'); $('#txtstaffnameadd').val(data.text);" id="txtstaffname" name="staff_id" class="form-control">
                                            <?php if(null != $staff_list){?>
                                                <?php foreach($staff_list as $staff){?>
                                                    <option value = "<?php echo $staff['id_staff'];?>"><?php echo $staff['staff_fullname'];?></option>
                                                <?php } ?>
                                            <?php } ?>
                                        </select>
                                        <input type="hidden" name="staff_name" id= "txtstaffnameadd">
                                    </div> 
                                </div>                                 
                            </div>                            
                            <div class="row">
                                <div class="col-md-6">
                                    <label for="txtamount" class="control-label date">Amount:</label>
                                </div>                                
                                <div class="col-md-6">
                                   <input id="txtamount" name="required_loan_amount" class="form-control" value="0.00">
                                </div>                                
                            </div>
                            <hr>                            
                            <div class="row">
                                <div class="col-md-6">
                                    <p style="font-weight: bold;">Number of Months the Amount will be Recovered in</p>
                                </div>                                
                                <div class="col-md-6">
                                    <input type="number" max="12" min="1" class="form-control txtnumberofmonths" name="num_of_months" id="txtnumberofmonths" value="1"/>
                                </div>                                
                            </div>                            
                            <div class="row">
                                <div class="col-md-6">
                                    <strong>Comments: </strong>
                                </div>                                
                                <div class="col-md-6">
                                    <input class="form-control " name="comment" id="txt_comment" 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="txt_advsalary_status" name="application_status">
                                        <option value='pending'>Pending</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="btnaddsubmit" type="submit" onclick="$('#payment_csrf').val($('#cook').val());" class="btn btn-custom waves-effect waves-light">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
      <!--Edit Loan App Modal-->
        <div id="editadvsalaryapp" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="editadvsalaryapp" 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_application"); ?>" method="POST">
                        <input type="hidden" name="csrf_test_name" id="payment_csrf" value=""/>
                        <input type="hidden" name="id_loan_applications" id="txteditidloanapplications" 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 Loan Application</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="txtamount" class="control-label date">Amount:</label>
                                </div>                                
                                <div class="col-md-6">
                                   <input id="txteditrequiredamount" name="approved_loan_amount" class="form-control">
                                </div>                                
                            </div>
                            <hr>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <p style="font-weight: bold;">Number of Months the Amount will be Recovered in</p>
                                </div>                                
                                <div class="col-md-6">
                                    <input type="number" max="12" min="1" class="form-control txtnumberofmonths" name="num_of_months" id="txteditnumofmonths" value=""/>
                                </div>                                
                            </div>
                            
                             <div class="row">
                                <div class="col-md-6">
                                    <strong>Comments: </strong>
                                </div>                                
                                <div class="col-md-6">
                                    <input class="form-control " name="comment" id="txteditcomment" 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="txteditapplicationstatus" name="application_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() {
         
         $("#txtstaffname").select2();
         
         $('#account_voucher_date').datepicker({
                autoclose: true,
                todayHighlight: true,
                format: 'yyyy-mm-dd'
            }).datepicker('setDate', new Date());
         
         
         $('.txtDate1').datepicker({
            default: today,
            autoclose: true,
            todayHighlight: true,
            format: 'yyyy-mm-dd',
            orientation: 'bottom'
        }).datepicker('setDate', new Date());
         
        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/getloanapplications" // ajax source
                        },
                        "order": [
                            [1, "desc"]
                        ], // set first column as a default sort by asc
                        "columns": [                           
                            {"data": "id_loan_applications"},
                            {"data": "staff_id"},
                            {"data": "staff_name"},
                            {"data": "created_on"},
                            {"data": "required_loan_amount"},   
                            {"data": "approved_amount"},
                            {"data": "approved_by"},
                            {"data": "approved_on"},
                            {"data": "installment"},
                            {"data": "num_of_months"},
                            {"data": "application_status"},    
                            {"data": "action"}                           
                        ],
                        "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 showhidebank(){
       
        if($('input[name=voucher_payment_mode]:checked').val()=="Bank"){            
            $("#showbank").show();
            $("#showcash").hide();
            $("#showcard").hide();
            $("#payment_mode").val("Bank");
        } else if($('input[name=voucher_payment_mode]:checked').val()=="Cash"){ 
            $("#showbank").hide();
            $("#showcash").show();
            $("#showcard").hide();
            $("#payment_mode").val("Cash");
        } else if($('input[name=voucher_payment_mode]:checked').val()=="Card"){ 
            $("#showbank").hide();
            $("#showcash").hide();
            $("#showcard").show();
            $("#payment_mode").val("Card");
        }
        
    }
    
     function open_loan_app(id){
       
        $.ajax({
            type: 'POST',
            
            url: '<?php echo base_url("attendance_controller/get_loan_application"); ?>',
            data: {id_loan_application: id},
            dataType: "json",
            cache: false,
            async: true,
            success: function(data) {
                $("#txteditidloanapplications").val(data.id_loan_applications);               
                $("#txteditstaffid").val(data.staff_id);
                $("#txteditstaffname").val(data.staff_name);        
                $("#txteditrequiredamount").val(data.required_loan_amount);
                $("#txteditinstallment").val(data.installment);
                $("#txteditcomment").val(data.comment);
                $("#txteditapplicationstatus").empty();
                $("#btnsubmit").show();
                $("#paymentdiv").hide();
               
                if(data.application_status == 'Pending'){                    
                    $("#txteditapplicationstatus").append("<option value='Pending'>Pending</option>");
                    $("#txteditapplicationstatus").append('<option value="Approved">Approved</option>');
                    $("#txteditapplicationstatus").append('<option value="Rejected">Rejected</option>');   
                    $("#editadvsalaryapp").modal('show');        
                }

                $("#txteditapplicationstatus").val(data.application_status);
                $("#txteditnumofmonths").val(data.num_of_months);
            }
        });
        
       
        
    }    
    
    </script>