%PDF-
%PDF-
Mini Shell
Mini Shell
<% 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">
<link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/selects/selectize.css">
<link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/selects/selectize.default.css">
<link rel="stylesheet" type="text/css" href="/app-assets/css/core/colors/palette-gradient.css">
<link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/selectize/selectize.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">
<h3 class="content-header-title">Record Payment</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/payments/">Payments</a>
</li>
<li class="breadcrumb-item active">Record 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">
<div class="card-body">
<form action="/accounts/invoices/make-payment" method="POST">
<div class="form-group">
<label for="invoice">Invoice :</label>
<select class="selectize-select" id="invoiceUuid" name="invoiceUuid" required>
<option value="" selected> No Invoice selected</option>
<% invoices.forEach( invoice => { %>
<option value="<%= invoice.uuid %>">
<%= invoice.referenceNumber + " - "%>
<% if(invoice.invoiceCategoryId == 2){//its purchase %>
<% if(invoice.contactTo && invoice.contactTo.contactType == 1){ //its person %>
<%= invoice.contactTo.person.firstName + " " + invoice.contactTo.person.lastName %>
<% } else { //its group %>
<%= invoice.contactTo.group.name %>
<% } %>
<% } else { //its sales %>
<% if(invoice.contactFrom && invoice.contactFrom.contactType == 1){ //its person %>
<%= invoice.contactFrom.person.firstName + " " + invoice.contactFrom.person.lastName %>
<% } else { //its group %>
<%= invoice.contactFrom.group.name %>
<% } %>
<% } %>
- <span id="_currencyLabel">$</span><span id="_balanceDue" class="pink"><%= invoice.balanceDue %></span>
</option>
<% }) %>
</select>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="amountPaid">Payment Date :</label>
<input type="number" name="amountPaid" id="amountPaid" class="form-control" required min="0" placeholder="0.00">
</div>
<div class="form-group col-md-6">
<label for="dueDate">Payment Date :</label>
<input type="date" name="paymentDate" id="paymentDate" class="form-control" required>
</div>
<div class="form-group col-md-6">
<label for="paymentMethodId">Payment Method :</label>
<select name="paymentMethodId" class="selectBox form-control" required>
<option value="" selected class="form-control">No Payment Method selected</option>
<% paymentMethods.forEach( method => { %>
<option value="<%= method.id %>"><%= method.title %></option>
<% }) %>
</select>
</div>
<div class="form-group col-md-6">
<label for="dueDate">Note :</label>
<textarea id="comment" name="comment" class="form-control"></textarea>
</div>
</div>
<div class="row">
<div class="col-md-7 col-sm-12"></div>
<div class="col-md-5 col-sm-12 text-center" id="makePaymentBtnDiv">
<button type="submit" class="btn btn-info btn-lg my-1" ><i class="la la-check" ></i> Make Payment </button>
</div>
</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 src="/app-assets/vendors/js/forms/select/selectize.min.js" type="text/javascript"></script>
<script src="/app-assets/js/core/libraries/jquery_ui/jquery-ui.min.js" type="text/javascript"></script>
<script src="/app-assets/js/scripts/forms/select/form-selectize.js" type="text/javascript"></script>
<script >
$(document).ready(function() {
document.getElementById('paymentDate').valueAsDate = new Date();
$("#invoiceUuid").on('change', (event)=>{
$('#spinnerContainer').addClass('show');
var uuid = $("#invoiceUuid").val()
$.ajax({
type: 'POST',
url: '/accounts/invoices/balanceDue',
dataType: 'json',
data: { invoiceUuid: uuid },
success: function(data) {
$('#spinnerContainer').removeClass('show');
if(data.type == "success")
$("#amountPaid").attr('max', data.balanceDue);
},
error: function(jqXHR, textStatus, errorThrow) {
$('#spinnerContainer').removeClass('show');
// $.alert(errorThrow);
}
});
})
})
</script>
Zerion Mini Shell 1.0