<?php
session_start();
require_once('../config/db.php');

if (!isset($_SESSION['student_id'])) {
    header('Location: login.php');
    exit;
}

$student_id = $_SESSION['student_id'];

// تسجيل الخروج
if (isset($_GET['logout'])) {
    session_destroy();
    header('Location: login.php');
    exit;
}

// بيانات الطالب
$stmt = $conn->prepare("SELECT * FROM students WHERE id = ?");
$stmt->execute([$student_id]);
$student = $stmt->fetch(PDO::FETCH_ASSOC);

// الإعلانات المرئية
$stmt = $conn->prepare("SELECT * FROM announcements WHERE visible = 1 ORDER BY created_at DESC");
$stmt->execute();
$announcements = $stmt->fetchAll(PDO::FETCH_ASSOC);

// الكورسات المسجلة
$stmt = $conn->prepare("
    SELECT e.id as enrollment_id, c.course_name, c.price, e.enrollment_date, e.attendance_type
    FROM enrollments e
    JOIN courses c ON c.id = e.course_id
    WHERE e.student_id = ?
    ORDER BY e.enrollment_date ASC
");
$stmt->execute([$student_id]);
$enrollments = $stmt->fetchAll(PDO::FETCH_ASSOC);

// الدفعات
$stmt = $conn->prepare("SELECT amount_paid, discount, payment_date, payment_method, notes FROM payments WHERE student_id = ? ORDER BY payment_date ASC");
$stmt->execute([$student_id]);
$payments = $stmt->fetchAll(PDO::FETCH_ASSOC);

// حساب المبالغ
$total_paid_all = !empty($payments) ? array_sum(array_column($payments, 'amount_paid')) : 0;
$total_discount_all = !empty($payments) ? array_sum(array_column($payments, 'discount')) : 0;
$total_courses = !empty($enrollments) ? array_sum(array_column($enrollments, 'price')) : 0;
$remaining_all = $total_courses - ($total_paid_all + $total_discount_all);

// إشعار الدفع
$notification = "";
$notificationType = "";
if ($total_courses == 0) {
    $notification = "لم يتم تسجيل أي كورسات بعد.";
    $notificationType = 'info';
} elseif ($remaining_all > 0) {
    $notification = "لديك مبلغ متبقي: " . number_format($remaining_all, 2) . " د.أ. يرجى دفعه في أقرب وقت.";
    $notificationType = 'warning';
} else {
    $notification = "لقد قمت بدفع جميع المبالغ. شكراً لك!";
    $notificationType = 'success';
}
?>
<!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">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

    <style>
        :root {
            --gold: #c5a059;
            --dark: #1a1a1a;
            --beige: #f4f1ea;
        }

        body { 
            font-family: 'Cairo', sans-serif; 
            background: url('../assets/pngegg.png') repeat;
            background-size: 400px;
            background-color: var(--beige);
            background-attachment: fixed;
            word-wrap: break-word;
        }

        .bg-overlay {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(244, 241, 234, 0.92);
            z-index: -1;
        }

        .glass-header {
            background: rgba(26, 26, 26, 0.98);
            border-bottom: 3px solid var(--gold);
        }

        .stat-card {
            background: white;
            border-radius: 24px;
            border: 1px solid rgba(197, 160, 89, 0.2);
            transition: all 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.05);
            border-color: var(--gold);
        }

        .hero-section {
            background: var(--dark);
            border-radius: 20px;
            border-right: 6px solid var(--gold);
            position: relative;
            overflow: hidden;
        }

        @media (min-width: 768px) {
            .hero-section { border-radius: 30px; border-right-width: 8px; }
        }

        .hero-section::after {
            content: "";
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: url('../assets/pngegg.png') repeat;
            opacity: 0.05;
            pointer-events: none;
        }

        .btn-gold-outline {
            border: 2px solid var(--gold);
            color: var(--gold);
            transition: all 0.3s;
        }

        .btn-gold-outline:hover {
            background: var(--gold);
            color: white;
        }

        /* تحسين الجداول للموبايل */
        @media (max-width: 768px) {
            .custom-table thead { display: none; }
            .custom-table tr { 
                display: block; 
                margin-bottom: 1rem; 
                padding: 1rem;
                border-radius: 15px;
                box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            }
            .custom-table td { 
                display: flex; 
                justify-content: space-between; 
                align-items: center; 
                padding: 0.5rem 0 !important;
                border: none !important;
                text-align: left;
            }
            .custom-table td::before {
                content: attr(data-label);
                font-weight: 900;
                color: var(--dark);
                margin-left: 1rem;
            }
        }

        .custom-table thead {
            background: var(--dark);
            color: var(--gold);
        }

        .custom-table tr {
            background: white;
            border-bottom: 8px solid var(--beige);
        }

        .announcement-card {
            border-right: 4px solid var(--gold);
            background: white;
        }
        
        /* تحسين النجوم في اللمس */
        .star {
            touch-action: manipulation;
            padding: 2px;
        }
    </style>
