<?php
session_start();
require_once('../config/db.php');

/**
 * 1. منطق تعدد اللغات
 */
$lang = $_GET['lang'] ?? $_SESSION['lang'] ?? 'ar';
$_SESSION['lang'] = $lang;

$translations = [
    'ar' => [
        'title' => 'تسجيل الدخول | معهد لغة العرب',
        'welcome' => 'بوابة الطالب',
        'sub_welcome' => 'مرحباً بك في معهد لغة العرب',
        'username_label' => 'اسم المستخدم',
        'username_placeholder' => 'أدخل اسم المستخدم',
        'password_label' => 'كلمة المرور',
        'remember' => 'تذكر بيانات الدخول',
        'login_btn' => 'تـسجيل الـدخول',
        'help' => 'للحصول على مساعدة أو استفسار',
        'whatsapp' => 'تواصل عبر واتساب',
        'rights' => 'جميع الحقوق محفوظة.',
        'dir' => 'rtl'
    ],
    'en' => [
        'title' => 'Login | Lughat AlArab Institute',
        'welcome' => 'Student Portal',
        'sub_welcome' => 'Welcome to Lughat AlArab Institute',
        'username_label' => 'Username',
        'username_placeholder' => 'Enter username',
        'password_label' => 'Password',
        'remember' => 'Remember me',
        'login_btn' => 'Login Now',
        'help' => 'For help or inquiries',
        'whatsapp' => 'Contact via WhatsApp',
        'rights' => 'All rights reserved.',
        'dir' => 'ltr'
    ],
    'tr' => [
        'title' => 'Giriş Yap | Lughat AlArab Institute',
        'welcome' => 'Öğrenci Portalı',
        'sub_welcome' => 'Lughat AlArab Institute\'ne Hoş Geldiniz',
        'username_label' => 'Kullanıcı Adı',
        'username_placeholder' => 'Kullanıcı adınız',
        'password_label' => 'Şifre',
        'remember' => 'Beni hatırla',
        'login_btn' => 'Giriş Yap',
        'help' => 'Yardım veya sorularınız için',
        'whatsapp' => 'WhatsApp ile iletişim',
        'rights' => 'Tüm hakları saklıdır.',
        'dir' => 'ltr'
    ]
];

$t = $translations[$lang];
$error = '';

/**
 * 2. معالجة بيانات تسجيل الدخول
 */
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $username = trim($_POST['username'] ?? '');
    $password = trim($_POST['password'] ?? '');

    if ($username === '' || $password === '') {
        $error = ($lang == 'ar') ? 'الرجاء إدخال اسم المستخدم وكلمة المرور.' : (($lang == 'tr') ? 'Lütfen kullanıcı adınızı ve şifrenizi giriniz.' : 'Please enter credentials.');
    } 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'];
                // ملاحظة: يتم تحديث اللغة في الجلسة إذا تم إرسالها في الفورم
                if (isset($_POST['language'])) {
                    $_SESSION['lang'] = $_POST['language'];
                }
                header('Location: dashboard.php');
                exit;
            } else {
                $error = ($lang == 'ar') ? 'بيانات الدخول غير صحيحة.' : (($lang == 'tr') ? 'Giriş bilgileri yanlış.' : 'Incorrect credentials.');
            }
        } catch (PDOException $e) {
            $error = 'Error: ' . $e->getMessage();
        }
    }
}
?>
<!DOCTYPE html>
<html lang="<?= $lang ?>" dir="<?= $t['dir'] ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title><?= $t['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; 
    margin: 0; 
    padding: 0; 
    min-height: 100vh;
    display: flex; 
    align-items: center; 
    justify-content: center;
    background-color: #f4f1ea; 
    
    /* تقليل الشفافية لجعل الصورة واضحة أكثر */
    /* قمنا بتغيير 0.85 إلى 0.40 لجعل الصورة تبرز بقوة */
    background-image: linear-gradient(rgba(244, 241, 234, 0.40), rgba(244, 241, 234, 0.40)), url('../assets/pngegg2.jpg');
    
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; 
    background-attachment: fixed;
    
    overflow-x: hidden;
}
        .overlay-bg {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(244, 241, 234, 0.8); z-index: -1;
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(197, 160, 89, 0.2); 
            border-radius: 24px;
            box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.1);
        }

        .input-institute {
            background: #fdfdfb;
            border: 1.5px solid #e8e4db;
            font-size: 16px !important; 
            transition: all 0.3s ease;
        }

        .input-institute:focus {
            border-color: #c5a059;
            box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.1);
            outline: none;
        }

        .btn-gold {
            background: #1a1a1a; 
            color: #c5a059; 
            touch-action: manipulation;
        }

        .btn-gold:active {
            transform: scale(0.98);
        }

        /* تنسيقات قائمة اللغات */
        .lang-dropdown {
            position: absolute; top: 15px; right: 15px; z-index: 1000;
        }
        
        .lang-btn {
            background: white; padding: 6px 12px; border-radius: 10px;
            border: 1px solid #e8e4db; display: flex; align-items: center;
            gap: 6px; font-weight: bold; font-size: 13px; cursor: pointer;
        }

        .lang-menu {
            display: none; position: absolute; top: 40px; right: 0;
            background: white; border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.15);
            border: 1px solid #e8e4db; width: 130px;
        }

        .lang-dropdown.open .lang-menu { display: block; }

        .lang-item {
            padding: 12px 15px; display: flex; align-items: center;
            gap: 10px; text-decoration: none; color: #333; font-size: 14px;
        }

        .flag { width: 20px; border-radius: 2px; }

        @media (max-width: 400px) {
            .glass-card { padding: 1.5rem !important; }
            .logo-img { height: 100px !important; }
        }
    </style>
