{% include 'header.twig' %}
<div class="top-padding"></div>

            <!-- Main variables *content* -->

<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">
      <div class="page-header-lgin">
        <div class="contpghdr">
          <span class="bdghdr threedblue">{{ site["site_name"] }}</span>
          <h2>TOP UP  <span>WALLET</span></h2>
          <p>Add funds to your wallet with a variety of payment options for a seamless experience.</p>
        </div>
        <img src="https://cdn.mypanel.link/edeed4/cks3ck00pibpn4c2.png">
      </div>
      <!--<div class="page-header-diff">
        <i class="far fa-wallet threeddarkblue"></i>
        <div>
          <h2>Add <span>Funds</span></h2>
          <p>Add funds to your wallet with our secure payment gateways.</p>
        </div>
      </div>-->
    </div>
  </div>
</div>

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6">
      <div id="addfunds" class="">
        <div class="well">
        									
<form method="post" id="addfundsForm" action="/addfunds">

											<div class="form-group">
												<label for="method" class="control-label">{{ lang['addfunds.method'] }}</label>
												<select class="form-control" id="payment_method" name="payment_type">
													{% for method in site["paymentMethods"] %}
														<option value="{{ method['id'] }}">{{ method['name'] }}</option>
													{% endfor %}
												</select>
											</div>
											<div id="addfunds_fields"></div>
										</form>
									</div>
      </div>
    </div>
    <div class="col-lg-6">
      <div id="passbook" class="">
        <div class="services-grid  payments-grid">
            
        {% for payment in payments %}
		         <div class="paymentcard ">   <div class="boxpayment">
              <div>
                  
                <b>#<a class='download_invoice_link' href='addfunds?download_invoice=71663' target='_BLANK'>{{ payment['id'] }}</a></b>
              </div>
              <span class="nowrap">{{ payment['date'] }}</span>
  </div>
            <div class="boxamount">
                            <span><div  data-toggle="tooltip" data-html="true"  data-placement="right" title="" data-original-title=" 50 INR ">{{ payment['amount'] }}</div></span>
                       </div></div> 
                       
		                          {% endfor %}
		                          </div>
          </div>
                  </div>
              </div>
    </div>
		

<footer>
      <div class="container-fluid">
        <div class="row">
          <div class="col-sm-6">
            <a class="footer-brand" href="/"> <img style="max-width:205px;" src="{{ site['logo'] }}" alt="{{ site["site_name"] }}" title="{{ site["site_name"] }}"> </a>
          </div>
          <div class="col-sm-6">
            <p class="footerp">
              © 2021-2024, {{ site["site_name"] }}, Inc. or its affiliates
            </p>
          </div>
        </div>
      </div>
    </footer>	

{% include 'footer.twig' %}
<script>
				var paymentMethods = {{ site["paymentMethodsJSON"] }};
			</script>
<script>
				const addfundsRoute = "/addfunds";
function addfundsInit() {
var addfundsForm = $("#addfundsForm");
var fields = $("#addfunds_fields");
var selectedMethod = $("#payment_method").val();
var instructions = paymentMethods[selectedMethod][0].instructions;
$.ajax({
url: addfundsRoute,
data: "action=getForm&selectedMethod=" + selectedMethod,
type: "POST",
success: function (json) {
if (json.success == true) {
if (instructions.length > 0) {
var methodInstruction = '<div class="form-group"><label class="control-label">Instructions</label><div class="panel-body border-solid border-rounded">' + instructions + '</div></div>';
} else {
var methodInstruction = "";
} fields.html(methodInstruction + json.content);
extraFeeInit(selectedMethod);
}
}
});
}

function extraFeeInit(method) {
var fee = parseFloat(paymentMethods[method][0].fee).toFixed(2);
var fields = $("#fee_fields");
if (fee > 0) {
fields.html('<div class="form-group"><label class="control-label">Extra fee</label><input type="text" class="form-control" id="methodExtraFee" disabled value="0.00"/></div><div class="form-group"><label class="control-label">Total Amount</label><input type="text" id="totalAmount" class="form-control" disabled value="0.00" /></div>');
}
}
function preparePrice(t) {
n = 2;
var r = (t = $.trim(t.toString().replace(",", "."))).split(".");
return void 0 !== r[1] && (r[1] = r[1].replace(/0+$/g, ""), r[1].length > n && (n = 2 < r[1].length ? 2 : r[1].length)),
1e3 <= (t =( t = parseFloat(t)).toFixed(n)) && (t = t.toString().replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, "$1" + "")),
t = t.toString().replace(/\.(\d+)$/g, "." + "$1");
return t.toFixed(n)
}
$(document).ready(function () {
$(document).on("keyup", "#paymentAmount", function () {
var selectedMethod = $("#payment_method").val();
var amount = parseFloat($(this).val());
var feePercentage = parseFloat(paymentMethods[selectedMethod][0].fee);
var feeInput = $("#methodExtraFee");
var totalAmountInput = $("#totalAmount");
var fee = amount * (feePercentage / 100);
feeInput.val(preparePrice(fee));
totalAmountInput.val(preparePrice(amount + fee));
});
addfundsInit();
});
$("#payment_method").change(function () {
addfundsInit();
});

$("#addfundsForm").submit(function (e) {
e.preventDefault();
var data = $(this).serialize();

$.ajax({
url: addfundsRoute,
data: data,
type: "POST",
success: function (json) {
if (json.success == true) {
var msgDiv = $("#formSubmitResponseMessage");
msgDiv.html('<div class="alert alert-success alert-dismissible show mt-2" role="alert">' + json.message + '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button></div>');
var contentDiv = $("#formSubmitResponseContent");
contentDiv.html(json.content);
} else {
var msgDiv = $("#formSubmitResponseMessage");
msgDiv.html('<div class="alert alert-danger alert-dismissible show mt-2" role="alert">' + json.message + '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button></div>');
}
}

});
});
			</script>