{% include 'header.twig' %}
<style>
/* Import Google Fonts */
{{ settings.user_font_import|raw }}

/* Block 26 */
#block_26{
 padding-top:0px;
 margin-top:-50px;
 font-family: '{{ settings.user_font }}', {{ settings.user_font_type }} ;
 padding-bottom:0px;
}

/* Card body */
.add-funds__form .card .card-body{
 padding-right:0px;
 padding-top:0px;
 padding-left:0px;
 padding-bottom:0px;
}

/* Card header */
.add-funds__form .card .card-header{
 padding-left:0px;
 padding-right:0px;
 display:none;
}

/* Image */
.add-funds__form .container .row .col-lg-12 .component_card .card .card-body #addfundsForm #addfunds_fields .form-group .panel-body p strong img{
 width:100% !important;
 height:100% !important;
}

/* Card body */
.wrapper-sidebar-navbar .card .card-body{
 padding-left:0px;
 padding-right:0px;
 padding-top:0px !important;
 padding-bottom:0px !important;
}

/* Card */
.wrapper-sidebar-navbar .card{
 font-family: '{{ settings.user_font }}', {{ settings.user_font_type }} ;
}

/* Heading */
.wrapper-sidebar-navbar .container .row .col-lg-12 .component_card .card .card-body .align-items-center .col-md-8 h5{
 font-family: '{{ settings.user_font }}', {{ settings.user_font_type }}  !important;
}

/* Heading */
.wrapper-sidebar-navbar h5{
 font-family: '{{ settings.user_font }}', {{ settings.user_font_type }} ;
}

/* Card header */
.add-funds__list .card .card-header{
 padding-left:0px;
 padding-right:0px;
}

/* Card */
.add-funds__list .card{
 padding-left:0px;
 padding-right:0px;
 padding-top:0px;
 padding-bottom:0px;
}

/* Heading */
.wrapper-sidebar-navbar .wrapper-content .wrapper-content .wrapper-content__body #block_29 .add-funds__list .container .row .col-lg-12 .component_card .card .card-header h4{
 font-family: '{{ settings.user_font }}', {{ settings.user_font_type }}  !important;
}

/* Heading */
.add-funds__list .container .row .col-lg-12 .component_card .card .card-header h4{
 font-family: '{{ settings.user_font }}', {{ settings.user_font_type }}  !important;
}

@media (max-width:991px){

 /* Block 26 */
 #block_26{
  margin-top:20px;
 }
 
}
/* Card header */
.add-funds__list .card .card-header{
 padding-left:12px !important;
 padding-right:12px !important;
}


</style>
<div class="wrapper-content">
	<div class="wrapper-content__header"></div>

	<div class="wrapper-content">
		<div class="wrapper-content__header"></div>
		<div class="wrapper-content__body">

			<!-- Add Funds Form - Full Width -->
			<div id="block_26">
				<div class="add-funds__form">
					<div class="bg"></div>
					<div class="divider-top"></div>
					<div class="divider-bottom"></div>
					<div class="container">
						<div class="row">
						    	{% if contentText %}
<div class="col-lg-12 mt-2">
<div class="card mb-2">
{{ contentText }}
</div></div>
{% endif %}
							<div class="col-lg-12">
								<div class="component_card">
									<div class="card">
										<div class="card-header">
											<h4 class="card-title mb-0">Add Funds</h4>
										</div>
										<div class="card-body">
											<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 id="formSubmitResponseMessage"></div>
											<div id="formSubmitResponseContent"></div>
										</div>
										
									</div>
									{% if contentText2 %}
 <div class="card mt-4 mb-4 ">	
{{ contentText2 }}
</div>
{% endif %}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- Coupon Code Section - Full Width -->
			<div class="container mt-4">
				<div class="row">
					<div class="col-lg-12">
						<div class="component_card">
							<div class="card">
								<div class="card-body text-center py-4">
									<div class="row align-items-center">
										<div class="col-md-8">
											<h5 class="mb-2">Having A Coupon Code?</h5>
											<p class="text-muted mb-0">Apply your coupon code to get discounts on your payment</p>
										</div>
										<div class="col-md-4">
											<a href="kupon" class="btn btn-primary btn-lg">
												<i class="fas fa-gift mr-2"></i>Use Coupon Now
											</a>
										</div>
										
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- Payment History - Full Width -->
			<div id="block_29" class="mt-4">
				<div class="add-funds__list">
					<div class="bg"></div>
					<div class="divider-top"></div>
					<div class="divider-bottom"></div>
					<div class="container">
						<div class="row mb-3">
							<div class="col-lg-12">
								<div class="component_card">
									<div class="card">
										<div class="card-header">
											<h4 class="card-title mb-0">Transaction History</h4>
										</div>
										<div class="card-body">
											<div class="table-responsive">
												<table class="table table-striped">
													<thead>
														<tr>
															<th>ID</th>
															<th>Date</th>
															<th>Method</th>
															<th>Amount</th>
														</tr>
													</thead>
													<tbody>
														{% for payment in payments %}
															<tr>
																<td>{{ payment['id'] }}</td>
																<td>{{ payment['date'] }}</td>
																<td>{{ payment['name'] }}</td>
																<td>{{ payment['amount'] }}</td>
															</tr>
														{% endfor %}
													</tbody>
												</table>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			{% include 'new-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\b\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 fade 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 fade 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>
		</div>
	</div>
</div>