@foreach($styles as $style)
    <link href="{{ $style }}" rel="stylesheet" type="text/css"/>
@endforeach
<div class="transferWrap wallet eSend col-md-12">
    <form class="transferWizard">
        <div class="postRechargeSuccessBox">
            <span class="fa fa-check check"></span>
            <h3>{{ _mt($moduleId,'Ewallet.recharge_request_completed_sucessfully') }} !!!</h3>
            <div class="invoiceHolder" data-invoice=""></div>
        </div>
        <div id="successMessage">
            <div class="inputs">
                <h2 class="heading"><i class="icon-paper-plane"></i>{{ _mt($moduleId,'Ewallet.recharge_accounts') }}
                </h2>
                <div class="row">
                    <div class="dataPrepare col-md-12">
                        <div class="row" style="display: none">
                            <div class="dataHolder">
                                <div class="col-sm-4">
                                    <label>{{ _mt($moduleId,'Ewallet.tether_address') }}<span class="required"
                                                                                              aria-required="true"> * </span></label>
                                </div>
                                <div class="col-sm-8">
                                    <div class="dataHolder">
                                        <div class="fieldCover">
                                            <input type="text" name="tetherAddress"
                                                   class="syncWithAmount field address"
                                                   value="{{ $tetherAddress}}" readonly>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row" style="display: none">
                            <div class="dataHolder">
                                <div class="col-sm-4">
                                    <label>{{ _mt($moduleId,'Ewallet.trc_address') }}<span class="required"
                                                                                           aria-required="true"> * </span></label>
                                </div>
                                <div class="col-sm-8">
                                    <div class="dataHolder">
                                        <div class="fieldCover">
                                            <input type="text" name="trcAddress"
                                                   class="syncWithAmount field address"
                                                   value="{{ $trcAddress}}" readonly>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row" style="display: none">
                            <div class="dataHolder">
                                <div class="col-sm-4">
                                    <label>{{ _mt($moduleId,'Ewallet.bsc_address') }}<span class="required"
                                                                                           aria-required="true"> * </span></label>
                                </div>
                                <div class="col-sm-8">
                                    <div class="dataHolder">
                                        <div class="fieldCover">
                                            <input type="text" name="bscAddress"
                                                   class="syncWithAmount field address"
                                                   value="{{ $bscAddress}}" readonly>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="dataHolder">
                                <div class="col-sm-4">
                                    <label>{{ _mt($moduleId,'Ewallet.hash') }}<span class="required"
                                                                                    aria-required="true"> * </span></label>
                                </div>
                                <div class="col-sm-8">
                                    <div class="dataHolder">
                                        <div class="fieldCover">
                                            <input type="text" name="hash"
                                                   class="syncWithAmount field hash">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="dataHolder">
                                <div class="col-sm-4">
                                    <label>{{ _mt($moduleId,'Ewallet.choose_wallet') }}<span class="required"
                                                                                             aria-required="true"> * </span></label>
                                </div>
                                <div class="col-sm-8">
                                    <div class="dataHolder">
                                        <div class="fieldCover">
                                            <select class="select2" name="walletType" id="walletType">
                                                <option value="tether">NETWORK ERC-20 (ETHEREUM)</option>
                                                <option value="trc">TRC-20 (TRON)</option>
                                                <option value="bsc">BSC BEP-20 (BINANCE SMART CHAIN)</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row"  id="addressOne">
                        <div class="dataHolder">
                            <div class="col-sm-4">
                                <label>{{ _mt($moduleId,'Ewallet.tether_address') }}</label>
                            </div>
                            <div class="col-sm-8">
                                <div class="dataHolder">
                                    <div class="fieldCover">
                                        <input type="text" name="tetherAddress"
                                               class="syncWithAmount field address"
                                               value="{{ $tetherAddress}}" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row" style="display: none" id="addressTwo">
                        <div class="dataHolder">
                            <div class="col-sm-4">
                                <label>{{ _mt($moduleId,'Ewallet.trc_address') }}</label>
                            </div>
                            <div class="col-sm-8">
                                <div class="dataHolder">
                                    <div class="fieldCover">
                                        <input type="text" name="trcAddress"
                                               class="syncWithAmount field address"
                                               value="{{ $trcAddress}}" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row" style="display: none" id="addressThree">
                        <div class="dataHolder">
                            <div class="col-sm-4">
                                <label>{{ _mt($moduleId,'Ewallet.bsc_address') }}</label>
                            </div>
                            <div class="col-sm-8">
                                <div class="dataHolder">
                                    <div class="fieldCover">
                                        <input type="text" name="bscAddress"
                                               class="syncWithAmount field address"
                                               value="{{ $bscAddress}}" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="row">
                        <div class="dataHolder">
                            <div class="col-sm-4">
                                <label>{{ _mt($moduleId,'Ewallet.amount') }}<span class="required"
                                                                                  aria-required="true"> * </span></label>
                            </div>
                            <div class="col-sm-8">
                                <div class="dataHolder">
                                    <div class="fieldCover">
                                        <input type="number" name="amount"
                                               class="syncWithAmount field amount">
                                        <input type="hidden" name="context" value="recharge">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row form-group save-Bx">
            <div class="col-sm-offset-4 col-md-3">
                <button type="button" class="btn green btn-success ladda-button saveRecharge form-control"
                        data-style="contract">
                    {{ _mt($moduleId,'Ewallet.save') }}
                </button>
            </div>
            <div class="col-sm-12">
                <div class="errorWrapper" style="display: none"></div>
            </div>
        </div>
        <div class="row form-group">
            <div class="col-sm-12">
                <div class="paymentGatewaysWrapper"></div>
            </div>
        </div>

