Form Wizard

{{--
    Form Wizard 01 — a multi-step form with a reactive progress indicator.
    State (current step + nav) is inline Alpine on a plain <div> (never on an
    <x-ui.card>: bracketed x-data on a component tag breaks Blade parsing). Each
    step is a panel toggled by `x-show`; Back is hidden on step 1 and the submit
    button replaces Continue on the last step. Composes the form primitives.
--}}
@props([
    'action' => '#',
    'method' => 'POST',
    'currentStep' => 1,
    'values' => null,
    'statusMessage' => null,
    'submitLabel' => 'Create account',
])

@php
    $steps = [__('Account'), __('Profile'), __('Review')];
    $currentStep = max(1, min(count($steps), (int) $currentStep));
    $values ??= ['email' => '', 'full_name' => '', 'role' => 'developer', 'bio' => ''];
@endphp

<x-ui.form.guard>
    <div
        data-slot="block-form-wizard"
        x-data="{
            step: @js($currentStep),
            dir: 'fwd',
            steps: @js($steps),
            get total() { return this.steps.length },
            next() {
                const panel = this.$root.querySelector(`[data-step-panel='${this.step}']`)
                const invalid = Array.from(panel?.querySelectorAll('input, select, textarea') ?? []).find((control) => ! control.checkValidity())
                if (invalid) { invalid.reportValidity(); invalid.focus(); return }
                if (this.step < this.total) { this.dir = 'fwd'; this.step++ }
            },
            back() { if (this.step > 1) { this.dir = 'back'; this.step-- } },
        }"
        :data-step-dir="dir"
        class="mx-auto w-full max-w-xl rounded-lg border border-border bg-card p-6 text-card-foreground shadow-sm sm:p-8"
    >
    {{-- Reactive progress indicator: the stepper follows `step` live. --}}
    <x-ui.stepper
        orientation="horizontal"
        bind="step"
        :steps="collect($steps)->map(fn (string $label, int $i) => ['title' => $label, 'status' => $currentStep > $i + 1 ? 'completed' : ($currentStep === $i + 1 ? 'active' : 'default')])->all()"
        class="mb-8"
        aria-label="{{ __('Progress') }}"
    />

    @if ($statusMessage)
        <x-ui.alert variant="success" role="status" class="mb-6">{{ __($statusMessage) }}</x-ui.alert>
    @endif

    <x-ui.form :action="$action" :method="$method" :summary="__('Please correct the errors below.')" data-persisted-form>
        {{-- Step 1 — Account --}}
        <div x-show="step === 1" data-step-panel="1" class="space-y-4">
            <x-ui.field name="email" label="Email">
                <x-ui.input name="email" type="email" :value="$values['email'] ?? ''" placeholder="you@example.com" required />
            </x-ui.field>
            <x-ui.field name="password" label="Password">
                <x-ui.input name="password" type="password" placeholder="••••••••" autocomplete="new-password" minlength="8" required />
            </x-ui.field>
        </div>

        {{-- Step 2 — Profile --}}
        <div x-show="step === 2" x-cloak data-step-panel="2" class="space-y-4">
            <x-ui.field name="full_name" label="Full name">
                <x-ui.input name="full_name" :value="$values['full_name'] ?? ''" placeholder="Ada Lovelace" required />
            </x-ui.field>
            <x-ui.field name="role" label="Role">
                <x-ui.select name="role" required>
                    <option value="developer" @selected(old('role', $values['role'] ?? '') === 'developer')>{{ __('Developer') }}</option>
                    <option value="designer" @selected(old('role', $values['role'] ?? '') === 'designer')>{{ __('Designer') }}</option>
                    <option value="manager" @selected(old('role', $values['role'] ?? '') === 'manager')>{{ __('Manager') }}</option>
                </x-ui.select>
            </x-ui.field>
            <x-ui.field name="bio" label="Bio">
                <x-ui.textarea name="bio" rows="3" placeholder="A sentence about you.">{{ $values['bio'] ?? '' }}</x-ui.textarea>
            </x-ui.field>
        </div>

        {{-- Step 3 — Review --}}
        <div x-show="step === 3" x-cloak data-step-panel="3" class="space-y-4">
            <p class="text-sm text-muted-foreground">{{ __('Review your details, then create your account.') }}</p>
            <div class="rounded-lg border border-border bg-muted/40 p-6 text-sm text-foreground">
                {{ __('Everything look right? Use Back to make changes.') }}
            </div>
        </div>

        {{-- Navigation --}}
        <div class="mt-8 flex items-center gap-4">
            <x-ui.button type="button" variant="outline" x-show="step > 1" x-on:click="back()">
                {{ __('Back') }}
            </x-ui.button>
            <div class="ms-auto flex items-center gap-4">
                <span class="text-xs text-muted-foreground" aria-hidden="true">
                    <span x-text="step"></span> / <span x-text="total"></span>
                </span>
                <x-ui.button type="button" x-show="step < total" x-on:click="next()">
                    {{ __('Continue') }}
                </x-ui.button>
                <x-ui.button type="submit" x-show="step === total" x-cloak x-bind:disabled="submitting" x-bind:aria-busy="submitting">
                    <span x-show="! submitting">{{ __($submitLabel) }}</span>
                    <span x-cloak x-show="submitting">{{ __('Creating…') }}</span>
                </x-ui.button>
            </div>
        </div>
    </x-ui.form>
    </div>
</x-ui.form.guard>