@extends('layouts.app')
@section('title','Create Account')
@section('content')
<div class="mx-auto max-w-md px-5 py-10"><div class="mb-8"><p class="text-sm font-semibold uppercase tracking-wide text-slate-500">Create account</p><h1 class="mt-2 text-3xl font-black">Get started in minutes</h1><p class="mt-2 text-sm text-slate-500">Email is required and will be verified.</p></div>
<form id="register-form" class="vtu-card space-y-4"><div><label class="vtu-label">Full name</label><input name="name" class="vtu-input" required></div><div><label class="vtu-label">Phone number</label><input name="phone" class="vtu-input" required></div><div><label class="vtu-label">Email address</label><input name="email" type="email" class="vtu-input" required></div><div><label class="vtu-label">Password</label><input name="password" type="password" class="vtu-input" minlength="12" required></div><div><label class="vtu-label">Confirm password</label><input name="password_confirmation" type="password" class="vtu-input" minlength="12" required></div><div id="register-error" class="hidden rounded-2xl bg-red-50 px-4 py-3 text-sm text-red-700"></div><button class="vtu-btn-primary w-full">Create account</button><p class="text-center text-sm text-slate-500">Already registered? <a href="/login" class="font-semibold text-slate-950">Login</a></p></form></div>
<script>
document.getElementById('register-form').addEventListener('submit',async e=>{e.preventDefault();const f=e.currentTarget,b=document.getElementById('register-error');b.classList.add('hidden');try{await axios.get('/sanctum/csrf-cookie');const r=await axios.post('/session/register',{name:f.name.value,phone:f.phone.value,email:f.email.value,password:f.password.value,password_confirmation:f.password_confirmation.value});window.location.href=r.data.redirect;}catch(x){const er=x.response?.data?.errors;b.textContent=er?Object.values(er).flat().join(' '):(x.response?.data?.message||'Unable to register.');b.classList.remove('hidden');}});
</script>
@endsection