<div>
    <x-dialog-modal wire:model.live="showSignupModal" maxWidth="md">
        <x-slot name="title">
            <div class="flex space-x-4 border-b pb-2">
                 <button type="button"
                        class="{{ $verificationMethod === 'phone' ? 'font-semibold border-b-2 border-gray-900' : 'text-gray-500' }}"
                        wire:click="$set('verificationMethod', 'phone')">
                    WhatsApp
                </button>
                <button type="button"
                        class="{{ $verificationMethod === 'email' ? 'font-semibold border-b-2 border-gray-900' : 'text-gray-500' }}"
                        wire:click="$set('verificationMethod', 'email')">
                    Email
                </button>
            </div>
        </x-slot>

        <x-slot name="content">

            {{-- Step 1: Input for Email or Phone --}}
            @if (!$showVerifcationCode)
                <form wire:submit.prevent="submitForm">
                    @csrf
                    <div class="space-y-4">

                        @if ($verificationMethod === 'email')
                            <div>
                                <x-label for="customerEmail" value="{{ __('app.email') }}" />
                                <x-input id="customerEmail" class="block mt-1 w-full" type="email" wire:model.defer='email' />
                                <x-input-error for="email" class="mt-2" />
                            </div>
                        @endif

                        @if ($verificationMethod === 'phone')
                            <div>
                                <x-label for="customerPhone" value="{{ __('app.phone') }}" />
                                <x-input id="customerPhone" class="block mt-1 w-full" type="tel" wire:model.defer='phone' placeholder="e.g. 9800000010"/>
                                <x-input-error for="phone" class="mt-2" />
                            </div>
                        @endif

                    </div>

                    <div class="flex justify-between w-full pb-4 space-x-4 mt-6">
                        <x-button>@lang('app.continue')</x-button>
                        <x-button-cancel wire:click="$toggle('showSignupModal')" wire:loading.attr="disabled">@lang('app.cancel')</x-button-cancel>
                    </div>
                </form>
            @endif

            {{-- Step 2: OTP input --}}
            @if ($showVerifcationCode)
                <form wire:submit.prevent="submitVerification">
                    @csrf
                    <div class="space-y-4">
                        <div>
                            <x-label for="verificationCode" value="{{ __('app.verificationCode') }}" />
                            <x-input id="verificationCode" class="block mt-1 w-full" type="tel" wire:model.defer='verificationCode' />
                            <x-input-error for="verificationCode" class="mt-2" />
                        </div>

                        <div>
                            <a href="javascript:;" class="text-sm underline text-gray-600" wire:click='sendVerification'>
                                @lang('app.resendVerificatonCode')
                            </a>
                        </div>
                    </div>

                    <div class="flex justify-between w-full pb-4 space-x-4 mt-6">
                        <x-button>@lang('app.continue')</x-button>
                        <x-button-cancel wire:click="$toggle('showSignupModal')" wire:loading.attr="disabled">@lang('app.cancel')</x-button-cancel>
                    </div>
                </form>
            @endif

        </x-slot>
    </x-dialog-modal>
</div>
