@extends('layouts.user.app')

@section('content')
<div class="row justify-content-center flex-wrap text-center g-6">
    <h4 class="p-3">Confirm your Deposit</h4>
    <span class="fs-5 text-warning">You are about to deposit <strong>{{balaneInBTC($transaction->amount)}}</strong> in your account</span>
    <small class="form-text fs-6">Pleas review th information and confirm</small>
    <div class="col-md-6 mt-3">
        <div class="card">
            <ul class="list-group list-group-flush">
                <li class="list-group-item d-flex justify-content-between">
                    <span>Payment method</span>
                    <span>Crypto Wallet</span>
                </li>
                <li class="pt-3 pb-3 list-group-item d-flex justify-content-between">
                    <div class="text-start">
                        <span>Amount to deposit</span>
                        <br>
                        <span>Exchange rate</span>
                    </div>
                    <div class="text-end">
                        <span>Payment method</span>
                        <br>
                        <span>1 USD = {{number_format($transaction->exchange, 7)}} BTC</span>
                    </div>
                </li>
                <li class="pt-3 pb-3 list-group-item d-flex justify-content-between">
                    <span>
                        Amount to Credit
                    </span>
                    <span>
                        {{number_format($transaction->amount, 2)}}
                    </span>
                </li>
              </ul>
        </div>
        <div class="card mt-4">
            <ul class="list-group list-group-flush">
                <li class="pt-3 pb-3 list-group-item d-flex justify-content-between">
                    <span>
                        You will send (Total)
                    </span>
                    <span>
                        {{balaneInBTC($transaction->amount)}}
                    </span>
                </li>
              </ul>
        </div>
        <div id="floatingInputHelp" class="form-text text-start mt-3 mb-2 fs-6">*Payment info (Bitcoin Wallet) will available once you proceed</div>
    </div>
    <div class="col-12"></div>
    <div class="col-6 text-center mt-4">
        <a type="submit" class="mb-3 w-100 btn btn-lg btn-primary" href="{{route('user.deposit.finish', $transaction->id)}}">Confirm & Pay</a>
        <a class="mt-3 btn btn-label-danger" href="{{route('user.transactions.show', $transaction->id)}}">Cancel Order</a>
    </div>
</div>
@endsection