@extends('layouts.app')

@section('styles')
@endsection

@section('content')	      
		   <!-- .page -->
          <div class="page">
            <!-- .page-inner -->
            <div class="page-inner">
              <!-- .page-title-bar -->
              <header class="page-title-bar">
                <!-- .breadcrumb -->
                <nav aria-label="breadcrumb">
                  <ol class="breadcrumb">
                    <li class="breadcrumb-item active">
                      <a href="\">
                        <i class="breadcrumb-icon fa fa-angle-left mr-2"></i>{{ __('Dashboard') }}</a>
                    </li>
                  </ol>
                </nav>
                <!-- /.breadcrumb -->
                <!-- title and toolbar -->
                <div class="d-md-flex align-items-md-start">
                  <h1 class="page-title mr-sm-auto">{{ __('My Reports').": ".$username }}</h1>
				  <!-- .btn-toolbar -->
                  <div id="dt-buttons" class="btn-toolbar"></div>
                  <!-- /.btn-toolbar -->
                </div>
                <!-- /title and toolbar -->
              </header>
              <!-- /.page-title-bar -->
              <!-- .page-section -->
              <div class="page-section">
					<!-- grid row -->
					<div class="row">
						@if ($profilenumbers == null)
								<!-- grid column -->
								<div class="col-lg-3 col-md-4 col-sm-5 col-xs-6">
				                    <!-- .card -->
				                    <section class="card card-figure" >
				                      <!-- .card-figure -->
				                      <figure class="figure">
				                        <!-- .figure-img -->
				                        <div class="figure-img">
				                          <img class="img-fluid" src="{{ asset('assets/images/notready.jpg') }}" alt="MMI Report">
										   <div class="figure-action">
				                            <a href="/profiles" class="btn btn-block btn-lg btn-primary">{{ __('Go to Profiles') }}</a>
				                          </div>
				                        </div>
				                        <!-- /.figure-img -->
				                        <!-- .figure-caption -->
				                        <figcaption class="figure-caption">
				                          <h6 class="figure-title">
				                            <a href="/profiles">{{ __('Your Report is not ready ...') }}</a>
				                          </h6>
				                          <p class="text-muted mb-0">{{ __('Either you still need to complete your profile, or your facilitator has not yet made your report available') }}</p>
				                        </figcaption>
				                        <!-- /.figure-caption -->
				                      </figure>
				                      <!-- /.card-figure -->
				                    </section>
				                    <!-- /.card -->
								</div>
			                  <!-- grid column -->					
						@else
							@foreach ($profilenumbers as $profilenumber)
								<!-- grid column -->
								<div class="col-lg-3 col-md-4 col-sm-5 col-xs-6">
				                    <!-- .card -->
				                    <section class="card card-figure" >
				                      <!-- .card-figure -->
				                      <figure class="figure">
				                        <!-- .figure-img -->
				                        <div class="figure-img">
				                          <canvas id="canvas-profile-{{ $profilenumber }}" class="chartjs"></canvas>
										   <div class="figure-action">
				                            <a href="/reports/{{ $user }}/{{ $profilenumber }}" class="btn btn-block btn-lg btn-primary">{{ __('Open the Report') }}</a>
				                          </div>
				                        </div>
				                        <!-- /.figure-img -->
				                        <!-- .figure-caption -->
				                        <figcaption class="figure-caption">
				                          <h6 class="figure-title">
				                            <a href="/reports/{{ $user }}/{{ $profilenumber }}">{{ $profilenames[$profilenumber] }}</a><br>
											<a href="/reports/{{ $user }}/{{ $profilenumber }}">{{ $profiledates[$profilenumber] }}</a>
				                          </h6>
				                          <p class="text-muted mb-0">{{ __('Your Report is ready, click to open and start discovering what makes you tick!') }}</p>
				                        </figcaption>
				                        <!-- /.figure-caption -->
				                      </figure>
				                      <!-- /.card-figure -->
				                    </section>
				                    <!-- /.card -->
								</div>
			                  <!-- grid column -->
							@endforeach
						@endif
		            </div>
	                <!-- /grid row -->
		      </div>
              <!-- /.page-section -->
            </div>
            <!-- /.page-inner -->
          </div>
          <!-- /.page -->
@endsection

