<style type="text/css">     
    .nav-tabs-custom>.nav-tabs>li.active {
        border-top-color: #faa21c;
    }
    .table>tbody>tr>td, .table>thead>tr>th {
        vertical-align: middle !important;
        text-align: center;
    }
</style>

<?php
$currency_symbol = $this->customlib->getSchoolCurrencyFormat();
?>

<div class="content-wrapper" style="min-height: 946px;">
    <section class="content-header">
        <h1><i class="fa fa-line-chart"></i> Discipline Reports</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> Discipline Filters</h3>
                    </div>

                    <div class="box-body">
                        <form id="reportForm" role="form" method="post" action="#" class="form-horizontal">
                            <?php echo $this->customlib->getCSRF(); ?>

                            <!-- MAIN FILTER + SHOW ALL -->
                            <div class="form-group">
                                <div class="col-sm-4">
                                    <label><strong>Filter By</strong></label>
                                    <select id="main_filter" name="main_filter" class="form-control">
                                        <option value="">Select Filter</option>
                                        <option value="learner">Learner Filters</option>
                                        <option value="incident">Incident Filters</option>
                                        <option value="age_gender">Age / Gender</option>
                                    </select>
                                </div>
                                <div class="col-sm-2" style="margin-top:28px;">
                                    <input type="checkbox" id="show_all" name="show_all">
                                    <label for="show_all">Show All</label>
                                </div>
                            </div>

                            <!-- LEARNER FILTERS -->
                            <div id="learner_filters" style="display:none;">
                                <div class="form-group">
                                    <div class="col-sm-4">
                                        <label>Learner Level</label>
                                        <select id="learner_level" name="learner_level" class="form-control">
                                            <option value="">Select Level</option>
                                            <?php
                                            if (!empty($incidents)) {
                                                $levels = array_unique(array_column($incidents, 'class'));
                                                foreach ($levels as $level) {
                                                    echo '<option value="' . htmlspecialchars($level) . '">' . htmlspecialchars($level) . '</option>';
                                                }
                                            }
                                            ?>
                                        </select>
                                    </div>
                                    <div class="col-sm-4">
                                        <label>Learner Class</label>
                                        <select id="learner_class" name="learner_class" class="form-control">
                                            <option value="">Select Class</option>
                                        </select>
                                    </div>
                                    <div class="col-sm-4">
                                        <label>Learner Name</label>
                                        <select id="learner_name" name="learner_name" class="form-control">
                                            <option value="">Select Learner</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <!-- INCIDENT FILTERS -->
                            <div id="incident_filters" style="display:none;">
                                <div class="form-group">
                                    <div class="col-sm-3">
                                        <label>Incident Type</label>
                                        <select id="incident_type" name="incident_type" class="form-control">
                                            <option value="">Select Type</option>
                                            <?php
                                            if (!empty($incidents)) {
                                                $types = array_unique(array_column($incidents, 'incident_type'));
                                                foreach ($types as $type) {
                                                    echo '<option value="' . htmlspecialchars($type) . '">' . htmlspecialchars($type) . '</option>';
                                                }
                                            }
                                            ?>
                                        </select>
                                    </div>
                                    <div class="col-sm-3">
                                        <label>Incident Category</label>
                                        <select id="incident_category" name="incident_category" class="form-control">
                                            <option value="">Select Category</option>
                                            <?php
                                            if (!empty($incidents)) {
                                                $categories = array_unique(array_column($incidents, 'incident_category'));
                                                foreach ($categories as $cat) {
                                                    echo '<option value="' . htmlspecialchars($cat) . '">' . htmlspecialchars($cat) . '</option>';
                                                }
                                            }
                                            ?>
                                        </select>
                                    </div>
                                    <div class="col-sm-3">
                                        <label>Action Taken</label>
                                        <select id="action_taken" name="action_taken" class="form-control">
                                            <option value="">Select Action</option>
                                            <?php
                                            if (!empty($incidents)) {
                                                $actions = array_unique(array_column($incidents, 'action_taken'));
                                                foreach ($actions as $act) {
                                                    echo '<option value="' . htmlspecialchars($act) . '">' . htmlspecialchars($act) . '</option>';
                                                }
                                            }
                                            ?>
                                        </select>
                                    </div>
                                    <div class="col-sm-3">
                                        <label>Outcome</label>
                                        <select id="outcome" name="outcome" class="form-control">
                                            <option value="">Select Outcome</option>
                                            <?php
                                            if (!empty($incidents)) {
                                                $outcomes = array_unique(array_column($incidents, 'outcome'));
                                                foreach ($outcomes as $out) {
                                                    echo '<option value="' . htmlspecialchars($out) . '">' . htmlspecialchars($out) . '</option>';
                                                }
                                            }
                                            ?>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <!-- AGE/GENDER FILTERS -->
                            <div id="age_gender_filters" style="display:none;">
                                <div class="form-group">
                                    <div class="col-sm-6">
                                        <label>Date of Birth (yyyy-mm-dd)</label>
                                        <select id="dob" name="dob" class="form-control">
                                            <option value="">Select DOB</option>
                                            <?php
                                            if (!empty($students)) {
                                                $dobs = array_unique(array_column($students, 'dob'));
                                                sort($dobs);
                                                foreach ($dobs as $dob) {
                                                    echo '<option value="' . htmlspecialchars($dob) . '">' . htmlspecialchars($dob) . '</option>';
                                                }
                                            }
                                            ?>
                                        </select>
                                    </div>
                                    <div class="col-sm-6">
                                        <label>Gender</label>
                                        <select id="gender" name="gender" class="form-control">
                                            <option value="">Select Gender</option>
                                            <option value="Male">Male</option>
                                            <option value="Female">Female</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <!-- SEARCH BUTTON -->
                            <div class="form-group">
                                <div class="col-sm-12">
                                    <button type="submit" id="search_btn" class="btn btn-primary btn-sm pull-right">
                                        <i class="fa fa-search"></i> Search
                                    </button>
                                </div>
                            </div>
                        </form>

                        <!-- RESULTS TABLE -->
                        <div id="results_section" class="table-responsive" style="display:none;">
                            <table class="table table-bordered table-striped">
                                <thead>
                                    <tr class="active">
                                        <th>#</th>
                                        <th>Learner Name</th>
                                        <th>Incident Type</th>
                                        <th>Incident Category</th>
                                        <th>Action Taken</th>
                                        <th>Outcome</th>
                                        <th>Reported To</th>
                                        <th>Reported By</th>
                                        <th>Date</th>
                                    </tr>
                                </thead>
                                <tbody id="results_body">
                                    <tr><td colspan="9" class="text-center">No results found.</td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div> 
                </div>
            </div>
        </div>
    </section>
