<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login ASGARD - SMAN 4 Jember</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="{{ asset('css/auth.css') }}" rel="stylesheet">
</head>
<body class="auth-page px-6">

    <div class="login-container">
        <div class="login-visual">
            <div class="visual-pattern"></div>
            <div class="relative z-10">
                <div class="mb-12">
                    <span class="badge-ai">AI TECHNOLOGY</span>
                </div>
                <h2 class="text-5xl font-extrabold italic tracking-tighter mb-6 leading-tight">
                    Tentukan Jalur <br> Karirmu Bersama <br> <span class="text-green-400">ASGARD.</span>
                </h2>
                <p class="text-green-100/60 font-medium leading-relaxed max-w-sm mb-12">
                    Sistem bimbingan cerdas SMAN 4 Jember membantu memetakan masa depanmu melalui kekuatan data.
                </p>
                <div class="flex items-center space-x-4 opacity-50">
                    <div class="w-10 h-10 rounded-full border border-white flex items-center justify-center font-bold">S4</div>
                    <div class="text-[10px] font-bold uppercase tracking-widest">Official Academic System <br> SMAN 4 Jember</div>
                </div>
            </div>
        </div>

        <div class="login-form-area">
            <div class="mb-10">
                <h3 class="text-3xl font-black text-slate-900 tracking-tighter">AI Login <span class="text-green-600">—</span></h3>
                <p class="text-slate-400 font-bold text-[10px] uppercase tracking-widest mt-2">Sistem Rekomendasi Jurusan</p>
            </div>

            <form id="loginForm" class="space-y-6">
                @csrf
                <div>
                    <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-3 ml-1">Username / ID Siswa</label>
                    <input type="text" id="username" name="username" required 
                        class="input-modern w-full text-slate-900" 
                        placeholder="Masukkan ID Siswa">
                </div>

                <div>
                    <div class="flex justify-between items-center mb-3 px-1">
                        <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400">Password</label>
                        <a href="#" class="text-[10px] font-black text-green-600 hover:text-green-800 uppercase tracking-widest">Bantuan</a>
                    </div>
                    <input type="password" id="password" name="password" required 
                        class="input-modern w-full text-slate-900" 
                        placeholder="••••••••">
                    <p id="error-message" class="hidden text-red-500 text-[11px] font-bold mt-2 ml-1 italic"></p>
                </div>

                <div class="pt-4 flex flex-col gap-4">
                    <button type="submit" id="btnLogin" class="btn-login w-full">
                        Masuk Ke ASGARD
                    </button>
                    <a href="{{ route('landingpage') }}" class="btn-login w-full text-center flex items-center justify-center">
                        Kembali ke Beranda
                    </a>
                </div>
            </form>

            <div class="mt-12 text-center">
                <p class="text-[11px] text-slate-400 font-bold uppercase tracking-widest">
                    Punya kendala akses? 
                    <a href="#" class="text-green-600 hover:text-green-800 ml-1 underline">Hubungi Guru BK</a>
                </p>
            </div>
        </div>
    </div>

    <script>
        document.getElementById('loginForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const btn = document.getElementById('btnLogin');
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const errorElement = document.getElementById('error-message');
            
            errorElement.classList.add('hidden');
            btn.disabled = true;
            btn.innerText = 'Memproses...';

            try {
                const response = await fetch('/api/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({
                        username: username,
                        password: password
                    })
                });

                const data = await response.json();

                if (response.ok) {
                    localStorage.setItem('access_token', data.access_token);
                    localStorage.setItem('user_role', data.role);

                    if (data.role === 'admin') {
                        window.location.href = "{{ route('admin.dashboard') }}";
                    } else {
                        window.location.href = "{{ route('student.profile') }}";
                    }
                } else {
                    errorElement.innerText = data.message || 'Username atau password salah.';
                    errorElement.classList.remove('hidden');
                }
            } catch (error) {
                console.error('Error:', error);
                errorElement.innerText = 'Koneksi gagal. Silakan coba lagi.';
                errorElement.classList.remove('hidden');
            } finally {
                btn.disabled = false;
                btn.innerText = 'Masuk Ke ASGARD';
            }
        });
    </script>
</body>
</html>