<?php 
// Set page title before including header
$pageTitle = "Schools Information Page - E&SE Kotli";
include_once 'header_new.php'; 
?>

<!-- Schools Information Content -->

    <h1 class="text-center text-uppercase stylish-header"><strong>Schools Information</strong></h1>
    
    <div class="row chart-row">
        <div class="col-md-6 chart-col">
            <div class="chart-wrapper">
                <canvas id="maleschoolsPieChart"></canvas>
            </div>
        </div>
        <div class="col-md-6 chart-col">
            <div class="chart-wrapper">
                <canvas id="femaleschoolsPieChart"></canvas>
            </div>
        </div>
    </div>
    
    <div class="row mt-4">
    <div class="col-md-12">
        <div class="card shadow-sm">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">District Kotli Institutions Details</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive" align="center">
                    <table id="schoolsTable" class="table table-striped table-bordered table-hover" style="width:80%" align="center">
                        <thead class="thead-dark">
                            <tr>
                                <th>School Level</th>
                                <th>Male Schools</th>
                                <th>Female Schools</th>
                                <th>Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php
                            include_once 'connect.php';

                            $sql = "SELECT school_level, 
                                   SUM(CASE WHEN school_gender = 'Male' THEN 1 ELSE 0 END) AS male_count,
                                   SUM(CASE WHEN school_gender = 'Female' THEN 1 ELSE 0 END) AS female_count
                                   FROM school_profile
                                   GROUP BY school_level";

                            $result = $conn->query($sql);
                            $totalMale = 0;
                            $totalFemale = 0;
                            $maleData = [];
                            $femaleData = [];
                            $labels = [];

                            if ($result->num_rows > 0) {
                                while ($row = $result->fetch_assoc()) {
                                    echo "<tr>";
                                    echo "<td>" . htmlspecialchars($row["level"]) . "</td>";
                                    echo "<td>" . $row["male_count"] . "</td>";
                                    echo "<td>" . $row["female_count"] . "</td>";
                                    echo "<td>" . ($row["male_count"] + $row["female_count"]) . "</td>";
                                    echo "</tr>";

                                    $labels[] = $row["level"];
                                    $maleData[] = (int)$row["male_count"];
                                    $femaleData[] = (int)$row["female_count"];
                                    $totalMale += (int)$row["male_count"];
                                    $totalFemale += (int)$row["female_count"];
                                }
                            } else {
                                echo "<tr><td colspan='4'>No data available</td></tr>";
                            }
                            $conn->close();
                            ?>
                        </tbody>
                        <tfoot>
                            <tr class="table-info">
                                <th>Total</th>
                                <th><?php echo $totalMale; ?></th>
                                <th><?php echo $totalFemale; ?></th>
                                <th><?php echo ($totalMale + $totalFemale); ?></th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* Chart styling */
    .chart-row {
        margin: 30px 0;
    }
    
    .chart-col {
        margin-bottom: 30px;
    }
    
    .chart-wrapper {
        position: relative;
        margin: 0 auto;
        width: 100%;
        height: 300px; /* Fixed height for consistency */
    }
    
    @media (max-width: 768px) {
        .chart-wrapper {
            height: 250px; /* Slightly smaller on mobile */
        }
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const maleCtx = document.getElementById('maleschoolsPieChart').getContext('2d');
        const femaleCtx = document.getElementById('femaleschoolsPieChart').getContext('2d');

        const maleData = <?php echo json_encode($maleData); ?>;
        const femaleData = <?php echo json_encode($femaleData); ?>;
        const labels = <?php echo json_encode($labels); ?>;

        // Color sets
        const colorSets = {
            male: ['#3498db', '#2980b9', '#1abc9c', '#16a085', '#2ecc71', '#27ae60'],
            female: ['#e91e63', '#c2185b', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3']
        };

        function getColors(data, type) {
            return data.map((_, i) => colorSets[type][i % colorSets[type].length]);
        }

        const chartOptions = {
            responsive: true,
            maintainAspectRatio: false, // Important for fixed height containers
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: {
                        padding: 10,
                        boxWidth: 12,
                        font: {
                            size: 12
                        }
                    }
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return `${context.label}: ${context.raw}`;
                        }
                    }
                }
            }
        };

        // Male chart
        new Chart(maleCtx, {
            type: 'pie',
            data: {
                labels: labels,
                datasets: [{
                    data: maleData,
                    backgroundColor: getColors(maleData, 'male'),
                    borderWidth: 1,
                    borderColor: '#fff'
                }]
            },
            options: {
                ...chartOptions,
                plugins: {
                    ...chartOptions.plugins,
                    title: {
                        display: true,
                        text: 'Male Schools',
                        font: {
                            size: 14,
                            weight: 'bold'
                        }
                    }
                }
            }
        });

        // Female chart
        new Chart(femaleCtx, {
            type: 'pie',
            data: {
                labels: labels,
                datasets: [{
                    data: femaleData,
                    backgroundColor: getColors(femaleData, 'female'),
                    borderWidth: 1,
                    borderColor: '#fff'
                }]
            },
            options: {
                ...chartOptions,
                plugins: {
                    ...chartOptions.plugins,
                    title: {
                        display: true,
                        text: 'Female Schools',
                        font: {
                            size: 14,
                            weight: 'bold'
                        }
                    }
                }
            }
        });
    });
</script>

<?php include_once 'footer_new.php'; ?>