@extends('layouts.main')
@section('content')
	<script type="text/javascript" src="{{ asset('extensions/chart/Chart.js') }}"></script>

	<section id="main-content">
    	<section class="wrapper">
			<div class="container-fluid">
				<div class="row">
					<div class="col-md-12">
					    <h3 class="page-header"><i class="fa fa-pie-chart"></i><strong><a href="{{ url('unit_statistics') }}" class="header-link" title="User Statistics">{{ $data['page'] }}</a> || {{ $group->group_name }} ({{ $group->groupmembers->count() }} members)</strong></h3>
            		</div>
        		</div>
				<div class="row">
		            <div class="col-lg-12">        
		                <div class="col-lg-12">
		                    <div class="panel panel-default">
		                        <div class="panel-heading panel-heading-2">
		                            <i class="fa fa-bar-chart-o fa-fw"></i>
		                            <strong>
		                                Tracked Documents: {{ count($overall) }}
		                            </strong>
		                        </div>
		                        <div class="panel-body">
		                        			                            <div id="container">
		                            	@if($pending == 0 && $m_two == 0 && $m_five == 0 && $m_nine == 0 && $beyond == 0)
		                            	<h5 class="text-danger"><strong><i class="fa fa-info-circle"></i> No document(s) routed to this user. No statistics to be shown.</strong></h5>
		                            	@else
		                            	<canvas id="myChart" width="500" height="500"></canvas>
		                            	@endif                                        
                                    </div>                                    
		                        </div>                        
		                    </div>
		                </div>		                
		            </div>
		        </div>
			</div>
		</section>
	</section>

	<script type="text/javascript">
        $(function () {
            var ctx = document.getElementById("myChart").getContext('2d');
			var myChart = new Chart(ctx, {
			  type: 'polarArea',
			  data: {
			    labels: ["Action Taken 1-2 Days", "Action Taken 3-5 Days", "Action Taken 6-9 Days", "More Than 9 Days", "Pending"],
			    datasets: [{
			      backgroundColor: [
			        "#2ecc71",
			        "#3498db",
			        "#9b59b6",
			        "#e74c3c",
			        "#f1c40f",
			      ],
			      data: [0, 0, 0, 0, 0]
			    }]
			  }
			});
        });
    </script>
@stop