@extends('layouts.app')

@section('content')
<div class="min-h-screen flex items-center justify-center auth-bg">
    <div class="w-full max-w-md p-fluid">
        <div class="glass-effect rounded-fluid shadow-lg p-fluid-lg">
            <!-- Logo/Header -->
            <div class="text-center mb-fluid">
                <h1 class="text-fluid-2xl font-bold text-gray-800 dark:text-gray-100 mb-fluid-sm">
                    LicenseVault
                </h1>
                <p class="text-fluid-sm text-gray-600 dark:text-gray-400">Sign in to your account</p>
            </div>

            <!-- Error Messages -->
            @if ($errors->any())
                <div class="mb-fluid bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-700 rounded-fluid p-fluid">
                    <ul class="list-disc list-inside text-fluid-sm text-red-600 dark:text-red-300">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <!-- Success Message -->
            @if (session('success'))
                <div class="mb-fluid bg-green-50 dark:bg-green-900 border border-green-200 dark:border-green-700 rounded-fluid p-fluid">
                    <p class="text-fluid-sm text-green-700 dark:text-green-300">{{ session('success') }}</p>
                </div>
            @endif

            <!-- Login Form -->
            <form method="POST" action="{{ route('login') }}">
                @csrf

                <!-- Email -->
                <div class="mb-fluid">
                    <label for="email" class="block text-fluid-sm font-medium text-gray-700 dark:text-gray-300 mb-fluid-sm">
                        Email Address
                    </label>
                    <input
                        type="email"
                        name="email"
                        id="email"
                        value="{{ old('email') }}"
                        class="input-fluid w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-fluid focus:ring-2 focus:ring-purple-500 focus:border-purple-500 @error('email') border-red-500 @enderror"
                        required
                        autofocus
                    >
                </div>

                <!-- Password -->
                <div class="mb-fluid">
                    <label for="password" class="block text-fluid-sm font-medium text-gray-700 dark:text-gray-300 mb-fluid-sm">
                        Password
                    </label>
                    <input
                        type="password"
                        name="password"
                        id="password"
                        class="input-fluid w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-fluid focus:ring-2 focus:ring-purple-500 focus:border-purple-500 @error('password') border-red-500 @enderror"
                        required
                    >
                </div>

                <!-- Remember Me -->
                <div class="mb-fluid">
                    <label class="inline-flex items-center">
                        <input type="checkbox" name="remember" class="rounded border-gray-300 dark:border-gray-600 text-purple-600 focus:ring-purple-500">
                        <span class="ml-2 text-fluid-sm text-gray-600 dark:text-gray-400">Remember me</span>
                    </label>
                </div>

                <!-- Submit Button -->
                <button
                    type="submit"
                    class="btn-fluid w-full bg-gradient-to-r from-purple-600 to-indigo-600 text-white font-medium rounded-fluid hover:from-purple-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transition-all"
                >
                    Sign In
                </button>
            </form>
        </div>
    </div>
</div>
@endsection
