@extends('layouts.app')
@section('title', __('messages.register_title'))

@section('content')
<div class="mx-auto max-w-2xl px-4 py-10">
    <h1 class="mb-8 font-display text-3xl font-bold">{{ __('messages.register_title') }}</h1>

    <form method="POST" action="{{ route('register.store', ['locale' => app()->getLocale()] + ($referralCode ? ['ref' => $referralCode] : [])) }}" class="space-y-8">
        @csrf

        <section>
            <h2 class="mb-4 font-display text-lg font-semibold text-forest">{{ __('messages.register_section_personal') }}</h2>
            <div class="grid gap-4 sm:grid-cols-2">
                <div>
                    <label class="mb-1 block text-sm font-medium">{{ __('messages.register_first_name') }} *</label>
                    <input type="text" name="first_name" value="{{ old('first_name') }}" required class="w-full rounded-md border border-ink/15 px-3 py-2">
                </div>
                <div>
                    <label class="mb-1 block text-sm font-medium">{{ __('messages.register_last_name') }} *</label>
                    <input type="text" name="last_name" value="{{ old('last_name') }}" required class="w-full rounded-md border border-ink/15 px-3 py-2">
                </div>
                <div>
                    <label class="mb-1 block text-sm font-medium">{{ __('messages.register_personal_id') }} *</label>
                    <input type="text" name="personal_id_number" maxlength="11" pattern="\d{11}" required class="w-full rounded-md border border-ink/15 px-3 py-2 font-mono">
                </div>
                <div>
                    <label class="mb-1 block text-sm font-medium">{{ __('messages.register_dob') }} *</label>
                    <input type="date" name="date_of_birth" value="{{ old('date_of_birth') }}" required class="w-full rounded-md border border-ink/15 px-3 py-2">
                </div>
                <div>
                    <label class="mb-1 block text-sm font-medium">{{ __('messages.register_country') }} *</label>
                    <input type="text" name="country" value="{{ old('country', 'საქართველო') }}" required class="w-full rounded-md border border-ink/15 px-3 py-2">
                </div>
            </div>

            <div class="mt-4">
                @include('partials.location-fields')
            </div>

            <div class="mt-4">
                <label class="mb-1 block text-sm font-medium">{{ __('messages.register_address') }}</label>
                <input type="text" name="address" value="{{ old('address') }}" class="w-full rounded-md border border-ink/15 px-3 py-2">
                <p class="mt-1 text-xs text-ink/50">{{ __('messages.register_address_hint') }}</p>
            </div>
        </section>

        <section>
            <h2 class="mb-4 font-display text-lg font-semibold text-forest">{{ __('messages.register_section_contact') }}</h2>
            <div class="grid gap-4 sm:grid-cols-2">
                <div>
                    <label class="mb-1 block text-sm font-medium">{{ __('messages.register_phone') }} *</label>
                    <input type="tel" name="phone" placeholder="+995500000000" value="{{ old('phone') }}" required class="w-full rounded-md border border-ink/15 px-3 py-2 font-mono">
                </div>
                <div>
                    <label class="mb-1 block text-sm font-medium">{{ __('messages.register_additional_phone') }}</label>
                    <input type="tel" name="additional_phone" value="{{ old('additional_phone') }}" class="w-full rounded-md border border-ink/15 px-3 py-2">
                </div>
                <div class="sm:col-span-2">
                    <label class="mb-1 block text-sm font-medium">{{ __('messages.register_email') }} *</label>
                    <input type="email" name="email" value="{{ old('email') }}" required class="w-full rounded-md border border-ink/15 px-3 py-2">
                </div>
            </div>
        </section>

        <section>
            <h2 class="mb-4 font-display text-lg font-semibold text-forest">{{ __('messages.register_section_account') }}</h2>
            <div class="grid gap-4 sm:grid-cols-2">
                <div>
                    <label class="mb-1 block text-sm font-medium">{{ __('messages.register_password') }} *</label>
                    <input type="password" name="password" required class="w-full rounded-md border border-ink/15 px-3 py-2">
                </div>
                <div>
                    <label class="mb-1 block text-sm font-medium">{{ __('messages.register_password_confirm') }} *</label>
                    <input type="password" name="password_confirmation" required class="w-full rounded-md border border-ink/15 px-3 py-2">
                </div>
            </div>
        </section>

        <section>
            <h2 class="mb-2 font-display text-lg font-semibold text-forest">{{ __('messages.register_section_roles') }}</h2>
            <p class="mb-4 text-sm text-ink/60">{{ __('messages.register_roles_hint') }}</p>
            <div class="grid gap-2 sm:grid-cols-2">
                @foreach ($selectableRoles as $role)
                    <label class="flex items-center gap-2 rounded-md border border-ink/15 px-3 py-2 text-sm hover:border-forest">
                        <input type="checkbox" name="roles[]" value="{{ $role->slug }}">
                        {{ $role->name_ka }}
                    </label>
                @endforeach
            </div>
        </section>

        <section class="space-y-2">
            <label class="flex items-center gap-2 text-sm">
                <input type="checkbox" name="accept_terms" required> {{ __('messages.register_accept_terms') }} *
                (<a href="{{ route('terms', ['locale' => app()->getLocale()]) }}" target="_blank" class="text-forest underline">ნახვა</a>)
            </label>
            <label class="flex items-center gap-2 text-sm">
                <input type="checkbox" name="accept_privacy" required> {{ __('messages.register_accept_privacy') }} *
                (<a href="{{ route('privacy', ['locale' => app()->getLocale()]) }}" target="_blank" class="text-forest underline">ნახვა</a>)
            </label>
        </section>

        @if ($referralCode)
            <input type="hidden" name="ref" value="{{ $referralCode }}">
        @endif

        <button type="submit" class="btn-primary w-full">{{ __('messages.register_submit') }}</button>

        <p class="text-center text-sm text-ink/60">
            {{ __('messages.register_have_account') }}
            <a href="{{ route('login', ['locale' => app()->getLocale()]) }}" class="font-medium text-forest hover:underline">{{ __('messages.nav_login') }}</a>
        </p>
    </form>
</div>
@endsection