@extends('layouts.app')

@section('breadcrumb')
	<ul class="breadcrumb">
		<li><a href="/home">{!! trans('messages.home') !!}</a></li>
		<li class="active">{!! trans('messages.training').' '.trans('messages.suggestion') !!}</li>
	</ul>
@stop

@section('css')
	<style>
		.box-info .nav-tabs>li>a{ color: white; }
	</style>
@stop

@section('content')

<div class="row">
	<div class="col-sm-12">
		<h4><b>{!! trans('messages.designation').' '.trans('messages.overview').' | PLRD' !!}</b></h4>
	</div>
	<div class="col-sm-2 col-xs-6">
		<div class="box-info">
			<div class="icon-box">
				<span class="fa-stack">
					<i class="fa fa-circle fa-stack-2x primary"></i>
					<i class="fa fa-user fa-stack-1x fa-inverse"></i>
				</span>
			</div>
			<div class="text-box">
				<h3>{!! $so_count !!}</h3>
				<p><b>SO</b></p>
			</div>
			<div class="clear"></div>
		</div>
	</div>
	<div class="col-sm-2 col-xs-6">
		<div class="box-info">
			<div class="icon-box">
				<span class="fa-stack">
					<i class="fa fa-circle fa-stack-2x info"></i>
					<i class="fa fa-user fa-stack-1x fa-inverse"></i>
				</span>
			</div>
			<div class="text-box">
				<h3>{!! $sso_count !!}</h3>
				<p><b>SSO</b></p>
			</div>
			<div class="clear"></div>
		</div>
	</div>
	<div class="col-sm-2 col-xs-6">
		<div class="box-info">
			<div class="icon-box">
				<span class="fa-stack">
					<i class="fa fa-circle fa-stack-2x success"></i>
					<i class="fa fa-user fa-stack-1x fa-inverse"></i>
				</span>
			</div>
			<div class="text-box">
				<h3>{!! $ss_count !!}</h3>
				<p><b>SS</b></p>
			</div>
			<div class="clear"></div>
		</div>
	</div>
	<div class="col-sm-2 col-xs-6">
		<div class="box-info">
			<div class="icon-box">
				<span class="fa-stack">
					<i class="fa fa-circle fa-stack-2x warning"></i>
					<i class="fa fa-user fa-stack-1x fa-inverse"></i>
				</span>
			</div>
			<div class="text-box">
				<h3>{!! $sss_count !!}</h3>
				<p><b>SSS</b></p>
			</div>
			<div class="clear"></div>
		</div>
	</div>
	<div class="col-sm-2 col-xs-6">
		<div class="box-info">
			<div class="icon-box">
				<span class="fa-stack">
					<i class="fa fa-circle fa-stack-2x danger"></i>
					<i class="fa fa-user fa-stack-1x fa-inverse"></i>
				</span>
			</div>
			<div class="text-box">
				<h3>{!! $cso_count !!}</h3>
				<p><b>CSO</b></p>
			</div>
			<div class="clear"></div>
		</div>
	</div>
	<div class="col-sm-2 col-xs-6">
		<div class="box-info">
			<div class="icon-box">
				<span class="fa-stack">
					<i class="fa fa-circle fa-stack-2x default"></i>
					<i class="fa fa-users fa-stack-1x fa-inverse"></i>
				</span>
			</div>
			<div class="text-box">
				<h3>{!! $total_count !!}</h3>
				<p><b>Total</b></p>
			</div>
			<div class="clear"></div>
		</div>
	</div>
</div>

@if(Laratrust::isAbleTo('list-charts'))
	<div class="row">
		<div class="col-sm-12">
			<h4><b>{!! trans('messages.officer').' '.trans('messages.training').' '.trans('messages.statistics') !!}</b></h4>
		</div>
		<div class="col-md-6 col-xs-6">
			<div class="box-info full" style="overflow:hidden;">
				<h2><b>Officer Taken RTT</b> vs <b>Officer Not Taken RTT</b></h2>
				<div id="piechart"></div>
			</div>
		</div>
		<div class="col-md-6 col-xs-6">
			<div class="box-info full" style="overflow:hidden;">
				<h2><b>Officer with Training</b> vs <b>Officer with No Training</b></h2>
				<div id="piechart2"></div>
			</div>
		</div>
	</div>
@endif

{{-- <div class="row">
		<div class="col-md-12">
				<h4><strong>{!! trans('messages.urgent_promotion') !!} - PWM</strong>.</h4>
				<h5>({!! trans('messages.urgent_remarks') !!} <strong>{{env('OTP_URGENT')}} months</strong>)</h5>
				<div class="box-info full">

						<ul class="nav nav-tabs nav-justified tab-list" style="background:#FA272B">
							<li><a href="#so-suggest-urgent-tab" data-toggle="tab"><i class="fa fa-user"></i> {!! trans('messages.so') !!}</a></li>
							<li><a href="#sso-suggest-urgent-tab" data-toggle="tab"><i class="fa fa-user"></i> {!! trans('messages.sso') !!}</a></li>
							<li><a href="#ss-suggest-urgent-tab" data-toggle="tab"><i class="fa fa-user"></i> {!! trans('messages.ss') !!}</a></li>
							<li><a href="#sss-suggest-urgent-tab" data-toggle="tab"><i class="fa fa-user"></i> {!! trans('messages.sss') !!}</a></li>
						</ul>

						<div class="tab-content" align="right">
							@foreach (['so','sso','ss','sss'] as $value)
								<div class="tab-pane animated fadeInRight" id="{{$value.'-suggest-urgent-tab'}}">
										<div class="user-profile-content" style="margin: 10px 15px;">
											<span class="text-info">Blue - Mandatory modules / units</span>&nbsp&nbsp&nbsp
											<span class="text-success">Green - Recommended modules / units</span>&nbsp&nbsp&nbsp
											<span style="color:#E67E22">Yellow - Reserved modules / units</span>
										</div>
										<div class="user-profile-content custom-scrollbar" style="max-height:500px">
												<div class="table-responsive">
														<table data-sortable class="table table-bordered table-hover table-striped ajax-table show-table" id="{{$value.'-suggest-urgent-table'}}" data-source="/training-suggestion/fetch-urgent" data-extra="{{'&type='.$value}}">
																<thead>
																		<tr>
																			<th>{!! trans('messages.name') !!}</th>
																			<th>{!! trans('messages.nric') !!}</th>
																			<th>{!! trans('messages.plrd_eff_date') !!}</th>
																			<th>{!! trans('messages.suggestion') !!} | Projected Date</th>
																			<th>Progression Eligibility</th>
																		</tr>
																</thead>
																<tbody>
																</tbody>
														</table>
												</div>
										</div>
								</div>
							@endforeach
						</div>
				</div>
		</div>
</div> --}}

