%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /home/opti/workflow/src/views/account/invoice/
Upload File :
Create Path :
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">&times;</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