<?php
session_start();

// ✅ استدعاء الهيدر لتعريف نظام الترجمة والاتجاهات
include('../includes/header.php');

// التأكد من الصلاحيات (Admin)
if (!isset($_SESSION['user']) || $_SESSION['user']['role'] !== 'admin') {
    echo '
    <!DOCTYPE html>
    <html lang="'.$current_lang.'" dir="'.$dir.'">
    <head>
        <meta charset="UTF-8">
        <title>'.__('unauthorized_title').'</title>
        <script src="https://cdn.tailwindcss.com"></script>
        <link href="https://fonts.googleapis.com/css2?family=Cairo&display=swap" rel="stylesheet">
    </head>
    <body class="flex items-center justify-center min-h-screen bg-gray-100 font-[Cairo]">
        <div class="bg-white p-8 rounded-lg shadow-lg max-w-md text-center border border-red-300">
            <h2 class="text-2xl font-bold text-red-600 mb-2">'.__('unauthorized_access').'</h2>
            <p class="text-gray-600 mb-6">'.__('admin_required_msg').'</p>
            <a href="../dashboard.php" class="inline-block bg-blue-600 text-white px-5 py-2 rounded-md hover:bg-blue-700 transition">'.__('back_to_dashboard').'</a>
        </div>
    </body>
    </html>';
    exit;
}

require_once('../config/db.php');

