<?php
$path = "../../";
include("../../map.php");
// s4 verilerini çek
$sql = mysqli_query($conn, "SELECT s4 FROM t2 WHERE ne='request' $luye");
$counts = [0 => 0, 1 => 0, 2 => 0];
$total = 0;
while ($row = mysqli_fetch_assoc($sql)) {
    $s4 = (int)$row['s4'];
    if (isset($counts[$s4])) {
        $counts[$s4]++;
    }
    $total++;
}
?>
<div class="row text-center">
	<?php
	$status = [
		0 => "Beklemede",
		1 => "İşleme Alındı",
		2 => "Tamamlanan",
	];
	foreach ($status as $key => $label) {
		$value = $counts[$key];
		?>
		<div class="col-xl-3 col-md-3 col-sm-3 text-center cp" onclick="location.href='?ne=request&islem=request&s4=<?php echo $key; ?>'">
			<div class="gauge-chart">
				<canvas id="gaugeBasic<?php echo $key; ?>" width="180" height="110" data-plugin-options='{ "value": <?php echo $value; ?>, "maxValue": <?php echo $total ?: 1; ?> }'></canvas>
				<strong><?php echo ctranslate($label); ?></strong>
				<label id="gaugeBasic<?php echo $key; ?>Textfield" style="position: absolute; top: 50px; left: 0px; font-size: 30px;" class="digi notranslate"></label>
			</div>
		</div>
	<?php } ?>
	<!-- Tüm kayıtlar -->
	<div class="col-xl-3 col-md-3 col-sm-3 text-center cp" onclick="location.href='?ne=request&islem=request'">
		<div class="gauge-chart">
			<canvas id="gaugeBasic4" width="180" height="110" data-plugin-options='{ "value": <?php echo $total; ?>, "maxValue": <?php echo $total ?: 1; ?> }'></canvas>
			<strong><?php echo translate("Tüm") . " " . telefon($module["requests"]); ?></strong>
			<label id="gaugeBasic4Textfield" style="position: absolute; top: 50px; left: 0px; font-size: 30px;" class="digi notranslate"></label>
		</div>
	</div>
</div>
<script>
jQuery(document).ready(function(){
	for (let i = 0; i < 5; i++) {
		(function() {
			let $canvas = jQuery('#gaugeBasic' + i);
			if ($canvas.length) {
				let opts = $.extend(true, {}, {
					lines: 12,
					angle: 0.12,
					lineWidth: 0.5,
					pointer: {
						length: 0.7,
						strokeWidth: 0.05,
						color: '#444'
					},
					limitMax: 'true',
					colorStart: '#0088CC',
					colorStop: '#0088CC',
					strokeColor: '#F1F1F1',
					generateGradient: true
				}, $canvas.data('plugin-options'));
				let gauge = new Gauge($canvas.get(0)).setOptions(opts);
				gauge.maxValue = opts.maxValue;
				gauge.animationSpeed = 32;
				gauge.set(opts.value);
				gauge.setTextField(document.getElementById("gaugeBasic" + i + "Textfield"));
			}
		})();
	}
});
</script>