<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - Sistem Perizinan Santri Digital</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#059669',
                        secondary: '#1E293B',
                        background: '#F8FAFC',
                    },
                    fontFamily: {
                        heading: ['Plus Jakarta Sans', 'sans-serif'],
                        body: ['Inter', 'sans-serif'],
                    }
                }
            }
        }
    </script>
    <style>
        body { font-family: 'Inter', sans-serif; background-color: #F8FAFC; }
        h1, h2, h3, h4 { font-family: 'Plus Jakarta Sans', sans-serif; }
    </style>
</head>
<body class="flex items-center justify-center min-h-screen bg-background p-4">

    <div class="w-full max-w-md bg-white rounded-2xl shadow-[0_4px_12px_rgba(30,41,59,0.08)] p-8 border border-slate-200">
        <div class="text-center mb-8">
            <div class="w-16 h-16 bg-primary/10 text-primary rounded-xl flex items-center justify-center mx-auto mb-4">
                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
            </div>
            <h1 class="text-2xl font-bold text-secondary mb-2">Perizinan IBK</h1>
            <p class="text-slate-500 text-sm font-body">Masuk untuk mengelola izin dan memantau status santri</p>
        </div>

        <?php if(session()->getFlashdata('msg')):?>
            <div class="bg-red-50 border-l-4 border-red-500 p-4 mb-6 rounded-md">
                <p class="text-red-700 text-sm"><?= session()->getFlashdata('msg') ?></p>
            </div>
        <?php endif;?>

        <form action="/auth/login" method="post" class="space-y-5">
            <div>
                <label class="block text-sm font-medium text-secondary mb-1">Username</label>
                <input type="text" name="username" required 
                    class="w-full px-4 py-2.5 rounded-lg border border-slate-300 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all"
                    placeholder="Masukkan username Anda">
            </div>
            <div>
                <label class="block text-sm font-medium text-secondary mb-1">Password</label>
                <input type="password" name="password" required 
                    class="w-full px-4 py-2.5 rounded-lg border border-slate-300 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all"
                    placeholder="••••••••">
            </div>
            <button type="submit" 
                class="w-full bg-primary hover:bg-emerald-700 text-white font-semibold py-3 px-4 rounded-lg transition-colors shadow-sm mt-2">
                Masuk
            </button>
        </form>
        
        <div class="mt-6 border-t border-slate-200 pt-6">
            <p class="text-xs text-slate-500 font-medium mb-3 text-center">Login Cepat (Akun Dummy):</p>
            <div class="grid grid-cols-2 gap-2">
                <button onclick="fillLogin('admin1', 'password123')" class="text-xs bg-slate-100 hover:bg-slate-200 text-slate-700 py-1.5 rounded transition">Admin</button>
                <button onclick="fillLogin('kesantrian1', 'password123')" class="text-xs bg-slate-100 hover:bg-slate-200 text-slate-700 py-1.5 rounded transition">Kesantrian</button>
                <button onclick="fillLogin('satpam1', 'password123')" class="text-xs bg-slate-100 hover:bg-slate-200 text-slate-700 py-1.5 rounded transition">Satpam</button>
                <button onclick="fillLogin('wali1', 'password123')" class="text-xs bg-slate-100 hover:bg-slate-200 text-slate-700 py-1.5 rounded transition">Wali Santri</button>
            </div>
        </div>
        
        <div class="mt-8 text-center text-xs text-slate-400">
            &copy; 2026 Sistem Perizinan Digital
        </div>
    </div>

    <script>
        function fillLogin(username, password) {
            document.querySelector('input[name="username"]').value = username;
            document.querySelector('input[name="password"]').value = password;
            document.querySelector('form').submit();
        }
    </script>
</body>
</html>
