@php
    $siteName = siteUrlSettings('site_name') ?? config('app.name');
    $baseDomain = parse_url(config('app.url'), PHP_URL_HOST);
@endphp

<div class="signup-page">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12 col-lg-10 col-xl-9">

                <a href="{{ route('welcome') }}" class="signup-back">
                    <i class="bi bi-arrow-left"></i> {{ __('Back to') }} {{ $siteName }}
                </a>

                @if ($submitted)
                    {{-- ------------------------- Submitted ------------------------- --}}
                    <div class="signup-card text-center">
                        <div class="signup-tick"><i class="bi bi-check-lg"></i></div>
                        <h1 class="signup-title">{{ __('Application received') }}</h1>
                        <p class="signup-lead mx-auto" style="max-width:520px;">
                            {{ __('We have reserved') }}
                            <strong class="text-white">{{ $slug }}.{{ $baseDomain }}</strong>
                            {{ __('for you. A member of the team reviews every new operator before their portal goes live — you will get an email as soon as yours is switched on.') }}
                        </p>

                        <div class="signup-next mx-auto">
                            <h6>{{ __('What happens next') }}</h6>
                            <ol>
                                <li>{{ __('We approve your account and your portal address starts working.') }}</li>
                                <li>{{ __('You sign in and link your first MikroTik with a single pasted command.') }}</li>
                                <li>{{ __('You set your packages and prices, and start selling.') }}</li>
                            </ol>
                        </div>

                        <a href="{{ 'https://billing.'.$baseDomain.'/login' }}" class="btn-signup mt-4 d-inline-flex">
                            {{ __('Go to sign in') }}
                        </a>
                    </div>
                @else
                    {{-- --------------------------- Form ---------------------------- --}}
                    <div class="row g-4 align-items-start">
                        <div class="col-12 col-lg-5">
                            <span class="signup-eyebrow">{{ __('Get started') }}</span>
                            <h1 class="signup-title">{{ __('Run your WiFi business on your own portal.') }}</h1>
                            <p class="signup-lead">
                                {{ __('Pick your address, link a router, set your prices. Your customers see your brand, not ours.') }}
                            </p>

                            <ul class="signup-points">
                                <li><i class="bi bi-check2"></i> {{ __('Your own branded captive portal') }}</li>
                                <li><i class="bi bi-check2"></i> {{ __('M-Pesa payments that connect customers automatically') }}</li>
                                <li><i class="bi bi-check2"></i> {{ __('Zero-touch MikroTik setup over a secure tunnel') }}</li>
                                <li><i class="bi bi-check2"></i> {{ __('Vouchers, packages and reporting built in') }}</li>
                            </ul>

                            <p class="signup-fineprint">
                                {{ __('Start on our M-Pesa till and move to your own shortcode whenever Safaricom approves it.') }}
                            </p>
                        </div>

                        <div class="col-12 col-lg-7">
                            <div class="signup-card">
                                <form wire:submit="submit">
                                    <div class="row g-3">
                                        <div class="col-12">
                                            <label class="signup-label" for="brand">{{ __('Business name') }}</label>
                                            <input id="brand" type="text" class="signup-input @error('brand_name') is-invalid @enderror"
                                                wire:model.live.debounce.400ms="brand_name"
                                                placeholder="{{ __('Eldoret Public WiFi') }}">
                                            @error('brand_name')<span class="signup-error">{{ $message }}</span>@enderror
                                        </div>

                                        <div class="col-12">
                                            <label class="signup-label" for="slug">{{ __('Your portal address') }}</label>
                                            <div class="signup-addon">
                                                <input id="slug" type="text" class="signup-input @error('slug') is-invalid @enderror"
                                                    wire:model.live.debounce.400ms="slug" placeholder="eldoretwifi"
                                                    autocapitalize="none" autocorrect="off" spellcheck="false">
                                                <span>.{{ $baseDomain }}</span>
                                            </div>
                                            @error('slug')
                                                <span class="signup-error">{{ $message }}</span>
                                            @else
                                                <span class="signup-help">
                                                    {{ __('This is where your customers land. Choose carefully — it is printed on receipts and cannot be changed easily later.') }}
                                                </span>
                                            @enderror
                                        </div>

                                        <div class="col-12 col-md-6">
                                            <label class="signup-label" for="name">{{ __('Your name') }}</label>
                                            <input id="name" type="text" class="signup-input @error('owner_name') is-invalid @enderror"
                                                wire:model="owner_name" autocomplete="name">
                                            @error('owner_name')<span class="signup-error">{{ $message }}</span>@enderror
                                        </div>

                                        <div class="col-12 col-md-6">
                                            <label class="signup-label" for="phone">{{ __('Phone') }}</label>
                                            <input id="phone" type="tel" class="signup-input @error('phone') is-invalid @enderror"
                                                wire:model="phone" placeholder="0712 345 678" autocomplete="tel">
                                            @error('phone')<span class="signup-error">{{ $message }}</span>@enderror
                                        </div>

                                        <div class="col-12">
                                            <label class="signup-label" for="email">{{ __('Email') }}</label>
                                            <input id="email" type="email" class="signup-input @error('owner_email') is-invalid @enderror"
                                                wire:model="owner_email" autocomplete="email">
                                            @error('owner_email')<span class="signup-error">{{ $message }}</span>@enderror
                                        </div>

                                        <div class="col-12 col-md-6">
                                            <label class="signup-label" for="pw">{{ __('Password') }}</label>
                                            <input id="pw" type="password" class="signup-input @error('password') is-invalid @enderror"
                                                wire:model="password" autocomplete="new-password">
                                            @error('password')<span class="signup-error">{{ $message }}</span>@enderror
                                        </div>

                                        <div class="col-12 col-md-6">
                                            <label class="signup-label" for="pw2">{{ __('Confirm password') }}</label>
                                            <input id="pw2" type="password" class="signup-input"
                                                wire:model="password_confirmation" autocomplete="new-password">
                                        </div>
                                    </div>

                                    <button type="submit" class="btn-signup w-100 mt-4" wire:loading.attr="disabled">
                                        <span wire:loading.remove wire:target="submit">{{ __('Create my portal') }}</span>
                                        <span wire:loading wire:target="submit">{{ __('Creating...') }}</span>
                                    </button>

                                    <p class="signup-fineprint text-center mt-3 mb-0">
                                        {{ __('Already have an account?') }}
                                        <a href="{{ 'https://billing.'.$baseDomain.'/login' }}">{{ __('Sign in') }}</a>
                                    </p>
                                </form>
                            </div>
                        </div>
                    </div>
                @endif

            </div>
        </div>
    </div>
</div>