@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 p-6">
    <div class="w-full max-w-md bg-white rounded-2xl shadow-xl p-8 border border-gray-100">

        <!-- Heading -->
        <div class="text-center mb-6">
            <h2 class="text-2xl font-bold text-gray-900">Đặt Lại Mật Khẩu</h2>
            <p class="text-gray-600 text-sm mt-1">Nhập mật khẩu mới của bạn</p>
        </div>

        <!-- Form -->
        <form method="POST" action="{{ route('password.update') }}" class="space-y-5">
            @csrf
            <input type="hidden" name="token" value="{{ $token }}">

            <!-- 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') }}"
                        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" required>
                </div>
                @error('email')
                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- Password -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Mật khẩu mới</label>
                <div class="relative">
                    <i class="ri-lock-line absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                    <input type="password" name="password"
                        class="mt-1 block w-full border rounded-full shadow-sm pl-12 py-3 transition
                        @error('password') 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 mật khẩu mới" required>
                </div>
                @error('password')
                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- Password Confirmation -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Xác nhận mật khẩu</label>
                <div class="relative">
                    <i class="ri-lock-line absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                    <input type="password" name="password_confirmation"
                        class="mt-1 block w-full border rounded-full shadow-sm pl-12 py-3 border-gray-300 
                        focus:ring-emerald-500 focus:border-emerald-500 hover:border-emerald-500 transition"
                        placeholder="Nhập lại mật khẩu" required>
                </div>
            </div>

            <!-- Submit -->
            <button type="submit"
                class="w-full bg-emerald-600 text-white font-semibold py-3 rounded-full shadow-md hover:bg-emerald-700 transition transform active:scale-95 flex items-center justify-center gap-2">
                <i class="ri-refresh-line w-4 h-4"></i> Đặt Lại Mật Khẩu
            </button>

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

        <!-- Back to login -->
        <div class="mt-6 text-center text-sm text-gray-600">
            Quay lại
            <a href="{{ route('login') }}" class="text-emerald-600 font-medium hover:underline">Đăng nhập</a>
        </div>
    </div>
</section>

@endsection