@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">Welcome Back</h1>
                <p class="text-muted-foreground mt-1">Sign in to your account to continue</p>
            </div>
            
            @if (session('status'))
                <div class="mb-4 p-4 rounded-md bg-primary/10 text-primary">
                    {{ session('status') }}
                </div>
            @endif
            
            @if (session('success'))
                <div class="mb-4 p-4 rounded-md bg-green-50 text-green-700 border border-green-200">
                    {{ session('success') }}
                </div>
            @endif
            
            @if (session('error'))
                <div class="mb-4 p-4 rounded-md bg-red-50 text-red-700 border border-red-200">
                    {{ session('error') }}
                </div>
            @endif
            
            <form method="POST" action="{{ route('login.submit') }}" 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>
                
                <div class="space-y-2">
                    <div class="flex items-center justify-between">
                        <x-ui.label for="password">Password</x-ui.label>
                        <a href="{{ route('password.request') }}" class="text-sm text-primary hover:underline">
                            Forgot password?
                        </a>
                    </div>
                    <x-ui.input
                        type="password"
                        id="password"
                        name="password"
                        placeholder="••••••••"
                        class="@error('password') border-red-500 @enderror"
                        required
                    />
                    @error('password')
                        <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                    @enderror
                </div>
                
                <div class="flex items-center space-x-2">
                    <input
                        type="checkbox"
                        id="remember"
                        name="remember"
                        class="h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 checked:bg-primary checked:text-primary-foreground"
                        {{ old('remember') ? 'checked' : '' }}
                    >
                    <x-ui.label for="remember" class="text-sm cursor-pointer">Remember me</x-ui.label>
                </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"
                >
                    Sign In
                </button>
                
                <div class="mt-4 text-center text-sm">
                    <span class="text-muted-foreground">Don't have an account?</span>
                    <a href="{{ url('/register') }}" class="text-primary hover:underline font-medium ml-1">
                        Create an account
                    </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