<style type="text/css">
    #booth {
        margin: 20px 0px 10px 0px;
      }
      #customerphotogallery{
        margin-top: 10px;
      }
      .deletelink{
        background-color: white;
        color: red;
        padding: 2px;
        position: absolute;
        top: 0px;
        right: 15px;
        font-size: 15px;
      }
      
</style>
<script type="text/javascript">
    $(document).ready(function () {
        var table = $('#paymentstable').DataTable( {
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "<?php echo base_url('partner/customers/getcustomerpayments') ?>",
            "lengthMenu": [[20, 50, 100], [20, 50, 100]]
            
        });

       
    });
</script>
<script type="text/javascript">
    
    var floatpointnum   =   '<?php echo $this->formatslist->getCurrencyDecimalPonts(); ?>';
</script>

<!-- Page Content -->
<div class="page-content">
    <!-- Page Header -->
    <div class="page-header position-relative">
        <div class="header-title">
            <h1>
                Customer Payments
            </h1>
        </div>
        <!--Header Buttons-->
        <div class="header-buttons">
            <a class="sidebar-toggler" href="#">
                <i class="fa fa-arrows-h"></i>
            </a>
            <a class="refresh" id="refresh-toggler" href="">
                <i class="glyphicon glyphicon-refresh"></i>
            </a>
            <a class="fullscreen" id="fullscreen-toggler" href="#">
                <i class="glyphicon glyphicon-fullscreen"></i>
            </a>
        </div>
        <!--Header Buttons End-->
    </div>
    <!-- /Page Header -->
    <!-- Page Body -->
    <div class="page-body">
        <div class="row">
            <div class="col-xs-12 col-md-12">
                <div class="widget">
                    <?php
                    if ($this->session->flashdata('success_msg')) {
                    ?>
                        <div class="alert alert-success">
                            <a href="#" class="close" data-dismiss="alert">&times;</a>
                            <?php echo $this->session->flashdata('success_msg');$this->session->unset_userdata('errormsg'); ?>
                        </div>
                    <?php
                    }
                    ?>
                    <div class="widget-body">
                        <div class="table-toolbar">
                            <div class="form-group"> <a type="button" class="btn btn-success shiny icon-only new" data-toggle="modal" data-target="#myModal" >
                                    <i class="fa fa-plus"></i>
                                </a>
                                
                            </div>
                            
                            
                            

                            
                            
                            
                            <div id="myModal" class="modal fade" role="dialog">
                  <div class="modal-dialog">

                    <!-- Modal content-->
                    <div class="modal-content">
                        <form action="<?php echo base_url();?>partner/customers/addcustomers" method="post" name="frmcustomer" id="frmcustomer">
                          <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Add New Payment</h4>
                        </div>
                        <div class="modal-body">
                         <div class="row">
                            <div class="col-md-12">
                                <input type="hidden" id="id" name="id">
                                
                                
<div class="form-group padding-bottom-30">
    <label for="inputEmail3" class="col-sm-3 control-label no-padding-right" style="padding-top: 7px;">Invoice #</label>
    <div class="col-sm-9 addmargin">
        <input type="number" class="form-control" name="invid" id="invid" placeholder="">
        <input type="hidden" class="form-control" name="receiptid" id="receiptid" >
        <input type="hidden" class="form-control" name="invoiceid" id="invoiceid" >
        <span class="text" id="invfeed"></span>
    </div>
    
</div>
<div class="form-group padding-bottom-30">
    <label for="inputEmail3" class="col-sm-3 control-label no-padding-right" style="padding-top: 7px;">Customer</label>
    <div class="col-sm-9 addmargin">
        <span class="text" name="invcustomer" id="invcustomer"></span>
        <input type="hidden" class="form-control" name="customerid" id="customerid" >
    </div>
