<?php

use App\Models\User;
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;

return new #[Layout('components.layouts.auth')] class extends Component {
    public string $name = '';
    public string $email = '';
    public string $password = '';
    public string $password_confirmation = '';

    public function register(): void
    {
        $validated = $this->validate([
            'name' => ['required', 'string', 'max:255'],
            'email' => ['required', 'string', 'lowercase', 'email', 'max:255', 'unique:' . User::class],
            'password' => ['required', 'string', 'confirmed', Rules\Password::defaults()],
        ]);

        $validated['password'] = Hash::make($validated['password']);

        event(new Registered($user = User::create($validated)));

        Auth::login($user);

        $this->redirectIntended(route('dashboard'), navigate: false);
    }
};
?>

<div class="p-4 shadow bg-warning rounded-0 mx-auto mt-5" style="max-width: 600px; width: 100%; padding-top: 50px;">
    <div class="flex flex-col gap-6">
        <h2>Register</h2>
        <x-auth-header :title="__('Create an account')" :description="__('Enter your details below to create your account')" />

        <!-- Session Status -->
        <x-auth-session-status class="text-center" :status="session('status')" />

        <form wire:submit.prevent="register" class="row login">
            <div class="col-12">
                <input type="text" wire:model="name" class="form-control mb-3 rounded-0" placeholder="Name" required autofocus
                    autocomplete="name">
                @error('name') <span class="text-danger">{{ $message }}</span> @enderror
            </div>

            <div class="col-12">
                <input type="email" wire:model="email" class="form-control mb-3 rounded-0" placeholder="Email" required
                    autocomplete="email">
                @error('email') <span class="text-danger">{{ $message }}</span> @enderror
            </div>

            <div class="col-12">
                <input type="password" wire:model="password" class="form-control mb-3 rounded-0" placeholder="Password" required
                    autocomplete="new-password">
                @error('password') <span class="text-danger">{{ $message }}</span> @enderror
            </div>

            <div class="col-12">
                <input type="password" wire:model="password_confirmation" class="form-control mb-3 rounded-0"
                    placeholder="Confirm Password" required autocomplete="new-password">
            </div>

            <div class="col-12">
                <button type="submit" class="btn btn-dark w-100 rounded-0 py-2">
                    SIGN UP
                </button>
            </div>
        </form>

        <div class="col-12 text-center mt-3">
            <p class="text-lg">
                {{ __('Already have an account?') }}
                <a href="{{ route('login') }}" class="text-success">
                  <strong>  {{ __('Sign in') }} </strong>
                </a>
            </p>
        </div>
    </div>
</div>