@extends('layouts.user')
@section('title')
    @lang('Buy  Crypto')
@endsection
@section('breadcrumb')
    @lang('Buy Crypto')
@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>What do you want to buy!</h2>
                    </div><!-- .buysell-title -->
                    <div class="buysell-block">
                        <form action="#" class="buysell-form">

                                @csrf
                                <div class="buysell-field form-group">
                                    <div class="form-label-group">
                                        <label class="form-label">Choose what you want to get</label>
                                    </div>
                                    <input type="hidden" value=""  id="cryto_rate">
                                    <select id="select-crypto" class="form-control selected_crypto" name="coin" style="width: 200px;">
                                        <option value="" data-min="">Select crypto type</option>
                                        @foreach($assets as $asset)
                                            @php
                                                $rate = getExchangeRate($asset->blockchain_code,'USD');

                                            @endphp

                                            <option data-img_src="{{asset('assets/coins_logo').'/'.strtolower($asset->blockchain_code).'.png'}}" data-min="{{$asset->coin?->min_selling}}" data-code="{{$asset->blockchain_code}}" data-ngrate="{{$asset->coin?->rate}}" data-coinrate="{{$rate}}"  value="{{$asset->virtual_account_id}}">{{$asset->blockchain_name}} </option>

                                        @endforeach
                                    </select>

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

                            <div class="buysell-field form-group">
                                <div class="form-label-group">
                                    <label class="form-label" for="buysell-amount">Amount to Buy</label>
                                </div>
                                <div class="form-control-group">
                                    <input type="text" class="form-control form-control-lg form-control-number input-numeral" id="buysell-amount" name="bs-amount" placeholder="30000">
                                    <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 class="form-note-group">
                                    <span class="buysell-min form-note-alt">Minimum: <span id="min_trade">50,000.00</span> NGN</span>
                                    <span class="buysell-rate form-note-alt">1 USD = <span id="rate">1,600</span> NGN</span>
                                </div>
                            </div><!-- .buysell-field -->
                            <div class="buysell-field form-group">
                                <div class="form-label-group">
                                    <label class="form-label">Payment Method</label>
                                </div>
                                <div class="form-pm-group">
                                    <ul class="buysell-pm-list">
                                        <li class="buysell-pm-item">
                                            <input class="buysell-pm-control" type="radio" name="bs-method" value="Wallet" id="pm-balance" />
                                            <label class="buysell-pm-label" for="pm-balance">

                                                <span class="pm-name">Wallet Balance ({{toMoney(Auth()->user()->getTotalWalletBalance())}})<br>
                                                <a href="#" class="link" data-bs-toggle="modal" data-bs-target="#modalDeposit"><span>Fund Wallet</span> <em class="icon ni ni-wallet-out"></em></a></span>
                                                <span class="pm-icon"><em class="icon ni ni-wallet-alt"></em></span>
                                            </label>
                                        </li>

                                        <li class="buysell-pm-item">
                                            <input class="buysell-pm-control" type="radio" name="bs-method" value="Card" id="pm-card" />
                                            <label class="buysell-pm-label" for="pm-card">
                                                <span class="pm-name">Credit / Debit Card</span>
                                                <span class="pm-icon"><em class="icon ni ni-cc-alt-fill"></em></span>
                                            </label>
                                        </li>
                                    </ul>
                                </div>
                            </div><!-- .buysell-field -->
                            <div class="buysell-field form-action">
                                <a class="btn btn-lg btn-block btn-primary" id="btn-buy"  href="#buy-coin">Continue to Buy</a>
                            </div><!-- .buysell-field -->
                            <div class="form-note text-base text-center">Note: our transfer fee included, <a href="#">see our fees</a>.</div>
                        </form><!-- .buysell-form -->
                    </div><!-- .buysell-block -->
                </div><!-- .buysell -->
            </div>
        </div>
    </div>
@include('user.crypto._confirming_order_modal')
@include('user.crypto.confirm_wallet')
@endsection