</div>
<div class="form-group padding-bottom-30">
    <label for="inputEmail3" class="col-sm-3 control-label no-padding-right" style="padding-top: 7px;">Invoice Date</label>
    <div class="col-sm-9 addmargin">
        <span class="text" name="invdate" id="invdate"></span>
    </div>
</div>
<div class="form-group padding-bottom-30">
    <label for="inputEmail3" class="col-sm-3 control-label no-padding-right" style="padding-top: 7px;">Total</label>
    <div class="col-sm-9 addmargin">
        <input type="number" class="form-control" name="invamount" id="invamount" readonly></span>
    </div>
</div>
<div class="form-group padding-bottom-30">
    <label for="inputEmail3" class="col-sm-3 control-label no-padding-right" style="padding-top: 7px;">Paid</label>
    <div class="col-sm-9 addmargin">
        <input type="number" class="form-control" name="invpaid" id="invpaid" readonly>
    </div>
</div>
<div class="form-group padding-bottom-30">
    <label for="inputEmail3" class="col-sm-3 control-label no-padding-right" style="padding-top: 7px;">Payment Date</label>
    <div class="col-sm-9 addmargin">
        <input type="text" class="form-control inptext" id="paymentdate" name="paymentdate" readonly />
    </div>
</div>
<div class="form-group padding-bottom-30">
    <label for="inputEmail3" class="col-sm-3 control-label no-padding-right" style="padding-top: 7px;">Paying</label>
    <div class="col-sm-9 addmargin">
        <input type="number" class="form-control" name="invpaying" id="invpaying" placeholder="0.00" />
    </div>
</div>

<div class="form-group padding-bottom-30">
    <label for="inputEmail3" class="col-sm-3 control-label no-padding-right" style="padding-top: 7px;">Adjustment (-)</label>
    <div class="col-sm-9 addmargin">
        <input type="number" class="form-control" name="invadj" id="invadj" placeholder="0.00">
    </div>
</div>
<div class="form-group padding-bottom-30">
    <label for="inputEmail3" class="col-sm-3 control-label no-padding-right" style="padding-top: 7px;">Balance</label>
    <div class="col-sm-9 addmargin">
        <input type="number" class="form-control" name="invbalance" id="invbalance" readonly>
    </div>
</div>

<div class="form-group padding-bottom-30">
    <label for="inputEmail3" class="col-sm-3 control-label no-padding-right" style="padding-top: 7px;"> </label>
    <div class="col-sm-9 addmargin padding-top-5">
        <label>
        <input type="checkbox" class="inverted" name="invsettle" id="invsettle" >
        <span class="text">Settle</span>
        </label>
    </div>
</div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" onclick="savepayment()" class="btn btn-success">Save</button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
                            
                            
                            
                            <div class="row">
                                
                                <div class="col-md-12 table-responsive">
                                    <table class="table table-striped table-hover table-bordered editable" id="paymentstable" name="paymentstable">
                                        <thead>
                                            <tr role="row">
                                                <th>
                                                   DATE
                                                </th>
                                                
                                                <th>
                                                    CUSTOMER
                                                </th>                                                
                                                <th>
                                                    INVOICE
                                                </th>
                                                <th>
                                                    TOTAL
                                                </th>
                                                <th>
                                                    PAID
                                                </th>
                                                <th>
                                                    ADJUSTMENTS
                                                </th>
                                                <th>
                                                    BALANCE
                                                </th>
                                                
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!-- /Page Body -->
    </div>
    <!-- /Page Content -->
</div>
<!-- /Page Container -->
<!-- Main Container -->
</div>

