<?php 

echo '<br>&nbsp; <br><h3>'.FDIR_STATS_PROP2.' ';

$totalfreq = mysqli_query($bdd,"SELECT freq.freq_id FROM ".$prefix."_freq freq WHERE freq.date_freq >= '".$day1."' AND freq.date_freq <= '".$day2."' AND (freq.sexe = 'M' OR freq.sexe = 'F') ".$filtre_activs."");
$totalfreq_nb = mysqli_num_rows($totalfreq);
if($totalfreq_nb==0) {
	echo FSTATS_INF1.'.</h3>';
}
else {
	echo $totalfreq_nb;
	echo ' '.ELEVS1.'.</h3>';
	
	//fréquentation par genre :
	$tabPercentPerGenre = array();
	foreach($tabDebgenre as $genre) {
		$nbeleves_genre = mysqli_query($bdd,"SELECT freq.freq_id FROM ".$prefix."_freq freq WHERE freq.date_freq >= '".$day1."' AND freq.date_freq <= '".$day2."' AND freq.sexe = '".$genre."' ".$filtre_activs."");
		$nbeleves = mysqli_num_rows($nbeleves_genre);
		if($nbeleves==0) {
			$percent_genre_niv = 0;
		}
		else {
			$percent_genre_niv = round(($nbeleves*100/$totalfreq_nb),2);
		}
		array_push($tabPercentPerGenre, $percent_genre_niv);
	}
	
	//fréquentation par genre et par niveau :
	$i=1;
	foreach($tabDebgenre as $genre) {
		$tabNiv[$i] = array();
		if($genre=="F") { $color='green'; }
		if($genre=="M") { $color='red'; }
		$tabColor[$i] = $color;
		$niv=0;
		foreach($tabDebniveau as $divdeb) {	
			$nbeleves_niv = mysqli_query($bdd,"SELECT freq.freq_id FROM ".$prefix."_freq freq WHERE freq.date_freq >= '".$day1."' AND freq.date_freq <= '".$day2."' AND freq.division LIKE '".$divdeb."%'  AND (freq.sexe = 'M' OR freq.sexe = 'F') ".$filtre_activs."");
			$nbniv = mysqli_num_rows($nbeleves_niv);
			$nbeleves_genre = mysqli_query($bdd,"SELECT freq.freq_id FROM ".$prefix."_freq freq WHERE freq.date_freq >= '".$day1."' AND freq.date_freq <= '".$day2."' AND freq.division LIKE '".$divdeb."%' AND freq.sexe = '".$genre."' ".$filtre_activs."");
			$nbeleves = mysqli_num_rows($nbeleves_genre);
			if($nbniv==0||$nbeleves==0) {
				$percent_genre_niv = 0;
			}
			else {
				$percent_genre_niv = round(($nbeleves*100/$nbniv),2);
			}
			$niv++;
			array_push($tabNiv[$i], $percent_genre_niv);			
		}
		$i++;
	}
	$bctab5 = '<table style="text-align:right;">
	<thead><tr><td colspan="'.($niv+2).'" style="text-align:center;">'.FDIR_STATS_PROP3.'<br>'.FROM2.' '.$affday1.' '.TO2.' '.$affday2.'</td></tr><tr><th></th>';
	$nivi=0;
	foreach($tabDebniveau as $divdeb) {
		$bctab5 .= '<th>'.$tabNiveau[$nivi].'</th>';
		$nivi++;
	}
	$bctab5 .= '<th>'.TOTAL.'</th></tr></thead><tbody>';
	$w=1;
	foreach($tabDebgenre as $genre) {
		$bctab5 .= '<tr><td>'.$genre.'</td>';
		$m=0;
		foreach($tabDebniveau as $divdeb) {
			$bctab5 .= '<td>'.number_format((float)$tabNiv[$w][$m],2,'.','').'</td>';
			$m++;
		}
		$bctab5 .= '<td>'.number_format((float)$tabPercentPerGenre[$w-1],2,'.','').'</td></tr>';
		$w++;
	}	
	$bctab5 .= '</tbody></table>';
	?>
	<div id="wrapper" class="statcadre">
	<canvas id="chart_percentgenreperniv" class="charts"></canvas>
	</div>
	<script type="text/javascript">
	(async function() {
	    
	    Chart.register(ChartDataLabels);
	    const labels = <?php echo json_encode($tabNiveau); ?>;
	    const data = {
	      labels: labels,
	      datasets: [ 
			<?php $i=1; $j=1;
			foreach($tabDebgenre as $genre) { ?>
			{
				label: <?php echo json_encode($tabGenre[$i-1]); ?>,
				data: <?php echo json_encode($tabNiv[$i]); ?>,
				backgroundColor: <?php echo json_encode($tabColor[$i]); ?>,
				borderColor: <?php echo json_encode($tabColor[$i]); ?>,
				borderWidth: 1
			} <?php if($j<count($tabGenre)) { echo ','; } $i++; $j++;} ?> ]
	    };
	new Chart(
	    document.getElementById('chart_percentgenreperniv'),
	    {
	    type: 'bar',
	    data: data,
	    options: {
	        plugins: {
	            title: {
	                display: true,
	                text: "<?php echo FDIR_STATS_PROP4; ?>"
	            },
	            legend: {
	                display:true
	            },
	            tooltip : {
	                mode: 'point',
	                intersect: false,
	              }  ,    
	            datalabels: {
	              display: true, // Affiche les étiquettes de données
	              formatter: function(value, context) {
	                    return value + ' %'; // Ajoute le symbole "%" après la valeur
	                },
	              color: '#fff', // Couleur du texte

	              align: 'center', // Alignement horizontal
	              anchor: 'center', // Alignement vertical
	              font: {
	                weight: 'bold', // Style de police
	              },
	              display: function(context) {
	                  return context.dataset.data[context.dataIndex] !== 0; // N'affiche pas si la valeur est égale à 0
	                },
	            },
	        },
	        responsive: true,
	        scales: {
	            yAxes: [{
	                ticks: {
	                    beginAtZero:true
	                }
	            }]
	        },
	      }
	    }
	);
	})();
	</script>
	
	<div id="wrapper" class="statcadre">
	<canvas id="chart_percentpergenre" class="charts" width="400" height="400"></canvas>
	</div>
	<script type="text/javascript">
	(async function() {
	    
	    Chart.register(ChartDataLabels);
	    const labels = <?php echo json_encode($tabGenre); ?>;
	    const data = {
	      labels: labels,
	      datasets: [{
				data: <?php echo json_encode($tabPercentPerGenre); ?>,
				backgroundColor: <?php echo json_encode($tabGenreColor); ?>,
				borderColor: <?php echo json_encode($tabGenreColor); ?>,
			}]
	    };
	new Chart(
	    document.getElementById('chart_percentpergenre'),
	    {
	    type: 'pie',
	    data : data,
	    options: {
	        plugins: {
	            title: {
	                display: true,
	                text: "<?php echo FDIR_STATS_PROP5; ?>"
	            },
	            legend: {
	                display:true
	            },
	            tooltip : {
	                mode: 'point',
	                intersect: false,
	              }  ,    
	            datalabels: {
	              display: true, // Affiche les étiquettes de données
	              formatter: function(value, context) {
	                    return value + ' %'; // Ajoute le symbole "%" après la valeur
	                },
	              color: function(context) {
				        var index = context.dataIndex;
				        var color = '#fff'; // Couleur par défaut

				        // Condition pour déterminer la couleur en fonction de l'index ou d'autres critères
				        if (index === 0) {
				            color = '#fff';
				        } else if (index === 1) {
				            color = '#000';
				        }
				        return color; // Retourne la couleur déterminée
				    },
	              align: 'center', // Alignement horizontal
	              anchor: 'center', // Alignement vertical
	              font: {
	                weight: 'bold', // Style de police
	              },
	              display: function(context) {
	                  return context.dataset.data[context.dataIndex] !== 0; // N'affiche pas si la valeur est égale à 0
	                },
	            },
	        },
	        responsive: true,
	        scales: {
	            yAxes: [{
	                ticks: {
	                    beginAtZero:true
	                }
	            }]
	        },
	      }
	    }
	);
	})();
	</script>
<?php 
echo '<br> <br>'.$bctab5;
$_SESSION['bctabs'] .= '<table></table>'.$bctab5;
} 
?>