<div class="wrapper">
    <div class="container">
        <!-- Page-Title -->
        <div class="row">
            
            <div class="pull-left col-sm-8">
                <h4 class="page-title">Staff Payable and Receivable as on : <?php echo date('d-m-Y'); ?></h4>
            </div>
            <div class="col-sm-4">
                <div class="pull-right m-t-15">
                    <a class="btn btn-success" href="<?php echo base_url();?>payable_approval_sheet/<?php echo $this->session->userdata('businessid'); ?>" >Approval Sheet</a>
                     <div class="btn-group">
                        <button type="button" class="btn btn-warning dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="true">Staff Payments<span class="m-l-5"><i class="fa fa-money"></i></span></button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="<?php echo base_url(); ?>staff_list">Staff</a></li>
                            <li><a href="<?php echo base_url();?>calculatemonthstaffpayment">Monthly Salary Calculation</a></li>                            
                            <li><a href="<?php echo base_url();?>staff_controller/paymentslips">Payment Slips</a></li>
                            <li class="divider"></li>

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

        <div class="row" id="divselection">
            <div class="col-sm-12">
                <div class="card-box ">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="row">                                 
                                <div class="col-md-12">
                                    <div class="form-group" id="div_rec_pay">
                                       <div class="col-md-2">
                                       </div>
                                       <div class="col-md-10">
                                           <div class="col-md-3" >
                                              <div class="radio radio-info radio-inline">
                                                  <input type="radio" onclick="showhidebank();" value="Bank" required="required" name="voucher_payment_mode" >
                                                   <label for="voucher_payment_mode"> Bank </label>
                                               </div>
                                           </div>
                                           <div class="col-md-3 m-b-10">
                                             <div class="radio radio-info radio-inline">
                                                   <input type="radio" onclick="showhidebank();" value="Cash" required="required" name="voucher_payment_mode">
                                                   <label for="voucher_payment_mode"> Cash </label>
                                               </div>
                                           </div>
                                           <div class="col-md-3 m-b-10">
                                             <div class="radio radio-info radio-inline">
                                                   <input type="radio" onclick="showhidebank();" value="Card" required="required" name="voucher_payment_mode">
                                                   <label for="voucher_payment_mode"> Card </label>
                                               </div>
                                           </div>
                                       </div>
                                   </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group" id="showbank" style="display:none">                            
                                    <label class="control-label col-md-2">Select Bank</label>
                                        <div class="col-md-10">
                                            <select class="form-control" name="bank_accounts" id="bank_account">
                                                <?php foreach($bank_accounts as $ba){?>
                                                <option value="<?php echo $ba['id_account_heads'];?>"><?php echo $ba['account_head'];?></option>
                                                <?php } ?>
                                            </select>
                                        </div>
                                </div>
                            
                                <div class="form-group" id="showcash" style="display:none">

                                    <label class="control-label col-md-2">Select Cash Account</label>
                                    <div class="col-md-10">    
                                        <select class="form-control" name="cash_accounts" id="cash_account">
                                            <?php foreach($cash_accounts as $ca){?>
                                            <option value="<?php echo $ca['id_account_heads'];?>"><?php echo $ca['account_head'];?></option>
                                            <?php } ?>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group" id="showcard" style="display:none">
                                    <label class="control-label col-md-2">Select Card</label>
                                    <div class="col-md-10">
                                        <select class="form-control" name="card_accounts" id="card_account">
                                            <?php foreach($card_accounts as $carda){?>
                                            <option value="<?php echo $carda['id_account_heads'];?>"><?php echo $carda['account_head'];?></option>
                                            <?php } ?>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group">
                                <!--Instrument Number-->
                                    <label class="col-md-2  control-label">Instrument #</label>
                                    <div class="col-md-10">
                                        <input class="form-control hidden" name="payment_mode" id="payment_mode" value = "">
                                        <input class="form-control numeric" name="instrument_number" id="instrument_number" value = "">
                                    </div>
                                </div>
                            </div>
                            <div class="row">                                 
                                <div class="form-group">
                                    <label for="account_voucher_date" class="col-md-2 control-label">Payment Date</label>
                                    <div class="col-md-10">
                                        <input class="form-control" required="required" id="account_voucher_date" name="account_voucher_date">                                           
                                    </div>
                                </div>
                            </div>
                        </div>
                        

                        <div class="col-md-6">
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <label class="form-label">Action</label>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <select class="form-control" name="select_action" id="select_action">
                                            <option value="payment">Payment</option>                            
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-2">  
                                    <div class="row">
                                        <div class="col-md-12">  
                                            <label class="form-label">Execute</label>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <button onclick="select_action();" type="button" class="btn btn-primary">Run</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                        
           </div>
        </div>
            
        <div class="row" id="divselection">
            <div class="col-sm-12">
                <div class="card-box ">
                    
                    <table id="tblstaff" class="table  table-bordered">
                        <thead>
                            <tr>
                                <th><input class="checkbox" type="checkbox" id="checkall" onclick="selectall();" ></th>
                                <th>ID</th>
                                <th>Name</th>
                                <th>Voucher</th>
                                <th>Month</th>
                                <th>Year</th>
                                <th class="text-right">Wages Payable</th>
                                <th class="text-right">Clearing Now</th>
                                
                                <th>Receivable From Staff</th>
                            </tr>
                        </thead>
                        <tbody>
                            
                            <?php $totalpayables=0; $totalreceivables=0; foreach($payables as $payable){ 
                                if($payable['salary_payable'] > 0){
                                ?>
                            <tr id="<?php echo $payable['id_staff']."_".$payable['id_account_vouchers']; ?>">
                                <td key="checkbox" type="checkbox"><input id="checkbox_<?php echo $payable['id_staff']."_".$payable['id_account_vouchers'];?>" type="checkbox" class="checkbox-row form-control" onclick="selectsingle();">  </td>
                                <td key="staff_id" type="ignore"><?php echo $payable['id_staff']; ?></td>
                                <td key="staff_fullname" type="ignore" name="staff_name"><?php echo $payable['staff_fullname']; ?></td>
                                <td key="voucher_id" type="ignore"><?php echo $payable['id_account_vouchers']; ?></td>
                                <td key="month" type="ignore"><?php echo $payable['voucher_month']; ?></td>
                                <td key="year" type="ignore"><?php echo $payable['voucher_year']; ?></td>
                                <td key="payable" type="ignore" name="payable" id="payable_<?php echo $payable['id_staff']."_".$payable['id_account_vouchers']; ?>" class="text-right" ><?php echo number_format($payable['salary_payable'],2); $totalpayables = $totalpayables +$payable['salary_payable']; ?></td>
                                <td key="payingnow" type="add_input" name="payingnow" class="text-right" >
                                    <input onchange="" style="text-align: right; width:80px; border:none;" class="text-primary decimal" onkeyup="console.log(parseFloat($('#payable_<?php echo $payable['id_staff']."_".$payable['id_account_vouchers']; ?>').html())); if(this.value > parseFloat($('#payable_<?php echo $payable['id_staff']."_".$payable['id_account_vouchers']; ?>').text().replace(',','') )){this.value=parseFloat($('#payable_<?php echo $payable['id_staff']."_".$payable['id_account_vouchers']; ?>').text().replace(',',''));}" id="payingnow_<?php echo $payable['id_staff']."_".$payable['id_account_vouchers']; ?>" name="paying_now" type="text" onkeypress="return event.charCode >= 48" min="0" value="<?php echo $payable['salary_payable'];?>">
                                </td>
                                
                                <td><?php echo $payable['description']; ?></td>
                                
                            </tr>
                            <?php } } ?>
                        </tbody>
                        <tfoot>
                            <tr>
                                <th colspan="6"></th>
                                <th class="text-right"><?php echo number_format($totalpayables);?></th>
                                <th class="text-right"><label style="text-align: right;" class="form-label" id="totalpayablelabel"></label></th>
                                <th class="text-right"></th>
                                
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script>
        
    $(document).ready(function() {

        $('#tblstaff').DataTable({
            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
            stateSave: true,
            dom: "Bfrtlip",
            "bPaginate": false,
            buttons: [{extend: "copy", className: "btn-sm btn-custom btn-trans"}, {extend: "csv", className: "btn-sm btn-pink btn-trans"}, {
                    extend: "excel",
                    className: "btn-sm btn-warning btn-trans"
                }, {extend: "pdf", className: "btn-sm btn-purple btn-trans"}],
            responsive: 0,
            "order": [[ 1, "asc" ]],
            "columnDefs": [{targets: 0, orderable: false}]
        });
    
        $(".numeric").keypress(function(e) {
            //if the letter is not digit then display error and don't type anything
            if (e.which != 13 && e.which != 8 && e.which != 0  && e.which != 46 && (e.which < 48 || e.which > 57)) {
                return false;
            }
        });

        $(".decimal").keypress(function(e) {
            //if the letter is not digit then display error and don't type anything
            if (e.which != 13 && e.which != 8 && e.which != 0  && e.which != 46 && (e.which < 48 || e.which > 57) ) {

                return false;
            }
        });

        $('#account_voucher_date').datepicker({
            autoclose: true,
            todayHighlight: true,
            format: 'yyyy-mm-dd'
        }).datepicker('setDate', new Date());;

    });

    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 select_action(){
        console.log('selecting action');
        
        var Action  = $("#select_action option:selected").val();
        
        console.log(Action);
        
        if(Action = "payment"){
            staff_payment();
        }else{
            staff_receiving();
        }
        
    }
    
    function staff_payment(){
        
        var TableData;
        TableData = storeOTblValues();
        TableData = $.toJSON(TableData);
        //console.log(TableData); 
        
        
        if (TableData.length > 0) {

            $.ajax({
               type: "POST",
                    url: '<?php echo base_url().'staff_controller/check_staff_payment'; ?>',
                    data: {
                       account_voucher_date: $("#account_voucher_date").val(),
                       payment_mode: $("#payment_mode").val(),
                       instrument_number: $("#instrument_number").val(),
                       bank_account: $("#bank_account").val(),
                       cash_account: $("#cash_account").val(),
                       card_account: $("#card_account").val(),
                       
                       TableData : TableData
                    },
                    success: function(data) {
                        //console.log(data);
                        if(parseInt(data) > 0){
                            toastr.success(data, 'Done!');
                            location.reload();
                        } else { 
                            toastr.error(data, 'Error');
                            toastr.info('No vouchers created at this time', 'Done!');
                        }   
                    }

            });
        }
        
        
    }
    
    
    function storeOTblValues(){
        var TableData = new Array(); var count=0;
        $('#tblstaff tr').each(function(row, tr) {
            //console.log(tr);             
            var a = {}; var dothis=false;
            $('#tblstaff tr[id="'+$(tr).find('td:eq(1)').text()+'_'+$(tr).find('td:eq(3)').text()+ '"] td').each(function(col, td) {
                //console.log($(td).attr('key'));
                var elem = $(td).attr('key') ;
                if(typeof $(td).attr('key') !== 'undefined' && $(td).attr('key') !== ''){
                    //console.log($(td).children('input[type="checkbox"]').is(':checked'));
                    if($(td).attr('type') == 'checkbox'){
                        if($(td).children('input[type="checkbox"]').is(':checked') == true){
                            dothis = true;  
                        }else{
                            dothis = false;  
                        }
                    } else if($(td).attr('type') !== 'add_input' && $(td).attr('type') !== 'subtract_input'){
                        a[elem] = $(td).text();
                    } else{
                        //console.log($(td).children('input[type="text"]').val());
                        a[elem] = $(td).children('input[type="text"]').val();
                    }                    
                }
            });
            //console.log(a);
            if(typeof a !== 'undefined' && dothis == true){  
                TableData[count] = a;
                a={};
                count++;
            }
        });     
        
        //TableData.shift();  // first row will be empty - so remove
        //TableData.shift();
        //TableData.pop();    // last row will be empty - so remove
        
       //console.log(TableData);
        return TableData;
       // return false;
    }
    
    function selectall(){
        var totalpayable = 0;
        if($("#checkall").is(':checked') == true){
            $('#tblstaff tr').each(function(row, tr) {
                //console.log($(tr).find('td:eq(7) input[type="text"]').val());
                $("#checkbox_"+$(tr).find('td:eq(1)').text()+"_"+$(tr).find('td:eq(3)').text()).prop("checked",true);
                if(typeof($(tr).find('td:eq(7) input[type="text"]').val())!=='undefined'){
                    totalpayable = totalpayable + parseFloat($(tr).find('td:eq(7) input[type="text"]').val());
                }               
            });
        } else {
            $('#tblstaff tr').each(function(row, tr) {
                //console.log(tr);
                $("#checkbox_"+$(tr).find('td:eq(1)').text()+"_"+$(tr).find('td:eq(3)').text()).prop("checked",false);
            });
        }
        $("#totalpayablelabel").html(Math.round(totalpayable * 100)/100);
    }
    
    function selectsingle(){
        var totalpayable = 0;
        $('#tblstaff tr').each(function(row, tr) {
            
            //console.log($("#checkbox_"+$(tr).find('td:eq(1)').text()+"_"+$(tr).find('td:eq(3)').text()).is(':checked'));
            if($("#checkbox_"+$(tr).find('td:eq(1)').text()+"_"+$(tr).find('td:eq(3)').text()).is(':checked') === true){
                if(typeof($(tr).find('td:eq(7) input[type="text"]').val())!=='undefined'){
                    totalpayable = totalpayable + parseFloat($(tr).find('td:eq(7) input[type="text"]').val());
                }
            }
        });
        
        $("#totalpayablelabel").html(Math.round(totalpayable * 100)/100);
    }
        
    </script>