@extends('layouts.app')

@section('content')
<div class="min-h-screen flex flex-col items-center justify-center p-4 bg-muted/30">
    <div class="w-full max-w-md">
        <div class="text-center mb-8">
            <a href="{{ url('/') }}" class="inline-flex items-center space-x-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />
                </svg>
                <span class="text-2xl font-semibold">Elderly Care Connect</span>
            </a>
        </div>
        
        <div class="bg-card border rounded-xl shadow-sm p-6 md:p-8">
            <div class="mb-6 text-center">
                <h1 class="text-2xl font-bold">Forgot Password</h1>
                <p class="text-muted-foreground mt-1">Enter your email to receive a password reset link</p>
            </div>
            
            @if (session('status'))
                <div class="mb-4 p-4 rounded-md bg-primary/10 text-primary">
                    {{ session('status') }}
                </div>
            @endif
            
            <form method="POST" action="{{ route('password.email') }}" class="space-y-4">
                @csrf
                
                <div class="space-y-2">
                    <x-ui.label for="email">Email</x-ui.label>
                    <x-ui.input
                        type="email"
                        id="email"
                        name="email"
                        placeholder="name@example.com"
                        value="{{ old('email') }}"
                        class="@error('email') border-red-500 @enderror"
                        required
                        autofocus
                    />
                    @error('email')
                        <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                    @enderror
                </div>
                
                <button
                    type="submit"
                    class="w-full py-3 rounded-md inline-flex items-center justify-center bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                >
                    Send Reset Link
                </button>
                
                <div class="mt-4 text-center text-sm">
                    <a href="{{ route('login') }}" class="text-primary hover:underline font-medium">
                        Back to Login
                    </a>
                </div>
            </form>
        </div>
        
        <div class="text-center mt-6">
            <a href="{{ url('/') }}" class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2">
                ← Back to Home
            </a>
        </div>
    </div>
</div>
@endsection