<html>
<head> 
<title>Laporan Grafik</title>
</head>
<body style="font-family: Times, Times New Roman, Georgia, serif;">
<style type="text/css">
hr.style-one {
border-color: black;border-width: 1px 0 0 0;
}
hr.style-three {
    border: 0;
    border-bottom: 1px dashed #000;
    background: #999;
}
@media  hr.style-one {
border-color: black;border-width: 2px 0 0 0;
}
hr.style-three {
    border: 0;
    border-bottom: 1px dashed #000;
    background: #999;
}
@media print{
   .noprint{
       display:none;
   }
}
@media  .button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 14px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  margin: 4px 2px;
  cursor: pointer;
}
</style>
<body style="font-family: Verdana, Geneva, sans-serif;">
<table border="0" cellpadding="0" cellspacing="0" style="width:650px;margin-left: auto;margin-right: auto; font-size:12px;" class="noprint">
		<tr>
			<td style="text-align: center;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button class="button" onclick="window.print()">Cetak</button></td>
		</tr>
		<tr>
			<td style="text-align: center;">&nbsp;</td>
		</tr>		
	</tbody>
</table> 
<table border="0" cellpadding="0" cellspacing="0" style="width:1300px;margin-left: auto;margin-right: auto; font-size:12px;">	
	<tbody>
		<tr align="center">
			<td rowspan="5" align="center" style="width:10%"><img src="<?php echo base_url();?>images/logokotamadiun.jpg" alt="logokotamadiun" width="80" height="90"></td>
			<td style="text-align: center;font-size:14pt;width: 140mm;color:#00468e; width:85%"><strong> GEDUNG DIKLAT PEMERINTAH KOTA MADIUN </strong></td> 
		</tr>
		<tr>
			<td style="text-align: center;font-size:12pt;color:#00468e;width:85%"><strong>Laporan Sewa Fasilitas Tahun <?php echo $thn;?></strong></td>
		</tr>
		<tr>
			<td style="text-align: center;font-size:9pt;width:85%"><strong>Jalan Duku No 1 Kota Madiun</strong></td>
		</tr>		
		<tr>
			<td style="text-align: center;font-size:9pt;width:85%">Telp : (0351)  465095, 081 335 125 111</td>
		</tr>					
	</tbody>
</table> 
<table border="0" cellpadding="0" cellspacing="0" style="width:1300px;margin-left: auto;margin-right: auto; font-size:12px;">	
		<tr>
			<td style="text-align: center;"><hr class="style-one"></td>
		</tr>		
	</tbody>
</table>

<table border="1" cellpadding="0" cellspacing="0" style="width:1300px;margin-left: auto;margin-right: auto; font-size:12px;">	
	<tbody>
		<tr>
			<td style="text-align: center;background-color: #349467; color: #FFF;">No</td>
			<td style="text-align: center;background-color: #349467; color: #FFF;">Nama fasilitas</td>
			<td style="text-align: center;background-color: #349467; color: #FFF;">Waktu</td>
			<td style="text-align: center;background-color: #349467; color: #FFF;">Jumlah</td>
		</tr>
<?php 
$no=0;
foreach($fasilitas->result() as $row){  $no++;
$idfasilitas = $row->idfasilitas;
$namafasilitas = $row->namafasilitas;
$waktu = $row->waktu;
$total = $this->m_laporan->jumlahpesan($idfasilitas, $thn);	

?>
		<tr>
			<td  style="text-align: center;"><?php echo $no;?></td>
			<td  style="text-align: left;"><?php echo $namafasilitas;?></td>
			<td  style="text-align: center;"><?php if($waktu=='0'){ echo 'Siang';}elseif($waktu=='1'){ echo 'Malam';}else{ echo 'Full Day';};?></td>
			<td  style="text-align: center;"><?php $tot[] = $total->jumlah; echo $total->jumlah;?></td>
		</tr>
<?php }?>
		<tr>
			<td  style="text-align: center;" colspan="3">Grand Total</td>
			<td  style="text-align: center;"><?php echo array_sum($tot);?></td>
		</tr>
	</tbody>
</table>
<br />
<table border="0" cellpadding="0" cellspacing="0" style="width:1300px;margin-left: auto;margin-right: auto; font-size:12px;">	
		<tr>
			<td style="text-align: center;"><hr class="style-one"></td>
		</tr>		
	</tbody>
</table>

<table border="0" cellpadding="0" cellspacing="0" style="width:1300px;margin-left: auto;margin-right: auto; font-size:12px;">	
		<tr>
			<td style="text-align: center;"><h4><strong>Jumlah  Pemakai Gedung Diklat Pemerintah Kota Madiun Tahun <?php echo date('Y');?><strong></h4></div>
		</tr>		
	</tbody>
