@if (!session('chain'))
    <script>window.location.href = "{{ route('account') }}";</script>
@endif

@extends('layouts.dashboardLayout')

@section('title', 'Deposit Wallet')

@section('content')
<!-- Header -->

<div class="header bg-gradient-primary pb-8"></div>


<div class="row mt-5">
    <div class="col-xl-12 mb-5 mb-xl-0">
        <div class="card shadow">
            <div class="card-header border-0">
                <div class="row align-items-center">
                    <div class="col">
                        <h3 class="mb-0">Confirm Purchase</h3>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <p>Congratulations on your decision to invest in our project and get more profit with more Mining Power!</p>
                <div class="row">
                    <div class="col-lg-6 col-sm-12 text-center">
                        <img src="https://api.qrserver.com/v1/create-qr-code/?data={{ session('wallet') }}&size=300x300" alt="QrCode" style="width: 300px; height: 300px" class="img-thumbnail">
                    </div>
                    <div class="col-lg-6 col-sm-12 text-center">
                        <h1>Invoice #{{ session('depositId') }}</h1>
                        <p>To pay, please send exact amount of {{ session('chain') }} to the given address.</p>
                        <h2>{{ session('amount') .' '. session('chain') }}</h2>
                        <!-- <p>≃ 9.00939 USD</p> -->
                        <p class="text-sm">10 confirmations required</p>
                        <div class="input-group mb-2">
                            <input class="form-control text-center" id="paymentWallet" value="{{ session('wallet') }}" readonly="" onclick="this.select();">
                            <div class="input-group-prepend">
                                <button class="btn btn-primary" onclick="copy_wallet_address();" title="Copy to Clipboard"><i class="fa fa-copy"></i>&nbsp; Copy</button>
                            </div>
                        </div>
                        <small class="form-text text-success" style="display: none" id="copied">Copied to Clipboard</small>
                        <p><span id="timeout">0d 1h 30m 56s </span> minutes left to pay your order</p>
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <p>If you have already sent the payment to the address provided, please wait a few minutes for our system to identify your payment. This is an automatic process, it can take between <strong class="text-underline">1 minute or up to 1 hour</strong>, depending on the amount of confirmations needed.</p>
            </div>
        </div>
    </div>
</div>
<script>
    function copy_wallet_address() {
        document.getElementById('paymentWallet').select();
        document.execCommand('copy');
        document.getElementById('copied').style.display = 'block';
        const copied = $('#copied');
        setTimeout(function() {
            copied.fadeOut(1500);
        }, 3000);
    }

    document.addEventListener("DOMContentLoaded", function(e) {
        // Set the date we're counting down to
        let countDownDate = new Date().getTime() + (90 * 60 * 1000);

        // Update the count down every 1 second
        let x = setInterval(function() {

            // Get today's date and time
            let now = new Date(new Date().toLocaleString('en-US', {
                timeZone: "UTC"
            })).getTime();

            // Find the distance between now and the count down date
            let distance = countDownDate - now;

            // Time calculations for days, hours, minutes and seconds
            let days = Math.floor(distance / (1000 * 60 * 60 * 24));
            let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            let seconds = Math.floor((distance % (1000 * 60)) / 1000);

            // Display the result in the element with id="demo"
            document.getElementById("timeout").innerHTML = days + "d " + hours + "h " +
                minutes + "m " + seconds + "s ";

            // If the count down is finished, write some text
            if (distance < 0) {
                clearInterval(x);
                document.getElementById("timeout").innerHTML = "Expired!";
                // window.location.reload();
            }
        }, 1000);
    });
</script>
@endsection