@extends('adminlte::layouts.app')

@section('htmlheader_title')
	{{ trans('adminlte_lang::message.home') }}
@endsection

@section('contentheader_title')
	{{ $name }}
@endsection
@section('contentheader_description')
	{{ $ido->import_date->format('Y-m-d') }}
@endsection

@section('main-content')
	@php
		$data = collect();
	@endphp

	<div class="col-sm-3 col-md-offset-0">
		<div class="box">
			<div class="box-header with-border">
				<h3 class="box-title">IBM</h3>
				<div class="box-tools pull-right">
					<button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
						<i class="fa fa-minus"></i></button>
					<button type="button" class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
						<i class="fa fa-times"></i></button>
				</div>
			</div>

			<div class="box-body no-padding">
					<div id="chart"></div>
			</div>
		</div>
	</div>

	<div class="col-sm-9 col-md-offset-0">
		<div class="box">
			<div class="box-header with-border">
				<h3 class="box-title">IBM</h3>
				<div class="box-tools pull-right">
					<button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
						<i class="fa fa-minus"></i></button>
					<button type="button" class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
						<i class="fa fa-times"></i></button>
				</div>
			</div>

			<div class="box-body no-padding">
				<table width="100%" class="table table-striped table-bordered table-hover" style="color: #000000;" id="brand">
					<thead>
						<tr>
							<th rowspan="1" colspan="3">Categories</th>
							<th rowspan="2" class="text-right bg-primary">Entitled</th>
							<th colspan="3" class="text-center" style="background-color: #5cb85c !important">Deployed</th>
							<th rowspan="2" style="background-color: #d6d6c2 !important">Behind</th>
							<th rowspan="2" class="text-right" style="background-color: #f0ad4e !important">Assigned</th>
							<th rowspan="2" class="text-right" style="background-color: #d9534f !important; color: white;">Unassigned</th>
						</tr>
						<tr>
							<th>Unit</th>
							<th>Segment</th>
							<th>Category</th>
							<th style="background-color: #5cb85c !important">Actual</th>
							<th style="background-color: #7cd87c !important">Ahead</th>
							<th style="background-color: #0099e6 !important">Over</th>
						</tr>
					</thead>
					<tbody>
						@foreach ($scope->get()->sortBy(function ($item,$key) { return sprintf('%s.%s.%s',$item->segment->unit->name,$item->segment->name,$item->name); }) as $o)
							@php
								$data->push($o->summary($ido)->pop());
								$filter = $o->summary($ido);
								if (! $e=$filter->sum('entitled')) continue;
							@endphp
							<tr>
								<td>{{ $o->segment->unit->name }}</td>
								<td>{{ $o->segment->name }}</td>
								<td><a href="{{ $next ? url('/'.$next.'/'.$o->id.'/'.$ido->id) : '#' }}"> {{ $o->name }}</a></td>
								<td class="text-right bg-primary" style="!important">{{ number_format($e,2) }}</td>
								<td class="text-right" style="background-color: #5cb85c !important">{{ number_format($filter->sum('actual')/$e*100,1) }}%</td>
								<td class="text-right" style="background-color: #7cd87c !important">{{ number_format($filter->sum('ahead')/$e*100,1) }}%</td>
								<td class="text-right" style="background-color: #0099e6 !important">{{ number_format($filter->sum('over')/$e*100,1) }}%</td>
								<td class="text-right" style="background-color: #d6d6c2 !important">{{ number_format($filter->sum('behind')/$e*100,1) }}%</td>
								<td class="text-right" style="background-color: #f0ad4e !important">{{ number_format($filter->sum('assigned')/$e*100,1) }}%</td>
								<td class="text-right" style="background-color: #d9534f !important; color: white;">{{ number_format($filter->sum('unassigned')/$e*100,1) }}%</td>
							</tr>
						@endforeach
					</tbody>
				</table>
				</div>
			</div>
		</div>
	</div>
@endsection

@section('page-scripts')
	<script src="https://code.highcharts.com/highcharts.js"></script>
	<script src="https://code.highcharts.com/modules/exporting.js"></script>
	<script src="{{ url('/plugins/dataTables.bootstrap.min.js') }}"></script>
	<script src="{{ url('/plugins/jquery.dataTables.js') }}"></script>
	<link href="{{ url('/plugins/jquery.dataTables.min.css') }}" rel="stylesheet" type="text/css">
	<link href="{{ url('/plugins/dataTables.bootstrap.css') }}" rel="stylesheet" type="text/css">
	<script type="text/javascript">
		revenueData = [];
		revenueData.push({ color: '#337ab7', name: 'Entitled', y: {{ $data->sum('entitled') }}, });
		revenueData.push({ color: '#0099e6', name: 'Over', y: {{ $data->sum('over') }}, });

		riskData = [];
		riskData.push({ color: '#004d00', name: 'Actual', y: {{ $data->sum('deployed') }}, });
		riskData.push({ color: '#7cd87c', name: 'Ahead', y: {{ $data->sum('ahead') }}, });
		riskData.push({ color: '#d6d6c2', name: 'Behind', y: {{ $data->sum('behind') }}, });
		riskData.push({ color: '#f0ad4e', name: 'Assigned', y: {{ $data->sum('assigned') }}, });
		riskData.push({ color: '#d9534f', name: 'Unassigned', y: {{ $data->sum('unassigned') }}, });

		// Create the chart
		Highcharts.chart('chart', {
			chart: {
				type: 'pie',
			},
			title: {
				text: ''
			},
			yAxis: {
				title: {
					text: ''
				}
			},
			plotOptions: {
			 	pie: {
					shadow: false,
					center: ['50%', '40%'],
					dataLabels: {
					 enabled: true,
						crop: false,
					},
				},
			},
			exporting: {
				enabled: false
			},
			credits: {
				enabled: false
			},
			tooltip: {
				valuePrefix: '$',
				valueSuffix: 'm',
			},
			series: [{
				name: 'Revenue',
				data: revenueData,
				size: '80%',
				innerSize: '70%',
				dataLabels: {
					/*
					 formatter: function () {
					 return this.y > 5 ? this.point.name : null;
					 },
					 */
					color: '#ffffff',
					distance: 20,
				}
			}, {
				name: 'Risk',
				data: riskData,
				size: '60%',
				innerSize: '70%',
				dataLabels: {
					/*
					 formatter: function () {
					 // display only if larger than 1
					 return this.y > 1 ? '<b>' + this.point.name + ':</b> $' + this.y + 'm' : null;
					 },
					 */
					distance: 20,
				}
			}]
		});

		$(document).ready(function() {
			$("#brand").DataTable({
				"pageLength": 20,
		});
	});
	</script>
@append