<!-- Container Fluid-->
<div class="container-fluid" id="container-wrapper">
	
    <div class="row mb-3">
		<div class="col-xl-6 col-md-6 mb-4">
			<div class="card h-100">
				<div class="card-body" id="LoadingKonsumen">
					<div class="row align-items-center">
						<div class="col mr-2">
							<div class="text-xs font-weight-bold text-uppercase mb-1">Total Konsumen Baru</div>
							<div class="h5 mb-0 font-weight-bold text-gray-800"><?=$baru;?></div>
						</div>
						<div class="col-auto">
							<a href="<?=base_url('konsumen');?>">
								<i class="fa fa-user fa-2x text-primary"></i>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-6 col-md-6 mb-4">
			<div class="card h-100">
				<div class="card-body" id="LoadingKonsumen">
					<div class="row align-items-center">
						<div class="col mr-2">
							<div class="text-xs font-weight-bold text-uppercase mb-1">Total Konsumen Lama</div>
							<div class="h5 mb-0 font-weight-bold text-gray-800"><?=$lama;?></div>
						</div>
						<div class="col-auto">
							<a href="<?=base_url('konsumen');?>">
								<i class="fa fa-user fa-2x text-primary"></i>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Grafik kedatangan konsumen -->
		<div class="col-sm-12 col-md-12 col-lg-12" id="LoadingGrafik">
			<div class="card mb-4">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
					<h6 class="m-0 font-weight-bold text-primary" id="nama_bulan_konsumen">Grafik Pertumbuhan Konsumen Perbulan <?=$bulan;?></h6>
					<form method="get" action="">
						<label for="month">Bulan:</label>
						<select name="month" id="month" class="filter">
							<?php foreach ($months as $m): ?>
							<option value="<?= str_pad($m, 2, '0', STR_PAD_LEFT); ?>" <?= (date('m') == str_pad($m, 2, '0', STR_PAD_LEFT)) ? 'selected' : ''; ?>>
								<?= date('F', mktime(0, 0, 0, $m, 1)); ?>
							</option>
							<?php endforeach; ?>
						</select>
						
						<label for="year">Tahun:</label>
						<select name="year" id="year" class="filter">
							<?php foreach ($years as $y): ?>
							<option value="<?= $y; ?>" <?= (date('Y') == $y) ? 'selected' : ''; ?>><?= $y; ?></option>
							<?php endforeach; ?>
						</select>
						
						<input type="submit" value="Filter" class="filter">
					</form>
				</div>
                <div class="card-body">
					<div class="chart-area" id="ChartKonsumenLoading">
						<canvas id="buyersChart"></canvas>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<style>
	.filter{border-color:#bbbbbb}
</style>
<script>
	const ctx = document.getElementById('buyersChart').getContext('2d');
    const labels = <?= json_encode(array_column($buyers_data, 'transaction_date')); ?>;
    const new_buyers = <?= json_encode(array_column($buyers_data, 'new_buyers')); ?>;
    const old_buyers = <?= json_encode(array_column($buyers_data, 'old_buyers')); ?>;
	
</script>
<?php
	$this->RenderScript[] = function() {
	?>
	
	<script>
		
		const buyersChart = new Chart(ctx, {
			type: 'line', // Change to 'bar' for a bar chart
			data: {
				labels: labels,
				datasets: [
                {
                    label: 'Pembeli Baru',
                    data: new_buyers,
                    backgroundColor: 'rgba(75, 192, 192, 0.5)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    fill: false,
				},
                {
                    label: 'Pembeli Lama',
                    data: old_buyers,
                    backgroundColor: 'rgba(153, 102, 255, 0.5)',
                    borderColor: 'rgba(153, 102, 255, 1)',
                    fill: false,
				}
				]
			},
			options: {
				responsive: true,
				scales: {
					y: {
						beginAtZero: true
					}
				}
			}
		});
	</script>
<?php } ?>