%PDF-
%PDF-
Mini Shell
Mini Shell
<% include ../../partials/header %>
<!-- ////////////////////////////////////////////////////////////////////////////-->
<% include ../../partials/sidebar %>
<!-- <link rel="stylesheet" type="text/css" href="/app-assets/ekko-lightbox/dist/ekko-lightbox.css"> -->
<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">
<style>
.modal-header .close {
padding: 1rem;
margin: -1rem -1rem -1rem; }
.modal-header {
background-color:#2196F3;
}
</style>
<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">
<h3 class="content-header-title">Payments</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 active">Payments
</li>
</ol>
</div>
</div>
</div>
<!-- Breadcrumb ends-->
<div class="text-center">
<a class="quick-btn text-red" href="/accounts/payments/create" >
<i class="la la-plus fa-2x"></i>
<span>New Payment</span>
</a>
</div>
<section class="row">
<div class="col-12">
<%- format_messages(messages) %>
<div class="card">
<div class="card-head">
<div class="card-header">
<h4 class="card-title">Payment</h4>
<a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
<div class="heading-elements">
<!-- <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#createInvoice"><i class="ft-plus white"></i> Create Invoice</button> -->
<span class="dropdown">
<button id="btnSearchDrop1" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" class="btn btn-warning btn-sm dropdown-toggle dropdown-menu-right"><i class="ft-download-cloud white"></i></button>
<span aria-labelledby="btnSearchDrop1" class="dropdown-menu mt-1 dropdown-menu-right">
<a href="#" class="dropdown-item"><i class="la la-calendar"></i> Due Date</a>
<a href="#" class="dropdown-item"><i class="la la-random"></i> Priority </a>
<a href="#" class="dropdown-item"><i class="la la-bar-chart"></i> Balance Due</a>
<a href="#" class="dropdown-item"><i class="la la-user"></i> Assign to</a>
</span>
</span>
<button class="btn btn-success btn-sm"><i class="ft-settings white"></i></button>
</div>
</div>
</div>
<div class="card-content">
<div class="card-body">
<!-- Invoices List table -->
<div class="table-responsive">
<table class="table table-striped table-bordered zero-configuration">
<thead>
<tr>
<th>S/N</th>
<th>payment Date</th>
<!-- <th>Reference No.</th> -->
<th>Invoice Date</th>
<th>Invoice No.</th>
<th>Customer Name</th>
<th>Amount</th>
<th>Payment Type</th>
<!-- <th>Action</th> -->
</tr>
</thead>
<tbody>
<% payments.forEach(function(payment, index){ %>
<tr>
<td><%= (index + 1) %></td>
<td><%= moment(payment.createdAt).format('MMMM Do YYYY') %></td>
<!-- <td><a href="/accounts/payments/view/<%=payment.uuid%>"><%= payment.referenceNumber %></a></td> -->
<td><%= moment(payment.invoice.createdAt).format('MMMM Do YYYY') %></td>
<td><a href="/accounts/invoices/view/<%=payment.invoice.uuid%>"><%= payment.invoice.referenceNumber %></a></td>
<td>
<% if(payment.invoice.invoiceCategoryId == 2){//its purchase %>
<% if(payment.contactTo && payment.contactTo.contactType == 1){ //its person %>
<a href="/accounts/contacts/view/1/<%=payment.contactTo.person.uuid%>"><%= payment.contactTo.person.firstName + " " + payment.contactTo.person.lastName %></a>
<% } else { //its group %>
<a href="/accounts/contacts/view/2/<%=payment.contactTo.group.uuid%>"><%= payment.contactTo.group.name %></a>
<% } %>
<% } else { //its sales %>
<% if(payment.contactFrom && payment.contactFrom.contactType == 1){ //its person %>
<a href="/accounts/contacts/view/1/<%=payment.contactFrom.person.uuid%>"><%= payment.contactFrom.person.firstName + " " + payment.contactFrom.person.lastName %></a>
<% } else { //its group %>
<a href="/accounts/contacts/view/2/<%=payment.contactFrom.group.uuid%>"><%= payment.contactFrom.group.name %></a>
<% } %>
<% } %>
</td>
<td><%= payment.amount %></td>
<td><%= payment.paymentMethod.title %></td>
<!-- <td></td> -->
</tr>
<% }); %>
</tbody>
<tfoot>
<tr>
<th>S/N</th>
<th>Payment Date</th>
<th>Invoice Date</th>
<th>Invoice No.</th>
<th>Customer Name</th>
<th>Amount</th>
<th>Payment Type</th>
<!-- <th>Action</th> -->
</tr>
</tfoot>
</table>
</div>
<!--/ Invoices table -->
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<!-- ////////////////////////////////////////////////////////////////////////////-->
<div class="modal fade text-left" id="viewHistory" tabindex="-1" role="dialog" aria-labelledby="myModalLabel35"
aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header bg-blue">
<h3 class="modal-title" >#<span id="_modalLabel"></span> </h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-content collapse show">
<div class="card-body">
<div class="table-responsive">
<table class="table">
<tbody id="histories">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade text-left" id="makePayment" tabindex="-1" role="dialog" aria-labelledby="makePayment"
aria-hidden="true">
<form action="/accounts/invoices/make-payment" method="POST">
<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"></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"></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"></span> </li>
<li>Balance Due</li>
<li class="lead text-bold-800" >$<span id="balanceDue"></span> </li>
<li>Due Date</li>
<li class="lead text-bold-800" ><span id="dueDate"></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="" 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>
<option value="" selected class="form-control">No Payment Method
</select>
</div>
<div class="form-group">
<textarea name="description" placeholder="Note" title="Payment Note" class="form-control"></textarea>
</div>
</li>
<input type="hidden" value="" id="invoiceUuid" name="invoiceUuid"/>
<!-- <li>Albuquerque,</li> -->
<!-- <li>New Mexico-87102.</li> -->
</ul>
</div>
</div>
<div class="col-md-7 col-sm-12">
</div>
</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/ekko-lightbox/dist/ekko-lightbox.js"></script> -->
<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>
// Ekko lightbox Initialization
$(document).on('click', '[data-toggle="lightbox"]', function(event) {
event.preventDefault();
$(this).ekkoLightbox();
});
function getHistory(uuid) {
$('#spinnerContainer').addClass('show');
// console.log(uuid)
$.ajax({
type: "POST", // Post / Get method
url: "/accounts/invoices/history", //Where form data is sent on submission
dataType: "text", // Data type, HTML, json etc.
data: { uuid: uuid }, //Form variables
success: function (data) {
$('#spinnerContainer').removeClass('show');
data = JSON.parse(data);
// console.log(data)
if(data.type == "success"){
$('#histories').html('');
$.each(data.histories, function (key, history) {
var tr = (
'<tr>' +
'<td>' + (key + 1) + '</td>' +
'<td>' + history.message +'</td>' +
'<td>' + moment(history.createdAt).format('MMMM Do YYYY') + '</td>' +
'</tr>'
);
$('#histories').append(tr);
});
}
$("#_modalLabel").html(`${data.invoice.referenceNumber} History`)
},
error:function (error){
$('#spinnerContainer').removeClass('show');
alert(error.message)
}
})
}
function showMakePaymentModal(invoice) {
$('#spinnerContainer').addClass('show');
invoice = JSON.parse(invoice);
document.getElementById('paymentDate').valueAsDate = new Date();
$.ajax({
type: 'POST',
url: '/accounts/getInvoiceContact',
dataType: 'json',
data: { partyFromId: invoice.partyFromId , partyToId: invoice.partyToId },
success: function(data) {
// console.log(data);
$('#party').html(data.name)
// fetchedContacts.push(data.name);
// $('#partyId').val(data.id)
$('#spinnerContainer').removeClass('show');
},
error: function(jqXHR, textStatus, errorThrow) {
$('#spinnerContainer').removeClass('show');
// $.alert(errorThrow);
}
});
$("#amount").html(invoice.amount);
$("#invoiceUuid").val(invoice.uuid);
$("#referenceNumber").html(invoice.referenceNumber);
$("#amountPaid").attr('max', invoice.balanceDue);
$("#balanceDue").html(invoice.balanceDue);
$("#dueDate").html(moment(invoice.dueDate).format("MMM Do YYYY"));
$('#_makePaymentModalLabel').html(`${invoice.referenceNumber} Payment`)
}
$(document).ready(function() {
var full = false
$(".iCheck-helper").click(function() {
full = !full;
if(full)
$("#amountPaid").val(parseFloat($("#balanceDue").html()).toFixed(2))
else
$("#amountPaid").val('')
});
});
</script>
Zerion Mini Shell 1.0