Livewire issue

mail@pastecode.io avatar
unknown
php_laravel_blade
2 years ago
14 kB
2
Indexable
Never
<div class="flex flex-col justify-between min-h-[45vh] overflow-hidden">
    @if ($onboardingCompleted)
        <div class="flex flex-col items-center justify-center">
            <div class="flex flex-col items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-16 h-16 text-indigo-500" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm3.707-9.293a1 1 0 0 0-1.414-1.414L9 10.586 7.707 9.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4z" clip-rule="evenodd"/>
                </svg>
                <h2 class="mt-4 text-2xl font-semibold">{{ __('Congratulations') }}, {{ auth()->user()->first_name }}</h2>
                <p class="mt-4 text-sm text-gray-600">{{ __('You have competed onboarding, you can now start using') }} {{ config('app.name') }}.</p>
                <a href="{{ route('dashboard') }}" class="items-center inline-block px-3 py-2 mt-4 text-sm font-medium leading-4 text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    {{ __('Go to dashboard') }}
                </a>
            </div>
        </div>
    @else
        <div class="header">
            <nav class="flex items-center justify-center mt-4" aria-label="Progress">
                <p class="text-sm font-medium">Step {{ $currentStep }} of {{ $totalSteps }}</p>
                <ol role="list" class="flex items-center ml-8 space-x-5">
                    @for ($i = 1; $i <= $totalSteps ; $i++)
                        @if ($currentStep > $i)
                            <li wire:key="step-{{ $i }}">
                                <button wire:click="goToStep({{ $i }})" class="block w-2.5 h-2.5 bg-indigo-600 rounded-full hover:bg-indigo-900">
                                    <span class="sr-only">{{ __('Step') }} {{ $i }}</span>
                                </button>
                            </li>
                        @endif

                        @if ($currentStep === $i)
                            <li wire:key="step-{{ $i }}">
                                <button wire:click="goToStep({{ $i }})" class="relative flex items-center justify-center" aria-current="step">
                                    <span class="absolute flex w-5 h-5 p-px" aria-hidden="true">
                                    <span class="w-full h-full bg-indigo-200 rounded-full"></span>
                                    </span>
                                    <span class="relative block w-2.5 h-2.5 bg-indigo-600 rounded-full" aria-hidden="true"></span>
                                    <span class="sr-only">{{ __('Step') }} {{ $i }}</span>
                                </button>
                            </li>
                        @endif

                        @if ($i > $currentStep)
                            <li wire:key="step-{{ $i }}">
                                <button wire:click="goToStep({{ $i }})" class="block w-2.5 h-2.5 bg-gray-200 rounded-full hover:bg-gray-400">
                                    <span class="sr-only">{{ __('Step') }} {{ $i }}</span>
                                </button>
                            </li>
                        @endif
                    @endfor
                </ol>
            </nav>
        </div>
        <div class="flex-grow mt-6 mb-6 content">
            <div>
                @if ($currentStep === 1)
                    <div class="grid grid-cols-6 gap-6 step">
                        <!-- First Name -->
                        <div class="col-span-6">
                            <x-jet-label for="first_name" value="{{ __('First Name') }}" />
                            <x-jet-input id="first_name" type="text" class="block w-full mt-1" wire:model.defer="state.first_name" autocomplete="first_name" />
                            <x-jet-input-error for="first_name" class="mt-2" />
                        </div>

                        <!-- Last Name -->
                        <div class="col-span-6">
                            <x-jet-label for="last_name" value="{{ __('Last Name') }}" />
                            <x-jet-input id="last_name" type="text" class="block w-full mt-1" wire:model.defer="state.last_name" autocomplete="last_name" />
                            <x-jet-input-error for="last_name" class="mt-2" />
                        </div>

                        <div class="col-span-6">
                            <x-jet-label for="date_of_birth" value="{{ __('Date of Birth') }}" />
                            <x-jet-input id="date_of_birth" type="date" class="block w-full mt-1" max="{{ now()->subYears(18)->format('Y-m-d') }}" placeholder="dd/mm/yyyy" wire:model.defer="state.date_of_birth" />
                            <x-jet-input-error for="date_of_birth" class="mt-2" />
                        </div>

                        <div class="col-span-6">
                            <x-jet-label for="mobile_number" value="{{ __('Mobile Number') }}" />
                            <x-jet-input id="mobile_number" type="text" class="block w-full mt-1" placeholder="07911123456" wire:model.defer="state.mobile_number" />
                            <x-jet-input-error for="mobile_number" class="mt-2" />
                        </div>

                        <!-- Email -->
                        <div class="col-span-6">
                            <x-jet-label for="email" value="{{ __('Email') }}" />
                            <x-jet-input id="email" type="email" class="block w-full mt-1" wire:model.defer="state.email" />
                            <x-jet-input-error for="email" class="mt-2" />
                        </div>
                    </div>
                @endif
                @if ($currentStep === 2)
                    <div class="grid grid-cols-6 gap-6 step">
                        <div class="col-span-6 sm:col-span-2">
                            <x-jet-label for="house_name_or_number" value="{{ __('House name or number') }}" />
                            <x-jet-input id="house_name_or_number" type="text" class="block w-full mt-1" wire:model.defer="state.house_name_or_number" />
                            <x-jet-input-error for="house_name_or_number" class="mt-2" />
                        </div>
                        <div class="col-span-6 sm:col-span-4">
                            <x-jet-label for="line_1" value="{{ __('Address') }}" />
                            <x-jet-input id="line_1" type="text" class="block w-full mt-1" wire:model.defer="state.line_1" />
                            <x-jet-input-error for="line_1" class="mt-2" />
                        </div>
                        <div class="col-span-6 sm:col-span-6">
                            <x-jet-label for="line_2" value="{{ __('Line 2') }}" />
                            <x-jet-input id="line_2" type="text" class="block w-full mt-1" wire:model.defer="state.line_2" />
                            <x-jet-input-error for="line_2" class="mt-2" />
                        </div>
                        <div class="col-span-6 sm:col-span-2">
                            <x-jet-label for="town" value="{{ __('Town') }}" />
                            <x-jet-input id="town" type="text" class="block w-full mt-1" wire:model.defer="state.town" />
                            <x-jet-input-error for="town" class="mt-2" />
                        </div>

                        <div class="col-span-6 sm:col-span-2">
                            <x-jet-label for="alpha_two_code" value="{{ __('Country') }}" />
                            <select class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" wire:model.defer="state.alpha_two_code">
                                @foreach ($this->countries as $country)
                                    <option value="{{ $country->code_2 }}" selected wire:key="country-{{ $country }}">{{ $country->name }}</option>
                                @endforeach
                            </select>
                            <x-jet-input-error for="alpha_two_code" class="mt-2" />
                        </div>

                        <div class="col-span-6 sm:col-span-2">
                            <x-jet-label for="postcode" value="{{ __('Postcode') }}" />
                            <x-jet-input id="postcode" type="text" class="block w-full mt-1" wire:model.defer="state.postcode" />
                            <x-jet-input-error for="postcode" class="mt-2" />
                        </div>
                    </div>
                @endif
                @if ($currentStep === 3)
                    <div class="flex flex-col mx-auto mt-8 step">
                        <h2 class="text-3xl font-semibold text-canny-blue">
                            {{ __('Verify your mobile number!') }}
                        </h2>
                            {{ $debug }}
                        @if ($mobileConfirmationCodeSent)
                            <div class="p-4 mt-4 rounded-md bg-blue-50">
                                <div class="mt-2 text-sm text-blue-800">
                                    <p>
                                        {{ __('We have sent you a confirmation code on') }}
                                        <strong>{{ auth()->user()->mobile_number }}</strong>. {{ __('Please enter the 6-digit confirmation code we have sent you to confirm your mobile number.') }}
                                    </p>
                                </div>
                            </div>
                        @endif

                        <div class="mt-4">
                            <div class="flex items-end w-full space-x-2">
                                <div class="w-full">
                                    <x-jet-label for="confirmation_code" value="{{ __('Confirmation code') }}" />
                                    <x-jet-input id="confirmation_code" type="number" min="6" max="6" class="block w-full mt-1" placeholder="XXXXXX" wire:model.defer="state.confirmation_code" />
                                </div>
                            </div>
                            <x-jet-input-error for="confirmation_code" class="mt-2" />

                            <div class="mt-2 text-sm text-gray-600">
                                <p>
                                    {{ __("Didn't get any code?") }}
                                    <a href="#" wire:click="goToStep(1)" class="text-indigo-700 hover:text-indigo-500">{{ __('Check if your mobile number is correct') }}</a>
                                    <strong>{{ __('or') }}</strong>
                                    <a href="#" wire:click="getConfirmationCode" class="text-indigo-700 hover:text-indigo-500">{{ __('send a new code') }}</a>
                                </p>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>

        <div class="mt-auto footer">
            <div class="flex justify-between">
                @if ($currentStep == 1)
                    <div></div>
                @endif

                @if ($currentStep <= $totalSteps && $currentStep > 1)
                    <x-jet-secondary-button wire:click="previousStep">{{ __('Back') }}</x-jet-secondary-button>
                @endif

                @if ($currentStep < $totalSteps && $currentStep >= 1)
                    <x-jet-button wire:click="nextStep" wire:loading.attr="disabled" wire:target="nextStep">
                        <span wire:loading.remove wire:target="nextStep">
                            {{ _('Next') }}
                        </span>
                        <span wire:loading wire:target="nextStep">
                            <span class="flex">
                                <svg class="w-4 h-4 mr-3 -ml-1 text-white animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                </svg>
                                <span>{{ _('Loading...') }}</span>
                            </span>
                        </span>
                    </x-jet-button>
                @endif

                @if ($currentStep === $totalSteps)
                    <x-jet-button wire:click="submit" wire:loading.attr="disabled">
                        <span wire:loading.remove>
                            {{ _('Submit') }}
                        </span>
                        <span wire:loading>
                            <span class="flex">
                                <svg class="w-4 h-4 mr-3 -ml-1 text-white animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                </svg>
                                <span>{{ _('Submiting...') }}</span>
                            </span>
                        </span>
                    </x-jet-button>
                @endif
            </div>
        </div>
    @endif
</div>