<script src="<?= site_url() ?>assets/js/datetime/bootstrap-datepicker.js"></script>
<script>
    
    const inv_total = document.getElementById('invamount');
        const inv_paid = document.getElementById('invpaid');
        const inv_paying = document.getElementById('invpaying');
        const inv_adj = document.getElementById('invadj');
        const inv_settle = document.getElementById('invsettle');
        
        $("#paymentdate").datepicker({format: 'dd-mm-yyyy', setDate: new Date()});
    $( document ).ready(function() {
        
        
        
        inv_paying.addEventListener('change', udpateBalance);
        
        inv_adj.addEventListener('change', udpateBalance);
        inv_settle.addEventListener('change', udpateSettle);
        
        var invid = document.getElementById("invid");
    invid.addEventListener("keyup", function(event) {
  var inv_id = $("#invid").val();
  if (event.keyCode === 13 && inv_id !== "") {
   
   $("#invfeed").html('');
   
        
        $.ajax({
            method: "POST",
            url: "<?php echo base_url('partner/customers/getinvdetails'); ?>",
            dataType: "json",
            data: {
                invid:inv_id
            }
        }).done(function (msg) {
            if(msg.success){
                $("#invfeed").html('<div class="col-sm-9 addmargin alert-success" style="background-color: #fff;">Invoice found.</div>');
                $("#invamount").val(Math.round( msg.total * 100) / 100);
        $("#receiptid").val(msg.receiptid);        
        $("#invoiceid").val(msg.invoiceid);
        $("#customerid").val(msg.customerid);  
        $("#invcustomer").text(msg.customer);
                $("#invdate").text(msg.date);
                $("#invpaid").val(Math.round( msg.paid * 100) / 100);
                $("#invpaying").val("");
                $("#invadj").val(0.00);
                var balance=msg.total-msg.paid;
                $("#invbalance").val(Math.round( balance * 100) / 100);
            }else{
                
                $("#invfeed").html('<div class="col-sm-9 addmargin alert-danger"  style="background-color: #fff;">'+msg.message+'</div>');
                
                $("#receiptid").val("");  
                $("#invoiceid").val("");  
                $("#customerid").val("");  
                $("#invamount").val(0.00);
                $("#invcustomer").text("");
                $("#invdate").text("");
                $("#invpaid").val(0.00);
                $("#invpaying").val(0.00);
                $("#invadj").val(0.00);
                $("#invbalance").val(0.00);
            }
        });
    
   
  }
});
        
    });
    
    function udpateBalance()
    {
        const  balance= inv_total.value - inv_paid.value - inv_paying.value - inv_adj.value;
        
        $("#invbalance").val(Math.round( balance * 100) / 100);
    }
    
    function udpateSettle()
    {
        const  settleAmt= inv_total.value - inv_paid.value - inv_paying.value;
        
        $("#invadj").val(Math.round( settleAmt * 100) / 100);
        udpateBalance();
    }
    
    
    function savepayment()
    {
        udpateBalance();
        
        var receipt_id = $("#receiptid").val();
        var inv_id = $("#invoiceid").val();
        var inv_paying = $("#invpaying").val();
        var inv_adj = $("#invadj").val();
        var payment_date = $("#paymentdate").val();
        var settle = $("#invsettle").val();
        var customer_id = $("#customerid").val();
        var inv_total = $("#invamount").val();
        var inv_paid = $("#invpaid").val();
        var inv_balance = $("#invbalance").val();
        
        
        if(settle==="on"){settle='1';}
else{settle='0';}
        
        
        if (inv_paying !== "" && receipt_id !== "" &&  payment_date !== "") {
   
   $("#invfeed").html('');
   
        
        $.ajax({
            method: "POST",
            url: "<?php echo base_url('partner/customers/savepayment'); ?>",
            dataType: "json",
            data: {
                receiptid:receipt_id,
        invoiceid:inv_id,
        invpaying:inv_paying,
        invadj:inv_adj,
        paymentdate:payment_date,
        invsettle:settle,
        customerid:customer_id,
        invtotal:inv_total,
        invpaid:inv_paid,
        invbalance:inv_balance
            }
        }).done(function (msg) {
            if(msg.success){
                
                window.location="<?= base_url('partner/customers/payments') ?>";
            }else{
                
            }
        });
    
   
  }
  else
  {
  alert("Please fill in payment date and paying amount.");
  }
        
    }
    
    
</script>