@extends('layouts.app')

@section('title', 'Login - LiteChat Pribadi')

@section('content')
<div class="bg-slate-100 h-screen flex items-center justify-center p-4">
    <div class="max-w-md w-full bg-white rounded-2xl shadow-xl overflow-hidden">
        <div class="bg-teal-600 p-6 text-center text-white">
            <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-3">
                <i class="fa-solid fa-lock text-3xl"></i>
            </div>
            <h1 class="text-2xl font-bold italic tracking-tight">LiteChat</h1>
            <p class="text-teal-100 text-sm">Akses Pesan Pribadi & Terenkripsi</p>
        </div>

        <div class="p-8">
            @if(session('error'))
                <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-3 mb-6 text-sm flex items-center gap-2">
                    <i class="fa-solid fa-circle-exclamation"></i>
                    {{ session('error') }}
                </div>
            @endif

            <form action="{{ route('login') }}" method="POST" class="space-y-5">
                @csrf
                <div>
                    <label class="block text-gray-700 text-sm font-semibold mb-2">Username</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                            <i class="fa-solid fa-user text-sm"></i>
                        </span>
                        <input type="text" name="username" required autocomplete="off"
                            class="w-full bg-gray-50 border border-gray-200 rounded-lg py-2.5 pl-10 pr-4 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent transition text-sm" 
                            placeholder="Masukkan username">
                    </div>
                </div>

                <div>
                    <label class="block text-gray-700 text-sm font-semibold mb-2">Password</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                            <i class="fa-solid fa-key text-sm"></i>
                        </span>
                        <input type="password" name="password" required
                            class="w-full bg-gray-50 border border-gray-200 rounded-lg py-2.5 pl-10 pr-4 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent transition text-sm" 
                            placeholder="••••••••">
                    </div>
                </div>

                <div class="flex items-center justify-between">
                    <label class="flex items-center text-xs text-gray-500 cursor-pointer">
                        <input type="checkbox" name="remember" class="mr-1 rounded text-teal-600 focus:ring-teal-500"> Ingat saya
                    </label>
                    <a href="#" class="text-xs text-teal-600 hover:underline font-medium">Lupa password?</a>
                </div>

                <button type="submit" 
                    class="w-full bg-teal-600 hover:bg-teal-700 text-white font-bold py-3 rounded-lg shadow-lg shadow-teal-200 transition transform active:scale-95 flex items-center justify-center gap-2">
                    <span>Masuk Sekarang</span>
                    <i class="fa-solid fa-arrow-right text-sm"></i>
                </button>
            </form>
        </div>

        <div class="p-4 bg-gray-50 border-t border-gray-100 text-center text-xs text-gray-400">
            &copy; {{ date('Y') }} LiteChat System. Semua pesan aman.
        </div>
    </div>
</div>
@endsection