</div>

<script>
const incidents = <?php echo json_encode($incidents); ?>;
const students = <?php echo json_encode($students); ?>;

// Filter toggles
document.getElementById('main_filter').addEventListener('change', function() {
    document.getElementById('learner_filters').style.display = this.value === 'learner' ? 'block' : 'none';
    document.getElementById('incident_filters').style.display = this.value === 'incident' ? 'block' : 'none';
    document.getElementById('age_gender_filters').style.display = this.value === 'age_gender' ? 'block' : 'none';
});

// Dynamic Learner Class filtering
document.getElementById('learner_level').addEventListener('change', function() {
    const selectedLevel = this.value;
    const classSelect = document.getElementById('learner_class');
    const nameSelect = document.getElementById('learner_name');
    classSelect.innerHTML = '<option value="">Select Class</option>';
    nameSelect.innerHTML = '<option value="">Select Learner</option>';

    if (selectedLevel) {
        const filteredClasses = [...new Set(incidents.filter(i => i.class === selectedLevel).map(i => i.section))];
        filteredClasses.forEach(cls => {
            classSelect.innerHTML += `<option value="${cls}">${cls}</option>`;
        });
    }
});

// Dynamic Learner Name filtering based on Class
document.getElementById('learner_class').addEventListener('change', function() {
    const selectedLevel = document.getElementById('learner_level').value;
    const selectedClass = this.value;
    const nameSelect = document.getElementById('learner_name');
    nameSelect.innerHTML = '<option value="">Select Learner</option>';

    const filteredNames = incidents.filter(i => i.class === selectedLevel && i.section === selectedClass);
    filteredNames.forEach(stu => {
        nameSelect.innerHTML += `<option value="${stu.firstname} ${stu.lastname}">${stu.firstname} ${stu.lastname}</option>`;
    });
});

