160 lines
7.4 KiB
PHP
160 lines
7.4 KiB
PHP
<div class="flex min-h-screen">
|
|
<div class="flex-1 flex justify-center items-center">
|
|
<div class="w-80 md:w-100 space-y-6">
|
|
<div class="flex justify-center opacity-50">
|
|
<flux:brand href="{{ route('homepage') }}" name="Yadi Parfum" wire:navigate.hover>
|
|
<x-slot name="logo">
|
|
<div
|
|
class="size-8 rounded shrink-0 bg-accent text-accent-foreground flex items-center justify-center">
|
|
<i class="font-serif font-bold">YD</i>
|
|
</div>
|
|
</x-slot>
|
|
</flux:brand>
|
|
</div>
|
|
|
|
<flux:heading size="lg" class="mb-1">Halo!</flux:heading>
|
|
<flux:text>
|
|
Silakan ikuti langkah-langkah berikut untuk membuat akun dan nikmati keuntungannya dengan menjadi
|
|
member.
|
|
</flux:text>
|
|
|
|
<ul class="relative flex flex-col md:flex-row gap-5 justify-center py-3">
|
|
@foreach ($steps as $step)
|
|
<li class="md:shrink md:basis-0 flex-1 group flex flex-row items-center md:flex-col md:items-center cursor-default"
|
|
wire:key="step-{{ $step['id'] }}" wire:click="updateStep({{ $step['id'] }})">
|
|
|
|
<span
|
|
class="size-7 flex justify-center items-center shrink-0 font-medium text-gray-800 rounded-full transition-all duration-500 ease-in-out {{ $currentStep === $step['id'] ? 'bg-emerald-500 scale-110 shadow-lg text-white' : 'bg-gray-100 scale-100' }}">
|
|
{{ $step['id'] }}
|
|
</span>
|
|
|
|
<div
|
|
class="ml-3 md:ml-0 md:mt-2 text-left md:text-center transition-all duration-300 ease-in-out">
|
|
<flux:text
|
|
class="transition-all duration-500 ease-in-out {{ $currentStep === $step['id'] ? 'text-emerald-600 font-semibold' : '' }}">
|
|
{{ $step['name'] }}
|
|
</flux:text>
|
|
</div>
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
|
|
@if ($currentStep === 1)
|
|
<div class="flex flex-col gap-6">
|
|
<flux:field>
|
|
<flux:label>Email <span class="text-red-500 ms-1">*</span></flux:label>
|
|
|
|
<flux:description>Pastikan email aktif karena akan digunakan untuk verifikasi.
|
|
</flux:description>
|
|
|
|
<flux:input placeholder="info.pangestuyoga@gmail.com" wire:model.live="form.email" autofocus
|
|
autocomplete="off" />
|
|
|
|
<flux:error name="form.email" />
|
|
</flux:field>
|
|
|
|
<flux:field>
|
|
<flux:label>Nama Pengguna <span class="text-red-500 ms-1">*</span></flux:label>
|
|
|
|
<flux:input placeholder="pangestu" wire:model.live="form.username" autocomplete="off" />
|
|
|
|
<flux:error name="form.username" />
|
|
</flux:field>
|
|
|
|
<flux:field>
|
|
<flux:label>Kata Sandi <span class="text-red-500 ms-1">*</span></flux:label>
|
|
|
|
<flux:input placeholder="********" type="password" wire:model.live="form.password"
|
|
autocomplete="off" viewable />
|
|
|
|
<flux:error name="form.password" />
|
|
</flux:field>
|
|
</div>
|
|
@endif
|
|
|
|
@if ($currentStep === 2)
|
|
<div class="flex flex-col gap-6">
|
|
<flux:field>
|
|
<flux:label>Nama <span class="text-red-500 ms-1">*</span></flux:label>
|
|
|
|
<flux:input placeholder="John Doe" wire:model.live="form.name" autofocus autocomplete="off" />
|
|
|
|
<flux:error name="form.name" />
|
|
</flux:field>
|
|
|
|
<flux:field>
|
|
<flux:label>Nomor Telepon <span class="text-red-500 ms-1">*</span></flux:label>
|
|
|
|
<flux:input placeholder="0821 xxxx xxxx" mask="9999 9999 99999"
|
|
wire:model.live="form.phone_number" autocomplete="off" />
|
|
|
|
<flux:error name="form.phone_number" />
|
|
</flux:field>
|
|
|
|
<flux:field>
|
|
<flux:label>Jenis Kelamin <span class="text-red-500 ms-1">*</span></flux:label>
|
|
|
|
<flux:radio.group wire:model.live="form.gender" variant="buttons" class="w-full *:flex-1">
|
|
@foreach (\App\Enums\Gender::cases() as $gender)
|
|
<flux:radio value="{{ $gender->value }}">
|
|
{{ $gender->label() }}
|
|
</flux:radio>
|
|
@endforeach
|
|
</flux:radio.group>
|
|
|
|
<flux:error name="form.gender" />
|
|
</flux:field>
|
|
|
|
<flux:input label="Kode Referral" placeholder="Masukkan kode referral"
|
|
wire:model.live="form.referral_code" autocomplete="off" />
|
|
</div>
|
|
@endif
|
|
|
|
<div class="mt-8 flex justify-between items-center gap-4">
|
|
@if ($currentStep > 1)
|
|
<flux:button wire:click="prevStep" variant="ghost" icon:leading="arrow-left">
|
|
Sebelumnya
|
|
</flux:button>
|
|
@else
|
|
<div></div>
|
|
@endif
|
|
|
|
@if ($currentStep < $totalSteps)
|
|
<flux:button wire:click="nextStep" variant="primary" icon:trailing="arrow-right">
|
|
Selanjutnya
|
|
</flux:button>
|
|
@else
|
|
<flux:button type="submit" variant="primary" icon:trailing="check" wire:click="register"
|
|
wire:loading.attr="disabled">
|
|
<span wire:loading.remove>
|
|
Daftar Sekarang
|
|
</span>
|
|
<span wire:loading>
|
|
<svg class="animate-spin inline w-5 h-5 mr-2 text-white" 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-8v4a4 4 0 00-4 4H4z">
|
|
</path>
|
|
</svg>
|
|
Memproses...
|
|
</span>
|
|
</flux:button>
|
|
@endif
|
|
</div>
|
|
|
|
<flux:subheading class="text-center mt-8">
|
|
Sudah punya akun? <flux:link href="{{ route('login') }}" wire:navigate.hover>Masuk sekarang.
|
|
</flux:link>
|
|
</flux:subheading>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-1 p-4 max-lg:hidden">
|
|
<div class="relative rounded-lg h-full w-full bg-zinc-100 flex flex-col items-start justify-end p-16"
|
|
style="background-image: url('/assets/images/cover.jpg'); background-size: cover">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|