@extends('layouts.guest')
@section('title', __('Create your workspace'))

@php
    $countries     = config('countries.list', []);
    $currencies    = config('countries.currencies', []);
    $sizes         = config('countries.sizes', []);
    $sectorGroups  = config('countries.sector_groups', []);
    $defaultCountry  = config('countries.default_country');
    $defaultCurrency = config('countries.default_currency');

    // Country → default currency map (drives auto-pick on change).
    $currencyByCountry = [];
    foreach ($countries as $code => $cfg) {
        $currencyByCountry[$code] = $cfg['currency'] ?? $defaultCurrency;
    }
    $countriesJson = json_encode($countries, JSON_UNESCAPED_UNICODE);
@endphp

@section('content')
{{-- Register page is wider than other auth screens — uses a roomier max-width
     so the company sections breathe on desktop. --}}
@push('head')
<style>main > .w-full { max-width: 44rem !important; }</style>
@endpush

<div x-data="{
        country: @js(old('country', $defaultCountry)),
        currency: @js(old('primary_currency', $defaultCurrency)),
        countries: {{ $countriesJson }},
        currencyByCountry: {{ json_encode($currencyByCountry) }},
        get cfg() { return this.countries[this.country] || this.countries['OTHER'] || {}; },
        get regLabel() { return (this.cfg.registration && this.cfg.registration.label) || @js(__('Registration number')); },
        get regHint() { return (this.cfg.registration && this.cfg.registration.hint) || ''; },
        get vatHint() { return this.cfg.vat_format || ''; },
        get legalForms() { return this.cfg.legal_forms || {}; },
        onCountryChange() { this.currency = this.currencyByCountry[this.country] || this.currency; }
    }">
    <h1 class="text-3xl sm:text-[2rem] font-semibold tracking-tight text-slate-900 dark:text-white leading-tight">{{ __('Create your workspace') }}</h1>
    <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">{{ __('Tell us about your firm. You can edit anything later from Settings.') }}</p>

    @if($errors->any())
        <div class="mt-6 mb-4 px-4 py-3 rounded-xl bg-rose-50 text-rose-700 dark:bg-rose-900/30 dark:text-rose-300 text-sm space-y-1">
            @foreach($errors->all() as $e)<div>{{ $e }}</div>@endforeach
        </div>
    @endif

    <form method="POST" action="{{ route('register') }}" class="mt-8 space-y-6">
        @csrf
        <input type="hidden" name="locale" value="{{ app()->getLocale() }}">

        {{-- ─── 1. Your account ─────────────────────────────────────── --}}
        <section>
            <div class="flex items-center gap-2 mb-3">
                <span class="w-6 h-6 rounded-full bg-slate-900 text-white dark:bg-slate-100 dark:text-slate-900 flex items-center justify-center text-[11px] font-bold">1</span>
                <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-300">{{ __('Your account') }}</h2>
            </div>
            <div class="space-y-3">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <div>
                        <label class="form-label">{{ __('Your name') }} *</label>
                        <input name="name" required value="{{ old('name') }}" class="form-input" autocomplete="name">
                    </div>
                    <div>
                        <label class="form-label">{{ __('Work email') }} *</label>
                        <input name="email" type="email" required value="{{ old('email') }}" class="form-input" autocomplete="email">
                    </div>
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <div>
                        <label class="form-label">{{ __('Password') }} *</label>
                        <input name="password" type="password" required class="form-input" autocomplete="new-password">
                    </div>
                    <div>
                        <label class="form-label">{{ __('Confirm password') }} *</label>
                        <input name="password_confirmation" type="password" required class="form-input" autocomplete="new-password">
                    </div>
                </div>
                <p class="text-xs text-slate-500 dark:text-slate-400">{{ __('10+ characters, mixed case, numbers & symbols.') }}</p>
            </div>
        </section>

        {{-- ─── 2. Your firm ────────────────────────────────────────── --}}
        <section>
            <div class="flex items-center gap-2 mb-3">
                <span class="w-6 h-6 rounded-full bg-slate-900 text-white dark:bg-slate-100 dark:text-slate-900 flex items-center justify-center text-[11px] font-bold">2</span>
                <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-300">{{ __('Your firm') }}</h2>
            </div>
            <div class="space-y-3">
                <div>
                    <label class="form-label">{{ __('Company name') }} *</label>
                    <input name="company" required value="{{ old('company') }}" class="form-input" placeholder="{{ __('Acme Accountants') }}">
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <div>
                        <label class="form-label">{{ __('Country (legal)') }} *</label>
                        <select name="country" x-model="country" @change="onCountryChange()" required class="form-select w-full">
                            @foreach($countries as $code => $cfg)
                                <option value="{{ $code }}">{{ __($cfg['label']) }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="form-label">{{ __('Primary currency') }} *</label>
                        <select name="primary_currency" x-model="currency" required class="form-select w-full">
                            @foreach($currencies as $code => $label)
                                <option value="{{ $code }}">{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                    <div>
                        <label class="form-label">{{ __('Legal form') }}</label>
                        <select name="legal_form" class="form-select w-full">
                            <option value="">{{ __('—') }}</option>
                            <template x-for="(label, code) in legalForms" :key="code">
                                <option :value="code" x-text="label"
                                        :selected="@js(old('legal_form')) === code"></option>
                            </template>
                        </select>
                    </div>
                    <div>
                        <label class="form-label">{{ __('Company size') }}</label>
                        <select name="size" class="form-select w-full">
                            <option value="">{{ __('—') }}</option>
                            @foreach($sizes as $k => $label)
                                <option value="{{ $k }}" @selected(old('size') === $k)>{{ __($label) }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="form-label">{{ __('Founded on') }}</label>
                        <input name="founded_on" type="date" value="{{ old('founded_on') }}" class="form-input">
                    </div>
                </div>

                <div>
                    <label class="form-label">{{ __('Activity sector') }}</label>
                    <select name="sector" class="form-select w-full">
                        <option value="">{{ __('— Pick a sector —') }}</option>
                        @foreach($sectorGroups as $group => $items)
                            <optgroup label="{{ __($group) }}">
                                @foreach($items as $k => $label)
                                    <option value="{{ $k }}" @selected(old('sector') === $k)>{{ __($label) }}</option>
                                @endforeach
                            </optgroup>
                        @endforeach
                    </select>
                </div>
            </div>
        </section>

        {{-- ─── 3. Official identifiers ─────────────────────────────── --}}
        <section>
            <div class="flex items-center gap-2 mb-3">
                <span class="w-6 h-6 rounded-full bg-slate-900 text-white dark:bg-slate-100 dark:text-slate-900 flex items-center justify-center text-[11px] font-bold">3</span>
                <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-300">{{ __('Official identifiers') }}</h2>
                <span class="text-[11px] text-slate-400 dark:text-slate-500">{{ __('(adapts to your country)') }}</span>
            </div>
            <div class="space-y-3">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <div>
                        <label class="form-label">{{ __('VAT number') }}</label>
                        <input name="vat_number" value="{{ old('vat_number') }}" class="form-input font-mono">
                        <p class="mt-1 text-[11px] text-slate-500 dark:text-slate-400" x-show="vatHint" x-text="@js(__('Format')) + ': ' + vatHint"></p>
                    </div>
                    <div>
                        <label class="form-label" x-text="regLabel">{{ __('Registration number') }}</label>
                        <input name="registration_number" value="{{ old('registration_number') }}" class="form-input font-mono">
                        <p class="mt-1 text-[11px] text-slate-500 dark:text-slate-400" x-show="regHint" x-text="regHint"></p>
                    </div>
                </div>
                <div>
                    <label class="form-label">{{ __('Phone') }}</label>
                    <input name="phone" value="{{ old('phone') }}" class="form-input" autocomplete="tel">
                </div>
            </div>
        </section>

        {{-- ─── 4. Address ──────────────────────────────────────────── --}}
        <section>
            <div class="flex items-center gap-2 mb-3">
                <span class="w-6 h-6 rounded-full bg-slate-900 text-white dark:bg-slate-100 dark:text-slate-900 flex items-center justify-center text-[11px] font-bold">4</span>
                <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-300">{{ __('Address') }}</h2>
            </div>
            <div class="space-y-3">
                <div>
                    <label class="form-label">{{ __('Street & number') }}</label>
                    <input name="address_line1" value="{{ old('address_line1') }}" class="form-input">
                </div>
                <div>
                    <label class="form-label">{{ __('Address line 2') }}</label>
                    <input name="address_line2" value="{{ old('address_line2') }}" class="form-input">
                </div>
                <div class="grid grid-cols-3 gap-3">
                    <div>
                        <label class="form-label">{{ __('Postal code') }}</label>
                        <input name="postal_code" value="{{ old('postal_code') }}" class="form-input">
                    </div>
                    <div class="col-span-2">
                        <label class="form-label">{{ __('City') }}</label>
                        <input name="city" value="{{ old('city') }}" class="form-input">
                    </div>
                </div>
            </div>
        </section>

        {{-- Terms + submit --}}
        <div class="pt-2 space-y-4">
            <label class="flex items-start gap-2 text-sm text-slate-600 dark:text-slate-300">
                <input type="checkbox" name="terms" required class="mt-1 rounded border-slate-300 text-slate-900 focus:ring-slate-500">
                <span>{{ __('I agree to the Terms of Service and Privacy Policy.') }}</span>
            </label>
            <button class="btn-primary w-full">{{ __('Create workspace') }}</button>
        </div>
    </form>

    <p class="mt-8 text-center text-sm text-slate-500 dark:text-slate-400">
        {{ __('Already have an account?') }}
        <a href="{{ route('login') }}" class="font-medium text-slate-900 dark:text-white hover:underline">{{ __('Sign in') }}</a>
    </p>
</div>
@endsection