<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;
    }

    .student-section {
        margin-top: 30px;
        page-break-inside: avoid;
    }

    .print-button-container {
        margin-top: 20px;
        text-align: right;
    }

    @media (max-width: 768px) {
        .filter-row {
            flex-direction: column;
        }
    }
</style>

<div class="content-wrapper" style="min-height: 946px;">
    <section class="content-header">
        <h1>
            <i class="fa fa-line-chart"></i> 
            BI 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 role="form" action="<?php echo site_url('admin/bireports/termreport') ?>" method="post" class="form-horizontal">
                            <?php echo $this->customlib->getCSRF(); ?>
                            <!-- 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="education_level" name="education_level" 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="term" id="term" 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="submit" name="search" value="search_filter" class="btn btn-primary btn-sm checkbox-toggle">
                                        <i class="fa fa-search"></i> Search
                                    </button>
                                </div>
                            </div>
                        </form>

                        <?php if (isset($exp_title)) { ?>
                        <!-- Results Section -->
                        <div id="resultsSection">
                            <div class="row" style="margin-top:30px;">
                                <div class="col-md-12">
                                    <h4><i class="fa fa-table"></i> Exam 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>
                                                <!-- Sample Data -->
                                                <tr>
                                                    <td>Mathematics</td>
                                                    <td style="text-align:right;">85</td>
                                                    <td style="text-align:right;">100</td>
                                                    <td style="text-align:right;">85.00</td>
                                                    <td>A</td>
                                                    <td>Excellent mathematical reasoning. Ready for advanced concepts.</td>
                                                </tr>
                                                <tr>
                                                    <td>English</td>
                                                    <td style="text-align:right;">78</td>
                                                    <td style="text-align:right;">100</td>
                                                    <td style="text-align:right;">78.00</td>
                                                    <td>B+</td>
                                                    <td>Good writing skills. Vocabulary is expanding well.</td>
                                                </tr>
                                                <tr>
                                                    <td>Science</td>
                                                    <td style="text-align:right;">92</td>
                                                    <td style="text-align:right;">100</td>
                                                    <td style="text-align:right;">92.00</td>
                                                    <td>A</td>
                                                    <td>Shows great interest in science topics. Asks insightful questions.</td>
                                                </tr>
                                            </tbody>
                                            <tfoot>
                                                <tr style="font-weight:bold; background-color:#f5f5f5;">
                                                    <td style="text-align:right;">Grand Total:</td>
                                                    <td style="text-align:right;">255</td>
                                                    <td style="text-align:right;">300</td>
                                                    <td style="text-align:right;">85.00</td>
                                                    <td colspan="2">Overall Grade: A</td>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                            </div>

                            <!-- Comments Section -->
                            <div class="comments-section">
                                <h5>Comments from Class Teacher</h5>
                                <p>Emma is showing excellent progress in all subjects. She demonstrates strong analytical skills and consistently completes assignments on time. Her participation in class discussions is outstanding and she shows great leadership potential among her peers.</p>
                                
                                <h5>Comments from Head/Deputy</h5>
                                <p>Outstanding performance across all subjects. Emma shows remarkable dedication to her studies and serves as a positive role model for other students. We recommend considering her for advanced placement in mathematics and science programs.</p>
                            </div>

                            <!-- Print Button -->
                            <div class="print-button-container">
                                <button id="printTermReportBtn" class="btn btn-info printInv"  
                                        data-date_from="<?= htmlspecialchars($date_from2) ?>"  
                                        data-date_to="<?= htmlspecialchars($date_to2) ?>"                          
                                        data-report_type="<?= htmlspecialchars($report_type) ?>" 
                                        title="Print Term Report">
                                    <i class="fa fa-print"></i> Print Term Report
                                </button>
                            </div>
                        </div>
                        <?php } ?>
                    </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'}
            ]
        }
    }
};

function populateLearnerLevels() {
    const educationLevel = document.getElementById('education_level').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('education_level').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);
        });
    }
}

// Event listeners
document.getElementById('education_level').addEventListener('change', populateLearnerLevels);
document.getElementById('learner_level').addEventListener('change', populateLearnerName);

// Print functionality
$(document).ready(function () {
    $(document).on('click', '#printTermReportBtn', function () {
        var date_from = $(this).data('date_from');
        var date_to = $(this).data('date_to');
        var report_type = $(this).data('report_type');

        $.ajax({
            url: '<?php echo site_url("admin/bireports/printTermReport") ?>',
            type: 'post',
            data: {
                'date_from': date_from,
                'date_to': date_to,
                'report_type': report_type
            },
            success: function (response) {
                Popup(response);
            }
        });
    });
});

// Print popup function
function Popup(data) {
    var frame1 = $('<iframe />');
    frame1[0].name = "frame1";
    frame1.css({"position": "absolute", "top": "-1000000px"});
    $("body").append(frame1);
    var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;
    frameDoc.document.open();
    frameDoc.document.write('<html>');
    frameDoc.document.write('<head>');
    frameDoc.document.write('<title></title>');
    frameDoc.document.write('<link rel="stylesheet" href="<?php echo base_url(); ?>backend/bootstrap/css/bootstrap.min.css">');
    frameDoc.document.write('<link rel="stylesheet" href="<?php echo base_url(); ?>backend/dist/css/font-awesome.min.css">');
    frameDoc.document.write('<link rel="stylesheet" href="<?php echo base_url(); ?>backend/dist/css/AdminLTE.min.css">');
    frameDoc.document.write('</head>');
    frameDoc.document.write('<body>');
    frameDoc.document.write(data);
    frameDoc.document.write('</body>');
    frameDoc.document.write('</html>');
    frameDoc.document.close();
    setTimeout(function () {
        window.frames["frame1"].focus();
        window.frames["frame1"].print();
        frame1.remove();
    }, 500);
    return true;
}
</script>