</head>
<body class="flex flex-col min-h-screen">

    <div class="bg-overlay"></div>

    <header class="glass-header sticky top-0 z-40 w-full shadow-2xl">
        <div class="max-w-7xl mx-auto px-4">
            <div class="flex justify-between items-center h-20">
                <div class="flex items-center gap-3 md:gap-4">
                    <div class="bg-white p-1 rounded-lg md:rounded-xl shadow-inner flex items-center justify-center">
                        <img src="../assets/cropped-logo.png" alt="Logo" class="h-10 md:h-12 w-auto object-contain">
                    </div>
                    
                    <div>
                        <span class="block text-lg md:text-xl font-black text-white leading-none">معهد لغة العرب</span>
                        <span class="text-[8px] md:text-[10px] text-[#c5a059] font-bold tracking-[0.2em] md:tracking-[0.3em] uppercase">Student Portal</span>
                    </div>
                </div>
                
                <div class="flex items-center gap-2 md:gap-4">
                    <div class="text-left ml-2 md:ml-4 hidden sm:block">
                        <span class="block text-xs md:text-sm font-black text-white"><?= htmlspecialchars($student['full_name']) ?></span>
                        <span class="text-[9px] bg-[#c5a059]/20 text-[#c5a059] px-2 py-0.5 rounded font-bold">طالب متميز</span>
                    </div>
                    <a href="?logout=1" class="btn-gold-outline px-3 md:px-5 py-1.5 md:py-2 rounded-lg md:rounded-xl font-bold text-xs md:text-sm whitespace-nowrap">
                        <i class="fas fa-sign-out-alt ml-1 md:ml-2"></i> خروج
                    </a>
                </div>
            </div>
        </div>
    </header>

    <main class="flex-grow container max-w-7xl mx-auto px-4 py-6 md:py-10 space-y-8 md:space-y-10">
        
        <section class="hero-section p-6 md:p-12 text-white shadow-xl">
            <div class="relative z-10 flex flex-col md:flex-row justify-between items-center gap-6">
                <div class="text-center md:text-right">
                    <h1 class="text-2xl md:text-5xl font-black mb-3 md:mb-4">أهلاً بك، سيد <?= explode(' ', $student['full_name'])[0] ?> ✨</h1>
                    <p class="text-gray-400 text-sm md:text-lg max-w-2xl leading-relaxed">في معهد لغة العرب، نسعد بمتابعة تطورك الأكاديمي. يمكنك هنا الإطلاع على مسيرتك التعليمية وإدارة شؤونك المالية بكل سهولة.</p>
                </div>
                <div class="bg-white/5 backdrop-blur-xl p-4 md:p-6 rounded-2xl md:rounded-3xl border border-white/10 text-center min-w-[140px] md:min-w-[180px]">
                    <p class="text-[#c5a059] text-[10px] md:text-xs font-black uppercase mb-1 md:mb-2">اليوم</p>
                    <p class="text-lg md:text-2xl font-bold"><?= date('d M, Y') ?></p>
                </div>
            </div>
        </section>

        <?php if($notification): ?>
            <div class="p-4 md:p-5 rounded-xl md:rounded-2xl border-r-4 md:border-r-8 shadow-sm flex items-center gap-3 md:gap-4 <?= ($notificationType=='success' ? 'bg-green-50 border-green-600 text-green-800' : ($notificationType=='warning' ? 'bg-amber-50 border-amber-500 text-amber-800' : 'bg-blue-50 border-blue-600 text-blue-800')) ?>">
                <div class="shrink-0 w-8 h-8 md:w-10 md:h-10 rounded-full bg-white flex items-center justify-center shadow-sm">
                    <i class="fas <?= ($notificationType=='success' ? 'fa-check text-green-600' : 'fa-exclamation text-amber-600') ?> text-xs md:text-base"></i>
                </div>
                <p class="font-bold text-xs md:text-base leading-tight"><?= $notification ?></p>
            </div>
        <?php endif; ?>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
            <div class="stat-card p-5 md:p-6">
                <div class="w-10 h-10 md:w-12 md:h-12 bg-gray-100 text-gray-800 rounded-xl md:rounded-2xl flex items-center justify-center mb-3 md:mb-4">
                    <i class="fas fa-book-open"></i>
                </div>
                <p class="text-gray-400 font-bold text-[10px] md:text-xs uppercase">إجمالي الرسوم</p>
                <h3 class="text-xl md:text-2xl font-black text-gray-800 mt-1"><?= number_format($total_courses, 2) ?> <span class="text-xs md:text-sm font-normal text-gray-400">د.أ</span></h3>
            </div>

            <div class="stat-card p-5 md:p-6">
                <div class="w-10 h-10 md:w-12 md:h-12 bg-green-50 text-green-600 rounded-xl md:rounded-2xl flex items-center justify-center mb-3 md:mb-4">
                    <i class="fas fa-check-double"></i>
                </div>
                <p class="text-gray-400 font-bold text-[10px] md:text-xs uppercase">المبلغ المدفوع</p>
                <h3 class="text-xl md:text-2xl font-black text-green-600 mt-1"><?= number_format($total_paid_all, 2) ?> <span class="text-xs md:text-sm font-normal text-gray-400">د.أ</span></h3>
            </div>

            <div class="stat-card p-5 md:p-6">
                <div class="w-10 h-10 md:w-12 md:h-12 bg-[#c5a059]/10 text-[#c5a059] rounded-xl md:rounded-2xl flex items-center justify-center mb-3 md:mb-4">
                    <i class="fas fa-percentage"></i>
                </div>
                <p class="text-gray-400 font-bold text-[10px] md:text-xs uppercase">الخصومات</p>
                <h3 class="text-xl md:text-2xl font-black text-[#c5a059] mt-1"><?= number_format($total_discount_all, 2) ?> <span class="text-xs md:text-sm font-normal text-gray-400">د.أ</span></h3>
            </div>

            <div class="stat-card p-5 md:p-6 border-red-100 bg-red-50/30">
                <div class="w-10 h-10 md:w-12 md:h-12 bg-red-100 text-red-600 rounded-xl md:rounded-2xl flex items-center justify-center mb-3 md:mb-4">
                    <i class="fas fa-wallet"></i>
                </div>
                <p class="text-gray-400 font-bold text-[10px] md:text-xs uppercase">المبلغ المتبقي</p>
                <h3 class="text-xl md:text-2xl font-black text-red-600 mt-1"><?= number_format($remaining_all, 2) ?> <span class="text-xs md:text-sm font-normal text-gray-400">د.أ</span></h3>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 md:gap-10">
            <div class="lg:col-span-2 space-y-6">
                <div class="flex items-center gap-3 mb-2">
                    <div class="w-2 h-6 md:h-8 bg-[#c5a059] rounded-full"></div>
                    <h2 class="text-xl md:text-2xl font-black text-gray-800">الدورات المسجلة</h2>
                </div>
                <div class="overflow-x-visible">
                    <table class="w-full custom-table border-separate border-spacing-y-2">
                        <thead>
                            <tr class="text-right">
                                <th class="p-4 md:p-5 rounded-r-2xl">الدورة التعليمية</th>
                                <th class="p-4 md:p-5">الرسوم</th>
                                <th class="p-4 md:p-5">النظام</th>
                                <th class="p-4 md:p-5 rounded-l-2xl text-center">التقييم</th>
                            </tr>
                        </thead>
                        <tbody class="font-bold text-gray-700">
                            <?php foreach ($enrollments as $en): 
                                $stmt2 = $conn->prepare("SELECT rating FROM course_ratings WHERE enrollment_id=? AND student_id=?");
                                $stmt2->execute([$en['enrollment_id'], $student_id]);
                                $existingRating = $stmt2->fetchColumn() ?: 0;
                            ?>
                            <tr class="shadow-sm hover:shadow-md transition-all">
                                <td data-label="الدورة" class="p-3 md:p-5 rounded-r-2xl">
                                    <div class="flex items-center gap-3">
                                        <div class="hidden sm:flex w-10 h-10 bg-gray-100 rounded-lg items-center justify-center text-[#c5a059]">
                                            <i class="fas fa-graduation-cap"></i>
                                        </div>
                                        <span class="text-sm md:text-base"><?= htmlspecialchars($en['course_name']) ?></span>
                                    </div>
                                </td>
                                <td data-label="الرسوم" class="p-3 md:p-5 text-gray-900 text-sm md:text-base"><?= number_format($en['price'], 2) ?> د.أ</td>
                                <td data-label="النظام" class="p-3 md:p-5">
                                    <span class="px-2 md:px-3 py-1 bg-beige text-[10px] md:text-xs border border-[#c5a059]/20 rounded-lg">
                                        <?= htmlspecialchars($en['attendance_type']) ?>
                                    </span>
                                </td>
                                <td data-label="التقييم" class="p-3 md:p-5 rounded-l-2xl">
                                    <div class="stars flex justify-center gap-1" data-enrollment="<?= $en['enrollment_id'] ?>">
                                        <?php for($i=1;$i<=5;$i++): ?>
                                            <span class="star cursor-pointer text-lg md:text-xl transition-colors <?= ($existingRating >= $i) ? 'text-[#c5a059]' : 'text-gray-200' ?>" data-value="<?= $i ?>">&#9733;</span>
                                        <?php endfor; ?>
                                    </div>
                                </td>
                            </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="space-y-6">
                <div class="flex items-center gap-3 mb-2">
                    <div class="w-2 h-6 md:h-8 bg-gray-800 rounded-full"></div>
                    <h2 class="text-xl md:text-2xl font-black text-gray-800">أخبار المعهد</h2>
                </div>
                <div class="space-y-4">
                    <?php if(!empty($announcements)): foreach($announcements as $ann): ?>
                        <div class="announcement-card p-5 md:p-6 rounded-2xl shadow-sm hover:shadow-md transition-all group">
                            <h3 class="font-black text-sm md:text-base text-gray-800 mb-2 group-hover:text-[#c5a059] transition-colors"><?= htmlspecialchars($ann['title']) ?></h3>
                            <p class="text-gray-500 text-xs md:text-sm leading-relaxed mb-4"><?= nl2br(htmlspecialchars($ann['message'])) ?></p>
                            <div class="flex justify-between items-center border-t pt-3">
                                <span class="text-[9px] md:text-[10px] font-bold text-gray-400 italic">
                                    <i class="far fa-calendar-alt ml-1"></i> <?= date('d-m-Y', strtotime($ann['created_at'])) ?>
                                </span>
                                <i class="fas fa-bullhorn text-gray-200 text-xs md:text-sm"></i>
                            </div>
                        </div>
                    <?php endforeach; else: ?>
                        <div class="text-center py-10 opacity-30">
                            <i class="fas fa-inbox text-4xl md:text-5xl mb-3"></i>
                            <p class="font-bold text-sm">لا يوجد إعلانات</p>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>

        <section class="space-y-6 pb-12">
            <div class="flex items-center gap-3 mb-2">
                <div class="w-2 h-6 md:h-8 bg-green-600 rounded-full"></div>
                <h2 class="text-xl md:text-2xl font-black text-gray-800">سجل المدفوعات المالية</h2>
            </div>
            
            <div class="overflow-x-visible">
                <table class="w-full custom-table border-separate border-spacing-y-2">
                    <thead>
                        <tr class="text-right">
                            <th class="p-4 md:p-5 rounded-r-2xl">قيمة الدفعة</th>
                            <th class="p-4 md:p-5">الخصم</th>
                            <th class="p-4 md:p-5 text-center">التاريخ</th>
                            <th class="p-4 md:p-5">طريقة الدفع</th>
                            <th class="p-4 md:p-5 rounded-l-2xl">ملاحظات</th>
                        </tr>
                    </thead>
                    <tbody class="font-bold text-gray-700">
                        <?php foreach ($payments as $p): ?>
                        <tr class="shadow-sm hover:shadow-md transition-all">
                            <td data-label="المبلغ" class="p-3 md:p-5 rounded-r-2xl">
                                <div class="flex items-center gap-2">
                                    <div class="hidden sm:flex w-8 h-8 md:w-10 md:h-10 bg-green-50 rounded-lg items-center justify-center text-green-600">
                                        <i class="fas fa-money-bill-wave text-xs md:text-base"></i>
                                    </div>
                                    <span class="text-sm md:text-base text-green-600"><?= number_format($p['amount_paid'], 2) ?> د.أ</span>
                                </div>
                            </td>
                            <td data-label="الخصم" class="p-3 md:p-5">
                               <div class="flex items-center gap-2 text-red-600 text-sm md:text-base">
    <i class="fas fa-tag text-[10px] opacity-70"></i>
    
    <span class="font-bold tracking-tight">
        <?= number_format($p['discount'], 2) ?> 
        <small class="text-[10px] md:text-xs">د.أ</small>
    </span>
