<?php
include "../include/config.php";
session_start();
if (isset($_SESSION['email'])){?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Report</title>
    <link rel="stylesheet" href="res/bootstrap@5.2.0.min.css">
    <link rel="stylesheet" href="res/chartist.min.css">
    <link rel="stylesheet" href="@css/style.css">
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito&family=Nunito+Sans&display=swap" rel="stylesheet">




<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" 
href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css"></style>
<script type="text/javascript" 
src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>

    <style>
      body{
        font-family: 'Nunito', sans-serif;
        background: #eceff4;
        color: #7c828c;
      }
      p{
      color: #7c828c;
      }
 .content{
  height:100vh;
   padding: 10px;
   
 }
 .content{
  margin-left: 200px;
  
}
 

 .content{
  z-index: 900;
  }
.card-body{
  padding:6px;
}
.form-control{
  height:40px;
  margin-top:10px;
  color: #7c828c;
  width:100px;
}
.btn{
  padding:10px;
  margin-top:10px;
} 
  .flex{
  justify-content: center;
  display:flex;
  flex-wrap:wrap
  
  width:100%;
}
.field{
width:150px;
}
form{
    width:49%;
    margin:5px;
}
@media only screen and (max-width:500px){

.box{
justify-content:center;
display:flex;
flex-wrap:wrap;
}
form{
    width:100%;
    margin-left:0px;
}
.flex{
display:block;
width:100%;
margin-left:0px;
}
.card{
width:100%;
margin-left:0px;
margin-top:10px;
}
}
    </style>
</head>
<body   style="color:#7c828c; " >
  <?php include "../include/nav.php";?>
<div class="content">
 <div class="alert " style="background:white; padding:15px; margin-top:10px; margin-bottom:10px; border-radius:4px;">
 <h4 style="color: #7c828c; "> <i class="fa fa-pie-chart" style="color: #54B68F; padding:8px; "></i>  Pupil Enrollment  </h4>
 <a style="background: #7c828c; color:white; " class="btn" href="pupils">Pupils List</a>
 </div>
    <div Class="">
    

     
    </div>
      
    <div Class="flex">  
  <form style="background:white; border:none;padding:15px; margin-top:5px; margin-bottom:5px; border-radius:4px;" class=" bg" action="analysisjpdf" method="post">
  <h6> <I class="fa fa-edit"> </I> Count by Grade</h6>
  <hr>
 <table id="myTable" class="table table-striped table-bordered table-responsive table-hover" >        <thead>
            <tr>
                <th>Grade</th>

                <th>Male</th>
                <th>Female</th>
                <th>Total</th>
            </tr>
        </thead>
        <tbody>
            <?php
$result=mysqli_query($conn, "SELECT 
    classsession,
    COUNT(*) AS session_count,
    SUM(CASE WHEN gender = 'Male' THEN 1 ELSE 0 END) AS male_students,
    SUM(CASE WHEN gender = 'Female' THEN 1 ELSE 0 END) AS female_students,
    COUNT(*) AS total_students
FROM 
    students where  school='$school'
GROUP BY 
    classsession;");

            while ($row = mysqli_fetch_assoc($result)) {
              $date=date("Y");
     $grade=$date-$row['classsession']+8;
     $se=$row['classsession'];
      if($grade > 13){
               $grade="Complited";
             }else if($grade=="8"){
             $grade="Form 1";
             }
                if($se == "ECE"){
               $grade="ECE";
             }
             
                ?>
                <tr>
                    <td><?php echo $grade; ?></td>
                  
                    <td><?php echo $row['male_students']; ?></td>
                    <td><?php echo $row['female_students']; ?></td>
                      <td><?php echo $row['total_students']; ?></td>
                </tr>
                <?php
            }
            ?>
        </tbody>
    </table>
 

 

 
 </form>
<form style="background:white; border:none;padding:15px; margin-top:5px; margin-bottom:5px; border-radius:4px;">
  <?php
 
 $nrc=$_SESSION['nrc'];
 $school=$_SESSION['school'];
  $querym=mysqli_query($conn,"select *from students   where gender='Male'AND school='$school'");
  $male=mysqli_num_rows($querym);
  $queryf=mysqli_query($conn,"select *from students  where gender='Female'AND school='$school'");
  $female=mysqli_num_rows($queryf);
?>
   <?php
 
$dataPoints = array( 
	array("label"=>"Male", "symbol" => "Male","y"=>$male),
	array("label"=>"Female", "symbol" => "Female","y"=>$female),
	array("label"=>"Total", "symbol" => "Total","y"=>$male+$female),

 
)
 
?>
<script>
window.onload = function() {
 
var chart = new CanvasJS.Chart("chartContainer", {
	theme: "light2",
	animationEnabled: true,
	title: {
		text: "Pupils Court"
	},
	data: [{
		type: "doughnut",
		indexLabel: "{symbol} - {y}",
		yValueFormatString: "#,##0\"\"",
		showInLegend: true,
		legendText: "{label} : {y}",
		dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
	}]
});
chart.render();
 
}
</script>

 

    <div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
  <script>
    function previewImage(event, id) {
      const reader = new FileReader();
      reader.onload = function () {
        const img = document.getElementById(id);
        img.src = reader.result;
        img.style.display = 'block';
      };
      reader.readAsDataURL(event.target.files[0]);
    }
  </script>
 
 </form>
 <br>  <br>
 </div>
 <?php


?>
 
<?php
 
 $nrc=$_SESSION['nrc'];
 $school=$_SESSION['school'];
  $queryp=mysqli_query($conn,"select *from students  where  school='$school' and gender='Male'");
  $male=mysqli_num_rows($queryp);
  $queryf=mysqli_query($conn,"select *from students  where  school='$school' and gender='Female'");
  $female=mysqli_num_rows($queryf);
$dataPoints = array( 
	array("label"=>  "Female" , "y"=> $female),
	array("label"=>"Male", "y"=> $male)
	
)
 
?>

 <br>
</body>
</html>
<?php
}else {
  header("location:index");
}
?>