fund page
unknown
plain_text
2 years ago
14 kB
5
Indexable
<%- include('layouts/htmlHeader.ejs') %>
<style>
input[type="number"]::placeholder {
/* Firefox, Chrome, Opera */
text-align: center;
}
.font-style{
font-size: 13px;
font-weight: bold !important;
}
.font-style-thin{
font-size: 30px;
font-weight: 400 !important;
}
input[type="radio"] {
-ms-transform: scale(1.2); /* IE 9 */
-webkit-transform: scale(1.2); /* Chrome, Safari, Opera */
transform: scale(1.2);
accent-color: #0f9cbc;
}
.selected{
border: 1px solid #0f9cbca1;
background-color: #0f9cbc0e;
}
.selectedBank{
border: 1px solid #0f9cbca1;
background-color: #0f9cbc0e;
}
.custom-text-b-15{
font-size: 15px;
font-weight: bold;
}
</style>
<div class="main-content">
<div class="addFundHeader d-flex justify-content-between" style="background-color: #F1F1F6; padding: 1rem 1rem; align-items: center;">
<p class="custom-text-m-15">Securities Wallet</p>
<div style="display: flex; flex-direction: column; justify-content: right; text-align: right;">
<p class="custom-text-m-12">Ledger Balance </p>
<p id='myTotalFund' style="font-size: 20px;font-weight: 600;">₹ 5000</p>
</div>
</div>
<div class="addFundBody">
<div>
<div class="row">
<div class="col-lg-12">
<div class="alert alert-dismissible fade show" id ="msg" style="display: none;margin-top: 25px; margin-bottom: 0px!important;border-radius: 10px; background-color: #fceced;" role="alert">
<!-- <img src="https://i.imgur.com/sOiQr4G.png" alt="alert"> -->
<!-- <p id="msg" style="margin-bottom: 0px!important;"></p> -->
</div>
</div>
</div>
<div class="addFundBodyPrice">
<p class="custom-text-m-15">Add Funds</p>
<div style="display: flex;align-items: center;justify-content: center;">
<p style="font-size: 20px;font-weight: 500;">₹</p>
<input type="number" id="amount" name="amount" placeholder="0">
</div>
</div>
<div class="addFundBodyPriceTag" style="
display: flex;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 0;
">
<span class="badge rounded-pill badge-soft-dark" onclick="add_fund(10000)" style="padding: 10px 10px; background-color: rgba(0, 0, 0, 0.075);">+10,000</span>
<span class="badge rounded-pill badge-soft-dark" onclick="add_fund(25000)" style="padding: 10px 10px; background-color: rgba(0, 0, 0, 0.075);">+25,000</span>
<span class="badge rounded-pill badge-soft-dark" onclick="add_fund(50000)" style="padding: 10px 10px; background-color: rgba(0, 0, 0, 0.075);">+50,000</span>
<span class="badge rounded-pill badge-soft-dark" onclick="add_fund(100000)" style="padding: 10px 10px; background-color: rgba(0, 0, 0, 0.075);">+100,000</span>
</div>
</div>
<div style="display: flex; flex-direction: column; width: 100%; padding: 1rem 0; gap: 1rem;">
<div class="bankAccountDiv">
<p class="custom-text-b-15" style="margin-bottom: 10px !important;">Bank Account:</p>
<label class="selectedBank" id="axisLabel" onclick="bankChangeFn('1')" style="display: flex;gap: 0.5rem; padding: 0.8rem 1rem;width: 100%;justify-content: space-between; border-radius: 10px;">
<div style="display: flex;gap: 0.5rem;align-items: center;">
<div style="display: flex;align-items: center;justify-content: center;width: 50px;">
<img src="https://i.imgur.com/NXoISvn.png" alt="bankAccount" height="30px">
</div>
<div>
<p style="font-size: 15px; font-weight: 600;">Axis bank</p>
<p style="font-size: 15px; font-weight: 600;">************1234</p>
</div>
</div>
<input type="radio" name="bank" id="axis" checked>
</label>
<label id="federalLabel" onclick="bankChangeFn('2')" style="display: flex;gap: 0.5rem; padding: 0.8rem 1rem;width: 100%;justify-content: space-between; border-radius: 10px;">
<div style="display: flex;gap: 0.5rem;align-items: center;">
<div style="display: flex;align-items: center;justify-content: center;width: 50px;">
<img src="https://i.imgur.com/H2LyFSo.png" alt="bankAccount" height="30px">
</div>
<div>
<p style="font-size: 15px; font-weight: 600;">Federal bank</p>
<p style="font-size: 15px; font-weight: 600;">************1234</p>
</div>
</div>
<input type="radio" name="bank" id="federal">
</label>
</div>
<div class="paymentDiv">
<p class="custom-text-b-15" style="margin-bottom: 10px !important;">Payment Method</p>
<div style="display: flex;flex-direction: column;gap: 0.5rem ;">
<label id="upiLabel" onclick="paymentChangeFn('upi')" style="display: flex;gap: 0.5rem; padding: 0.8rem 1rem;width: 100%;justify-content: space-between; border-radius: 10px;" class="selected">
<div style="display: flex;gap: 0.5rem;align-items: center;">
<div style="display: flex;align-items: center;justify-content: center;width: 50px;">
<img src="https://i.imgur.com/fIOJxrt.png" alt="upi" height="30px">
</div>
<p style="font-size: 15px; font-weight: 600;">Via UPI app</p>
</div>
<input type="radio" name="payment" id="upi" checked>
</label>
<label id="netBankingLabel" onclick="paymentChangeFn('netBanking')" style="display: flex;gap: 0.5rem; padding: 0.8rem 1rem;width: 100%;justify-content: space-between; border-radius: 10px;">
<div style="display: flex;gap: 0.5rem;align-items: center;">
<div style="display: flex;align-items: center;justify-content: center;width: 50px;">
<img src="https://i.imgur.com/en6ruBp.png" alt="netBanking" height="30px">
</div>
<p style="font-size: 15px; font-weight: 600;">Net Banking</p>
</div>
<input type="radio" name="payment" id="netBanking">
</label>
</div>
</div>
<div class="banksDiv">
<input type="hidden" id="bankname" name="bankname" value="<%- code %>">
</div>
<div class="upiDiv add-fund-div-hide">
<p class="custom-text-m-15" style="margin-bottom: 10px !important;">UPI ID</p>
<input type="text" class="upiTextInput" id="upi" name="upi">
</div>
</div>
<div class="btnDivBottom" style="position: absolute;bottom: 0%;width: 100%;left: 0;padding: 2rem 0rem;display: flex;justify-content: center;">
<button class="addFundBtn" onclick="addfund()" id="btndisplay" >
Add Funds
</button>
</div>
<div class="childDiv" style="display: none;flex-direction: column;text-align: center;justify-content: center;" id="overlay">
<lottie-player src="https://lottie.host/26a6468c-0598-4d71-b7a6-076ad3e36b6c/jBeEsTL7MM.json" background="transparent" speed="1" style="width: 70px; height: 70px; margin: auto;" loop autoplay></lottie-player>
<p class="font-style" style="max-width: 500px;margin-top: 2rem;">Please Wait For Redirect to Payment Gateway..</p>
</div>
</div>
</div>
<%- include('layouts/htmlFooter.ejs') %>
<script>
let selectPickerPaymentDiv = document.querySelector('.selectpickerPayment')
selectPickerPaymentDiv.addEventListener('change', function(){
if(selectPickerPaymentDiv.value == 'upi'){
document.querySelector('.banksDiv').classList.toggle('add-fund-div-hide')
document.querySelector('.upiDiv').classList.toggle('add-fund-div-hide')
}else{
document.querySelector('.banksDiv').classList.toggle('add-fund-div-hide')
document.querySelector('.upiDiv').classList.toggle('add-fund-div-hide')
}
})
</script>
<script>
function add_fund(amount){
let amountSpan = document.querySelector('#amount')
let storeAmount = amountSpan.value || 0
storeAmount = parseFloat(storeAmount)
amountSpan.value = storeAmount + amount
}
// function withdrawal(percentage){
// let fundP = document.querySelector('#myTotalFund')
// let myWallet = fundP.innerText;
// myWallet = Number(myWallet)
// let amount = (Number(percentage) * myWallet)/100
// let amountSpan = document.querySelector('#amount')
// amountSpan.value = amount || 0
// }
function bankcode()
{
let bankdetails=$("#bankdetails").val()
let formdata={'bankdetails':bankdetails};
$.ajax({
type: "POST",
url: "/fund/getbank",
contentType:"application/json",
dataType:"json",
data: JSON.stringify(formdata), // serializes the form's elements.
success: function(data)
{
$("#banknames").val(data.data.name)
$("#bankname").val(data.data.code);
}
});
}
</script>
<script>
function addfund(){
$("#msg").css("display", "none");
$("#msg").html("");
let clientcode=$("#clientcode").val();
let amount=$("#amount").val();
let bankdetails=$("#bankdetails").val();
let acc=bankdetails.split("-");
let account=acc[0];
let ifscode=acc[1];
let payment_type=$("#payment_type").val();
let bankname=$("#bankname").val();
let banknames=$("#banknames").val();
let upi=$("#upi").val();
let data={};
let clientname=$("#clientname").val();
let email=$("#email").val();
let mobile=$("#mobile").val();
let formdata={'clientcode':clientcode, 'amount':amount,'account':account,'ifscode':ifscode,'payment_type':payment_type,'bankname':bankname,'upi':upi,'clientname':clientname,'banknames':banknames,'email':email,'mobile':mobile};
if(amount=="" || amount==undefined || amount=="0")
{
$("#msg").css("display", "block");
$("#msg").html("Please Enter Amount");
return false;
}
$.ajax({
type: "POST",
url: "/home/payment",
contentType:"application/json",
dataType:"json",
data: JSON.stringify(formdata), // serializes the form's elements.
beforeSend: function () {
$("#btndisplay").css("display","none");
$("#overlay").css("display","flex");
},
success: function(data)
{
// $("#overlay").css("display","block");
if(data.status==200)
{
// $("#overlay").css("display","block");
window.location.replace(data.data);
}
else
{
$("#msg").css("display", "block");
$("#msg").html(data.message);
setTimeout(function () {
location.reload(true);
}, 5000);
}
},
});
}
</script>
<script>
function toggleSelect() {
const selectOptions = document.querySelector('.select-options');
selectOptions.style.display = selectOptions.style.display === 'block' ? 'none' : 'block';
}
// function selectOption(option) {
// let selectedOptionInput = document.querySelector('#selected-option');
// selectedOptionInput.value = option;
// let selectHeader = document.querySelector('.select-header');
// selectHeader.innerHTML = option;
// toggleSelect();
// }
let selectOptions = document.querySelectorAll('.select-options > div')
selectOptions.forEach((item)=>{
item.addEventListener('click',()=>{
let selectedOptionInput = document.querySelector('#selected-option');
selectedOptionInput.value = item.innerText;
let selectHeader = document.querySelector('.select-header');
selectHeader.innerHTML = item.innerText;
toggleSelect();
})
})
</script>
<script>
function paymentChangeFn(param){
if(param == 'upi'){
document.querySelector('#upiLabel').classList.add('selected');
document.querySelector('#netBankingLabel').classList.remove('selected');
}else{
document.querySelector('#upiLabel').classList.remove('selected');
document.querySelector('#netBankingLabel').classList.add('selected');
}
}
</script>
<script>
function bankChangeFn(param){
if(param == '1'){
document.querySelector('#axisLabel').classList.add('selectedBank');
document.querySelector('#federalLabel').classList.remove('selectedBank');
}else{
document.querySelector('#axisLabel').classList.remove('selectedBank');
document.querySelector('#federalLabel').classList.add('selectedBank');
}
}
</script>Editor is loading...