@extends('layouts.user')
@section('title')
    @lang('Trade Gift Card')
@endsection
@section('breadcrumb')
    @lang('Sell Giftcard')
@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-left">
                    <h3 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>Trade Crypto!</h3>
                </div><!-- .buysell-title -->
                <div class="buysell-block">
                    <form  class="buysell-form" method="post">
                        @csrf
                        <div class="buysell-field form-group">
                            <div class="form-label-group">
                                <label class="form-label">Choose Coin you want to Sell</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($coins as $coin)

                                    <option data-img_src="{{asset('assets/coins_logo').'/'.$coin->logo}}" data-min="{{$coin->min_payment}}" data-ex="{{$coin->rate}}" value="{{$coin->code}}">{{$coin->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 Sell</label>
                            </div>
                            <div class="form-control-group">
                                <input type="number" class="form-control form-control-lg form-control-number" id="buysell-amount" name="amount" placeholder="2000">
                                <div class="form-dropdown">
                                    <div class="text">USD</div>

                                </div>
                            </div>
                            <div class="form-note-group">
                                <span class="buysell-min form-note-alt">Minimum: <span id="min_trade">0.00</span> USD</span>
                                <span class="buysell-rate form-note-alt">1 USD = <span id="rate">0.00</span> NGN</span>
                               <input type="hidden" id="btcrate"/>
                            </div>
                        </div><!-- .buysell-field -->

                        <div class="buysell-field form-action">
                            <button class="btn btn-lg btn-block  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 class="btn btn-lg btn-block btn-primary" id="btn-submit">Continue</button>
                               </div><!-- .buysell-field -->

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

@endsection

@push('script')
    <script type="text/javascript">
        $(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("ex"));
                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-submit").click(function(e){
                e.preventDefault();
                var submitBtn= $("#btn-submit");
                var loadingBtn= $("#loading-btn");

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

                var selectedCrypto = $(this).find('option:selected');
                var amount = parseFloat($('#buysell-amount').val());
                var minTrade =   parseFloat(selectedCrypto.data("min"));
                if(selectedCrypto.val()==""){
                    showNotice('Select coin before continue','error');
                    return;
                }

                if(amount<=minTrade){
                    showAlert('Minimum allow trade amount is '+minTrade,'error');
                }
                loadingBtn.show();
                submitBtn.hide();
                $.ajax({
                    url: "{{route('user.crypto.trade')}}",
                    type: "POST",
                    data: formData,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success:function(response){
                        console.log(response)
                        //  showError(response);
                        loadingBtn.hide();
                        submitBtn.show();
                        // console.log(response);
                        window.location.href = "{{url('user/crypto/track-payment')}}"+"/"+response.data;
                    },
                    error: function(xhr, status, error){

                        //console.log(xhr.responseJSON.message);
                        loadingBtn.hide();
                        submitBtn.show();
                        showAlert(xhr.responseJSON.message, 'error');

                    }
                })
            })

        });

    </script>
    @endpush