<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login | SMAN 1 Garut</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>tailwind.config = { theme: { extend: { colors: { primary: { DEFAULT: '#3C50E0' } } } } };</script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@2.1.4/css/boxicons.min.css">
</head>
<body class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
    <div class="w-full max-w-md">
        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl border border-gray-200 dark:border-gray-700 p-8">
            <div class="text-center mb-8">
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">SMAN 1 Garut</h1>
                <p class="text-gray-500 dark:text-gray-400 mt-1">Sign in to dashboard</p>
            </div>
            <form id="login-form" class="space-y-5">
                <div>
                    <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email</label>
                    <input type="email" id="email" name="email" required autocomplete="email"
                        class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary focus:border-transparent">
                </div>
                <div>
                    <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label>
                    <input type="password" id="password" name="password" required autocomplete="current-password"
                        class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary focus:border-transparent">
                </div>
                <p id="login-error" class="text-sm text-red-600 dark:text-red-400 hidden"></p>
                <button type="submit" id="login-btn" class="w-full py-2.5 px-4 rounded-lg font-medium text-white bg-primary hover:opacity-90 focus:ring-2 focus:ring-primary focus:ring-offset-2">
                    Sign in
                </button>
            </form>
        </div>
    </div>
    <script>
    (function() {
        var form = document.getElementById('login-form');
        var errorEl = document.getElementById('login-error');
        var btn = document.getElementById('login-btn');
        var apiLogin = '<?= base_url('api/auth/login') ?>';
        var dashboardUrl = '<?= base_url('dashboard') ?>';
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            errorEl.classList.add('hidden');
            errorEl.textContent = '';
            btn.disabled = true;
            fetch(apiLogin, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                credentials: 'same-origin',
                body: JSON.stringify({ email: document.getElementById('email').value, password: document.getElementById('password').value })
            }).then(function(r) {
                if (r.ok) return r.json();
                return r.json().then(function(j) { throw new Error(j.message || 'Login failed'); });
            }).then(function() {
                window.location.href = dashboardUrl;
            }).catch(function(err) {
                errorEl.textContent = err.message || 'Invalid email or password';
                errorEl.classList.remove('hidden');
                btn.disabled = false;
            });
        });
    })();
    </script>
</body>
</html>
