@extends('layouts.vpm-mobile-app', ['active' => 'deposits'])

@section('title', 'Upload proof')

@section('content')
<div class="vpm-deposits vpm-deposits--wizard">
    <x-vpm.page-intro
        title="Upload proof"
        :description="($planName && $planType) ? $planName . ' (' . $planType . ')' : 'Send payment to the wallet below, then upload your transaction receipt or screenshot.'"
    />

    @include('partials.vpm.deposit-steps', ['step' => 3])

    <section class="vpm-panel vpm-deposits__wizard-panel">
        <div class="vpm-panel__body">
            <div class="vpm-deposit-pay">
                <div class="vpm-deposit-pay__qr-wrap">
                    <img
                        src="{{ $method->qrCodeUrl(240) }}"
                        alt="QR code for {{ $method->name }} wallet"
                        class="vpm-deposit-pay__qr"
                        width="240"
                        height="240"
                        loading="eager"
                    >
                    <p class="vpm-deposit-pay__qr-hint">Scan to copy wallet address</p>
                </div>

                <dl class="vpm-deposit-details">
                <div>
                    <dt>Amount</dt>
                    <dd>{{ number_format($amount, 2, '.', ',') }} {{ $currency }}</dd>
                </div>
                <div>
                    <dt>Method</dt>
                    <dd>{{ $method->name }}</dd>
                </div>
                <div>
                    <dt>Network</dt>
                    <dd>{{ $method->network }}</dd>
                </div>
                <div>
                    <dt>Wallet address</dt>
                    <dd class="vpm-deposit-details__wallet">
                        <code class="vpm-wallet-address" id="wallet-address">{{ $method->address }}</code>
                        <button type="button" class="vpm-btn vpm-btn--ghost vpm-btn--sm" data-vpm-copy-target="#wallet-address">Copy</button>
                    </dd>
                </div>
            </dl>
            </div>

            @if ($method->instructions)
                <p class="vpm-field__hint vpm-mt-2">{{ $method->instructions }}</p>
            @endif

            <form method="POST" action="{{ route('app.deposits.store') }}" enctype="multipart/form-data" class="vpm-mt-2">
                @csrf
                <label class="vpm-field">
                    <span class="vpm-field__label">Upload screenshot or receipt</span>
                    <input type="file" name="proof" class="vpm-input" accept=".jpg,.jpeg,.png,.webp,.pdf" required>
                    <span class="vpm-field__hint">JPG, PNG, WebP, or PDF — max {{ $proofMaxMb }} MB</span>
                </label>
                <x-vpm.form-actions
                    submit="Submit deposit"
                    cancel-href="{{ route('app.deposits.method') }}"
                    cancel-label="Change method"
                    loading="Submitting…"
                />
            </form>
        </div>
    </section>
</div>
@endsection