@extends('layouts.portal')

@section('title', 'Wallet')
@section('portal_title', 'Wallet Balance')
@section('portal_subtitle', 'Deposit funds into your wallet and track approval status.')

@section('portal_content')
@php
    $balance = (float) ($wallet['balance'] ?? 0);
    $availableBalance = (float) ($wallet['available_balance'] ?? $balance);
    $pendingWithdrawals = (float) ($wallet['pending_withdrawals'] ?? 0);
    $deposits = $wallet['deposits'] ?? [];
    $cryptoWallets = [
        'Bitcoin address' => 'bc1qgexfnlm6pzzhjyp3eumjsd7m7hc3trrf7yv0ja',
        'USDT (TRC20)' => 'F1YVZb4rDpEvdmrWNoBjMqgbsr5rDuX5v5tKEW3oTaDo',
        'Ethereum' => '0x4c032Cf0299a056082570613626A394800864a0f',
    ];
@endphp

<div class="grid gap-6 lg:grid-cols-[0.9fr_1.1fr]">
    <section class="rounded-lg border border-primary-100 bg-white p-6 shadow-sm">
        <p class="text-sm font-bold uppercase tracking-wide text-primary-600">Available Wallet Balance</p>
        <strong class="mt-3 block text-4xl font-extrabold text-slate-900">${{ number_format($balance, 2) }}</strong>
        <div class="mt-5 grid gap-3 sm:grid-cols-2">
            <div class="rounded-lg bg-primary-50 p-4">
                <p class="text-xs font-bold uppercase text-primary-600">Available to Withdraw</p>
                <p class="mt-2 text-lg font-extrabold text-slate-900">${{ number_format($availableBalance, 2) }}</p>
            </div>
            <div class="rounded-lg bg-amber-50 p-4">
                <p class="text-xs font-bold uppercase text-amber-700">Pending Withdrawal</p>
                <p class="mt-2 text-lg font-extrabold text-amber-800">${{ number_format($pendingWithdrawals, 2) }}</p>
            </div>
        </div>
        <a href="{{ url('/portal/withdrawal') }}" class="mt-5 inline-flex rounded-lg border border-primary-200 bg-white px-5 py-3 text-sm font-extrabold text-primary-700 transition hover:bg-primary-50">Request Withdrawal</a>
    </section>

    <section class="rounded-lg border border-slate-200 bg-white p-6 shadow-sm">
        <h2 class="text-xl font-extrabold text-primary-700">Deposit to Wallet</h2>
        <form action="{{ url('/portal/wallet/deposit') }}" method="POST" class="mt-5 space-y-5">
            @csrf
            <div>
                <label for="amount" class="mb-2 block text-sm font-bold text-slate-700">Deposit Amount</label>
                <input id="amount" name="amount" type="number" min="1" step="0.01" required placeholder="Enter amount in USD" class="w-full rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-sm outline-none transition focus:border-primary-500 focus:bg-white focus:ring-4 focus:ring-primary-100" value="{{ old('amount') }}">
                @error('amount')
                    <p class="mt-2 text-sm font-bold text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="payment_method" class="mb-2 block text-sm font-bold text-slate-700">Payment Method</label>
                <select id="payment_method" name="payment_method" required data-payment-method class="w-full rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-sm outline-none transition focus:border-primary-500 focus:bg-white focus:ring-4 focus:ring-primary-100">
                    <option value="">Select payment method</option>
                    @foreach (['Crypto Payment', 'Contact Support for Payment'] as $method)
                        <option value="{{ $method }}" @selected(old('payment_method') === $method)>{{ $method }}</option>
                    @endforeach
                </select>
                @error('payment_method')
                    <p class="mt-2 text-sm font-bold text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div data-crypto-payment-details class="{{ old('payment_method') === 'Crypto Payment' ? '' : 'hidden' }} rounded-lg border border-primary-100 bg-primary-50 p-4">
                <p class="text-sm font-extrabold text-primary-700">Crypto Wallets</p>
                <div class="mt-3 space-y-3">
                    @foreach ($cryptoWallets as $label => $address)
                        <div class="rounded-lg border border-primary-100 bg-white p-3">
                            <p class="text-xs font-extrabold uppercase text-slate-500">{{ $label }}</p>
                            <div class="mt-1 flex items-start gap-2">
                                <p class="min-w-0 flex-1 break-all font-mono text-sm font-bold text-slate-900">{{ $address }}</p>
                                <button type="button" data-copy-address="{{ $address }}" aria-label="Copy {{ $label }}" title="Copy address" class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-primary-100 bg-primary-50 text-primary-700 transition hover:border-primary-200 hover:bg-primary-100 focus:outline-none focus:ring-4 focus:ring-primary-100">
                                    <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 8h10a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2Z"/>
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"/>
                                    </svg>
                                </button>
                            </div>
                            <p data-copy-status class="mt-2 hidden text-xs font-extrabold text-primary-700">Copied</p>
                        </div>
                    @endforeach
                </div>
                <p class="mt-3 text-xs font-semibold leading-5 text-slate-600">Add your transaction hash or payment note below after sending the deposit.</p>
            </div>

            <div>
                <label for="note" class="mb-2 block text-sm font-bold text-slate-700">Deposit Note</label>
                <textarea id="note" name="note" rows="4" placeholder="Transaction reference or note for admin" class="w-full rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-sm outline-none transition focus:border-primary-500 focus:bg-white focus:ring-4 focus:ring-primary-100">{{ old('note') }}</textarea>
                @error('note')
                    <p class="mt-2 text-sm font-bold text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <button type="submit" class="w-full rounded-lg bg-primary-600 px-5 py-3.5 text-sm font-extrabold text-white shadow-lg shadow-primary-700/20 transition hover:bg-primary-700">
                Submit Wallet Deposit
            </button>
        </form>
    </section>
