@extends('storefront.layout')

@section('title', 'Sign Up')

@section('content')
<section class="mx-auto max-w-xl px-6 py-14 lg:px-8">
    <div class="rounded-3xl border border-stone-200 bg-white p-7 shadow-[0_24px_70px_rgba(28,25,23,0.10)] sm:p-9">
        <p class="text-xs font-semibold uppercase tracking-[0.22em] text-emerald-700">Sign up</p>
        <h1 class="mt-3 text-3xl font-semibold tracking-tight text-stone-950">Create your account</h1>
        <p class="mt-3 text-sm leading-6 text-stone-600">
            Save your order history and shipping addresses. We will email you a secure link to verify your address and choose a password.
        </p>
        <p class="mt-2 text-xs leading-5 text-stone-500">
            Prefer to shop first? An account is not required to browse products or complete a standard checkout.
        </p>

        @if (session('status'))
            <div class="mt-6 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm leading-6 text-emerald-900" role="status">
                {{ session('status') }}
            </div>
        @endif

        @if ($errors->any())
            <div class="mt-6 rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-800" role="alert">
                <p class="font-semibold">Please review the highlighted fields below.</p>
                <ul class="mt-2 list-disc space-y-1 pl-5">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form method="POST" action="{{ route('storefront.register.submit') }}"
              class="mt-7 space-y-5"
              x-data="{ submitting: false }"
              @submit="submitting = true">
            @csrf

            <label class="block text-sm font-medium text-stone-700">
                Full name
                <input name="full_name" value="{{ old('full_name') }}" required autofocus autocomplete="name"
                       class="mt-2 w-full rounded-lg border border-stone-300 bg-white px-3 py-2.5 text-sm text-stone-900 placeholder-stone-400 shadow-sm transition focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20 focus:outline-none @error('full_name') border-rose-400 @enderror">
            </label>

            <label class="block text-sm font-medium text-stone-700">
                Email address
                <input type="email" name="email" value="{{ old('email') }}" required autocomplete="email"
                       class="mt-2 w-full rounded-lg border border-stone-300 bg-white px-3 py-2.5 text-sm text-stone-900 placeholder-stone-400 shadow-sm transition focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20 focus:outline-none @error('email') border-rose-400 @enderror">
            </label>

            <label class="block text-sm font-medium text-stone-700">
                Phone <span class="font-normal text-stone-400">(optional)</span>
                <input type="tel" name="phone" value="{{ old('phone') }}" autocomplete="tel"
                       class="mt-2 w-full rounded-lg border border-stone-300 bg-white px-3 py-2.5 text-sm text-stone-900 placeholder-stone-400 shadow-sm transition focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20 focus:outline-none @error('phone') border-rose-400 @enderror">
            </label>

            <button type="submit"
                    x-bind:disabled="submitting"
                    class="inline-flex w-full items-center justify-center rounded-xl bg-emerald-700 px-5 py-3 text-sm font-semibold text-white transition hover:bg-emerald-800 disabled:cursor-wait disabled:opacity-70">
                <span x-text="submitting ? 'Sending secure link…' : 'Email my secure signup link'">Email my secure signup link</span>
            </button>
        </form>

        <div class="mt-6 flex flex-wrap items-center justify-between gap-3 border-t border-stone-100 pt-5 text-sm">
            <a href="{{ route('login') }}" class="font-semibold text-emerald-700 hover:text-emerald-900">Already have an account? Sign in</a>
            <a href="{{ route('storefront.payment-terms') }}" class="text-stone-500 hover:text-stone-800">About Payment Terms</a>
        </div>
    </div>
</section>
@endsection