<flux:main>
    <flux:heading size="xl" level="1">Haloo, {{ auth()->user()?->customer?->name ?? 'Perfumers' }}
    </flux:heading>
    <flux:text class="mb-6 mt-2 text-base">Selamat datang di Studio Yadi Parfum.</flux:text>

    @if ($hasMemberData)
        <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
            <flux:callout icon="user-group" color="blue">
                <flux:callout.heading>
                    {{ auth()->user()?->membership?->tier?->name }}
                    <flux:badge color="emerald" size="sm" inset="top bottom">
                        {{ auth()->user()?->membership?->tier_points }} Poin</flux:badge>
                </flux:callout.heading>

                <flux:callout.text>
                    <p>Undang teman dan dapatkan hadiah menarik!</p>
                </flux:callout.text>

                <x-slot name="actions">
                    <flux:button href="{{ $whatsappUrl }}" target="_blank">Undang teman</flux:button>
                    <flux:button href="{{ route('member.redeem_point') }}">Ambil Hadiah</flux:button>
                </x-slot>
            </flux:callout>

            <flux:callout icon="magnifying-glass" color="emerald">
                <flux:callout.heading>Jelajahi Produk Kami</flux:callout.heading>

                <flux:callout.text>
                    Coba dan rasakan manfaat menggunakanan yadi parfum.
                </flux:callout.text>

                <x-slot name="actions">
                    <flux:button href="{{ route('product.index') }}">Jelajahi</flux:button>
                    <flux:button target="_blank"
                        href="https://wa.me/62895405946991?text={{ urlencode('Halo Admin Yadi Parfum, saya ingin bertanya lebih lanjut mengenai produk parfum yang tersedia. Bisa bantu saya memilih yang cocok?') }}">
                        Tanya Ahli</flux:button>
                </x-slot>
            </flux:callout>
        </div>
    @else
        <flux:heading class="mb-4">Anda belum terdaftar menjadi member, silakan isi formulir di bawah ini.
        </flux:heading>
        <flux:card>
            <flux:input type="hidden" name="form.user_id"></flux:input>
            <div class="grid grid-cols-1 md:grid-cols-3 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.debounce.500ms="form.name" autofocus
                        autocomplete="off" />
                    <flux:error name="form.name" />
                </flux:field>

                <flux:input label="Nomor Telepon" placeholder="0821 xxxx xxxx" mask="9999 9999 99999"
                    wire:model.live.debounce.500ms="form.phone_number" autocomplete="off" />

                <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>
            </div>
            <flux:button wire:click="save" class="mt-4">Simpan</flux:button>
        </flux:card>
    @endif
</flux:main>
