%PDF-
%PDF-
Mini Shell
Mini Shell
<% include ../../partials/header %>
<!-- ////////////////////////////////////////////////////////////////////////////-->
<% include ../../partials/sidebar %>
<link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/icheck/icheck.css">
<link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/icheck/custom.css">
<link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/checkboxes-radios.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 row">
<div class="content-header-left col-md-6 col-12 mb-2">
<h3 class="content-header-title mb-0">Invoice <%= invoice.referenceNumber %></h3>
<div class="row breadcrumbs-top">
<div class="breadcrumb-wrapper col-12">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/">Dashboard</a>
</li>
<li class="breadcrumb-item"><a href="/accounts/invoices">Invoices</a>
</li>
<li class="breadcrumb-item active">Invoice #<%= invoice.referenceNumber %>
</li>
</ol>
</div>
</div>
</div>
<div class="content-header-right text-md-right col-md-6 col-12">
<!-- <span class="dropdown">
<button id="invoiceStatus" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" class="btn btn-warning btn-sm dropdown-toggle dropdown-menu-right"><%= invoice.invoiceStatus.title %></button>
<span aria-labelledby="btnSearchDrop1" class="dropdown-menu mt-1 dropdown-menu-right">
<% invoiceStatus.forEach(status =>{ %>
<a href="#" class="dropdown-item"><i class="la la-random"></i> <%= status.title %> </a>
<% }) %>
</span>
</span> -->
<span class="btn btn-warning btn-sm"><%= invoice.invoiceStatus.title %></span>
</div>
</div>
<!-- Breadcrumb ends-->
<!-- <div class="text-center">
<a class="quick-btn text-red" href="/accounts/invoices/create" >
<i class="la la-plus fa-2x"></i>
<span>New Invoice</span>
</a>
</div> -->
<section class="card">
<%- format_messages(messages) %>
<div id="invoice-template" class="card-body">
<!-- Invoice Company Details -->
<div id="invoice-company-details" class="row">
<div class="col-md-6 col-sm-12 text-center text-md-left">
<div class="media">
<img src="../../../app-assets/images/logo/logo-80x80.png" alt="company logo" class=""
/>
<div class="media-body">
<ul class="ml-2 px-0 list-unstyled">
<li class="text-bold-800"><%= organization.name %></li>
<li><%= organization.address %></li>
<li><%= organization.city +", "+organization.state %>,</li>
<li><%= organization.country %></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 text-center text-md-right">
<h2>INVOICE</h2>
<p class="pb-3"># <%= invoice.referenceNumber %></p>
<ul class="px-0 list-unstyled">
<li>Amount</li>
<li class="lead text-bold-800">$ <%= invoice.amount %></li>
<li>Balance Due</li>
<li class="lead text-bold-800">$ <%= invoice.balanceDue %></li>
</ul>
</div>
</div>
<!--/ Invoice Company Details -->
<!-- Invoice Customer Details -->
<div id="invoice-customer-details" class="row pt-2">
<% if(invoice.invoiceCategoryId == 2){ //its purchase %>
<div class="col-sm-12 text-center text-md-left">
<p class="text-muted">Bill From</p>
</div>
<% if(invoice.contactTo.contactType == 1){//its person %>
<div class="col-md-6 col-sm-12 text-center text-md-left">
<ul class="px-0 list-unstyled">
<li class="text-bold-800"><span id="party1"><%= invoice.contactTo.person.firstName +" "+invoice.contactTo.person.lastName %></span></li>
<li><%= invoice.contactTo.person.address %></li>
<!-- <li>Albuquerque,</li> -->
<!-- <li>New Mexico-87102.</li> -->
</ul>
</div>
<% } else { %>
<div class="col-md-6 col-sm-12 text-center text-md-left">
<ul class="px-0 list-unstyled">
<li class="text-bold-800"><span id="party1"><%= invoice.contactTo.group.name %></span></li>
<li><%= invoice.contactTo.group.address %></li>
<!-- <li>Albuquerque,</li> -->
<!-- <li>New Mexico-87102.</li> -->
</ul>
</div>
<% } %>
<% } else { %>
<div class="col-sm-12 text-center text-md-left">
<p class="text-muted">Bill To</p>
</div>
<% if(invoice.contactFrom.contactType == 1){ //its person%>
<div class="col-md-6 col-sm-12 text-center text-md-left">
<ul class="px-0 list-unstyled">
<li class="text-bold-800 "><span id="party1"><%= invoice.contactFrom.person.firstName +" "+invoice.contactFrom.person.lastName %></span></li>
<li><%= invoice.contactFrom.person.address %></li>
<!-- <li>Albuquerque,</li> -->
<!-- <li>New Mexico-87102.</li> -->
</ul>
</div>
<% } else { %>
<div class="col-md-6 col-sm-12 text-center text-md-left">
<ul class="px-0 list-unstyled">
<li class="text-bold-800 "><span id="party1"><%= invoice.contactFrom.group.name %></span></li>
<li><%= invoice.contactFrom.group.address %></li>
<!-- <li>Albuquerque,</li> -->
<!-- <li>New Mexico-87102.</li> -->
</ul>
</div>
<% } %>
<% } %>
<div class="col-md-6 col-sm-12 text-center text-md-right">
<p>
<span class="text-muted">Invoice Date :</span><%= moment(invoice.invoiceDate).format("MMM Do YYYY") %></p>
<p>
<span class="text-muted">Terms :</span> Due on Receipt</p>
<p>
<span class="text-muted">Due Date :</span> <%= moment(invoice.dueDate).format("MMM Do YYYY") %></p>
</div>
</div>
<!--/ Invoice Customer Details -->
<!-- Invoice Items Details -->
<div id="invoice-items-details" class="pt-2">
<div class="row">
<div class="table-responsive col-sm-12">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Item & Description</th>
<th class="text-right">Price/Rate</th>
<th class="text-right">Quantiy/Hours</th>
<th class="text-right">Amount</th>
</tr>
</thead>
<tbody>
<% invoice.invoiceItems.forEach((item, index)=>{ %>
<tr>
<th scope="row"><%= index + 1 %></th>
<td>
<p><strong><%= item.name %></strong></p>
<p class="text-muted"><%= item.description %>.</p>
</td>
<td class="text-right">$ <%= item.price %></td>
<td class="text-right"><%= item.quantity %></td>
<td class="text-right">$ <%= item.price * item.quantity %></td>
</tr>
<% }) %>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-md-7 col-sm-12 text-center text-md-left">
<!-- <p class="lead">Payment Methods:</p>
<div class="row">
<div class="col-md-8">
<table class="table table-borderless table-sm">
<tbody>
<tr>
<td>Bank name:</td>
<td class="text-right">ABC Bank, USA</td>
</tr>
<tr>
<td>Acc name:</td>
<td class="text-right">Amanda Orton</td>
</tr>
<tr>
<td>IBAN:</td>
<td class="text-right">FGS165461646546AA</td>
</tr>
<tr>
<td>SWIFT code:</td>
<td class="text-right">BTNPP34</td>
</tr>
</tbody>
</table>
</div>
</div> -->
</div>
<div class="col-md-5 col-sm-12">
<p class="lead">Total due</p>
<div class="table-responsive">
<table class="table">
<tbody>
<tr>
<td>Sub Total</td>
<td class="text-right">$ <%= parseFloat(invoice.amount).toFixed(2) %></td>
</tr>
<tr>
<td>TAX (0%)</td>
<td class="text-right">$ 0.00</td>
</tr>
<!-- <tr>
<td class="text-bold-800">Total</td>
<td class="text-bold-800 text-right"> $ <%= invoice.amount %></td>
</tr> -->
<tr>
<td>Payment Made</td>
<td class=" text-right">(-) $ <span id="paymentMade"><%= parseFloat(invoice.amount - invoice.balanceDue).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="balanceDue"><%= parseFloat(invoice.balanceDue).toFixed(2) %></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>
<!-- Invoice Footer -->
<div id="invoice-footer">
<div class="row">
<div class="col-md-7 col-sm-12">
<!-- <h6>Terms & Condition</h6> -->
<h6>Invoice Message</h6>
<p><%= invoice.invoiceMessage %></p>
</div>
<% if(invoice.invoiceStatus.id < 3) {//draft or approved %>
<div class="col-md-5 col-sm-12 text-center" id="sendInvoiceDiv">
<button type="button" class="btn btn-info btn-lg my-1" onclick="sendInvoice('<%= invoice.uuid %>')"><i class="la la-paper-plane-o" ></i> Send Invoice</button>
</div>
<% } else if(invoice.invoiceStatus.id == 3 || invoice.invoiceStatus.id == 9){//sent or partial %>
<div class="col-md-5 col-sm-12 text-center" id="makePaymentBtnDiv">
<button type="button" class="btn btn-info btn-lg my-1" title="Make Payment for #<%= invoice.referenceNumber %> " data-toggle="modal" data-target="#makePayment" ><i class="la la-check" ></i> Make Payment </button>
</div>
<% } %>
</div>
</div>
<!--/ Invoice Footer -->
</div>
</section>
</div>
</div>
</div>
<!-- ////////////////////////////////////////////////////////////////////////////-->
<div class="modal fade text-left" id="makePayment" tabindex="-1" role="dialog" aria-labelledby="makePayment"
aria-hidden="true">
<form id="paymentForm" action="/accounts/invoices/make-payment">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header bg-blue">
<h3 class="modal-title" >#<span id="_makePaymentModalLabel"><%= invoice.referenceNumber %> Payment </span> </h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="col-12 row">
<div class="card col-md-6 col-sm-12 text-center text-md-right">
<div><br/></div>
<h2>INVOICE</h2>
<p class="" id=""># <span id="referenceNumber"><%= invoice.referenceNumber %></span> </p>
<ul class="px-0 list-unstyled">
<!-- $ <li>Partial</li> -->
<li>Client</li>
<li class="lead text-bold-800" id="party"></li>
<li>Amount</li>
<li class="lead text-bold-800">$<span id="amount"><%= invoice.amount %></span> </li>
<li>Balance Due</li>
<li class="lead text-bold-800" >$<span class="balanceDue"><%= invoice.balanceDue %></span> </li>
<li>Due Date</li>
<li class="lead text-bold-800" ><span id="dueDate"><%= moment(invoice.dueDate).format("MMM Do YYYY") %></span> </li>
</ul>
</div>
<div class="col-md-6 col-sm-12">
<div><br/></div>
<div class=" col-sm-12 text-center text-md-left">
<ul class="px-0 list-unstyled">
<li>
<span class="form-group skin skin-flat">
<label class="" for="fullPayment"><input type="checkbox" name="fullPayment" value="" class="form-control" >Full Payment </label>
</span>
</li>
<li>Amount</li>
<li class="text-bold-800"><input type="number" name="amountPaid" id="amountPaid" min="0.00" max="<%= invoice.balanceDue %>" placeholder="0.00" class="form-control" required value=""></li>
<li>Date</li>
<li class="text-bold-800"><input type="date" name="paymentDate" id="paymentDate" class="form-control" required></li>
<li>Payment Method</li>
<li class="text-bold-800">
<div class="form-group">
<select class="selectBox form-control" required name="paymentMethodId" id="paymentMethodId">
<option class="form-control">No Payment Method selected</option>
<% paymentMethods.forEach(method =>{ %>
<option value="<%= method.id %>" class="form-control"><%= method.title %></option>
<% }) %>
</select>
</div>
<div class="form-group">
<textarea name="comment" id="comment" placeholder="Note" title="Payment Note" class="form-control"></textarea>
</div>
</li>
<!-- <li>Albuquerque,</li> -->
<!-- <li>New Mexico-87102.</li> -->
</ul>
</div>
</div>
<input type="hidden" value="<%= invoice.uuid %>" id="uuid" name="invoiceUuid"/>
</div>
<div class="modal-footer">
<button type="button" class="btn grey btn-outline-secondary" data-dismiss="modal" id="close">Close</button>
<button type="submit" class="btn btn-info " ><i class="la la-check" ></i> Make Payment </button>
</div>
</div>
</div>
</form>
</div>
<% include ../../partials/footer %>
<script src="/app-assets/vendors/js/forms/icheck/icheck.min.js" type="text/javascript"></script>
<script src="/app-assets/js/scripts/forms/checkbox-radio.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
document.getElementById('paymentDate').valueAsDate = new Date();
$("#party").html($("#party1").html());
var full = false;
$(".iCheck-helper").click(function() {
full = !full;
if(full)
$("#amountPaid").val(parseFloat($(".balanceDue").html()).toFixed(2))
else
$("#amountPaid").val('')
});
});
function sendInvoice(uuid){
$('#spinnerContainer').addClass('show');
console.log(uuid);
$.ajax({
type: 'POST',
url: '/accounts/invoices/send',
dataType: 'json',
data: { invoiceUuid: uuid },
success: function(data) {
// console.log(data);
$('#invoiceStatus').html('Sent');
$('#sendInvoiceDiv').html(`<button type="button" class="btn btn-info btn-lg my-1" title="Make Payment for #<%= invoice.referenceNumber %> " data-toggle="modal" data-target="#makePayment" ><i class="la la-check" ></i> Make Payment </button>`);
$('#spinnerContainer').removeClass('show');
},
error: function(jqXHR, textStatus, errorThrow) {
$('#spinnerContainer').removeClass('show');
// $.alert(errorThrow);
}
});
}
$("#paymentForm").on('submit', (event)=>{
event.preventDefault();
$('#close').trigger('click');
$('#spinnerContainer').addClass('show');
var uuid = $("#uuid").val();
console.log(uuid);
$.ajax({
type: 'POST',
url: '/accounts/invoices/make-payment',
dataType: 'json',
data: { invoiceUuid: uuid, paymentDate: $("#paymentDate").val(), amountPaid: $("#amountPaid").val(), paymentMethodId: $("#paymentMethodId").val(), comment:$("#comment").val()},
success: function(data) {
// console.log(data);
invoice = data.invoice;
if(invoice.statusId == 6 ){// 6 => paid/full
$('#invoiceStatus').html('Paid');
$('#makePaymentBtnDiv').html(``);
}else{
$('#invoiceStatus').html('Partial');
$('#makePaymentBtnDiv').html(`<button type="button" class="btn btn-info btn-lg my-1" title="Make Payment for #<%= invoice.referenceNumber %> " data-toggle="modal" data-target="#makePayment" ><i class="la la-check" ></i> Make Payment </button>`);
$("#amountPaid").val('')
$("#comment").val('')
$("#amountPaid").attr('max', invoice.balanceDue);
}
$("#paymentMade").html(parseFloat(invoice.amount - invoice.balanceDue).toFixed(2));
$(".balanceDue").html(parseFloat(invoice.balanceDue).toFixed(2));
$('#spinnerContainer').removeClass('show');
return $.confirm({
title: '<div style="color:red">Success!</div>',
content: '<span style="color:green">Stage Title</span> is empty. <br/>Supply the stage title or click Finish if you are done.',
content: data.message,
buttons: {
ok: function () {
//
},
}
});
},
error: function(jqXHR, textStatus, errorThrow) {
$('#spinnerContainer').removeClass('show');
// $.alert(errorThrow);
}
});
})
</script>
Zerion Mini Shell 1.0