@php
$cardSetting = getCardSetting();
@endphp
<div class="modal fade" tabindex="-1" role="dialog" id="fundCard">
    <div class="modal-dialog modal-dialog-centered modal-md" role="document">
        <div class="modal-content">
            <a href="#" class="close" data-bs-dismiss="modal"><em class="icon ni ni-cross-sm"></em></a>
            <div class="modal-body modal-body-lg text-center">
                <form action="{{route('user.virtual-cards.fund-card',$virtualCard->_id)}}" class="form-validate is-alter" novalidate="novalidate" method="post">
                    @csrf
                    <div class="nk-modal">

                        <h4 class="nk-modal-title">Fund Card</h4>
                        <div class="nk-modal-text">
                         <p> Funding Fee ( FREE )
                            0.00 + ( 0.00% of the funding amount )

<br/>
                            Monthly Maintenance fee.
                            Charged monthly to maintain your dollar card.
                            $1.00</p>
                            <div class="buysell-field form-group">
                                <div class="form-label-group">
                                    <label class="form-label" for="buysell-amount">Amount to Fund</label>
                                </div>
                                <div class="form-control-group">
                                    <input type="text" class="form-control form-control-lg form-control-number input-numeral" id="fund-amount" name="funding_amount" placeholder="Funding Amount">
                                    <div class="form-dropdown">

                                        <div class="dropdown">
                                            <a href="#" class="dropdown-indicator-caret" data-bs-toggle="dropdown" data-offset="0,2">USD</a>

                                        </div>
                                    </div>
                                </div>
                                <div class="form-note-group">

                                    <span class="buysell-rate form-note-alt text-danger">1 USD = <span id="rate">{{toMoney($cardSetting->exchange_rate)}}</span> NGN</span>
                                </div>
                            </div><!-- .buysell-field -->
<input type="hidden" id="exchangeRate" value="{{$cardSetting->exchange_rate}}"/>
                              <div class="buysell-field form-group">
                                <div class="form-label-group">
                                    <label class="form-label" for="buysell-amount">Debited Amount From Your Wallet</label>
                                </div>
                                <div class="form-control-group">
                                    <input type="text" readonly class="form-control form-control-lg form-control-number input-numeral" id="deducted-amount" name="fund_amount" placeholder="0">
                                    <div class="form-dropdown">

                                        <div class="dropdown">
                                            <a href="#" class="dropdown-indicator-caret" data-bs-toggle="dropdown" data-offset="0,2">NGN</a>

                                        </div>
                                    </div>
                                </div>

                            </div><!-- .buysell-field -->


                        </div>
                        <div class="nk-modal-action-lg">
                            <ul class="btn-group gx-4">
                                <li>


                                    <button class="btn btn-lg btn-mw btn-primary" type="button" id="loading-btn" disabled style="display: none">            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>            <span>Loading...</span>        </button>

                                    <button type="submit" class="btn btn-lg btn-mw btn-primary confirm-withdraw">Add Fund</button>
                                </li>
                            </ul>
                        </div>

                    </div>
                </form>
            </div><!-- .modal-body -->
            <div class="modal-footer bg-lighter">
                <div class="text-center w-100">
                    <p>Earn a 50% commission on any profit we make from your referral - invite friends now</p>
                </div>
            </div>
        </div><!-- .modal-content -->
    </div><!-- .modla-dialog -->
</div><!-- .modal -->


@push('script')
    <script>
        $(document).ready(function () {
            // Listen for input on the #buysell-amount field
            $('#fund-amount').on('input', function () {

                // Get the value of the input
                let buySellAmount = parseFloat($(this).val()) || 0;

                // Get the exchange rate
                let exchangeRate = parseFloat($('#exchangeRate').val()) || 0;

                // Calculate the result
                let calculatedAmount = buySellAmount * exchangeRate;
                console.log(calculatedAmount);
                // Display the result in #fund-amount
                $('#deducted-amount').val(calculatedAmount.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
            });
        });
    </script>
@endpush()