fund page

 avatar
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...