<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>School Class Manager</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- FontAwesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        body { background-color: #f8f9fa; }
        .sidebar { min-height: 100vh; background: #2c3e50; color: white; padding: 20px;}
        .nav-link { color: #bdc3c7; margin-bottom: 5px; cursor: pointer;}
        .nav-link:hover, .nav-link.active { color: white; background: rgba(255,255,255,0.1); border-radius: 5px;}
        .main-content { padding: 30px; }
        .card-header-custom { display: flex; justify-content: space-between; align-items: center; }
        .badge-mark { font-size: 0.8em; padding: 5px 10px; border-radius: 12px;}
    </style>
</head>
<body>

<div class="container-fluid">
    <div class="row">
        <!-- Sidebar -->
        <div class="col-md-3 sidebar p-0">
            <h4 class="text-center mb-4"><i class="fas fa-graduation-cap"></i> ClassMgr</h4>
            <ul class="nav flex-column">
                <li class="nav-item"><a href="#" onclick="switchView('dashboard')" class="nav-link active" id="link-dashboard"><i class="fas fa-home me-2"></i> Dashboard</a></li>
                <li class="nav-item"><a href="#" onclick="switchView('students')" class="nav-link" id="link-students"><i class="fas fa-user-plus me-2"></i> Students</a></li>
                <li class="nav-item"><a href="#" onclick="switchView('subjects')" class="nav-link" id="link-subjects"><i class="fas fa-book me-2"></i> Subjects</a></li>
                <li class="nav-item"><a href="#" onclick="switchView('marks')" class="nav-link" id="link-marks"><i class="fas fa-chart-bar me-2"></i> Marks & Reports</a></li>
            </ul>
        </div>

        <!-- Main Content -->
        <div class="col-md-9 main-content">
            
            <!-- VIEW: DASHBOARD -->
            <div id="view-dashboard" class="view-section">
                <h2>Welcome, Teacher</h2>
                <div class="row mt-4">
                    <div class="col-md-4">
                        <div class="card bg-primary text-white p-3 mb-3">
                            <h5>Total Students</h5>
                            <h1 id="dash-total-students">0</h1>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card bg-success text-white p-3 mb-3">
                            <h5>Total Subjects</h5>
                            <h1 id="dash-total-subjects">0</h1>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card bg-warning text-dark p-3 mb-3">
                            <h5>Total Marks Recorded</h5>
                            <h1 id="dash-total-marks">0</h1>
                        </div>
                    </div>
                </div>

                <!-- Quick Add Student Modal Trigger -->
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#studentModal">
                    <i class="fas fa-plus"></i> Add New Student
                </button>
            </div>

            <!-- VIEW: STUDENTS -->
            <div id="view-students" class="view-section d-none">
                <h2>Student Management</h2>
                <table class="table table-striped bg-white shadow-sm rounded">
                    <thead class="table-dark">
                        <tr>
                            <th>Name</th>
                            <th>D.O.B</th>
                            <th>Grade</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody id="student-table-body">
                        <!-- Populated by JS -->
                    </tbody>
                </table>
            </div>

            <!-- VIEW: SUBJECTS -->
            <div id="view-subjects" class="view-section d-none">
                <h2>Subject Management</h2>
                <button class="btn btn-sm btn-outline-primary mb-3" data-bs-toggle="modal" data-bs-target="#subjectModal">Add Subject</button>
                <table class="table table-hover bg-white shadow-sm rounded">
                    <thead class="table-secondary">
                        <tr><th>ID</th><th>Name</th><th>Code</th></tr>
                    </thead>
                    <tbody id="subject-table-body"></tbody>
                </table>
            </div>

            <!-- VIEW: MARKS -->
            <div id="view-marks" class="view-section d-none">
                <h2>Marks & Reports</h2>
                
                <!-- Filter Controls -->
                <div class="card mb-3 shadow-sm">
                    <div class="card-body">
                        <form id="reportFilterForm">
                            <div class="row g-3 align-items-center">
                                <div class="col-md-3">
                                    <select class="form-select" id="filterTermStart">
                                        <option value="2023-01-01">Jan 2023</option>
                                        <option value="2023-06-01">Jun 2023</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <select class="form-select" id="filterType">
                                        <option value="">All Types</option>
                                        <option value="Test">Tests Only</option>
                                        <option value="Homework">Homework Only</option>
                                    </select>
                                </div>
                                <div class="col-md-3 text-end">
                                    <button type="button" onclick="renderMarksTable()" class="btn btn-primary"><i class="fas fa-filter"></i> Filter</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Marks Table -->
                <div class="table-responsive">
                    <table class="table table-bordered bg-white shadow-sm" id="marks-table">
                        <thead class="bg-light">
                            <tr>
                                <th>Date</th>
                                <th>Student</th>
                                <th>Subject</th>
                                <th>Type</th>
                                <th>Score / Max</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody id="marks-table-body"></tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>

<!-- --- MODALS --- -->

<!-- Student Modal -->
<div class="modal fade" id="studentModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title">Add Student</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="studentForm">
                    <div class="mb-3"><label>Name</label><input type="text" class="form-control" required></div>
                    <div class="row mb-3">
                        <div class="col"><label>Surname</label><input type="text" class="form-control" required></div>
                        <div class="col"><label>DOB</label><input type="date" class="form-control"></div>
                    </div>
                    <div class="mb-3">
                        <label>Grade/Year</label>
                        <select class="form-select">
                            <option>Grade 10</option>
                            <option>Grade 11</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="alert('Student Saved (Simulated)')">Save Student</button>
            </div>
        </div>
    </div>
</div>

<!-- Subject Modal -->
<div class="modal fade" id="subjectModal" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header"><h5>Add Subject</h5></div>
            <div class="modal-body">
                <input type="text" id="newSubName" class="form-control mb-2" placeholder="Subject Name">
                <input type="text" id="newSubCode" class="form-control mb-2" placeholder="3 Letter Code (e.g. MAT)">
            </div>
            <div class="modal-footer"><button class="btn btn-primary" onclick="addSubject()">Add</button></div>
        </div>
    </div>
</div>

<!-- --- JQUERY & BOOTSTRAP JS --- -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<script>
$(document).ready(function() {
    // 1. Load Initial Data
    loadDashboardStats();
    renderStudents();
    renderSubjects();
    renderMarksTable();

    // 2. Navigation Logic
    function switchView(viewName) {
        $('.view-section').addClass('d-none');
        $('#view-' + viewName).removeClass('d-none');
        
        $('.nav-link').removeClass('active');
        $('#link-' + viewName).addClass('active');
    }

    // 3. Render Students (PHP Data)
    function renderStudents() {
        // In a real app, fetch via AJAX. Here we assume PHP set variables or use dummy data for JS demo
        let html = '';
        const students = <br />
<b>Warning</b>:  Undefined variable $students in <b>/home/nbx/class.inbox.co.zw/index.php</b> on line <b>346</b><br />
null; 
        if(students.length === 0) {
             html = '<tr><td colspan="4">No students found.</td></tr>';
        } else {
            students.forEach(s => {
                html += `<tr>
                    <td>${s.first_name} ${s.last_name}</td>
                    <td>${s.dob}</td>
                    <td>${s.grade_level}</td>
                    <td><button class="btn btn-sm btn-outline-danger" onclick="deleteStudent(${s.id})">Delete</button></td>
                </tr>`;
            });
        }
        $('#student-table-body').html(html);
    }

    // 4. Render Subjects (PHP Data)
    function renderSubjects() {
        let html = '';
        const subjects = <br />
<b>Warning</b>:  Undefined variable $subjects in <b>/home/nbx/class.inbox.co.zw/index.php</b> on line <b>365</b><br />
null;
        subjects.forEach(s => {
            html += `<tr><td>${s.id}</td><td>${s.name}</td><td>${s.code}</td></tr>`;
        });
        $('#subject-table-body').html(html);

        // Add Subject Logic
        function addSubject() {
            const name = $('#newSubName').val();
            const code = $('#newSubCode').val().toUpperCase();
            if(name && code) {
                // Simulate insert
                let newId = subjects.length + 1;
                subjects.push({id: newId, name: name, code: code});
                renderSubjects();
                $('#subjectModal').modal('hide');
            }
        }
    }

    // 5. Render Marks Table (PHP Data)
    function renderMarksTable() {
        let html = '';
        const marks = <br />
<b>Warning</b>:  Undefined variable $marks in <b>/home/nbx/class.inbox.co.zw/index.php</b> on line <b>388</b><br />
null;
        
        if(marks.length === 0) {
             html = '<tr><td colspan="6">No records found.</td></tr>';
        } else {
            marks.forEach(m => {
                let badgeClass = m.type === 'Test' ? 'bg-danger' : (m.type === 'Homework' ? 'bg-warning' : 'bg-info');
                html += `<tr>
                    <td>${m.date_recorded}</td>
                    <td><strong>${m.last_name} ${m.first_name}</strong></td>
                    <td>${m.subject_name}</td>
                    <td><span class="badge ${badgeClass}">${m.type}</span></td>
                    <td>${m.score} / ${m.max_score}</td>
                    <td><button class="btn btn-sm btn-link" onclick="alert('Edit ID: ${m.id}')">Edit</button></td>
                </tr>`;
            });
        }
        $('#marks-table-body').html(html);
    }

    // 6. Dashboard Stats
    function loadDashboardStats() {
        const students = <br />
<b>Warning</b>:  Undefined variable $students in <b>/home/nbx/class.inbox.co.zw/index.php</b> on line <b>410</b><br />
null;
        const subjects = <br />
<b>Warning</b>:  Undefined variable $subjects in <b>/home/nbx/class.inbox.co.zw/index.php</b> on line <b>411</b><br />
null;
        const marks = <br />
<b>Warning</b>:  Undefined variable $marks in <b>/home/nbx/class.inbox.co.zw/index.php</b> on line <b>412</b><br />
null;
        
        $('#dash-total-students').text(students.length);
        $('#dash-total-subjects').text(subjects.length);
        $('#dash-total-marks').text(marks.length);
    }

    // 7. Delete Student Simulation
    function deleteStudent(id) {
        if(confirm('Delete student ID ' + id + '?')) {
            alert('Deleted');
            renderStudents();
        }
    }
});
</script>

</body>
</html>
