<?php

use App\Models\User;
use App\Providers\RouteServiceProvider;
use Illuminate\Auth\Events\Registered;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Hash;
use Illuminate\Validation\Rules;
use Livewire\Attributes\Layout;
use Livewire\Volt\Component;

new #[Layout('layouts.guest')] class extends Component
{
    public string $name = '';
    public string $email = '';
    public string $password = '';
    public string $password_confirmation = '';
    public bool $showPassword = false;
    public bool $showPasswordConfirmation = false;

    public function togglePasswordVisibility(): void
    {
        $this->showPassword = !$this->showPassword;
    }

    public function togglePasswordConfirmationVisibility(): void
    {
        $this->showPasswordConfirmation = !$this->showPasswordConfirmation;
    }

    public function register(): void
    {
        $validated = $this->validate([
            'name' => ['required', 'string', 'max:255', 'min:3'],
            'email' => ['required', 'string', 'lowercase', 'email', 'max:255', 'unique:'.User::class],
            'password' => ['required', 'string', 'min:8', 'confirmed', Rules\Password::defaults()],
        ], [
            'name.required' => 'Nama harus diisi',
            'name.min' => 'Nama minimal 3 karakter',
            'email.required' => 'Email harus diisi',
            'email.email' => 'Format email tidak valid',
            'email.unique' => 'Email sudah terdaftar',
            'password.required' => 'Kata sandi harus diisi',
            'password.min' => 'Kata sandi minimal 8 karakter',
            'password.confirmed' => 'Konfirmasi kata sandi tidak cocok',
        ]);

        $validated['password'] = Hash::make($validated['password']);
        event(new Registered($user = User::create($validated)));
        Auth::login($user);
        $this->redirect(RouteServiceProvider::HOME, navigate: true);
    }
}; ?>

<div class="px-4 sm:px-6 md:px-8">
    <form wire:submit="register">
        <div>
            <x-input-label for="name" :value="__('Nama')" class="text-xs md:text-sm" />
            <x-text-input wire:model="name" id="name" class="block mt-1 w-full py-2.5 text-xs md:text-sm" type="text"
                name="name" autofocus autocomplete="name" />
            <x-input-error :messages="$errors->get('name')" class="mt-2 text-xs md:text-sm" />
        </div>

        <div class="mt-6">
            <x-input-label for="email" :value="__('Email')" class="text-xs md:text-sm" />
            <x-text-input wire:model="email" id="email" class="block mt-1 w-full py-2.5 text-xs md:text-sm" type="email"
                name="email" autocomplete="username" />
            <x-input-error :messages="$errors->get('email')" class="mt-2 text-xs md:text-sm" />
        </div>

        <div class="mt-6 relative">
            <x-input-label for="password" :value="__('Kata Sandi')" class="text-xs md:text-sm" />
            <div class="relative">
                <x-text-input wire:model="password" id="password"
                    class="block mt-1 w-full py-2.5 pr-10 text-xs md:text-sm"
                    :type="$showPassword ? 'text' : 'password'" name="password" autocomplete="new-password" />
                <button type="button" wire:click="togglePasswordVisibility"
                    class="absolute inset-y-0 right-0 flex items-center px-3 text-gray-600">
                    @if($showPassword)
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                            stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                        </svg>
                    @else
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                            stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.542-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.542 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
                        </svg>
                    @endif
                </button>
            </div>
            <x-input-error :messages="$errors->get('password')" class="mt-2 text-xs md:text-sm" />
        </div>

        <div class="mt-6 relative mb-6">
            <x-input-label for="password_confirmation" :value="__('Konfirmasi Kata Sandi')"
                class="text-xs md:text-sm" />
            <div class="relative">
                <x-text-input wire:model="password_confirmation" id="password_confirmation"
                    class="block mt-1 w-full py-2.5 pr-10 text-xs md:text-sm"
                    :type="$showPasswordConfirmation ? 'text' : 'password'" name="password_confirmation"
                    autocomplete="new-password" />
                <button type="button" wire:click="togglePasswordConfirmationVisibility"
                    class="absolute inset-y-0 right-0 flex items-center px-3 text-gray-600">
                    @if($showPasswordConfirmation)
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                            stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                        </svg>
                    @else
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                            stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.542-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.542 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
                        </svg>
                    @endif
                </button>
            </div>
            <x-input-error :messages="$errors->get('password_confirmation')" class="mt-2 text-xs md:text-sm" />
        </div>

        <div class="flex justify-center mt-4 mb-2">
            <a class="underline text-xs md:text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                href="{{ route('login') }}" wire:navigate>
                {{ __('Sudah terdaftar?') }}
            </a>
        </div>

        <div class="flex items-center">
            <x-primary-button
                class="ring-2 ring-gray-700 shadow-[4px_4px_0px_2px_#374151] text-white hover:shadow-[2px_2px_0px_2px_#374151] hover:translate-y-0.5 hover:translate-x-0.5 w-full py-2.5 text-center bg-orangeCrayola text-xs md:text-sm">
                {{ __('Daftar') }}
            </x-primary-button>
        </div>
    </form>
</div>
