@extends('user.layout.layout')

@section('contents')
    <div class="content-page">
        <!-- Start content -->
        <div class="content">
            <div class="container-fluid">
                <div class="page-title-box">
                    <div class="row align-items-center">
                        <div class="col-sm-6">
                            <h4 class="page-title">Checkout</h4>
                        </div>
                        <div class="col-sm-6">
                            <ol class="breadcrumb float-right">
                                <li class="breadcrumb-item"><a
                                        href="javascript:void(0);">{{ config('app.project_name') }}</a></li>
                                <li class="breadcrumb-item active">Checkout</li>
                            </ol>
                        </div>
                    </div> <!-- end row -->
                </div>
                <!-- end page-title -->

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card m-b-30">
                            <div class="card-body">

                                <section class="wrapper">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            {{-- placeholder --}}
                                        </div>
                                    </div>
                                    <!-- page start-->
                                    <center>
                                        <div id='grip'
                                            style='background-color:inherit; padding:20px; border-radius:5px; border: 1px solid #50515a; margin-top:20px'>

                                            <h3 style='margin-bottom: 10px; font-weight:700'> <img src='https://api.qrserver.com/v1/create-qr-code/?data={{htmlspecialchars($validated['wallet']->address)}}'
                                                    style='width:150px'> </h3>

                                            <br />
                                            <p style='font-size: 15px; margin-bottom:0'> Amount - ${{htmlspecialchars(number_format($validated['capital'], 2))}} <small></small>
                                            </p>
                                            <p style='font-weight:lighter; font-size:30px; margin-bottom:0'> {{htmlspecialchars($validated['method'])}} </p>
                                            <br />
                                            <div style='margin:-12px 0 12px 0'>Pay the exact amount to the wallet address
                                                below.</div>
                                                
                                            <div id='wallet-holder' style='border-top:1px solid #676876; padding:6px'
                                                class='table-responsive'>
                                                <b>{{htmlspecialchars($validated['wallet']->address)}}</b>&nbsp;&nbsp;&nbsp;<button class="btn btn-outline-secondary" type="button" id="copyWallet" data-target="#wallet-holder"><i class="fa fa-copy"></i></button>
                                        <span id="copyAlert" class="copy-alert" style="display: none; color: green; margin-left: 10px;">Copied</span>
                                            </div>

                                            <p style='margin:8px 0 -4px 0; color:#badaba'>You must complete payment to activate investment </p>
                                            This transaction will be void if no payment was made within the time frame.

                                        </div
                                        <br>
                                        <a href="{{ route('dashboard') }}" class="btn btn-primary" 
                                        style="margin-top:20px;">
                                        Return to Dashboard
                                        </a>
                                    </center>
                                    
                                    <!-- page end-->
                                </section>
                            </div>
                        </div>

                    </div> <!-- end col -->

                </div> <!-- end row -->


            </div>
            <!-- container-fluid -->

        </div>
        <!-- content -->

    </div>
    <script>
document.addEventListener('DOMContentLoaded', function () {
    const btn = document.getElementById('copyWallet');
    const alertEl = document.getElementById('copyAlert');

    if (!btn) return;

    btn.addEventListener('click', async function () {

        const holder = document.querySelector('#wallet-holder') ||
                       document.querySelector(btn.getAttribute('data-target'));

        if (!holder) return;

        const text = holder.innerText.trim();

        if (!text) return;

        try {

            await navigator.clipboard.writeText(text);

            alertEl.style.display = 'inline';
            setTimeout(() => alertEl.style.display = 'none', 1000);

        } catch (err) {

            const ta = document.createElement('textarea');
            ta.value = text;
            document.body.appendChild(ta);
            ta.select();
            document.execCommand('copy');
            ta.remove();

            alertEl.style.display = 'inline';
            setTimeout(() => alertEl.style.display = 'none', 1000);
        }
    });
});
</script>
@endsection