@props([
    'topupSources',
    'currency',
    'topupMin',
    'remainingTopup' => null,
    'cardFrozen' => false,
])

<dialog id="debit-card-topup-dialog" class="vpm-dialog vpm-dialog--card-topup" aria-labelledby="debit-card-topup-dialog-title">
    <form method="POST" action="{{ route('app.withdrawals.topup.store') }}" class="vpm-dialog__panel">
        @csrf

        <button type="button" class="vpm-dialog__close vpm-dialog__close--corner" data-vpm-dialog-close aria-label="Close">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                <path d="M18 6 6 18"/><path d="m6 6 12 12"/>
            </svg>
        </button>

        <div class="vpm-dialog__scroll">
            <div class="vpm-dialog__content">
                <header class="vpm-dialog__header vpm-dialog__header--form">
                    <h2 id="debit-card-topup-dialog-title" class="vpm-dialog__title">Top up card</h2>
                </header>

                @if ($cardFrozen)
                    <p class="vpm-dialog__description">This card is frozen. Unfreeze it before topping up.</p>
                @else
                    @if ($remainingTopup !== null)
                        <p class="vpm-dialog__description">
                            Remaining top up allowance: {{ number_format($remainingTopup, 2) }} {{ $currency }}
                        </p>
                    @endif

                    <div class="vpm-dialog__fields">
                        <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 ($topupSources 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</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>
                    </div>
                @endif
            </div>
        </div>

        <footer class="vpm-dialog__footer vpm-dialog__footer--form">
            <button type="button" class="vpm-btn vpm-btn--secondary" data-vpm-dialog-close>Cancel</button>
            @unless ($cardFrozen)
                <button type="submit" class="vpm-btn vpm-btn--primary" data-loading-label="Topping up…">Top up</button>
            @endunless
        </footer>
    </form>
</dialog>