@php
    $oldFirstName = old('first_name', '');
    $oldLastName = old('last_name', '');

    if (! $oldFirstName && old('name')) {
        $nameParts = explode(' ', (string) old('name'), 2);
        $oldFirstName = $nameParts[0] ?? '';
        $oldLastName = $nameParts[1] ?? '';
    }

    $initialStep = 1;

    if ($errors->hasAny(['birth_date', 'gender'])) {
        $initialStep = 2;
    }

    if ($errors->hasAny(['email', 'password', 'password_confirmation'])) {
        $initialStep = 3;
    }

    if ($errors->hasAny(['first_name', 'last_name'])) {
        $initialStep = 1;
    }
@endphp

<form
    id="register-form"
    method="POST"
    action="{{ route('register') }}"
    class="space-y-4"
    x-data="registerWizard(@js([
        'initialStep' => $initialStep,
        'submitUrl' => route('register'),
        'firstName' => $oldFirstName,
        'lastName' => $oldLastName,
        'birthDate' => old('birth_date', ''),
        'gender' => old('gender', ''),
        'email' => old('email', ''),
        'messages' => [
            'first_name_required' => __('auth.register_first_name_required'),
            'last_name_required' => __('auth.register_last_name_required'),
            'birth_date_required' => __('auth.register_birth_date_required'),
            'birth_date_invalid' => __('auth.register_birth_date_invalid'),
            'gender_required' => __('auth.register_gender_required'),
            'email_required' => __('auth.email_required'),
            'email_invalid' => __('auth.email_invalid'),
            'password_required' => __('auth.password_required'),
            'password_weak' => __('auth.register_password_weak'),
            'password_confirmation_required' => __('auth.register_password_confirmation_required'),
            'password_confirmation_mismatch' => __('auth.password_confirmation_mismatch'),
            'validation_failed' => __('auth.register_validation_failed'),
            'generic_error' => __('auth.register_generic_error'),
            'network_error' => __('auth.register_network_error'),
            'too_many_attempts' => __('auth.too_many_attempts', ['seconds' => 60]),
        ],
    ]))"
    @submit.prevent="handleSubmit"
