@extends('layouts.app', ['title' => 'Register'])

@section('content')
<div class="mx-auto max-w-2xl rounded-[2rem] border border-white/10 bg-slate-900/80 p-8">
    <h1 class="font-display text-3xl font-bold text-white">Create your customer account</h1>
    <form method="POST" action="{{ route('register.store') }}" class="mt-8 grid gap-5 md:grid-cols-2">
        @csrf
        <div class="md:col-span-2">
            <label class="mb-2 block text-sm text-slate-300">Full name</label>
            <input type="text" name="name" value="{{ old('name') }}" placeholder="Full name" title="Enter the primary customer or company contact name" class="w-full rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white" required>
        </div>
        <div>
            <label class="mb-2 block text-sm text-slate-300">Company name</label>
            <input type="text" name="company_name" value="{{ old('company_name') }}" placeholder="Company name" title="Optional: enter the business or agency name" class="w-full rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white">
        </div>
        <div>
            <label class="mb-2 block text-sm text-slate-300">Mobile number</label>
            <input type="text" name="mobile_number" value="{{ old('mobile_number') }}" placeholder="Mobile number" title="Optional: add a support or billing contact number" class="w-full rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white">
        </div>
        <div>
            <label class="mb-2 block text-sm text-slate-300">Email address</label>
            <input type="email" name="email" value="{{ old('email') }}" placeholder="name@company.com" title="Use an email address that will receive verification and license notices" class="w-full rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white" required>
        </div>
        <div></div>
        <div>
            <label class="mb-2 block text-sm text-slate-300">Password</label>
            <input type="password" name="password" placeholder="Create a secure password" title="Choose a strong password with at least 10 characters" class="w-full rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white" required>
        </div>
        <div>
            <label class="mb-2 block text-sm text-slate-300">Confirm password</label>
            <input type="password" name="password_confirmation" placeholder="Confirm your password" title="Re-enter the same password for confirmation" class="w-full rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white" required>
        </div>
        <div class="md:col-span-2">
            <button type="submit" class="w-full rounded-2xl bg-brand-500 px-5 py-3 font-semibold text-white shadow-glow">Create account</button>
        </div>
    </form>
</div>
@endsection