</div>
                            </td>
                            <td data-label="التاريخ" class="p-3 md:p-5 text-center">
                                <div class="inline-flex items-center gap-2 bg-gray-50 px-2 md:px-3 py-1 rounded-full text-[10px] md:text-xs text-gray-900">
                                    <i class="far fa-calendar-alt"></i>
                                    <?= htmlspecialchars($p['payment_date']) ?>
                                </div>
                            </td>
                            <td data-label="طريقة الدفع" class="p-3 md:p-5">
                                <span class="px-2 md:px-4 py-1 md:py-1.5 bg-beige text-[#c5a059] border border-[#c5a059]/20 rounded-lg text-[10px] md:text-[11px]">
                                    <i class="fas fa-credit-card ml-1"></i>
                                    <?= htmlspecialchars($p['payment_method']) ?>
                                </span>
                            </td>
                          <td data-label="ملاحظات" class="p-3 md:p-5 rounded-l-2xl text-gray-900 text-[10px] md:text-xs font-normal">
    <div class="flex items-start gap-2">
        <i class="fas fa-sticky-note mt-1 opacity-40 text-gray-500"></i>
        <span class="leading-relaxed font-medium">
            <?= htmlspecialchars($p['notes']) ?: 'لا توجد ملاحظات' ?>
        </span>
    </div>
