<?php
session_start();
if (isset($_SESSION['id_user'])) {
    header("Location: ../modules/dashboard.php");
    exit;
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - BKCare | SMAN 1 Bantaran</title>
    
    <!-- Tailwind CSS via CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome untuk ikon -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <!-- Google Fonts - Inter -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
        }
        
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .gradient-bg-light {
            background: linear-gradient(135deg, #f5f0ff 0%, #f0e6ff 100%);
        }
        
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(102, 126, 234, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            transition: all 0.3s ease;
        }
        
        .input-focus-effect:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }
        
        .animate-pulse-slow {
            animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }
        
        .bg-pattern {
            background-image: 
                radial-gradient(circle at 30% 40%, rgba(102, 126, 234, 0.05) 0%, transparent 20%),
                radial-gradient(circle at 70% 60%, rgba(118, 75, 162, 0.05) 0%, transparent 20%),
                radial-gradient(circle at 40% 80%, rgba(102, 126, 234, 0.05) 0%, transparent 20%),
                radial-gradient(circle at 80% 20%, rgba(118, 75, 162, 0.05) 0%, transparent 20%);
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800 min-h-screen flex items-center justify-center p-4 relative">

    <!-- Background Pattern -->
    <div class="absolute inset-0 bg-pattern"></div>
    
    <!-- Main Container -->
    <div class="w-full max-w-5xl bg-white rounded-3xl shadow-2xl overflow-hidden flex flex-col lg:flex-row relative z-10 card-hover">
        
        <!-- Left Side - Branding with Gradient -->
        <div class="lg:w-1/2 gradient-bg text-white p-8 lg:p-12 flex flex-col justify-between relative overflow-hidden">
            <!-- Animated Background -->
            <div class="absolute inset-0 bg-white/10 animate-pulse-slow"></div>
            
            <!-- Content -->
            <div class="relative z-10">
                <!-- Logo -->
                <div class="flex items-center space-x-3 mb-12">
                    <div class="bg-white/20 backdrop-blur-lg p-3 rounded-2xl">
                        <i class="fas fa-heart text-3xl text-purple-600"></i>
                        
                    </div>
                    <div>
                        <span class="text-2xl font-bold tracking-tight">BKCare</span>
                        <span class="block text-sm text-white/80">SMAN 1 Bantaran</span>
                    </div>
                </div>
                
                <!-- Welcome Message -->
                <div class="mb-12">
                    <h2 class="text-3xl lg:text-4xl font-bold leading-tight mb-4">Selamat Datang Kembali! 👋</h2>
                    <p class="text-white/90 leading-relaxed">Platform bimbingan konseling digital yang membantu Anda mengelola layanan BK dengan lebih efektif dan efisien.</p>
                </div>
                
                <!-- Features -->
                <div class="space-y-4 mb-12">
                    <div class="flex items-center space-x-3 bg-white/10 backdrop-blur-sm p-3 rounded-xl">
                        <div class="bg-white/20 p-2 rounded-lg">
                            <i class="fas fa-check-circle text-green-300"></i>
                        </div>
                        <span>Manajemen laporan masalah terintegrasi</span>
                    </div>
                    <div class="flex items-center space-x-3 bg-white/10 backdrop-blur-sm p-3 rounded-xl">
                        <div class="bg-white/20 p-2 rounded-lg">
                            <i class="fas fa-check-circle text-green-300"></i>
                        </div>
                        <span>Jadwal konseling real-time</span>
                    </div>
                    <div class="flex items-center space-x-3 bg-white/10 backdrop-blur-sm p-3 rounded-xl">
                        <div class="bg-white/20 p-2 rounded-lg">
                            <i class="fas fa-check-circle text-green-300"></i>
                        </div>
                        <span>Rekam sesi dengan metode konseling terstruktur</span>
                    </div>
                    <div class="flex items-center space-x-3 bg-white/10 backdrop-blur-sm p-3 rounded-xl">
                        <div class="bg-white/20 p-2 rounded-lg">
                            <i class="fas fa-check-circle text-green-300"></i>
                        </div>
                        <span>Pantau perkembangan siswa secara holistik</span>
                    </div>
                </div>
            </div>
            
            <!-- Footer -->
            <div class="relative z-10 text-sm text-white/70">
                <p>&copy; <?php echo date('Y'); ?> BKCare SMAN 1 Bantaran. All rights reserved.</p>
            </div>
        </div>
        
        <!-- Right Side - Login Form -->
        <div class="lg:w-1/2 p-8 lg:p-12 bg-white">
            <div class="max-w-md mx-auto">
                <!-- Header -->
                <div class="text-center mb-8">
                    <h3 class="text-2xl font-bold text-gray-800 mb-2">Masuk ke Akun</h3>
                    <p class="text-gray-600">Silakan masukkan kredensial Anda untuk mengakses dashboard</p>
                </div>
                
                <!-- Login Form -->
                <form action="proses_login.php" method="POST" id="loginForm" class="space-y-6">
                    <!-- Username Field -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-user mr-2 text-purple-600"></i>Username
                        </label>
                        <div class="relative">
                            <input type="text" 
                                   name="username" 
                                   class="w-full px-4 py-3 pl-11 border border-gray-300 rounded-xl focus:ring-2 focus:ring-purple-600 focus:border-transparent outline-none transition bg-gray-50"
                                   placeholder="Masukkan username Anda"
                                   required
                                   autocomplete="username"
                                   autofocus>
                            <i class="fas fa-user absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
                        </div>
                    </div>
                    
                    <!-- Password Field -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-lock mr-2 text-purple-600"></i>Password
                        </label>
                        <div class="relative">
                            <input type="password" 
                                   name="password" 
                                   class="w-full px-4 py-3 pl-11 border border-gray-300 rounded-xl focus:ring-2 focus:ring-purple-600 focus:border-transparent outline-none transition bg-gray-50"
                                   placeholder="Masukkan password Anda"
                                   required
                                   autocomplete="current-password">
                            <i class="fas fa-lock absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
                        </div>
                    </div>
                    
                    <!-- Options -->
                    <div class="flex items-center justify-between">
                        <label class="flex items-center space-x-2">
                            <input type="checkbox" name="remember" class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500">
                            <span class="text-sm text-gray-600">Ingat saya</span>
                        </label>
                        <button type="button" onclick="showForgotPasswordModal()" class="text-sm text-purple-600 hover:text-purple-800 font-medium transition">
                            <i class="fas fa-key mr-1"></i>Lupa password?
                        </button>
                    </div>
                    
                    <!-- Submit Button -->
                    <button type="submit" id="loginButton" class="w-full gradient-bg text-white py-3 rounded-xl font-semibold hover:shadow-lg transition transform hover:-translate-y-0.5 flex items-center justify-center space-x-2">
                        <i class="fas fa-sign-in-alt"></i>
                        <span>Masuk ke Dashboard</span>
                    </button>
                </form>
                
                <!-- Alert Messages -->
                <?php if (isset($_GET['error'])): ?>
                <div class="mt-4 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-xl flex items-center space-x-3 animate-pulse">
                    <i class="fas fa-exclamation-circle text-red-500"></i>
                    <div>
                        <strong class="block">Login Gagal!</strong>
                        <span class="text-sm">Username atau password yang Anda masukkan salah.</span>
                    </div>
                </div>
                <?php endif; ?>

                <?php if (isset($_GET['success']) && $_GET['success'] == 'logout'): ?>
                <div class="mt-4 bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-xl flex items-center space-x-3">
                    <i class="fas fa-check-circle text-green-500"></i>
                    <div>
                        <strong class="block">Berhasil Logout!</strong>
                        <span class="text-sm">Anda telah keluar dari sistem.</span>
                    </div>
                </div>
                <?php endif; ?>

                <?php if (isset($_GET['timeout'])): ?>
                <div class="mt-4 bg-yellow-50 border border-yellow-200 text-yellow-700 px-4 py-3 rounded-xl flex items-center space-x-3">
                    <i class="fas fa-clock text-yellow-500"></i>
                    <div>
                        <strong class="block">Sesi Berakhir!</strong>
                        <span class="text-sm">Sesi Anda telah berakhir. Silakan login kembali.</span>
                    </div>
                </div>
                <?php endif; ?>
                
                <!-- Back to Home Link -->
                <div class="mt-6 text-center">
                    <a href="../index.php" class="text-purple-600 hover:text-purple-800 font-medium transition inline-flex items-center space-x-2">
                        <i class="fas fa-arrow-left"></i>
                        <span>Kembali ke Halaman Depan</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Forgot Password Modal -->
    <div id="forgotPasswordModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm hidden items-center justify-center z-50" onclick="closeModal(event)">
        <div class="bg-white rounded-2xl max-w-md w-full mx-4 transform transition-all" onclick="event.stopPropagation()">
            <div class="gradient-bg text-white p-6 rounded-t-2xl">
                <div class="flex justify-between items-center">
                    <h5 class="text-xl font-semibold flex items-center space-x-2">
                        <i class="fas fa-key"></i>
                        <span>Lupa Password</span>
                    </h5>
                    <button onclick="closeModal()" class="text-white/80 hover:text-white transition">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>
            </div>
            <div class="p-6">
                <p class="text-gray-600 mb-6">
                    Untuk mereset password Anda, silakan hubungi admin sekolah dengan informasi berikut:
                </p>
                
                <div class="space-y-3 mb-6">
                    <div class="flex items-center space-x-3 bg-purple-50 p-3 rounded-xl">
                        <div class="bg-purple-100 p-2 rounded-lg">
                            <i class="fas fa-user text-purple-600"></i>
                        </div>
                        <span class="text-gray-700">Nama lengkap</span>
                    </div>
                    <div class="flex items-center space-x-3 bg-purple-50 p-3 rounded-xl">
                        <div class="bg-purple-100 p-2 rounded-lg">
                            <i class="fas fa-id-card text-purple-600"></i>
                        </div>
                        <span class="text-gray-700">Username</span>
                    </div>
                    <div class="flex items-center space-x-3 bg-purple-50 p-3 rounded-xl">
                        <div class="bg-purple-100 p-2 rounded-lg">
                            <i class="fas fa-tag text-purple-600"></i>
                        </div>
                        <span class="text-gray-700">Role (Admin/Guru BK/Wali Kelas/Siswa)</span>
                    </div>
                </div>

                <div class="gradient-bg-light p-6 rounded-xl text-center">
                    <i class="fas fa-envelope text-3xl text-purple-600 mb-2"></i>
                    <h6 class="font-semibold text-gray-800 mb-1">Email Admin</h6>
                    <p class="text-purple-600 font-medium">admin@bkcare.sch.id</p>
                </div>
            </div>
            <div class="border-t border-gray-200 p-4 flex justify-end">
                <button onclick="closeModal()" class="bg-gray-100 text-gray-700 px-6 py-2 rounded-xl hover:bg-gray-200 transition font-medium">
                    Tutup
                </button>
            </div>
        </div>
    </div>

    <script>
        // Modal functionality
        const modal = document.getElementById('forgotPasswordModal');

        function showForgotPasswordModal() {
            modal.classList.remove('hidden');
            modal.classList.add('flex');
            document.body.style.overflow = 'hidden';
        }

        function closeModal(event) {
            if (event) {
                modal.classList.add('hidden');
                modal.classList.remove('flex');
                document.body.style.overflow = 'auto';
            } else {
                modal.classList.add('hidden');
                modal.classList.remove('flex');
                document.body.style.overflow = 'auto';
            }
        }

        // Close modal with Escape key
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape' && !modal.classList.contains('hidden')) {
                closeModal();
            }
        });

        // Loading state pada form submit
        document.getElementById('loginForm').addEventListener('submit', function(e) {
            const button = document.getElementById('loginButton');
            button.classList.add('opacity-75', 'cursor-wait');
            button.querySelector('span').textContent = 'Memproses...';
            button.querySelector('i').className = 'fas fa-spinner fa-spin';
        });

        // Auto hide alerts after 5 seconds
        setTimeout(function() {
            const alerts = document.querySelectorAll('.bg-red-50, .bg-green-50, .bg-yellow-50');
            alerts.forEach(function(alert) {
                alert.style.transition = 'opacity 0.5s ease';
                alert.style.opacity = '0';
                setTimeout(function() {
                    if (alert.parentNode) {
                        alert.remove();
                    }
                }, 500);
            });
        }, 5000);

        // Input focus effects
        const inputs = document.querySelectorAll('input[type="text"], input[type="password"]');
        inputs.forEach(input => {
            input.addEventListener('focus', function() {
                this.parentElement.querySelector('i').style.color = '#667eea';
            });
            input.addEventListener('blur', function() {
                if (!this.value) {
                    this.parentElement.querySelector('i').style.color = '#9ca3af';
                }
            });
        });

        // Prevent form resubmission on page refresh
        if (window.history.replaceState) {
            window.history.replaceState(null, null, window.location.href);
        }
    </script>
</body>
</html>