@extends('layouts.app')

@section('content')

<div class="main-card mb-3 card">
		<div class="card-body">
		<h5 class="card-title">Aktifitas Kendaraan 21 Jan 2026</h5>
		<div class="row">
		
			<div class="col-md-6 col-xl-3">
				<div class="card mb-3 widget-content bg-midnight-bloom">
					<div class="widget-content-wrapper text-white">
						<div class="widget-content-left">
							<div class="widget-heading">Total </div>
							<div class="widget-subheading">Kendaraan Masuk</div>
						</div>
						<div class="widget-content-right">
							<div class="widget-numbers text-white"><span>{{number_format($masuk_qty)}}</span></div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="col-md-6 col-xl-3">
				<div class="card mb-3 widget-content bg-arielle-smile">
					<div class="widget-content-wrapper text-white">
						<div class="widget-content-left">
							<div class="widget-heading">Total </div>
							<div class="widget-subheading">Kendaraan Keluar</div>
						</div>
						<div class="widget-content-right">
							<div class="widget-numbers text-white"><span>{{number_format($keluar_qty)}}</span></div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="col-md-6 col-xl-3">
				<div class="card mb-3 widget-content bg-grow-early">
					<div class="widget-content-wrapper text-white">
						<div class="widget-content-left">
							<div class="widget-heading">Total </div>
							<div class="widget-subheading">Pendapatan Parkir</div>
						</div>
						<div class="widget-content-right">
							<div class="widget-numbers text-white"><span>{{number_format($keluar_income)}}</span></div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="col-md-6 col-xl-3">
				<div class="card mb-3 widget-content bg-night-fade">
					<div class="widget-content-wrapper text-white">
						<div class="widget-content-left">
							<div class="widget-heading">Sinkronisasi data </div>
							<div class="widget-subheading">{{date_format(date_create($lastSync),"d F Y H:m")}}</div>
						</div>
						<div class="widget-content-right">
							<div class="widget-numbers text-white"><span></span></div>
						</div>
					</div>
				</div>
			</div>
		
		</div>
	</div>
</div>
<div class="main-card mb-3 card">
		<div class="card-body">
		<div class="row">
			<div class="col-sm-12">
			
			 <canvas id="myChartTypeBarM" style="height:300px;width:100%"></canvas>
			<script>
				var xValues = [];
				var yValues = [];
				var barColors = window.bgs;

				new Chart("myChartTypeBarM", {
					type: "bar",
					data: {
						labels: xValues,
						datasets: [{
							backgroundColor: barColors,
							data: yValues
						}]
					},
					options: {
						title: {
							display: true,
							text: "Pendapatan Bulanan"
						},
						legend: {
							position: 'bottom',
							display: false,
						},

						scales: {
							yAxes: [{
								ticks: {
									beginAtZero: true,
									callback: function(tick) {
										return tick.toLocaleString();
									}
								}
							}],
							xAxes: [{
							ticks: {
								fontColor: '#000'
							},
						}]
						},
						tooltips: {
							mode: 'label',
							label: 'mylabel',
							callbacks: {
								label: function(tooltipItem, data) {
									return tooltipItem.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
								},
							},
						},
						responsive: true,
						maintainAspectRatio: false
					}
				});
			</script>
												
			</div>

		</div>
</div>
</div>
<div class="main-card mb-3 card">
		<div class="card-body">
		<div class="row">
			<div class="col-sm-6">
			
			 <canvas id="myChartTypeBarD" style="width:100%"></canvas>
			<script>
				var xValues = [];
				var yValues = [];
				var barColors = window.bgs;

				new Chart("myChartTypeBarD", {
					type: "bar",
					data: {
						labels: xValues,
						datasets: [{
							backgroundColor: barColors,
							data: yValues
						}]
					},
					options: {
						title: {
							display: true,
							text: "Pendapatan Harian"
						},
						legend: {
							position: 'bottom',
							display: false,
						},

						scales: {
							yAxes: [{
								ticks: {
									beginAtZero: true,
									callback: function(tick) {
										return tick.toLocaleString();
									}
								}
							}],
							xAxes: [{
							ticks: {
								fontColor: '#000'
							},
						}]
						},
						tooltips: {
							mode: 'label',
							label: 'mylabel',
							callbacks: {
								label: function(tooltipItem, data) {
									return tooltipItem.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
								},
							},
						},
						responsive: true,
						maintainAspectRatio: false
					}
				});
			</script>
												
			</div>
			
			<div class="col-sm-6">
			
			 <canvas id="myChartTypeBarW" style="width:100%"></canvas>
			<script>
				var xValues = [];
				var yValues = [];
				var barColors = window.bgs;

				new Chart("myChartTypeBarW", {
					type: "bar",
					data: {
						labels: xValues,
						datasets: [{
							backgroundColor: barColors,
							data: yValues
						}]
					},
					options: {
						title: {
							display: true,
							text: "Pendapatan Mingguan"
						},
						legend: {
							position: 'bottom',
							display: false,
						},

						scales: {
							yAxes: [{
								ticks: {
									beginAtZero: true,
									callback: function(tick) {
										return tick.toLocaleString();
									}
								}
							}],
							xAxes: [{
							ticks: {
								fontColor: '#000'
							},
						}]
						},
						tooltips: {
							mode: 'label',
							label: 'mylabel',
							callbacks: {
								label: function(tooltipItem, data) {
									return tooltipItem.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
								},
							},
						},
						responsive: true,
						maintainAspectRatio: false
					}
				});
			</script>
												
			</div>
		</div>

@endsection