@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 -->			  
              @role('admin|facilitator')
                  <!-- News modal -->
                  <div class="modal fade" id="newsModal" tabindex="-1" role="dialog" aria-labelledby="ImportLabel" aria-hidden="true">
                  	<!-- .modal-dialog -->
                    	<div class="modal-dialog" role="document">
                     	<!-- .modal-content -->
                     	<div class="modal-content">
                    		<!-- .modal-header -->
                       		<div class="modal-header">
                          		<h5 class="modal-title">{{ __('MMI Update') }}</h5>
                        		</div>
                            <!-- /.modal-header -->
                           	<!-- .modal-body -->
                            	<div class="modal-body">
                            	  <p>Agenda</p>
                                  <p>Facilitator training: 5, 14 en 26 november (Breda)</p>
                                  <p>Interesse of aanmelden? Stuur een e-mail naar <a href="mailto:info@mymotivationinsights.com">info@mymotivationinsights.com</a></p>
    						</div>
                          	<!-- /.modal-body -->
                      		<!-- .modal-footer -->
                       		<div class="modal-footer">
                      			<button type="button" class="btn btn-light" data-dismiss="modal">{{ __('Close') }}</button>
                	    	</div>
                        	<!-- /.modal-footer -->
    					</div>
                       	<!-- /.modal-content -->
                  	</div>
                  	<!-- /.modal-dialog -->
                  </div>
                  <!-- /.modal -->
              @endrole
              
              <!-- .page-section -->
              <div class="page-section">

   				@role('admin|facilitator|payupfront')
					<!-- .section-block -->
	                <div class="section-block">
	                  <!-- grid row -->
	                  <div class="row">
					    @if ($mysessions->count()>0)
						  @foreach ($mysessions->where('sessionDate', '>=',  date("Y-m-d H:i:s", strtotime('-1 days'))) as $mysession)
		                    <!-- grid column -->
		                    <div class="col-lg-4">
		                      <!-- .card -->
		                      <section class="card">
								<header class="card-header">
								 <div class="row">
								  <div class="col-2">
									<div class="tile tile-circle bg-primary"><span class="oi oi-people"></span></div>
								  </div>
								  <div class="col-10">
									<span class="text"> {{ $mysession->sessioncode }} {{ $mysession->sessionname }} </span><br>
				                    <span class="date small"> {{ \Carbon\Carbon::parse($mysession->sessionDate)->addHours(7)->diffForHumans() }}</span>
								  </div>
								 </div>
								</header>
		                        <!-- .card-body -->
		                        <div class="card-body">
								 <div class="row">
								  <div class="col-6">
								    @role('orgadmin')
								  	    <span class="text">{{ __('Facilitator') }}</span><br>
								  	@endrole
								  	<span class="text">{{ __('Profile') }}</span><br>
									<span class="text">{{ __('Teamsession date') }}</span><br>
									<span class="text">{{ __('Download report') }}</span>
								  </div>
								  <div class="col-6">
								    @role('orgadmin')
								  	    <span class="text">{{ $mysession->facilitatorname }}</span><br>
								  	@endrole
								  	<span class="text">{{ __($profiles->where('id', '=', $mysession->profileID)->first()->profilename) }}</span><br>
									<span class="text"> {{ \Carbon\Carbon::parse($mysession->sessionDate)->format('d-m-Y') }} </span><br>
				                    <span class="text"> @if (($mysession->downloadReport == "1")||(($mysession->downloadDate != null) && (\Carbon\Carbon::parse($mysession->downloadDate)->addHours(-2) <= date("Y-m-d H:i:s"))))  {{ __('Yes') }} @else {{ __('No') }} @endif</span>
								  </div>
								 </div>
								 <br>
								 <span class="text">{{ __('Profile completed') }}</span><br>
								 <div class="progress mb-3">
                        				<div class="progress-bar" role="progressbar" style="width: {{ $percResults[$mysession->id] }}%;"></div>
                      			 </div>
                      			 @if ($mysession->profileID == 0)
    								 <span class="text">{{ __('Permission granted') }}</span><br>
    								 <div class="progress mb-3">
                            				<div class="progress-bar" role="progressbar" style="width: {{ $percPermissions[$mysession->id] }}%;"></div>
                          			 </div>
                          		 @endif
		                        </div>
		                        <!-- /.card-body -->
		                        <!-- .card-footer -->
		                        <footer class="card-footer">
		                          @role('admin|facilitator')
    		                          <a href="/sessions/{{ $mysession->id }}/2" class="card-footer-item card-footer-item-bordered">{{ __('Users') }}</a>
    		                          <a href="/sessions/{{ $mysession->id }}/4" class="card-footer-item card-footer-item-bordered">{{ __('Emails') }}</a>
    		                          <a href="/sessions/{{ $mysession->id }}/5" class="card-footer-item card-footer-item-bordered">{{ __('Reports') }}</a>
    		                      @endrole
    		                      @role('payupfront')
    		                          <a href="/teams/{{ $mysession->id }}" class="card-footer-item card-footer-item-bordered">{{ __('Users') }}</a>
    		                          <a href="/teams/emails/{{ $mysession->id }}" class="card-footer-item card-footer-item-bordered">{{ __('Emails') }}</a>
    		                          <a href="/teams/reports/{{ $mysession->id }}" class="card-footer-item card-footer-item-bordered">{{ __('Reports') }}</a>
    		                      @endrole
		                        </footer>
		                        <!-- /.card-footer -->
		                      </section>
		                      <!-- /.card -->
		                    </div>
		                    <!-- /grid column -->
						  @endforeach
	                    @else
						  @role('facilitator')  
							<!-- 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="assets/images/nosession.png">
									   <div class="figure-action">
			                            <a href="/sessions" class="btn btn-block btn-lg btn-primary">{{ __('Go to Teams') }}</a>
			                          </div>
			                        </div>
			                        <!-- /.figure-img -->
			                        <!-- .figure-caption -->
			                        <figcaption class="figure-caption">
			                          <h6 class="figure-title">
			                            <a href="/sessions">{{ __('No upcoming Teamsessions ...') }}</a>
			                          </h6>
			                          <p class="text-muted mb-0">{{ __('There are no upcoming teamsessions for you, if you want to start a teamsession, click here!') }}</p>
			                        </figcaption>
			                        <!-- /.figure-caption -->
			                      </figure>
			                      <!-- /.card-figure -->
			                    </section>
			                    <!-- /.card -->
							</div>
		                    <!-- grid column -->
						  @endrole
						@endif
						@role('payupfront')  
							<!-- 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="assets/images/nosession.png">
									   <div class="figure-action">
			                            <a href="/teams/create" class="btn btn-block btn-lg btn-primary">{{ __('Add Users') }}</a>
			                          </div>
			                        </div>
			                        <!-- /.figure-img -->
			                        <!-- .figure-caption -->
			                        <figcaption class="figure-caption">
			                          <h6 class="figure-title">
			                            <a href="/teams/create">{{ __('Add Users') }}</a>
			                          </h6>
			                          <p class="text-muted mb-0">{{ __('Click here if you want to add Users or a Team to your account.') }}</p>
			                        </figcaption>
			                        <!-- /.figure-caption -->
			                      </figure>
			                      <!-- /.card-figure -->
			                    </section>
			                    <!-- /.card -->
							</div>
		                    <!-- grid column -->
						  @endrole
					  </div>
	                  <!-- /row -->
	                </div>
	                <!-- /.section-block -->
	            @endrole  
                @role('admin|facilitator')
					<!-- .section-block -->
	                <div class="section-block">
	                  <!-- metric row -->
	                  <div class="metric-row">
	                    <!-- metric column -->
	                    <div class="col-lg-3">
	                      <!-- .metric -->
	                      <a href="/openprofiles" class="metric metric-bordered align-items-center"">
	                        @if ($useropenprofiles > 0)
								<div class="metric-badge">
		                          <span class="badge badge-lg badge-success">
		                            <span class="oi oi-media-record pulse mr-1"></span>{{ __('Open Profiles') }}</span>
		                        </div>
							@else
	                            <h2 class="metric-label">{{ __('Open Profiles') }}</h2>
							@endif
	                        <p class="metric-value h3">
	                          <sub>
	                            <i class="oi oi-envelope-open"></i>
	                          </sub>
	                          <span class="value">&nbsp{{ $useropenprofiles }}</span>
	                        </p>
	                      </a>
	                      <!-- /.metric -->
	                    </div>
	                    
	                    <div class="col-lg-3">
	                      <div class="metric-row metric-flush">
	                        <!-- metric column -->
	                        <div class="col">
	                          <!-- .metric -->
	                          <a href="/users" class="metric metric-bordered align-items-center">
	                            <h2 class="metric-label">{{ __('Users') }}</h2>
	                            <p class="metric-value h3">
	                              <sub>
	                                <i class="oi oi-person"></i>
	                              </sub>
	                              <span class="value">&nbsp{{ $myusers }}</span>
	                            </p>
	                          </a>
	                          <!-- /.metric -->
	                        </div>
	                        <!-- /metric column -->
	                     </div>
	                    </div>
	                    <div class="col-lg-3">
	                     <div class="metric-row metric-flush">
	                        <!-- metric column -->
	                        <div class="col">
	                          <!-- .metric -->
	                          <a href="/sessions" class="metric metric-bordered align-items-center">
	                            <h2 class="metric-label">{{ __('Teams') }}</h2>
	                            <p class="metric-value h3">
	                              <sub>
	                                <i class="oi oi-project"></i>
	                              </sub>
	                              <span class="value">&nbsp{{ $mysessions->count() }}</span>
	                            </p>
	                          </a>
	                          <!-- /.metric -->
	                        </div>
	                        <!-- /metric column -->
	                      </div>
	                    </div>
	                    <!-- metric column -->
	                  </div>
	                  <!-- /metric row -->
	                </div>
	                <!-- /.section-block -->
				@endrole

                <!-- .section-block -->
                <div class="section-block">
					<!-- row -->
                	<div class="row">
                	    <div class="col-md-9 col-sm-6">
                	        <div class="row">
        						@if ($myopenprofiles->count()>0)
        							@foreach ($profiles as $profile)
        								@php
        									 $i=0;
        								@endphp
        								@foreach ($myopenprofiles as $myopenprofile)
        								  	@if (($myopenprofile->profileID == $profile->id)&&($i==0))
        									  <!-- grid column -->
        					                  <div class="col-md-4 col-sm-12">
        					                    <!-- .card -->
        					                    <section class="card card-figure">
        					                      <!-- .card-figure -->
        					                      <figure class="figure">
        					                        <!-- .figure-img -->
        					                        <div class="figure-img">
        					                          <img class="img-fluid" src="assets/images/profile-{{ $profile->id }}.png" alt="{{ $profile->trans('profilename') }}">
        					                          <div class="figure-action">
        					                            <a href="/profiles/{{ $profile->id }}/{{ $myopenprofile->id }}" class="btn btn-block btn-lg btn-primary">{{ __('Start this Profile') }}</a>
        					                          </div>
        					                        </div>
        					                        <!-- /.figure-img -->
        					                        <!-- .figure-caption -->
        					                        <figcaption class="figure-caption">
        					                          <h6 class="figure-title">
        					                            <a href="/profiles/{{ $profile->id }}/{{ $myopenprofile->id }}">{{ __($profile->trans('profilename')) }}
        												@if ($profile->global == 0)
        													@if ($myopenprofile->groupname != null)
        														{{ $myopenprofile->groupname }}
        													@endif
        													@if ($myopenprofile->sessionname != null)
        														{{ $myopenprofile->sessionname }}
        													@endif
        												@endif
        												</a>
        					                          </h6>
        					                          <p class="text-muted mb-0">{{ __('The questionnaire has not been completed, you can start right away!') }}</p>
        					                        </figcaption>
        					                        <!-- /.figure-caption -->
        					                      </figure>
        					                      <!-- /.card-figure -->
        					                    </section>
        					                    <!-- /.card -->
        					                  </div>
        					                  <!-- /grid column -->
        								  	  @if ($profile->global == 1)
        									  	@php
        											$i=1;
        										@endphp
        									  @endif
        									@endif
        								@endforeach
        							@endforeach
        						@else
        							@if ($profilenumbers==null) 
        							@role('admin|facilitator|payupfront')
        							@else
        								<!-- grid column -->
        								<div class="col-md-4 col-sm-12">
        				                    <!-- .card -->
        				                    <section class="card card-figure" >
        				                      <!-- .card-figure -->
        				                      <figure class="figure">
        				                        <!-- .figure-img -->
        				                        <div class="figure-img">
        				                          <img class="img-fluid" src="assets/images/noprofile.png" alt="MMI Profile">
        				                        </div>
        				                        <!-- /.figure-img -->
        				                        <!-- .figure-caption -->
        				                        <figcaption class="figure-caption">
        				                          <h6 class="figure-title">
        				                            <a href="/">{{ __('No open Profiles ...') }}</a>
        				                          </h6>
        				                          <p class="text-muted mb-0">{{ __('There are no open profiles for you, please contact your facilitator if you think there should be a questionnaire waiting for you!') }}</p>
        				                        </figcaption>
        				                        <!-- /.figure-caption -->
        				                      </figure>
        				                      <!-- /.card-figure -->
        				                    </section>
        				                    <!-- /.card -->
        								</div>
        			                  <!-- grid column -->
        							@endrole
        							@endif
        						@endif
        						@foreach ($profilenumbers as $profilenumber)
        							<!-- grid column -->
        							<div class="col-md-4 col-sm-12">
        			                    <!-- .card -->
        			                    <section class="card card-figure" >
        			                      <!-- .card-figure -->
        			                      <figure class="figure">
        									<!-- .figure-img -->
        			                        <div class="figure-img" style="height: 240px">
        			                          @if ($profileIDs[$profilenumber] == 8)
        									  <img class="img-fluid" src="assets/images/report-8.png" alt="Vacancy report">
        									  @else
        									  <canvas id="canvas-profile-{{ $profilenumber }}" class="chartjs"></canvas>
        									  @endif
        									  <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!') }}</p>
        			                        </figcaption>
        			                        <!-- /.figure-caption -->
        			                      </figure>
        			                      <!-- /.card-figure -->
        			                    </section>
        			                    <!-- /.card -->
        							</div>
        		                  <!-- grid column -->
        						@endforeach
        					</div>
        				</div>
        				<div class="col-md-3 col-sm-6">
        				    @role('admin|regioadmin|payupfront')
        					@else
        				    @foreach ($myfacilitators as $fac)
            				    <div class="row">
            				        <div class="col-md-12">
            				            <section class="card card-figure" >
        			                      <h6 class="figure-title">
        								    <a href="mailto:{{ $fac->email }}">{{ __('Your Facilitator') }}</a>
        			                      </h6>
        			                      <!-- .card-figure -->
        			                      <figure class="figure">
        									<!-- .figure-img -->
        									<div class="user-avatar user-avatar-xl">
                                              <img src="{{ $facAvatarAry[$fac->id] }}" alt="User Avatar">
                                                <div class="figure-action">
            			                            <a href="mailto:{{ $fac->email }}" class="btn btn-block btn-lg btn-primary">{{ __('email') }}</a>
            			                        </div>
                                            </div>
        			                        
        			                        <!-- /.figure-img -->
        									<!-- .figure-caption -->
        			                        <figcaption class="figure-caption">
        			                          <h6 class="figure-title">
        										<a href="mailto:{{ $fac->email }}">{{ $facNameAry[$fac->id] }}</a>
        			                          </h6>
        			                          <p class="text-muted mb-0">{{ $facIntroAry[$fac->id] }}</p>
        			                        </figcaption>
        			                        <!-- /.figure-caption -->
        			                      </figure>
        			                      <!-- /.card-figure -->
        			                    </section>
        			                    <!-- /.card -->
            				        </div>
        				        </div>
        				    @endforeach
        				    @if (Auth::user()->id == 26770)  <!-- test user only, remove later -->
        				    <div class="row">
        				        <div class="col-md-12">
        				            <section class="card card-figure" >
    			                      <h6 class="figure-title">
    								    <a href="mailto:{{ $fac->email }}">{{ __('Your Tip') }}</a>
    			                      </h6>
    			                      
    			                      <!-- .card-figure -->
                                      <figure class="figure">
                                        <img class="img-fluid" src="{{ $tiplink }}" alt="Tip image"> 
                                        <!-- .figure-caption -->
                                        <figcaption class="figure-caption">
                                          
                                          <h6 class="figure-title">@if ($content!==null) {{ $content->subject }} @endif</h6>
                                          
            	                          <p class="text-muted mb-0">@if ($content!==null) {{ $content->cleanedBody }} @endif</p>

                                        </figcaption><!-- /.figure-caption -->
                                      </figure><!-- /.card-figure -->
    			                      
    			                    </section>
    			                    <!-- /.card -->
        				        </div>
    				        </div>
        				    @endif
        				    @endrole
        				</div>
					</div>
					<!-- row -->
                </div>
                <!-- /.section-block -->
				
				@if (Auth::user()->id == 6443)
					<!-- .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">{{ __("Aantal TeamScan sessie's in de afgelopen 12 maanden") }}</h3>
		                        </div>
		                        <!-- /.d-flex -->
		                        <div class="chartjs" style="height: 300">
		                          <canvas id="last-year"></canvas>
		                        </div>
		                      </div>
		                      <!-- /.card-body -->
		                    </section>
		                    <!-- /.card -->
		                </div>
					</div>
				@endif
				
				@role('admin|regioadmin')
					<!-- .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">{{ __('Completed Profiles in the Last Years') }}</h3>
		                        </div>
		                        <!-- /.d-flex -->
		                        <div class="chartjs" style="height:300px">
		                          <canvas id="last-year"></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">{{ __('Cumulative Profiles in the Last Years') }}</h3>
		                        </div>
		                        <!-- /.d-flex -->
		                        <div class="chartjs">
		                          <canvas id="last-year-cum"></canvas>
		                        </div>
		                      </div>
		                      <!-- /.card-body -->
		                    </section>
		                    <!-- /.card -->
		                </div>
					</div>
					<div class="row">	
		                <div class="col-12 col-lg-12 col-xl-6">
		                    <!-- .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">{{ __('Most Active Facilitators - This month') }}</h3>
		                        </div>
		                        <!-- /.d-flex -->
		                        <div class="chartjs" style="height: 300">
		                          <canvas id="most-active-month"></canvas>
		                        </div>
		                      </div>
		                      <!-- /.card-body -->
		                    </section>
		                    <!-- /.card -->
		                </div>
						<div class="col-12 col-lg-12 col-xl-6">
		                    <!-- .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">{{ __('Most Active Facilitators - Last 12 months') }}</h3>
		                        </div>
		                        <!-- /.d-flex -->
		                        <div class="chartjs" style="height: 300">
		                          <canvas id="most-active-year"></canvas>
		                        </div>
		                      </div>
		                      <!-- /.card-body -->
		                    </section>
		                    <!-- /.card -->
		                </div>
	                </div>
	                <div class="row">	
		                <div class="col-12 col-lg-12 col-xl-6">
		                    <!-- .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">{{ __('Open Invoices - Longest') }} ({{ __('Total Number') }}: {{ $openInvoicesTotal }})</h3>
		                        </div>
		                        <!-- /.d-flex -->
		                        <div class="chartjs" style="height: 300">
		                          <canvas id="open-invoices-longest"></canvas>
		                        </div>
		                      </div>
		                      <!-- /.card-body -->
		                    </section>
		                    <!-- /.card -->
		                </div>
						<div class="col-12 col-lg-12 col-xl-6">
		                    <!-- .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">{{ __('Open Invoices - Highest Value') }} ({{ __('Total Value') }}: {{ $openInvoicesTotalValue }})</h3>
		                        </div>
		                        <!-- /.d-flex -->
		                        <div class="chartjs" style="height: 300">
		                          <canvas id="open-invoices-highest"></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>
	<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)',
		      purple: 'rgb(108, 38, 117)',
		      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] == 10) || ($profileIDs[$profilenumber] == 11))
						@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', '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: 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]}}'), self.getColor('{{$colour[$profilenumber][5]}}'), self.getColor('{{$colour[$profilenumber][6]}}')],
						    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]}}'), self.getColor('{{$colour[$profilenumber][5]}}'), self.getColor('{{$colour[$profilenumber][6]}}')],
						    borderWidth: 2,
							borderColor: "#fff",
						    data: {{ "[".implode(", ",$series3)."]" }}
						  }]
						};
					@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: [{
					        @if ($profileIDs[$profilenumber] != 7)
								barPercentage: 1.1,
							@endif
							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>
	@if (Auth::user()->id == 6443)
	<script>
		var months = {!! json_encode($monthNameAry) !!};
		var profileAry = {!! json_encode($profileAry) !!};
		var profileNameAry = {!! json_encode($profileNameAry) !!};
		datasets = [];
		for (key in profileNameAry) {
			data = [];
			for (i = 1; i <= 12; i++) {
				if (typeof profileAry[key][i] !== 'undefined') {
					data.push(profileAry[key][i]);
				} else {
					data.push(0);
				}
			}
			redValue = 247;
			greenValue = 150;
			blueValue = 34;
			if (key == 1) {
				redValue = 192;
				greenValue = 192;
				blueValue = 192;
			}
			dataset = {
				label: profileNameAry[key],
				backgroundColor: 'rgb(' + redValue + ', ' + greenValue + ', ' + blueValue + ')',
				borderColor: 'rgb(' + redValue + ', ' + greenValue + ', ' + blueValue + ')',
				borderWidth: 1,
				data: data
			};

			datasets.push(dataset);
		}
		var self = this;
	    var data = {
	      labels: months,
	      datasets: datasets
	      // init chart bar
	    };
	    var canvas = $('#last-year')[0].getContext('2d');
	    var chart = new Chart(canvas, {
	      type: 'bar',
	      data: data,
	      options: {
	        responsive: true,
	        legend: { display: true },
	        title: { display: false },
	        scales: {
	          xAxes: [{
	            gridLines: {
	              display: true,
	              drawBorder: true,
	              drawOnChartArea: false
	            },
	            ticks: {
	              maxRotation: 0,
	              maxTicksLimit: 12
	            },
	            stacked: true
	          }],
	          yAxes: [{
	            gridLines: {
	              display: true,
	              drawBorder: true,
	              drawOnChartArea: true
	            },
	            ticks: {
	              beginAtZero: true,
	              stepSize: 50
	            },
	            stacked: true
	          }]
	        }
	      }
	    });	
	</script>
	@endif
	@role('admin|regioadmin')
	<script>
		var months = {!! json_encode($monthNameAry) !!};
		var profileAry = {!! json_encode($profileAry) !!};
		var profileLYAry = {!! json_encode($profileLYAry) !!};
		var profileNameAry = {!! json_encode($profileNameAry) !!};
		datasets = [];
		datacum = [0,0,0,0,0,0,0,0,0,0,0,0];
		dataLYcum = [0,0,0,0,0,0,0,0,0,0,0,0];
		datarol = [0,0,0,0,0,0,0,0,0,0,0,0];
		// Theme-aligned colors (based on portal theme #6C2675)
		var themeColors = [
			'rgb(108, 38, 117)',   // Purple (theme primary)
			'rgb(78, 121, 167)',   // Blue
			'rgb(89, 161, 79)',    // Green
			'rgb(225, 137, 62)',   // Orange
			'rgb(118, 183, 178)',  // Teal
			'rgb(242, 142, 44)',   // Amber
			'rgb(70, 130, 180)',   // Steel blue
			'rgb(144, 190, 109)',  // Light green
			'rgb(199, 125, 85)',   // Terracotta
			'rgb(99, 99, 99)'      // Gray (for estimates)
		];
		
		var isLatestEstimate = false;
		var lastProfileIndex = Object.keys(profileNameAry).length - 1;
		
		for (key in profileNameAry) {
			data = [];
			dataly = [];
			
			// Check if this is the "Latest estimate" entry (always last)
			isLatestEstimate = (profileNameAry[key].indexOf('estimate') !== -1 || profileNameAry[key].indexOf('Estimate') !== -1);
			
			for (i = 1; i <= 12; i++) {
				if (typeof profileAry[key][i] !== 'undefined') {
					data.push(profileAry[key][i]);
					if (!isLatestEstimate) {
						datacum[i-1] = datacum[i-1] + profileAry[key][i];
					}
				} else {
					data.push(0);
				}
				if (typeof profileLYAry[key][i] !== 'undefined') {
					dataly.push(profileLYAry[key][i]);
					if (!isLatestEstimate) {
						dataLYcum[i-1] = dataLYcum[i-1] + profileLYAry[key][i];
					}
				} else {
					dataly.push(0);
				}
			}
			
			// Get color from theme palette, gray for Latest estimate
			var colorIndex = parseInt(key) % themeColors.length;
			var color = isLatestEstimate ? 'rgb(160, 160, 160)' : themeColors[colorIndex];
			
			// Only add Y-1 dataset for actual profiles (not Latest estimate)
			if (!isLatestEstimate && key < lastProfileIndex) {
				dataset = {
					label: profileNameAry[key] + ' Y-1',
					backgroundColor: color,
					borderColor: color,
					borderWidth: 1,
					stack: 'Stack 0',
					data: dataly
				};
				datasets.push(dataset);
			}
			
			dataset = {
				label: profileNameAry[key],
				backgroundColor: color,
				borderColor: color,
				borderWidth: 1,
				stack: 'Stack 1',
				data: data
			};
			datasets.push(dataset);
		}
		var self = this;
	    var data = {
	      labels: months,
	      datasets: datasets
	    };
	    // init chart bar
	    var canvas = $('#last-year')[0].getContext('2d');
	    var chart = new Chart(canvas, {
	      type: 'bar',
	      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
	            },
	            stacked: true
	          }],
	          yAxes: [{
	            gridLines: {
	              display: true,
	              drawBorder: true,
	              drawOnChartArea: true
	            },
	            ticks: {
	              beginAtZero: true,
	              //stepSize: 200
	            },
	            stacked: true
	          }]
	        }
	      }
	    });

		for (i = 1; i <= 11; i++) {
			datacum[i] = datacum[i] + datacum[i-1];
			datarol[i-1] = datacum[i-1];
			for (j = i; j <= 11; j++) {
				datarol[i-1] = datarol[i-1] + dataLYcum[j];
			}
			dataLYcum[i] = dataLYcum[i] + dataLYcum[i-1];
		}
		datarol[11] = datacum[11];
		
		datasets = [];
		var labelYear = '{!! $labelYear !!}';
		dataset = {
			label: labelYear,
			backgroundColor: 'rgb(108, 38, 117)',
			borderColor: 'rgb(108, 38, 117)',
			fill: false,
			data: datacum
		};
		datasets.push(dataset);
		var labelLastYear = '{!! $labelLastYear !!}';
		dataset = {
			label: labelLastYear,
			backgroundColor: 'rgb(236, 32, 40)',
			borderColor: 'rgb(236, 32, 40)',
			fill: false,
			data: dataLYcum
		};
		datasets.push(dataset);
		var labelRolling = '{!! $labelRolling !!}';
		dataset = {
			label: labelRolling,
			backgroundColor: 'rgb(72, 166, 71)',
			borderColor: 'rgb(72, 166, 71)',
			fill: false,
			data: datarol
		};
		datasets.push(dataset);
		var self = this;
	    var data = {
	      labels: months,
	      datasets: datasets
	      // init line bar
	    };
	    var canvas = $('#last-year-cum')[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: 1000
	            },
	            
	          }]
	        }
	      }
	    });
		
	    var facs = {!! json_encode($facMonthNameAry) !!};
		var monthAry = {!! json_encode($facMonthAry) !!};
		var labelMonth = '{!! $labelMonth !!}';
		datasets = [];
		datasetMonth = {
			label: labelMonth,
			backgroundColor: 'rgb(108, 38, 117)',
			borderColor: 'rgb(108, 38, 117)',
			borderWidth: 1,
			data: monthAry
		};
		datasets.push(datasetMonth);
		var self = this;
	    var data = {
	      labels: facs,
	      datasets: datasets
	      // init chart bar
	    };
	    var canvas = $('#most-active-month')[0].getContext('2d');
	    var chart = new Chart(canvas, {
	      type: 'horizontalBar',
	      data: data,
	      options: {
	        responsive: true,
	        legend: { display: false },
	        title: { display: false },
	        scales: {
	          xAxes: [{
	            gridLines: {
	              display: true,
	              drawBorder: true,
	              drawOnChartArea: true
	            },
	            ticks: {
	              beginAtZero: true,
	              maxRotation: 0,
	              maxTicksLimit: 12
	            },
	            //stacked: true
	          }],
	          yAxes: [{
	            gridLines: {
	              display: false,
	              drawBorder: true
	            },
	            ticks: {
	              beginAtZero: true,
	              stepSize: 100
	            },
	            //stacked: true
	          }]
	        }
	      }
	    });

		var facs = {!! json_encode($facYearNameAry) !!};
		var yearAry = {!! json_encode($facYearAry) !!};
		var labelYear = '{!! $labelYear !!}';
		datasets = [];
		datasetYear = {
			label: labelYear,
			backgroundColor: 'rgb(108, 38, 117)',
			borderColor: 'rgb(108, 38, 117)',
			borderWidth: 1,
			data: yearAry
		};
		datasets.push(datasetYear);
		var self = this;
	    var data = {
	      labels: facs,
	      datasets: datasets
	      // init chart bar
	    };
	    var canvas = $('#most-active-year')[0].getContext('2d');
	    var chart = new Chart(canvas, {
	      type: 'horizontalBar',
	      data: data,
	      options: {
	        responsive: true,
	        legend: { display: false },
	        title: { display: false },
	        scales: {
	          xAxes: [{
	            gridLines: {
	              display: true,
	              drawBorder: true,
	              drawOnChartArea: true
	            },
	            ticks: {
	              beginAtZero: true,
	              maxRotation: 0,
	              maxTicksLimit: 12
	            },
	            //stacked: true
	          }],
	          yAxes: [{
	            gridLines: {
	              display: false,
	              drawBorder: true
	            },
	            ticks: {
	              beginAtZero: true,
	              stepSize: 100
	            },
	            //stacked: true
	          }]
	        }
	      }
	    });
	    var longest = {!! json_encode($openInvoicesLongestNameAry) !!};
		var longestAry = {!! json_encode($openInvoicesLongestAry) !!};
		var labelLongest = '{!! $labelLongest !!}';
		datasets = [];
		datasetMonth = {
			label: labelLongest,
			backgroundColor: 'rgb(108, 38, 117)',
			borderColor: 'rgb(108, 38, 117)',
			borderWidth: 1,
			data: longestAry
		};
		datasets.push(datasetMonth);
		var self = this;
	    var data = {
	      labels: longest,
	      datasets: datasets
	      // init chart bar
	    };
	    var canvas = $('#open-invoices-longest')[0].getContext('2d');
	    var chart = new Chart(canvas, {
	      type: 'horizontalBar',
	      data: data,
	      options: {
	        responsive: true,
	        legend: { display: false },
	        title: { display: false },
	        scales: {
	          xAxes: [{
	            gridLines: {
	              display: true,
	              drawBorder: true,
	              drawOnChartArea: true
	            },
	            ticks: {
	              beginAtZero: true,
	              maxRotation: 0,
	              maxTicksLimit: 12
	            },
	            //stacked: true
	          }],
	          yAxes: [{
	            gridLines: {
	              display: false,
	              drawBorder: true
	            },
	            ticks: {
	              beginAtZero: true,
	              stepSize: 100
	            },
	            //stacked: true
	          }]
	        }
	      }
	    });
	    
	    var highest = {!! json_encode($openInvoicesHighestNameAry) !!};
		var highestAry = {!! json_encode($openInvoicesHighestAry) !!};
		var labelHighest = '{!! $labelHighest !!}';
		datasets = [];
		datasetYear = {
			label: labelHighest,
			backgroundColor: 'rgb(108, 38, 117)',
			borderColor: 'rgb(108, 38, 117)',
			borderWidth: 1,
			data: highestAry
		};
		datasets.push(datasetYear);
		var self = this;
	    var data = {
	      labels: highest,
	      datasets: datasets
	      // init chart bar
	    };
	    var canvas = $('#open-invoices-highest')[0].getContext('2d');
	    var chart = new Chart(canvas, {
	      type: 'horizontalBar',
	      data: data,
	      options: {
	        responsive: true,
	        legend: { display: false },
	        title: { display: false },
	        scales: {
	          xAxes: [{
	            gridLines: {
	              display: true,
	              drawBorder: true,
	              drawOnChartArea: true
	            },
	            ticks: {
	              beginAtZero: true,
	              maxRotation: 0,
	              maxTicksLimit: 12
	            },
	            //stacked: true
	          }],
	          yAxes: [{
	            gridLines: {
	              display: false,
	              drawBorder: true
	            },
	            ticks: {
	              beginAtZero: true,
	              stepSize: 100
	            },
	            //stacked: true
	          }]
	        }
	      }
	    });
	</script>
	@endrole
	@role('admin|facilitator')
	    <script>
	        var lastlogin = new Date('{!! $last_login !!}');
        	var newsdate = new Date("2025-10-01");
        	var language = '{!! $lang !!}';
        	
        	if (language == 'nl') {
            	if (lastlogin < newsdate) {
    			    $(document).ready(function() {
                      $('#newsModal').modal('show');
                    });
            	}
        	}
        </script>
	@endrole
@endpush