<style type="text/css">
    #comments{
        height: 80px;
    }
    @media (min-width: 768px){
        .modal-dialog {
            width: 1100px;
            margin: 30px auto;
        }
    }
    #tablecontent{
        max-height: 400px;
        overflow: auto;
    }
    .invamount{
        font-size: 13px;
        color: #858585;
        background-color: #fbfbfb;
        border: 1px solid #d5d5d5;
        padding: 6px 12px;
    }
    .purchaseinvlabel {
        border-color: rgba(0,0,0,.2);
        padding: 7px;
        border-radius: 0 !important;
        background-clip: padding-box !important;
        color: #858585;
        background-color: #fbfbfb;
        border: 1px solid #d5d5d5;
        font-family: inherit;
        transition: box-shadow .45s,border-color .45s ease-in-out;
        box-shadow: none;
        margin-left: 15px;
    }
    @media (min-width: 768px){
        .purchaseinvlabel {
            width: 80.5%;
        }
    }
    .has-feedback .form-control {
        padding-right: 15px;
    }
    .typeahead {
        width: 100%;
    }
    .ui-menu {
        z-index: 100000;
        max-height: 300px;
        overflow-y: scroll;
        overflow-x: hidden;
        padding-left: 7px;
    }
</style>
<div class="page-content">
    <!-- Page Breadcrumb -->
    <div class="page-breadcrumbs">
        <ul class="breadcrumb">
            <li>
                <i class="fa fa-home"></i>
                <a href="#"><?php echo $this->lang->line("FINANCE"); ?></a>
            </li>
            <li class="active"><?php echo $this->lang->line("PAYMENTS"); ?></li>
        </ul>
    </div>
    <!-- /Page Breadcrumb -->
    <!-- Page Header -->
    <div class="page-header position-relative">
        <div class="header-title">
            <h1>
                <?php echo $this->lang->line("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 -->
    <!-- End Page Body -->
    <form id="togglingForm" class="form-horizontal" role="form" method="POST" action="<?php echo site_url('finance/payments/add_payment') ?>">
        <div class="page-body">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="row">
                        <div class="col-xs-12 col-md-12">
                            <div class="widget">
                                <div>
                                    <div class = "row center">
                                        <div class="col-lg-12 col-sm-12 col-xs-12">
                                            <div class="widget center">
                                                <div class="widget-header bordered-bottom bordered-lightred">
                                                    <span class="widget-caption"><?php echo $this->lang->line("PAYMENTS"); ?></span>
                                                </div>
                                                <div class="widget-body">
                                                    <div id="horizontal-form">
                                                        <input type="hidden" name="PayId" value="<?php echo (isset($paymentdetails)) ? $paymentdetails->ID : ''; ?>" />
                                                        <div class="form-group">
                                                            <label for="inputEmail3" class="col-sm-2 control-label no-padding-right">
                                                                <?php echo $this->lang->line("DATE"); ?></label>
                                                            <div class="col-sm-3">
                                                                <div class="input-group">
                                                                    <input class="form-control date-picker" id="id-date-picker-1 TRANSACTION_DATE"
                                                                           name="TRANSACTION_DATE" type="text" data-date-format="dd-mm-yyyy" 
                                                                           readonly value="<?php echo (isset($paymentdetails)) ? $this->formatslist->dateFormat($paymentdetails->TRANSACTION_DATE) : date('d-m-Y'); ?>" />
                                                                    <span class="input-group-addon">
                                                                        <i class="fa fa-calendar"></i>
                                                                    </span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="inputEmail3" class="col-sm-2 control-label no-padding-right">
                                                                <?php echo $this->lang->line("ACCOUNTFROM"); ?></label>
                                                            <div class="col-sm-10">
                                                                <select id="account" name="account" style="width:100%" required onchange="getBalance(this.value)">
                                                                    <option value=""><?php echo $this->lang->line("SELECTACCOUNT"); ?></option>
                                                                    <?php
                                                                    foreach ($accounts as $key => $value) {
                                                                        if (isset($paymentdetails) && $paymentdetails->ACCOUNT_ID == $value->ID) $selectvar = 'selected';
                                                                        else $selectvar = '';
                                                                        echo "<option value=\"" . $value->ID . "\" " . $selectvar . " />" . $value->ACCOUNT_NAME;
                                                                    }
                                                                    ?>
                                                                </select>
                        <div id="available_balance" style="color:red; display:none">
                        <div style="float: left;margin-right: 11px;"><?php echo $this->lang->line("AVAILABLEBALANCEIS"); ?> </div><div id="avbalamount"></div>
                        </div>
                                                            </div>
                                                        </div>
                                                        
<div class="form-group invoicediv" <?php if (isset($paymentdetails) &&
        ($paymentdetails->PAYMENTHEAD_ID == 'PURCHASE' || $paymentdetails->PAYMENTHEAD_ID == 'PURCHASERETURN'))
    echo 'style="display:block;"'; else echo 'style="display:none;"'; ?>>
    <label for="inputEmail3" class="col-sm-2 control-label no-padding-right">
        <?php echo $this->lang->line("SELECTINVOICE"); ?> </label>
    <div class="col-sm-10">
<select id="invoicelist" name="invoicelist" style="width:100%;" required>
<?php
if(isset($purchaseinvdet)) {
?>
<option value="<?php echo $purchaseinvdet->ID; ?>" selected>
<?php  echo $purchaseinvdet->REFERENCE . " | " . $purchaseinvdet->name . " | " .
$this->formatslist->formatCurrency($purchaseinvdet->BALANCE); ?></option>
    <?php
        }
    ?>
</select>
    </div>
</div>
                                                        
    <?php
    if (isset($paymentdetails) && ($paymentdetails->PAYMENTHEAD_ID == 'PURCHASE' || $paymentdetails->PAYMENTHEAD_ID == 'PURCHASERETURN')) {
        ?>
        <div class="form-group" id="paymenthead">
            <label for="inputEmail3" class="col-sm-2 control-label no-padding-right">
                <?php echo $this->lang->line("PAYMENTHEAD"); ?>
                </label>
            <div class="col-sm-10 purchaseinvlabel">
<?php echo $paymentdetails->PAYMENTHEAD_ID; ?>
                <input type="hidden" id="paymentheads" name="paymentheads" value="<?php echo $paymentdetails->PAYMENTHEAD_ID; ?>" />
            </div>
        </div>
        <?php
    } else {
        ?>
    <div class="form-group" id="paymenthead">
        <label for="inputEmail3" class="col-sm-2 control-label no-padding-right">
        <?php echo $this->lang->line("PAYMENTSTO"); ?>
        </label>
        <div class="col-sm-10">
            <select id="paymentheads" name="paymentheads" style="width:100%" required onchange="paymenttypeselectcheck(this.value)">
                <option value=""><?php echo $this->lang->line("SELECTPAYMENTHEAD"); ?></option>
                <?php
                foreach ($paymentheads as $key => $value) {
                    if (isset($paymentdetails) && $paymentdetails->PAYMENTHEAD_ID == $value->ID) $selectvar1 = 'selected';
                    else $selectvar1 = '';
                    echo "<option value=\"" . $value->ID . "\" " . $selectvar1 . " />" . $value->PAYMENTHEAD;
                }
                ?>
            </select>
    <div id="paymentheadtaxrate" style="<?php if(isset($paymentdetails) && isset($taxrateamount)) { ?> display: block;
        <?php } else { ?>display: none;<?php } ?>font-size: 13px;font-weight: bold;margin-top: 9px;"><?php echo $this->lang->line("TAXRATE"); ?>
 <?php if(isset($taxrateamount)) echo $taxrateamount; ?> %</div>
        </div>
    </div>
<?php } ?>
    <div class="form-group" id="normalpaymentamountdiv" <?php if((isset($paymentdetails) && 
            ($paymentdetails->PAYMENTHEAD_ID=="PURCHASE" || $paymentdetails->PAYMENTHEAD_ID=="PURCHASERETURN"))
            || !(isset($paymentdetails))) { ?> style="display: none;" <?php } ?>>
        <label for="inputPassword3" class="col-sm-2 control-label no-padding-right"><?php echo $this->lang->line("AMOUNT"); ?></label>
        <div class="col-sm-5">
            <input id="payamount" type="number" class="form-control" name="payamount"
                   placeholder="<?php echo $this->lang->line("AMOUNTTOPAY"); ?>" required step="any" value="<?php if(isset($paymentdetails)) 
                       echo $this->formatslist->formatCurrency($amtwithouttax); ?>"
                       onchange="amountpaymenttax('PAYAMOUNT')" />
        </div>
        <div class="col-sm-5">
            <input id="finalamount" type="number" class="form-control" name="finalamount"
                   placeholder="<?php echo $this->lang->line("AMOUNTPLUSTAX"); ?>"
                   required step="any" value="<?php echo (isset($paymentdetails)) ? $this->formatslist->formatCurrency($paymentdetails->AMOUNT) : ''; ?>"
                   onchange="amountpaymenttax('TOTALAMOUNT')" />
        </div>
    </div>

    <div class="form-group" id="purchasepaymentamountdiv" <?php if((isset($paymentdetails) && $paymentdetails->PAYMENTHEAD_ID!="PURCHASE"
            && $paymentdetails->PAYMENTHEAD_ID!="PURCHASERETURN") || !(isset($paymentdetails))) { ?> style="display: none;" <?php } ?>>
        <label for="inputPassword3" class="col-sm-2 control-label no-padding-right"><?php echo $this->lang->line("AMOUNT"); ?></label>
        <div class="col-sm-10">
            <input id="amount" type="number" class="form-control" name="amount" placeholder="<?php echo $this->lang->line("AMOUNT"); ?>"
                   required step="any" value="<?php echo (isset($paymentdetails)) ? $this->formatslist->formatCurrency($paymentdetails->AMOUNT) : ''; ?>" />
        </div>
    </div>
                                                        
                                                 

    <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label no-padding-right"><?php echo $this->lang->line("COMMENTS"); ?></label>
        <div class="col-sm-10">
            <textarea id="comments" name="comments" class="form-control" placeholder="<?php echo $this->lang->line("COMMENTS"); ?>"><?php echo (isset($paymentdetails)) ? $paymentdetails->COMMENTS : ''; ?></textarea>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-success shiny">
                <span class="fa fa-check"></span> <?php echo $this->lang->line("SAVE"); ?>
            </button>
            <a id="close" href="<?php echo site_url('finance/payments') ?>" class="btn btn-danger shiny">
                <span class="fa fa-close"></span>
                <?php echo $this->lang->line("CLOSE"); ?>
            </a>
        </div>
    </div>
