<?php
session_start();
require_once('../config/db.php');

$error = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $username = trim($_POST['username'] ?? '');
    $password = trim($_POST['password'] ?? '');

    if ($username === '' || $password === '') {
        $error = 'الرجاء إدخال اسم المستخدم وكلمة المرور.';
    } else {
        try {
            $stmt = $conn->prepare("SELECT * FROM students WHERE username = ? LIMIT 1");
            $stmt->execute([$username]);
            $student = $stmt->fetch(PDO::FETCH_ASSOC);

            if ($student && password_verify($password, $student['password'])) {
                $_SESSION['student_id'] = $student['id'];
                $_SESSION['student_name'] = $student['full_name'];
                header('Location: dashboard.php');
                exit;
            } else {
                $error = 'اسم المستخدم أو كلمة المرور غير صحيحة.';
            }
        } catch (PDOException $e) {
            $error = 'خطأ في قاعدة البيانات: ' . $e->getMessage();
        }
    }
}
?>

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>بوابة الطالب | أكاديمية معاً نستطيع</title>
	
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;900&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Cairo', sans-serif; }
        .glass-effect {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
        }
        .bg-gradient {
            background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
        }
    </style>
</head>

<body class="bg-gradient min-h-screen flex items-center justify-center p-6">

<div class="max-w-md w-full">
    <div class="text-center mb-8">
        <div class="inline-flex items-center justify-center w-20 h-20 bg-white rounded-full shadow-xl mb-4 p-2">
             <img src="../assets/logo.jpg" alt="Logo" class="rounded-full overflow-hidden" onerror="this.src='https://ui-avatars.com/api/?name=Tornado&background=0D8ABC&color=fff'">
        </div>
        <h1 class="text-3xl font-black text-white tracking-tight">بوابة الطالب</h1>
        <p class="text-blue-100 mt-2">مرحباً بك في أكاديمة معاً نستطيع</p>
    </div>

    <div class="glass-effect shadow-2xl rounded-3xl p-8 border border-white/20 relative overflow-hidden">
        
        <?php if ($error): ?>
            <div class="mb-6 p-4 bg-red-50 border-r-4 border-red-500 text-red-700 rounded-lg text-sm flex items-center animate-pulse">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                </svg>
                <?= htmlspecialchars($error) ?>
            </div>
        <?php endif; ?>

        <form method="POST" class="space-y-5">
            <div>
                <label class="block mb-2 text-sm font-bold text-gray-700">اسم المستخدم</label>
                <div class="relative">
                    <span class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                        </svg>
                    </span>
                    <input type="text" name="username" required
                           class="w-full pr-10 pl-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-all"
                           placeholder="أدخل اسم المستخدم"
                           value="<?= htmlspecialchars($_POST['username'] ?? '') ?>">
                </div>
            </div>

            <div>
                <label class="block mb-2 text-sm font-bold text-gray-700">كلمة المرور</label>
                <div class="relative">
                    <span class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <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" />
                        </svg>
                    </span>
                    <input type="password" name="password" required
                           class="w-full pr-10 pl-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-all"
                           placeholder="••••••••">
                </div>
            </div>

            <div class="flex items-center justify-between text-sm">
                <label class="flex items-center text-gray-600">
                    <input type="checkbox" class="ml-2 rounded text-blue-600 focus:ring-blue-500">
                    تذكرني
                </label>
            </div>

            <button type="submit"
                    class="w-full bg-blue-600 hover:bg-blue-800 text-white font-black py-4 rounded-xl shadow-lg shadow-blue-200 transition-all transform hover:-translate-y-1 active:scale-95">
                دخول الطالب
            </button>
        </form>

        <div class="mt-8 pt-6 border-t border-gray-100 text-center">
            <p class="text-gray-500 text-sm">تواجه مشكلة في الدخول؟</p>
            <a href="https://wa.me/962796785808" class="text-green-600 font-bold hover:text-green-700 flex items-center justify-center mt-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="currentColor" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.588-5.946 0-6.556 5.332-11.887 11.887-11.887 3.18 0 6.171 1.24 8.426 3.497 2.259 2.256 3.5 5.242 3.5 8.424 0 6.556-5.331 11.888-11.888 11.888-2.003 0-3.963-.505-5.7-1.467l-6.324 1.654zm6.757-4.032c1.504.893 3.129 1.364 4.799 1.364 4.996 0 9.06-4.064 9.06-9.06 0-2.42-1.012-4.691-2.822-6.5-1.801-1.811-4.225-2.822-6.643-2.822-4.997 0-9.06 4.063-9.06 9.06 0 1.938.611 3.824 1.766 5.4l-.943 3.442 3.543-.928z"/></svg>
                تواصل مع الدعم الفني
            </a>
        </div>
    </div>
    
    <p class="text-center text-blue-100 text-xs mt-8">
        &copy; <?= date('Y') ?> أكاديمية معاً نستطيع. جميع الحقوق محفوظة.
    </p>
</div>

</body>
</html>