</table>

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
				<div class="col-xs-8  col-sm-offset-2"  style="width:1300px;margin-left: auto;margin-right: auto; font-size:12px;">					
			<canvas id="myChart" width="100px"></canvas>			
			<script>
			var ctx = document.getElementById('myChart').getContext('2d');
			var myChart = new Chart(ctx, {
				type: 'bar',
				data: {
					labels: ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'],
					datasets: [{
						label: 'Jumlah Pemakai',
						data: [
						7,
						7,
						13,
						4,
						20,
						27,
						15,
						11,
						17,
						5,
						2,
						1,
												],
						backgroundColor: [
							'rgba(255, 99, 132, 0.2)',
							'rgba(54, 162, 235, 0.2)',
							'rgba(200, 0, 130, 0.2)',
							'rgba(20, 40, 40, 0.2)',
							'rgba(60, 200, 40, 0.2)',
							'rgba(200, 200, 200, 0.2)',
							'rgba(67, 111, 59, 0.2)',
							'rgba(65, 200, 235, 0.2)',
							'rgba(0, 162, 0, 0.2)',
							'rgba(0, 0, 235, 0.2)',
							'rgba(55, 162, 0, 0.2)',
							'rgba(25, 89, 66, 0.2)',

						],
						borderColor: [
							'rgba(255, 99, 132, 1)',
							'rgba(54, 162, 235, 1)',
							'rgba(200, 0, 130, 1)',
							'rgba(20, 40, 40, 1)',
							'rgba(60, 200, 40, 1)',
							'rgba(200, 200, 200, 1)',
							'rgba(67, 111, 59, 1)',
							'rgba(65, 200, 235, 1)',
							'rgba(0, 162, 0, 1)',
							'rgba(0, 0, 235, 1)',
							'rgba(55, 162, 0, 1)',
							'rgba(25, 89, 66, 1)',

						],
						borderWidth: 1
					}]
				},
				options: {
					scales: {
						yAxes: [{
							ticks: {
								beginAtZero: true
							}
						}]
					}
				}
			});
			</script>
		 </div>
				  </div>
				</div>
				<!-- /.span -->
			  </div>
			  <!-- /.main-content -->
			</div>
		<!-- basic scripts -->
			<script>
    $(document).ready(function(){
        $('#tabel-data').DataTable();
    });
    $(document).ready(function(){
        $('#tabel-data2').DataTable();
    });
    $(document).ready(function(){
        $('#tabel-data3').DataTable();
    });
    $(document).ready(function(){
        $('#tabel-data4').DataTable();
    });
</script>
		<script src="https://gedungdiklatmadiun.id/assets_v2/js/bootstrap.min.js"></script>
<!-- basic scripts -->

		<script src="https://gedungdiklatmadiun.id/assets_v2/js/jquery-ui.custom.min.js"></script>
		<script src="https://gedungdiklatmadiun.id/assets_v2/js/jquery.ui.touch-punch.min.js"></script>
		<script src="https://gedungdiklatmadiun.id/assets_v2/js/chosen.jquery.min.js"></script>
		<script src="https://gedungdiklatmadiun.id/assets_v2/js/spinbox.min.js"></script>
		<script src="https://gedungdiklatmadiun.id/assets_v2/js/bootstrap-datepicker.min.js"></script>
		<script src="https://gedungdiklatmadiun.id/assets_v2/js/bootstrap-timepicker.min.js"></script>
		<script src="https://gedungdiklatmadiun.id/assets_v2/js/moment.min.js"></script>
		<script src="https://gedungdiklatmadiun.id/assets_v2/js/daterangepicker.min.js"></script>
		<script src="https://gedungdiklatmadiun.id/assets_v2/js/bootstrap-datetimepicker.min.js"></script>
		<script src="https://gedungdiklatmadiun.id/assets_v2/js/bootstrap-colorpicker.min.js"></script>
		<script src="https://gedungdiklatmadiun.id/assets_v2/js/jquery.knob.min.js"></script>
		<script src="https://gedungdiklatmadiun.id/assets_v2/js/autosize.min.js"></script>
		<script src="https://gedungdiklatmadiun.id/assets_v2/js/jquery.inputlimiter.min.js"></script>
		<script src="https://gedungdiklatmadiun.id/assets_v2/js/jquery.maskedinput.min.js"></script>
		<script src="https://gedungdiklatmadiun.id/assets_v2/js/bootstrap-tag.min.js"></script>


		<!-- page specific plugin scripts -->
		<script src="https://gedungdiklatmadiun.id/assets_v2/js/jquery.dataTables.min.js"></script>
		<script src="https://gedungdiklatmadiun.id/assets_v2/js/jquery.dataTables.bootstrap.min.js"></script>
		<script src="https://gedungdiklatmadiun.id/assets_v2/js/dataTables.buttons.min.js"></script>

		<script src="https://gedungdiklatmadiun.id/assets_v2/js/dataTables.select.min.js"></script>

		<!-- ace scripts -->
		<script src="https://gedungdiklatmadiun.id/assets_v2/js/ace-elements.min.js"></script>
		<script src="https://gedungdiklatmadiun.id/assets_v2/js/ace.min.js"></script>
	</body>
</html>