@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">
                <p class="lead">
                  <span class="font-weight-bold">{{ __('Hi') }}, {{ Auth::user()->name }}</span>
                  <span class="d-block text-muted">{{ __('What makes you tick?') }}</span>
                </p>
              </header>
              <!-- /.page-title-bar -->			  
              <!-- .page-section -->
              <div class="page-section">
				@role('admin|facilitator')
					<form id="graphform" method="POST" action="/graph">
						{{ csrf_field() }}
						<div class="row">
                  			<!-- grid column -->
                  			<div class="col-xl-6">	
		            			<!-- .form-group -->
		            			<div class="form-group">
		              				<label for="profile">{{ __('Profile') }}</label>
		             				<select class="custom-select" id="profile" name="profile" required="" onchange="change()">
		           						<option value="0">{{ __('Please select a profile') }}</option>
		           						@foreach ($profiles as $profile)
											<option value="{{ $profile->id }}" @if ($profile->id == $profileID) selected @endif>{{ __($profile->trans('profilename')) }}</option>
								  		@endforeach
		              				</select>
		            			</div>
							</div>
							<div class="col-xl-6">	
		            			<p>
                                  <span class="text-muted">&nbsp</span>
                                </p>
                                <p>
                                  <span class="text-muted">{{ __('This may take some time, depending on the number of profiles in the database') }}</span>
                                </p>
							</div>
						</div>
					</form>

					<!-- .section-block -->
	                <div class="row">
	                	<div class="col-12 col-lg-12 col-xl-12">
		                    <!-- .card -->
		                    <section class="card card-fluid">
		                      <!-- .card-body -->
		                      <div class="card-body">
		                        <!-- .d-flex -->
		                        <div class="d-flex align-items-center mb-3">
		                          <h3 class="card-title mr-auto">{{ __('Average scores in the Last Years') }} - {{ __('Acceptance') }}</h3>
		                        </div>
		                        <!-- /.d-flex -->
		                        <div class="chartjs">
		                          <canvas id="last-years-average-acceptance"></canvas>
		                        </div>
		                      </div>
		                      <!-- /.card-body -->
		                    </section>
		                    <!-- /.card -->
		                </div>
					</div>
					<div class="row">
	                	<div class="col-12 col-lg-12 col-xl-12">
		                    <!-- .card -->
		                    <section class="card card-fluid">
		                      <!-- .card-body -->
		                      <div class="card-body">
		                        <!-- .d-flex -->
		                        <div class="d-flex align-items-center mb-3">
		                          <h3 class="card-title mr-auto">{{ __('Average scores in the Last Years') }} - {{ __('Rejection') }}</h3>
		                        </div>
		                        <!-- /.d-flex -->
		                        <div class="chartjs">
		                          <canvas id="last-years-average-rejection"></canvas>
		                        </div>
		                      </div>
		                      <!-- /.card-body -->
		                    </section>
		                    <!-- /.card -->
		                </div>
					</div>
	                <!-- /.section-block -->
				@endrole
              </div>
              <!-- /.page-section -->
            </div>
            <!-- /.page-inner -->
          </div>
          <!-- /.page -->
@endsection

