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

                        <div class="card card-bordered ml-lg-4 ml-xl-0">
                            <div class="card-header">
                                <h4>{{$getPayment->payment_status}}</h4>
                            </div>
                            <div class="nk-iv-wg4">

                                <div class="nk-iv-wg4-sub">
                                    <ul class="nk-iv-wg4-list">
                                        <li>

                                            <b>Status: </b> <span class="status">{{$getPayment->payment_status}}</span>


                                        </li>
                                    </ul>
                                </div><!-- .nk-iv-wg4-sub -->
                                <div class="nk-iv-wg4-sub">

                                    <div class="nk-refwg-url">
                                        <div class="form-control-wrap center">
                                            <img src="{{asset('assets')}}/coins_logo/checklogo.png" height="100px" alt="">
                                        </div>
                                    </div>
                                </div><!-- .nk-iv-wg4-sub -->

                                <div class="nk-iv-wg4-sub">
                                    <ul class="nk-iv-wg4-list">

                                        <li>
                                            <div class="lead-text">Received Amount </div>
                                            <div class="caption-text text-primary">{{number_format($getPayment->deducted_asset_amount, 8)}}  {{$getPayment->pay_currency}} (${{$getPayment->deducted_asset_amount_usd}})</div>
                                        </li>
                                        <li>
                                            <div class="lead-text">Amount Credited </div>
                                            <div class="caption-text text-primary">{{toMoney($getPayment->payout_amount)}}</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">Check Fait Balance</button>
                                        </li>
                                    </ul>
                                </div><!-- .nk-iv-wg4-sub -->
                            </div><!-- .nk-iv-wg4 -->
                        </div><!-- .card -->

                    </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(!(response.confirmed)) {
                                    showAlert(response.message+" error",'error')
                                }else{
                                    showAlert(response.vout + ' Payment Received', 'success')
                                }
                                // 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