Mini Shell
Mini Shell
| 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>
<% } %>