@extends('layouts.app')

@section('styles')
	<link rel="stylesheet" href="{{ asset('assets/stylesheets/nouislider.css') }}">
@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>
					  <a href="\groups">
                        <i class="breadcrumb-icon fa fa-angle-left mr-2"></i>{{ __('Groups') }}</a>
                    </li>
                  </ol>
                </nav>
                <!-- /.breadcrumb -->
                <!-- title and toolbar -->
                <div class="d-md-flex align-items-md-start">
                  <h1 class="page-title mr-sm-auto"> {{ $sessionname }}</h1>
			    </div>
                <!-- /title and toolbar -->
              </header>
              <!-- /.page-title-bar -->

			  <!-- .page-section -->
              <div class="page-section">
                <!-- .card -->
                <section class="card card-fluid">
                  <!-- .card-header -->
                  <header class="card-header">
					{{ __('Profile adjustment') }}
                  </header>
                  <!-- /.card-header -->
                  <!-- .card-body -->
                  <div class="card-body">
        				<form method="POST" action="/groups/adjust/{{ $groupid }}">
					{{ csrf_field() }}
						<!-- grid row -->
	        				<div class="row">
							<!-- grid column -->
							<div class="col-lg-3 col-md-6">
			                    <!-- .card -->
			                    <section class="card card-figure" >
				                    <!-- .card-figure -->
				                    <figure class="figure">
					                    <!-- .figure-img -->
				                        <div class="figure-img" style="height: 240px">
					                        <canvas id="canvas-profile" class="chartjs"></canvas>
				                        </div>
			                        		<!-- /.figure-img -->
				                    </figure>
				                    <!-- /.card-figure -->
			                    </section>
			                    <!-- /.card -->
							</div>
			                <!-- grid column -->
							<!-- grid column -->
							<div class="col-lg-3 col-md-6">
								<!-- .card -->
			                    <section class="card card-figure" >
				                    <!-- .card-figure -->
				                    <figure class="figure">			                    

										<div class="row">
											<div class="col-1">
											</div>
											<div class="col-2">
												<div class="nouislider-wrapper" style="height:222px">
													<div id="slider1"></div>
												</div>
											</div>
											<div class="col-2">
												<div class="nouislider-wrapper" style="height:222px">
													<div id="slider2"></div>
												</div>
											</div>
											<div class="col-2">
												<div class="nouislider-wrapper" style="height:222px">
													<div id="slider3"></div>
												</div>
											</div>
											<div class="col-2">
												<div class="nouislider-wrapper" style="height:222px">
													<div id="slider4"></div>
												</div>
											</div>
											<div class="col-2">
												<div class="nouislider-wrapper" style="height:222px" >
													<div id="slider5"></div>
												</div>
											</div>
											<div class="col-1">
											</div>
										</div>
										<!-- /.figure-img -->
									</figure>
				                		<!-- /.card-figure -->
			                    </section>
			                    <!-- /.card -->
							</div>
			                <!-- grid column -->			
							<!-- grid column -->
							<div class="col-lg-6 col-md-12">
			                    <!-- .card -->
			                    <section class="card" style="height: 260px">
			                        <!-- .card-header -->
			                        <div class="card-header">
			                          <h5 class="card-title"> {{ __('Change your ideal profile') }} </h5>
			                        </div><!-- /.card-header -->
			                        <!-- .card-body -->
			                        <div class="card-body">
			                        		<p class="card-text"> {{ __('If you want to make changes to the profile of your ideal candidate, move the sliders in the desired direction. Press Save to store these changes.') }} </p>
		                        			<div class="form-group">
											<button type="submit" name="save" value="on" class="btn btn-primary">{{ __('Save') }}</button>
											<button type="submit" class="btn btn-light">{{ __('Close') }}</button>
											<button type="submit" name="remove" value="on" class="btn btn-warning">{{ __('Remove adjustments') }}</button>
		                       				<input type="hidden" name="sliderValueInput" id="sliderValueInput" value="">
											<input type="hidden" name="sliderColourInput" id="sliderColourInput" value="">
										</div>
			                        </div>
									<!-- /.card-body -->
			                    </section>
			                    <!-- /.card -->
							</div>
			                <!-- /.grid column -->
						</div>
			            <!-- /.row -->
					</form>
				  </div>
	              <!-- /.card-body -->
                </section>
                <!-- /.card -->
              </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
			this.barChart();
		  },
		  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());
		  },
				barChart: function barChart() {
					var self = this;
						var data = {
						  labels: ['1', '2', '3', '4', '5'],
						  datasets: [{
						    label: 'Dataset 1',
						    backgroundColor: [self.getColor('{{$CandidateCol[0]}}'), self.getColor('{{$CandidateCol[1]}}'), self.getColor('{{$CandidateCol[2]}}'), self.getColor('{{$CandidateCol[3]}}'), self.getColor('{{$CandidateCol[4]}}')],
						    borderWidth: 0,
						    data: {{ "[".implode(", ",$Candidate)."]" }}
						  }]
						};					
					
					var canvas = $('#canvas-profile')[0].getContext('2d');
					var chart = new Chart(canvas, {
					  	type: 'bar',

					  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: {
							  display: false
							}
					      }],
					      yAxes: [{
					        stacked: true,
							gridLines: {
							  color: "transparent",
							  display: true,
							  drawBorder: false,
							  zeroLineColor: "#ccc",
							  zeroLineWidth: 1
							},
							ticks: {
								 display: false,
								 min: 0,
								 max: 150
							}			
					      }]
					    }
					  }
					});
				},

		};

		chartjsBar.init();
	</script>
	<script src="{{ asset('assets/javascript/nouislider.min.js') }}"></script>
	<script>
	var sliders = document.getElementsByClassName('nouislider-wrapper');

	var slidervalues = [{{ $Candidate[0] }},{{ $Candidate[1] }},{{ $Candidate[2] }},{{ $Candidate[3] }},{{ $Candidate[4] }}];

	var classes = ['{{$CandidateCol[0]}}','{{$CandidateCol[1]}}','{{$CandidateCol[2]}}','{{$CandidateCol[3]}}','{{$CandidateCol[4]}}'];

	$("#sliderColourInput").val(classes);
	
	for ( var i = 0; i < sliders.length; i++ ) {
		sliders[i].classList.add(classes[i]);
	    noUiSlider.create(sliders[i], {
	        start: [slidervalues[i]],
	        orientation: 'vertical',
			direction: 'rtl',
			connect: [true, false],
			range: { min: 0, max: 165 },
	    });
	    sliders[i].noUiSlider.on('change', addValues);
	}

	function addValues(){
	    var allValues = [];

	    for (var i = 0; i < sliders.length; i++) {
	       allValues.push(sliders[i].noUiSlider.get());
	    };
		$("#sliderValueInput").val(allValues);
	}

	</script>
@endpush