</div>
        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" id="invoicelistbtn" style="display:none;">
            <?php echo $this->lang->line("INVOICELIST"); ?></button>
        <!-- Modal -->
        <div id="myModal" class="modal fade" role="dialog">
            <div style="background: #2dc3e8;"></div>
            <div class="modal-dialog">
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="widget-header bg-blue">
                        <span class="widget-caption"><?php echo $this->lang->line("PURCHASEINVOICEPAYMENT"); ?></span>
                    </div>
                    <div class="modal-body" style="min-height: 80px;">
                        <div class="table-toolbar col-xs-12 col-md-12">
<div class="input-group" style="width: 100%;">
    <input name="supplierlistselect" class="form-control" id="supplierlistselect"
           placeholder="<?php echo $this->lang->line("ENTERSUPPLIERNAME"); ?>" />
<span class="input-group-btn">
    <a href="#" class="btn btn-sky shiny" data-toggle="modal" data-target="#MYMODALLEADCUSTOMER" id="BTNLEADCUSTOMERLIST"><i class="fa fa-search"></i> Browse</a>
</span>
                        </div></div>
                        <div id="ajaxtablecontent"></div>
                    </div>
                </div>
            </div>
        </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<div id="MYMODALLEADCUSTOMER" class="modal fade" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4><i class="fa fa-users purple"></i> Suppliers List</h4>
            </div>
            <div class="modal-body" style="padding: 12px;">
                <table class="table table-bordered table-hover table-striped" id="leadsupplierdatatable">
                    <thead class="bordered-blueberry">
                        <tr role="row">
                            <th><?php echo $this->lang->line("NAME"); ?></th>
                            <th><?php echo $this->lang->line("SEARCHKEY"); ?></th>
                            <th><?php echo $this->lang->line("TAXID"); ?></th>
                            <th><?php echo $this->lang->line("EMAIL"); ?></th>
                            <th><?php echo $this->lang->line("PHONE"); ?></th>
                            <th><?php echo $this->lang->line("CURRENTDEBT"); ?></th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>

