@extends('layouts.user.app')

@section('content')
<div class="row justify-content-center text-center g-6">
    <div class="col-6">
        <h4 class="p-3">Make Your Payment</h4>
        <small class=" fs-5">Your order <strong>TNX{{$transaction->tnx}}</strong> has been placed successfully. Yo Complete. please send the exact amount of <strong> {{balaneInBTC($transaction->amount)}}</strong> to the address below.</small>
    </div>
    <div class="col-12"></div>
    <div class="col-md-6 mt-3">
        <div class="card">
            <div class="card-header d-flex jutify-content-between">
                <h5 class="card-title">Pay Bitcoin</h5>
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-center flex-wrap ">
                    <img src="{{env('BTC_WALLET_IMAGE')}}" alt="BTC Walltet" class="img-fluid" width="170" >
                    <div class="w-100 fs-4"> {{balaneInBTC($transaction->amount)}} BTC <i data-clipboard-text="{{balaneInBTC($transaction->amount)}}" class="cursor-pointer ti ti-copy copyButton"></i></div>
                    <div class="w-100 fs-5"> {{number_format($transaction->amount, 2)}} USD</div>
                </div>
                <div class="form-password-toggle">
                    <label class="form-label form-text text-uppercase fs-6">Bitcoin Address</label>
                    <div class="input-group input-group-merge">
                      <input type="text" class="form-control" id="BTCAddress" value="{{env('BTC_WALLET')}}" readonly/>
                      <span class="input-group-text cursor-pointer copyButton" data-clipboard-target="#BTCAddress"><i class="ti ti-copy"></i></span>
                    </div>
                </div>
            </div>
            <div class="card-footer text-start">
                <span class="text-danger form-text">Be aware of that this order will be cancelled, if you send any other BTC amount </span>
                <div class="text-primary form-text">Account will credited once we received your payment </div>
            </div>
        </div>
    </div>
    <dic class="col-12 mt-4">
        <a href="{{route('user.index')}}" class="btn btn-label-primary">Go to Dashboard <i class="ti ti-arrow-narrow-right"></i></a>
    </dic>
</div>
@endsection

@push('script')
<script>
    var clipboard = new ClipboardJS('.copyButton');
    clipboard.on('success', function(e) {
        new Notify ({
            title: '',
            text: 'Copied!',
            status: 'success',
            autoclose: true,
            effect: 'slide',
            type: 2,
            autotimeout: 2500
        });
    });
</script>
@endpush