@extends('layouts.app')

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

@section('content')

    <x-breadcrumb :items="[['label' => 'Create Account']]" />

    <section class="bg-cream-50 py-16 lg:py-24">
        <div class="container-shop">
            <div class="mx-auto max-w-md border border-cream-200 bg-white p-8 shadow-soft sm:p-10 rounded-2xl">
                <div class="text-center">
                    <x-icon name="leaf" class="mx-auto h-7 w-7 text-moss-600" />
                    <h1 class="mt-3 font-serif text-3xl font-medium">Create Account</h1>
                    <p class="mt-2 text-sm text-ink-500">Join Divne for order tracking, member discounts, and faster checkout.</p>
                </div>

                @if($errors->any())
                    <div class="mt-4 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded text-xs">
                        {{ $errors->first() }}
                    </div>
                @endif

                <form class="mt-8 space-y-5" action="{{ route('register.post') }}" method="POST">
                    @csrf
                    <div>
                        <label for="reg-name" class="field-label">Full Name <span class="text-terra-500">*</span></label>
                        <input id="reg-name" name="name" type="text" value="{{ old('name') }}" autocomplete="name" placeholder="Priyanka Sharma" class="field-input" required autofocus>
                    </div>
                    <div>
                        <label for="reg-email" class="field-label">Email Address <span class="text-terra-500">*</span></label>
                        <input id="reg-email" name="email" type="email" value="{{ old('email') }}" autocomplete="email" placeholder="you@example.com" class="field-input" required>
                    </div>
                    <div>
                        <label for="reg-phone" class="field-label">Phone Number (Optional)</label>
                        <input id="reg-phone" name="phone" type="tel" value="{{ old('phone') }}" autocomplete="tel" placeholder="+91 98765 43210" class="field-input">
                    </div>
                    <div>
                        <label for="reg-password" class="field-label">Password <span class="text-terra-500">*</span></label>
                        <input id="reg-password" name="password" type="password" autocomplete="new-password" placeholder="Minimum 8 characters" class="field-input" required>
                    </div>
                    <div>
                        <label for="reg-password-confirm" class="field-label">Confirm Password <span class="text-terra-500">*</span></label>
                        <input id="reg-password-confirm" name="password_confirmation" type="password" autocomplete="new-password" placeholder="Repeat password" class="field-input" required>
                    </div>
                    
                    <button type="submit" class="btn-primary w-full justify-center">Create Account</button>
                </form>

                <p class="mt-7 text-center text-sm text-ink-500">
                    Already have an account?
                    <a href="{{ route('login') }}" class="font-semibold text-moss-600 transition-colors hover:text-moss-800">Sign in</a>
                </p>
            </div>
        </div>
    </section>

@endsection