@push('script')
    <script type="text/javascript">
        var cleaveNumeral = new Cleave('#buysell-amount', {
            numeral: true,
            numeralThousandsGroupStyle: 'thousand'
        });
        $(document).ready(function () {
            function custom_template(obj) {
                var data = $(obj.element).data();
                var text = $(obj.element).text();
                if (data && data['img_src']) {
                    img_src = data['img_src'];
                    template = $("<div><img src=\"" + img_src + "\" style=\"width:20px;height:20px;margin-right:10px;\"/><span>" + text + "</span></div>");
                    return template;
                }else{
                    template = $("<div><span>" + text + "</span></div>");
                    return template;
                }
            }

            $('#select-crypto').val('').trigger('change');
            var options = {
                templateSelection: custom_template,
                templateResult: custom_template,
            };
            $('#select-crypto').select2(options);
            $('.select2-container--default .select2-selection--single').css({
                'height': '40px'
            });
            $("#buysell-amount").on("input", function() {
                var amount = $(this).val();
                var cryptoAmt = 0;

                cryptoAmt= parseFloat($('#btcrate').val());
                var cryptAmtConverted = parseFloat(cryptoAmt * amount).toFixed(6);
                $('#amt_crypto').html(cryptAmtConverted);
            })


            $('.selected_crypto').change(function(){

                var selectedCrypto = $(this).find('option:selected');
                var minTrade =   selectedCrypto.data("min");
                var rate =   parseFloat(selectedCrypto.data("ngrate"));
                var amount = parseFloat($('#buysell-amount').val());
                var cryptoAmt = 0;
                var amtNaira =0;
                var amtCrypto = 0;

                $('#min_trade').html(minTrade);
                $('#rate').html(rate);
                //console.log(selectedCrypto.val());
                $.ajax({
                    url:"{{url('user/crypto/get-rate')}}/"+selectedCrypto.val(),
                    type:'GET',
                    success: function(response){
                        cryptoAmt=parseFloat(response.rate);
                        $('#crypto_rate').val(cryptoAmt);
                       // amtNaira =amount * rate;
                       // console.log(amtNaira);
                     //   $('#amt_naira').html(amtNaira.toLocaleString());
                        //var percent = amount*(0.)
                   //     $('#btcrate').val(cryptoAmt)
                      //  var cryptAmtConverted = parseFloat(cryptoAmt * amount).toFixed(6);
                      //  $('#amt_crypto').html(cryptAmtConverted);

                    },
                    error: function(xhr, status, error){

                    }
                });

            })



            $("#btn-buy").click(function(e){
                e.preventDefault();
                var submitBtn= $("#btn-buy");
               // var loadingBtn= $("#loading-btn");

               // var formData = $('.buysell-form').serialize();

                var selectedCrypto = $(".selected_crypto").find('option:selected');
                var amount = parseFloat(cleaveNumeral.getRawValue());

               // var address = $('#receiving_address').val();
                var minTrade =   parseFloat(selectedCrypto.data("min"));
                var pmMethod  = $('input[name="bs-method"]:checked');

                if(selectedCrypto.val() == ""){

                    showAlert('Select coin before continue','error');
                    return;
                }
               /* if(address==""){
                    showAlert('Receiving Address is required to continue','error');
                    return;
                }*/


                if(pmMethod.val()=="" || pmMethod.val()==undefined){
                    showAlert('Choose your payment method','error');
                    return;
                }

                if(amount=='' || isNaN(amount)){
                    showAlert('Please Specify Amount you want to buy','error');
                }
                if(amount<=minTrade){
                    showAlert('Minimum allow trade amount is '+minTrade,'error');
                }
               // loadingBtn.show();
               // submitBtn.hide();
                let cfsToken = '{{ csrf_token() }}';
                var modal = $('#buy-coin');

                // Get the modal body element
                var modalBody = modal.find('#modalBody');
                $.ajax({
                    url: "{{route('user.crypto.confirm-buy')}}",
                    type: "POST",
                    data: {amount: amount,   _token: cfsToken, coin: selectedCrypto.val(),  payment_method: pmMethod.val()},
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success:function(response){
                       // console.log("success")
modalBody.html(response);
                        modal.modal("show");

                        //  showError(response);

                        // console.log(response);
                       // window.location.href = "{{url('user/crypto/track-payment')}}"+"/"+response.data;
                    },
                    error: function(xhr, status, error){

                        //console.log(xhr.responseJSON.message);

                        showAlert(xhr.responseJSON.message, 'error');

                    }
                })
            })
            $("#btn-confirm-coin").click(function(e){
                e.preventDefault();
              //  alert("you click");
                var submitBtn= $("#btn-confirm-coin");
                var loadingBtn= $("#loading-btn");
                var modal = $('#buy-coin');
                var modalConfirm = $('#confirm-coin');
                var pmMethod  = $('input[name="bs-method"]:checked');

               // var formData = $('.buysell-form').serialize();


                var orderId = $('#order_id').val();
                if(orderId==""){
                    showAlert('Unable to confirm your order please try again','error');
                    modal.modal("hide");
                    return;
                }
                if(pmMethod.val()=='Wallet') {
                    modalConfirm.modal('show');
                }else if(pmMethod.val()=='Card' || pmMethod.val()=='Bank'){

                    let cfsToken = '{{ csrf_token() }}';

                    $.post('{{route('user.crypto.confirm-orderbycard')}}',{   _token: cfsToken, orderId: orderId},function (res) {
                       // showAlert(res.message,'success');

                        // $("#account_name").val(res);
                        $('#btn-confirm-coin').prop('disabled', false);
                        loadingBtn.hide();
                        submitBtn.show();
                        var id = res.orderId;
                        $('#modal-confirm').modal('hide');

                        location.href = res.url;
                    })
                        .fail(function(xhr, status, error) {
                            // request failed
                            //   console.log('iget here');
                            loadingBtn.hide();
                            submitBtn.show();
                            showAlert(xhr.responseJSON.message,'error');
                        });
                }

               // loadingBtn.show();
               // submitBtn.hide();

            })

            $('.confirm-withdraw').on('click', function(){
               // e.preventDefault();
                var loadingBtn = $('#loading-btn');
                var saveBtn = $(this);

                loadingBtn.show();
                saveBtn.hide();
               // var selectedBeneficiary = $('.account option:selected')
               // var selectedWallet = $('.wallet option:selected')
               // var amount = parseFloat($(".amount").val());
                var password = $(".withdraw-password").val();


                if(password==''){
                    showAlert('@lang('Please input your password')','error');
                    loadingBtn.hide();
                    saveBtn.show();
                    return false;
                }
                let cfsToken = '{{ csrf_token() }}';

                $.post('{{route('user.crypto.confirm-orderbywallet')}}',{   _token: cfsToken, password: password},function (res) {
                    showAlert(res.message,'success');

                    // $("#account_name").val(res);
                    $('.savebtn').prop('disabled', false);
                    loadingBtn.hide();
                    saveBtn.show();
                    var id = res.orderId;
                    $('#modal-confirm').modal('hide');
                    var url = "{{ route('user.crypto.confirm-payment', ['id' => ':id']) }}";
                    url = url.replace(':id', id);
                    location.href = url;
                })
                    .fail(function(xhr, status, error) {
                        // request failed
                        //   console.log('iget here');
                        loadingBtn.hide();
                        saveBtn.show();
                        showAlert(xhr.responseJSON.message,'error');
                    });
            });
        });

    </script>
    @endpush