@extends('layouts.vpm-dashboard', ['active' => 'withdrawals', 'area' => 'user'])

@section('title', 'Top up card')
@section('page_title', 'Top up debit card')
@section('page_subtitle', 'Move funds from your account to your card')
@section('parent_title', 'Withdrawals')
@section('parent_url', route('app.withdrawals'))

@section('content')
<div class="vpm-action-page">
    <p class="vpm-action-back">
        <a href="{{ route('app.withdrawals') }}">&larr; Back to withdrawals</a>
    </p>

    <x-vpm.action-hero
        title="Top up your card"
        text="Transfer from your main account balance to your debit card. Minimum {{ number_format($topupMin, 2) }} {{ $currency }}."
    />

    <section class="vpm-panel vpm-action-panel">
        <div class="vpm-panel__body">
            <p class="vpm-action-panel__hint">Account balance: <span class="vpm-num">{{ number_format((float) $accountBalance, 2, '.', ',') }} {{ $currency }}</span></p>
            <p class="vpm-action-panel__hint">Card balance: <span class="vpm-num">{{ $card->formattedBalance() }} {{ $currency }}</span></p>
            @if ($remainingTopup !== null)
                <p class="vpm-action-panel__hint">Remaining top up allowance: <span class="vpm-num">{{ number_format($remainingTopup, 2) }} {{ $currency }}</span></p>
            @endif

            <form method="POST" action="{{ route('app.withdrawals.topup.store') }}" class="vpm-form-stack">
                @csrf
                <label class="vpm-field">
                    <span class="vpm-field__label">From</span>
                    <select name="source" class="vpm-select" required>
                        <option value="" disabled {{ old('source') ? '' : 'selected' }}>Select source</option>
                        @foreach (\App\Support\DebitCardTopupSources::forUser(auth()->user()) as $source)
                            <option value="{{ $source['value'] }}" @selected(old('source') === $source['value'])>
                                {{ \App\Support\DebitCardTopupSources::formattedOption($source, $currency) }}
                            </option>
                        @endforeach
                    </select>
                    @error('source')
                        <span class="vpm-field__error">{{ $message }}</span>
                    @enderror
                </label>
                <label class="vpm-field">
                    <span class="vpm-field__label">Amount ({{ $currency }})</span>
                    <input
                        type="number"
                        name="amount"
                        class="vpm-input"
                        min="{{ $topupMin }}"
                        step="0.01"
                        value="{{ old('amount') }}"
                        placeholder="{{ number_format($topupMin, 2) }}"
                        required
                    >
                    @error('amount')
                        <span class="vpm-field__error">{{ $message }}</span>
                    @enderror
                </label>
                <x-vpm.button type="submit" variant="primary" data-loading-label="Transferring…">Top up card</x-vpm.button>
            </form>
        </div>
    </section>
</div>
@endsection