@extends('home.layouts.master')
@section('css')
    <style>
        .pl-0 {
            padding: 0;
        }
    </style>
@endsection
@section('main')
    <div class="container">
        <div class="row p-4">
            <div class="col-md-5 mx-auto p-0">
                <div class="card">
                    <div class="card-header bg-success text-center text-bold-900">
                        <div class="card-title">
                            <span class="card-title">{{Setting::get('title')}}</span>
                            <br>
                            <span class="">#{{$payment->token}}</span>
                        </div>
                        <hr>
                        @if ($payment->status == 'init')
                            <img height="30" src="/payment/loading.svg">
                            {{trans('in')}} <span class="timer text-bold-600"></span> {{trans('payment expires')}}
                        @endif
                    </div>
                    <div class="card-body" id="state4" style="">
                        <div class="content">
                            @if ($payment->status == 'init')
                                <div class="invoice-content tab-border">
                                    <div class="tab-pane active">
                                        <div class="text-center" id="cntSelectedQrCode">
                                            <img
                                                src="https://chart.googleapis.com/chart?chs=300x300&cht=qr&chl=http%3A%2F%2Fwww.google.com%2F&choe=UTF-8"
                                                title="{{$payment->wallet}}"
                                                width="170" height="170"
                                                style="width: 170px; height: 170px;">
                                        </div>
                                        <div class="invoice-content">
                                            <div class="col-md-12 mb-4">
                                                <div>
                                                    <p class="t-right">{{trans('wallet')}}:</p>
                                                </div>
                                                <div style="display: flex; justify-content: center">
                                                    <div>
                                                    <span style="font-size: medium; font-weight: bold"
                                                          onclick="copyToClipboard(`{{optional($payment->tronData)->address_base_58}}`)">
                                                        {{optional($payment->tronData)->address_base_58}}
                                                    </span>
                                                    </div>
                                                    <div class="ml-1">
                                                        <i class="fa fa-copy mr-1"
                                                           onclick="copyToClipboard(`{{optional($payment->tronData)->address_base_58}}`)"></i>
                                                    </div>
                                                </div>
                                                <hr>
                                                <div>
                                                    <p class="t-right">{{trans('amount')}}:</p>
                                                </div>
                                                <div style="display: flex; justify-content: center">
                                                    <div>
                                                        <p style="font-size: medium; font-weight: bold"
                                                           onclick="copyToClipboard(`{{$payment->amount}}`)">{{$payment->amount}}
                                                            USDT</p>
                                                    </div>
                                                    <div class="ml-1">
                                                        <i class="fa fa-copy mr-1"
                                                           onclick="copyToClipboard(`{{$payment->amount}}`)"></i>
                                                    </div>
                                                </div>
                                                <hr>
                                                <div class="alert alert-warning text-center">
                                                    {{trans('please pay the exact amount in a single transaction')}}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @elseif ($payment->status == 'done')
                                <hr>
                                <h2 class="text-center text-success">Payment Done</h2>
                                <hr>
                            @endif

                            <div class="payment-description">
                                <div class="col-md-12 des-label tab-label mb10 t-right">{{trans('merchant')}}:</div>
                                <div style="display: flex; justify-content: center">
                                    <p style="font-size: medium; font-weight: bold">{{optional($payment->gateway)->title}}</p>
                                </div>
                                <div class="col-md-12 des-label tab-label mb10 t-right">{{trans('website')}}:</div>
                                <div style="display: flex; justify-content: center">
                                    <a href="{{optional($payment->gateway)->site}}"
                                       target="_blank">{{optional($payment->gateway)->site}}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')

@endsection