{{-- Show verification UI if user has phone --}}
<div 
    x-init="$wire.call('generateAndSaveInitiationCode')"
    @if(! $this->code_recived) 
        wire:poll.10s="checkRecivedCode" 
    @endif 
    class="space-y-6 text-center"
>
    <div>
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
            Send the **Initiation Code** below to our WhatsApp number. We will reply with a 6-digit OTP.
        </p>
    </div>

    <div class="my-4 rounded-lg bg-gray-100 p-4 dark:bg-gray-800">
        <p class="text-sm text-gray-500">Your Initiation Code:</p>
        <p class="text-2xl font-bold tracking-widest text-primary-600 dark:text-primary-500">
            {{ $initiationCode }}
        </p>
    </div>

    <div class="flex justify-center">
        {{ $this->getInitiationAction() }}
    </div>
    <div class="text-xs text-gray-500">
        <span>Problem?</span>
        <x-filament::link tag="button" wire:click="regenerateCode" >
            {{ __('Generate New Code') }}
        </x-filament::link>
    </div>
    <form x-data="otpForm()"  wire:submit.prevent="verifyOtp(value)" class="pt-4">
        <div class="flex justify-center gap-2 " x-ref="otpInputContainer">
            <template x-for="(input, index) in length" :key="index">
            <input
                type="text"
                pattern="[0-9]*"
                inputmode="numeric"
                maxlength="1"
                class="otpInput w-11 text-center border rounded px-2 py-1"
                x-on:input="handleInput($event, index)"
                x-on:paste="handlePaste($event)"
                x-on:keydown.backspace="$event.target.value || handleBackspace($event, index)"
            />
            </template>
        </div>
        <input type="hidden" name="otp" x-model="this.value">
        <x-filament::button type="submit" class="mt-6 w-full">
            Verify Account
        </x-filament::button>
    </form>
</div>