</div>

<section class="mt-6 rounded-lg border border-slate-200 bg-white p-6 shadow-sm">
    <h2 class="text-xl font-extrabold text-primary-700">Wallet Deposit History</h2>
    <div class="mt-5 overflow-hidden rounded-lg border border-slate-200">
        <div class="grid grid-cols-4 bg-slate-50 px-4 py-3 text-xs font-extrabold uppercase text-slate-500">
            <span>Date</span>
            <span>Method</span>
            <span>Status</span>
            <span class="text-right">Amount</span>
        </div>
        @forelse ($deposits as $deposit)
            @php
                $status = $deposit['status'] ?? 'Pending Payment Review';
                $statusClass = match ($status) {
                    'Payment Completed' => 'bg-emerald-50 text-emerald-700',
                    'Deposit Approved' => 'bg-emerald-50 text-emerald-700',
                    'Deposit Rejected' => 'bg-red-50 text-red-700',
                    default => 'bg-amber-50 text-amber-700',
                };
            @endphp
            <div class="grid grid-cols-4 gap-3 border-t border-slate-100 px-4 py-4 text-sm font-semibold text-slate-600">
                <span>{{ $deposit['submitted_at'] ?? '-' }}</span>
                <span>{{ $deposit['payment_method'] ?? 'Not selected' }}</span>
                <span><span class="rounded-full px-3 py-1 text-xs font-extrabold {{ $statusClass }}">{{ $status }}</span></span>
                <span class="text-right">${{ number_format((float) ($deposit['amount'] ?? 0), 2) }}</span>
            </div>
        @empty
            <div class="grid grid-cols-4 px-4 py-4 text-sm font-semibold text-slate-600">
                <span>-</span>
                <span>No deposit yet</span>
                <span>Pending</span>
                <span class="text-right">$0.00</span>
            </div>
        @endforelse
    </div>
</section>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const paymentMethod = document.querySelector('[data-payment-method]');
        const cryptoDetails = document.querySelector('[data-crypto-payment-details]');

        if (!paymentMethod || !cryptoDetails) {
            return;
        }

        const updateCryptoDetails = () => {
            cryptoDetails.classList.toggle('hidden', paymentMethod.value !== 'Crypto Payment');
        };

        paymentMethod.addEventListener('change', updateCryptoDetails);
        updateCryptoDetails();

        const fallbackCopy = (text) => {
            const textArea = document.createElement('textarea');
            textArea.value = text;
            textArea.setAttribute('readonly', '');
            textArea.style.position = 'fixed';
            textArea.style.top = '-9999px';
            document.body.appendChild(textArea);
            textArea.select();
            document.execCommand('copy');
            textArea.remove();
        };

        document.querySelectorAll('[data-copy-address]').forEach((button) => {
            button.addEventListener('click', async () => {
                const address = button.dataset.copyAddress || '';
                const status = button.closest('.rounded-lg')?.querySelector('[data-copy-status]');

                try {
                    if (navigator.clipboard && window.isSecureContext) {
                        await navigator.clipboard.writeText(address);
                    } else {
                        fallbackCopy(address);
                    }

                    button.setAttribute('title', 'Copied');
                    status?.classList.remove('hidden');

                    window.setTimeout(() => {
                        button.setAttribute('title', 'Copy address');
                        status?.classList.add('hidden');
                    }, 1500);
                } catch (error) {
                    button.setAttribute('title', 'Copy failed');
                }
            });
        });
    });
</script>
@endpush