@extends("template.master")

@section("section_content")


<!-- Content Header (Page header) -->
<section class="content-header">
	<h1>
		Home Interface
		  <script language="JavaScript">
    var tanggallengkap = new String();
    var namahari = ("Minggu Senin Selasa Rabu Kamis Jumat Sabtu");
    namahari = namahari.split(" ");
    var namabulan = ("Januari Februari Maret April Mei Juni Juli Agustus September Oktober November Desember");
    namabulan = namabulan.split(" ");
    var tgl = new Date();
    var hari = tgl.getDay();
    var tanggal = tgl.getDate();
    var bulan = tgl.getMonth();
    var tahun = tgl.getFullYear();
    tanggallengkap = namahari[hari] + ", " +tanggal + " " + namabulan[bulan] + " " + tahun;
    </script>
		<small><script language='JavaScript'>document.write(tanggallengkap);</script></small>
	</h1>
	<ol class="breadcrumb">
		<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
		<li class="active">Dashboard</li>
	</ol>
</section>

<!-- Main content -->
<section class="content">
	<div class="row">
		<div class="col-lg-3 col-xs-6">
			<!-- small box -->
			<div class="small-box bg-green">
				<div class="inner">
					<h3>{{$jumlah_user}}</h3>
					<p>Jumnlah User</p>
				</div>
				<div class="icon">
					<i class="fa fa-users"></i>
				</div>
			</div>
			
		</div><!-- ./col -->
		<div class="col-lg-3 col-xs-6">
			<!-- small box -->
			<div class="small-box bg-red">
				<div class="inner">
					<h3>{{$jumlah_jurnal}}</h3>
					<p>Total Jurnal Di ISi</p>
				</div>
				<div class="icon">
					<i class="fa fa-book"></i>
				</div>
			
			</div>
		</div><!-- ./col -->
		<div class="col-lg-3 col-xs-6">
			<!-- small box -->
			<div class="small-box bg-aqua">
				<div class="inner">
					<h3>{{$jumlah_tugas}}</h3>
					<p>Total Tugas Tambahan</p>
				</div>
				<div class="icon">
					<i class="fa fa-book"></i>
				</div>
				
			</div>
		</div><!-- ./col -->
		<div class="col-lg-3 col-xs-6">
			<!-- small box -->
			<div class="small-box bg-yellow">
				<div class="inner">
					<h3>{{$today}}</h3>
					<p>Jurnal Hari Ini</p>
				</div>
				<div class="icon">
					<i class="fa fa-calendar"></i>
				</div>
				
			</div>
		</div><!-- ./col -->
		
	</div><!-- /.row -->
	<!-- Main row -->
	<div class="box">
		<div class="box-header with-border">
			<i class="fa fa-database"></i>
			<h2 class="box-title">Home Interface</h2>
		</div>
		<div class="box-body">
			<div id="grafik"></div>

			<script type="text/javascript">
				Highcharts.chart('grafik', {
					chart: {
						type: 'column'
					},
					title: {
						text: 'Jumlah Jurnal Terisi'
					},
					subtitle: {
						text: 'Source: Jurnal MEngajar'
					},
					xAxis: {
						categories: {!!json_encode($cat)!!},
						crosshair: true
					},
					yAxis: {
						min: 0,
						title: {
							text: 'Jumlah Isian'
						}
					},
					tooltip: {
						headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
						pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
						'<td style="padding:0"><b>{point.y:.1f} Jurnal</b></td></tr>',
						footerFormat: '</table>',
						shared: true,
						useHTML: true
					},
					plotOptions: {
						column: {
							pointPadding: 0.2,
							borderWidth: 0
						}
					},
					series: [{
						name: 'Jumlah',
						data: {!!json_encode($total_dokumen)!!}

					}]
				});
			</script>
		</div>

	</div>
	<!-- Main row -->
</section><!-- /.content -->
@endsection