@extends('layouts.app')

@section('head')
    <title>Login</title>
@endsection

@section('content')
    <div class="max-w-md mx-auto mt-10">
        <h2 class="text-2xl font-bold text-center text-gray-800">Sign In</h2>
        <form method="POST" action="{{ route('login') }}" class="mt-6 bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
            @csrf

            <!-- Email Input -->
            <div class="mb-4">
                <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
                <input type="email" name="email" id="email" required autofocus
                    class="mt-1 block w-full h-10 px-3 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-blue-500" 
                    value="{{ old('email') }}">
                @error('email')
                    <span class="text-red-500 text-sm">{{ $message }}</span>
                @enderror
            </div>

            <!-- Password Input -->
            <div class="mb-4">
                <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
                <input type="password" name="password" id="password" required
                    class="mt-1 block w-full h-10 px-3 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-blue-500">
                @error('password')
                    <span class="text-red-500 text-sm">{{ $message }}</span>
                @enderror
            </div>

            <!-- Remember Me Checkbox -->
            <div class="mb-4 flex items-center">
                <input type="checkbox" name="remember" id="remember"
                    class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                <label for="remember" class="ml-2 block text-sm text-gray-700">Remember me</label>
            </div>

            <!-- Submit Button -->
            <div class="flex items-center justify-between">
                <button type="submit"
                    class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                    Sign In
                </button>
                @if (Route::has('password.request'))
                    <a href="{{ route('password.request') }}" class="text-sm text-blue-600 hover:text-blue-800">Forgot password?</a>
                @endif
            </div>
        </form>

        <!-- Register Link -->
        <div class="bg-gray-50 px-6 py-4 text-center">
            <p class="text-sm text-gray-600">
                Don't have an account?
                <a href="{{ route('register') }}" class="font-medium text-blue-600 hover:text-blue-800">Register here</a>
            </p>
        </div>
    </div>
@endsection