@extends('layouts.website.app')
@section('title', 'Đặt lại mật khẩu')
@section('content')

<section class="min-h-screen bg-emerald-50 flex items-center justify-center px-4 py-12">
    <div class="w-full max-w-md bg-white rounded-2xl shadow-xl p-8 border border-gray-100">

        <!-- Heading -->
        <h2 class="text-3xl font-bold text-gray-900 mb-2 text-center">Đặt lại mật khẩu của bạn</h2>
        <p class="text-center text-gray-600 mb-6">Nhập email bạn đã đăng ký, chúng tôi sẽ gửi liên kết đặt lại mật khẩu.</p>

        <!-- Success message -->
        @if (session('status'))
            <div class="mb-4 p-3 bg-green-50 border border-green-300 text-green-700 rounded-lg">
                {{ session('status') }}
            </div>
        @endif

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

            <!-- Email -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                <div class="relative">
                    <i class="ri-mail-line absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                    <input type="email" name="email" value="{{ old('email') }}" required
                        class="mt-1 block w-full border rounded-full shadow-sm pl-12 py-3 transition
                        @error('email') border-red-500 focus:ring-red-500 focus:border-red-500
                        @else border-gray-300 focus:ring-emerald-500 focus:border-emerald-500 hover:border-emerald-500 @enderror"
                        placeholder="Nhập email của bạn">
                </div>
                @error('email')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Submit -->
            <button type="submit"
                class="w-full py-3 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold rounded-full shadow-md transition">
                Gửi liên kết đặt lại mật khẩu
            </button>

            <!-- Login link -->
            <p class="mt-6 text-center text-sm text-gray-600">
                Nhớ mật khẩu?
                <a href="{{ route('login') }}" class="text-emerald-600 font-medium hover:underline">Đăng nhập ngay</a>
            </p>
        </form>
    </div>
</section>

@endsection