@extends('layouts.user')
@section('title')
    Create USD Virtual Card
@endsection
@section('breadcrumb')

@endsection
@section('content')


    <div class="nk-content nk-content-fluid">
        <div class="container-xl wide-lg">
            <div class="nk-content-body">
                <div class="buysell wide-xs m-auto">

                    <div class="buysell-title text-center">
                        <h2 class="title"><a href="#" onclick="history.go(-1)" class="btn btn-icon btn-trigger nk-chat-hide ms-n1 d-lg-none "><em class="icon ni ni-arrow-left "></em></a>Create Virtual Card</h2>
                    </div><!-- .buysell-title -->
                    <div class="buysell-block">
                <form  class="buysell-form" method="post" action="{{route('user.virtual-cards.store') }}" id="createCardForm">
                    @csrf

                    <div class="buysell-field form-group">
                        <div class="form-label-group">
                            <label class="form-label">Choose what you want to get</label>
                        </div>
                        <ul class="nk-kycfm-control-list g-3">
                            <li class="nk-kycfm-control-item">
                                <input class="nk-kycfm-control"  value="Mastercard" type="radio" name="card_type" id="mastercard" data-title="mastercard" checked="">
                                <label class="nk-kycfm-label" for="mastercard">
                                                            <span class="nk-kycfm-label-icon" style="font-size:40px">

                                                                    <i class="icon ni ni-master-card"></i>

                                                            </span>
                                    <span class="nk-kycfm-label-text">MasterCard</span>
                                </label>
                            </li><!-- .nk-kycfm-control-item -->
                            <li class="nk-kycfm-control-item">
                                <input class="nk-kycfm-control" value="Visa" required type="radio" name="card_type" id="visa" data-title="visa Card">
                                <label class="nk-kycfm-label" for="visa">
                                                            <span class="nk-kycfm-label-icon" style="font-size:40px">

                                                                      <i class="icon ni ni-visa"></i>

                                                            </span>
                                    <span class="nk-kycfm-label-text">Visa Card</span>
                                </label>
                            </li><!-- .nk-kycfm-control-item -->

                        </ul>
                        <div class="nk-block">
                            <div class="card card-bordered">
                                <div class="card-inner card-inner-lg">
                                    <div class="nk-kyc-app p-sm-2 text-center">
                                        <div class="nk-kyc-app-icon">
                                            <em class="icon ni ni-files"></em>
                                        </div>
                                        <div class="nk-kyc-app-text mx-auto">
                                            <p class="lead">Card Issue Fees: ${{$virtualCardSetting->issuing_fee}}.</p>

                                             <p class="lead">Please make sure your wallet is fund with enough fund</p>
                                            <div class="nk-modal-text">
                                                <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($virtualCardSetting->exchange_rate)}}</span> NGN</span>
                                                        <span class="buysell-rate form-note-alt text-danger">Minimum Funding <span id="minimum">${{$virtualCardSetting->minimum_funding}}</span></span>
                                                    </div>
                                                </div><!-- .buysell-field -->
                                                <input type="hidden" id="exchangeRate" value="{{$virtualCardSetting->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>
                                        <div class="nk-kyc-app-action">
                                            <button type="submit"  class="btn btn-lg btn-primary" id="createBtn">Create Card</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

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


@endsection


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

                            let cardIssueFees = parseFloat("{{$virtualCardSetting->issuing_fee}}")|| 0;

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

                            // Get the exchange rate
                            let exchangeRate = parseFloat("{{$virtualCardSetting->exchange_rate}}") || 0;
let issueFeesNGN=cardIssueFees*exchangeRate;
                            // Calculate the result
                            let calculatedAmount = (buySellAmount * exchangeRate)+issueFeesNGN;
                            console.log(calculatedAmount);
                            // Display the result in #fund-amount
                            $('#deducted-amount').val(calculatedAmount.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
                        });

                        $("#createBtn").click(function (e) {
                            // Prevent default button behavior
                            e.preventDefault();

                            // Get the funding amount value
                            var fundingAmount = parseFloat($("#fund-amount").val());
let minimumFunding = parseFloat("{{$virtualCardSetting->minimum_funding}}");
                            // Check if the funding amount is less than 4
                            if (fundingAmount < minimumFunding || isNaN(fundingAmount)) {
                                showAlert("Funding amount must be at least ${{ $virtualCardSetting->minimum_funding }}.", 'error');
                            } else {
                                // Show the modal
                                $("#createCardForm").submit();
                            }
                        });
                    });
                </script>

    @endpush()