<div class="row">
		<div class="col-md-12">
				<h4><strong>{!! trans('messages.training').' '.trans('messages.overview') !!} - PWM</strong></h4>
				<div class="box-info full">

						<ul class="nav nav-tabs nav-justified tab-list">
							<li><a href="#so-suggest-tab" data-toggle="tab"><i class="fa fa-user"></i> {!! trans('messages.so') !!}</a></li>
							<li><a href="#sso-suggest-tab" data-toggle="tab"><i class="fa fa-user"></i> {!! trans('messages.sso') !!}</a></li>
							<li><a href="#ss-suggest-tab" data-toggle="tab"><i class="fa fa-user"></i> {!! trans('messages.ss') !!}</a></li>
							<li><a href="#sss-suggest-tab" data-toggle="tab"><i class="fa fa-user"></i> {!! trans('messages.sss') !!}</a></li>
						</ul>

						<div class="tab-content" align="right">
							@foreach (['so','sso','ss','sss'] as $value)
								<div class="tab-pane animated fadeInRight" id="{{$value.'-suggest-tab'}}">
										<div class="user-profile-content" style="margin: 10px 15px;">
											<span class="text-info">Blue - Mandatory modules / units</span>&nbsp&nbsp&nbsp
											<span class="text-success">Green - Recommended modules / units</span>&nbsp&nbsp&nbsp
											<span style="color:#E67E22">Yellow - Reserved modules / units</span>
										</div>
										<div class="user-profile-content custom-scrollbar" style="max-height:550px">
												<div class="table-responsive">
														<table data-sortable class="table table-bordered table-hover table-striped ajax-table show-table" id="{{$value.'-suggest-table'}}" data-source="/training-suggestion/fetch" data-extra="{{'&type='.$value}}">
																<thead>
																		<tr>
																				<th>{!! trans('messages.name') !!}</th>
																				<th>{!! trans('messages.nric') !!}</th>
																				{{-- <th>{!! trans('messages.nationality') !!}</th> --}}
																				<th>{!! trans('messages.plrd_eff_date') !!}</th>
																				<th>{!! trans('messages.suggestion') !!} | Projected Date</th>
																				<th>Progression Eligibility</th>
																		</tr>
																</thead>
																<tbody>
																</tbody>
														</table>
												</div>
										</div>
								</div>
							@endforeach
						</div>
				</div>
		</div>
</div>

<div class="row">
	<div class="col-sm-12">
		<div class="help-block">
			All statistics will only display user who meets following criteria:<br>
			<ul>
				<li>User with PLRD Rank</li>
				<li>User with PLRD Effective Date</li>
				<li>User with Permanent Contract</li>
				<li>User status is "Active"</li>
			</ul>
		</div>
	</div>
</div>
@endsection

@section('js')
	<script type="text/javascript">
		// Load the Visualization API and the corechart package
		google.charts.load('current', {'packages':['corechart']});
		// Set a callback to run when the Google Visualization API is loaded
		google.charts.setOnLoadCallback(drawChart);

		// Callback that creates and populates a data table, instantiates the pie chart, passes in the data and draws it
		function drawChart() {
		  var chart_data_1 = google.visualization.arrayToDataTable({!! $course_chart !!});
		  var chart_option_1 = {	// Optional; add a title and set the width and height of the chart
				// 'title':'Officers Taken RTT vs Not-Taken RTT',
				// 'titleTextStyle':{'fontSize':14},
				'chartArea':{'width':'80%','height':'85%'},
				'pieHole':0.35,
				'legend':{'textStyle':{'fontSize':14}}
			};

			var chart_data_2 = google.visualization.arrayToDataTable({!! $user_chart !!});
		  var chart_option_2 = {
				// 'title':'Officer Trained vs Officer Not-Trained',
				// 'titleTextStyle':{'fontSize':14},
				'chartArea':{'width':'80%','height':'85%'},
				'pieHole':0.35,
				'legend':{'textStyle':{'fontSize':14}}
			};

		  // Display the chart inside the <div> element with id="piechart"
		  var chart = new google.visualization.PieChart(document.getElementById('piechart'));
		  chart.draw(chart_data_1, chart_option_1);
			var chart2 = new google.visualization.PieChart(document.getElementById('piechart2'));
		  chart2.draw(chart_data_2, chart_option_2);
		}
	</script>
@endsection