@extends('layouts.auth')

@section('title', __('Create an account'))
@section('heading', __('Create an account'))
@section('intro', __('Save properties, contact sellers and — when you are ready — list your own.'))

@section('form')
    {{--
        The account type drives the rest of the form: the seller fields only
        exist for someone who says they intend to sell, and the choice is not
        final — a buyer can open a seller profile at any time afterwards.
    --}}
    <form action="{{ route('register') }}" method="POST" class="space-y-5"
          x-data="{ accountType: '{{ old('account_type', 'buyer') }}', submitting: false }"
          @submit="submitting = true">
        @csrf

        <fieldset>
            <legend class="form-label">{{ __('I want to') }}</legend>

            <div class="grid gap-3 sm:grid-cols-2">
                @foreach ($accountTypes as $type)
                    <label class="flex cursor-pointer items-start gap-3 rounded-lg border p-3.5 transition"
                           :class="accountType === '{{ $type->value }}'
                               ? 'border-primary bg-primary/10'
                               : 'border-border hover:border-text-muted'">
                        <input type="radio" name="account_type" value="{{ $type->value }}"
                               x-model="accountType" class="mt-0.5 accent-primary">

                        <span class="min-w-0">
                            <span class="block text-sm font-medium text-text">
                                {{ $type->intentLabel() }}
                            </span>
                            <span class="mt-0.5 block text-xs text-text-secondary">
                                {{ $type->intentDescription() }}
                            </span>
                        </span>
                    </label>
                @endforeach
            </div>
        </fieldset>

        <x-form.input name="name" :label="__('Full name')" required autocomplete="name" />

        <x-form.input name="username" :label="__('Username')" required autocomplete="username"
                      :hint="__('Letters, numbers, dots, underscores or hyphens. You can sign in with this or your email.')" />
        <x-form.input name="email" type="email" :label="__('Email address')" required autocomplete="email" />
        <x-form.input name="phone" type="tel" :label="__('Phone')" autocomplete="tel"
                      :hint="__('Optional. Shown to sellers you contact.')" />

        <div x-show="accountType === 'seller'" x-cloak class="space-y-5 rounded-lg bg-surface-muted/60 p-4">
            <x-form.select name="seller_type" :label="__('You are a')" :options="$sellerTypes"
                           :placeholder="false" />

            <x-form.input name="display_name" :label="__('Name to list under')"
                          :hint="__('Your agency or company name, or your own.')" />
        </div>

        <x-form.input name="password" type="password" :label="__('Password')" required
                      autocomplete="new-password" :hint="__('At least eight characters.')" />

        <x-form.input name="password_confirmation" type="password" :label="__('Confirm password')" required
                      autocomplete="new-password" />

        <x-form.checkbox name="terms">
            {{ __('I accept the') }}
            <a href="/terms-of-use" class="text-text-brand underline underline-offset-4">{{ __('terms of use') }}</a>
            {{ __('and') }}
            <a href="/privacy-policy" class="text-text-brand underline underline-offset-4">{{ __('privacy policy') }}</a>.
        </x-form.checkbox>

        <button type="submit" class="btn btn-primary w-full" :disabled="submitting">
            <span x-show="!submitting">{{ __('Create account') }}</span>
            <span x-show="submitting" x-cloak>{{ __('Creating…') }}</span>
        </button>
    </form>
@endsection

@section('footer')
    {{ __('Already have an account?') }}
    <a href="{{ route('login') }}" class="font-medium text-text-brand underline-offset-4 hover:underline">
        {{ __('Sign in') }}
    </a>
@endsection