@extends('layouts.client')
@section('title', 'Deposit')
@section('content')
<div class="client-form-card client-card">
    <h1>Deposit Funds</h1>
    <form method="POST" action="{{ route('client.home.deposit.store') }}" id="depositForm">
        @csrf
        <div class="form-group">
            <label>Choose Network</label>
            <select name="network" class="client-select" id="networkSelect" required>
                <option value="">-- Select Network --</option>
                @foreach($wallets as $network => $address)
                    @if($address)
                    <option value="{{ $network }}" data-address="{{ $address }}">{{ $network }}</option>
                    @endif
                @endforeach
            </select>
        </div>
        <div class="form-group" id="walletGroup" style="display:none">
            <label>Deposit To Wallet</label>
            <div class="input-copy-row">
                <input type="text" class="client-input" id="walletDisplay" readonly>
                <button type="button" class="client-btn client-btn-outline client-btn-sm" id="walletCopyBtn">Copy</button>
            </div>
            <p class="copy-feedback" id="walletCopyFeedback" hidden aria-live="polite">Copied!</p>
        </div>
        <div class="form-group">
            <label>Amount ($)</label>
            <input type="number" name="amount" class="client-input" step="0.01" min="1" placeholder="Enter amount" required>
        </div>
        <button type="submit" class="client-btn client-btn-primary">Proceed to Deposit</button>
    </form>
</div>
@endsection

@push('scripts')
<script>
(function() {
    const sel = document.getElementById('networkSelect');
    const wg = document.getElementById('walletGroup');
    const wd = document.getElementById('walletDisplay');
    const copyBtn = document.getElementById('walletCopyBtn');
    const copyFeedback = document.getElementById('walletCopyFeedback');
    let copyFeedbackTimer = null;

    function showCopyFeedback() {
        if (!copyFeedback) return;
        copyFeedback.hidden = false;
        clearTimeout(copyFeedbackTimer);
        copyFeedbackTimer = setTimeout(function() {
            copyFeedback.hidden = true;
        }, 2000);
    }

    function fallbackCopyText(text) {
        const textarea = document.createElement('textarea');
        textarea.value = text;
        textarea.setAttribute('readonly', '');
        textarea.style.position = 'fixed';
        textarea.style.left = '-9999px';
        document.body.appendChild(textarea);
        textarea.select();
        textarea.setSelectionRange(0, text.length);
        let ok = false;
        try {
            ok = document.execCommand('copy');
        } catch (e) {
            ok = false;
        }
        document.body.removeChild(textarea);
        return ok;
    }

    async function copyWalletAddress() {
        const text = (wd && wd.value) ? wd.value.trim() : '';
        if (!text) {
            alert('Select a network first.');
            return;
        }

        let copied = false;

        if (window.isSecureContext && navigator.clipboard && navigator.clipboard.writeText) {
            try {
                await navigator.clipboard.writeText(text);
                copied = true;
            } catch (e) {
                copied = fallbackCopyText(text);
            }
        } else {
            copied = fallbackCopyText(text);
            if (!copied && wd) {
                wd.focus();
                wd.select();
                wd.setSelectionRange(0, text.length);
                try {
                    copied = document.execCommand('copy');
                } catch (e2) {
                    copied = false;
                }
            }
        }

        if (copied) {
            if (copyBtn) {
                const original = copyBtn.textContent;
                copyBtn.textContent = 'Copied!';
                setTimeout(function() {
                    copyBtn.textContent = original;
                }, 2000);
            }
            showCopyFeedback();
        } else {
            alert('Could not copy. Please select the address and copy it manually.');
            if (wd) {
                wd.focus();
                wd.select();
            }
        }
    }

    sel?.addEventListener('change', function() {
        const opt = sel.options[sel.selectedIndex];
        if (opt && opt.dataset.address) {
            wd.value = opt.dataset.address;
            wg.style.display = 'block';
        } else {
            wg.style.display = 'none';
            wd.value = '';
        }
        if (copyFeedback) copyFeedback.hidden = true;
    });

    copyBtn?.addEventListener('click', copyWalletAddress);
})();
</script>
@endpush