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

@section('title', 'Payment method')

@section('content')
<div class="vpm-deposits vpm-deposits--wizard">
    <x-vpm.page-intro
        title="Payment method"
        :description="($planName && $planType) ? $planName . ' (' . $planType . ')' : 'Deposit amount: ' . \App\Support\Currency::format((float) $amount, $currency)"
    />

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

    <section class="vpm-panel vpm-deposits__wizard-panel">
        <div class="vpm-panel__body">
            <form method="POST" action="{{ route('app.deposits.method.store') }}">
                @csrf
                <div class="vpm-payment-methods">
                    @foreach ($methods as $method)
                        <label class="vpm-payment-method">
                            <input
                                type="radio"
                                name="payment_method_id"
                                value="{{ $method->id }}"
                                {{ (int) old('payment_method_id') === $method->id ? 'checked' : '' }}
                                {{ $loop->first && ! old('payment_method_id') ? 'checked' : '' }}
                                required
                            >
                            <span class="vpm-payment-method__body">
                                <span class="vpm-payment-method__name">{{ $method->name }}</span>
                                <span class="vpm-payment-method__meta">{{ $method->displayLabel() }}</span>
                                @if ($method->instructions)
                                    <span class="vpm-payment-method__hint">{{ $method->instructions }}</span>
                                @endif
                            </span>
                        </label>
                    @endforeach
                </div>
                <x-vpm.form-actions
                    submit="Continue"
                    cancel-href="{{ route('app.fund') }}"
                    cancel-label="Change amount"
                    loading="Saving method…"
                />
            </form>
        </div>
    </section>
</div>
@endsection