@extends('layouts.app')

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

@section('content')
<div class="min-h-screen px-4 sm:px-6 lg:px-8 flex items-center justify-center">
    <div class="max-w-md w-full">
        <div class="text-center mb-8">
            <h2 class="text-3xl font-bold text-gray-900">
                Reset your password
            </h2>
            <p class="mt-2 text-sm text-gray-600">
                Enter your new password below.
            </p>
        </div>

        <div class="bg-white py-8 px-6 shadow-lg rounded-lg">
            <form method="POST" action="{{ route('password.update') }}" class="space-y-6">
                @csrf

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

                <div>
                    <label for="email" class="block text-sm font-medium text-gray-700">Email address</label>
                    <div class="mt-1">
                        <input id="email"
                               name="email"
                               type="email"
                               required
                               value="{{ $email ?? old('email') }}"
                               class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 @error('email') border-red-300 @enderror">
                        @error('email')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <div>
                    <label for="password" class="block text-sm font-medium text-gray-700">New password</label>
                    <div class="mt-1">
                        <input id="password"
                               name="password"
                               type="password"
                               required
                               class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 @error('password') border-red-300 @enderror">
                        @error('password')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <div>
                    <label for="password-confirm" class="block text-sm font-medium text-gray-700">Confirm new password</label>
                    <div class="mt-1">
                        <input id="password-confirm"
                               name="password_confirmation"
                               type="password"
                               required
                               class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500">
                    </div>
                </div>

                <div>
                    <button type="submit" class="w-full bg-red-700 text-white flex justify-center py-2 px-4 rounded-lg hover:bg-red-800 transition-colors duration-300">
                        Reset Password
                    </button>
                </div>
            </form>

            <div class="mt-6 text-center">
                <a href="{{ route('login') }}" class="text-sm font-medium text-kumkum hover:text-red-800">
                    Back to login
                </a>
            </div>
        </div>
    </div>
</div>
@endsection