@push('scripts')
    <script src="{{ asset('assets/vendor/chart.js/Chart.min.js') }}"></script>
    <script src="{{ asset('assets/javascript/pages/dashboard-demo.js') }}"></script>
    
	@role('admin|facilitator')
	<script>
		var years = {!! json_encode($yearAry) !!};
		var purpleAry = {!! json_encode($ApurpleAry) !!};
		var redAry = {!! json_encode($AredAry) !!};
		var blueAry = {!! json_encode($AblueAry) !!};
		var orangeAry = {!! json_encode($AorangeAry) !!};
		var greenAry = {!! json_encode($AgreenAry) !!};
		var yellowAry = {!! json_encode($AyellowAry) !!};
		var turquoiseAry = {!! json_encode($AturquoiseAry) !!};

		datasets = [];

		dataset = {
			label: "{{ __('Turquoise') }}",
			backgroundColor: 'rgb(30, 174, 179)',
			borderColor: 'rgb(30, 174, 179)',
			fill: false,
			data: turquoiseAry
		};
		datasets.push(dataset);

		dataset = {
			label: "{{ __('Yellow') }}",
			backgroundColor: 'rgb(248, 239, 36)',
			borderColor: 'rgb(248, 239, 36)',
			fill: false,
			data: yellowAry
		};
		datasets.push(dataset);

		dataset = {
			label: "{{ __('Green') }}",
			backgroundColor: 'rgb(72, 166, 71)',
			borderColor: 'rgb(72, 166, 71)',
			fill: false,
			data: greenAry
		};
		datasets.push(dataset);

		dataset = {
			label: "{{ __('Orange') }}",
			backgroundColor: 'rgb(247, 150, 34)',
			borderColor: 'rgb(247, 150, 34)',
			fill: false,
			data: orangeAry
		};
		datasets.push(dataset);

		dataset = {
			label: "{{ __('Blue') }}",
			backgroundColor: 'rgb(32, 67, 144)',
			borderColor: 'rgb(32, 67, 144)',
			fill: false,
			data: blueAry
		};
		datasets.push(dataset);

		dataset = {
			label: "{{ __('Red') }}",
			backgroundColor: 'rgb(236, 32, 40)',
			borderColor: 'rgb(236, 32, 40)',
			fill: false,
			data: redAry
		};
		datasets.push(dataset);

		dataset = {
			label: "{{ __('Purple') }}",
			backgroundColor: 'rgb(110, 41, 121)',
			borderColor: 'rgb(110, 41, 121)',
			fill: false,
			data: purpleAry
		};
		datasets.push(dataset);
		
		var self = this;
	    var data = {
	      labels: years,
	      datasets: datasets
	      // init chart bar
	    };
	    var canvas = $('#last-years-average-acceptance')[0].getContext('2d');
	    var chart = new Chart(canvas, {
	      type: 'line',
	      data: data,
	      options: {
	        responsive: true,
	        legend: { display: true, position: 'left' },
	        title: { display: false },
	        scales: {
	          xAxes: [{
	            gridLines: {
	              display: true,
	              drawBorder: true,
	              drawOnChartArea: false
	            },
	            ticks: {
	              maxRotation: 0,
	              maxTicksLimit: 12
	            },

	          }],
	          yAxes: [{
	            gridLines: {
	              display: true,
	              drawBorder: true,
	              drawOnChartArea: true
	            },
	            ticks: {
	              beginAtZero: true,
	              stepSize: 10
	            },

	          }]
	        }
	      }
	    });

		var years = {!! json_encode($yearAry) !!};
		var purpleAry = {!! json_encode($RpurpleAry) !!};
		var redAry = {!! json_encode($RredAry) !!};
		var blueAry = {!! json_encode($RblueAry) !!};
		var orangeAry = {!! json_encode($RorangeAry) !!};
		var greenAry = {!! json_encode($RgreenAry) !!};
		var yellowAry = {!! json_encode($RyellowAry) !!};
		var turquoiseAry = {!! json_encode($RturquoiseAry) !!};

		datasets = [];

		dataset = {
			label: "{{ __('Turquoise') }}",
			backgroundColor: 'rgb(30, 174, 179)',
			borderColor: 'rgb(30, 174, 179)',
			fill: false,
			data: turquoiseAry
		};
		datasets.push(dataset);

		dataset = {
			label: "{{ __('Yellow') }}",
			backgroundColor: 'rgb(248, 239, 36)',
			borderColor: 'rgb(248, 239, 36)',
			fill: false,
			data: yellowAry
		};
		datasets.push(dataset);

		dataset = {
			label: "{{ __('Green') }}",
			backgroundColor: 'rgb(72, 166, 71)',
			borderColor: 'rgb(72, 166, 71)',
			fill: false,
			data: greenAry
		};
		datasets.push(dataset);

		dataset = {
			label: "{{ __('Orange') }}",
			backgroundColor: 'rgb(247, 150, 34)',
			borderColor: 'rgb(247, 150, 34)',
			fill: false,
			data: orangeAry
		};
		datasets.push(dataset);

		dataset = {
			label: "{{ __('Blue') }}",
			backgroundColor: 'rgb(32, 67, 144)',
			borderColor: 'rgb(32, 67, 144)',
			fill: false,
			data: blueAry
		};
		datasets.push(dataset);

		dataset = {
			label: "{{ __('Red') }}",
			backgroundColor: 'rgb(236, 32, 40)',
			borderColor: 'rgb(236, 32, 40)',
			fill: false,
			data: redAry
		};
		datasets.push(dataset);

		dataset = {
			label: "{{ __('Purple') }}",
			backgroundColor: 'rgb(110, 41, 121)',
			borderColor: 'rgb(110, 41, 121)',
			fill: false,
			data: purpleAry
		};
		datasets.push(dataset);
		
		var self = this;
	    var data = {
	      labels: years,
	      datasets: datasets
	      // init chart bar
	    };
	    var canvas = $('#last-years-average-rejection')[0].getContext('2d');
	    var chart = new Chart(canvas, {
	      type: 'line',
	      data: data,
	      options: {
	        responsive: true,
	        legend: { display: true, position: 'left' },
	        title: { display: false },
	        scales: {
	          xAxes: [{
	            gridLines: {
	              display: true,
	              drawBorder: true,
	              drawOnChartArea: false
	            },
	            ticks: {
	              maxRotation: 0,
	              maxTicksLimit: 12
	            },

	          }],
	          yAxes: [{
	            gridLines: {
	              display: true,
	              drawBorder: true,
	              drawOnChartArea: true
	            },
	            ticks: {
	              beginAtZero: true,
	              stepSize: 10
	            },

	          }]
	        }
	      }
	    });		
	</script>
	@endrole
	<script>
        function change(){
            document.getElementById("graphform").submit();
        }
    </script>
@endpush