@push('scripts')
	<script src="{{ asset('assets/vendor/chart.js/Chart.min.js') }}"></script>
	<script>
		'use strict';

		var chartjsBar = {
		  init: function init() {

		    this.bindUIActions();
		  },
		  bindUIActions: function bindUIActions() {
		    // turn on aspect ratio to maintain correct view
		    Chart.defaults.global.maintainAspectRatio = false;

		    // event handlers
			@foreach ($profilenumbers as $profilenumber)
				this.barChart{{ $profilenumber }}();
			@endforeach
		  },
		  colors: function colors() {
		    return {
		      red: 'rgb(236, 32, 40)',
		      orange: 'rgb(247, 150, 34)',
		      yellow: 'rgb(248, 239, 36)',
		      green: 'rgb(72, 166, 71)',
		      turquoise: 'rgb(30, 174, 179)',
		      blue: 'rgb(32, 67, 144)',
		      purple: 'rgb(110, 41, 121)',
		      gray: '#BEC1C4'
		    };
		  },
		  getColor: function getColor(color) {
		    return this.colors()[color];
		  },
		  colorNames: function colorNames(color) {
		    return Object.keys(this.colors());
		  },
			@foreach ($profilenumbers as $profilenumber)
				barChart{{ $profilenumber }}: function barChart{{ $profilenumber }}() {
					var self = this;
					@if (($profileIDs[$profilenumber] < 4) || ($profileIDs[$profilenumber] == 5) || ($profileIDs[$profilenumber] == 6))
						var data = {
						  labels: ['1', '2', '3', '4', '5', '6', '7'],
						  datasets: [{
						    label: 'Dataset 1',
						    backgroundColor: [self.getColor('{{$colour[$profilenumber][0]}}'), self.getColor('{{$colour[$profilenumber][1]}}'), self.getColor('{{$colour[$profilenumber][2]}}'), self.getColor('{{$colour[$profilenumber][3]}}'), self.getColor('{{$colour[$profilenumber][4]}}'), self.getColor('{{$colour[$profilenumber][5]}}'), self.getColor('{{$colour[$profilenumber][6]}}')],
						    borderWidth: 0,
						    data: {{ "[".implode(", ",$acceptance[$profilenumber])."]" }}
						  }, {
						    label: 'Dataset 2',
						    backgroundColor: [self.getColor('{{$colour[$profilenumber][0]}}'), self.getColor('{{$colour[$profilenumber][1]}}'), self.getColor('{{$colour[$profilenumber][2]}}'), self.getColor('{{$colour[$profilenumber][3]}}'), self.getColor('{{$colour[$profilenumber][4]}}'), self.getColor('{{$colour[$profilenumber][5]}}'), self.getColor('{{$colour[$profilenumber][6]}}')],
						    borderWidth: 0,
						    data: {{ "[".implode(", ",$rejection[$profilenumber])."]" }}
						  }]
						};
					@elseif ($profileIDs[$profilenumber] == 4)
						var data = {
						  labels: ['1', '2', '3', '4', '5', '6', '7'],
						  datasets: [{
						    label: 'Dataset 1',
						    backgroundColor: [self.getColor('{{$colour[$profilenumber][0]}}'), self.getColor('{{$colour[$profilenumber][1]}}'), self.getColor('{{$colour[$profilenumber][2]}}'), self.getColor('{{$colour[$profilenumber][3]}}'), self.getColor('{{$colour[$profilenumber][4]}}'), self.getColor('{{$colour[$profilenumber][5]}}'), self.getColor('{{$colour[$profilenumber][6]}}')],
						    borderWidth: 0,
						    data: {{ "[".implode(", ",$acceptance[$profilenumber])."]" }}
						}, {
						    label: 'Dataset 2',
						    backgroundColor: [self.getColor('{{$colour[$profilenumber][0]}}'), self.getColor('{{$colour[$profilenumber][1]}}'), self.getColor('{{$colour[$profilenumber][2]}}'), self.getColor('{{$colour[$profilenumber][3]}}'), self.getColor('{{$colour[$profilenumber][4]}}'), self.getColor('{{$colour[$profilenumber][5]}}'), self.getColor('{{$colour[$profilenumber][6]}}')],
						    borderWidth: 0,
						    data: {{ "[".implode(", ",$rejection[$profilenumber])."]" }}
						  }]
						};					
					@elseif ($profileIDs[$profilenumber] == 7)
						var data = {
						  labels: ['1', '2', '3', '4', '5'],
						  datasets: [{
						    label: 'Dataset 1',
						    backgroundColor: [self.getColor('{{$colour[$profilenumber][0]}}'), self.getColor('{{$colour[$profilenumber][1]}}'), self.getColor('{{$colour[$profilenumber][2]}}'), self.getColor('{{$colour[$profilenumber][3]}}'), self.getColor('{{$colour[$profilenumber][4]}}')],
						    borderWidth: 0,
						    data: {{ "[".implode(", ",$acceptance[$profilenumber])."]" }}
						  }]
						};					
					@elseif ($profileIDs[$profilenumber] == 9)
					    @php
							$acc=$acceptance[$profilenumber];
							$rej=$rejection[$profilenumber];
							$series1 = array();
							$series2 = array();
							$series3 = array();
							foreach ($acc as $key => $value) {
							    $series1[$key] = $acc[$key] - $rej[$key];
								if (abs($series1[$key]) < 2) $series1[$key] = 2;
								$series2[$key] = min($acc[$key],$rej[$key]);
								$series3[$key] = -min($acc[$key],$rej[$key]);
							}
						@endphp
						var data = {
						  labels: ['1', '2', '3', '4', '5'],
						  datasets: [{
						    label: 'Dataset 1',
						    backgroundColor: [self.getColor('{{$colour[$profilenumber][0]}}'), self.getColor('{{$colour[$profilenumber][1]}}'), self.getColor('{{$colour[$profilenumber][2]}}'), self.getColor('{{$colour[$profilenumber][3]}}'), self.getColor('{{$colour[$profilenumber][4]}}')],
						    borderWidth: 2,
							borderColor: "#fff",
						    data: {{ "[".implode(", ",$series1)."]" }}
						  }, {
						    label: 'Dataset 2',
						    backgroundColor: [self.getColor('{{$colour[$profilenumber][0]}}'), self.getColor('{{$colour[$profilenumber][1]}}'), self.getColor('{{$colour[$profilenumber][2]}}'), self.getColor('{{$colour[$profilenumber][3]}}'), self.getColor('{{$colour[$profilenumber][4]}}')],
						    borderWidth: 2,
							borderColor: "#fff",
						    data: {{ "[".implode(", ",$series2)."]" }}
						  }, {
						    label: 'Dataset 3',
						    backgroundColor: [self.getColor('{{$colour[$profilenumber][0]}}'), self.getColor('{{$colour[$profilenumber][1]}}'), self.getColor('{{$colour[$profilenumber][2]}}'), self.getColor('{{$colour[$profilenumber][3]}}'), self.getColor('{{$colour[$profilenumber][4]}}')],
						    borderWidth: 2,
							borderColor: "#fff",
						    data: {{ "[".implode(", ",$series3)."]" }}
						  }]
						};
					@endif
					var canvas = $('#canvas-profile-{{ $profilenumber }}')[0].getContext('2d');
					var chart = new Chart(canvas, {
					  @if ($profileIDs[$profilenumber] == 4)
					  	type: 'horizontalBar',
					  @else
					  	type: 'bar',
					  @endif
					  data: data,
					  options: {
					    responsive: true,
					    legend: {
					      display: false
					    },
					    tooltips: {
					      enabled: false
					    },
					    scales: {
					      xAxes: [{
					        stacked: true,
							gridLines: {
							  color: "transparent",
							  display: true,
							  drawBorder: false,
							  zeroLineColor: "#ccc",
							  zeroLineWidth: 1
							},
							ticks: {
								@if ($profileIDs[$profilenumber] == 4)
								 display: false,
								 min: -10,
								 max: 10
								@else
								 display: false
								@endif
							}
					      }],
					      yAxes: [{
					        stacked: true,
							gridLines: {
							  color: "transparent",
							  display: true,
							  drawBorder: false,
							  zeroLineColor: "#ccc",
							  zeroLineWidth: 1
							},
							ticks: {
								@if ($profileIDs[$profilenumber] == 7)
								 display: false,
								 min: 0,
								 max: 150
								@else
								 display: false,
								 min: -150,
								 max: 150
								@endif
							}			
					      }]
					    }
					  }
					});
				},
			@endforeach
		};

		chartjsBar.init();
	</script>
@endpush