@extends('storefront.layout')

@section('title', 'Choose a new password')

@section('content')
<section class="mx-auto max-w-lg px-6 py-16 lg:px-8">
    <div class="rounded-3xl border border-stone-200 bg-white p-8 shadow-xl shadow-stone-900/5">
        <p class="text-xs font-semibold uppercase tracking-[0.22em] text-emerald-700">First access</p>
        <h1 class="mt-2 text-3xl font-semibold text-stone-950">Choose a new password</h1>
        <p class="mt-3 text-sm leading-6 text-stone-600">
            Your secure first-access link has been verified. Choose a private password and you will go directly to your Retail Partner order page.
        </p>

        @if ($errors->any())
            <div class="mt-5 rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-800">
                @foreach ($errors->all() as $error)<p>{{ $error }}</p>@endforeach
            </div>
        @endif

        <form method="POST" action="{{ route('storefront.first-access.password.update') }}" class="mt-6 space-y-5">
            @csrf
            <label class="block text-sm font-medium text-stone-700">New password
                <input type="password" name="password" required minlength="6" autocomplete="new-password"
                       class="vm-form-control mt-2 w-full">
            </label>
            <label class="block text-sm font-medium text-stone-700">Confirm new password
                <input type="password" name="password_confirmation" required minlength="6" autocomplete="new-password"
                       class="vm-form-control mt-2 w-full">
            </label>
            <p class="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" class="w-full rounded-xl bg-emerald-700 px-5 py-3 text-sm font-semibold text-white hover:bg-emerald-800">
                Save password and view order
            </button>
        </form>

        <form method="POST" action="{{ route('storefront.logout') }}" class="mt-4 text-center">
            @csrf
            <button type="submit" class="text-sm font-semibold text-stone-500 hover:text-stone-800">Sign out</button>
        </form>
    </div>
</section>
@endsection