%PDF- %PDF-
Direktori : /home/opti/workflow/src/views/account/invoice/ |
Current File : /home/opti/workflow/src/views/account/invoice/viewInvoice.ejs |
<% 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>