@extends('layouts.app')

@section('title', 'Create Account')

@section('content')
    <div class="mx-auto max-w-md rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
        <h1 class="mb-4 text-2xl font-bold">Create Account</h1>

        <a
            href="{{ route('user.google.redirect') }}"
            class="mb-4 flex w-full items-center justify-center gap-3 rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 transition hover:border-slate-400 hover:bg-slate-50"
        >
            <svg class="h-5 w-5" viewBox="0 0 24 24" aria-hidden="true">
                <path fill="#EA4335" d="M12 10.2v3.9h5.5c-.2 1.2-.9 2.2-1.9 2.9l3.1 2.4c1.8-1.7 2.8-4.1 2.8-6.9 0-.7-.1-1.5-.2-2.2H12z"/>
                <path fill="#34A853" d="M12 21c2.6 0 4.8-.9 6.4-2.5l-3.1-2.4c-.9.6-2 .9-3.3.9-2.5 0-4.7-1.7-5.5-4H3.3v2.5A9.6 9.6 0 0012 21z"/>
                <path fill="#FBBC05" d="M6.5 13c-.2-.6-.3-1.3-.3-2s.1-1.4.3-2V6.5H3.3A9.6 9.6 0 002.4 11c0 1.5.4 2.9.9 4.2L6.5 13z"/>
                <path fill="#4285F4" d="M12 5.1c1.4 0 2.7.5 3.7 1.4l2.8-2.8C16.8 2.1 14.6 1 12 1A9.6 9.6 0 003.3 6.5L6.5 9c.8-2.3 3-3.9 5.5-3.9z"/>
            </svg>
            Continue with Google
        </a>

        <div class="mb-4 flex items-center gap-3 text-xs uppercase tracking-[0.25em] text-slate-400">
            <span class="h-px flex-1 bg-slate-200"></span>
            <span>or</span>
            <span class="h-px flex-1 bg-slate-200"></span>
        </div>

        <form action="{{ route('user.register.store') }}" method="post" class="space-y-4" data-client-validate novalidate>
            @csrf
            @if ($errors->any())
                <div class="rounded-lg border border-rose-300 bg-rose-50 px-3 py-2 text-sm text-rose-700">
                    {{ $errors->first() }}
                </div>
            @endif
            <div>
                <label for="name" class="block text-sm font-medium">Name</label>
                <input id="name" name="name" value="{{ old('name') }}" required minlength="2" maxlength="120" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2">
            </div>
            <div>
                <label for="email" class="block text-sm font-medium">Email</label>
                <input id="email" type="email" name="email" value="{{ old('email') }}" required maxlength="255" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2">
            </div>
            <div>
                <label for="password" class="block text-sm font-medium">Password</label>
                <input id="password" type="password" name="password" required minlength="6" maxlength="100" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2">
            </div>
            <div>
                <label for="password_confirmation" class="block text-sm font-medium">Confirm Password</label>
                <input id="password_confirmation" type="password" name="password_confirmation" required minlength="6" maxlength="100" data-match-field="password" data-match-message="Password confirmation does not match." class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2">
            </div>
            <button class="btn-primary w-full rounded-lg px-4 py-2 font-semibold">Register</button>
            <p class="text-center text-sm text-slate-600">Already have account? <a href="{{ route('login') }}" class="text-sky-700">Login</a></p>
        </form>
    </div>
@endsection