%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /home/opti/workflow/src/views/account/invoice/
Upload File :
Create Path :
Current File : /home/opti/workflow/src/views/account/invoice/addInvoice.ejs

<% include ../../partials/header %>



<% include ../../partials/sidebar %>


<style>
    #ui-id-1{
        background-color: #FFFFFF;
        width: fit-content
    }
</style>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">


<div class="app-content content">
    <div class="content-wrapper">
        <div class="content-header row">
        </div>
        <div class="content-body">
            <!-- Breadcrumb starts-->
            <div class="content-header-left col-md-6 col-12 mb-2">
                    <% if(locals.invoice){ %>
                        <h3 class="content-header-title">Update Invoice <%= invoice.referenceNumber %></h3>
                    <% } else { %>
                        <h3 class="content-header-title">Create New Invoice</h3>
                    <% } %>
                <div class="row breadcrumbs-top">
                    <div class="breadcrumb-wrapper col-12">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="/">Dashboard</a>
                                <li class="breadcrumb-item"><a href="/accounts/invoices/">Invoices</a>
                            </li>
                            <% if(locals.invoice){ %>
                                <li class="breadcrumb-item active">Update Invoice <%= invoice.referenceNumber %></li>
                            <% } else { %>
                            <li class="breadcrumb-item active">Create New Invoice</li>
                            <% } %>
                        </ol>
                    </div>
                </div>
            </div>
            <!-- Breadcrumb ends-->

            <section class="row">
                <div class="col-12">
                  <div class="card">
                    <div class="card-head">

                    </div>
                    <div class="card-content">
                        <input type="hidden" readonly id="invoiceUuid" value="<%= locals.invoice %>" >
                        <% if( locals.invoice ){ %>
                            <div class="card-body">
                                <form action="/accounts/invoices/create" method="POST"  enctype="multipart/form-data" id="invoiceForm">
                                    <input type="hidden" name="invoiceUuid" value="<%= invoice.uuid %>" readonly >
                                    <input type="hidden" name="_csrf" value="<%= _csrfToken %>">


                                    <!-- <div class="modal-header">
                                    <h4 class="modal-title" id="myModalLabel16">Create New Invoice</h4>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">×</span>
                                    </button>
                                    </div> -->
                                    <div class="modal-body">

                                    <!-- <div class="row col-12"> -->
                                        <div class=" col-lg-12">

                                            <div class="alert alert-info" role="alert">
                                                <label for="typeCategoryId">Invoice Type Category</label>
                                                <select name="typeCategoryId" id="typeCategoryId" class="form-control" required>
                                                <option  class="form-control" >Select Invoice Type Category</option>
                                                <option value="1" class="form-control" <% if(invoice.invoiceCategoryId == 1) { %> selected <% } %>>Sales Invoice</option>
                                                <option value="2" class="form-control" <% if(invoice.invoiceCategoryId == 2) { %> selected <% } %>>Purchase Invoice</option>
                                                </select>
                                            </div>
                                            <div class="card-body">
                                                <h5>
                                                </h5>
                                                <fieldset>
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="invoiceType">Invoice Type :</label>
                                                                <select class="form-control" id="invoiceType" name="invoiceTypeId" required>
                                                                <!-- <option value="1">Invoice type one</option>
                                                                <option value="2">Invoice type two</option> -->
                                                                </select>

                                                            </div>
                                                            <div class="form-group">
                                                                <label for="fromContact" id="contactLabel">From Contact :</label>
                                                                <input type="text" class="form-control" id="party"  required value=""> <!-- javascript is used to change this to partyToId as the need be-->
                                                                <input type="hidden" id="partyId"  <% if(invoice.invoiceCategoryId == 1) { %> name="partyFromId" value="<%= invoice.partyFromId %>" <% } else { %> name="partyToId" value="<%= invoice.partyToId %>"<% } %> >

                                                            </div>
                                                            <!-- <div class="form-group">
                                                                <label for="billingAccount">Billing Account :</label>
                                                                <select class="form-control" id="billingAccountId" name="billingAccountId" required>
                                                                <option value="1">Billing Account 1</option>
                                                                <option value="2">Billing Account 2</option>
                                                                </select>
                                                            </div> -->
                                                            <input type="hidden" name="billingAccount" value="1">
                                                            <div class="form-group">
                                                                <label for="currencyId">Currency :</label>
                                                                <select class="form-control" id="currencyId" name="currencyId" required>
                                                                <% currencies.forEach( currency =>{ %>
                                                                    <option value="<%= currency.id %>"><%= currency.code %> </option>

                                                                <% }) %>
                                                                </select>
                                                            </div>
                                                            <!-- <div class="form-group">
                                                                <label for="referenceNumber">Reference Number :</label>
                                                                <input type="text" class="form-control" id="referenceNumber" name="referenceNumber" required>

                                                            </div> -->
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="currencyId">Terms :</label>
                                                                <select class="form-control" id="termsId" name="termsId" required>
                                                                <option value="1">Due On Receipt </option>
                                                                <option value="2">Next Day </option>
                                                                </select>
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="dueDate">Invoice Date :</label>
                                                                <input type="date" id="invoiceDate" class="form-control" name="invoiceDate" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-title="Invoice Date" data-original-title="" title="" required value="<%= invoice.invoiceDate %>">
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="dueDate">Due Date :</label>
                                                                <input type="date" id="dueDate" class="form-control" name="dueDate" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-title="Due Date" data-original-title="" title="" required value="<%= invoice.dueDate %>">
                                                            </div>

                                                            <!-- <div class="form-group">
                                                                <label for="description">Description :</label>
                                                                <textarea name="description" id="description" rows="4" class="form-control"></textarea>
                                                            </div> -->
                                                            <div class="form-group">
                                                                <label for="invoiceMessage">Invoice Message :</label>
                                                                <textarea name="invoiceMessage" id="invoiceMessage" rows="4" class="form-control"><%= invoice.invoiceMessage %></textarea>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </fieldset>
                                                <div id="items">
                                                    <div class="row" id="itemsHeader">
                                                        <!-- <span class="col-1">S/N</span> -->
                                                        <span class="col-5 center-block "><center>Name/Description</center></span>
                                                        <span class="col-2 center-block"><center>Price</center></span>
                                                        <span class="col-2"><center>Qty</center></span>
                                                        <span class="col-2"><center>Amount</center></span>
                                                        <span class="col-1"></span>
                                                    </div>
                                                </div>

                                                <div class="form-group col-12 mb-2 repeater-default">
                                                        <div data-repeater-list="items">
                                                            <% invoice.invoiceItems.forEach(item =>{ %>

                                                                <div data-repeater-item>
                                                                        <div class="row mb-1">

                                                                            <div class="col-5">
                                                                                <input type="text" class="form-control names" name="name" required placeholder="Item Name" value="<%= item.name %>">
                                                                                <textarea placeholder="Item Description" name="description" rows="4" class="form-control descriptions"> <%= item.description %></textarea>
                                                                            </div>
                                                                            <div class="col-2">
                                                                                <input type="number" class="form-control prices" name="price" required placeholder="0.00" onkeyup="calculateItemTotal(this)" min="0.00" onmousewheel="calculateItemTotal(this)" value="<%= item.price %>">
                                                                            </div>
                                                                            <div class="col-2">
                                                                                <input type="number" class="form-control quantities" name="quantity" required placeholder="1"  onkeyup="calculateItemTotal(this)" min="1" onmousewheel="calculateItemTotal(this)"  value="<%= item.quantity %>">
                                                                            </div>
                                                                            <div class="col-2">
                                                                                <center><span class="center-block amounts" name="amount"> <%= parseFloat(item.price * item.quantity).toFixed(2) %></span></center>
                                                                            </div>
                                                                            <div class="col-1 col-xl-1">
                                                                                    <button type="button" class="btn btn-danger" data-repeater-delete> <i class="ft-x"></i></button>
                                                                        </div>
                                                                        </div>
                                                                    </div>
                                                            <% }) %>

                                                        </div>
                                                        <button type="button" data-repeater-create class="btn btn-primary">
                                                                <i class="la la-plus fa-2x"></i>
                                                        </button>
                                                </div>

                                                <input type="hidden" name="allNames" id="allNames">
                                                <input type="hidden" name="allDescriptions" id="allDescriptions">
                                                <input type="hidden" name="allPrices" id="allPrices">
                                                <input type="hidden" name="allQuantities" id="allQuantities">
                                                <input type="hidden" name="totalAmount" id="totalAmount">

                                                <div class="col-md-5 col-sm-12 float-right">
                                                <p class="lead">Total due</p>
                                                <div class="table-responsive">
                                                    <table class="table">
                                                    <tbody>
                                                        <tr>
                                                        <td>Sub Total</td>
                                                        <td class="text-right"><span class="currencyLabel">$ </span> <span id="subTotal"><%= parseFloat(invoice.amount).toFixed(2) %></span></td>
                                                        </tr>
                                                        <tr>
                                                        <td>TAX (0%)</td>
                                                        <td class="text-right"><span class="currencyLabel">$</span> <span id="tax">00.00</span></td>
                                                        </tr>
                                                        <tr>
                                                            <td class="text-bold-800">Balance Due</td>
                                                            <!-- <td class="text-bold-800">Total</td> -->
                                                            <td class="text-bold-800 text-right pink"> <span class="currencyLabel">$</span> <span id="total"><%= parseFloat(invoice.amount).toFixed(2) %></span></td>
                                                        </tr>

                                                        <!-- <tr class="bg-grey bg-lighten-4">
                                                            <td class="text-bold-800">Balance Due</td>
                                                            <td class="text-bold-800 text-right pink"><span class="currencyLabel">$</span> <span id="balanceDue">00.00</span></td>
                                                        </tr> -->
                                                    </tbody>
                                                    </table>
                                                </div>
                                                <!-- <div class="text-center">
                                                    <p>Authorized person</p>
                                                    <img src="../../../app-assets/images/pages/signature-scan.png" alt="signature" class="height-100">
                                                    <h6>Amanda Orton</h6>
                                                    <p class="text-muted">Managing Director</p>
                                                </div> -->
                                                </div>

                                            </div>


                                        </div>

                                    <!-- </div> -->
                                    </div>
                                    <div class="modal-footer row col-12">
                                    <button type="button" class="btn grey btn-secondary" data-dismiss="modal">Close</button>
                                    <% if(locals.invoice){ %>
                                        <input type="submit" class="btn btn-primary" value="Update Invoice"  />
                                    <% } else { %>
                                        <input type="submit" class="btn btn-primary" value="Create Invoice"  />
                                    <% } %>
                                    </div>
                                </form>
                            </div>
                        <%} else { %>
                            <div class="card-body">
                                <form action="/accounts/invoices/create" method="POST"  enctype="multipart/form-data" id="invoiceForm">

                                    <!-- <div class="modal-header">
                                    <h4 class="modal-title" id="myModalLabel16">Create New Invoice</h4>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">×</span>
                                    </button>
                                    </div> -->
                                    <div class="modal-body">

                                    <!-- <div class="row col-12"> -->
                                        <div class=" col-lg-12">

                                            <div class="alert alert-info" role="alert">
                                                <label for="typeCategoryId">Invoice Type Category</label>
                                                <select name="typeCategoryId" id="typeCategoryId" class="form-control" required>
                                                <option  class="form-control" >Select Invoice Type Category</option>
                                                <option value="1" class="form-control" >Sales Invoice</option>
                                                <option value="2" class="form-control" >Purchase Invoice</option>
                                                </select>
                                            </div>
                                            <div class="card-body">
                                                <h5>
                                                </h5>
                                                <fieldset>
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="invoiceType">Invoice Type :</label>
                                                                <select class="form-control" id="invoiceType" name="invoiceTypeId" required>
                                                                <!-- <option value="1">Invoice type one</option>
                                                                <option value="2">Invoice type two</option> -->
                                                                </select>

                                                            </div>
                                                            <div class="form-group">
                                                                <label for="fromContact" id="contactLabel">From Contact :</label>
                                                                <input type="text" class="form-control" id="party"  required> <!-- javascript is used to change this to partyToId as the need be-->
                                                                <input type="hidden" name="partyFromId" id="partyId" value="0">

                                                            </div>
                                                            <!-- <div class="form-group">
                                                                <label for="billingAccount">Billing Account :</label>
                                                                <select class="form-control" id="billingAccountId" name="billingAccountId" required>
                                                                <option value="1">Billing Account 1</option>
                                                                <option value="2">Billing Account 2</option>
                                                                </select>
                                                            </div> -->
                                                            <input type="hidden" name="billingAccount" value="1">
                                                            <div class="form-group">
                                                                <label for="currencyId">Currency :</label>
                                                                <select class="form-control" id="currencyId" name="currencyId" required>
                                                                <% currencies.forEach( currency =>{ %>
                                                                    <option value="<%= currency.id %>" ><%= currency.code %> </option>

                                                                <% }) %>
                                                                </select>
                                                            </div>
                                                            <!-- <div class="form-group">
                                                                <label for="referenceNumber">Reference Number :</label>
                                                                <input type="text" class="form-control" id="referenceNumber" name="referenceNumber" required>

                                                            </div> -->
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="form-group">
                                                                <label for="currencyId">Terms :</label>
                                                                <select class="form-control" id="termsId" name="termsId" required>
                                                                <option value="1">Due On Receipt </option>
                                                                <option value="2">Next Day </option>
                                                                </select>
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="dueDate">Invoice Date :</label>
                                                                <input type="date" id="invoiceDate" class="form-control" name="invoiceDate" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-title="Invoice Date" data-original-title="" title="" required>
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="dueDate">Due Date :</label>
                                                                <input type="date" id="dueDate" class="form-control" name="dueDate" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-title="Due Date" data-original-title="" title="" required>
                                                            </div>

                                                            <!-- <div class="form-group">
                                                                <label for="description">Description :</label>
                                                                <textarea name="description" id="description" rows="4" class="form-control"></textarea>
                                                            </div> -->

                                                        </div>
                                                    </div>
                                                </fieldset>
                                                <div class="form-group">
                                                        <label for="invoiceMessage">Invoice Message :</label>
                                                        <textarea name="invoiceMessage" id="invoiceMessage" rows="4" class="form-control"></textarea>
                                                    </div>
                                                <div id="items">
                                                    <div class="row" id="itemsHeader">
                                                        <!-- <span class="col-1">S/N</span> -->
                                                        <span class="col-5 center-block "><center>Name/Description</center></span>
                                                        <span class="col-2 center-block"><center>Price</center></span>
                                                        <span class="col-2"><center>Qty</center></span>
                                                        <span class="col-2"><center>Amount</center></span>
                                                        <span class="col-1"></span>
                                                    </div>
                                                </div>

                                                <div class="form-group col-12 mb-2 repeater-default">
                                                        <div data-repeater-list="items">
                                                        <div data-repeater-item>
                                                            <div class="row mb-1">

                                                                <div class="col-5">
                                                                    <input type="text" class="form-control names" name="name" required placeholder="Item Name">
                                                                    <textarea placeholder="Item Description" name="description" rows="4" class="form-control descriptions"></textarea>
                                                                </div>
                                                                <div class="col-2">
                                                                    <input type="number" class="form-control prices" name="price" required placeholder="0.00" onkeyup="calculateItemTotal(this)" min="0.00" onmousewheel="calculateItemTotal(this)">
                                                                </div>
                                                                <div class="col-2">
                                                                    <input type="number" class="form-control quantities" name="quantity" required placeholder="1" value="1"  onkeyup="calculateItemTotal(this)" min="1" onmousewheel="calculateItemTotal(this)">
                                                                </div>
                                                                <div class="col-2">
                                                                    <center><span class="center-block amounts" name="amount">0.00</span></center>
                                                                </div>
                                                                <div class="col-1 col-xl-1">
                                                                        <button type="button" class="btn btn-danger" data-repeater-delete> <i class="ft-x"></i></button>
                                                            </div>
                                                            </div>
                                                        </div>
                                                        </div>
                                                        <button type="button" data-repeater-create class="btn btn-primary">
                                                                <i class="la la-plus fa-2x"></i>
                                                        </button>
                                                </div>

                                                <input type="hidden" name="allNames" id="allNames">
                                                <input type="hidden" name="allDescriptions" id="allDescriptions">
                                                <input type="hidden" name="allPrices" id="allPrices">
                                                <input type="hidden" name="allQuantities" id="allQuantities">
                                                <input type="hidden" name="totalAmount" id="totalAmount">

                                                <div class="col-md-5 col-sm-12 float-right">
                                                <p class="lead">Total due</p>
                                                <div class="table-responsive">
                                                    <table class="table">
                                                    <tbody>
                                                        <tr>
                                                        <td>Sub Total</td>
                                                        <td class="text-right"><span class="currencyLabel">$ </span> <span id="subTotal">00.00</span></td>
                                                        </tr>
                                                        <tr>
                                                        <td>TAX (0%)</td>
                                                        <td class="text-right"><span class="currencyLabel">$</span> <span id="tax">00.00</span></td>
                                                        </tr>
                                                        <tr>
                                                            <td class="text-bold-800">Balance Due</td>
                                                            <!-- <td class="text-bold-800">Total</td> -->
                                                            <td class="text-bold-800 text-right pink"> <span class="currencyLabel">$</span> <span id="total">00.00</span></td>
                                                        </tr>

                                                        <!-- <tr class="bg-grey bg-lighten-4">
                                                            <td class="text-bold-800">Balance Due</td>
                                                            <td class="text-bold-800 text-right pink"><span class="currencyLabel">$</span> <span id="balanceDue">00.00</span></td>
                                                        </tr> -->
                                                    </tbody>
                                                    </table>
                                                </div>
                                                <!-- <div class="text-center">
                                                    <p>Authorized person</p>
                                                    <img src="../../../app-assets/images/pages/signature-scan.png" alt="signature" class="height-100">
                                                    <h6>Amanda Orton</h6>
                                                    <p class="text-muted">Managing Director</p>
                                                </div> -->
                                                </div>

                                            </div>


                                        </div>

                                    <!-- </div> -->
                                    </div>
                                    <div class="modal-footer row col-12">
                                    <button type="button" class="btn grey btn-secondary" data-dismiss="modal">Close</button>
                                    <input type="submit" class="btn btn-primary" value="Create Invoice"  />
                                    </div>
                                </form>
                            </div>
                        <% } %>
                    </div>
                  </div>
                </div>
              </section>



            <div class="modal-dialog modal-lg" role="document">


             </div>



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

