@extends('layouts.customer')

@section('title', __('Cadastro — Dono de negócio — Lined'))

@section('content')

    <section class="min-h-screen flex items-center justify-center px-6 py-24">

        <div class="w-full max-w-2xl">

            <div id="register-top" class="rounded-2xl border border-white/10 bg-white/5 backdrop-blur-sm p-8 scroll-mt-24">

                {{-- Header --}}
                <div class="text-center mb-8">
                    <div class="w-12 h-12 rounded-xl bg-brand-green/10 border border-brand-green/20 flex items-center justify-center mx-auto mb-4">
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#22C55E" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                            <rect x="4" y="2" width="16" height="20" rx="1"/>
                            <rect x="7" y="6" width="2" height="2"/>
                            <rect x="11" y="6" width="2" height="2"/>
                            <rect x="15" y="6" width="2" height="2"/>
                            <rect x="7" y="11" width="2" height="2"/>
                            <rect x="11" y="11" width="2" height="2"/>
                            <rect x="15" y="11" width="2" height="2"/>
                            <rect x="9" y="16" width="6" height="6"/>
                        </svg>
                    </div>
                    <h1 class="font-heading font-bold text-white text-2xl mb-1">{{ __('Dono de negócio') }}</h1>
                    <p class="text-gray-400 text-sm">{{ __('Crie sua conta para gerenciar seu negócio') }}</p>
                </div>

                {{-- Progress steps --}}
                <div class="flex items-center gap-0 mb-8 hidden" id="progress-bar">
                    @foreach([['1', 'Dados'], ['2', 'Endereço'], ['3', 'Plano']] as $i => [$num, $label])
                    <div class="flex-1 flex flex-col items-center gap-1.5">
                        <div id="step-circle-{{ $num }}"
                            class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold transition-all duration-300
                                   {{ $num === '1' ? 'bg-brand-green text-white' : 'bg-white/8 border border-white/15 text-gray-500' }}">
                            <span id="step-num-{{ $num }}">{{ $num }}</span>
                            <svg id="step-check-{{ $num }}" class="hidden" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>
                        </div>
                        <span id="step-label-{{ $num }}" class="text-xs transition-colors duration-300 {{ $num === '1' ? 'text-brand-green font-semibold' : 'text-gray-600' }}">{{ $label }}</span>
                    </div>
                    @if($num !== '3')
                    <div class="flex-1 h-px mt-[-14px] bg-white/10 transition-all duration-300" id="step-line-{{ $num }}"></div>
                    @endif
                    @endforeach
                </div>

                <form method="POST" action="{{ route('register.owner.submit') }}" class="flex flex-col gap-6" onsubmit="return handleSubmit(this)" id="register-form" novalidate>
                    @csrf

                    {{-- ══════════════════════════════════════════
                         STEP 1 — Dados pessoais + Dados da empresa
                    ══════════════════════════════════════════ --}}
                    <div id="step-1" class="flex flex-col gap-6">

                        {{-- ── EMAIL BUSCA (antes de verificar) ── --}}
                        <div id="email-search-section" class="flex flex-col gap-1.5">
                            <label for="email" class="text-sm font-medium text-gray-300">
                                {{ __('E-mail') }} <span class="text-red-400 ml-0.5">*</span>
                            </label>
                            <div class="relative">
                                <input id="email" type="email" name="email" value="{{ old('email') }}"
                                    placeholder="you@example.com" required autocomplete="email"
                                    class="w-full px-4 py-3 pr-12 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none
                                           @error('email') border-red-500/60 @enderror">
                                <button type="button" id="search-btn" onclick="checkEmail()"
                                    class="absolute right-3 top-1/2 -translate-y-1/2 p-1 text-gray-500 hover:text-brand-green transition-colors bg-transparent border-0 cursor-pointer">
                                    <svg id="search-icon" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
                                        <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
                                    </svg>
                                    <svg id="search-spinner" class="hidden animate-spin" width="17" height="17" fill="none" viewBox="0 0 24 24">
                                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"/>
                                    </svg>
                                </button>
                            </div>
                            <span id="email-feedback" class="text-xs hidden"></span>
                            @error('email')
                                <span class="text-red-400 text-xs">{{ $message }}</span>
                            @enderror
                        </div>

                        {{-- ── EMAIL DISPLAY (depois de verificar) ── --}}
                        <div id="email-display-section" class="hidden flex flex-col items-center gap-1 text-center">
                            <p id="email-display-text" class="text-white font-semibold text-lg tracking-wide"></p>
                            <span id="email-display-feedback" class="text-xs hidden"></span>
                        </div>

                        {{-- Campos ocultos hasta verificar email --}}
                        <div id="personal-company-fields" class="hidden flex flex-col gap-6">

                            {{-- DADOS PESSOAIS --}}
                            <div class="flex flex-col gap-4">
                                <p class="text-xs font-bold uppercase tracking-widest text-brand-green">{{ __('Dados pessoais') }}</p>

                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                    <div class="flex flex-col gap-1.5">
                                        <label for="name" class="text-sm font-medium text-gray-300">
                                            {{ __('Nome completo') }} <span class="text-red-400 ml-0.5">*</span>
                                        </label>
                                        <input id="name" type="text" name="name" value="{{ old('name') }}"
                                            placeholder="{{ __('Seu nome') }}" required autocomplete="name"
                                            class="w-full px-4 py-3 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none
                                                   @error('name') border-red-500/60 @enderror">
                                        @error('name') <span class="text-red-400 text-xs">{{ $message }}</span> @enderror
                                    </div>

                                    <div class="flex flex-col gap-1.5">
                                        <label for="phone" class="text-sm font-medium text-gray-300">
                                            {{ __('Telefone') }} <span class="text-gray-600 text-xs ml-1">{{ __('(opcional)') }}</span>
                                        </label>
                                        <x-phone-input id="phone" name="phone" :required="false"
                                            :value="old('phone')" placeholder="(11) 99999-9999"
                                            input-class="w-full px-4 py-3 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none focus:border-brand-green/50 transition-colors" />
                                    </div>

                                    {{-- Senha --}}
                                    <div id="password-section" class="flex flex-col gap-1.5">
                                        <label for="password" class="text-sm font-medium text-gray-300">
                                            {{ __('Senha') }} <span class="text-red-400 ml-0.5">*</span>
                                        </label>
                                        <div class="relative">
                                            <input id="password" type="password" name="password"
                                                placeholder="••••••••" required autocomplete="new-password"
                                                oninput="sanitizePassword(this); checkPasswordRules(this.value); checkConfirm()"
                                                class="w-full px-4 py-3 pr-11 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none
                                                       @error('password') border-red-500/60 @enderror">
                                            <button type="button" onclick="togglePassword('password', 'eye-owner')"
                                                class="absolute right-3 top-1/2 -translate-y-1/2 p-1 text-gray-500 hover:text-gray-300 transition-colors bg-transparent border-0 cursor-pointer">
                                                <svg id="eye-owner" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
                                                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>
                                                </svg>
                                            </button>
                                        </div>
                                        <div id="password-rules" class="hidden grid grid-cols-2 gap-x-4 gap-y-1 mt-1">
                                            <span id="rule-min"     class="text-xs text-gray-600 flex items-center gap-1"><span class="rule-dot">·</span> Mín. 6 caracteres</span>
                                            <span id="rule-upper"   class="text-xs text-gray-600 flex items-center gap-1"><span class="rule-dot">·</span> 1 letra maiúscula</span>
                                            <span id="rule-number"  class="text-xs text-gray-600 flex items-center gap-1"><span class="rule-dot">·</span> 1 número</span>
                                            <span id="rule-special" class="text-xs text-gray-600 flex items-center gap-1"><span class="rule-dot">·</span> 1 caractere especial</span>
                                        </div>
                                        @error('password') <span class="text-red-400 text-xs">{{ $message }}</span> @enderror
                                    </div>

                                    {{-- Confirmar senha --}}
                                    <div id="confirm-section" class="flex flex-col gap-1.5">
                                        <label for="password_confirmation" class="text-sm font-medium text-gray-300">
                                            {{ __('Confirmar senha') }} <span class="text-red-400 ml-0.5">*</span>
                                        </label>
                                        <div class="relative">
                                            <input id="password_confirmation" type="password" name="password_confirmation"
                                                placeholder="••••••••" required autocomplete="new-password"
                                                oninput="sanitizePassword(this); checkConfirm()"
                                                class="w-full px-4 py-3 pr-11 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none">
                                            <button type="button" onclick="togglePassword('password_confirmation', 'eye-owner-confirm')"
                                                class="absolute right-3 top-1/2 -translate-y-1/2 p-1 text-gray-500 hover:text-gray-300 transition-colors bg-transparent border-0 cursor-pointer">
                                                <svg id="eye-owner-confirm" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
                                                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>
                                                </svg>
                                            </button>
                                        </div>
                                        <span id="confirm-feedback" class="text-xs hidden"></span>
                                    </div>
                                </div>
                            </div>

                            {{-- DADOS DA EMPRESA --}}
                            <div class="flex flex-col gap-4">
                                <p class="text-xs font-bold uppercase tracking-widest text-brand-green">{{ __('Dados da empresa') }}</p>

                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                    <div class="flex flex-col gap-1.5">
                                        <label for="name_company" class="text-sm font-medium text-gray-300">
                                            {{ __('Nome da empresa') }} <span class="text-red-400 ml-0.5">*</span>
                                        </label>
                                        <input id="name_company" type="text" name="name_company" value="{{ old('name_company') }}"
                                            placeholder="{{ __('Nome oficial') }}" required oninput="syncBranchName()"
                                            class="w-full px-4 py-3 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none
                                                   @error('name_company') border-red-500/60 @enderror">
                                        @error('name_company') <span class="text-red-400 text-xs">{{ $message }}</span> @enderror
                                    </div>

                                    <div class="flex flex-col gap-1.5">
                                        <label for="trade_name" class="text-sm font-medium text-gray-300">
                                            {{ __('Nome fantasia') }} <span class="text-gray-600 text-xs ml-1">{{ __('(opcional)') }}</span>
                                        </label>
                                        <input id="trade_name" type="text" name="trade_name" value="{{ old('trade_name') }}"
                                            placeholder="{{ __('Como é conhecido') }}"
                                            class="w-full px-4 py-3 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none">
                                    </div>

                                    <div class="flex flex-col gap-1.5">
                                        <label for="company_email" class="text-sm font-medium text-gray-300">
                                            {{ __('E-mail da empresa') }} <span class="text-gray-600 text-xs ml-1">{{ __('(opcional)') }}</span>
                                        </label>
                                        <input id="company_email" type="email" name="company_email" value="{{ old('company_email') }}"
                                            placeholder="empresa@example.com"
                                            class="w-full px-4 py-3 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none">
                                    </div>

                                    <div class="flex flex-col gap-1.5">
                                        <label for="company_phone" class="text-sm font-medium text-gray-300">
                                            {{ __('Telefone da empresa') }} <span class="text-gray-600 text-xs ml-1">{{ __('(opcional)') }}</span>
                                        </label>
                                        <x-phone-input id="company_phone" name="company_phone" :required="false"
                                            :value="old('company_phone')" placeholder="(11) 9999-9999"
                                            input-class="w-full px-4 py-3 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none focus:border-brand-green/50 transition-colors" />
                                    </div>

                                    <div class="flex flex-col gap-1.5 sm:col-span-2">
                                        <label for="description" class="text-sm font-medium text-gray-300">
                                            {{ __('Descrição') }} <span class="text-gray-600 text-xs ml-1">{{ __('(opcional)') }}</span>
                                        </label>
                                        <textarea id="description" name="description" rows="3"
                                            placeholder="{{ __('Conte um pouco sobre sua empresa...') }}"
                                            class="w-full px-4 py-3 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none resize-none">{{ old('description') }}</textarea>
                                    </div>
                                </div>
                            </div>

                            {{-- CATEGORIAS DE SERVIÇOS --}}
                            <x-category-picker :categories="$categories" :selected="old('categories', [])" />

                            {{-- Botão próximo (step 1 → 2) --}}
                            <button type="button" onclick="goToStep(2)"
                                class="w-full py-3 rounded-xl bg-brand-green text-white font-semibold text-sm hover:bg-brand-green-dark hover:-translate-y-0.5 hover:shadow-lg hover:shadow-brand-green/25 transition-all duration-300 cursor-pointer border-0 flex items-center justify-center gap-2">
                                {{ __('Próximo') }}
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                            </button>

                        </div>

                    </div>

                    {{-- ══════════════════════════════════════════
                         STEP 2 — Endereço
                    ══════════════════════════════════════════ --}}
                    <div id="step-2" class="hidden flex flex-col gap-6">

                        {{-- Hidden: branch_name = name_company --}}
                        <input type="hidden" id="branch_name" name="branch_name" value="{{ old('branch_name') }}">

                        <div class="flex flex-col gap-4">
                            <p class="text-xs font-bold uppercase tracking-widest text-brand-green">{{ __('Endereço') }}</p>

                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">

                                {{-- CEP --}}
                                <div class="flex flex-col gap-1.5 sm:col-span-2">
                                    <label for="branch_cpe" class="text-sm font-medium text-gray-300">
                                        {{ __('CEP') }} <span class="text-red-400 ml-0.5">*</span>
                                    </label>
                                    <div class="flex gap-2">
                                        <input id="branch_cpe" type="text" name="branch_cpe" value="{{ old('branch_cpe') }}"
                                            placeholder="00000-000" maxlength="9" required oninput="formatCEP(this)"
                                            onkeydown="if(event.key==='Enter'){event.preventDefault();lookupCEP();}"
                                            class="flex-1 px-4 py-3 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none focus:border-brand-green/50 transition-colors @error('branch_cpe') border-red-500/60 @enderror">
                                        <button type="button" onclick="lookupCEP()"
                                            class="px-4 py-3 rounded-xl bg-brand-green/10 border border-brand-green/25 text-brand-green text-sm font-semibold hover:bg-brand-green/20 transition-all cursor-pointer flex items-center gap-2 shrink-0">
                                            <svg id="cep-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
                                                <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
                                            </svg>
                                            <svg id="cep-spinner" class="hidden animate-spin" width="15" height="15" fill="none" viewBox="0 0 24 24">
                                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"/>
                                            </svg>
                                            {{ __('Buscar') }}
                                        </button>
                                    </div>
                                    <span id="cep-feedback" class="text-xs hidden"></span>
                                    @error('branch_cpe') <span class="text-red-400 text-xs">{{ $message }}</span> @enderror
                                </div>

                                {{-- Estado --}}
                                <div class="flex flex-col gap-1.5">
                                    <label class="text-sm font-medium text-gray-300">
                                        {{ __('Estado') }} <span class="text-red-400 ml-0.5">*</span>
                                    </label>
                                    <input id="branch_cpe_state" type="text" name="branch_cpe_state" value="{{ old('branch_cpe_state') }}"
                                        placeholder="SP" required
                                        class="w-full px-4 py-3 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none focus:border-brand-green/50 transition-colors"
                                        oninput="assembleAddress()">
                                </div>

                                {{-- Cidade --}}
                                <div class="flex flex-col gap-1.5">
                                    <label class="text-sm font-medium text-gray-300">
                                        {{ __('Cidade') }} <span class="text-red-400 ml-0.5">*</span>
                                    </label>
                                    <input id="branch_cpe_city" type="text" name="branch_cpe_city" value="{{ old('branch_cpe_city') }}"
                                        placeholder="São Paulo" required
                                        class="w-full px-4 py-3 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none focus:border-brand-green/50 transition-colors"
                                        oninput="assembleAddress()">
                                </div>

                                {{-- Bairro --}}
                                <div class="flex flex-col gap-1.5">
                                    <label class="text-sm font-medium text-gray-300">
                                        {{ __('Bairro') }} <span class="text-red-400 ml-0.5">*</span>
                                    </label>
                                    <input id="branch_cep_neighborhood" type="text" name="branch_cep_neighborhood" value="{{ old('branch_cep_neighborhood') }}"
                                        placeholder="Centro" required
                                        class="w-full px-4 py-3 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none focus:border-brand-green/50 transition-colors"
                                        oninput="assembleAddress()">
                                </div>

                                {{-- Rua --}}
                                <div class="flex flex-col gap-1.5">
                                    <label class="text-sm font-medium text-gray-300">
                                        {{ __('Rua') }} <span class="text-red-400 ml-0.5">*</span>
                                    </label>
                                    <input id="branch_cep_street" type="text" name="branch_cep_street" value="{{ old('branch_cep_street') }}"
                                        placeholder="Rua das Flores" required
                                        class="w-full px-4 py-3 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none focus:border-brand-green/50 transition-colors"
                                        oninput="assembleAddress()" onblur="geocodeAndCenter()">
                                </div>

                                {{-- Número --}}
                                <div class="flex flex-col gap-1.5">
                                    <label for="branch_cep_placenumber" class="text-sm font-medium text-gray-300">
                                        {{ __('Número') }} <span class="text-red-400 ml-0.5">*</span>
                                    </label>
                                    <input id="branch_cep_placenumber" type="text" name="branch_cep_placenumber" value="{{ old('branch_cep_placenumber') }}"
                                        placeholder="123" required
                                        class="w-full px-4 py-3 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none focus:border-brand-green/50 transition-colors @error('branch_cep_placenumber') border-red-500/60 @enderror"
                                        oninput="assembleAddress()" onblur="geocodeAndCenter()">
                                    @error('branch_cep_placenumber') <span class="text-red-400 text-xs">{{ $message }}</span> @enderror
                                </div>

                                {{-- Complemento --}}
                                <div class="flex flex-col gap-1.5">
                                    <label for="branch_cep_complement" class="text-sm font-medium text-gray-300">
                                        {{ __('Complemento') }} <span class="text-red-400 ml-0.5">*</span>
                                    </label>
                                    <input id="branch_cep_complement" type="text" name="branch_cep_complement" value="{{ old('branch_cep_complement') }}"
                                        placeholder="Apto 4, Sala 2..." required oninput="assembleAddress()" onblur="geocodeAndCenter()"
                                        class="w-full px-4 py-3 rounded-xl bg-black/30 border border-white/10 text-white placeholder-gray-600 text-sm outline-none focus:border-brand-green/50 transition-colors @error('branch_cep_complement') border-red-500/60 @enderror">
                                    @error('branch_cep_complement') <span class="text-red-400 text-xs">{{ $message }}</span> @enderror
                                </div>

                                {{-- Endereço completo --}}
                                <div class="flex flex-col gap-1.5 sm:col-span-2">
                                    <label class="text-sm font-medium text-gray-300">{{ __('Endereço completo') }}</label>
                                    <div id="branch_address_display"
                                        class="w-full px-4 py-3 rounded-xl bg-white/3 border border-white/5 text-gray-500 text-sm min-h-[48px] leading-relaxed">
                                        {{ old('branch_address') ?: '—' }}
                                    </div>
                                    <input type="hidden" id="branch_address" name="branch_address" value="{{ old('branch_address') }}">
                                </div>

                            </div>

                            {{-- Mapa --}}
                            <div class="flex flex-col gap-2">
                                <div class="flex items-center justify-between">
                                    <label class="text-sm font-medium text-gray-300">{{ __('Localização no mapa') }}</label>
                                    <span class="text-gray-600 text-xs">{{ __('Clique ou arraste o marcador para ajustar') }}</span>
                                </div>
                                <div id="branch-map" class="w-full rounded-xl overflow-hidden border border-white/10" style="height: 220px; z-index: 0;"></div>
                                <div class="flex gap-3 text-xs text-gray-600">
                                    <span>Lat: <span id="lat-display">{{ old('branch_latitude', '—') }}</span></span>
                                    <span>Lng: <span id="lng-display">{{ old('branch_longitude', '—') }}</span></span>
                                </div>
                                <input type="hidden" id="branch_latitude"  name="branch_latitude"  value="{{ old('branch_latitude') }}">
                                <input type="hidden" id="branch_longitude" name="branch_longitude" value="{{ old('branch_longitude') }}">
                            </div>
                        </div>

                        {{-- Navegação step 2 --}}
                        <div class="flex gap-3">
                            <button type="button" onclick="goToStep(1)"
                                class="flex-1 py-3 rounded-xl bg-white/5 border border-white/10 text-gray-300 font-semibold text-sm hover:bg-white/10 transition-all duration-200 cursor-pointer flex items-center justify-center gap-2">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
                                {{ __('Voltar') }}
                            </button>
                            <button type="button" onclick="goToStep(3)"
                                class="flex-1 py-3 rounded-xl bg-brand-green text-white font-semibold text-sm hover:bg-brand-green-dark hover:-translate-y-0.5 hover:shadow-lg hover:shadow-brand-green/25 transition-all duration-300 cursor-pointer border-0 flex items-center justify-center gap-2">
                                {{ __('Próximo') }}
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                            </button>
                        </div>

                    </div>

                    {{-- ══════════════════════════════════════════
                         STEP 3 — Plano + Dados do cartão
                    ══════════════════════════════════════════ --}}
                    <div id="step-3" class="hidden flex flex-col gap-6">

                        {{-- PLANO --}}
                        <div class="flex flex-col gap-3">
                            <p class="text-xs font-bold uppercase tracking-widest text-brand-green">
                                {{ __('Escolha seu plano') }} <span class="text-red-400 ml-0.5">*</span>
                            </p>

                            <input type="hidden" name="idplan" id="idplan" value="{{ old('idplan') }}">

                            @if(count($plans) > 0)
                                <div class="grid grid-cols-1 gap-3">
                                    @foreach($plans as $plan)
                                    @php $pl = (object)(array) $plan; @endphp
                                    <label
                                        class="plan-card flex items-start gap-4 p-4 rounded-xl border cursor-pointer transition-all duration-200
                                            {{ old('idplan') == $pl->idplan ? 'border-brand-green/60 bg-brand-green/8' : 'border-white/10 bg-white/3 hover:border-white/20' }}"
                                        onclick="selectPlan({{ $pl->idplan }}, this)">
                                        <span class="plan-radio mt-0.5 w-4 h-4 rounded-full border-2 shrink-0 flex items-center justify-center transition-all
                                            {{ old('idplan') == $pl->idplan ? 'border-brand-green' : 'border-white/30' }}">
                                            <span class="w-2 h-2 rounded-full bg-brand-green transition-all {{ old('idplan') == $pl->idplan ? 'opacity-100 scale-100' : 'opacity-0 scale-0' }}"></span>
                                        </span>
                                        <div class="flex-1 min-w-0">
                                            <div class="flex items-center justify-between gap-2 flex-wrap">
                                                <span class="text-white font-semibold text-sm">{{ $pl->name }}</span>
                                                <span class="text-brand-green font-bold text-sm">R$ {{ number_format((float)$pl->price, 2, ',', '.') }}<span class="text-gray-500 font-normal text-xs">/mês</span></span>
                                            </div>
                                            <p class="text-gray-500 text-xs mt-0.5">{{ $pl->description }}</p>
                                            @if(!empty($pl->details))
                                            <ul class="mt-2 flex flex-wrap gap-x-4 gap-y-1">
                                                @foreach((array)$pl->details as $detail)
                                                @php $d = (object)(array)$detail; @endphp
                                                @if((int)$d->state === 0)
                                                <li class="flex items-center gap-1 text-xs text-gray-400">
                                                    <span class="text-brand-green">✓</span> {{ $d->item }}
                                                </li>
                                                @endif
                                                @endforeach
                                            </ul>
                                            @endif
                                        </div>
                                    </label>
                                    @endforeach
                                </div>
                            @else
                                <p class="text-gray-500 text-xs">{{ __('Nenhum plano disponível no momento.') }}</p>
                            @endif

                            @error('idplan')
                                <span class="text-red-400 text-xs">{{ __('Selecione um plano para continuar.') }}</span>
                            @enderror
                        </div>

                        {{-- AVISO PLANO GRÁTIS (sem cobrança) --}}
                        <div id="free-plan-notice" class="hidden flex items-start gap-2.5 px-4 py-3 rounded-xl bg-brand-green/5 border border-brand-green/15">
                            <svg class="shrink-0 mt-0.5" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#22C55E" stroke-width="2" stroke-linecap="round">
                                <path d="M20 12v10H4V12"/><path d="M2 7h20v5H2z"/><path d="M12 22V7"/><path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"/><path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"/>
                            </svg>
                            <p class="text-xs text-gray-400 leading-relaxed">
                                {{ __('Plano gratuito selecionado — nenhum cartão é necessário. Você poderá fazer upgrade quando quiser.') }}
                            </p>
                        </div>

                        {{-- AVISO PIX --}}
                        <div id="pix-notice" class="hidden items-start gap-2.5 px-4 py-3 rounded-xl bg-brand-green/5 border border-brand-green/15">
                            <i class="fa-brands fa-pix text-brand-green text-sm mt-0.5 shrink-0"></i>
                            <p class="text-xs text-gray-400 leading-relaxed m-0">
                                {{ __('Ao criar a conta você receberá o QR Code para pagar. O painel é liberado assim que o pagamento for confirmado, e a cada mês você paga um novo Pix para renovar.') }}
                            </p>
                        </div>

                        {{-- Nota de campos obrigatórios --}}
                        <p class="text-xs text-gray-600"><span class="text-red-400">*</span> {{ __('Campos obrigatórios') }}</p>

                        {{-- Aviso de verificação por e-mail --}}
                        <div id="verify-notice" class="flex items-start gap-2.5 px-4 py-3 rounded-xl bg-brand-green/5 border border-brand-green/15">
                            <svg class="shrink-0 mt-0.5" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#22C55E" stroke-width="2" stroke-linecap="round">
                                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/>
                            </svg>
                            <p class="text-xs text-gray-400 leading-relaxed">
                                Após criar sua conta, você receberá um <span class="text-brand-green font-medium">e-mail de verificação</span>. Verifique sua caixa de entrada para ativar o acesso.
                            </p>
                        </div>

                        <input type="hidden" id="has-existing-account" name="has_existing_account" value="0">
                        {{-- Conta existente sem senha (criada pelo Google) ainda precisa definir uma --}}
                        <input type="hidden" id="needs-password" name="needs_password" value="1">

                        {{-- Navegação step 3 --}}
                        <div class="flex gap-3">
                            <button type="button" onclick="goToStep(2)"
                                class="flex-1 py-3 rounded-xl bg-white/5 border border-white/10 text-gray-300 font-semibold text-sm hover:bg-white/10 transition-all duration-200 cursor-pointer flex items-center justify-center gap-2">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
                                {{ __('Voltar') }}
                            </button>
                            <button id="submit-btn" type="submit"
                                class="flex-1 py-3 rounded-xl bg-brand-green text-white font-semibold text-sm hover:bg-brand-green-dark hover:-translate-y-0.5 hover:shadow-lg hover:shadow-brand-green/25 transition-all duration-300 cursor-pointer border-0 flex items-center justify-center gap-2">
                                <span id="submit-text">{{ __('Criar conta') }}</span>
                                <svg id="submit-spinner" class="hidden animate-spin size-4" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"/>
                                </svg>
                            </button>
                        </div>

                    </div>

                </form>

                <p class="text-center text-gray-500 text-sm mt-6">
                    <a href="{{ route('register') }}" class="text-gray-400 hover:text-white no-underline transition-colors">
                        ← {{ __('Voltar') }}
                    </a>
                </p>

            </div>

        </div>

    </section>

