@extends('layouts.app')

@section('content')
<div class="w-full max-w-md mx-auto my-12">
    <div class="border border-[#E5EEF8] p-8 rounded-[24px] bg-white text-left shadow-lg shadow-slate-100/60 transition-all duration-300">
        
        <!-- Header / Logo -->
        <div class="text-center mb-8">
            <div class="inline-flex w-12 h-12 rounded-2xl bg-secondary items-center justify-center text-primary mb-3">
                <i data-lucide="lock" class="w-6 h-6 stroke-[2.5]"></i>
            </div>
            <h2 class="text-2xl font-bold text-slate-800">Masuk ke Sistem</h2>
            <p class="text-xs text-slate-500 mt-1 font-semibold">Silakan masukkan akun Anda untuk mengakses fitur identifikasi.</p>
        </div>

        <!-- Session Status / Errors -->
        @if ($errors->any())
        <div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-xl text-xs font-semibold text-red-700 flex items-start gap-2">
            <i data-lucide="alert-circle" class="w-4 h-4 shrink-0 text-red-500 mt-0.5"></i>
            <div>
                <ul class="list-disc list-inside">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
        @endif

        <!-- Login Form -->
        <form method="POST" action="{{ route('login.post') }}" class="space-y-5">
            @csrf

            <!-- Email Address -->
            <div>
                <label for="email" class="block text-xs font-bold text-slate-500 uppercase mb-2">Alamat Email</label>
                <div class="relative">
                    <input id="email" type="email" name="email" value="{{ old('email') }}" required autofocus placeholder="nama@panti.org" 
                        class="w-full pl-10 pr-4 py-3 border border-[#DDE7F3] rounded-xl text-sm font-semibold text-slate-700 focus:outline-none focus:border-primary transition duration-150 bg-slate-50/30">
                    <div class="absolute left-3.5 top-3.5 text-slate-400">
                        <i data-lucide="mail" class="w-4 h-4"></i>
                    </div>
                </div>
            </div>

            <!-- Password -->
            <div>
                <label for="password" class="block text-xs font-bold text-slate-500 uppercase mb-2">Kata Sandi</label>
                <div class="relative">
                    <input id="password" type="password" name="password" required placeholder="••••••••" 
                        class="w-full pl-10 pr-4 py-3 border border-[#DDE7F3] rounded-xl text-sm font-semibold text-slate-700 focus:outline-none focus:border-primary transition duration-150 bg-slate-50/30">
                    <div class="absolute left-3.5 top-3.5 text-slate-400">
                        <i data-lucide="key-round" class="w-4 h-4"></i>
                    </div>
                </div>
            </div>

            <!-- Remember Me -->
            <div class="flex items-center justify-between">
                <label class="inline-flex items-center text-xs font-bold text-slate-500 cursor-pointer select-none">
                    <input type="checkbox" name="remember" class="w-4 h-4 rounded border-slate-300 text-primary focus:ring-primary/20 mr-2">
                    Ingat Saya
                </label>
            </div>

            <!-- Submit Button -->
            <div>
                <button type="submit" class="w-full flex items-center justify-center gap-2 py-3.5 bg-primary hover:bg-[#0057D8] text-white rounded-xl text-sm font-bold transition shadow-md shadow-blue-500/10 hover:shadow-blue-500/20 transform hover:-translate-y-0.5 active:translate-y-0">
                    <i data-lucide="log-in" class="w-4 h-4"></i>
                    Masuk Sekarang
                </button>
            </div>
        </form>
        
        <!-- Info Footer -->
        <div class="text-center mt-8 pt-6 border-t border-slate-100">
            <p class="text-[11px] font-semibold text-slate-400 flex items-center justify-center gap-1">
                <i data-lucide="shield-alert" class="w-3.5 h-3.5"></i>
                Hanya untuk Pengurus Panti Asuhan Zending Islam
            </p>
        </div>
    </div>
</div>
@endsection