<!DOCTYPE html>
<html lang="en">

<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<title>Ramal - Peramalan</title>
	<meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport' />
	<link rel="icon" href="<?php echo base_url() ?>assets/img/icon.ico" type="image/x-icon" />

	<!-- Fonts and icons -->
	<?php $this->load->view('_partial/css.php') ?>
</head>

<body>
	<div class="wrapper">
		<?php $this->load->view('_partial/header.php') ?>

		<!-- Sidebar -->
		<?php $this->load->view('_partial/sidebar') ?>
		<!-- End Sidebar -->

		<div class="main-panel">
			<div class="content">
				<div class="page-inner mt-2">
					<div class="row mt--2">
						<div class="col-md-12">
							<div class="card">
								<div class="card-header">
									<div class="d-flex align-items-center">
										<h4 class="card-title">Ramalan Pengunjung</h4>
									</div>
								</div>
								<div class="card-body">
									<div class="row">
										<div class="col-md-8" style="border:1px solid #dedede; border-radius:5px;">
											<form action="<?= site_url('Peramalan') ?>" method="GET">
												<div class="row">
													<div class="col-md-6">
														<div class="form-group">
															<label for="bulan">Bulan</label>
															<?php
															$bln = array('', 'JANUARI', 'FEBRUARI', 'MARET', 'APRIL', 'MEI', 'JUNI', 'JULI', 'AGUSTUS', 'SEPTEMBER', 'OKTOBER', 'NOVEMBER', 'DESEMBER');
															?>
															<select class="form-control" name="bulan" id="bulan" required>
																<?php foreach ($bln as $key => $value) { ?>
																	<option value="<?= $key ?>" <?php if (isset($_GET['bulan'])) {
																									echo ($key == $_GET['bulan'] ? ' selected ' : '');
																								} else {
																									echo ($key == intval(date('m')) ? ' selected ' : '');
																								} ?>><?= $value ?></option>
																<?php } ?>
															</select>
														</div>
													</div>
													<div class="col-md-6">
														<div class="form-group">
															<label>Tahun</label>
															<input id="tahun" name="tahun" value="<?= isset($_GET['tahun']) ? $_GET['tahun'] : date('Y') ?>" type="number" class="form-control" placeholder="Tahun" style="border: 1px solid #aaa;" required>
														</div>
													</div>
												</div>

												<div class="form-group pt-0">
													<label for="id_pelayanan">Pelayanan</label>
													<select class="form-control" name="id_pelayanan" id="id_pelayanan">
														<option value="">Semua Pelayanan</option>
														<?php foreach ($pelayanan as $pl) { ?>
															<option value="<?= $pl->id ?>" <?php if (isset($_GET['id_pelayanan'])) {
																								echo ($pl->id == $_GET['id_pelayanan'] ? ' selected ' : '');
																							} ?>><?= $pl->nama ?></option>
														<?php } ?>
													</select>
												</div>

												<!-- Button -->
												<div class="py-2 text-center">
													<a href="javascript:;" onclick="handleReset()" class="btn btn-danger">Reset</a>
													<button type="submit" class="btn btn-primary">Prediksi</button>
												</div>
											</form>
										</div>
										<div class="col-md-4" style="border:1px solid #dedede; border-radius:5px;">
											<form id="formAlpha" method="POST">
												<div class="row mt-3">
													<div class="col-md-4">Alpha</div>
													<div class="col-md-8">
														<div class="form-group pt-0">
															<input id="alpha" name="alpha" value="<?= $alpha['alpha'] ?>" class="form-control-sm" placeholder="Alpha" style="border: 1px solid #aaa;" disabled>
														</div>
													</div>
												</div>
												<div class="row">
													<div class="col-md-4">Beta</div>
													<div class="col-md-8">
														<div class="form-group pt-0">
															<input id="beta" name="beta" value="<?= $alpha['beta'] ?>" class="form-control-sm" placeholder="Beta" style="border: 1px solid #aaa;" disabled>
														</div>
													</div>
												</div>
												<div class="row">
													<div class="col-md-4">Gamma</div>
													<div class="col-md-8">
														<div class="form-group pt-0">
															<input id="gamma" name="gamma" value="<?= $alpha['gamma'] ?>" class="form-control-sm" placeholder="Gamma" style="border: 1px solid #aaa;" disabled>
														</div>
													</div>
												</div>
												<div class="row">
													<div class="col-md-4">Periode</div>
													<div class="col-md-8">
														<div class="form-group pt-0">
															<input id="periode" name="periode" value="<?= $alpha['periode'] ?>" type="number" class="form-control-sm" placeholder="Tahun" style="border: 1px solid #aaa;" disabled>
														</div>
													</div>
												</div>
												<!-- <button type="submit" class="btn btn-primary btn-sm">Ubah</button> -->
											</form>
										</div>
									</div>
								</div>
							</div>

							<?php if (count($data) > 0) { ?>
								<!-- HASIL PREDIKSI -->
								<div class="card">
									<div class="card-header">
										<div class="d-flex align-items-center">
											<h4 class="card-title">Hasil Peramalan</h4>
										</div>
									</div>
									<div class="card-body">
										<div class="d-flex flex-wrap justify-content-left pb-2">
											<div class="px-2 pb-2 pb-md-0">
												<h3 class="fw-bold mt-3 mb-0">Pelayanan : <?= isset($detail_pelayanan) ? $detail_pelayanan['nama'] : 'Semua Pelayanan' ?></h3>
											</div>
										</div>
										<div class="d-flex flex-wrap justify-content-left">
											<div class="px-2 pb-2 pb-md-0">
												<h5 class="fw-bold mt-3 mb-0">MAD : <?= isset($MAD) ? $MAD : '-' ?></h5>
											</div>
										</div>
										<div class="d-flex flex-wrap justify-content-left">
											<div class="px-2 pb-2 pb-md-0">
												<h5 class="fw-bold mt-3 mb-0">MSE : <?= isset($MSE) ? $MSE : '-' ?></h5>
											</div>
										</div>
										<div class="d-flex flex-wrap justify-content-left">
											<div class="px-2 pb-2 pb-md-0">
												<h5 class="fw-bold mt-3 mb-0">MAPE : <?= isset($MAPE) ? $MAPE . ' %' : '-' ?></h5>
											</div>
										</div>
										<div class="d-flex flex-wrap justify-content-left">
											<div class="px-2 pb-2 pb-md-0">
												<h5 class="fw-bold mt-3 mb-0">Rata - rata Kesalahan : <?= isset($ratarataKesalahan) ? $ratarataKesalahan : '-' ?></h5>
											</div>
										</div>
									</div>
								</div>

								<!-- chart -->
								<div class="card">
									<div class="card-header">
										<div class="card-title">Grafik Peramalan</div>
									</div>
									<div class="card-body">
										<div id="chart-container" style="height:350px">
											<canvas id="multipleLineChart"></canvas>
										</div>
									</div>
								</div>

								<!-- table perhitungan -->
								<div class="card">
									<div class="card-header">
										<div class="card-title">Tabel Detail</div>
									</div>
									<div class="card-body">
										<div class="table-responsive">
											<table class="display table table-hover">
												<thead>
													<tr>
														<th class="text-center" style="width:5%;">No.</th>
														<th style="width:15%;">Bulan</th>
														<th class="text-center" style="width:5%;">Aktual</th>
														<th class="text-center" style="width:10%;">Lt</th>
														<th class="text-center" style="width:10%;">Bt</th>
														<th class="text-center" style="width:10%;">St</th>
														<th class="text-center" style="width:10%;">Ft+m</th>
														<th style="width:10%;">Persentase Error</th>
													</tr>
												</thead>
												<tbody>
													<?php
													$no = 0;
													foreach ($data as $row) {
														$no++ ?>
														<tr>
															<td><?= $no ?>.</td>
															<td><?= $row['bulan'] ?></td>
															<td class="text-center"><?= $row['jumlah'] ?></td>
															<td class="text-right"><?= $row['lt'] ?></td>
															<td class="text-right"><?= $row['bt'] ?></td>
															<td class="text-right"><?= $row['st'] ?></td>
															<td class="text-right"><?= $row['ft'] ?></td>
															<td class="text-right"><?= $row['error'] ?></td>
														</tr>
													<?php } ?>
												</tbody>
											</table>
										</div>
									</div>
								</div>
							<?php } ?>

						</div>
					</div>
				</div>
			</div>
			<?php $this->load->view('_partial/footer') ?>
		</div>
	</div>

	<div hidden>
		<?php
		$namaBulan = "";
		$aktualGrafik = "";
		$ftGrafik = "";
		foreach ($data as $row) {
			$bln = $row['bulan'];
			$namaBulan  .= "'$bln'" . ", ";
			$aktualGrafik .= $row['jumlah'] . ", ";
			$ftGrafik .= $row['ft'] . ", ";
		}
		?>
	</div>

	<?php $this->load->view('_partial/js.php') ?>

	<script type="text/javascript">
		$('#id_pelayanan').select2();
		$('#bulan').select2();

		function handleReset() {
			window.location.href = site_url + 'Peramalan';
		}

		$(document).on("submit", "#formAlpha", function (event) {
			event.preventDefault();
			$.ajax({
				url: site_url + "/Peramalan/update_alpha",
				method: "POST",
				dataType: "json",
				data: new FormData($("#formAlpha")[0]),
				async: true,
				processData: false,
				contentType: false,
				success: function (data) {
					Toast.fire({
						icon: "success",
						title: data.message,
					});
				},
				fail: function (event) {
					alert(event);
				},
			});
		});

		//Chart
		var multipleLineChart = document.getElementById('multipleLineChart').getContext('2d');

		var myMultipleLineChart = new Chart(multipleLineChart, {
			type: 'line',
			data: {
				labels: [<?php echo $namaBulan; ?>],
				datasets: [{
					label: "Aktual",
					borderColor: "#1d7af3",
					pointBorderColor: "#FFF",
					pointBackgroundColor: "#1d7af3",
					pointBorderWidth: 1,
					pointHoverRadius: 2,
					pointHoverBorderWidth: 1,
					pointRadius: 2,
					backgroundColor: 'transparent',
					fill: true,
					borderWidth: 2,
					data: [<?php echo $aktualGrafik; ?>]
				}, {
					label: "Hasil Ramal",
					borderColor: "#59d05d",
					pointBorderColor: "#FFF",
					pointBackgroundColor: "#59d05d",
					pointBorderWidth: 1,
					pointHoverRadius: 2,
					pointHoverBorderWidth: 1,
					pointRadius: 2,
					backgroundColor: 'transparent',
					fill: true,
					borderWidth: 2,
					data: [<?php echo $ftGrafik; ?>]
				}]
			},
			options: {
				responsive: true,
				maintainAspectRatio: false,
				legend: {
					position: 'top',
				},
				tooltips: {
					bodySpacing: 4,
					mode: "nearest",
					intersect: 0,
					position: "nearest",
					xPadding: 10,
					yPadding: 10,
					caretPadding: 10
				},
				layout: {
					padding: {
						left: 15,
						right: 15,
						top: 15,
						bottom: 15
					}
				}
			}
		});
	</script>
</body>

</html>