%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /home/opti/workflow/src/views/account/payment/
Upload File :
Create Path :
Current File : /home/opti/workflow/src/views/account/payment/index.ejs

   <% 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">&times;</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">&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"></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