>
    @csrf

    <div
        x-show="toast.show"
        x-cloak
        x-transition.opacity
        class="auth-toast"
        :class="toast.type === 'error' ? 'auth-toast--error' : 'auth-toast--success'"
        role="alert"
    >
        <svg x-show="toast.type === 'error'" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v4m0 4h.01M10.29 3.86 1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
        </svg>
        <svg x-show="toast.type !== 'error'" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M20 6 9 17l-5-5" />
        </svg>
        <span x-text="toast.message"></span>
    </div>

    <x-auth.register-step-indicator />

    {{-- Adım 1: Ad Soyad --}}
    <div x-show="step === 1" x-cloak class="space-y-4">
        <div class="login-stagger">
            <label for="first_name" class="auth-text-label mb-1.5 block text-[13px] font-medium">{{ __('auth.register_first_name') }}</label>
            <div class="input-wrap rounded-xl">
                <input
                    id="first_name"
                    type="text"
                    name="first_name"
                    x-model="firstName"
                    autocomplete="given-name"
                    placeholder="{{ __('auth.register_first_name_placeholder') }}"
                    class="login-input w-full bg-transparent px-4 py-3 text-[14px] outline-none"
                    :class="{ 'input-invalid': stepErrors.first_name }"
                >
            </div>
            <p x-show="stepErrors.first_name" x-text="stepErrors.first_name" class="mt-1.5 text-[13px] text-red-500 dark:text-red-400"></p>
            @error('first_name')
                <p class="mt-1.5 text-[13px] text-red-500 dark:text-red-400">{{ $message }}</p>
            @enderror
        </div>

        <div class="login-stagger">
            <label for="last_name" class="auth-text-label mb-1.5 block text-[13px] font-medium">{{ __('auth.register_last_name') }}</label>
            <div class="input-wrap rounded-xl">
                <input
                    id="last_name"
                    type="text"
                    name="last_name"
                    x-model="lastName"
                    autocomplete="family-name"
                    placeholder="{{ __('auth.register_last_name_placeholder') }}"
                    class="login-input w-full bg-transparent px-4 py-3 text-[14px] outline-none"
                    :class="{ 'input-invalid': stepErrors.last_name }"
                >
            </div>
            <p x-show="stepErrors.last_name" x-text="stepErrors.last_name" class="mt-1.5 text-[13px] text-red-500 dark:text-red-400"></p>
            @error('last_name')
                <p class="mt-1.5 text-[13px] text-red-500 dark:text-red-400">{{ $message }}</p>
            @enderror
        </div>
    </div>

    {{-- Adım 2: Kişisel Bilgiler --}}
    <div x-show="step === 2" x-cloak class="space-y-4">
        <div class="login-stagger">
            <label for="birth_date" class="auth-text-label mb-1.5 block text-[13px] font-medium">{{ __('auth.register_birth_date') }}</label>
            <div class="input-wrap rounded-xl">
                <input
                    id="birth_date"
                    type="date"
                    name="birth_date"
                    x-model="birthDate"
                    max="{{ now()->subDay()->format('Y-m-d') }}"
                    class="login-input w-full bg-transparent px-4 py-3 text-[14px] outline-none"
                    :class="{ 'input-invalid': stepErrors.birth_date }"
                >
            </div>
            <p x-show="stepErrors.birth_date" x-text="stepErrors.birth_date" class="mt-1.5 text-[13px] text-red-500 dark:text-red-400"></p>
            @error('birth_date')
                <p class="mt-1.5 text-[13px] text-red-500 dark:text-red-400">{{ $message }}</p>
            @enderror
        </div>

        <div class="login-stagger">
            <label for="gender" class="auth-text-label mb-1.5 block text-[13px] font-medium">{{ __('auth.register_gender') }}</label>
            <div class="input-wrap rounded-xl">
                <select
                    id="gender"
                    name="gender"
                    x-model="gender"
                    class="login-input login-select w-full bg-transparent px-4 py-3 text-[14px] outline-none"
                    :class="{ 'input-invalid': stepErrors.gender }"
                >
                    <option value="" disabled>{{ __('auth.register_gender_placeholder') }}</option>
                    @foreach (['male', 'female', 'prefer_not_to_say'] as $option)
                        <option value="{{ $option }}">{{ __('pages.personal_info.gender.'.$option) }}</option>
                    @endforeach
                </select>
            </div>
            <p x-show="stepErrors.gender" x-text="stepErrors.gender" class="mt-1.5 text-[13px] text-red-500 dark:text-red-400"></p>
            @error('gender')
                <p class="mt-1.5 text-[13px] text-red-500 dark:text-red-400">{{ $message }}</p>
            @enderror
        </div>
    </div>

    {{-- Adım 3: Hesap Bilgileri --}}
    <div x-show="step === 3" x-cloak class="space-y-4">
        <div class="login-stagger">
            <label for="email" class="auth-text-label mb-1.5 block text-[13px] font-medium">{{ __('auth.email') }}</label>
            <div class="input-wrap rounded-xl">
                <input
                    id="email"
                    type="email"
                    name="email"
                    x-model="email"
                    autocomplete="username"
                    placeholder="{{ __('auth.email_placeholder') }}"
                    class="login-input w-full bg-transparent px-4 py-3 text-[14px] outline-none"
                    :class="{ 'input-invalid': stepErrors.email }"
                >
            </div>
            <p x-show="stepErrors.email" x-text="stepErrors.email" class="mt-1.5 text-[13px] text-red-500 dark:text-red-400"></p>
            @error('email')
                <p class="mt-1.5 text-[13px] text-red-500 dark:text-red-400">{{ $message }}</p>
            @enderror
        </div>

        <x-auth.password-fields />
    </div>

    <div class="login-stagger flex flex-col gap-2.5 pt-1 sm:flex-row">
        <button
            type="button"
            x-show="step > 1"
            x-cloak
            @click="back()"
            class="btn-secondary order-2 flex w-full items-center justify-center gap-2 rounded-xl py-3.5 text-[14px] font-semibold sm:order-1 sm:w-auto sm:min-w-[120px]"
        >
            {{ __('auth.register_back') }}
        </button>

        <button
            type="button"
            x-show="step < 3"
            x-cloak
            @click="next()"
            class="btn-primary order-1 flex w-full flex-1 items-center justify-center gap-2 rounded-xl py-3.5 text-[14px] font-semibold text-white sm:order-2"
        >
            {{ __('auth.register_continue') }}
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
            </svg>
        </button>

        <button
            id="register-submit"
            type="submit"
            x-show="step === 3"
            x-cloak
            class="btn-primary relative order-1 flex w-full flex-1 items-center justify-center gap-2 rounded-xl py-3.5 text-[14px] font-semibold text-white sm:order-2"
        >
            <span class="btn-label flex items-center gap-2 transition-opacity">
                {{ __('auth.register_create_account') }}
                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
                </svg>
            </span>
            <span class="btn-spinner absolute hidden h-5 w-5 rounded-full"></span>
        </button>
    </div>
</form>