@php
    $walletCards = $walletCards ?? [];
    $canSweep = !empty($canSweep);
    $sweepUserId = $sweepUserId ?? null;
@endphp
@if(count($walletCards))
    <style>
        .deposit-wallet-row { cursor: pointer; }
        .deposit-wallet-table code { word-break: break-all; }
    </style>
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0 deposit-wallet-table">
            <thead>
            <tr>
                <th>Coin</th>
                <th>Address</th>
                <th class="text-end">Balance</th>
                <th class="text-end">Value</th>
                @if($canSweep)
                    <th></th>
                @endif
                <th></th>
            </tr>
            </thead>
            <tbody>
            @foreach($walletCards as $wallet)
                <tr class="deposit-wallet-row"
                    role="button"
                    data-bs-toggle="modal"
                    data-bs-target="#depositWalletModal"
                    data-wallet-title="{{ $wallet['title'] }}"
                    data-wallet-note="{{ $wallet['network_note'] }}"
                    data-wallet-address="{{ $wallet['address'] }}"
                    data-wallet-qr="{{ $wallet['qr_code'] }}">
                    <td>
                        <div class="d-flex align-items-center gap-3">
                            <span class="avatar avatar-md">
                                @if($wallet['image'])
                                    <img src="{{ asset($wallet['image']) }}" alt="{{ $wallet['title'] }}" class="rounded-circle">
                                @else
                                    <span class="avatar-initial rounded-circle bg-label-primary">{{ substr($wallet['title'], 0, 1) }}</span>
                                @endif
                            </span>
                            <span>
                                <span class="d-block fw-semibold">{{ $wallet['title'] }}</span>
                                <span class="text-muted small">{{ $wallet['network_note'] }}</span>
                            </span>
                        </div>
                    </td>
                    <td class="text-start px-4">
                        <code class="small">{{ $wallet['address'] !== '' ? $wallet['address'] : '—' }}</code>
                    </td>
                    <td class="text-end fw-semibold">{{ number_format((float) $wallet['balance'], 8) }}</td>
                    <td class="text-end fw-semibold">${{ number_format((float) ($wallet['usd_value'] ?? 0), 2) }}</td>
                    @if($canSweep)
                        <td class="text-end">
                            <button type="button"
                                    class="btn btn-sm btn-outline-primary deposit-wallet-send"
                                    data-wallet-key="{{ $wallet['key'] }}"
                                    data-wallet-title="{{ $wallet['title'] }}"
                                    data-wallet-note="{{ $wallet['network_note'] }}"
                                    data-wallet-address="{{ $wallet['address'] }}"
                                    data-wallet-balance="{{ $wallet['balance'] }}"
                                    data-wallet-sweepable="{{ !empty($wallet['sweepable']) ? '1' : '0' }}">
                                Send
                            </button>
                        </td>
                    @endif
                    <td class="text-end text-muted"><span class="material-symbols-outlined">chevron_right</span></td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>

    <div class="modal fade" id="depositWalletModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="depositWalletTitle">Wallet</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <p class="text-muted mb-3" id="depositWalletNote"></p>
                    <div id="depositWalletQrWrap" class="d-inline-block bg-white p-2 rounded mb-3">
                        <img id="depositWalletQr" src="" alt="QR code" width="180" height="180">
                    </div>
                    <p class="small text-muted mb-2" id="depositWalletEmpty" hidden>This deposit address has not been issued yet.</p>
                    <code id="depositWalletAddress" class="d-block text-break mb-3"></code>
                    <button type="button" class="btn btn-primary" id="depositWalletCopy">Copy address</button>
                </div>
            </div>
        </div>
    </div>

    @if($canSweep && $sweepUserId)
        <div class="modal fade" id="depositSweepModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="depositSweepTitle">Send</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p class="text-muted small" id="depositSweepFrom"></p>
                        <div class="mb-3">
                            <label class="form-label" for="depositSweepDestination">Destination address</label>
                            <input type="text" class="form-control" id="depositSweepDestination" placeholder="0x… or T…">
                        </div>
                        <div class="mb-3">
                            <label class="form-label" for="depositSweepAmount">Amount</label>
                            <input type="number" step="any" min="0" class="form-control" id="depositSweepAmount">
                        </div>
                        <div class="alert alert-secondary small mb-0" id="depositSweepGas">Checking gas…</div>
                        <p class="text-danger small mt-2 mb-0" id="depositSweepError" hidden></p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-primary" id="depositSweepConfirm">Confirm send</button>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var modal = document.getElementById('depositWalletModal');
            if (modal) {
                modal.addEventListener('show.bs.modal', function (event) {
                    var button = event.relatedTarget;
                    if (!button) return;
                    var title = button.getAttribute('data-wallet-title') || 'Wallet';
                    var note = button.getAttribute('data-wallet-note') || '';
                    var address = button.getAttribute('data-wallet-address') || '';
                    var qr = button.getAttribute('data-wallet-qr') || '';
                    document.getElementById('depositWalletTitle').textContent = title;
                    document.getElementById('depositWalletNote').textContent = note ? 'Send only ' + title + ' on ' + note + ' to this address.' : '';
                    document.getElementById('depositWalletAddress').textContent = address;
                    document.getElementById('depositWalletEmpty').hidden = address !== '';
                    document.getElementById('depositWalletCopy').hidden = address === '';
                    var img = document.getElementById('depositWalletQr');
                    var wrap = document.getElementById('depositWalletQrWrap');
                    if (qr) {
                        img.src = qr;
                        wrap.hidden = false;
                    } else {
                        img.removeAttribute('src');
                        wrap.hidden = true;
                    }
                    document.getElementById('depositWalletCopy').onclick = function () {
                        if (!address) return;
                        navigator.clipboard.writeText(address);
                        this.textContent = 'Copied';
                        var btn = this;
                        setTimeout(function () { btn.textContent = 'Copy address'; }, 1500);
                    };
                });
            }

            @if($canSweep && $sweepUserId)
            document.querySelectorAll('.deposit-wallet-send').forEach(function (btn) {
                btn.addEventListener('click', function (event) {
                    event.preventDefault();
                    event.stopPropagation();
                    openSweep(btn);
                });
            });

            var sweepKey = '';
            var quoteUrl = @json(route('sweep_deposit_quote', $sweepUserId));
            var sweepUrl = @json(route('sweep_deposit', $sweepUserId));
            var csrf = document.querySelector('meta[name="csrf-token"]');
            var amountInput = document.getElementById('depositSweepAmount');
            var destInput = document.getElementById('depositSweepDestination');
            var gasBox = document.getElementById('depositSweepGas');
            var errBox = document.getElementById('depositSweepError');
            var confirmBtn = document.getElementById('depositSweepConfirm');

            function openSweep(btn) {
                sweepKey = btn.getAttribute('data-wallet-key') || '';
                document.getElementById('depositSweepTitle').textContent = 'Send ' + (btn.getAttribute('data-wallet-title') || '');
                document.getElementById('depositSweepFrom').textContent = 'From ' + (btn.getAttribute('data-wallet-address') || '');
                destInput.value = '';
                destInput.placeholder = (sweepKey === 'trx' || sweepKey === 'usdt_trc20') ? 'T…' : '0x…';
                amountInput.value = btn.getAttribute('data-wallet-balance') || '';
                errBox.hidden = true;
                confirmBtn.disabled = btn.getAttribute('data-wallet-sweepable') !== '1';
                if (window.bootstrap && bootstrap.Modal) {
                    bootstrap.Modal.getOrCreateInstance(document.getElementById('depositSweepModal')).show();
                }
                refreshQuote();
            }

            function refreshQuote() {
                if (!sweepKey) return;
                gasBox.textContent = 'Checking gas…';
                var url = quoteUrl + '?wallet=' + encodeURIComponent(sweepKey) + '&amount=' + encodeURIComponent(amountInput.value || 0);
                fetch(url, { headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf ? csrf.content : '' } })
                    .then(function (r) { return r.json(); })
                    .then(function (data) {
                        gasBox.textContent = data.message || 'Could not estimate gas.';
                        confirmBtn.disabled = data.ready !== true;
                        if (data.max_amount && (!amountInput.value || Number(amountInput.value) <= 0)) {
                            amountInput.value = data.max_amount;
                        }
                    })
                    .catch(function () {
                        gasBox.textContent = 'Could not estimate gas.';
                        confirmBtn.disabled = true;
                    });
            }

            amountInput.addEventListener('change', refreshQuote);
            confirmBtn.addEventListener('click', function () {
                errBox.hidden = true;
                confirmBtn.disabled = true;
                confirmBtn.textContent = 'Sending…';
                fetch(sweepUrl, {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrf ? csrf.content : ''
                    },
                    body: JSON.stringify({
                        wallet: sweepKey,
                        destination: destInput.value,
                        amount: amountInput.value
                    })
                }).then(function (r) { return r.json().then(function (data) { return { ok: r.ok, data: data }; }); })
                    .then(function (result) {
                        confirmBtn.textContent = 'Confirm send';
                        if (!result.ok || result.data.status !== 'true') {
                            errBox.textContent = result.data.message || 'Send failed.';
                            errBox.hidden = false;
                            confirmBtn.disabled = false;
                            return;
                        }
                        if (window.bootstrap && bootstrap.Modal) {
                            bootstrap.Modal.getInstance(document.getElementById('depositSweepModal')).hide();
                        }
                        window.location.reload();
                    })
                    .catch(function () {
                        confirmBtn.textContent = 'Confirm send';
                        confirmBtn.disabled = false;
                        errBox.textContent = 'Send failed.';
                        errBox.hidden = false;
                    });
            });
            @endif
        });
    </script>
@endif