<script src="<?php echo base_url(); ?>assets/js/validation/bootstrapValidator.js"></script>
<script type="text/javascript">
    var floatpointnum = '<?php echo $this->formatslist->getCurrencyDecimalPonts(); ?>';
</script>
<script type="text/javascript">
    $('#togglingForm').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        submitHandler: function (validator, form, submitButton) {
            // Do nothing
        },
        fields: {
            TRANSACTION_DATE: {
                validators: {
                    notEmpty: {
                        message: '<?php echo $this->lang->line("PLEASESELECTDATE"); ?>'
                    }
                }
            },
            account: {
                validators: {
                    notEmpty: {
                        message: '<?php echo $this->lang->line("SELECTACCOUNT"); ?>'
                    }
                }
            },
            invoicelist: {
                validators: {
                    notEmpty: {
                        message: '<?php echo $this->lang->line("SELECTINVOICE"); ?>'
                    }
                }
            },
            amount: {
                validators: {
                    notEmpty: {
                        message: '<?php echo $this->lang->line("PLEASEENTERAMOUNT"); ?>'
                    }
                }
            },
        }
    })
            .find('button[data-toggle]')
            .on('click', function () {
                var $target = $($(this).attr('data-toggle'));
                $target.toggle();
                if (!$target.is(':visible')) {
                    $('#togglingForm').data('bootstrapValidator').disableSubmitButtons(false);
                }
            });
