123 lines
5.2 KiB
HTML
123 lines
5.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html xmlns="http://www.w3.org/1999/xhtml"
|
||
|
|
xmlns:th="http://www.thymeleaf.org"
|
||
|
|
layout:decorate="~{layouts/blank-layout}">
|
||
|
|
<head>
|
||
|
|
<title th:text="${pageTitle}">Topup</title>
|
||
|
|
</head>
|
||
|
|
<body layout:fragment="page_content" id="page_payment">
|
||
|
|
<form id="topupForm" th:action="@{'/topup/new'}" th:object="${topupForm}"
|
||
|
|
th:method="POST" autocomplete="off" enctype="multipart/form-data">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-sm-12 col-md-12 col-lg-12">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-header bg-white">
|
||
|
|
<h4 class="card-title text-themecolor m-1" th:text="#{lbl.topup.new.topup}"></h4>
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<!-- <h5 class="card-title" th:utext="#{lbl.topup.receiver}"></h5>
|
||
|
|
<h6 th:text="#{lbl.topup.bank.info}"></h6>
|
||
|
|
<hr>
|
||
|
|
<div class="row mb-5">
|
||
|
|
<div class="col-sm-12 col-md-4 col-lg-4">
|
||
|
|
<label class="text-muted" th:text="#{lbl.topup.bankName}"></label>
|
||
|
|
<h6 th:text="${topupForm.govBankName}"></h6>
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-12 col-md-4 col-lg-4">
|
||
|
|
<label class="text-muted" th:text="#{lbl.topup.holderName}"></label>
|
||
|
|
<h6 th:text="${topupForm.govName}"></h6>
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-12 col-md-4 col-lg-4">
|
||
|
|
<label class="text-muted" th:text="#{lbl.topup.accNo}"></label>
|
||
|
|
<h6 th:text="${topupForm.govAccNo}"></h6>
|
||
|
|
</div>
|
||
|
|
</div> -->
|
||
|
|
<!-- <h5 class="card-title" th:utext="#{lbl.topup.details.summ}"></h5> -->
|
||
|
|
<!-- <h6 th:text="#{lbl.topup.pay.info}"></h6> -->
|
||
|
|
<!-- <hr> -->
|
||
|
|
<!-- <div class="row">
|
||
|
|
<div class="col-sm-12 col-md-12 col-lg-12">
|
||
|
|
<div class="form-group">
|
||
|
|
<div class="form-check-radio form-check-inline" >
|
||
|
|
<label class="form-check-label">
|
||
|
|
<input class="form-check-input"
|
||
|
|
th:field="*{pymntType}" type="radio" onChange="onChangePaymentType(this);" value="off" disabled>
|
||
|
|
Offline Payment <span class="circle"> <span class="check"></span></span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="form-check-radio form-check-inline">
|
||
|
|
<label class="form-check-label">
|
||
|
|
<input class="form-check-input"
|
||
|
|
onChange="onChangePaymentType(this);" th:field="*{pymntType}" type="radio" value="on" checked >
|
||
|
|
Online Payment <span class="circle"><span class="check"></span></span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<label id="payRadioError" class="text-danger" style="display: none" th:text="#{lbl.field.req}"></label>
|
||
|
|
<label id="onlinePymntBlock" class="text-danger" style="display: none" th:text="${onlineBtn}"></label>
|
||
|
|
</div>
|
||
|
|
</div> -->
|
||
|
|
<input th:field="*{pymntType}" type="hidden" />
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-sm-12 col-md-6 col-lg-6">
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="required bmd-label-floating" th:text="#{lbl.payment.amount}" ></label>
|
||
|
|
<input required="required" type="text" class="form-control limit-number input-currency" th:field="*{amount}"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-12 col-md-6 col-lg-6">
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="bmd-label-floating" th:text="#{lbl.payment.remarks}" ></label>
|
||
|
|
<input type="text" class="form-control" th:field="*{remarks}"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="offLinePymntBlock"
|
||
|
|
th:style="*{pymntType == null or pymntType =='on' } ? 'display:none'">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-sm-12 col-md-6 col-lg-6">
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="required bmd-label-floating" th:text="#{lbl.topup.transRef}"></label>
|
||
|
|
<input type="text"
|
||
|
|
class="form-control" th:field="*{trxnRefNo}"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-12 col-md-6 col-lg-6">
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="required bmd-label-floating" th:text="#{lbl.payment.transactionDt}"></label>
|
||
|
|
<input type="text"
|
||
|
|
class="form-control datepicker pastDtPicker" id="paymentdate" th:field="*{paymentDt}"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-sm-12 col-md-6 col-lg-6">
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="required bmd-label-floating" th:text="#{lbl.topup.bankName}"></label>
|
||
|
|
<input type="text" maxlength="50"
|
||
|
|
class="form-control" th:field="*{bankName}"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-12 col-md-6 col-lg-6" th:each="doc, row : *{uploadDocsBankslip}">
|
||
|
|
<extra:file extra:document="${doc.fileType}" th:field="*{uploadDocsBankslip[__${row.index}__]}" data-updm-cropper="true"></extra:file>
|
||
|
|
<label class="text-danger" id="lblDocRequired" style="display: none" th:text="#{lbl.field.req}" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card-footer bg-white">
|
||
|
|
<div class="d-flex pb-4 justify-content-center">
|
||
|
|
<div class="mr-auto">
|
||
|
|
<button type="button" class="btn btn-previous btn-fill btn-secondary btn-wd" th:onclick="|window.location.href='@{#{url.topup}}'|" th:text="#{btn.lbl.back}"></button>
|
||
|
|
</div>
|
||
|
|
<div class="ml-auto">
|
||
|
|
<input type="submit" class="btn btn-next btn-fill btn-primary btn-wd" value="Submit Payment">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</body>
|
||
|
|
</html>
|