{{-- ============================================= --}}
{{-- FASE: VALIDAÇÃO DO DOCUMENTO (CPF + NASC)   --}}
{{-- Renderiza dentro do card central full        --}}
{{-- ============================================= --}}

<div class="max-w-md mx-auto space-y-6">

    {{-- Ícone + título centralizado --}}
    <div class="text-center">
        {{-- <div class="w-14 h-14 mx-auto mb-3 rounded-2xl bg-gradient-to-br from-indigo-500 to-indigo-700 flex items-center justify-center shadow-lg shadow-indigo-200 dark:shadow-indigo-900/40">
            <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2"/>
            </svg>
        </div> --}}
        {{-- <h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Identificação</h2>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">Informe seu CPF e data de nascimento para iniciar</p> --}}
    </div>

    {{-- CPF --}}
    <div>
        <label class="block text-xs font-bold text-gray-600 dark:text-gray-400 uppercase tracking-wide mb-1.5">CPF</label>
        <x-inputs.maskable
            wire:model="num_cpf"
            mask="###.###.###-##"
            placeholder="000.000.000-00"
            class="!text-center !text-lg !rounded-xl"
            inputmode="numeric"
        />
    </div>

    {{-- Data de Nascimento --}}
    <div>
        <label class="block text-xs font-bold text-gray-600 dark:text-gray-400 uppercase tracking-wide mb-1.5">Data de Nascimento</label>
        <div class="grid grid-cols-3 gap-2">
            <x-native-select
                :options="listNumRange()"
                placeholder="Dia"
                option-value="num"
                option-label="num"
                wire:model="dd"
                class="!rounded-xl"
            />
            <x-native-select
                :options="listMes()"
                placeholder="Mês"
                option-value="num"
                option-label="name"
                wire:model="mm"
                class="!rounded-xl uppercase"
            />
            <x-native-select
                :options="listAnoRange(now()->format('Y'),now()->subYears(100)->format('Y'))"
                placeholder="Ano"
                option-value="id"
                option-label="aaaa"
                wire:model="aaaa"
                class="!rounded-xl"
            />
        </div>
    </div>

    {{-- Alertas --}}
    <x-ead-alerts class="w-full" />

    {{-- reCAPTCHA --}}
    <div class="flex flex-col items-center gap-3">
        <div wire:ignore>
            {!! NoCaptcha::renderJs() !!}
            {!! NoCaptcha::display(['data-callback' => 'onCallBack']) !!}
        </div>
        @error('recaptcha')
            <span class="text-xs text-red-500 dark:text-red-400">{{ __($message) }}</span>
        @enderror
    </div>

    {{-- Botão Enviar --}}
    <div>
        @if ($recaptcha ?? false)
            <button
                wire:click="validarDocumento()"
                wire:loading.attr="disabled"
                wire:loading.class="opacity-70 cursor-wait"
                class="w-full py-3 px-4 bg-gradient-to-r from-indigo-600 to-indigo-700 hover:from-indigo-700 hover:to-indigo-800
                       text-white font-semibold text-sm rounded-xl shadow-md shadow-indigo-200 dark:shadow-indigo-900/40
                       transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2
                       flex items-center justify-center gap-2"
            >
                <span wire:loading.remove wire:target="validarDocumento">VALIDAR E CONTINUAR</span>
                <span wire:loading.flex wire:target="validarDocumento" class="items-center gap-2">
                    <svg class="animate-spin h-4 w-4" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                    VALIDANDO...
                </span>
            </button>
        @else
            <button disabled
                class="w-full py-3 px-4 bg-gray-200 dark:bg-gray-700 text-gray-400 dark:text-gray-500
                       font-semibold text-sm rounded-xl cursor-not-allowed">
                VALIDAR E CONTINUAR
            </button>
        @endif
    </div>

</div>

<script type="text/javascript">
    var onCallBack = function () {
        @this.set('recaptcha', grecaptcha.getResponse());
    }
</script>