// Show All checkbox
document.getElementById('show_all').addEventListener('change', function() {
    const resultsSection = document.getElementById('results_section');
    const resultsBody = document.getElementById('results_body');

    if (this.checked) {
        resultsSection.style.display = 'block';
        resultsBody.innerHTML = '';
        incidents.forEach((incident, idx) => {
            resultsBody.innerHTML += `
                <tr>
                    <td>${idx + 1}</td>
                    <td>${incident.firstname} ${incident.lastname}</td>
                    <td>${incident.incident_type}</td>
                    <td>${incident.incident_category}</td>
                    <td>${incident.action_taken}</td>
                    <td>${incident.outcome}</td>
                    <td>${incident.reported_to}</td>
                    <td>${incident.reported_by}</td>
                    <td>${new Date(incident.created_at).toISOString().split('T')[0]}</td>
                </tr>`;
        });
    } else {
        resultsSection.style.display = 'none';
    }
});

// Search Button
document.getElementById('reportForm').addEventListener('submit', function(e) {
    e.preventDefault();

    const mainFilter = document.getElementById('main_filter').value;
    const resultsSection = document.getElementById('results_section');
    const resultsBody = document.getElementById('results_body');
    resultsBody.innerHTML = '';

    let filtered = incidents;

    if (mainFilter === 'learner') {
        const level = document.getElementById('learner_level').value;
        const cls = document.getElementById('learner_class').value;
        const name = document.getElementById('learner_name').value;
        filtered = incidents.filter(i =>
            (!level || i.class === level) &&
            (!cls || i.section === cls) &&
            (!name || `${i.firstname} ${i.lastname}` === name)
        );
    } else if (mainFilter === 'incident') {
        const type = document.getElementById('incident_type').value;
        const category = document.getElementById('incident_category').value;
        const action = document.getElementById('action_taken').value;
        const outcome = document.getElementById('outcome').value;
        filtered = incidents.filter(i =>
            (!type || i.incident_type === type) &&
            (!category || i.incident_category === category) &&
            (!action || i.action_taken === action) &&
            (!outcome || i.outcome === outcome)
        );
    } else if (mainFilter === 'age_gender') {
        const dob = document.getElementById('dob').value;
        const gender = document.getElementById('gender').value;
        filtered = incidents.filter(i =>
            (!dob || i.dob === dob) &&
            (!gender || i.gender === gender)
        );
    }

    if (filtered.length > 0) {
        filtered.forEach((incident, idx) => {
            resultsBody.innerHTML += `
                <tr>
                    <td>${idx + 1}</td>
                    <td>${incident.firstname} ${incident.lastname}</td>
                    <td>${incident.incident_type}</td>
                    <td>${incident.incident_category}</td>
                    <td>${incident.action_taken}</td>
                    <td>${incident.outcome}</td>
                    <td>${incident.reported_to}</td>
                    <td>${incident.reported_by}</td>
                    <td>${new Date(incident.created_at).toISOString().split('T')[0]}</td>
                </tr>`;
        });
    } else {
        resultsBody.innerHTML = '<tr><td colspan="9" class="text-center">No results found.</td></tr>';
    }

    resultsSection.style.display = 'block';
});
</script>