<!-- ////////////////////////////////////////////////////////////////////////////-->

<!---////////////////////////////////////////-->
<!-----Modal for creating new flow-->


<% include ../../partials/footer %>
 <!-- <script src="/app-assets/js/scripts/pages/invoices/s-list.js"/> -->
 <script src="/app-assets/vendors/js/forms/repeater/jquery.repeater.min.js"></script>
 <script src="/app-assets/js/scripts/forms/form-repeater.js" type="text/javascript"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>
<script >
fetchedContacts = [];
    $(document).ready(function() {

     $("#typeCategoryId").change(function() {
        $('#spinnerContainer').addClass('show');
         var typeCategoryId = $("#typeCategoryId option:selected").val();

         console.log(typeCategoryId);

         if(isNaN(typeCategoryId)){
             $('#invoiceType').empty();
         }

         $.ajax({
             type: 'POST',
             url: '/accounts/invoices/getTypes',
             dataType: 'json',
             data: { typeCategoryId: typeCategoryId },
             success: function(data) {
                //  console.log(data);
                 $('#invoiceType').empty();
                 $('#invoiceType').append('<option value="">Select Invoice Type</option>');
                 for(row in data) {
                     if(data[row]._productId !== null){
                         $('#invoiceType').append($('<option></option>').attr('value', data[row].id).text(data[row].typeName));
                     }
                 }

                 if(typeCategoryId == 2){ //its purchase
                    $('#contactLabel').html("To Contact");
                    $("#partyId").attr('name', "partyToId")

                 }else{
                    $('#contactLabel').html("From Contact");
                    $("#partyId").attr('name', "partyFromId");
                 }
				$('#spinnerContainer').removeClass('show');

             },
             error: function(jqXHR, textStatus, errorThrow) {
				$('#spinnerContainer').removeClass('show');
                 // $.alert(errorThrow);
             }
         });

     });

    $('#party').autocomplete({

        source: function(request, response) {
            // console.log(request.term);
            $.ajax({
            url: `/accounts/contact/autocomplete`,
            type: 'POST',
            dataType: 'json',
            // data: {
            // 	q: request.term
            // },
            data : { contact_query: request.term,  "_token": "{{ csrf_token() }}"},
            success: function(data) {
                // data = JSON.parse(res);
                // console.log(data)
                fetchedContacts = []  //keep the fetched data to see if user selects/input a value that';s not from the fetched data
                data = data.map((value)=>{
                    fetchedContacts.push(value.name)
                    return {
                        // label: `<a href="">${value.name}</a>`,
                        label: value.name,
                        // contactName: value.name,
                        // value: JSON.stringify([value.contactType, value.id]),
                        value1: JSON.stringify({contactType:value.contactType, id: value.id})
                    };
                })

                response(data);
            }
            });
        },
        minLength: 2,
        select: function(event, ui) {
            $("#party").val(ui.item.value)
            $("#partyId").val(ui.item.value1)

            // console.log($("#partyId").val())

        },
        open: function() {

            // $(this).removeClass('ui-corner-all').addClass('ui-corner-top');
            $(this).addClass('dropdown show');
            // $(this).addClass('open_categories')
            $(".ui-menu-item").addClass('dropdown-item')
            // $(".ui-menu").addClass('dropdown find active visible')


        },
        close: function() {
            $(this).removeClass('ui-corner-top').addClass('ui-corner-all');
        }
    });

    $("#invoiceForm").on('submit', (event)=>{

        console.log(fetchedContacts, $("#party").val())

        if(!fetchedContacts.includes($("#party").val())){
            event.preventDefault();
            return $.confirm({
                        title: '<div style="color:green">Error</div>',
                        content: 'Selected contact does not exist',
                        buttons: {
                            ok: function () {
                                // location.reload(true)
                            },
                        }
                    });
        }
        nameData = [];
        priceData = [];
        descriptionData  = [];
        quantityData = [];
        prices  = $('.prices');
        quantities  = $('.quantities');
        amounts  = $('.amounts');
        names  = $('.names');
        descriptions  = $('.descriptions');
        var amount = 0;
        prices.each((index, element) => {
            var price = $(element).val();
            var quantity = $(quantities[index]).val();
            var description = $(descriptions[index]).val();
            var name = $(names[index]).val();

            nameData.push(name)
            priceData.push(price)
            descriptionData.push(description)
            quantityData.push(quantity)
            // nameData.push(name)

            amount = amount + calculateTotal(index);

        });


        $("#allNames").val(JSON.stringify(nameData));
        $("#allDescriptions").val(JSON.stringify(descriptionData));
        $("#allQuantities").val(JSON.stringify(quantityData));
        $("#allPrices").val(JSON.stringify(priceData));
        $("#totalAmount").val(amount);

        console.log($("#partyId").name())
        console.log($("#typeCategoryId").val())

        // event.preventDefault()

    })
});

    // $('.prices').on('keypress', (e,s)=>{
    //     // console.log($(this).val())
    //     console.log(e)
    // })

    function calculateItemTotal(e){
        if(isNaN($(e).val()))

            return $.confirm({
                        title: '<div style="color:green">Error</div>',
                        content: 'must be a valid number',
                        buttons: {
                            ok: function () {
                                //
                            },
                        }
                    });

        var total = 00;
        var tax = 00;
        var subTotal = 00;
        prices  = $('.prices');
        // quantities  = $('.quantities');not necessary
        amounts  = $('.amounts');

        prices.each((index, element) => {

            var amount = calculateTotal(index);
            console.log((amount))
            $(amounts[index]).html(parseFloat(amount).toFixed(2));

            total = total + amount;

            subTotal = subTotal + amount;

        });

        $("#total").html(parseFloat(total).toFixed(2))
        $("#subTotal").html(parseFloat(subTotal).toFixed(2))
    }

    function calculateTotal(index){

        prices  = $('.prices');
        quantities  = $('.quantities');
        var price = $(prices[index]).val();
        var quantity = $(quantities[index]).val();
        if(price =="")
            price = 0;
        if(quantity == "")
            quantity = 0;
        if(price != "" && quantity == ""){
            quantity = 1;
            $(quantities[index]).val(1)
        }

        return parseFloat(price).toFixed(2) * parseFloat(quantity).toFixed(2);
    }
