Developer
@extends('user.layouts.master')
@push('css')
@endpush
@section('breadcrumb')
@include('user.components.breadcrumb',['breadcrumbs' => [
[
'name' => __("Dashboard"),
'url' => setRoute("user.dashboard"),
]
], 'active' => __($page_title)])
@endsection
@section('content')
<div class="body-wrapper">
<div class="row mb-20-none">
<div class="col-xl-7 col-lg-7 mb-20">
<div class="custom-card mt-10">
<div class="dashboard-header-wrapper">
<h4 class="title">{{ __($page_title) }}</h4>
</div>
<div class="card-body">
<form class="card-form" action="{{ setRoute('user.add.money.confirm') }}" method="post">
@csrf
<div class="row">
<div class="col-xl-12 col-lg-12 form-group text-center">
<div class="exchange-area">
<code class="d-block text-center"><span>{{ __("Exchange Rate") }}</span><span class="exchange-rate"></span></code>
</div>
</div>
<div class="col-xl-6 col-lg-6 form-group currency-input">
<label>{{ __("Amount") }}<span>*</span></label>
<input type="text" class="form--control number-input amount" name="amount" placeholder="{{ __("Enter Amount") }}...">
<div class="my-currency">
<span>{{ get_default_currency_code() }}</span>
</div>
</div>
<div class="col-xl-6 col-lg-6 form-group">
<label>{{ __("Payment Gateway") }}<span>*</span></label>
<select class="select2-basic" name="payment_gateway">
@foreach ($payment_gateways ?? [] as $item)
<option value="{{ $item->alias }}"
data-min-limit="{{ $item->min_limit }}"
data-max-limit="{{ $item->max_limit }}"
data-fixed-charge="{{ $item->fixed_charge }}"
data-percent-charge="{{ $item->percent_charge }}"
data-rate="{{ $item->rate }}"
data-code="{{ $item->currency_code }}"
data-name="{{ $item->name }}"
>{{ $item->name }}@if ($item->gateway->isManual())
(Manual)
@endif</option>
@endforeach
</select>
</div>
<div class="col-xl-12 col-lg-12 form-group">
<div class="note-area">
<code class="d-block limit"></code>
</div>
</div>
</div>
<div class="col-xl-12 col-lg-12">
<button type="submit" class="btn--base w-100">{{ __("Confirm") }}</button>
</div>
</form>
</div>
</div>
</div>
<div class="col-xl-5 col-lg-5 mb-20">
<div class="custom-card mt-10">
<div class="dashboard-header-wrapper">
<h4 class="title">{{ __("Summary") }}</h4>
</div>
<div class="card-body">
<div class="preview-list-wrapper">
<div class="preview-list-item">
<div class="preview-list-left">
<div class="preview-list-user-wrapper">
<div class="preview-list-user-icon">
<i class="las la-receipt"></i>
</div>
<div class="preview-list-user-content">
<span>{{ __("Amount") }}</span>
</div>
</div>
</div>
<div class="preview-list-right">
<span class="text--success sending-amount"></span>
</div>
</div>
<div class="preview-list-item">
<div class="preview-list-left">
<div class="preview-list-user-wrapper">
<div class="preview-list-user-icon">
<i class="las la-coins"></i>
</div>
<div class="preview-list-user-content">
<span>{{ __("Payment Gateway") }}</span>
</div>
</div>
</div>
<div class="preview-list-right">
<span class="text--warning payment-gateway"></span>
</div>
</div>
<div class="preview-list-item">
<div class="preview-list-left">
<div class="preview-list-user-wrapper">
<div class="preview-list-user-icon">
<i class="las la-battery-half"></i>
</div>
<div class="preview-list-user-content">
<span>{{ __("Total Fees & Charges") }}</span>
</div>
</div>
</div>
<div class="preview-list-right">
<span class="text--warning fees"></span>
</div>
</div>
<div class="preview-list-item">
<div class="preview-list-left">
<div class="preview-list-user-wrapper">
<div class="preview-list-user-icon">
<i class="las la-money-check-alt"></i>
</div>
<div class="preview-list-user-content">
<span class="last">{{ __("Total Payable Amount") }}</span>
</div>
</div>
</div>
<div class="preview-list-right">
<span class="text--info last payable-amount"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="dashboard-list-area mt-60 mb-30">
<div class="dashboard-header-wrapper">
<h4 class="title">{{ __("Latest Transactions") }}</h4>
<div class="dashboard-btn-wrapper">
<div class="dashboard-btn">
<a href="{{ setRoute('user.transaction.log.add.money') }}" class="btn--base">{{ __("View More") }}</a>
</div>
</div>
</div>
</div>
<div class="dashboard-list-wrapper">
@include('user.components.transaction.index',[
'data' => $transactions
])
</div>
</div>
@endsection
@push('script')
<script>
var baseRate = "{{ get_default_currency_rate() }}";
var baseCurrency = "{{ get_default_currency_code() }}";
var limitText = "{{ __('Limit') }}";
$(document).ready(function () {
var setAmount = $("input[name=amount]").val(100);
var minLimit = $("select[name=payment_gateway] :selected").data('min-limit');
var maxLimit = $("select[name=payment_gateway] :selected").data('max-limit');
var fixedCharge = $("select[name=payment_gateway] :selected").data('fixed-charge');
var percentCharge = $("select[name=payment_gateway] :selected").data('percent-charge');
var rate = $("select[name=payment_gateway] :selected").data('rate');
var code = $("select[name=payment_gateway] :selected").data('code');
var name = $("select[name=payment_gateway] :selected").data('name');
var amount = $("input[name=amount]").val();
if(amount == '' || amount == null){
amount = 0;
}
feesAndChargeCalculation(amount,fixedCharge,percentCharge,rate,code,minLimit,maxLimit,name);
});
$(".amount").keyup(function(){
var amount = $(this).val();
var minLimit = $("select[name=payment_gateway] :selected").data('min-limit');
var maxLimit = $("select[name=payment_gateway] :selected").data('max-limit');
var fixedCharge = $("select[name=payment_gateway] :selected").data('fixed-charge');
var percentCharge = $("select[name=payment_gateway] :selected").data('percent-charge');
var rate = $("select[name=payment_gateway] :selected").data('rate');
var code = $("select[name=payment_gateway] :selected").data('code');
var name = $("select[name=payment_gateway] :selected").data('name');
if(amount == '' || amount == null){
amount = 0;
}
feesAndChargeCalculation(amount,fixedCharge,percentCharge,rate,code,minLimit,maxLimit,name);
});
$("select[name=payment_gateway]").change(function(){
var minLimit = $(this).find(':selected').data('min-limit');
var maxLimit = $(this).find(':selected').data('max-limit');
var fixedCharge = $(this).find(':selected').data('fixed-charge');
var percentCharge = $(this).find(':selected').data('percent-charge');
var rate = $(this).find(':selected').data('rate');
var code = $(this).find(':selected').data('code');
var name = $(this).find(':selected').data('name');
var amount = $(".amount").val();
if(amount == '' || amount == null){
amount = 0;
}
feesAndChargeCalculation(amount,fixedCharge,percentCharge,rate,code,minLimit,maxLimit,name);
});
function feesAndChargeCalculation(amount,fixedCharge,percentCharge,rate,code,minLimit,maxLimit,name){
var exchangeRate = parseFloat(baseRate) / parseFloat(rate);
var totalFixedCharge = parseFloat(fixedCharge) * parseFloat(exchangeRate);
var totalPercentCharge = (parseFloat(percentCharge) * parseFloat(amount)) / 100;
var totalCharge = parseFloat(totalFixedCharge) + parseFloat(totalPercentCharge);
var payableAmount = (parseFloat(amount) + parseFloat(totalCharge)) * rate;
$('.sending-amount').text(parseFloat(amount).toFixed(2) + " " + baseCurrency);
$('.fees').text(totalCharge.toFixed(2) + " " + baseCurrency);
$('.payable-amount').text(payableAmount.toFixed(2) + " " + code);
$(".exchange-rate").text(parseFloat(baseRate).toFixed(2) + " " + baseCurrency + " " + "=" + " " + parseFloat(rate).toFixed(2) + " " + code);
$('.payment-gateway').text(name);
var totalMinLimit = parseFloat(minLimit) * parseFloat(exchangeRate);
var totalMaxLimit = parseFloat(maxLimit) * parseFloat(exchangeRate);
$('.limit').text(limitText + " : " + totalMinLimit.toFixed(2) + " - " + totalMaxLimit.toFixed(2) + " " + baseCurrency);
}
</script>
@endpush
Developer
The base URL for API requests is: