@extends('storefront.layout')

@section('title', 'Verify your email')

@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">Email verified</p>
        <h1 class="mt-3 text-3xl font-semibold tracking-tight text-stone-950">Secure your account</h1>
        <p class="mt-3 text-sm leading-6 text-stone-600">
            Confirm your details and choose a strong password. Your account will be ready as soon as you finish.
        </p>

        @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.activate', ['token' => $token]) }}"
              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', $fullName) }}" required autofocus autocomplete="name"
                       class="vm-form-control mt-2 w-full @error('full_name') 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 name="phone" value="{{ old('phone', $phone) }}" autocomplete="tel"
                       class="vm-form-control mt-2 w-full @error('phone') border-rose-400 @enderror">
            </label>

            <div class="grid gap-5 sm:grid-cols-2">
                <label class="block text-sm font-medium text-stone-700">
                    Password
                    <input type="password" name="password" required minlength="6" autocomplete="new-password"
                           class="vm-form-control mt-2 w-full @error('password') border-rose-400 @enderror">
                </label>
                <label class="block text-sm font-medium text-stone-700">
                    Confirm password
                    <input type="password" name="password_confirmation" required minlength="6" autocomplete="new-password"
                           class="vm-form-control mt-2 w-full">
                </label>
            </div>
            <p class="-mt-2 text-xs leading-5 text-stone-500">
                Use at least 6 characters with uppercase and lowercase letters, a number, and a symbol.
            </p>

            <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 ? 'Securing account…' : 'Create secure account'">Create secure account</span>
            </button>
        </form>
    </div>
</section>
@endsection