@extends('layouts.main-app')

@section('content')
<div class="container">
    <div class="row justify-content-center gy-4">
        <div class="col-12">
            <div class="page-heading mb-4">
                <h3 class="mb-2">{{ __($pageTitle) }}</h3>
<p>
    @lang('Easily calculate payment gateway fees with our instant charge breakdown. Enter your transaction amount and get transparent cost details for smarter financial decisions.')
</p>

            </div>
            <hr>
        </div>  
        <div class="col-lg-12"> 
            <div class="card style--two">
                <div class="card-header">
                    <h5 class="card-title text-center">{{ __($pageTitle) }}</h5>
                </div>
                <div class="card-body">
                    <div class="card-body__inner">
                        <div class="card-body__left">
                            <form action="" class="form exclude">
                                <div class="form-group">
                                    <label class="form-label">@lang('Select Gateway')</label>
                                    <select class="form--control form-select" name="gateway" required>
                                        <option value="">@lang('Select One')</option>
                                            <option value="bdip">bKash Deposit</option>
                                            <option value="ndip">Nagad Deposit</option>
                                             <option value="bout">bKash Payout</option>
                                            <option value="nout">Nagad Payout</option>
                                    </select>
                                </div> 
                                <div class="form-group">
                                    <label class="form-label">@lang('Amount')</label>
                                    <div class="input--group">
                                        <input type="number" step="any" name="amount" class="form-control form--control" value="{{ old('amount') }}" autocomplete="off" required>
                                        <span class="input-group--text currencyCode">{{ strtoupper(auth()->user()->currency) }}</span>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="card-body__right">
                            <div class="preview-details">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item d-flex justify-content-between">
                                        <span>
                                            <span class="list-group-item__icon"><i class="las la-hand-paper"></i></span>
                                            <span class="fw-bold fs-14">@lang('Limit')</span>
                                        </span>
                                        <span class="fs-15"><span class="min">100</span> {{ strtoupper(auth()->user()->currency) }} - <span class="max">100000</span> {{ strtoupper(auth()->user()->currency) }}</span>
                                    </li>
                                    <li class="list-group-item d-flex justify-content-between">
                                        <span>
                                            <span class="list-group-item__icon"><i class="las la-money-bill-wave"></i></span>
                                            <span class="fw-bold fs-14">@lang('Gateway Charge')</span>
                                        </span>
                                        <span class="fs-15"><span class="charge">0</span> {{ strtoupper(auth()->user()->currency) }}</span>
                                    </li>
                                    <li class="list-group-item d-flex justify-content-between">
                                        <span>
                                            <span class="list-group-item__icon"><i class="las la-money-bill"></i></span>
                                            <span class="fw-bold fs-14">@lang('Payment Charge')</span>
                                        </span>
                                        <span class="fs-15"><span class="payment_charge">0</span> {{ strtoupper(auth()->user()->currency) }}</span>
                                    </li>
                                    <li class="list-group-item d-flex justify-content-between border-bottom-0">
                                        <span>
                                            <span class="list-group-item__icon"><i class="las la-hand-holding-usd"></i></span>
                                            <span class="fw-bold fs-14">@lang('Receivable Amount')</span>
                                        </span>
                                        <span class="fs-15"><span class="payable"> 0</span> {{ strtoupper(auth()->user()->currency) }}</span>
                                    </li>
                                    
                                </ul>
                            </div>
                        </div>                  
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> 
@endsection

@push('script') 
   @push('script')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const gatewaySelect = document.querySelector('select[name="gateway"]');
        const amountInput = document.querySelector('input[name="amount"]');
        
        // Elements for displaying the calculated values
        const chargeElement = document.querySelector('.charge');
        const paymentChargeElement = document.querySelector('.payment_charge');
        const payableElement = document.querySelector('.payable');
        const finalAmountElement = document.querySelector('.final_amo');
        const methodCurrencyElement = document.querySelector('.method_currency');
        
        function calculateCharges() {
            const gateway = gatewaySelect.value;
            const amount = parseFloat(amountInput.value);

            if (!gateway || isNaN(amount)) {
                return;
            }

            let gatewayCharge = 0;
            let paymentCharge = 0;
            let receivableAmount = 0;

            if (gateway === 'bdip') {
                gatewayCharge = (amount * {{ $fees->bkash_p2c }} / 100); 
            } else if (gateway === 'ndip') {
                gatewayCharge = (amount * {{ $fees->nagad_p2c }} / 100); 
            } else if (gateway === 'bout') {
                gatewayCharge = (amount * {{ $fees->bkash_out }} / 100); 
            } else if (gateway === 'nout') {
                gatewayCharge = (amount * {{ $fees->nagad_out }} / 100); 
            }

           
            paymentCharge = 0; 


            if (gateway === 'bdip' || gateway === 'ndip') {
                receivableAmount = amount - gatewayCharge - paymentCharge; // Subtract charges for deposits
            } else if (gateway === 'bout' || gateway === 'nout') {
                receivableAmount = amount - gatewayCharge - paymentCharge; // Subtract charges for payouts
            }

            chargeElement.innerText = gatewayCharge.toFixed(2);
            paymentChargeElement.innerText = paymentCharge.toFixed(2);
            payableElement.innerText = receivableAmount.toFixed(2);
            finalAmountElement.innerText = receivableAmount.toFixed(2);

            methodCurrencyElement.innerText = "{{ strtoupper(auth()->user()->currency) }}";
        }

        gatewaySelect.addEventListener('change', calculateCharges);
        amountInput.addEventListener('input', calculateCharges);

     
        calculateCharges();
    });
</script>

@endpush

@endpush