<?php
include "include/header.php";
?>

<!-- Content -->
<div id="content" class="content ml-64 p-6 min-h-screen">
    <style>
        /* Tailwind CSS CDN (embedded for top-class design) */
        @import url('https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css');

        /* Custom styles for enhanced design */
        body { overflow-x: hidden; font-family: 'Inter', sans-serif; }
        .sidebar { transition: transform 0.3s ease; }
        .content { transition: margin-left 0.3s ease; }
        .dropdown-menu { transition: opacity 0.3s ease, transform 0.3s ease; }
        .dropdown-menu.show { opacity: 1; transform: translateY(0); }
        .dropdown-menu { opacity: 0; transform: translateY(-10px); }
        .widget { transition: transform 0.2s ease, box-shadow 0.2s ease; }
        .widget:hover { transform: translateY(-5px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); }
        .table-section { overflow-x: auto; }
        .status { transition: background 0.2s ease; }
        .action a { transition: color 0.2s ease; }
        .top-nav i { transition: background 0.2s ease; }
        .top-nav { background: linear-gradient(90deg, #1F2937, #374151); }
        .table-section th { background: linear-gradient(90deg, #1F2937, #374151); }
        @media (max-width: 768px) {
            .sidebar { transform: translateX(-250px); }
            .content { margin-left: 0; }
            .sidebar.open { transform: translateX(0); }
            .content.open { margin-left: 0; }
            .search { display: none; }
        }
        @media (min-width: 769px) {
            .sidebar { transform: translateX(0); }
            .content { margin-left: 250px; }
        }
    </style>

    <!-- Top Nav -->
    <nav class="top-nav sticky top-0 text-white p-4 flex justify-between items-center shadow-lg z-40">
        <div class="logo text-2xl font-bold">CourseLMS Admin</div>
        <div class="search flex-1 max-w-xs mx-4">
            <input type="text" placeholder="Search courses or users..." class="w-full p-2 border border-gray-300 rounded-md bg-white text-gray-900 focus:outline-none focus:ring-2 focus:ring-yellow-500">
        </div>
        <div class="right-nav flex items-center gap-4">
            <i class="fas fa-bell text-xl p-2 rounded-full hover:bg-yellow-500 cursor-pointer" title="Notifications"></i>
            <i class="fas fa-envelope text-xl p-2 rounded-full hover:bg-yellow-500 cursor-pointer" title="Messages"></i>
            <div class="profile flex items-center gap-2">
                <img src="https://via.placeholder.com/40" alt="Profile" class="w-10 h-10 rounded-full">
                <span class="text-white">Admin</span>
            </div>
            <i id="toggle" class="fas fa-bars text-xl p-2 rounded-full hover:bg-yellow-500 cursor-pointer" title="Toggle Menu"></i>
        </div>
    </nav>

    <!-- Widgets -->
    <div class="widgets grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 my-6">
        <div class="widget bg-white p-6 rounded-lg shadow-md text-center">
            <i class="fas fa-book text-4xl text-blue-900 mb-3"></i>
            <h3 class="text-lg font-semibold text-gray-900">Active Courses</h3>
            <p class="text-2xl font-bold text-gray-900"><?php echo isset($active_courses) ? htmlspecialchars($active_courses) : '45'; ?></p>
        </div>
        <div class="widget bg-white p-6 rounded-lg shadow-md text-center">
            <i class="fas fa-users text-4xl text-blue-900 mb-3"></i>
            <h3 class="text-lg font-semibold text-gray-900">Total Students</h3>
            <p class="text-2xl font-bold text-gray-900"><?php echo isset($total_students) ? htmlspecialchars($total_students) : '1,234'; ?></p>
        </div>
        <div class="widget bg-white p-6 rounded-lg shadow-md text-center">
            <i class="fas fa-clipboard-check text-4xl text-blue-900 mb-3"></i>
            <h3 class="text-lg font-semibold text-gray-900">New Enrollments</h3>
            <p class="text-2xl font-bold text-gray-900"><?php echo isset($new_enrollments) ? htmlspecialchars($new_enrollments) : '23 Today'; ?></p>
        </div>
        <div class="widget bg-white p-6 rounded-lg shadow-md text-center">
            <i class="fas fa-chart-pie text-4xl text-blue-900 mb-3"></i>
            <h3 class="text-lg font-semibold text-gray-900">Completion Rate</h3>
            <p class="text-2xl font-bold text-gray-900"><?php echo isset($completion_rate) ? htmlspecialchars($completion_rate) : '85%'; ?></p>
        </div>
    </div>

    <!-- Recent Enrollments Table -->
    <div class="table-section bg-white p-6 rounded-lg shadow-md">
        <h2 class="text-xl font-semibold text-gray-900 mb-4">Recent Enrollments</h2>
        <div class="overflow-x-auto">
            <table class="w-full border-collapse">
                <thead>
                    <tr class="text-white">
                        <th class="p-3 text-left font-bold">Date</th>
                        <th class="p-3 text-left font-bold">Course</th>
                        <th class="p-3 text-left font-bold">Student</th>
                        <th class="p-3 text-left font-bold">Status</th>
                        <th class="p-3 text-left font-bold">Progress</th>
                        <th class="p-3 text-left font-bold">Action</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    // Sample data (replace with database query)
                    $enrollments = [
                        ['id' => 1, 'date' => 'Oct 08, 2025', 'course' => 'Web Dev 101', 'student' => 'Jane Doe', 'status' => 'enrolled', 'progress' => '75%'],
                        ['id' => 2, 'date' => 'Oct 07, 2025', 'course' => 'Data Science', 'student' => 'John Smith', 'status' => 'completed', 'progress' => '100%']
                    ];
                    foreach ($enrollments as $enrollment) {
                        $status_class = $enrollment['status'] === 'enrolled' ? 'bg-green-500' : 'bg-blue-900';
                        echo "<tr>
                            <td class='p-3 border-b border-gray-200'>{$enrollment['date']}</td>
                            <td class='p-3 border-b border-gray-200'>{$enrollment['course']}</td>
                            <td class='p-3 border-b border-gray-200'>{$enrollment['student']}</td>
                            <td class='p-3 border-b border-gray-200'><span class='status $status_class text-white px-3 py-1 rounded-md'>" . ucfirst($enrollment['status']) . "</span></td>
                            <td class='p-3 border-b border-gray-200'>{$enrollment['progress']}</td>
                            <td class='p-3 border-b border-gray-200 action'><a href='view_enrollment.php?id={$enrollment['id']}' class='text-blue-900 hover:text-yellow-500'>View</a></td>
                        </tr>";
                    }
                    ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<?php
include "include/footer.php";
?>