</td>
                        </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </section>
    </main>

    <footer class="bg-[#1a1a1a] text-white border-t-4 border-[#c5a059] mt-auto">
        <div class="max-w-7xl mx-auto px-4 md:px-6 py-8 md:py-12">
            <div class="flex flex-col md:flex-row justify-between items-center gap-8">
                
                <div class="flex flex-col items-center md:items-start text-center md:text-right">
                    <div class="bg-white p-2 rounded-xl shadow-lg mb-4 inline-block">
                        <img src="../assets/cropped-logo.png" alt="Logo" class="h-12 md:h-16 w-auto object-contain">
                    </div>
                    <p class="text-gray-400 text-xs md:text-sm max-w-xs leading-relaxed">بوابتك لتعلم اللغة العربية لغير الناطقين بها بأعلى معايير الجودة الأكاديمية.</p>
                </div>
                
                <div class="flex flex-col items-center gap-3 md:gap-4">
                    <h4 class="font-bold text-gray-400 uppercase text-[10px] md:text-xs tracking-widest">تواصل معنا</h4>
                    <div class="flex gap-4">
                        <a href="#" class="w-10 h-10 md:w-11 md:h-11 bg-white/5 text-white rounded-xl flex items-center justify-center hover:bg-[#c5a059] transition-all"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" class="w-10 h-10 md:w-11 md:h-11 bg-white/5 text-white rounded-xl flex items-center justify-center hover:bg-[#c5a059] transition-all"><i class="fab fa-instagram"></i></a>
                        <a href="https://wa.me/962796785808" target="_blank" class="w-10 h-10 md:w-11 md:h-11 bg-white/5 text-white rounded-xl flex items-center justify-center hover:bg-green-600 transition-all">
                            <i class="fab fa-whatsapp text-xl md:text-2xl"></i>
                        </a>
                    </div>
                </div>

                <div class="text-center md:text-left">
                    <p class="text-gray-500 text-[10px] md:text-xs font-bold uppercase tracking-widest">&copy; <?= date('Y') ?> معهد لغة العرب</p>
                    <p class="text-[#c5a059] text-[9px] md:text-[10px] font-black uppercase tracking-[0.3em] mt-1">Lughat Al Arab Institute</p>
                </div>
            </div>
        </div>
    </footer>

    <script>
    document.addEventListener('DOMContentLoaded', () => {
        document.querySelectorAll('.stars').forEach(container => {
            const stars = container.querySelectorAll('.star');
            const enrollmentId = container.dataset.enrollment;

            stars.forEach(star => {
                star.addEventListener('click', () => {
                    const clickedValue = parseInt(star.getAttribute('data-value'));
                    
                    stars.forEach(s => {
                        const starValue = parseInt(s.getAttribute('data-value'));
                        if(starValue <= clickedValue) {
                            s.classList.remove('text-gray-200');
                            s.classList.add('text-[#c5a059]');
                        } else {
                            s.classList.remove('text-[#c5a059]');
                            s.classList.add('text-gray-200');
                        }
                    });

                    const formData = new FormData();
                    formData.append('enrollment_id', enrollmentId);
                    formData.append('rating', clickedValue);

                    fetch('save_rating.php', { method: 'POST', body: formData })
                    .then(response => {
                        if(response.ok) {
                            showToast(`تم تقييم الدورة بـ ${clickedValue} نجوم`);
                        } else {
                            showToast('فشل حفظ التقييم', 'error');
                        }
                    })
                    .catch(() => showToast('حدث خطأ في الاتصال', 'error'));
                });
            });
        });
    });

    function showToast(message, type = 'success') {
        const toast = document.createElement('div');
        const bgColor = type === 'success' ? 'bg-[#1a1a1a]' : 'bg-red-900';
        toast.className = `fixed bottom-5 md:bottom-10 left-1/2 -translate-x-1/2 md:left-auto md:right-10 md:translate-x-0 ${bgColor} text-[#c5a059] border-l-4 border-[#c5a059] px-6 md:px-8 py-3 md:py-4 rounded-xl md:rounded-2xl shadow-2xl z-50 font-black text-xs md:text-sm whitespace-nowrap`;
        toast.textContent = message;
        document.body.appendChild(toast);
        setTimeout(() => {
            toast.style.opacity = '0';
            toast.style.transition = 'opacity 0.5s';
            setTimeout(() => toast.remove(), 500);
        }, 3000);
    }
    </script>
</body>
</html>