</script>
<script type="text/javascript">
    // Get Balance of the Account
    function getBalance(accid) {
        $.ajax({
            method: "POST",
            url: "<?php echo base_url('finance/Deposits/get_account'); ?>",
            data: {
                account: accid
            }
        }).done(function (msg) {
            if(msg!='') {
                $("#available_balance").show();
                $("#avbalamount").html(msg);
            } else {
                $("#available_balance").hide();
            }
        });
        $(".combobox-container input").val('');
        $("#ajaxtablecontent").html('');
    }
    //set amount defualt
    $("#invoicelist").change(function () {
        $("#amount").val($(this).find(':selected').attr('data-amount'));
    });

</script>
<script type="text/javascript">
    $(document).on('change', '#myInput', function(){
        var value = $(this).val().toLowerCase();
        $("#myTable tr").filter(function () {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
    });
    
    function amounttransfer(txtid, txtamount) {
        $("#invamount_" + txtid).val(txtamount);
        var totamount = sumupamount();
        $("#totalspan").html(totamount);
    }

    function sumupamount() {
        var totamount = 0;
        $("input[class='invamount']").each(function () {
            if (!isNaN(parseFloat($(this).val()))) {
                totamount = totamount + parseFloat($(this).val());
            }
        });
        return totamount.toFixed(floatpointnum);
    }

    function finishassignprocess() {
        var totamount = sumupamount();
        $("#amount").val(totamount);
        $('#myModal').modal('hide');
    }

    $(document).on('change', "input[data-id='txtprreturn']", function(){
        var curval = -1 * Math.abs(parseFloat($(this).val()));
        if (!isNaN(curval)) {
            $(this).val(curval);
        }
        var totamount = sumupamount();
        $("#totalspan").html(totamount);
    });
    
    $(document).on('change', '.invamount', function(){
        var totamount = sumupamount();
        $("#totalspan").html(totamount);
    });
    
    function paymenttypeselectcheck(accid) {
        if (accid) {
            if (accid == 'PURCHASE' || accid == 'PURCHASERETURN') {
                $("#normalpaymentamountdiv").hide();
                $("#purchasepaymentamountdiv").show();
                $("#paymentheadtaxrate").html("");
                $("#paymentheadtaxrate").hide();
                $("#invoicelistbtn").click();
            } else {
                $("#normalpaymentamountdiv").show();
                $("#purchasepaymentamountdiv").hide();
                amountpaymenttax('PAYAMOUNT');
            }
        }
        $("#supplierlistselect").val('');
        $("#ajaxtablecontent").html('');
    }
    
    function amountpaymenttax(flag=''){
        var paymentId = $("#paymentheads").val();
        $("#paymentheadtaxrate").html("");
        $("#paymentheadtaxrate").hide();
        if(paymentId!='PURCHASE' && paymentId!='PURCHASERETURN'){
            $.ajax({
                method: "POST",
                url: "<?php echo base_url('finance/Paymentshead/getPaymentheadtaxcat'); ?>",
                data: {
                    paymentId: paymentId
                }
            }).done(function (msg) {
                $("#paymentheadtaxrate").show();
                if(msg!='notaxcategory') {
                    var taxamount   =   getTaxrate(msg);
                    var taxrate     =   (taxamount*100);
                    $("#paymentheadtaxrate").show();
                    $("#paymentheadtaxrate").html("Tax Rate : "+taxrate+" %");
                } else {
                    var taxamount   =   0;
                }
                if(taxamount!='notaxcategory') {
                    if(flag=='PAYAMOUNT') {
                        var amount      =   $("#payamount").val();
                        var payamount=amount*(1+taxamount);
                        $("#finalamount").val(payamount);
                    } else if(flag=='TOTALAMOUNT') {
                        var amount      =   $("#finalamount").val();
                        var payamount=amount/(1+taxamount);
                        $("#payamount").val(payamount);
                    }
                } else {
                    var amount      =   $("#payamount").val();
                    $("#finalamount").val(amount);
                }
            });
        }
    }

    function getTaxrate(taxcatID=''){
        var obj = <?php echo json_encode($alltaxes); ?>;
        for (var i = 0; i < obj.length; i++){
            if (obj[i].CATID == taxcatID){
                var taxrate    =   obj[i].RATE;
            }
        }
        taxrate =   taxrate/100;
        return taxrate;
    }
    
    function selectsupplier(supplierId,suppliername=''){
        var paymentheads    =   $("#paymentheads").val();
        var flpurchase;
        if(paymentheads=='PURCHASE' && paymentheads!='PURCHASERETURN')
            flpurchase='P';
        else if(paymentheads=='PURCHASERETURN')
            flpurchase='PR';
        $("#ajaxtablecontent").html('<div style="text-align:center;font-size: 18px;">Loading Pending Invoices...</div><div style="text-align:center;"><img src="<?php echo base_url('assets/img/ajax-loader.gif'); ?>" /></div>');
        $.ajax({
            method: "POST",
            url: "<?php echo base_url('finance/Payments/viewPurchaseInvoicePayment'); ?>",
            data: {
                supplierId: supplierId,
                flpurchase: flpurchase
            }
        }).done(function (msg) {
            $("#ajaxtablecontent").html(msg);
            if(suppliername) {
                $("#supplierlistselect").val(suppliername);
            }
            $("#MYMODALLEADCUSTOMER .close").click();
        });
    }
    
</script>
<script type="text/javascript">
  $( function() {
    $( "#supplierlistselect" ).autocomplete({
      source: function( request, response ) {
        $.ajax( {
          url: "<?php echo base_url('finance/Payments/suppliersautocomplete'); ?>",
          dataType: "json",
          data: {
            term: request.term
          },
          success: function( data ) {
            response( data );
          }
        } );
      },
      minLength: 2,
      select: function( event, ui ) {
        selectsupplier(ui.item.id);
      }
    });
  });
  $(document).ready(function() {
    var table = $('#leadsupplierdatatable').DataTable( {
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": base_url+"finance/payments/leadsupplierlistall",
        "oLanguage": {
            "sEmptyTable":     "<?php echo $this->lang->line("NOTHINGFOUND"); ?>",
            "sInfo":           "<?php echo $this->lang->line("SHOWINGPAGE"); ?> _START_ <?php echo $this->lang->line("TO"); ?> _END_ <?php echo $this->lang->line("OF"); ?> _TOTAL_ <?php echo $this->lang->line("ENTRIES"); ?>",
            "sInfoEmpty":      "<?php echo $this->lang->line("SHOWINGPAGE"); ?> 0 <?php echo $this->lang->line("TO"); ?> 0 <?php echo $this->lang->line("OF"); ?> 0 <?php echo $this->lang->line("ENTRIES"); ?>",
            "sInfoPostFix":    "",
            "sInfoThousands":  ",",
            "sLengthMenu":     "<?php echo $this->lang->line("SHOW"); ?> _MENU_ <?php echo $this->lang->line("ENTRIES"); ?>",
            "sLoadingRecords": "<?php echo $this->lang->line("LOADING"); ?>",
            "sProcessing":     "<?php echo $this->lang->line("PROCESSING"); ?>",
            "sSearch":         "",
            "sZeroRecords":    "<?php echo $this->lang->line("NORECORDSAVAILABLE"); ?>",
            "oPaginate": {
                "sFirst":    "<?php echo $this->lang->line("FIRST"); ?>",
                "sLast":     "<?php echo $this->lang->line("LAST"); ?>",
                "sNext":     "<?php echo $this->lang->line("NEXT"); ?>",
                "sPrevious": "<?php echo $this->lang->line("PREVIOUS"); ?>"
            }
        },
        "columnDefs" : [ 
        ],
    });
});
  </script>