</script>

<% if(locals.invoice){ %>
    <script >

        $('#spinnerContainer').addClass('show');

            var invoice = "<%= invoice %>";

            document.getElementById('invoiceDate').valueAsDate = new Date("<%= invoice.invoiceDate %>");
            document.getElementById('dueDate').valueAsDate = new Date("<%= invoice.dueDate %>");

            // if
                    if(parseInt("<%= invoice.invoiceCategoryId %>") == 2){ //its purchase
                        $('#contactLabel').html("To Contact");
                        $("#partyId").attr('name', "partyToId")

                    }else{
                        $('#contactLabel').html("From Contact");
                        $("#partyId").attr('name', "partyFromId");
                    }

            //get contact
            $.ajax({
                type: 'POST',
                url: '/accounts/getInvoiceContact',
                dataType: 'json',
                data: { partyFromId: "<%= invoice.partyFromId %>", partyToId: "<%= invoice.partyToId %>"},
                success: function(data) {
                    // console.log(data);
                    $('#party').val(data.name)
                    fetchedContacts.push(data.name);
                    $('#partyId').val(data.id)

                    $('#spinnerContainer').removeClass('show');
                    // $("#typeCategoryId").trigger('change');
                    // console.log("<%= invoice.invoiceCategoryId %>")
                    $("#typeCategoryId").val("<%= invoice.invoiceCategoryId %>").change();
                    $("#typeCategoryId").val("<%= invoice.invoiceCategoryId %>").trigger('change');
                    // $("#invoiceTypeId").val("<%= invoice.invoiceTypeId %>").change();

                },
                error: function(jqXHR, textStatus, errorThrow) {
                    $('#spinnerContainer').removeClass('show');
                    // $.alert(errorThrow);
                }
            });

            //get invoice types
            $("#typeCategoryId").val("<%= invoice.invoiceCategoryId %>").trigger('change');


    </script>

<% } else { %>
    <script>
        document.getElementById('invoiceDate').valueAsDate = new Date();

    </script>

<% } %>

Zerion Mini Shell 1.0