</head>
<body>

<div class="overlay-bg"></div>

<div class="lang-dropdown" id="langBox">
    <div class="lang-btn" onclick="toggleLang()">
        <?php 
            if($lang == 'ar') echo '<img src="https://flagcdn.com/w20/jo.png" class="flag"> العربية';
            elseif($lang == 'en') echo '<img src="https://flagcdn.com/w20/us.png" class="flag"> EN';
            else echo '<img src="https://flagcdn.com/w20/tr.png" class="flag"> TR';
        ?>
        <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
        </svg>
    </div>
    <div class="lang-menu">
        <a href="?lang=ar" class="lang-item"><img src="https://flagcdn.com/w20/jo.png" class="flag"> العربية</a>
        <a href="?lang=en" class="lang-item"><img src="https://flagcdn.com/w20/us.png" class="flag"> English</a>
        <a href="?lang=tr" class="lang-item"><img src="https://flagcdn.com/w20/tr.png" class="flag"> Türkçe</a>
    </div>
</div>

<div class="max-w-[92%] sm:max-w-md w-full px-4 relative py-10">
    <div class="text-center mb-6">
        <img src="../assets/logo.png" alt="شعار المعهد" class="logo-img h-32 md:h-40 drop-shadow-xl mx-auto">
    </div>

    <div class="glass-card p-6 md:p-10 relative overflow-hidden">
        <div class="text-center mb-6">
            <h1 class="text-2xl md:text-3xl font-black text-gray-800"><?= $t['welcome'] ?></h1>
            <p class="text-[#c5a059] font-bold text-[11px] md:text-sm mt-1 uppercase tracking-wider"><?= $t['sub_welcome'] ?></p>
        </div>

        <?php if ($error): ?>
            <div class="mb-5 p-3 bg-red-50 border-<?= $t['dir'] == 'rtl' ? 'r' : 'l' ?>-4 border-red-500 text-red-700 rounded-lg text-xs flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 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-1.5 text-[11px] font-black text-gray-500 uppercase"><?= $t['username_label'] ?></label>
                <div class="relative">
                    <span class="absolute inset-y-0 <?= $t['dir'] == 'rtl' ? 'right-4' : 'left-4' ?> flex items-center text-gray-300">
                        <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path 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="input-institute w-full <?= $t['dir'] == 'rtl' ? 'pr-11 pl-4' : 'pl-11 pr-4' ?> py-3.5 rounded-xl font-bold text-gray-700"
                           placeholder="<?= $t['username_placeholder'] ?>"
                           value="<?= htmlspecialchars($_POST['username'] ?? '') ?>">
                </div>
            </div>

            <div>
                <label class="block mb-1.5 text-[11px] font-black text-gray-500 uppercase"><?= $t['password_label'] ?></label>
                <div class="relative">
                    <span class="absolute inset-y-0 <?= $t['dir'] == 'rtl' ? 'right-4' : 'left-4' ?> flex items-center text-gray-300">
                        <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path 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="input-institute w-full <?= $t['dir'] == 'rtl' ? 'pr-11 pl-4' : 'pl-11 pr-4' ?> py-3.5 rounded-xl text-gray-700"
                           placeholder="••••••••">
                </div>
            </div>

            <div class="flex items-center text-xs">
                <label class="flex items-center text-gray-600 cursor-pointer">
                    <input type="checkbox" name="remember" class="<?= $t['dir'] == 'rtl' ? 'ml-2' : 'mr-2' ?> rounded accent-[#c5a059] h-4 w-4">
                    <span class="font-medium"><?= $t['remember'] ?></span>
                </label>
            </div>

            <button type="submit"
                    class="btn-gold w-full py-4 rounded-xl font-black text-base shadow-lg flex items-center justify-center gap-2">
                <span><?= $t['login_btn'] ?></span>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" class="<?= $t['dir'] == 'ltr' ? 'rotate-180' : '' ?>"><path d="M15 19l-7-7 7-7"/></svg>
            </button>
        </form>

        <div class="mt-8 pt-5 border-t border-gray-100 text-center">
            <p class="text-gray-400 text-[10px] mb-3 font-bold uppercase tracking-widest"><?= $t['help'] ?></p>
            <a href="https://wa.me/962775400430" 
               class="inline-flex items-center justify-center bg-green-50 hover:bg-green-100 text-green-700 font-black py-3 px-5 rounded-xl transition-all border border-green-200 w-full sm:w-auto">
                <span class="text-[13px] flex items-center">
                    <?= $t['whatsapp'] ?>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 <?= $t['dir'] == 'rtl' ? 'mr-2' : 'ml-2' ?>" 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>
                </span>
            </a>
        </div>
    </div>
  
    <div class="mt-8 text-center px-4">
        <p class="text-[13px] text-gray-400 font-bold">
            &copy; <?= date('Y') ?> <?= ($lang == 'ar' ? 'معهد لغة العرب' : 'Lughat AlArab Institute') ?>. <?= $t['rights'] ?>
        </p>
        <p class="text-[9px] md:text-xs text-[#c5a059] font-black uppercase tracking-[0.2em] md:tracking-[0.3em] mt-2 whitespace-nowrap">
            Lughat AlArab Institute
        </p>
    </div>
</div>

<script>
    function toggleLang() {
        document.getElementById('langBox').classList.toggle('open');
    }
    // إغلاق القائمة عند النقر خارجها
    window.onclick = function(e) {
        if (!e.target.closest('#langBox')) {
            document.getElementById('langBox').classList.remove('open');
        }
    }
</script>

</body>
</html>