@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">
                    <h4 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>WAITING FOR PAYMENT!!!</h4>
                </div><!-- .buysell-title -->
                <div class="buysell-block">

                        <div class="card card-bordered ml-lg-4 ml-xl-0">
                            <div class="card-header">
                               <h4>Expire in <span id="countdown">0.00</span></h4>
                            </div>
                            <div class="nk-iv-wg4">

                                <div class="nk-iv-wg4-sub">
                                    <ul class="nk-iv-wg4-list">
                                        <li>
                                            <div class="lead-text">Send {{$getPayment->pay_currency}}<br/>
                                            <b>Status: </b> <span class="status">Waiting</span></div>

                                            <div class="caption-text text-primary"> {{QrCode::size(100)->generate($getPayment->pay_address)}}</div>
                                        </li>
                                    </ul>
                                </div><!-- .nk-iv-wg4-sub -->
                                <div class="nk-iv-wg4-sub">

                                    <div class="nk-refwg-url">
                                        <div class="form-control-wrap">
                                            <div class="form-clip clipboard-init" data-clipboard-target="#refUrl" data-success="Copied" data-text="Copy Link"><em class="clipboard-icon icon ni ni-copy"></em> <span class="clipboard-text">Copy</span></div>
                                            <div class="form-icon">
                                                <em class="icon ni ni-link-alt"></em>
                                            </div>
                                            <input type="text" class="form-control copy-text" id="refUrl" value="{{$getPayment->pay_address}}">
                                        </div>
                                    </div>
                                </div><!-- .nk-iv-wg4-sub -->

                                <div class="nk-iv-wg4-sub">
                                    <ul class="nk-iv-wg4-list">
                                        <li>
                                            <div class="lead-text">Expecting Amount </div>
                                            <div class="caption-text text-primary">{{number_format($getPayment->pay_amount, 6)}} {{$getPayment->pay_currency}}</div>
                                        </li>
                                    </ul>
                                </div><!-- .nk-iv-wg4-sub -->
                                <div class="nk-iv-wg4-sub">
                                    <ul class="nk-iv-wg4-list">
                                        <li>
                                            <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-block btn-primary payment-sent" data-address="{{$getPayment->pay_address}}" data-coin="{{$getPayment->pay_currency}}" data-id="{{$getPayment->order_id}}">Payment Sent</button>
                                            </li>
                                    </ul>
                                </div><!-- .nk-iv-wg4-sub -->
                            </div><!-- .nk-iv-wg4 -->
                        </div><!-- .card -->

                </div>
            </div>

            </div>


        </div>
    </div>


@endsection

@push('script')
    <script type="text/javascript">
        $(document).ready(function() {
            var totalSeconds = 2000; // Total duration in seconds (5 minutes and 50 seconds)
            var countdownElement = $("#countdown");

            // Function to update the countdown
            function updateCountdown() {
                var minutes = Math.floor(totalSeconds / 60);
                var seconds = totalSeconds % 60;

                countdownElement.text(minutes.toString().padStart(2, '0') + ":" + seconds.toString().padStart(2, '0'));

                if (totalSeconds <= 0) {
                    clearInterval(countdownInterval);
                    countdownElement.text("Payment Expired");
                }

                totalSeconds--;
            }

            // Start the countdown
            var countdownInterval = setInterval(updateCountdown, 1000); // Update every second

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

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

                //var selectedCrypto = $(this).find('option:selected');
                var address = $(this).data('address');
                var coin =    $(this).data('coin');
                var orderId =    $(this).data('id');

                loadingBtn.show();
                submitBtn.hide();
                $.ajax({
                    url: "{{route('user.crypto.confirm')}}",
                    type: "POST",
                    data:{'address':address, 'coin':coin, 'order_id':orderId},
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success:function(response){
                        console.log(response)
                        //  showError(response);
                        loadingBtn.hide();
                        submitBtn.show();
                        if(coin=='btc') {
                            if (!(response.confirmed)) {
                                showAlert(response.message + " error", 'error')
                            } else {
                                showAlert(response.vout + ' Payment Received', 'success')
                            }
                        }else{
                            showAlert('Thank you for trading with us, we are confirming your payment. Note USDT confirmation take maximum of 10minute', 'success')
                        }
                        // console.log(response);
                        window.location.href = "{{url('user/crypto/view-trade')}}"+"/"+response.orderId;
                    },
                    error: function(xhr, status, error){

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

                    }
                })
            })
        });

    </script>
    @endpush