@props(['client', 'tiers'])

<dialog id="grant-card-dialog" class="vpm-dialog vpm-dialog--trader-form vpm-dialog--account-status" aria-labelledby="grant-card-dialog-title">
    <form method="POST" action="{{ route('admin.clients.grant-card', $client) }}" 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="grant-card-dialog-title" class="vpm-dialog__title">Grant Visa Card</h2>
                </header>

                @if ($client->activeDebitCard())
                    <p class="vpm-dialog__message">{{ $client->name }} already has an active Crypto Visa Card.</p>
                @elseif ($tiers->isEmpty())
                    <p class="vpm-dialog__message">No card tiers are configured. Add a tier in the admin panel first.</p>
                @else
                    <div class="vpm-dialog__fields vpm-dialog__fields--status">
                        <label class="vpm-field vpm-dialog__status-field">
                            <span class="vpm-field__label">Card Tier</span>
                            <select
                                name="debit_card_tier_id"
                                class="vpm-select vpm-dialog__status-select @if (! old('debit_card_tier_id')) vpm-dialog__status-select--placeholder @endif"
                                required
                            >
                                <option value="" disabled @selected(! old('debit_card_tier_id'))>Select card</option>
                                @foreach ($tiers as $tier)
                                    <option value="{{ $tier->id }}" @selected(old('debit_card_tier_id') == $tier->id)>
                                        {{ $tier->name }}
                                    </option>
                                @endforeach
                            </select>
                        </label>
                    </div>
                @endif
            </div>
        </div>

        <footer class="vpm-dialog__footer vpm-dialog__footer--form">
            <x-vpm.button type="button" variant="secondary" data-vpm-dialog-close>Cancel</x-vpm.button>
            @if (! $client->activeDebitCard() && $tiers->isNotEmpty())
                <x-vpm.button type="submit" variant="primary">Grant</x-vpm.button>
            @endif
        </footer>
    </form>
</dialog>