<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exam Performance Report</title>
    <style type="text/css">
        .nav-tabs-custom>.nav-tabs>li.active {
            border-top-color: #faa21c;
        }
        
        /* Horizontal filter layout */
        .horizontal-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .filter-row {
            display: flex;
            width: 100%;
            gap: 15px;
        }
        
        .filter-row .form-group {
            flex: 1;
            min-width: 200px;
        }
        
        .search-button-container {
            width: 100%;
            display: flex;
            justify-content: flex-end;
            margin-top: 10px;
        }
        
        .btn-search {
            background-color: #faa21c;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
        }
        
        .btn-search:hover {
            background-color: #e8910c;
        }
        
        .comments-section {
            margin-top: 20px;
            padding: 15px;
            background-color: #f9f9f9;
            border-radius: 4px;
            border: 1px solid #ddd;
        }
        
        .comments-section h5 {
            margin-top: 0;
            color: #333;
            border-bottom: 1px solid #ddd;
            padding-bottom: 5px;
        }
        
        .comments-section p {
            margin: 10px 0;
            padding: 8px;
            background-color: white;
            border-radius: 3px;
            border-left: 3px solid #faa21c;
        }
        
        @media (max-width: 768px) {
            .filter-row {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="content-wrapper" style="min-height: 946px;">
        <section class="content-header">
            <h1>
                <i class="fa fa-line-chart"></i> 
                Financial Reports
                <small></small>
            </h1>
        </section>

        <section class="content">
            <div class="row">
                <div class="col-md-12">
                    <div class="box box-primary">
                        <div class="box-header with-border">
                            <h3 class="box-title">
                                <i class="fa fa-balance-scale"></i> 
                                Term Reports
                            </h3>
                        </div>
                        <div class="box-body">
                            <form id="reportForm" class="form-horizontal">
                                <!-- Horizontal filter layout -->
                                <div class="horizontal-filters">
                                    <!-- First row with two filters -->
                                    <div class="filter-row">
                                        <!-- Education Level -->
                                        <div class="form-group">
                                            <label>Education Level</label>
                                            <select id="report_type" name="report_type" class="form-control">
                                                <option value="">Choose Level</option>
                                                <option value="preschool">Pre School</option>
                                                <option value="primary">Primary</option>
                                                <option value="secondary">Secondary</option>
                                            </select>
                                        </div>

                                        <!-- Learner Level -->
                                        <div class="form-group">
                                            <label>Learner Level</label>
                                            <select name="learner_level" id="learner_level" class="form-control">
                                                <option value="">Select Learner Level</option>
                                            </select>
                                        </div>
                                    </div>
                                    
                                    <!-- Second row with two filters -->
                                    <div class="filter-row">
                                        <!-- Learner Name -->
                                        <div class="form-group">
                                            <label>Learner Name</label>
                                            <select name="learner_name" id="learner_name" class="form-control">
                                                <option value="">Select Learner</option>
                                            </select>
                                        </div>

                                        <!-- Term -->
                                        <div class="form-group">
                                            <label>Term</label>
                                            <select name="exam_type" id="exam_type" class="form-control">
                                                <option value="">Select Term</option>
                                                <option value="term1">First Term</option>
                                                <option value="term2">Second Term</option>
                                                <option value="term3">Third Term</option>
                                            </select>
                                        </div>
                                    </div>
                                    
                                    <!-- Search Button -->
                                    <div class="search-button-container">
                                        <button type="button" class="btn-search" id="searchBtn">
                                            <i class="fa fa-search"></i> Search
                                        </button>
                                    </div>
                                </div>
                            </form>

                            <!-- Dynamic Exam Table (Initially hidden) -->
                            <div id="resultsSection" style="display: none;">
                                <div class="row" style="margin-top:30px;">
                                    <div class="col-md-12">
                                        <h4><i class="fa fa-table"></i> Termly Performance Summary</h4>
                                        <div class="table-responsive">
                                            <table class="table table-bordered table-striped" id="exam_table">
                                                <thead style="background-color:#f5f5f5;">
                                                    <tr>
                                                        <th>Subject</th>
                                                        <th style="text-align:right;">Actual Mark</th>
                                                        <th style="text-align:right;">Possible Mark</th>
                                                        <th style="text-align:right;">Percentage (%)</th>
                                                        <th>Grade</th>
                                                        <th>Sub Teacher Comments</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr><td colspan="6" style="text-align:center;">Please use the search button to view results.</td></tr>
                                                </tbody>
                                                <tfoot>
                                                    <tr style="font-weight:bold;">
                                                        <td style="text-align:right;">Grand Total:</td>
                                                        <td style="text-align:right;"></td>
                                                        <td style="text-align:right;"></td>
                                                        <td colspan="3"></td>
                                                    </tr>
                                                </tfoot>
                                            </table>
                                        </div>
                                    </div>
                                </div>

                                <!-- Comments Section -->
                                <div class="comments-section">
                                    <h5>Comments from Class Teacher</h5>
                                    <p id="classTeacherComment">No comment available.</p>
                                    
                                    <h5>Comments from Head/Deputy</h5>
                                    <p id="headTeacherComment">No comment available.</p>
                                </div>
                            </div>
                            <!-- End Table and Comments -->

                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <script>
        // Define learners and levels based on education level
        const educationLevels = {
            preschool: {
                levels: ["ECD A", "ECD B", "ECD C"],
                learners: {
                    "ECD A": [
                        {value: 'ps_ecda1', text: 'Emma Johnson'},
                        {value: 'ps_ecda2', text: 'Noah Williams'}
                    ],
                    "ECD B": [
                        {value: 'ps_ecdb1', text: 'Olivia Brown'},
                        {value: 'ps_ecdb2', text: 'Liam Jones'}
                    ],
                    "ECD C": [
                        {value: 'ps_ecdc1', text: 'Ava Garcia'},
                        {value: 'ps_ecdc2', text: 'Lucas Martinez'}
                    ]
                }
            },
            primary: {
                levels: ["Level 1", "Level 2", "Level 3"],
                learners: {
                    "Level 1": [
                        {value: 'p_l1_1', text: 'John Doe'},
                        {value: 'p_l1_2', text: 'Jane Smith'}
                    ],
                    "Level 2": [
                        {value: 'p_l2_1', text: 'Mary Johnson'},
                        {value: 'p_l2_2', text: 'Peter Brown'}
                    ],
                    "Level 3": [
                        {value: 'p_l3_1', text: 'Alice White'},
                        {value: 'p_l3_2', text: 'David Black'}
                    ]
                }
            },
            secondary: {
                levels: ["Form 1", "Form 2", "Form 3"],
                learners: {
                    "Form 1": [
                        {value: 's_f1_1', text: 'Sarah Wilson'},
                        {value: 's_f1_2', text: 'Michael Taylor'}
                    ],
                    "Form 2": [
                        {value: 's_f2_1', text: 'Emily Anderson'},
                        {value: 's_f2_2', text: 'James Thomas'}
                    ],
                    "Form 3": [
                        {value: 's_f3_1', text: 'Daniel Jackson'},
                        {value: 's_f3_2', text: 'Sophia Harris'}
                    ]
                }
            }
        };

        // Dummy marks per student with sub teacher comments
        const marksByLearner = {
            // Pre School students - ECD A
            'ps_ecda1': [
                {subject: 'Coloring', actual: 85, possible: 100, subTeacherComments: 'Excellent coloring skills. Stays within lines well.'},
                {subject: 'Story Time', actual: 90, possible: 100, subTeacherComments: 'Very attentive during story sessions. Good comprehension.'},
                {subject: 'Play Activities', actual: 88, possible: 100, subTeacherComments: 'Participates actively in group play. Good social skills.'}
            ],
            'ps_ecda2': [
                {subject: 'Coloring', actual: 78, possible: 100, subTeacherComments: 'Improving coloring technique. Needs more practice with staying in lines.'},
                {subject: 'Story Time', actual: 82, possible: 100, subTeacherComments: 'Sometimes distracted during stories. Working on attention span.'},
                {subject: 'Play Activities', actual: 80, possible: 100, subTeacherComments: 'Enjoys individual play more than group activities.'}
            ],
            // Pre School students - ECD B
            'ps_ecdb1': [
                {subject: 'Numbers', actual: 88, possible: 100, subTeacherComments: 'Quick learner with numbers. Can count to 20 confidently.'},
                {subject: 'Letters', actual: 85, possible: 100, subTeacherComments: 'Recognizes most letters. Good phonetic awareness.'},
                {subject: 'Arts & Crafts', actual: 92, possible: 100, subTeacherComments: 'Very creative. Excellent fine motor skills development.'}
            ],
            'ps_ecdb2': [
                {subject: 'Numbers', actual: 75, possible: 100, subTeacherComments: 'Struggles with number recognition beyond 10. Needs extra practice.'},
                {subject: 'Letters', actual: 80, possible: 100, subTeacherComments: 'Recognizes basic letters. Working on letter sounds.'},
                {subject: 'Arts & Crafts', actual: 78, possible: 100, subTeacherComments: 'Enjoys art activities but needs help with scissor skills.'}
            ],
            // Pre School students - ECD C
            'ps_ecdc1': [
                {subject: 'Basic Math', actual: 90, possible: 100, subTeacherComments: 'Excellent addition and subtraction skills for age level.'},
                {subject: 'Reading', actual: 88, possible: 100, subTeacherComments: 'Reading simple sentences fluently. Good comprehension.'},
                {subject: 'Writing', actual: 85, possible: 100, subTeacherComments: 'Good pencil grip. Writing is becoming more legible.'}
            ],
            'ps_ecdc2': [
                {subject: 'Basic Math', actual: 82, possible: 100, subTeacherComments: 'Understands basic math concepts. Needs practice with subtraction.'},
                {subject: 'Reading', actual: 85, possible: 100, subTeacherComments: 'Reading simple words. Working on building vocabulary.'},
                {subject: 'Writing', actual: 80, possible: 100, subTeacherComments: 'Improving letter formation. Needs to work on spacing.'}
            ],
            // Primary students
            'p_l1_1': [
                {subject: 'Mathematics', actual: 78, possible: 100, subTeacherComments: 'Good problem-solving skills. Needs to work on multiplication tables.'},
                {subject: 'English', actual: 65, possible: 100, subTeacherComments: 'Struggles with grammar rules. Needs extra reading practice.'},
                {subject: 'Science', actual: 82, possible: 100, subTeacherComments: 'Very curious and asks good questions. Excellent in practical experiments.'}
            ],
            'p_l1_2': [
                {subject: 'Mathematics', actual: 88, possible: 100, subTeacherComments: 'Excellent mathematical reasoning. Ready for advanced concepts.'},
                {subject: 'English', actual: 72, possible: 100, subTeacherComments: 'Good writing skills. Vocabulary is expanding well.'},
                {subject: 'Science', actual: 90, possible: 100, subTeacherComments: 'Shows great interest in science topics. Asks insightful questions.'}
            ],
            'p_l2_1': [
                {subject: 'Mathematics', actual: 55, possible: 100, subTeacherComments: 'Struggles with fractions. Recommend extra tutoring sessions.'},
                {subject: 'English', actual: 68, possible: 100, subTeacherComments: 'Reading comprehension needs improvement. Practice with comprehension exercises.'},
                {subject: 'Science', actual: 75, possible: 100, subTeacherComments: 'Good participation in class. Understands basic concepts well.'}
            ],
            'p_l2_2': [
                {subject: 'Mathematics', actual: 92, possible: 100, subTeacherComments: 'Exceptional mathematical ability. Consider for math competitions.'},
                {subject: 'English', actual: 85, possible: 100, subTeacherComments: 'Excellent creative writing skills. Very imaginative stories.'},
                {subject: 'Science', actual: 78, possible: 100, subTeacherComments: 'Good understanding of scientific method. Careful in experiments.'}
            ],
            'p_l3_1': [
                {subject: 'Mathematics', actual: 60, possible: 100, subTeacherComments: 'Needs to improve in geometry. Basic concepts are understood.'},
                {subject: 'English', actual: 70, possible: 100, subTeacherComments: 'Writing is improving. Working on sentence structure and punctuation.'},
                {subject: 'Science', actual: 65, possible: 100, subTeacherComments: 'Struggles with remembering scientific terms. Use flashcards for practice.'}
            ],
            'p_l3_2': [
                {subject: 'Mathematics', actual: 80, possible: 100, subTeacherComments: 'Consistent performance. Good application of mathematical concepts.'},
                {subject: 'English', actual: 82, possible: 100, subTeacherComments: 'Excellent reading skills. Comprehension at grade level.'},
                {subject: 'Science', actual: 88, possible: 100, subTeacherComments: 'Very good at scientific reasoning. Enjoys hands-on experiments.'}
            ],
            // Secondary students
            's_f1_1': [
                {subject: 'Mathematics', actual: 85, possible: 100, subTeacherComments: 'Strong algebraic skills. Ready for more complex equations.'},
                {subject: 'English', actual: 78, possible: 100, subTeacherComments: 'Good analytical skills in literature. Essay writing is developing well.'},
                {subject: 'Biology', actual: 82, possible: 100, subTeacherComments: 'Excellent in practical biology. Good understanding of cellular structure.'}
            ],
            's_f1_2': [
                {subject: 'Mathematics', actual: 72, possible: 100, subTeacherComments: 'Understanding basic concepts. Needs more practice with word problems.'},
                {subject: 'English', actual: 80, possible: 100, subTeacherComments: 'Good vocabulary. Working on improving writing fluency.'},
                {subject: 'Biology', actual: 75, possible: 100, subTeacherComments: 'Struggles with memorizing biological terms. Use mnemonics for help.'}
            ],
            's_f2_1': [
                {subject: 'Mathematics', actual: 88, possible: 100, subTeacherComments: 'Excellent in trigonometry. Shows strong mathematical intuition.'},
                {subject: 'English', actual: 85, possible: 100, subTeacherComments: 'Advanced reading comprehension. Critical analysis skills are strong.'},
                {subject: 'Chemistry', actual: 90, possible: 100, subTeacherComments: 'Very good at chemical equations. Safety conscious in lab.'}
            ],
            's_f2_2': [
                {subject: 'Mathematics', actual: 79, possible: 100, subTeacherComments: 'Good understanding of concepts. Needs to check work for careless errors.'},
                {subject: 'English', actual: 82, possible: 100, subTeacherComments: 'Writing style is developing. Working on thesis statements.'},
                {subject: 'Chemistry', actual: 85, possible: 100, subTeacherComments: 'Understands chemical reactions well. Good lab technique.'}
            ],
            's_f3_1': [
                {subject: 'Mathematics', actual: 92, possible: 100, subTeacherComments: 'Exceptional in calculus. Ready for advanced mathematics.'},
                {subject: 'English', actual: 88, possible: 100, subTeacherComments: 'Sophisticated literary analysis. Writing is college-level.'},
                {subject: 'Physics', actual: 90, possible: 100, subTeacherComments: 'Excellent problem-solving in physics. Strong conceptual understanding.'}
            ],
            's_f3_2': [
                {subject: 'Mathematics', actual: 85, possible: 100, subTeacherComments: 'Good performance in advanced math. Consistent effort shown.'},
                {subject: 'English', actual: 80, possible: 100, subTeacherComments: 'Solid writing skills. Working on developing unique voice.'},
                {subject: 'Physics', actual: 82, possible: 100, subTeacherComments: 'Understands physics concepts. Needs practice with complex calculations.'}
            ]
        };

        // Comments data
        const commentsData = {
            'ps_ecda1': {
                classTeacher: "Emma is showing excellent progress in social skills and participation. She enjoys group activities and follows instructions well.",
                headTeacher: "Good overall development. Continue encouraging creative expression."
            },
            'ps_ecda2': {
                classTeacher: "Noah is improving in fine motor skills. Needs more practice with coloring within lines.",
                headTeacher: "Steady progress observed. Focus on hand-eye coordination activities."
            },
            'ps_ecdb1': {
                classTeacher: "Olivia shows strong academic readiness. Excellent number and letter recognition.",
                headTeacher: "Advanced for ECD B level. Consider enrichment activities."
            },
            'ps_ecdb2': {
                classTeacher: "Liam is making good progress. Working on building confidence in group settings.",
                headTeacher: "Consistent improvement noted. Continue with current support strategies."
            },
            'p_l1_1': {
                classTeacher: "John is performing well in Science but needs to improve in English comprehension.",
                headTeacher: "Satisfactory performance. Recommend extra reading practice."
            },
            'p_l1_2': {
                classTeacher: "Jane is consistent across all subjects. Shows good analytical skills.",
                headTeacher: "Excellent performance. Consider advanced learning materials."
            },
            's_f1_1': {
                classTeacher: "Sarah shows strong aptitude for Mathematics. Should participate in math competitions.",
                headTeacher: "Outstanding performance. Monitor for scholarship opportunities."
            },
            's_f3_2': {
                classTeacher: "Sophia needs to improve in Physics. Recommend additional tutoring sessions.",
                headTeacher: "Average performance. Focus on weak areas for final exams."
            }
        };

        function populateLearnerLevels() {
            const educationLevel = document.getElementById('report_type').value;
            const learnerLevelSelect = document.getElementById('learner_level');
            
            learnerLevelSelect.innerHTML = '<option value="">Select Learner Level</option>';
            document.getElementById('learner_name').innerHTML = '<option value="">Select Learner</option>';
            
            if (educationLevel && educationLevels[educationLevel]) {
                educationLevels[educationLevel].levels.forEach(level => {
                    const option = document.createElement('option');
                    option.value = level;
                    option.text = level;
                    learnerLevelSelect.appendChild(option);
                });
            }
        }

        function populateLearnerName() {
            const educationLevel = document.getElementById('report_type').value;
            const learnerLevel = document.getElementById('learner_level').value;
            const learnerNameSelect = document.getElementById('learner_name');

            learnerNameSelect.innerHTML = '<option value="">Select Learner</option>';

            if (educationLevel && learnerLevel && educationLevels[educationLevel] && educationLevels[educationLevel].learners[learnerLevel]) {
                educationLevels[educationLevel].learners[learnerLevel].forEach(l => {
                    const option = document.createElement('option');
                    option.value = l.value;
                    option.text = l.text;
                    learnerNameSelect.appendChild(option);
                });
            }
        }

        function updateTable(learner) {
            const tableBody = document.querySelector('#exam_table tbody');
            const tableFoot = document.querySelector('#exam_table tfoot tr');
            const resultsSection = document.getElementById('resultsSection');
            const classTeacherComment = document.getElementById('classTeacherComment');
            const headTeacherComment = document.getElementById('headTeacherComment');
            
            tableBody.innerHTML = '';
            
            if (!learner || !marksByLearner[learner]) {
                tableBody.innerHTML = '<tr><td colspan="6" style="text-align:center;">No data available for selected student.</td></tr>';
                tableFoot.cells[1].innerText = '';
                tableFoot.cells[2].innerText = '';
                classTeacherComment.textContent = 'No comment available.';
                headTeacherComment.textContent = 'No comment available.';
                resultsSection.style.display = 'block';
                return;
            }

            let totalActual = 0;
            let totalPossible = 0;
            
            marksByLearner[learner].forEach(row => {
                const percentage = (row.possible > 0) ? (row.actual / row.possible) * 100 : 0;
                let grade = '';
                if (percentage >= 80) grade = 'A';
                else if (percentage >= 70) grade = 'B';
                else if (percentage >= 60) grade = 'C';
                else if (percentage >= 50) grade = 'D';
                else grade = 'E';

                totalActual += row.actual;
                totalPossible += row.possible;

                tableBody.innerHTML += `<tr>
                    <td>${row.subject}</td>
                    <td style='text-align:right;'>${row.actual}</td>
                    <td style='text-align:right;'>${row.possible}</td>
                    <td style='text-align:right;'>${percentage.toFixed(2)}</td>
                    <td>${grade}</td>
                    <td>${row.subTeacherComments}</td>
                </tr>`;
            });

            tableFoot.cells[1].innerText = totalActual;
            tableFoot.cells[2].innerText = totalPossible;
            
            // Update comments
            if (commentsData[learner]) {
                classTeacherComment.textContent = commentsData[learner].classTeacher;
                headTeacherComment.textContent = commentsData[learner].headTeacher;
            } else {
                classTeacherComment.textContent = 'No comment available.';
                headTeacherComment.textContent = 'No comment available.';
            }
            
            resultsSection.style.display = 'block';
        }

        // Event listeners
        document.getElementById('report_type').addEventListener('change', function() {
            populateLearnerLevels();
            document.getElementById('resultsSection').style.display = 'none';
        });
        
        document.getElementById('learner_level').addEventListener('change', function() {
            populateLearnerName();
            document.getElementById('resultsSection').style.display = 'none';
        });
        
        document.getElementById('learner_name').addEventListener('change', function() {
            document.getElementById('resultsSection').style.display = 'none';
        });
        
        document.getElementById('exam_type').addEventListener('change', function() {
            document.getElementById('resultsSection').style.display = 'none';
        });

        document.getElementById('searchBtn').addEventListener('click', function() {
            const learner = document.getElementById('learner_name').value;
            const term = document.getElementById('exam_type').value;
            
            if (!learner || !term) {
                alert('Please select both a learner and a term before searching.');
                return;
            }
            
            updateTable(learner);
        });

        // Initialize
        populateLearnerLevels();
    </script>
</body>
</html>