@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>{{ $data['page'] }}</strong></h3>
            		</div>
        		</div>
		        <div class="row">
		            <div class="col-lg-12" id="BarGraph">               
		                {!! Form::open(['url'=>'document_statistics', 'class'=>'form', 'id'=>'frmStatistics']) !!}             
		                <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: {{ $overall }}
		                            </strong>
                                    <div class="pull-right">
                                        <div class="form-group">
                                            <div class="input-group input-group-sm">
                                                {!! Form::text('searchTxt', $textbox, ['class' => 'form-control', 'placeholder' => 'Enter Year']) !!}
                                                <span class="input-group-btn">
                                                    {!! Form::button('<span class="fa fa-search"></span> Filter', ['class' => 'btn btn-primary btn-xs', 'type' => 'submit', 'title' => 'Filter']) !!}
                                                    <a href="{{ url('document_statistics') }}" class="btn btn-danger btn-sm"><span class="fa fa-ban"></span> Reset</a>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
		                        </div>
		                        <div class="panel-body">                            
		                            <div id="container">
                                        @if($pending == 0 && $total_ontimes == 0 && $total_beyonds == 0)
                                        <h5 class="text-danger"><strong><i class="fa fa-info-circle"></i> No document(s) found for this year.</strong></h5>
                                        @else
                                        <canvas id="myChart" width="500" height="500"></canvas>
                                        @endif
                                    </div>                                    
		                        </div>                        
		                    </div>
		                </div>		                
		            </div>
		        </div>
    		</div>
    	</section>
    </section>
    
    <script>
        var ctx = document.getElementById("myChart").getContext('2d');
        var myChart = new Chart(ctx, {
          type: 'pie',
          data: {
            labels: ["Pending", "Beyond The Deadline", "On-time Documents"],
            datasets: [{
              backgroundColor: [
                "#f1c40f",
                "#e74c3c",
                "#2ecc71"
              ],
              data: [, , ,]
            }]
          }
        });
    </script>
    {!! Form::close() !!}
@stop