@props(['client'])

@php
    $currencyOptions = \App\Support\Currency::options($client->currency);
    $selectedCurrency = old('currency', strtoupper((string) $client->currency));
@endphp

<dialog id="update-currency-dialog" class="vpm-dialog vpm-dialog--trader-form" aria-labelledby="update-currency-dialog-title">
    <form method="POST" action="{{ route('admin.clients.update-currency', $client) }}" class="vpm-dialog__panel">
        @csrf
        @method('PUT')

        <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="update-currency-dialog-title" class="vpm-dialog__title">Change currency</h2>
                </header>

                <div class="vpm-dialog__fields">
                    <label class="vpm-field" for="update-currency-select">
                        <span class="vpm-field__label">Currency</span>
                        <select
                            id="update-currency-select"
                            name="currency"
                            class="vpm-select"
                            required
                        >
                            @foreach ($currencyOptions as $code => $label)
                                <option value="{{ $code }}" @selected($selectedCurrency === $code)>{{ $label }}</option>
                            @endforeach
                        </select>
                        @error('currency')
                            <span class="vpm-field__error" role="alert">{{ $message }}</span>
                        @enderror
                    </label>
                </div>
            </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>
            <x-vpm.button type="submit" variant="primary">Update</x-vpm.button>
        </footer>
    </form>
</dialog>