@extends('layouts.user')

@section('title')
    Payment Information
@endsection

@section('content')

@php
    $isCryptoAuto = $deposit->type === 'crypto_auto';
    $txHash       = $deposit->payment_id ?? null;
    $network      = strtoupper($deposit->network ?? '');
    $status       = $deposit->status; // null=pending, 1=completed, 2=failed

    // Explorer URL for on-chain deposits
    $explorerUrl = null;
    if ($isCryptoAuto && $txHash) {
        $explorerUrl = $network === 'SOL'
            ? 'https://solscan.io/tx/' . $txHash
            : 'https://etherscan.io/tx/' . $txHash;
    }

    // NowPayments status helpers (only used when !$isCryptoAuto)
    $npStatus = $isCryptoAuto ? null : ($pay_info['payment']['payment_status'] ?? 'waiting');
    $npDone   = in_array($npStatus, ['finished', 'partially_paid']);
    $npWaiting = $npStatus === 'waiting';
    $npDead    = in_array($npStatus, ['expired', 'failed']);
@endphp

<style>
    :root {
        --orange: #f97316; --orange-dim: rgba(249,115,22,0.10); --orange-glow: rgba(249,115,22,0.22);
        --green: #10b981;  --green-dim:  rgba(16,185,129,0.09);
        --red:   #ef4444;  --red-dim:    rgba(239,68,68,0.08);
        --amber: #f59e0b;  --amber-dim:  rgba(245,158,11,0.09);
        --sky:   #0ea5e9;  --sky-dim:    rgba(14,165,233,0.09);
        --card-bg: #ffffff; --card-border: rgba(0,0,0,0.07);
        --muted: #94a3b8;
        --radius: 16px; --radius-sm: 10px;
        --shadow: 0 4px 24px rgba(0,0,0,0.07);
        --shadow-lg: 0 8px 36px rgba(0,0,0,0.13);
        --ease: cubic-bezier(.4,0,.2,1);
    }
    .dark { --card-bg:#0f172a; --card-border:rgba(255,255,255,0.07); --shadow:0 4px 24px rgba(0,0,0,0.4); }

    .sidebar-card { background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--card-border);padding:1.5rem; }
    .avatar-ring  { width:6rem;height:6rem;border-radius:50%;padding:3px;background:linear-gradient(135deg,var(--orange),#660066);display:inline-block; }
    .avatar-ring img { width:100%;height:100%;border-radius:50%;border:3px solid var(--card-bg);object-fit:cover;display:block; }

    /* ── Info card ── */
    .info-card { background:var(--card-bg);border-radius:var(--radius);border:1px solid var(--card-border);box-shadow:var(--shadow);overflow:hidden; }

    .info-card-header {
        padding:1.5rem 1.75rem;
        border-bottom:1px solid var(--card-border);
        display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:0.75rem;
    }
    .info-card-title { font-size:1rem;font-weight:800;display:flex;align-items:center;gap:0.5rem; }
    .info-card-body  { padding:1.5rem 1.75rem; display:flex;flex-direction:column;gap:1rem; }

    /* ── Status badge ── */
    .status-badge {
        display:inline-flex;align-items:center;gap:0.4rem;
        padding:0.32rem 0.85rem;border-radius:99px;
        font-size:0.75rem;font-weight:800;letter-spacing:0.02em;
        flex-shrink:0;
    }
    .badge-green  { background:var(--green-dim); color:var(--green); border:1px solid rgba(16,185,129,0.25); }
    .badge-amber  { background:var(--amber-dim); color:var(--amber); border:1px solid rgba(245,158,11,0.25); }
    .badge-red    { background:var(--red-dim);   color:var(--red);   border:1px solid rgba(239,68,68,0.25); }
    .badge-muted  { background:rgba(148,163,184,0.1); color:var(--muted); border:1px solid rgba(148,163,184,0.2); }

    @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.82)} }
    .live-dot { width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block;animation:pulse 1.6s ease-in-out infinite; }

    /* ── Detail rows ── */
    .detail-row {
        display:flex;align-items:flex-start;justify-content:space-between;gap:0.75rem;
        padding:0.75rem 0;border-bottom:1px solid var(--card-border);
        font-size:0.82rem;
    }
    .detail-row:last-child { border-bottom:none; }
    .detail-key { color:var(--muted);font-weight:600;flex-shrink:0;min-width:110px; }
    .detail-val { font-weight:700;text-align:right;word-break:break-all; }

    /* ── Address block ── */
    .address-block {
        background:var(--card-bg);
        border:1.5px solid var(--card-border);
        border-radius:var(--radius-sm);
        padding:1rem;
        display:flex;align-items:center;justify-content:space-between;gap:0.75rem;
        flex-wrap:wrap;
    }
    .address-text {
        font-family:monospace;font-size:0.78rem;word-break:break-all;
        flex:1;min-width:0;line-height:1.6;
    }
    .copy-btn {
        display:inline-flex;align-items:center;gap:0.4rem;
        padding:0.42rem 0.85rem;border-radius:8px;border:none;
        background:var(--orange);color:#fff;
        font-size:0.72rem;font-weight:800;cursor:pointer;
        transition:background 0.15s var(--ease),transform 0.12s;
        white-space:nowrap;flex-shrink:0;
        box-shadow:0 2px 10px var(--orange-glow);
    }
    .copy-btn:hover { background:#ea6c0a;transform:translateY(-1px); }
    .copied-feedback { font-size:0.68rem;color:var(--green);margin-top:0.3rem;display:none; }

    /* ── QR section ── */
    .qr-wrap {
        display:flex;flex-direction:column;align-items:center;gap:0.75rem;
        padding:1.25rem;
        background:var(--card-bg);
        border:1px solid var(--card-border);
        border-radius:var(--radius-sm);
    }
    .qr-wrap img { width:160px;height:160px;border-radius:8px; }
    .qr-label { font-size:0.72rem;color:var(--muted);font-weight:600; }

    /* ── Notice box ── */
    .notice-box {
        display:flex;align-items:flex-start;gap:0.75rem;
        padding:0.9rem 1rem;border-radius:var(--radius-sm);
        font-size:0.78rem;line-height:1.6;font-weight:500;
    }
    .notice-box svg { flex-shrink:0;margin-top:1px; }
    .notice-info    { background:var(--sky-dim);border:1px solid rgba(14,165,233,0.2);color:#0369a1; }
    .notice-success { background:var(--green-dim);border:1px solid rgba(16,185,129,0.22);color:#065f46; }
    .notice-warn    { background:var(--amber-dim);border:1px solid rgba(245,158,11,0.22);color:#92400e; }
    .notice-error   { background:var(--red-dim);border:1px solid rgba(239,68,68,0.2);color:#991b1b; }
    .dark .notice-info    { color:#38bdf8; }
    .dark .notice-success { color:#6ee7b7; }
    .dark .notice-warn    { color:#fcd34d; }
    .dark .notice-error   { color:#fca5a5; }

    /* ── TX hash block ── */
    .tx-hash-block {
        background:var(--sky-dim);border:1px solid rgba(14,165,233,0.2);
        border-radius:var(--radius-sm);padding:0.85rem 1rem;
        display:flex;align-items:center;justify-content:space-between;gap:0.75rem;flex-wrap:wrap;
    }
    .tx-hash-text { font-family:monospace;font-size:0.72rem;word-break:break-all;flex:1;min-width:0; }
    .explorer-link {
        display:inline-flex;align-items:center;gap:0.3rem;
        font-size:0.72rem;font-weight:800;color:var(--sky);
        text-decoration:none;white-space:nowrap;flex-shrink:0;
        transition:opacity 0.15s;
    }
    .explorer-link:hover { opacity:0.75; }

    /* ── Action buttons ── */
    .action-btn {
        display:inline-flex;align-items:center;justify-content:center;gap:0.45rem;
        padding:0.75rem 1.25rem;border-radius:var(--radius-sm);
        font-size:0.85rem;font-weight:800;cursor:pointer;
        text-decoration:none;border:none;width:100%;
        transition:background 0.15s,transform 0.12s,box-shadow 0.15s;
    }
    .action-btn-orange { background:var(--orange);color:#fff;box-shadow:0 3px 14px var(--orange-glow); }
    .action-btn-orange:hover { background:#ea6c0a;transform:translateY(-1px);color:#fff; }
    .action-btn-slate  { background:#1e293b;color:#fff; }
    .action-btn-slate:hover  { background:#0f172a;transform:translateY(-1px); }

    /* ── Divider ── */
    .divider { height:1px;background:var(--card-border);margin:0; }

    /* ── Amount tile ── */
    .amount-tile {
        background:linear-gradient(135deg,var(--orange) 0%,#c2440a 100%);
        border-radius:var(--radius-sm);padding:1rem 1.25rem;color:#fff;
        box-shadow:0 4px 18px var(--orange-glow);
    }
    .amount-tile-label { font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;opacity:0.75; }
    .amount-tile-value { font-size:1.75rem;font-weight:900;letter-spacing:-0.03em;line-height:1.1;margin-top:0.25rem; }
    .amount-tile-sub   { font-size:0.7rem;opacity:0.75;margin-top:0.2rem; }
</style>

<section class="relative lg:pb-24 pb-16 md:mt-[84px] mt-[70px]">
    <div class="relative md:container container-fluid">
        <div class="relative overflow-hidden md:rounded-md shadow dark:shadow-gray-700 h-52 bg-cover bg-center"
            style="background-image:url('{{ asset('images/profile-1.jpg') }}');">
            <div style="position:absolute;inset:0;background:linear-gradient(135deg,rgba(249,115,22,0.35),rgba(102,0,102,0.45));"></div>
        </div>
    </div>

    <div class="container relative mt-16 md:mt-24">
        <div class="md:flex" style="gap:1.5rem;">

            {{-- Sidebar --}}
            <div class="lg:w-1/4 md:w-1/3 md:px-0">
                <div class="relative" style="margin-top:-7rem;">
                    <div class="sidebar-card">
                        <div class="mb-5 text-center">
                            <div class="flex justify-center mb-4">
                                <span class="avatar-ring"><img src="{{ asset('images/avatar-1.png') }}" id="profile-image" alt="avatar"></span>
                            </div>
                            <h5 class="text-base font-bold">{{ auth()->user()->username }}</h5>
                            <p class="text-xs mt-1" style="color:var(--muted);">{{ auth()->user()->email }}</p>
                        </div>
                        <x-side-nav />
                    </div>
                </div>
            </div>

            {{-- Main --}}
            <div class="mt-6 lg:w-3/4 md:w-2/3 md:px-0 md:mt-0" style="display:flex;flex-direction:column;gap:1.5rem;">

                <x-alert />

                <div class="info-card">

                    {{-- ══════════════════════════════════════════════════════
                         BRANCH A — NEW CRYPTO AUTO DEPOSIT (SOL / ERC20)
                    ══════════════════════════════════════════════════════ --}}
                    @if($isCryptoAuto)

                    {{-- Header --}}
                    <div class="info-card-header">
                        <div class="info-card-title">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="var(--orange)" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                            On-chain Deposit
                        </div>
                        @if($status == 1)
                            <span class="status-badge badge-green"><span class="live-dot"></span> Completed</span>
                        @elseif($status == 2)
                            <span class="status-badge badge-red">✕ Failed</span>
                        @else
                            <span class="status-badge badge-amber"><span class="live-dot"></span> Pending confirmation</span>
                        @endif
                    </div>

                    <div class="info-card-body">

                        {{-- Amount tile --}}
                        <div class="amount-tile">
                            <div class="amount-tile-label">Deposit amount</div>
                            <div class="amount-tile-value">${{ number_format($deposit->amount, 2) }}</div>
                            <div class="amount-tile-sub">USDT · {{ $network }}</div>
                        </div>

                        {{-- Status-specific notice --}}
                        @if($status == 1)
                        <div class="notice-box notice-success">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            <span>Your deposit has been confirmed on-chain and credited to your account. Your balance has been updated.</span>
                        </div>
                        @elseif($status == 2)
                        <div class="notice-box notice-error">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
                            <span>This deposit could not be verified on-chain. If you believe this is an error, please contact support with your transaction hash below.</span>
                        </div>
                        @else
                        <div class="notice-box notice-info">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path stroke-linecap="round" d="M12 8v4m0 4h.01"/></svg>
                            <span>Your transaction has been submitted and is waiting for on-chain confirmation. This usually takes under 10 mins. Your balance will update automatically — no action needed.</span>
                        </div>
                        @endif

                        {{-- Detail rows --}}
                        <div style="border:1px solid var(--card-border);border-radius:var(--radius-sm);overflow:hidden;">
                            <div class="detail-row" style="padding:0.75rem 1rem;">
                                <span class="detail-key">Network</span>
                                <span class="detail-val">{{ $network === 'SOL' ? 'Solana (SPL)' : 'Ethereum (ERC20)' }}</span>
                            </div>
                            <div class="detail-row" style="padding:0.75rem 1rem;">
                                <span class="detail-key">Date</span>
                                <span class="detail-val">{{ $deposit->created_at->format('d M Y, H:i') }} UTC</span>
                            </div>
                            <div class="detail-row" style="padding:0.75rem 1rem;">
                                <span class="detail-key">Type</span>
                                <span class="detail-val">Automatic on-chain</span>
                            </div>
                        </div>

                        {{-- TX hash --}}
                        @if($txHash)
                        <div>
                            <p style="font-size:0.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.5rem;">Transaction Hash</p>
                            <div class="tx-hash-block">
                                <span class="tx-hash-text" id="txHashText">{{ $txHash }}</span>
                                @if($explorerUrl)
                                <a href="{{ $explorerUrl }}" target="_blank" rel="noopener" class="explorer-link">
                                    View on {{ $network === 'SOL' ? 'Solscan' : 'Etherscan' }}
                                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
                                </a>
                                @endif
                            </div>
                        </div>
                        @endif

                        {{-- Actions --}}
                        <div style="display:flex;flex-direction:column;gap:0.65rem;">
                            @if($status == 1)
                                <a href="{{ route('deposit') }}" class="action-btn action-btn-orange">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
                                    Make Another Deposit
                                </a>
                            @elseif($status != 2)
                                <button onclick="window.location.reload()" class="action-btn action-btn-slate">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                                    Refresh Status
                                </button>
                            @else
                                <a href="{{ route('deposit') }}" class="action-btn action-btn-orange">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
                                    Try Another Deposit
                                </a>
                            @endif
                        </div>

                    </div>{{-- /info-card-body --}}

                    {{-- ══════════════════════════════════════════════════════
                         BRANCH B — LEGACY NOWPAYMENTS DEPOSIT
                    ══════════════════════════════════════════════════════ --}}
                    @else

                    {{-- Header --}}
                    <div class="info-card-header">
                        <div class="info-card-title">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="var(--orange)" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg>
                            Deposit Information
                        </div>
                        @if($npDone)
                            <span class="status-badge badge-green"><span class="live-dot"></span> Payment completed</span>
                        @elseif($npWaiting)
                            <span class="status-badge badge-amber"><span class="live-dot"></span> Awaiting payment</span>
                        @elseif($npDead)
                            <span class="status-badge badge-red">✕ {{ ucfirst($npStatus) }}</span>
                        @else
                            <span class="status-badge badge-muted">{{ ucfirst($npStatus ?? 'Unknown') }}</span>
                        @endif
                    </div>

                    <div class="info-card-body">

                        {{-- Amount tile --}}
                        <div class="amount-tile">
                            <div class="amount-tile-label">Amount to pay</div>
                            <div class="amount-tile-value">{{ number_format($pay_info['deposit']['amount'], 2) }}</div>
                            <div class="amount-tile-sub">{{ strtoupper($pay_info['payment']['pay_currency']) }} · {{ $pay_info['deposit']['network'] }}</div>
                        </div>

                        {{-- Status notice --}}
                        @if($npDone)
                        <div class="notice-box notice-success">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            <span>Your payment has been completed and verified. This deposit address has expired. <a href="{{ route('deposit') }}" style="font-weight:800;color:inherit;text-decoration:underline;">Click here</a> to make another deposit.</span>
                        </div>
                        @elseif($npWaiting)
                        <div class="notice-box notice-warn">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path stroke-linecap="round" d="M12 8v4m0 4h.01"/></svg>
                            <span>Do not leave this page until your deposit is complete. Send the exact amount to the address below, then click <strong>"I have made the transfer"</strong>. Address expires in 20 minutes.</span>
                        </div>
                        @elseif($npStatus === 'expired')
                        <div class="notice-box notice-error">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                            <span>This payment address has expired and is no longer valid. <a href="{{ route('deposit') }}" style="font-weight:800;color:inherit;text-decoration:underline;">Click here</a> to create a new deposit.</span>
                        </div>
                        @elseif($npStatus === 'failed')
                        <div class="notice-box notice-error">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
                            <span>This payment failed. The address is no longer valid. <a href="{{ route('deposit') }}" style="font-weight:800;color:inherit;text-decoration:underline;">Click here</a> to create a new deposit.</span>
                        </div>
                        @else
                        <div class="notice-box notice-info">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path stroke-linecap="round" d="M12 8v4m0 4h.01"/></svg>
                            <span>Do not leave this page until deposit is complete. Click the button below when done — this is very important.</span>
                        </div>
                        @endif

                        {{-- Detail rows --}}
                        <div style="border:1px solid var(--card-border);border-radius:var(--radius-sm);overflow:hidden;">
                            <div class="detail-row" style="padding:0.75rem 1rem;">
                                <span class="detail-key">Payment ID</span>
                                <span class="detail-val" style="font-family:monospace;font-size:0.72rem;">{{ $pay_info['payment']['payment_id'] }}</span>
                            </div>
                            <div class="detail-row" style="padding:0.75rem 1rem;">
                                <span class="detail-key">Network</span>
                                <span class="detail-val">{{ $pay_info['deposit']['network'] }}</span>
                            </div>
                            <div class="detail-row" style="padding:0.75rem 1rem;">
                                <span class="detail-key">Date</span>
                                <span class="detail-val">{{ $deposit->created_at->format('d M Y, H:i') }} UTC</span>
                            </div>
                        </div>

                        {{-- Payment address --}}
                        @if($npWaiting)
                        <div>
                            <p style="font-size:0.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.5rem;">Send to this address</p>
                            <div class="address-block">
                                <span class="address-text" id="myInput">{{ $pay_info['payment']['pay_address'] }}</span>
                                <button type="button" onclick="copyToClipboard()" class="copy-btn">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
                                    Copy
                                </button>
                            </div>
                            <div class="copied-feedback" id="copiedFeedback">✓ Address copied to clipboard</div>
                        </div>
                        @elseif(!$npWaiting && !$npDone)
                        <div style="padding:0.75rem 1rem;border-radius:var(--radius-sm);background:rgba(148,163,184,0.08);border:1px solid var(--card-border);font-size:0.78rem;color:var(--muted);font-weight:600;text-align:center;">
                            Address has become invalid — do not use.
                        </div>
                        @endif

                        {{-- QR Code --}}
                        @if(isset($pay_info['deposit']['qr_code']) && $pay_info['deposit']['qr_code'])
                        <div class="qr-wrap">
                            <p class="qr-label">{{ $npWaiting ? 'Scan QR Code to pay' : 'QR Code (expired)' }}</p>
                            <img src="{{ asset('qr_codes/'.$pay_info['deposit']['qr_code']) }}"
                                 alt="QR Code"
                                 style="{{ !$npWaiting ? 'opacity:0.35;filter:grayscale(1);' : '' }}">
                        </div>
                        @endif

                        {{-- Actions --}}
                        <div style="display:flex;flex-direction:column;gap:0.65rem;">
                            @if($npWaiting)
                            <button onclick="refreshPage()" class="action-btn action-btn-slate">
                                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                                I have made the transfer!
                            </button>
                            @endif
                            @if(!$npWaiting || $npDone || $npDead)
                            <a href="{{ route('deposit') }}" class="action-btn action-btn-orange">
                                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
                                Make Another Deposit
                            </a>
                            @endif
                        </div>

                    </div>{{-- /info-card-body --}}

                    @endif {{-- end branch --}}

                </div>{{-- /info-card --}}

            </div>
        </div>
    </div>
</section>

<script>
function copyToClipboard() {
    const text = document.getElementById('myInput')?.textContent?.trim() ?? '';
    if (!text) return;
    navigator.clipboard.writeText(text).then(() => {
        const fb = document.getElementById('copiedFeedback');
        if (fb) { fb.style.display = 'block'; setTimeout(() => fb.style.display = 'none', 2500); }
    }).catch(() => {
        // Fallback for older browsers
        const input = document.createElement('input');
        input.value = text;
        document.body.appendChild(input);
        input.select();
        document.execCommand('copy');
        document.body.removeChild(input);
        alert('Address copied to clipboard');
    });
}

function refreshPage() {
    window.location.href = "{{ route('payment_made', $deposit->id) }}";
}
</script>

@endsection