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

@section('title', 'Make a deposit')

@section('content')
<div class="vpm-deposits vpm-deposits--wizard">
    <x-vpm.page-intro
        title="Make a deposit"
        description="Enter the amount you want to fund. You will choose a payment method on the next step."
    />

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

    <section class="vpm-panel vpm-deposits__wizard-panel">
        <div class="vpm-panel__body">
            <form method="POST" action="{{ route('app.deposits.amount.store') }}" class="vpm-deposit-form">
                @csrf
                <label class="vpm-field" for="deposit-amount">
                    <span class="vpm-field__label">Amount ({{ $currency }})</span>
                    <input
                        type="number"
                        id="deposit-amount"
                        name="amount"
                        class="vpm-input @error('amount') vpm-input--error @enderror"
                        value="{{ old('amount') }}"
                        placeholder="e.g. 500"
                        min="{{ $depositMin }}"
                        max="{{ $depositMax }}"
                        step="0.01"
                        required
                        autofocus
                        data-vpm-constraint
                        aria-describedby="deposit-amount-hint"
                    >
                    <span id="deposit-amount-hint" class="vpm-input-hint--live" data-valid="Amount is within allowed limits.">
                        Between {{ number_format($depositMin, 0) }} and {{ number_format($depositMax, 0) }} {{ $currency }}
                    </span>
                    @error('amount')
                        <span class="vpm-field__error" role="alert">{{ $message }}</span>
                    @enderror
                </label>
                <x-vpm.form-actions
                    submit="Continue"
                    cancel-href="{{ route('app.deposits') }}"
                    cancel-label="Cancel"
                    loading="Checking amount…"
                />
            </form>
        </div>
    </section>
</div>
@endsection