// جلب الكورسات مع عدد الطلاب لكل كورس
$stmt = $conn->query("
    SELECT 
        c.id,
        c.course_name,
        c.price,
        c.duration_weeks,
        c.created_at,
        (SELECT COUNT(*) FROM enrollments cs WHERE cs.course_id = c.id) AS student_count
    FROM courses c
    ORDER BY c.created_at DESC
");
$courses = $stmt->fetchAll();

// حساب إجمالي عدد الكورسات
$total_courses_count = count($courses);
?>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap" rel="stylesheet">

<style>
    body { font-family: 'Cairo', sans-serif; }
    .table-header { background-color: #4f46e5; color: white; }
    .table-body tr { transition: background-color 0.2s ease; }
    .table-body tr:hover { background-color: #eef2ff; }
    .action-button { display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
</style>

<?php include('../includes/navbar.php'); ?>

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 pb-16" dir="<?= $dir ?>">
    <div class="max-w-7xl mx-auto py-10 px-4 sm:px-6 lg:px-8">

        <div class="bg-white dark:bg-gray-800 shadow-xl rounded-xl p-6 mb-8 border-b-8 border-indigo-600/50">
            <div class="flex flex-col md:flex-row md:justify-between md:items-center">
                <h2 class="text-3xl font-extrabold text-gray-800 dark:text-gray-100 mb-4 md:mb-0">
                    <i class="fas fa-book-open text-indigo-500 <?= $dir == 'rtl' ? 'ml-2' : 'mr-2' ?>"></i> 
                    <?= __('courses_report_title') ?>
                </h2>
                <div class="flex flex-wrap gap-3">
                    <div class="bg-indigo-600 text-white px-6 py-2 rounded-xl shadow-lg flex items-center">
                        <i class="fas fa-layer-group <?= $dir == 'rtl' ? 'ml-3' : 'mr-3' ?> text-indigo-200"></i>
                        <span class="font-bold text-lg"><?= __('total_courses') ?>: <?= $total_courses_count ?></span>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 shadow-xl rounded-xl p-6 mb-8 border-t-4 border-indigo-400">
            <div class="flex items-center mb-6">
                <div class="w-1.5 h-6 bg-indigo-500 rounded-full <?= $dir == 'rtl' ? 'ml-3' : 'mr-3' ?>"></div>
                <h3 class="text-xl font-bold text-gray-800 dark:text-gray-100"><?= __('quick_filter') ?></h3>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div class="md:col-span-3">
                    <input type="text" id="courseSearch" placeholder="<?= __('search_placeholder_course') ?>" 
                           class="w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg text-sm py-2.5 px-3 focus:ring-indigo-500 focus:border-indigo-500 transition shadow-sm">
                </div>
                <button id="resetSearch" class="bg-gray-200 hover:bg-gray-300 text-gray-700 py-2.5 px-4 rounded-lg text-sm font-semibold transition shadow-sm">
                    <i class="fas fa-sync-alt <?= $dir == 'rtl' ? 'ml-1' : 'mr-1' ?>"></i> <?= __('reset_filter') ?>
                </button>
            </div>
        </div>

        <div class="overflow-x-auto rounded-xl shadow-2xl">
            <table id="coursesTable" class="min-w-full <?= $dir == 'rtl' ? 'text-right' : 'text-left' ?> bg-white dark:bg-gray-800 border-collapse">
                <thead class="table-header text-sm uppercase tracking-wider">
                    <tr>
                        <th class="p-4 border-b border-<?= $dir == 'rtl' ? 'r' : 'l' ?> border-indigo-400 dark:border-indigo-700"><?= __('course_name') ?></th>
                        <th class="p-4 border-b border-<?= $dir == 'rtl' ? 'r' : 'l' ?> border-indigo-400 dark:border-indigo-700"><?= __('duration') ?></th>
                        <th class="p-4 border-b border-<?= $dir == 'rtl' ? 'r' : 'l' ?> border-indigo-400 dark:border-indigo-700"><?= __('price') ?></th>
                        <th class="p-4 border-b border-<?= $dir == 'rtl' ? 'r' : 'l' ?> border-indigo-400 dark:border-indigo-700"><?= __('enrolled_students') ?></th>
                        <th class="p-4 border-b border-<?= $dir == 'rtl' ? 'r' : 'l' ?> border-indigo-400 dark:border-indigo-700"><?= __('creation_date') ?></th>
                        <th class="p-4 border-b border-indigo-400 dark:border-indigo-700 text-center"><?= __('actions') ?></th>
                    </tr>
                </thead>
                <tbody class="table-body text-gray-700 dark:text-gray-300 text-sm">
                    <?php if (!empty($courses)): ?>
                        <?php foreach ($courses as $course): ?>
                            <tr class="border-b dark:border-gray-700">
                                <td class="p-4 border-<?= $dir == 'rtl' ? 'r' : 'l' ?> dark:border-gray-700 font-bold text-indigo-700 dark:text-indigo-400">
                                    <?= htmlspecialchars($course['course_name']) ?>
                                </td>
                                <td class="p-4 border-<?= $dir == 'rtl' ? 'r' : 'l' ?> dark:border-gray-700">
                                    <span class="px-3 py-1 text-xs font-semibold rounded-full bg-blue-50 text-blue-700 border border-blue-100">
                                        <?= $course['duration_weeks'] ?? '-' ?> <?= __('week_unit') ?>
                                    </span>
                                </td>
                                <td class="p-4 border-<?= $dir == 'rtl' ? 'r' : 'l' ?> dark:border-gray-700 font-bold text-emerald-600">
                                    <?= number_format($course['price'], 2) ?> <?= __('currency') ?>
                                </td>
                                <td class="p-4 border-<?= $dir == 'rtl' ? 'r' : 'l' ?> dark:border-gray-700">
                                    <div class="flex items-center text-gray-600 dark:text-gray-400 font-semibold">
                                        <span class="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-blue-600 <?= $dir == 'rtl' ? 'ml-2' : 'mr-2' ?> italic"><?= $course['student_count'] ?></span> <?= __('student_unit') ?>
                                    </div>
                                </td>
                                <td class="p-4 border-<?= $dir == 'rtl' ? 'r' : 'l' ?> dark:border-gray-700 text-gray-500">
                                    <?= date('d/m/Y', strtotime($course['created_at'])) ?>
                                </td>
                                <td class="p-4 text-center">
                                    <div class="flex justify-center items-center gap-2">
                                        <button onclick="showStudents(<?= $course['id'] ?>)" 
                                                class="action-button bg-indigo-600 hover:bg-indigo-700 p-2 rounded-full text-white shadow-md transform hover:scale-110 transition duration-150" 
                                                title="<?= __('view_students_list') ?>">
                                            <i class="fas fa-user-graduate w-4 h-4"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <tr>
                            <td colspan="6" class="text-center p-10 text-gray-400 bg-gray-50 dark:bg-gray-800">
                                <i class="fas fa-folder-open text-4xl mb-3"></i><br>
                                <?= __('no_data_available') ?>
                            </td>
                        </tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div id="studentModal" class="hidden fixed inset-0 bg-black bg-opacity-70 flex justify-center items-center z-50 p-4">
    <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-2xl w-full max-w-md p-8 relative border-t-8 border-indigo-600">
        <button onclick="closeModal()" class="absolute top-4 <?= $dir == 'rtl' ? 'right-4' : 'left-4' ?> text-gray-400 hover:text-red-500 text-3xl transition">&times;</button>
        <h3 class="text-2xl font-black text-center mb-6 text-indigo-700 dark:text-indigo-400">
            <i class="fas fa-users <?= $dir == 'rtl' ? 'ml-2' : 'mr-2' ?>"></i> <?= __('enrolled_students_list') ?>
        </h3>
        
        <div class="max-h-72 overflow-y-auto custom-scrollbar">
            <ul id="studentList" class="divide-y divide-gray-100 dark:divide-gray-700"></ul>
        </div>

        <div class="text-center mt-8">
            <button onclick="closeModal()" class="w-full bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-800 dark:text-white py-3 rounded-xl font-bold transition">
                <?= __('close') ?>
            </button>
        </div>
    </div>
</div>

<script>
// محرك البحث
document.getElementById('courseSearch').addEventListener('keyup', function() {
    const value = this.value.toLowerCase();
    const rows = document.querySelectorAll('#coursesTable tbody tr');
    rows.forEach(row => {
        row.style.display = row.innerText.toLowerCase().includes(value) ? '' : 'none';
    });
});

document.getElementById('resetSearch').addEventListener('click', () => {
    document.getElementById('courseSearch').value = '';
    document.querySelectorAll('#coursesTable tbody tr').forEach(row => row.style.display = '');
});

function showStudents(courseId) {
    const modal = document.getElementById('studentModal');
    const list = document.getElementById('studentList');
    list.innerHTML = '<div class="text-center py-4"><i class="fas fa-circle-notch fa-spin text-indigo-500 text-2xl"></i></div>';
    
    modal.classList.remove('hidden');
    modal.classList.add('flex');

    fetch(`get_course_students.php?course_id=${courseId}`)
        .then(response => response.json())
        .then(data => {
            list.innerHTML = '';
            if (data.length === 0) {
                list.innerHTML = '<li class="text-center p-4 text-gray-500 italic"><?= __('no_students_in_course') ?></li>';
            } else {
                data.forEach(student => {
                    const li = document.createElement('li');
                    li.className = "py-3 flex justify-between items-center";
                    li.innerHTML = `
                        <span class="font-bold text-gray-700 dark:text-gray-200">${student.full_name}</span>
                        <span class="text-xs text-indigo-600 bg-indigo-50 dark:bg-indigo-900/30 px-2 py-1 rounded-lg border border-indigo-100 dark:border-indigo-800">${student.phone ?? '---'}</span>
                    `;
                    list.appendChild(li);
                });
            }
        });
}

function closeModal() {
    document.getElementById('studentModal').classList.add('hidden');
    document.getElementById('studentModal').classList.remove('flex');
}
</script>

<?php include('../includes/footer.php'); ?>