</form>
</div>
<script type="text/javascript">

    $(function () {
        $('.cecAmount').val(1);
        $('select').select2({
            width: '100%'
        });
        changeCurrency($('#currency').val());

        $('#currency').on('change', function () {
            changeCurrency(this.value);
        });

        {{--$(".cecAmount").on('keyup', function () {--}}
        {{--    var cecAmount = this.value;--}}
        {{--    var currency = $("#currency option:selected").text();--}}
        {{--    $.post("{{ scopeRoute("eWallet.cecToTetherConversion") }}", {cecAmount: cecAmount,currency: currency}, function (response) {--}}
        {{--        $('.tetherAmount').val(response.amount);--}}
        {{--        Ladda.stopAll();--}}
        {{--    }).fail(function () {--}}
        {{--        Ladda.stopAll();--}}
        {{--    });--}}
        {{--});--}}
    });
    $('.saveRecharge').click(function () {
        let errorWrapper = $('.errorWrapper').slideUp().empty();
        var formData = $('.transferWizard').serialize();

        $.post('{{ scopeRoute("eWallet.saveRecharge") }}', formData, function (response) {
            Ladda.stopAll();
            // $('#successMessage').hide();
            // $('.save-Bx').hide();
            // loadPaymentGateways("recharge", '.paymentGatewaysWrapper').done(function (response) {
            //     window.targetForm = $('.transferWizard');
            //     $('html, body').animate({
            //         scrollTop: $(".transferWizard").offset().top
            //     }, 2000);
            // });
            $('.postRechargeSuccessBox').slideDown().promise().done(function () {
                $('.postRechargeSuccessBox span.check').addClass('success');
                $(".saveRecharge").hide()
            });
            $('#successMessage').slideUp();
        }).fail(function (response) {
            Ladda.stopAll();
            let errors = response.responseJSON;
            for (let key in errors)
                errorWrapper.append('<div class="error">' + errors[key] + '</div>');
            errorWrapper.slideDown();
        });
    });

    $( "#walletType" ).change(function(){
        if ($(this).val() == 'tether')
        {
            $("#addressOne").show()
            $("#addressTwo").hide()
            $("#addressThree").hide()
        }
        else if ($(this).val() == 'trc')
        {
            $("#addressOne").hide()
            $("#addressTwo").show()
            $("#addressThree").hide()
        }
        else if ( $(this).val() == 'bsc')
        {
            $("#addressOne").hide()
            $("#addressTwo").hide()
            $("#addressThree").show()
        }
    });

    function changeCurrency(val) {
        var cecAmount = $('#cecAmount').val()
        $.post("{{ scopeRoute("eWallet.getCurrencyAddress") }}", {id: val, cecAmount: cecAmount}, function (response) {
            $('.tetherAddress').val(response.address);
            $('.tetherAmount').val(response.amount);
            // $('.cecAmount').val(1);
        })
    }
</script>
<style>
    .dataHolder label {
        word-break: break-all;
    }
     .select2-container--default .select2-selection--single .select2-selection__rendered {
         color: #444;
         line-height: 24px !important;
     }
</style>