%PDF- %PDF-
Direktori : /home/opti/workflow/src/views/account/invoice/ |
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> <% } %>