@extends('layouts.app')

@section('title', 'Reset Password')

@section('content')
<div class="max-w-md mx-auto mt-10 bg-white dark:bg-gray-800 p-6 rounded shadow">
    <h1 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">🔁 Reset Password</h1>

    <form method="POST" action="{{ route('password.update') }}">
        @csrf

        <input type="hidden" name="token" value="{{ request()->route('token') }}">

        <div class="mb-4">
            <label for="email" class="block text-sm font-medium text-gray-700 dark:text-white">Email</label>
            <input type="email" name="email" id="email" value="{{ old('email') }}"
                   class="w-full mt-1 border rounded px-3 py-2 bg-white dark:bg-gray-900 text-gray-800 dark:text-white"
                   required autofocus>
            @error('email')
                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
            @enderror
        </div>

        <div class="mb-4">
            <label for="password" class="block text-sm font-medium text-gray-700 dark:text-white">Password Baru</label>
            <input type="password" name="password" id="password"
                   class="w-full mt-1 border rounded px-3 py-2 bg-white dark:bg-gray-900 text-gray-800 dark:text-white"
                   required>
            @error('password')
                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
            @enderror
        </div>

        <div class="mb-4">
            <label for="password_confirmation" class="block text-sm font-medium text-gray-700 dark:text-white">Konfirmasi Password</label>
            <input type="password" name="password_confirmation" id="password_confirmation"
                   class="w-full mt-1 border rounded px-3 py-2 bg-white dark:bg-gray-900 text-gray-800 dark:text-white"
                   required>
        </div>

        <div class="flex justify-end">
            <button type="submit"
                    class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700">
                Reset Password
            </button>
        </div>
    </form>
</div>
@endsection