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

    <style>
        .content-container {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 30px;
            margin: 20px auto;
            max-width: 1200px;
        }
        
        .stylish-header {
            color: #2c3e50;
            margin-bottom: 30px;
            position: relative;
            padding-bottom: 15px;
            text-align: center;
        }
        
        .stylish-header::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 3px;
            background: #f39c12;
        }
        
        .chart-row {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 30px;
            margin: 40px 0;
        }
        
        .chart-wrapper {
            width: 100%;
            max-width: 500px;
            height: 350px;
            margin: 0 auto;
        }
        
        .card {
            border: none;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .card-header {
            background-color: #2c3e50;
            color: white;
            border-radius: 8px 8px 0 0 !important;
        }
        
        .table-responsive {
            overflow-x: auto;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        
        th {
            background-color: #2c3e50;
            color: white;
            padding: 12px;
            text-align: center;
        }
        
        td {
            padding: 12px;
            text-align: center;
            border: 1px solid #ddd;
        }
        
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        
        .table-info {
            background-color: #e9f7fe;
            font-weight: bold;
        }
        
        @media (max-width: 768px) {
            .chart-wrapper {
                height: 300px;
            }
            
            .content-container {
                padding: 15px;
            }
        }
    </style>
</head>
<body>
    
        <h1 class="text-center text-uppercase stylish-header"><strong>Student Information</strong></h1>
        
        <div class="row chart-row" style="display: flex; flex-wrap: nowrap; justify-content: center; gap: 20px; margin: 40px 0;">
    <div class="col-md-6" style="flex: 1; min-width: 0;">
        <div class="card shadow-sm">
            <div class="card-header">
                <h5 class="mb-0 text-center">Male Students Distribution</h5>
            </div>
            <div class="card-body">
                <div class="chart-wrapper">
                    <canvas id="malePieChart"></canvas>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6" style="flex: 1; min-width: 0;">
        <div class="card shadow-sm">
            <div class="card-header">
                <h5 class="mb-0 text-center">Female Students Distribution</h5>
            </div>
            <div class="card-body">
                <div class="chart-wrapper">
                    <canvas id="femalePieChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>
        <div class="card shadow-sm">
            <div class="card-header">
                <h5 class="mb-0">District Kotli Student Details</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped table-bordered">
                        <thead class="thead-dark">
                            <tr>
                                <th>Class</th>
                                <th>Male Students</th>
                                <th>Female Students</th>
                                <th>Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php
                            include_once 'connect.php';
                            $sql = "SELECT class, male_students, female_students FROM students1 ORDER BY id ASC";
                            $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>Class " . $row["class"] . "</td>";
                                    echo "<td>" . $row["male_students"] . "</td>";
                                    echo "<td>" . $row["female_students"] . "</td>";
                                    echo "<td>" . ($row["male_students"] + $row["female_students"]) . "</td>";
                                    echo "</tr>";
                                    
                                    $labels[] = "Class " . $row["class"];
                                    $maleData[] = (int)$row["male_students"];
                                    $femaleData[] = (int)$row["female_students"];
                                    $totalMale += (int)$row["male_students"];
                                    $totalFemale += (int)$row["female_students"];
                                }
                            } else {
                                echo "<tr><td colspan='4'>No results found</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>
    

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

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

            // Generate consistent colors for both charts
            function generateColors(count) {
                const colors = [];
                for (let i = 0; i < count; i++) {
                    const hue = Math.round((i * 360 / count) % 360);
                    colors.push(`hsl(${hue}, 70%, 60%)`);
                }
                return colors;
            }

            const chartColors = generateColors(labels.length);

            // Male Students Chart
            new Chart(maleCtx, {
                type: 'pie',
                data: {
                    labels: labels,
                    datasets: [{
                        data: maleData,
                        backgroundColor: chartColors,
                        borderColor: '#fff',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right',
                            labels: {
                                padding: 10,
                                boxWidth: 12,
                                font: {
                                    size: 12
                                }
                            }
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    const label = context.label || '';
                                    const value = context.raw || 0;
                                    const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                    const percentage = Math.round((value / total) * 100);
                                    return `${label}: ${value} (${percentage}%)`;
                                }
                            }
                        }
                    }
                }
            });

            // Female Students Chart
            new Chart(femaleCtx, {
                type: 'pie',
                data: {
                    labels: labels,
                    datasets: [{
                        data: femaleData,
                        backgroundColor: chartColors,
                        borderColor: '#fff',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right',
                            labels: {
                                padding: 10,
                                boxWidth: 12,
                                font: {
                                    size: 12
                                }
                            }
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    const label = context.label || '';
                                    const value = context.raw || 0;
                                    const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                    const percentage = Math.round((value / total) * 100);
                                    return `${label}: ${value} (${percentage}%)`;
                                }
                            }
                        }
                    }
                }
            });
        });
    </script>

    <?php include('footer_new.php'); ?>