@section('title', '- Change your ebits')

@extends('layouts.user-profile', ['withOutAside' => false])

@section('section-body')
    @include('loader')
    <div class="panel-content">
        <h2>@lang('ebit.title_change_ebits')</h2>
        <br>
        <div class="row">
            <legend class="subtitle">
                @lang('ebit.title_change_ebits_sub')
                <span class="coin_text">
                    <img src="imagenes/coin.png" class="coin" />
                    <b class="available">{{ $user->ebits }}</b> @lang('ebit.available')
                </span>
            </legend>
        </div>

        <div class="row w-100 mt-5 mt-md-0">
            <div class="col-6 col-md-3">
                <div class="ellipse ellipse-active center-block" id="bank-ellipse">
                    <a class="btn-tab" href="#bank" aria-controls="bank" role="tab" data-toggle="tab">
                        <img src="{{ url('/imagenes/ebits-pay/cash.png') }}" class="img-responsive center-block" alt="">
                    </a>
                </div>
                <p class="text-center text-light text-big">@lang('ebit.local_coin')</p>
            </div>

            <div class="col-6 col-md-3">
                <div class="ellipse center-block" id="bitcoin-ellipse">
                    <a class="btn-tab" href="#bitcoin" aria-controls="bitcoin" role="tab" data-toggle="tab">
                        <img src="{{ url('/imagenes/ebits-pay/btn.png') }}" class="img-responsive center-block" alt="">
                    </a>
                </div>
                <p class="text-center text-light text-big">Bitcoins</p>
            </div>

            <div class="col-6 col-md-3">
                <div class="ellipse center-block" id="eth-ellipse">
                    <a class="btn-tab" href="#eth" aria-controls="eth" role="tab" data-toggle="tab">
                        <img src="{{ url('/imagenes/ebits-pay/ethereum.png') }}" class="img-responsive center-block"
                            style="hegith: 40px;">
                    </a>
                </div>
                <p class="text-center text-light text-big">Ethereum</p>
            </div>

            <div class="col-6 col-md-3">
                <div class="ellipse center-block" id="others-ellipse">
                    <a class="btn-tab" href="#others" aria-controls="bank" role="tab" data-toggle="tab">
                        <img src="{{ url('/imagenes/ebits-pay/credit-card.png') }}" class="img-responsive center-block"
                            style="hegith: 40px;">
                    </a>
                </div>
                <p class="text-center text-light text-big">@lang('ebit.other_coin')</p>
            </div>

            <div class="col-md-12">
                <hr>
                <div class="row">
                    <div class="col-md-4">
                        <label>@lang('ebit.amount')</label>
                        <div class="form-group">
                            <div class="input-group">
                                <input type="text" class="form-control amount" id="amount"
                                    placeholder="@lang('ebit.amount')">
                                <div class="input-group-addon addon-right">eBits</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <label for="">Fee</label>
                        <input type="text" class="form-control" name="tax_total" id="tax_total" value="0.00" disabled>
                    </div>
                    <div class="col-md-4">
                        <label for="">@lang('ebit.tot_to_pay')</label>
                        <input type="text" class="form-control" name="amount_total" id="amount_total" value="0.00" disabled>
                    </div>
                </div>
                <hr>
            </div>

            <div class="col-md-12">
                <div class="tab-content">
                    <!--Bank-->
                    <div role="tabpanel row" class="tab-pane active" id="bank">
                        <div class="col-md-12">
                            <legend class="subtitle">@lang('ebit.info_msg1')</legend>
                        </div>
                        @if (count($accounts) == 0)
                            <div class="col-md-12">
                                <a href="user" class="btn btn-ebit">@lang('ebit.info_msg2')</a>
                            </div>
                        @else
                            <div class="col-md-6">
                                <label>@lang('ebit.info_msg3') / <a href="user">@lang('ebit.admin_accounts')</a></label>
                                <select class="form-control" id="bank-selector">
                                    @foreach ($accounts as $account)
                                        <option value="{{ $account->id }}" data-bank="{{ $account->bank }}"
                                            data-number="{{ $account->account_number }}">{{ $account->bank }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                @if (count($accounts) > 0)
                                    <br>
                                    <p class="text-medium"><strong>@lang('profile.bank'): </strong><span
                                            id="bank-name">{{ $accounts[0]->bank }}</span></p>
                                    <p class="text-medium"><strong>@lang('profile.account_number'): </strong> <span
                                            id="bank-account">{{ $accounts[0]->account_number }}</span></p>
                                @endif
                            </div>
                            <div class="col-md-12">
                                <button type="button" class="btn btn-ebit center-block process btn-banks" name="button"
                                    id="btn_bank" data-type="discharge" disabled>@lang('ebit.proccess_change')</button>
                            </div>
                        @endif
                    </div>

                    <!--bitcoin-->
                    <div role="tabpanel row" class="tab-pane" id="bitcoin">
                        <div class="col-md-12">
                            <legend class="subtitle">@lang('ebit.info_msg4')</legend>
                        </div>

                        <div class="col-md-12">

                            <div class="form-group row">
                                <label for="">Wallet</label>
                                <input type="text" class="form-control" id="wallet_btc">
                                <br>
                                <div class="col-md-12">
                                    <button type="button" class="btn btn-ebit process center-block" style=""
                                        data-type="trade" name="button" disabled>@lang('ebit.proccess_change')</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div role="tabpanel row" class="tab-pane" id="eth">
                        <div class="col-md-12">
                            <legend class="subtitle">@lang('ebit.info_msg4')</legend>
                        </div>

                        <div class="col-md-12">

                            <div class="form-group row">
                                <label class="sr-only" for="exampleInputAmount">wallet btc</label>

                                <label for="">Wallet</label>
                                <input type="text" class="form-control" id="walleteth">
                                <br>
                                <div class="col-md-12">
                                    <button type="button" class="btn btn-ebit process center-block" data-type="trade"
                                        name="button" disabled>@lang('ebit.proccess_change')</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div role="tabpanel row" class="tab-pane" id="others">
                        <div class="col-md-12">
                            <legend class="subtitle">@lang('ebit.info_msg4')</legend>
                        </div>

                        <div class="col-md-12">
                            <label for="">@lang('ebit.select_title')</label>
                            <select class="form-control" name="" id="buy_currency">
                                <option selected>Select Cryptocurrency</option>
                                @foreach ($currencies as $currencie)
                                    @if ($currencie->id > 6)
                                        <option value="{{ $currencie->id }}|{{ $currencie->symbol }}"
                                            data-symbol="{{ $currencie->symbol }}" selected>
                                            {{ $currencie->name . ' - ' . $currencie->symbol }}</option>
                                    @endif
                                @endforeach
                            </select>
                            <br>
                            <div class="row">
                                <div class="col-md-4">
                                    <label>@lang('ebit.amount')</label>
                                    <div class="form-group">
                                        <div class="input-group">
                                            <input type="text" class="form-control amount" id="amountother"
                                                placeholder="@lang('ebit.amount')">
                                            <div class="input-group-addon addon-right">eBits</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <label>Fee</label>
                                    <input type="text" class="form-control" name="tax_total" id="tax_total_o" value="0.00"
                                        disabled>
                                </div>
                                <div class="col-md-4">
                                    <label>@lang('ebit.tot_to_pay')</label>
                                    <input type="text" class="form-control" name="amount_total" id="amount_total_o"
                                        value="0.00" disabled>
                                </div>
                            </div>
                            <hr>
                            <div class="form-group row">
                                <label>Wallet</label>
                                <input type="text" class="form-control" id="walletother">
                                <br>
                                <div class="col-md-12 mt-4">
                                    <button type="button" class="btn btn-ebit process center-block" data-type="trade"
                                        name="button" disabled>@lang('ebit.proccess_change')</button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
@endsection

@push('css')
    <style media="screen">
        .addon-left {
            border-radius: 15px 0px 0px 15px;
        }

        .addon-right {
            border-radius: 0px 15px 15px 0px;
        }

    </style>
@endpush
@push('js')
    <script type="text/javascript">
        $('.btn-tab').on('click', function() {
            var element = $(this).attr('href');

            if (element == '#others')
                $("#amount").attr('disabled', true);
            else
                $("#amount").attr('disabled', false);

            $("#amount_total").val("");
            $("#tax_total").val("");
            $("#amount").val("");
            $(".process").prop('disabled', true);
            $('.ellipse-active').removeClass('ellipse-active');
            $(element + "-ellipse").addClass('ellipse-active');

        });
    </script>

    <script type="text/javascript">
        $('.amount').mask('0000.00', {
            reverse: true
        });
        $(document).on('change', '#bank-selector', function() {
            $('#bank-name').html($(this).find(':selected').data('bank'))
            $('#bank-account').html($(this).find(':selected').data('number'))
        });

        $(document).on('focusout', '#amount', function() {
            if ($(this).val() > parseFloat("{{$user->ebits}}")) {
                swal('Invalid Amount', 'The amount is invalid, the ebits you want to change is more than you have.',
                    'warning').then(() => {
                    $(this).val('')
                });
                return;
            }
            if ($(this).val() != "" && $(this).val() >= 1) {
                var type_coin = '3';
                // var type = $(".tab-pane.active").attr('id');
                var type = $(".ellipse-active").attr('id');
 
                var token = $('#token').val();
                var amount = $('#amount').val();
                if (type == 'bank-ellipse'){
                    //bank
                    type="bank";
                    var symbol = 'USD';
                }else if (type == 'bitcoin-ellipse'){
                    var symbol = 'BTC';
                    type="bitcoin";
                }
                else if (type == 'eth-ellipse'){
                    var symbol = 'ETH';
                    type="eth";

                }
                else if (type == 'others-ellipse') {
                    type="others";
                    amount = $(this).val();
                    type_coin = $("#buy_currency").val();
                }
                $.ajax({
                    url: '{{ url('/calculate') }}',
                    headers: {
                        'X-CSRF-TOKEN': token
                    },
                    type: 'POST',
                    dataType: 'JSON',
                    data: {
                        amount: amount,
                        type: type,
                        type_coin: type_coin
                    },
                    success: function(res) {

                        $("#tax_total").val(res.values.fee + ' eBits');
                        $("#amount_total").val(res.values.amount);
                        if ($("#amount_total").val() > 0) {
                            $(".process").prop('disabled', false);
                        } else {
                            $(".process").prop('disabled', true);
                        }
                        $("#amount_total").val(res.values.amount + ' ' + symbol);
                    },
                    error: function(xhr, status, errorThrown) {
                        swal("Ooops!", "An unexpected error occurred, try more later.", "error");
                    },
                });
            } else {
                $("#amount_total").val("");
                $("#tax_total").val("");
            }
        });


        $(document).on('focusout', '#amountother', function() {
            if ($(this).val() > parseFloat("{{$user->ebits}}")) {
                swal('Invalid Amount', 'The number of available ebits is less than the amount you want to change.',
                    'warning').then(() => {
                    $(this).val('')
                });
                return;
            }
            if ($(this).val() != "" && $(this).val() >= 1) {
                var type_coin = '3';
                // var type = $(".tab-pane.active").attr('id');
                var type = $(".ellipse-active").attr('id');

                var token = $('#token').val();
                var amount = $('#amount').val();

                if (type == 'others-ellipse') {
                    type="others";
                    amount = $(this).val();
                    type_coin = $("#buy_currency").val();
                    var coin = $("#buy_currency option:selected").text();
                    separador = "|";
                    limite = 2;
                    arregloDeSubCadenas = type_coin.split(separador, limite);
                    symbol = arregloDeSubCadenas[1];
                    type_coin = arregloDeSubCadenas[0];
                }
                loading()
                $.ajax({
                    url: '{{ url('/calculate') }}',
                    headers: {
                        'X-CSRF-TOKEN': token
                    },
                    type: 'POST',
                    dataType: 'JSON',
                    data: {
                        amount: amount,
                        type: type,
                        type_coin: type_coin
                    },
                    success: function(res) {

                        $("#tax_total_o").val(res.values.fee + ' eBits');
                        $("#amount_total_o").val(res.values.amount);
                        if ($("#amount_total_o").val() > 0) {
                            $(".process").prop('disabled', false);
                        } else {
                            $(".process").prop('disabled', true);
                        }
                        $("#amount_total_o").val(res.values.amount + ' ' + symbol);
                    },
                    error: function(xhr, status, errorThrown) {
                        swal("Ooops!", "An unexpected error occurred, try more later.", "error");
                    },
                    complete: function() {
                        loading(false)
                    }
                });
            } else {
                $(this).val('')
                $("#amount_total").val("");
                $("#tax_total").val("");
            }
        });

        $(document).on('click', '.process', function() {
            var select_cripto = $(".ellipse-active").attr('id');
            var id_currency = 1; //ebit by default
            var amount = $('#amount').val();
            switch (select_cripto) {
                case 'bitcoin-ellipse':
                    id_currency = 3;
                    var wallet = $("#wallet_btc").val();
                    break;
                case 'eth-ellipse':
                    id_currency = 6;
                    var wallet = $("#walleteth").val();
                    break;
                case 'others-ellipse':
                    id_currency = $("#buy_currency").val();
                    amount = $('#amountother').val();
                    var wallet = $("#walletother").val();
                    separador = "|";
                    limite = 2;
                    arregloDeSubCadenas = id_currency.split(separador, limite);
                    id_currency = arregloDeSubCadenas[0];
                    break;
            }
            var type = $(this).data('type');
            var $btn = $(this).button('loading');
            var token = $('#token').val();
            //var wallet = $("#wallet_btc").val();
            var account = $('#bank-selector').val();
            loading();
            $.ajax({
                url: '{{ url('/withdrawal') }}',
                headers: {
                    'X-CSRF-TOKEN': token
                },
                type: 'POST',
                dataType: 'JSON',
                data: {
                    amount: amount,
                    account: account,
                    type: type,
                    wallet: wallet,
                    currency: id_currency
                },
                success: function(res) {
                    $btn.button('reset');
                    if (res.code == 401)
                        window.location.replace('{{ url('/login') }}')
                    else if (res.code == 400) {
                        swal("Ooops!", res['message'], "error");
                    } else if (res.code == 200) {
                        swal(
                            "Congratulations",
                            "The deposit will be available in your account in 48 hours.",
                            "success",
                        ).then(() => {
                            window.location.href = 'account/transactions';
                        });
                    } else if (res.code == 422) {
                        swal("Ooops!",
                            "The number of available ebits is less than the amount you want to change.",
                            "error");
                    } else {
                        swal("Ooops!",
                            "An unexpected error occurred, try to submit your question later.",
                            "error");
                    }
                },
                error: function(xhr, status, errorThrown) {

                    $btn.button('reset')
                    swal("Ooops!", "An unexpected error occurred, try to submit your question later.",
                        "error");
                },
                complete: function() {
                    loading(false)
                }
            });
        });
    </script>
@endpush