<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="jonhdoe" 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>
