{{> head}}

<!-- Simple DataTables CSS -->
<link rel="stylesheet" href="node_modules/simple-datatables/dist/style.css">

<style>
/* Dashboard Grid System */
        .dashboard-row { margin-bottom: 24px; }
        .dashboard-grid { display: grid; gap: 24px; }
        .grid-cols-1 { grid-template-columns: 1fr; }
        .grid-cols-2 { grid-template-columns: repeat(2, 1fr); }

        @media (max-width: 768px) {
            .dashboard-grid { gap: 16px; }
            .grid-cols-2 { grid-template-columns: 1fr; }
        }

        /* Card Spacing */
        .dashboard-card {
            margin-bottom: 24px;
        }

        .dashboard-card:last-child {
            margin-bottom: 0;
        }

        /* Simple DataTable Customizations */
        .dataTable-wrapper .dataTable-top,
        .dataTable-wrapper .dataTable-bottom {
            padding: 10px 0;
        }

        .dataTable-wrapper .dataTable-search {
            margin-bottom: 20px;
        }

        .dataTable-wrapper .dataTable-input {
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            padding: 8px 12px;
            margin-left: 10px;
        }

        .dataTable-wrapper .dataTable-selector {
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            padding: 8px 12px;
            margin: 0 5px;
        }

        .dataTable-table thead th {
            background: linear-gradient(135deg, #4361ee, #6366f1);
            color: white;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.875rem;
            letter-spacing: 0.5px;
            border: none;
        }

        .dataTable-table tbody tr {
            transition: all 0.3s ease;
        }

        .dataTable-table tbody tr:hover {
            background-color: #f8f9fa !important;
            transform: scale(1.01);
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        .dataTable-pagination a.active {
            background: #4361ee !important;
            color: white !important;
            border: 1px solid #4361ee !important;
            border-radius: 6px;
        }

        .dataTable-pagination a:hover {
            background: #6366f1 !important;
            color: white !important;
            border: 1px solid #6366f1 !important;
        }

        /* Export Buttons */
        .export-buttons {
            margin-bottom: 20px;
        }

        .export-btn {
            background: #4361ee;
            color: white;
            border: none;
            border-radius: 6px;
            padding: 8px 16px;
            margin-right: 8px;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .export-btn:hover {
            background: #6366f1;
            transform: translateY(-2px);
        }

        /* Status Badges */
        .status-badge {
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .status-active { background: #d1fae5; color: #065f46; }
        .status-pending { background: #fed7aa; color: #92400e; }
        .status-inactive { background: #e5e7eb; color: #374151; }
        .status-graduated { background: #ddd6fe; color: #5b21b6; }

        /* Student Avatar */
        .student-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #e5e7eb;
        }

        .student-name {
            font-weight: 600;
            color: #1f2937;
        }

        .student-email {
            font-size: 0.875rem;
            color: #6b7280;
        }

        /* Action Buttons */
        .btn-action {
            width: 32px;
            height: 32px;
            padding: 0;
            border-radius: 6px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            border: none;
            margin: 0 2px;
        }

        .btn-action:hover {
            transform: translateY(-2px);
        }

        .btn-view { background: #e0e7ff; color: #4338ca; }
        .btn-view:hover { background: #4338ca; color: white; }

        .btn-edit { background: #fef3c7; color: #d97706; }
        .btn-edit:hover { background: #d97706; color: white; }

        .btn-delete { background: #fee2e2; color: #dc2626; }
        .btn-delete:hover { background: #dc2626; color: white; }

        /* Responsive */
        @media (max-width: 768px) {
            .dataTables_wrapper .dataTables_length,
            .dataTables_wrapper .dataTables_filter {
                text-align: center;
            }

            .dt-buttons {
                text-align: center;
            }
        }
</style>

{{> sidebar}}

<!-- Main Content Wrapper -->
<div class="main-wrapper" id="mainWrapper">
    {{> header}}

    <!-- Main Content -->
    <main class="dashboard-content" id="main-content">
        <div class="container-fluid">
            <!-- Page Header -->
            <div class="mb-4">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h1 class="h3 mb-0 text-gray-800">Data Tables</h1>
                        <p class="text-muted mb-0">Advanced data tables with search, sort, and export functionality</p>
                    </div>
                </div>
            </div>

            <!-- Student DataTable -->
            <div class="dashboard-card">
                <div class="dashboard-card-header py-4 px-4">
                    <h5 class="mb-0">Student Management System</h5>
                </div>
                <div class="dashboard-card-body px-4 py-4">
                    <table id="studentTable" class="table table-striped table-bordered dt-responsive nowrap" style="width:100%">
                        <thead>
                            <tr>
                                <th>Student</th>
                                <th>ID</th>
                                <th>Department</th>
                                <th>Year</th>
                                <th>GPA</th>
                                <th>Status</th>
                                <th>Enrolled</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <img src="https://ui-avatars.com/api/?name=Sarah+Johnson&background=6366f1&color=fff" alt="Sarah Johnson" class="student-avatar me-3">
                                        <div>
                                            <div class="student-name">Sarah Johnson</div>
                                            <div class="student-email">sarah.j@university.edu</div>
                                        </div>
                                    </div>
                                </td>
                                <td>2025001</td>
                                <td>Computer Science</td>
                                <td>3rd Year</td>
                                <td>3.85</td>
                                <td><span class="status-badge status-active">Active</span></td>
                                <td>2022-09-01</td>
                                <td>
                                    <button class="btn-action btn-view" title="View"><i class="bi bi-eye"></i></button>
                                    <button class="btn-action btn-edit" title="Edit"><i class="bi bi-pencil"></i></button>
                                    <button class="btn-action btn-delete" title="Delete"><i class="bi bi-trash"></i></button>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <img src="https://ui-avatars.com/api/?name=Michael+Chen&background=10b981&color=fff" alt="Michael Chen" class="student-avatar me-3">
                                        <div>
                                            <div class="student-name">Michael Chen</div>
                                            <div class="student-email">m.chen@university.edu</div>
                                        </div>
                                    </div>
                                </td>
                                <td>2025002</td>
                                <td>Mathematics</td>
                                <td>2nd Year</td>
                                <td>3.92</td>
                                <td><span class="status-badge status-active">Active</span></td>
                                <td>2023-09-01</td>
                                <td>
                                    <button class="btn-action btn-view" title="View"><i class="bi bi-eye"></i></button>
                                    <button class="btn-action btn-edit" title="Edit"><i class="bi bi-pencil"></i></button>
                                    <button class="btn-action btn-delete" title="Delete"><i class="bi bi-trash"></i></button>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <img src="https://ui-avatars.com/api/?name=Emma+Davis&background=f59e0b&color=fff" alt="Emma Davis" class="student-avatar me-3">
                                        <div>
                                            <div class="student-name">Emma Davis</div>
                                            <div class="student-email">emma.d@university.edu</div>
                                        </div>
                                    </div>
                                </td>
                                <td>2025003</td>
                                <td>Physics</td>
                                <td>4th Year</td>
                                <td>3.45</td>
                                <td><span class="status-badge status-active">Active</span></td>
                                <td>2021-09-01</td>
                                <td>
                                    <button class="btn-action btn-view" title="View"><i class="bi bi-eye"></i></button>
                                    <button class="btn-action btn-edit" title="Edit"><i class="bi bi-pencil"></i></button>
                                    <button class="btn-action btn-delete" title="Delete"><i class="bi bi-trash"></i></button>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <img src="https://ui-avatars.com/api/?name=James+Wilson&background=ef4444&color=fff" alt="James Wilson" class="student-avatar me-3">
                                        <div>
                                            <div class="student-name">James Wilson</div>
                                            <div class="student-email">james.w@university.edu</div>
                                        </div>
                                    </div>
                                </td>
                                <td>2025004</td>
                                <td>Engineering</td>
                                <td>1st Year</td>
                                <td>3.65</td>
                                <td><span class="status-badge status-pending">Pending</span></td>
                                <td>2024-09-01</td>
                                <td>
                                    <button class="btn-action btn-view" title="View"><i class="bi bi-eye"></i></button>
                                    <button class="btn-action btn-edit" title="Edit"><i class="bi bi-pencil"></i></button>
                                    <button class="btn-action btn-delete" title="Delete"><i class="bi bi-trash"></i></button>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <img src="https://ui-avatars.com/api/?name=Olivia+Brown&background=8b5cf6&color=fff" alt="Olivia Brown" class="student-avatar me-3">
                                        <div>
                                            <div class="student-name">Olivia Brown</div>
                                            <div class="student-email">olivia.b@university.edu</div>
                                        </div>
                                    </div>
                                </td>
                                <td>2025005</td>
                                <td>Biology</td>
                                <td>3rd Year</td>
                                <td>3.78</td>
                                <td><span class="status-badge status-active">Active</span></td>
                                <td>2022-09-01</td>
                                <td>
                                    <button class="btn-action btn-view" title="View"><i class="bi bi-eye"></i></button>
                                    <button class="btn-action btn-edit" title="Edit"><i class="bi bi-pencil"></i></button>
                                    <button class="btn-action btn-delete" title="Delete"><i class="bi bi-trash"></i></button>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <img src="https://ui-avatars.com/api/?name=Alex+Martinez&background=06b6d4&color=fff" alt="Alex Martinez" class="student-avatar me-3">
                                        <div>
                                            <div class="student-name">Alex Martinez</div>
                                            <div class="student-email">alex.m@university.edu</div>
                                        </div>
                                    </div>
                                </td>
                                <td>2025006</td>
                                <td>Chemistry</td>
                                <td>2nd Year</td>
                                <td>3.55</td>
                                <td><span class="status-badge status-active">Active</span></td>
                                <td>2023-09-01</td>
                                <td>
                                    <button class="btn-action btn-view" title="View"><i class="bi bi-eye"></i></button>
                                    <button class="btn-action btn-edit" title="Edit"><i class="bi bi-pencil"></i></button>
                                    <button class="btn-action btn-delete" title="Delete"><i class="bi bi-trash"></i></button>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <img src="https://ui-avatars.com/api/?name=Lisa+Thompson&background=ec4899&color=fff" alt="Lisa Thompson" class="student-avatar me-3">
                                        <div>
                                            <div class="student-name">Lisa Thompson</div>
                                            <div class="student-email">lisa.t@university.edu</div>
                                        </div>
                                    </div>
                                </td>
                                <td>2025007</td>
                                <td>Psychology</td>
                                <td>4th Year</td>
                                <td>3.88</td>
                                <td><span class="status-badge status-active">Active</span></td>
                                <td>2021-09-01</td>
                                <td>
                                    <button class="btn-action btn-view" title="View"><i class="bi bi-eye"></i></button>
                                    <button class="btn-action btn-edit" title="Edit"><i class="bi bi-pencil"></i></button>
                                    <button class="btn-action btn-delete" title="Delete"><i class="bi bi-trash"></i></button>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <img src="https://ui-avatars.com/api/?name=Robert+Garcia&background=f97316&color=fff" alt="Robert Garcia" class="student-avatar me-3">
                                        <div>
                                            <div class="student-name">Robert Garcia</div>
                                            <div class="student-email">robert.g@university.edu</div>
                                        </div>
                                    </div>
                                </td>
                                <td>2025008</td>
                                <td>History</td>
                                <td>3rd Year</td>
                                <td>3.72</td>
                                <td><span class="status-badge status-active">Active</span></td>
                                <td>2022-09-01</td>
                                <td>
                                    <button class="btn-action btn-view" title="View"><i class="bi bi-eye"></i></button>
                                    <button class="btn-action btn-edit" title="Edit"><i class="bi bi-pencil"></i></button>
                                    <button class="btn-action btn-delete" title="Delete"><i class="bi bi-trash"></i></button>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <img src="https://ui-avatars.com/api/?name=Jennifer+Lee&background=84cc16&color=fff" alt="Jennifer Lee" class="student-avatar me-3">
                                        <div>
                                            <div class="student-name">Jennifer Lee</div>
                                            <div class="student-email">jennifer.l@university.edu</div>
                                        </div>
                                    </div>
                                </td>
                                <td>2025009</td>
                                <td>Economics</td>
                                <td>2nd Year</td>
                                <td>3.91</td>
                                <td><span class="status-badge status-active">Active</span></td>
                                <td>2023-09-01</td>
                                <td>
                                    <button class="btn-action btn-view" title="View"><i class="bi bi-eye"></i></button>
                                    <button class="btn-action btn-edit" title="Edit"><i class="bi bi-pencil"></i></button>
                                    <button class="btn-action btn-delete" title="Delete"><i class="bi bi-trash"></i></button>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <img src="https://ui-avatars.com/api/?name=David+Kim&background=0891b2&color=fff" alt="David Kim" class="student-avatar me-3">
                                        <div>
                                            <div class="student-name">David Kim</div>
                                            <div class="student-email">david.k@university.edu</div>
                                        </div>
                                    </div>
                                </td>
                                <td>2025010</td>
                                <td>Sociology</td>
                                <td>1st Year</td>
                                <td>3.49</td>
                                <td><span class="status-badge status-active">Active</span></td>
                                <td>2024-09-01</td>
                                <td>
                                    <button class="btn-action btn-view" title="View"><i class="bi bi-eye"></i></button>
                                    <button class="btn-action btn-edit" title="Edit"><i class="bi bi-pencil"></i></button>
                                    <button class="btn-action btn-delete" title="Delete"><i class="bi bi-trash"></i></button>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <img src="https://ui-avatars.com/api/?name=Maria+Rodriguez&background=dc2626&color=fff" alt="Maria Rodriguez" class="student-avatar me-3">
                                        <div>
                                            <div class="student-name">Maria Rodriguez</div>
                                            <div class="student-email">maria.r@university.edu</div>
                                        </div>
                                    </div>
                                </td>
                                <td>2025011</td>
                                <td>Philosophy</td>
                                <td>4th Year</td>
                                <td>3.82</td>
                                <td><span class="status-badge status-graduated">Graduated</span></td>
                                <td>2021-09-01</td>
                                <td>
                                    <button class="btn-action btn-view" title="View"><i class="bi bi-eye"></i></button>
                                    <button class="btn-action btn-edit" title="Edit"><i class="bi bi-pencil"></i></button>
                                    <button class="btn-action btn-delete" title="Delete"><i class="bi bi-trash"></i></button>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <img src="https://ui-avatars.com/api/?name=Kevin+White&background=7c3aed&color=fff" alt="Kevin White" class="student-avatar me-3">
                                        <div>
                                            <div class="student-name">Kevin White</div>
                                            <div class="student-email">kevin.w@university.edu</div>
                                        </div>
                                    </div>
                                </td>
                                <td>2025012</td>
                                <td>Music</td>
                                <td>3rd Year</td>
                                <td>3.67</td>
                                <td><span class="status-badge status-active">Active</span></td>
                                <td>2022-09-01</td>
                                <td>
                                    <button class="btn-action btn-view" title="View"><i class="bi bi-eye"></i></button>
                                    <button class="btn-action btn-edit" title="Edit"><i class="bi bi-pencil"></i></button>
                                    <button class="btn-action btn-delete" title="Delete"><i class="bi bi-trash"></i></button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Course DataTable -->
            <div class="dashboard-card">
                <div class="dashboard-card-header py-4 px-4">
                    <h5 class="mb-0">Course Management - Spring 2025</h5>
                </div>
                <div class="dashboard-card-body px-4 py-4">
                    <table id="courseTable" class="table table-striped table-bordered dt-responsive nowrap" style="width:100%">
                        <thead>
                            <tr>
                                <th>Course Code</th>
                                <th>Course Name</th>
                                <th>Department</th>
                                <th>Instructor</th>
                                <th>Credits</th>
                                <th>Schedule</th>
                                <th>Enrolled</th>
                                <th>Capacity</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>CS-401</td>
                                <td>Advanced Computer Science</td>
                                <td>Computer Science</td>
                                <td>Dr. Jane Smith</td>
                                <td>3</td>
                                <td>MWF 10:00-11:30</td>
                                <td>28</td>
                                <td>30</td>
                                <td><span class="status-badge status-active">Open</span></td>
                            </tr>
                            <tr>
                                <td>MATH-301</td>
                                <td>Linear Algebra</td>
                                <td>Mathematics</td>
                                <td>Dr. Emily Davis</td>
                                <td>3</td>
                                <td>MWF 1:00-2:00</td>
                                <td>35</td>
                                <td>35</td>
                                <td><span class="status-badge status-inactive">Full</span></td>
                            </tr>
                            <tr>
                                <td>PHY-201L</td>
                                <td>Physics Laboratory</td>
                                <td>Physics</td>
                                <td>Prof. Michael Brown</td>
                                <td>2</td>
                                <td>M 3:00-5:00</td>
                                <td>18</td>
                                <td>20</td>
                                <td><span class="status-badge status-active">Open</span></td>
                            </tr>
                            <tr>
                                <td>CS-302</td>
                                <td>Data Structures</td>
                                <td>Computer Science</td>
                                <td>Dr. Robert Brown</td>
                                <td>4</td>
                                <td>TTH 2:00-3:30</td>
                                <td>32</td>
                                <td>40</td>
                                <td><span class="status-badge status-active">Open</span></td>
                            </tr>
                            <tr>
                                <td>BIO-310</td>
                                <td>Molecular Biology</td>
                                <td>Biology</td>
                                <td>Dr. Lisa Anderson</td>
                                <td>3</td>
                                <td>TTH 10:00-11:30</td>
                                <td>22</td>
                                <td>25</td>
                                <td><span class="status-badge status-active">Open</span></td>
                            </tr>
                            <tr>
                                <td>CHEM-205</td>
                                <td>Organic Chemistry</td>
                                <td>Chemistry</td>
                                <td>Dr. John Taylor</td>
                                <td>4</td>
                                <td>MWF 9:00-10:30</td>
                                <td>30</td>
                                <td>30</td>
                                <td><span class="status-badge status-inactive">Full</span></td>
                            </tr>
                            <tr>
                                <td>PSY-301</td>
                                <td>Cognitive Psychology</td>
                                <td>Psychology</td>
                                <td>Dr. Sarah Wilson</td>
                                <td>3</td>
                                <td>TTH 1:00-2:30</td>
                                <td>25</td>
                                <td>30</td>
                                <td><span class="status-badge status-active">Open</span></td>
                            </tr>
                            <tr>
                                <td>HIST-250</td>
                                <td>World History</td>
                                <td>History</td>
                                <td>Prof. Mark Johnson</td>
                                <td>3</td>
                                <td>MWF 2:00-3:00</td>
                                <td>40</td>
                                <td>45</td>
                                <td><span class="status-badge status-active">Open</span></td>
                            </tr>
                            <tr>
                                <td>ECON-310</td>
                                <td>Macroeconomics</td>
                                <td>Economics</td>
                                <td>Dr. Jennifer Adams</td>
                                <td>3</td>
                                <td>TTH 3:00-4:30</td>
                                <td>28</td>
                                <td>35</td>
                                <td><span class="status-badge status-active">Open</span></td>
                            </tr>
                            <tr>
                                <td>ENG-220</td>
                                <td>Technical Writing</td>
                                <td>English</td>
                                <td>Prof. David Miller</td>
                                <td>3</td>
                                <td>TTH 4:00-5:30</td>
                                <td>20</td>
                                <td>25</td>
                                <td><span class="status-badge status-active">Open</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Grade DataTable -->
            <div class="dashboard-card">
                <div class="dashboard-card-header py-4 px-4">
                    <h5 class="mb-0">Grade Management System</h5>
                </div>
                <div class="dashboard-card-body px-4 py-4">
                    <table id="gradeTable" class="table table-striped table-bordered dt-responsive nowrap" style="width:100%">
                        <thead>
                            <tr>
                                <th>Student Name</th>
                                <th>Student ID</th>
                                <th>Course</th>
                                <th>Midterm</th>
                                <th>Final</th>
                                <th>Project</th>
                                <th>Attendance</th>
                                <th>Total</th>
                                <th>Grade</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Sarah Johnson</td>
                                <td>2025001</td>
                                <td>CS-401</td>
                                <td>92</td>
                                <td>88</td>
                                <td>95</td>
                                <td>98%</td>
                                <td>91.5</td>
                                <td>A</td>
                            </tr>
                            <tr>
                                <td>Michael Chen</td>
                                <td>2025002</td>
                                <td>MATH-301</td>
                                <td>95</td>
                                <td>93</td>
                                <td>90</td>
                                <td>100%</td>
                                <td>93.2</td>
                                <td>A</td>
                            </tr>
                            <tr>
                                <td>Emma Davis</td>
                                <td>2025003</td>
                                <td>PHY-201L</td>
                                <td>78</td>
                                <td>82</td>
                                <td>85</td>
                                <td>92%</td>
                                <td>81.8</td>
                                <td>B</td>
                            </tr>
                            <tr>
                                <td>James Wilson</td>
                                <td>2025004</td>
                                <td>CS-401</td>
                                <td>85</td>
                                <td>87</td>
                                <td>82</td>
                                <td>95%</td>
                                <td>85.2</td>
                                <td>B+</td>
                            </tr>
                            <tr>
                                <td>Olivia Brown</td>
                                <td>2025005</td>
                                <td>BIO-310</td>
                                <td>88</td>
                                <td>90</td>
                                <td>86</td>
                                <td>96%</td>
                                <td>88.4</td>
                                <td>B+</td>
                            </tr>
                            <tr>
                                <td>Alex Martinez</td>
                                <td>2025006</td>
                                <td>CHEM-205</td>
                                <td>76</td>
                                <td>79</td>
                                <td>82</td>
                                <td>88%</td>
                                <td>78.9</td>
                                <td>C+</td>
                            </tr>
                            <tr>
                                <td>Lisa Thompson</td>
                                <td>2025007</td>
                                <td>PSY-301</td>
                                <td>91</td>
                                <td>89</td>
                                <td>93</td>
                                <td>97%</td>
                                <td>91.0</td>
                                <td>A</td>
                            </tr>
                            <tr>
                                <td>Robert Garcia</td>
                                <td>2025008</td>
                                <td>HIST-250</td>
                                <td>84</td>
                                <td>86</td>
                                <td>88</td>
                                <td>94%</td>
                                <td>86.2</td>
                                <td>B+</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </main>

    {{> footer}}
</div>

{{> scripts}}

<!-- Simple DataTables JS (Vanilla JavaScript - No jQuery!) -->
<script type="module">
import { DataTable } from './node_modules/simple-datatables/dist/module.js';

// Initialize DataTables with Vanilla JS
document.addEventListener('DOMContentLoaded', function() {
    // Student DataTable
    const studentTable = new DataTable('#studentTable', {
        searchable: true,
        fixedHeight: false,
        perPage: 10,
        perPageSelect: [5, 10, 15, 20, 25],
        sortable: true,
        labels: {
            placeholder: "Search students...",
            perPage: "students per page",
            noRows: "No students found",
            info: "Showing {start} to {end} of {rows} students"
        },
        columns: [
            { select: 7, sortable: false } // Actions column not sortable
        ]
    });

    // Add export buttons for student table
    addExportButtons('studentTable', studentTable, 'Students');

    // Course DataTable
    const courseTable = new DataTable('#courseTable', {
        searchable: true,
        fixedHeight: false,
        perPage: 10,
        perPageSelect: [5, 10, 15, 20],
        sortable: true,
        labels: {
            placeholder: "Search courses...",
            perPage: "courses per page",
            noRows: "No courses found",
            info: "Showing {start} to {end} of {rows} courses"
        }
    });

    // Add export buttons for course table
    addExportButtons('courseTable', courseTable, 'Courses');

    // Grade DataTable
    const gradeTable = new DataTable('#gradeTable', {
        searchable: true,
        fixedHeight: false,
        perPage: 10,
        perPageSelect: [5, 10, 15, 20],
        sortable: true,
        labels: {
            placeholder: "Search grades...",
            perPage: "records per page",
            noRows: "No grade records found",
            info: "Showing {start} to {end} of {rows} grade records"
        }
    });

    // Add export buttons for grade table
    addExportButtons('gradeTable', gradeTable, 'Grades');

    // Action button handlers
    document.querySelectorAll('.btn-view').forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.stopPropagation();
            alert('View functionality would show detailed information');
        });
    });

    document.querySelectorAll('.btn-edit').forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.stopPropagation();
            alert('Edit functionality would open edit form');
        });
    });

    document.querySelectorAll('.btn-delete').forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.stopPropagation();
            if (confirm('Are you sure you want to delete this record?')) {
                const row = this.closest('tr');
                row.remove();
            }
        });
    });
});

// Helper function to add export buttons
function addExportButtons(tableId, dataTable, name) {
    const table = document.getElementById(tableId);
    const wrapper = table.closest('.dashboard-card-body');

    // Create export buttons container
    const exportDiv = document.createElement('div');
    exportDiv.className = 'export-buttons mb-3';
    exportDiv.innerHTML = `
        <button class="export-btn" data-action="csv">
            <i class="bi bi-filetype-csv me-1"></i> Export CSV
        </button>
        <button class="export-btn" data-action="print">
            <i class="bi bi-printer me-1"></i> Print
        </button>
    `;

    // Insert before the table wrapper
    wrapper.insertBefore(exportDiv, wrapper.firstChild);

    // Add event listeners for export buttons
    exportDiv.querySelector('[data-action="csv"]').addEventListener('click', function() {
        exportToCSV(tableId, name);
    });

    exportDiv.querySelector('[data-action="print"]').addEventListener('click', function() {
        printTable(tableId, name);
    });
}

// Export to CSV function
function exportToCSV(tableId, filename) {
    const table = document.getElementById(tableId);
    const rows = table.querySelectorAll('tr');
    let csv = [];

    rows.forEach(row => {
        const cols = row.querySelectorAll('td, th');
        const rowData = [];
        cols.forEach((col, idx) => {
            // Skip the actions column (last column)
            if (idx < cols.length - 1 || !col.querySelector('.btn-action')) {
                rowData.push('"' + col.textContent.trim().replace(/"/g, '""') + '"');
            }
        });
        csv.push(rowData.join(','));
    });

    const csvContent = csv.join('\n');
    const blob = new Blob([csvContent], { type: 'text/csv' });
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = filename + '_' + new Date().toISOString().slice(0,10) + '.csv';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
}

// Print table function
function printTable(tableId, title) {
    const table = document.getElementById(tableId).cloneNode(true);

    // Remove action buttons from print view
    table.querySelectorAll('.btn-action').forEach(btn => btn.remove());

    const printWindow = window.open('', '', 'height=600,width=800');
    printWindow.document.write('<html><head><title>' + title + '</title>');
    printWindow.document.write('<style>');
    printWindow.document.write('table { border-collapse: collapse; width: 100%; }');
    printWindow.document.write('th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }');
    printWindow.document.write('th { background-color: #4361ee; color: white; }');
    printWindow.document.write('</style></head><body>');
    printWindow.document.write('<h1>' + title + '</h1>');
    printWindow.document.write(table.outerHTML);
    printWindow.document.write('</body></html>');
    printWindow.document.close();
    printWindow.print();
}
</script>