@endsection

@push('styles')
<style>
    #branch-map { background: #e5e7eb; }
</style>
@endpush

@push('scripts')
{{-- Sem isto mapboxgl/mapboxReady não existem e initMap() lança
     ReferenceError, que o catch do lookupCEP mostrava como "Erro ao buscar CEP". --}}
<x-mapbox-assets />
<script>
    // ── Estado do wizard ──────────────────────────────────────────
    let currentStep = 1;
    let emailVerified = false;

    function scrollToFormTop() {
        const anchor = document.getElementById('register-top') || document.body;
        const top    = anchor.getBoundingClientRect().top + window.pageYOffset - 90;
        window.scrollTo({ top: Math.max(0, top), behavior: 'smooth' });
    }

    function goToStep(step) {
        // Só valida ao avançar; voltar nunca deve ser bloqueado.
        if (step > currentStep) {
            if (step >= 2 && !validateStep1()) return;
            if (step >= 3 && !validateStep2()) return;
        }

        const prev = currentStep;
        currentStep = step;

        document.getElementById('step-' + prev).classList.add('hidden');
        document.getElementById('step-' + step).classList.remove('hidden');

        updateProgress(step, prev);
        scrollToFormTop();

        if (step === 2) {
            syncBranchName();
            setTimeout(function () {
                initMap();
                if (map) {
                    map.resize();
                    const clat = parseFloat(document.getElementById('branch_latitude').value);
                    const clng = parseFloat(document.getElementById('branch_longitude').value);
                    if (!isNaN(clat) && !isNaN(clng)) map.setCenter([clng, clat]);
                }
            }, 150);
        }

    }

    function updateProgress(current, prev) {
        for (let i = 1; i <= 3; i++) {
            const circle = document.getElementById('step-circle-' + i);
            const label  = document.getElementById('step-label-' + i);
            const num    = document.getElementById('step-num-' + i);
            const check  = document.getElementById('step-check-' + i);

            if (i < current) {
                circle.className = 'w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold transition-all duration-300 bg-brand-green text-white';
                num.classList.add('hidden');
                check.classList.remove('hidden');
                label.className = 'text-xs transition-colors duration-300 text-brand-green font-semibold';
            } else if (i === current) {
                circle.className = 'w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold transition-all duration-300 bg-brand-green text-white';
                num.classList.remove('hidden');
                check.classList.add('hidden');
                label.className = 'text-xs transition-colors duration-300 text-brand-green font-semibold';
            } else {
                circle.className = 'w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold transition-all duration-300 bg-white/8 border border-white/15 text-gray-500';
                num.classList.remove('hidden');
                check.classList.add('hidden');
                label.className = 'text-xs transition-colors duration-300 text-gray-600';
            }
        }

        for (let i = 1; i <= 2; i++) {
            const line = document.getElementById('step-line-' + i);
            if (line) {
                line.style.background = i < current ? '#22c55e' : 'rgba(255,255,255,0.1)';
            }
        }
    }

    function validateStep1() {
        if (!emailVerified) {
            const emailFeedback = document.getElementById('email-feedback');
            emailFeedback.textContent = '{{ __('Verifique seu e-mail antes de continuar.') }}';
            emailFeedback.className = 'text-xs text-red-400';
            document.getElementById('email').focus();
            showToast('{{ __('Verifique seu e-mail antes de continuar.') }}', 'error');
            return false;
        }
        const name = document.getElementById('name').value.trim();
        const company = document.getElementById('name_company').value.trim();
        if (!name) {
            document.getElementById('name').focus();
            document.getElementById('name').classList.add('border-red-500/60');
            showToast('{{ __('O campo Nome completo é obrigatório.') }}', 'error');
            return false;
        }
        if (!company) {
            document.getElementById('name_company').focus();
            document.getElementById('name_company').classList.add('border-red-500/60');
            showToast('{{ __('O campo Nome da empresa é obrigatório.') }}', 'error');
            return false;
        }
        const needsPassword = document.getElementById('needs-password')?.value === '1';
        if (needsPassword) {
            const pw   = document.getElementById('password')?.value ?? '';
            const conf = document.getElementById('password_confirmation')?.value ?? '';
            if (!pw) {
                document.getElementById('password')?.focus();
                showToast('{{ __('O campo Senha é obrigatório.') }}', 'error');
                return false;
            }
            if (pw !== conf) {
                const fb = document.getElementById('confirm-feedback');
                if (fb) { fb.textContent = 'As senhas não coincidem'; fb.className = 'text-xs text-red-400'; }
                document.getElementById('password_confirmation')?.focus();
                showToast('{{ __('As senhas não coincidem.') }}', 'error');
                return false;
            }
        }
        return validateCategories();
    }

    function validateCategories() {
        if (typeof selectedCategories !== 'function') return true;

        if (selectedCategories().length === 0) {
            showToast('{{ __('Selecione ao menos uma categoria de serviços.') }}', 'error');
            return false;
        }
        return true;
    }

    function validateStep2() {
        const required = {
            branch_cpe:              'CEP',
            branch_cpe_state:        'Estado',
            branch_cpe_city:         'Cidade',
            branch_cep_neighborhood: 'Bairro',
            branch_cep_street:       'Rua',
            branch_cep_placenumber:  'Número',
            branch_cep_complement:   'Complemento',
        };
        for (const [id, label] of Object.entries(required)) {
            const el = document.getElementById(id);
            if (!el || !el.value.trim()) {
                if (el) {
                    el.focus();
                    el.classList.add('border-red-500/60');
                }
                showToast(`O campo ${label} é obrigatório.`, 'error');
                return false;
            }
        }
        return true;
    }

    // ── Sync branch_name ← name_company ───────────────────────────
    function syncBranchName() {
        const company = document.getElementById('name_company')?.value ?? '';
        const branch  = document.getElementById('branch_name');
        if (branch) branch.value = company;
    }

    // ── Email ─────────────────────────────────────────────────────
    const emailInput    = document.getElementById('email');
    const emailFeedback = document.getElementById('email-feedback');
    const searchIcon    = document.getElementById('search-icon');
    const searchSpinner = document.getElementById('search-spinner');

    emailInput.addEventListener('keydown', function (e) {
        if (e.key === 'Enter') { e.preventDefault(); checkEmail(); }
    });

    async function checkEmail() {
        const val = emailInput.value.trim();
        if (!val || !val.includes('@')) {
            emailFeedback.textContent = '{{ __('Informe um e-mail válido.') }}';
            emailFeedback.className   = 'text-xs text-red-400';
            return;
        }

        searchIcon.classList.add('hidden');
        searchSpinner.classList.remove('hidden');
        emailFeedback.className = 'text-xs hidden';

        try {
            const res  = await fetch('{{ route('check-email') }}', {
                method:  'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                body:    JSON.stringify({ email: val, idrole: 1 }),
            });
            const data = await res.json();

            if (data.status === 'already_registered') {
                emailFeedback.textContent = '{{ __('Este e-mail já está cadastrado como dono. Faça login para continuar.') }}';
                emailFeedback.className   = 'text-xs text-red-400';
                emailVerified = false;
                document.getElementById('personal-company-fields').classList.add('hidden');
                return;
            }

            emailVerified = true;

            if (data.status === 'user_exists' && data.user) {
                document.getElementById('name').value  = data.user.name  ?? '';
                if (data.user.phone) window.PhoneInput.setNumber('phone', data.user.phone);

                // Conta criada pelo Google não tem senha: aqui ela escolhe uma,
                // senão ficaria sem acesso por e-mail/senha depois do cadastro.
                const hasPassword = data.has_password !== false;

                showPersonalCompanyFields(
                    hasPassword
                        ? '{{ __('Conta encontrada. Complete os dados da empresa e clique em próximo.') }}'
                        : '{{ __('Conta encontrada, mas ainda sem senha. Defina uma senha para acessar como dono.') }}',
                    'text-yellow-400',
                    true,
                    hasPassword
                );
            } else {
                showPersonalCompanyFields('{{ __('E-mail disponível. Preencha os dados para criar sua conta.') }}', 'text-brand-green', false, false);
            }
        } catch (_) {
            emailFeedback.textContent = '{{ __('Erro ao verificar e-mail. Tente novamente.') }}';
            emailFeedback.className   = 'text-xs text-red-400';
        } finally {
            searchIcon.classList.remove('hidden');
            searchSpinner.classList.add('hidden');
        }
    }

    function showPersonalCompanyFields(msg, msgClass, isExisting = false, hasPassword = false) {
        document.getElementById('email-search-section').classList.add('hidden');
        document.getElementById('email-display-section').classList.remove('hidden');
        document.getElementById('email-display-text').textContent = emailInput.value.trim();
        if (msg) {
            const fb = document.getElementById('email-display-feedback');
            fb.textContent = msg;
            fb.className   = 'text-xs ' + (msgClass ?? 'text-brand-green');
        }

        const passwordSection = document.getElementById('password-section');
        const confirmSection  = document.getElementById('confirm-section');
        const verifyNotice    = document.getElementById('verify-notice');
        const passwordInput   = document.getElementById('password');
        const confirmInput    = document.getElementById('password_confirmation');

        // Só some com os campos de senha quando a conta já tem uma.
        const needsPassword = !isExisting || !hasPassword;

        if (needsPassword) {
            passwordSection?.classList.remove('hidden');
            confirmSection?.classList.remove('hidden');
            verifyNotice?.classList.remove('hidden');
            passwordInput?.setAttribute('required', '');
            confirmInput?.setAttribute('required', '');
        } else {
            passwordSection?.classList.add('hidden');
            confirmSection?.classList.add('hidden');
            verifyNotice?.classList.add('hidden');
            passwordInput?.removeAttribute('required');
            confirmInput?.removeAttribute('required');
        }

        document.getElementById('has-existing-account').value = isExisting ? '1' : '0';
        document.getElementById('needs-password').value       = needsPassword ? '1' : '0';
        document.getElementById('progress-bar').classList.remove('hidden');
        document.getElementById('personal-company-fields').classList.remove('hidden');
    }

    // ── Password ──────────────────────────────────────────────────
    function sanitizePassword(input) {
        input.value = input.value.replace(/['"<>]/g, '');
    }

    function checkConfirm() {
        const pw   = document.getElementById('password')?.value ?? '';
        const conf = document.getElementById('password_confirmation')?.value ?? '';
        const fb   = document.getElementById('confirm-feedback');
        if (!fb || !conf) return;
        if (pw === conf) {
            fb.textContent = '✓ Senhas coincidem';
            fb.className   = 'text-xs text-brand-green';
        } else {
            fb.textContent = 'As senhas não coincidem';
            fb.className   = 'text-xs text-red-400';
        }
    }

    function togglePassword(inputId, eyeId) {
        const input = document.getElementById(inputId);
        const eye   = document.getElementById(eyeId);
        if (input.type === 'password') {
            input.type = 'text';
            eye.innerHTML = '<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/><path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/><line x1="1" y1="1" x2="23" y2="23"/>';
        } else {
            input.type = 'password';
            eye.innerHTML = '<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>';
        }
    }

    function checkPasswordRules(val) {
        const rules = document.getElementById('password-rules');
        if (rules) rules.classList.remove('hidden');
        setRule('rule-min',     val.length >= 6);
        setRule('rule-upper',   /[A-Z]/.test(val));
        setRule('rule-number',  /[0-9]/.test(val));
        setRule('rule-special', /[^a-zA-Z0-9]/.test(val));
    }

    function setRule(id, ok) {
        const el = document.getElementById(id);
        if (!el) return;
        el.className = 'text-xs flex items-center gap-1 ' + (ok ? 'text-brand-green' : 'text-gray-600');
        el.querySelector('.rule-dot').textContent = ok ? '✓' : '·';
    }

    function handleSubmit(form) {
        // O form é novalidate: a validação dos passos anteriores corre aqui.
        if (!validateStep1()) { goToStep(1); return false; }
        if (!validateStep2()) { goToStep(2); return false; }

        const idplan = document.getElementById('idplan')?.value;
        if (!idplan) {
            showToast('{{ __('Selecione um plano para continuar.') }}', 'error');
            return false;
        }


        const pw   = document.getElementById('password')?.value ?? '';
        const conf = document.getElementById('password_confirmation')?.value ?? '';
        if (pw && pw !== conf) {
            const fb = document.getElementById('confirm-feedback');
            if (fb) { fb.textContent = 'As senhas não coincidem'; fb.className = 'text-xs text-red-400'; }
            document.getElementById('password_confirmation')?.focus();
            showToast('{{ __('As senhas não coincidem.') }}', 'error');
            return false;
        }

        const phone     = document.getElementById('phone');
        const compPhone = document.getElementById('company_phone');
        if (phone)     phone.value     = window.PhoneInput.digits('phone');
        if (compPhone) compPhone.value = window.PhoneInput.digits('company_phone');

        syncBranchName();

        setLoading(true);

        form.submit();
        return false;
    }

    function setLoading(on) {
        const btn     = document.getElementById('submit-btn');
        const text    = document.getElementById('submit-text');
        const spinner = document.getElementById('submit-spinner');
        btn.disabled  = on;
        btn.classList.toggle('opacity-75', on);
        btn.classList.toggle('cursor-not-allowed', on);
        text.textContent = on ? "{{ __('Criando conta...') }}" : "{{ __('Criar conta') }}";
        spinner.classList.toggle('hidden', !on);
    }

    // ── CEP ──────────────────────────────────────────────────────
    function formatCEP(input) {
        let v = input.value.replace(/\D/g, '').slice(0, 8);
        if (v.length > 5) v = v.replace(/^(\d{5})(\d+)$/, '$1-$2');
        input.value = v;
    }

    async function lookupCEP() {
        let cepFound = false;
        const cepVal = document.getElementById('branch_cpe').value.replace(/\D/g, '');
        if (cepVal.length !== 8) return;

        const icon     = document.getElementById('cep-icon');
        const spinner  = document.getElementById('cep-spinner');
        const feedback = document.getElementById('cep-feedback');
        icon.classList.add('hidden');
        spinner.classList.remove('hidden');
        feedback.className = 'text-xs hidden';

        try {
            const res  = await fetch('{{ route('cep-lookup') }}', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                body: JSON.stringify({ cep: cepVal }),
            });
            const json = await res.json();

            if (json.ok && json.data) {
                const d = json.data;
                document.getElementById('branch_cpe_state').value        = d.state        ?? '';
                document.getElementById('branch_cpe_city').value         = d.city         ?? '';
                document.getElementById('branch_cep_street').value       = d.street       ?? '';
                document.getElementById('branch_cep_neighborhood').value = d.neighborhood ?? '';
                assembleAddress();

                feedback.textContent = '{{ __('Endereço encontrado.') }}';
                feedback.className   = 'text-xs text-brand-green';

                cepFound = true;

                // O próprio serviço de CEP já devolve as coordenadas; só
                // caímos no geocode quando elas não vêm.
                const coords = d.location && d.location.coordinates;
                const lat    = coords ? parseFloat(coords.latitude)  : NaN;
                const lng    = coords ? parseFloat(coords.longitude) : NaN;

                initMap();

                if (!isNaN(lat) && !isNaN(lng)) {
                    centerMapOn(lat, lng);
                } else {
                    geocodeAndCenter();
                }
            } else {
                feedback.textContent = '{{ __('CEP não encontrado.') }}';
                feedback.className   = 'text-xs text-red-400';
            }
        } catch (e) {
            // Um erro do mapa não pode ser reportado como falha do CEP.
            if (cepFound) {
                console.error('[mapa]', e);
            } else {
                feedback.textContent = '{{ __('Erro ao buscar CEP.') }}';
                feedback.className   = 'text-xs text-red-400';
            }
        } finally {
            icon.classList.remove('hidden');
            spinner.classList.add('hidden');
        }
    }

    function assembleAddress() {
        const street     = document.getElementById('branch_cep_street')?.value?.trim()      ?? '';
        const number     = document.getElementById('branch_cep_placenumber')?.value?.trim() ?? '';
        const complement = document.getElementById('branch_cep_complement')?.value?.trim()  ?? '';
        const hood       = document.getElementById('branch_cep_neighborhood')?.value?.trim() ?? '';
        const city       = document.getElementById('branch_cpe_city')?.value?.trim()        ?? '';
        const state      = document.getElementById('branch_cpe_state')?.value?.trim()       ?? '';

        const streetPart = [street, number, complement].filter(Boolean).join(', ');
        const parts      = [streetPart, hood, city + (state ? ' - ' + state : '')].filter(Boolean);
        const address    = parts.join(' - ');

        const hidden  = document.getElementById('branch_address');
        const display = document.getElementById('branch_address_display');
        if (hidden)  hidden.value        = address;
        if (display) display.textContent = address || '—';
    }

    // ── Mapa ──────────────────────────────────────────────────────
    let map = null, marker = null;

    function initMap() {
        if (map) return;
        const el = document.getElementById('branch-map');
        if (!mapboxReady(el, '{{ __('Mapa indisponível') }}')) return;

        const hasCoords = !!document.getElementById('branch_latitude').value;
        const lat = parseFloat(document.getElementById('branch_latitude').value)  || -23.5505;
        const lng = parseFloat(document.getElementById('branch_longitude').value) || -46.6333;

        map = new mapboxgl.Map({
            container: el,
            style: window.MAPBOX_STYLE,
            center: [lng, lat],
            zoom: hasCoords ? 15 : 12,
            attributionControl: false,
        });

        map.addControl(new mapboxgl.NavigationControl({ showCompass: false }), 'top-right');
        map.addControl(new mapboxgl.AttributionControl({ compact: true }));

        if (hasCoords) {
            createMarker(lat, lng);
            updateCoords(lat, lng);
        }

        map.on('click', function (e) {
            const clat = e.lngLat.lat;
            const clng = e.lngLat.lng;
            if (marker) marker.setLngLat([clng, clat]);
            else createMarker(clat, clng);
            updateCoords(clat, clng);
        });
    }

    function createMarker(lat, lng) {
        marker = new mapboxgl.Marker({ element: mapboxPinElement(), draggable: true })
            .setLngLat([lng, lat])
            .addTo(map);

        marker.on('dragend', function () {
            const p = marker.getLngLat();
            updateCoords(p.lat, p.lng);
        });
    }

    function updateCoords(lat, lng) {
        const latR = parseFloat(lat).toFixed(6);
        const lngR = parseFloat(lng).toFixed(6);
        document.getElementById('branch_latitude').value   = latR;
        document.getElementById('branch_longitude').value  = lngR;
        document.getElementById('lat-display').textContent = latR;
        document.getElementById('lng-display').textContent = lngR;
    }

    // Centraliza o mapa e grava as coordenadas nos campos ocultos.
    function centerMapOn(lat, lng) {
        if (!map) return;
        map.flyTo({ center: [lng, lat], zoom: 17 });
        if (marker) marker.setLngLat([lng, lat]);
        else createMarker(lat, lng);
        updateCoords(lat, lng);
    }

    async function geocodeAndCenter() {
        const street     = document.getElementById('branch_cep_street').value.trim();
        const number     = document.getElementById('branch_cep_placenumber').value.trim();
        const complement = document.getElementById('branch_cep_complement').value.trim();
        const hood       = document.getElementById('branch_cep_neighborhood').value.trim();
        const city       = document.getElementById('branch_cpe_city').value.trim();
        const state      = document.getElementById('branch_cpe_state').value.trim();
        if (!city || !map) return;

        const streetLine = [street, number, complement].filter(Boolean).join(', ');

        const tries = [
            [streetLine, hood, city, state, 'Brasil'],
            [[street, number].filter(Boolean).join(', '), hood, city, state, 'Brasil'],
            [street, city, state, 'Brasil'],
        ];

        for (const parts of tries) {
            const q   = encodeURIComponent(parts.filter(Boolean).join(', '));
            const url = `https://nominatim.openstreetmap.org/search?q=${q}&format=json&limit=1`;

            try {
                const res  = await fetch(url, { headers: { 'Accept-Language': 'pt-BR' } });
                const data = await res.json();
                if (data.length > 0) {
                    const lat = parseFloat(data[0].lat);
                    const lng = parseFloat(data[0].lon);
                    map.flyTo({ center: [lng, lat], zoom: 17 });
                    if (marker) marker.setLngLat([lng, lat]);
                    else createMarker(lat, lng);
                    updateCoords(lat, lng);
                    return;
                }
            } catch { /* tenta o próximo formato */ }
        }
    }

    // ── Plano ─────────────────────────────────────────────────────
    // IDs dos planos gratuitos (preço 0) — não exigem cartão.
    const FREE_PLAN_IDS = @json(collect($plans)->filter(fn($p) => (float) ((object)(array) $p)->price <= 0)->map(fn($p) => (int) ((object)(array) $p)->idplan)->values());

    function isFreePlan(idplan) {
        return FREE_PLAN_IDS.includes(Number(idplan));
    }
    // Só existe Pix: mostra o aviso do Pix ou o aviso de plano grátis.
    function applyPlanMode(idplan) {
        const chosen = !!idplan;
        const free   = chosen && isFreePlan(idplan);

        toggleBlock("pix-notice",       chosen && !free, "flex");
        toggleBlock("free-plan-notice", chosen && free,  "flex");
    }

    function toggleBlock(id, show, display) {
        const el = document.getElementById(id);
        if (!el) return;
        el.classList.toggle('hidden', !show);
        el.classList.toggle(display, show);
    }

    function selectPlan(idplan, card) {
        document.getElementById('idplan').value = idplan;

        document.querySelectorAll('.plan-card').forEach(c => {
            c.classList.remove('border-brand-green/60', 'bg-brand-green/8');
            c.classList.add('border-white/10', 'bg-white/3');
            const radio = c.querySelector('.plan-radio');
            const dot   = radio.querySelector('span');
            radio.classList.remove('border-brand-green');
            radio.classList.add('border-white/30');
            dot.classList.add('opacity-0', 'scale-0');
            dot.classList.remove('opacity-100', 'scale-100');
        });

        card.classList.remove('border-white/10', 'bg-white/3');
        card.classList.add('border-brand-green/60', 'bg-brand-green/8');
        const radio = card.querySelector('.plan-radio');
        const dot   = radio.querySelector('span');
        radio.classList.remove('border-white/30');
        radio.classList.add('border-brand-green');
        dot.classList.remove('opacity-0', 'scale-0');
        dot.classList.add('opacity-100', 'scale-100');

        applyPlanMode(idplan);
    }

    // ── Restaurar estado com erros de validação ───────────────────
    @if($errors->any() || old('name'))
        document.addEventListener('DOMContentLoaded', function () {
            emailVerified = true;

            // Preserva se a conta já existia e se a senha era exigida, senão
            // o formulário volta a pedir (ou a esconder) o campo errado.
            var wasExisting    = @json(old('has_existing_account') === '1');
            var wasNeedingPwd  = @json(old('needs_password') === '1');
            showPersonalCompanyFields(null, null, wasExisting, wasExisting && !wasNeedingPwd);

            @if(old('branch_cpe') || $errors->has('branch_cpe'))
                goToStep(2);
            @endif

            @if(old('idplan') || $errors->has('idplan'))
                goToStep(3);
                @if(old('idplan'))
                    applyPlanMode(@json((int) old('idplan')));
                @endif
            @endif
        });
    @endif

    // ── Mostra mensagens do servidor (erro de pagamento, validação, etc.) ──
    @if($errors->any())
        document.addEventListener('DOMContentLoaded', function () {
            showToast(@json($errors->first()), 'error');
        });
    @endif
    @if(session('error'))
        document.addEventListener('DOMContentLoaded', function () {
            showToast(@json(session('error')), 'error');
        });
    @endif
</script>
@endpush