@extends('layouts.auth')

@section('title', 'Reset Password · Aromaniacs ERP')

@section('content')
<div class="w-full max-w-md">
    <div class="card">
        <div class="flex flex-col items-center text-center mb-8">
            <img src="{{ asset('assets/brand-mark-alt.png') }}" alt="Aromaniacs" class="h-12 w-12 mb-4">
            <p class="label" style="color: var(--color-ink);">ERP Access</p>
            <h1 class="mt-2 text-3xl" style="font-family: var(--font-serif);">Set a new password</h1>
            <p class="mt-2 text-sm" style="color: var(--color-ink-70);">
                Choose a strong password for <strong>{{ $email }}</strong>.
            </p>
        </div>

        <form method="POST" action="{{ route('admin.password.update') }}" class="space-y-5">
            @csrf

            <input type="hidden" name="token" value="{{ $token }}">
            <input type="hidden" name="email" value="{{ $email }}">

            <div>
                <label for="password" class="label block mb-2" style="color: var(--color-ink-70);">New password</label>
                <input
                    id="password"
                    type="password"
                    name="password"
                    required
                    autofocus
                    autocomplete="new-password"
                    class="input"
                    placeholder="••••••••"
                >
                @error('password')
                    <p class="mt-2 text-xs" style="color: var(--color-lilac);">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="password_confirmation" class="label block mb-2" style="color: var(--color-ink-70);">Confirm password</label>
                <input
                    id="password_confirmation"
                    type="password"
                    name="password_confirmation"
                    required
                    autocomplete="new-password"
                    class="input"
                    placeholder="••••••••"
                >
            </div>

            @error('email')
                <div class="rounded-md border px-4 py-3 text-sm" style="border-color: var(--color-lilac-40); color: var(--color-lilac); background: var(--color-lilac-10);">
                    {{ $message }}
                </div>
            @enderror

            <button type="submit" class="btn btn-primary w-full">Reset Password</button>
        </form>

        <p class="mt-6 text-center text-sm" style="color: var(--color-ink-70);">
            Link expired or invalid?
            <a href="{{ route('admin.password.request') }}" class="underline decoration-current/25 underline-offset-4 hover:decoration-current" style="color: var(--color-ink);">Request a new link</a>
        </p>

        <p class="mt-8 text-center text-xs label" style="color: var(--color-ink-40);">
            Aromaniacs ERP · Restricted Access
        </p>
    </div>
</div>
@endsection