<!DOCTYPE html>
<html lang="ms">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Log Masuk - MyWarisan</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .bg-warisan { background-color: #1b4332; } /* Dark green */
        .text-emas { color: #d4af37; } /* Soft gold */
        .border-emas { border-color: #d4af37; }
        .bg-emas { background-color: #d4af37; }
    </style>
</head>
<body class="bg-gray-50 flex items-center justify-center min-h-screen p-4">

    <div class="max-w-md w-full bg-white rounded-xl shadow-xl overflow-hidden border border-gray-100">
        <div class="bg-warisan p-6 text-center">
            <h1 class="text-3xl font-bold text-white mb-2">My<span class="text-emas">Warisan</span></h1>
            <p class="text-green-100 text-sm">Sistem Jejak Warisan Keluarga</p>
        </div>
        
        <div class="p-8">
            <h2 class="text-xl font-semibold text-gray-800 mb-6 text-center">Log Masuk</h2>

            @if($errors->any())
                <div class="bg-red-50 text-red-600 p-4 rounded-lg mb-6 text-sm border border-red-100">
                    {{ $errors->first() }}
                </div>
            @endif

            <form method="POST" action="{{ route('login.post') }}" class="space-y-6">
                @csrf
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Nombor Telefon</label>
                    <input type="text" name="phone_number" value="{{ old('phone_number') }}" required 
                           class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-[#1b4332] focus:border-[#1b4332] outline-none transition"
                           placeholder="Contoh: 0123456789">
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Kod Lahir (6 Digit)</label>
                    <input type="password" name="dob_code" required maxlength="6"
                           class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-[#1b4332] focus:border-[#1b4332] outline-none transition tracking-widest text-center"
                           placeholder="Contoh: 800815">
                    <p class="text-xs text-gray-500 mt-2">6 digit pertama Nombor Kad Pengenalan (YYMMDD)</p>
                </div>

                <button type="submit" 
                        class="w-full bg-warisan text-white font-semibold py-3 px-4 rounded-lg hover:bg-[#143224] transition duration-200 shadow-md">
                    Log Masuk
                </button>
            </form>
        </div>
        
        <div class="bg-gray-50 p-4 border-t border-gray-100 text-center">
            <p class="text-xs text-gray-500">&copy; {{ date('Y') }} Jejak Warisan Keluarga. Hak Cipta Terpelihara.</p>
        </div>
    </div>

</body>
</html>
