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

@section('title', 'Create client')
@section('page_title', 'Create client')
@section('page_subtitle', 'Onboard a new client account')
@section('parent_title', 'Clients')
@section('parent_url', route('admin.clients'))

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

    <x-vpm.action-hero
        title="Create client account"
        text="Required fields are marked. Verified clients can sign in right away."
    />

    <section class="vpm-panel vpm-action-panel">
        <div class="vpm-panel__body">
            <form method="POST" action="{{ route('admin.clients.store') }}" class="vpm-wallet-form">
                @csrf
                <div class="vpm-wallet-form__grid">
                    <label class="vpm-field">
                        <span class="vpm-field__label">First name</span>
                        <input type="text" name="first_name" class="vpm-input" value="{{ old('first_name') }}" required maxlength="100">
                    </label>
                    <label class="vpm-field">
                        <span class="vpm-field__label">Last name</span>
                        <input type="text" name="last_name" class="vpm-input" value="{{ old('last_name') }}" required maxlength="100">
                    </label>
                    <label class="vpm-field">
                        <span class="vpm-field__label">Email</span>
                        <input type="email" name="email" class="vpm-input" value="{{ old('email') }}" required maxlength="255">
                    </label>
                    <label class="vpm-field">
                        <span class="vpm-field__label">Mobile</span>
                        <input type="text" name="mobile" class="vpm-input" value="{{ old('mobile') }}" required maxlength="20">
                    </label>
                    <label class="vpm-field" for="client-password">
                        <span class="vpm-field__label">Password<span class="vpm-required" aria-hidden="true">*</span></span>
                        <input type="password" id="client-password" name="password" class="vpm-input" required minlength="8" autocomplete="new-password" data-vpm-constraint aria-describedby="client-password-hint">
                        <span id="client-password-hint" class="vpm-input-hint--live" data-valid="Password meets the minimum length.">At least 8 characters</span>
                    </label>
                    <label class="vpm-field">
                        <span class="vpm-field__label">Confirm password</span>
                        <input type="password" name="password_confirmation" class="vpm-input" required minlength="8" autocomplete="new-password">
                    </label>
                    <label class="vpm-field">
                        <span class="vpm-field__label">Country</span>
                        <input type="text" name="country" class="vpm-input" value="{{ old('country') }}" required maxlength="100">
                    </label>
                    <label class="vpm-field">
                        <span class="vpm-field__label">Currency</span>
                        <input type="text" name="currency" class="vpm-input" value="{{ old('currency', $currency) }}" required maxlength="10">
                    </label>
                    <label class="vpm-field">
                        <span class="vpm-field__label">State / province</span>
                        <input type="text" name="state" class="vpm-input" value="{{ old('state') }}" required maxlength="100">
                    </label>
                    <label class="vpm-field">
                        <span class="vpm-field__label">City</span>
                        <input type="text" name="city" class="vpm-input" value="{{ old('city') }}" required maxlength="100">
                    </label>
                    <label class="vpm-field">
                        <span class="vpm-field__label">Referral ID (optional)</span>
                        <input type="text" name="referral_id" class="vpm-input" value="{{ old('referral_id') }}" maxlength="100">
                    </label>
                    <label class="vpm-field">
                        <span class="vpm-field__label">Starting balance</span>
                        <input type="number" name="balance" class="vpm-input" value="{{ old('balance', 0) }}" min="0" step="0.01">
                    </label>
                    <label class="vpm-field vpm-field--checkbox">
                        <input type="checkbox" name="verify_email" value="1" {{ old('verify_email', true) ? 'checked' : '' }}>
                        <span>Mark email as verified (client can sign in immediately)</span>
                    </label>
                </div>
                <x-vpm.form-actions submit="Create client account" loading="Creating account…" />
            </form>
        </div>
    </section>
</div>
@endsection