@php
    $settings = \Plugins\ReferralAuthSuite\Support\ReferralAuthSuite::settings();
    $countries = \Plugins\ReferralAuthSuite\Support\ReferralAuthSuite::countryOptions();
    $defaultCountry = \Plugins\ReferralAuthSuite\Support\ReferralAuthSuite::defaultCountry();
    $pending = session('referral_auth.pending_registration', []);
    $savedCountryIso = old('phone_country_iso', $pending['phone_country_iso'] ?? $defaultCountry['iso']);
    $savedDialCode = old('phone_dial_code', $pending['phone_dial_code'] ?? $defaultCountry['dial']);
    $savedPhoneLocal = old('phone_local', $pending['phone_local'] ?? '');
    $savedReferralCode = old('referral_code', $pending['referral_code'] ?? \Plugins\ReferralAuthSuite\Support\ReferralAuthSuite::currentReferralCode());
    $showOtpInput = ! empty($pending['phone_e164']);
    $isRegistrationOpen = env('REGISTERATION', 'true') == '1';
@endphp
<x-layout-auth>
    @slot('title', __('Register'))

    <div class="authentication-wrapper authentication-cover">
        <a href="{{ url('/') }}" class="app-brand auth-cover-brand">
            <span class="app-brand-logo demo">
                <span class="text-primary">
                    <x-logo></x-logo>
                </span>
            </span>
        </a>
        <div class="authentication-inner row m-0">
            <div class="d-none d-xl-flex col-xl-7 p-0">
                <div class="auth-cover-bg d-flex justify-content-center align-items-center">
                    <div class="p-5 text-white" style="max-width: 560px;">
                        <span class="badge bg-white text-primary mb-3">{{ __('Growth Ready') }}</span>
                        <h2 class="text-white mb-3">{{ __('Capture users with phone-ready signup and referral momentum.') }}</h2>
                        <p class="fs-5 opacity-75 mb-0">{{ __('New accounts can arrive with international mobile numbers, OTP verification, and referral attribution built in.') }}</p>
                    </div>
                </div>
            </div>
            <div class="d-flex col-12 col-xl-5 align-items-center authentication-bg p-sm-12 p-6">
                <div class="w-px-440 mx-auto mt-12 pt-5">
                    <h4 class="mb-1">{{ __('Register') }}</h4>
                    <p class="mb-6">{{ __('Launch your account on :site_name.', ['site_name' => config('config.site_name')]) }}</p>

                    @if (session()->has('alert'))
                        <div class="alert alert-{{ session('alert')['type'] === 'danger' ? 'danger' : 'success' }} mb-4">
                            {{ session('alert')['msg'] }}
                        </div>
                    @endif

                    @if($isRegistrationOpen)
                        <form action="{{ route('plugins.referral-auth-suite.register') }}" method="POST">
                            @csrf
                            <div class="row g-3">
                                <div class="col-12">
                                    <label class="form-label">{{ __('Username') }}</label>
                                    <input type="text" class="form-control {{ $errors->has('username') ? 'is-invalid' : '' }}" name="username" value="{{ old('username', $pending['username'] ?? '') }}" placeholder="{{ __('Username') }}">
                                    @error('username')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-12">
                                    <label class="form-label">{{ __('Email') }}</label>
                                    <input type="email" class="form-control {{ $errors->has('email') ? 'is-invalid' : '' }}" name="email" value="{{ old('email', $pending['email'] ?? '') }}" placeholder="{{ __('Email') }}">
                                    @error('email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-12">
                                    <label class="form-label">{{ __('Password') }}</label>
                                    <input type="password" class="form-control {{ $errors->has('password') ? 'is-invalid' : '' }}" name="password" placeholder="{{ __('Enter Password') }}">
                                    @error('password')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                @if ($settings->signup_phone_enabled)
                                    <div class="col-12">
                                        <label class="form-label">{{ __('Country') }}</label>
                                        <select name="phone_country_iso" class="form-select" data-phone-country data-target="register_phone_dial_code">
                                            @foreach ($countries as $country)
                                                <option value="{{ $country['iso'] }}" data-dial="{{ $country['dial'] }}" @selected($savedCountryIso === $country['iso'])>{{ $country['name'] }} ({{ $country['dial'] }})</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-4">
                                        <label class="form-label">{{ __('Dial') }}</label>
                                        <input type="text" readonly id="register_phone_dial_code" name="phone_dial_code" class="form-control" value="{{ $savedDialCode }}">
                                    </div>
                                    <div class="col-8">
                                        <label class="form-label">{{ __('Mobile Number') }}</label>
                                        <input type="text" name="phone_local" class="form-control {{ $errors->has('phone_local') ? 'is-invalid' : '' }}" value="{{ $savedPhoneLocal }}" placeholder="{{ __('8012345678') }}">
                                        @error('phone_local')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                @endif

                                @if ($settings->allow_referrals)
                                    <div class="col-12">
                                        <label class="form-label">{{ __('Referral Code') }}</label>
                                        <input type="text" name="referral_code" class="form-control {{ $errors->has('referral_code') ? 'is-invalid' : '' }}" value="{{ $savedReferralCode }}" placeholder="{{ __('Optional') }}">
                                        @error('referral_code')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                @endif

                                @if ($showOtpInput)
                                    <div class="col-12">
                                        <label class="form-label">{{ __('OTP Code') }}</label>
                                        <input type="text" name="otp_code" inputmode="numeric" class="form-control {{ $errors->has('otp_code') ? 'is-invalid' : '' }}" placeholder="{{ __('Enter the code sent to your phone') }}">
                                        @error('otp_code')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                @endif

                                <div class="col-12 d-grid gap-2 mt-2">
                                    @if ($showOtpInput)
                                        <button type="submit" name="otp_action" value="verify" class="btn btn-primary">{{ __('Verify OTP and Create Account') }}</button>
                                        <button type="submit" name="otp_action" value="request" class="btn btn-outline-primary">{{ __('Send New OTP') }}</button>
                                    @else
                                        <button type="submit" name="otp_action" value="request" class="btn btn-primary">{{ $settings->signup_phone_otp_required ? __('Continue with OTP') : __('Create Account') }}</button>
                                    @endif
                                </div>
                            </div>
                        </form>
                    @else
                        <div class="alert alert-danger">{{ __('Registration is currently disabled.') }}</div>
                    @endif

                    <p class="text-center mt-5 mb-0">
                        <span>{{ __('Already have account?') }}</span>
                        <a href="{{ route('login') }}">{{ __('Sign in here') }}</a>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.querySelectorAll('[data-phone-country]').forEach(function (select) {
            var target = document.getElementById(select.getAttribute('data-target'));
            var syncDialCode = function () {
                var option = select.options[select.selectedIndex];
                if (target && option) {
                    target.value = option.getAttribute('data-dial') || '';
                }
            };
            syncDialCode();
            select.addEventListener('change', syncDialCode);
        });
    </script>
</x-layout-auth>