@extends('layouts.app')

@section('styles')
@endsection

@section('content')	      
		   <!-- .page -->
          <div class="page">
            <!-- .page-cover -->
            <header class="page-cover">
              <div class="text-center">
                <div class="user-avatar user-avatar-xl">
                  <img src="{{ $avatarlink }}" alt="User Avatar">
                </div>
                <h2 class="h4 mt-3 mb-0">{{ $user->name }}</h2>
			    @if (Auth::user()->hasRole('admin'))
					<span class="account-description">{{ __('Admin') }}</span>
				@elseif (Auth::user()->hasRole('regioadmin'))
					<span class="account-description">{{ __('Regio Admin') }}</span>
				@elseif (Auth::user()->hasRole('orgadmin'))
					<span class="account-description">{{ __('Organisation Admin') }}</span>	
				@elseif (Auth::user()->hasRole('facilitator'))
					<span class="account-description">{{ __('Facilitator') }}</span>
				@endif
              </div>
            </header>
            <!-- /.page-cover -->
            <!-- .page-navs -->
            <nav class="page-navs">
              <!-- .nav-scroller -->
              <div class="nav-scroller">
                <!-- .nav -->
                <div class="nav nav-center nav-tabs border-0">
                  <a class="nav-link" href="/accounts">{{ __('Account') }}</a>

                  <a class="nav-link active" href="/accounts/facilitator">{{ __('Facilitator') }}</a>
                
                  <a class="nav-link" href="/accounts/privacy">{{ __('Privacy') }}</a>
				  
				  <a class="nav-link" href="/accounts/invoices">{{ __('Invoices') }}</a>
                </div>
                <!-- /.nav -->
              </div>
              <!-- /.nav-scroller -->
            </nav>
            <!-- /.page-navs -->
            <!-- .page-inner -->
            <div class="page-inner">
              <!-- .page-section -->
              <div class="page-section">
	            <!-- row -->
                <div class="row">
	                <!-- form column -->
                    <div class="col-md-9 sm-6">
                        <!-- .card -->
                        <div class="card card-fluid">
                            <h6 class="card-header">{{ __('Facilitator Information') }}</h6>
                            <!-- .card-body -->
                            <div class="card-body">
            	                <!-- form -->
            					<form method="POST" action="/accounts/facilitator/{{ Auth::user()->id }}" enctype="multipart/form-data">
            				        {{ csrf_field() }}
            				        {{ method_field('PATCH') }}
        							<!-- row -->
                                    <div class="row">
                    	                <!-- form column -->
                                        <div class="col-md-9 sm-6">
                                            <!-- avatar -->
                                            <div class="user-avatar user-avatar-xl fileinput-button" id="image-preview">
                                                <div class="fileinput-button-label">{{ __('Change photo') }}</div>
                                                <input id="fileupload-avatar" type="file" name="avatar">
                                            </div>
                                            <!-- /avatar -->
                                            <!-- .media-body -->
                                            <div class="media-body pl-3">
                                                <h3 class="card-title">{{ __('Avatar') }}</h3>
                                                <h6 class="card-subtitle text-muted">{{ __('Click to change your photo.') }}</h6>
                                                <p class="card-text">
                                                    <small>JPG, GIF, PNG &lt; 2 MB.</small>
                                                </p><br>
                                            </div>
                                            <!-- /.media-body -->
                                        </div>
        							    <!-- /.form column -->
        							    <!-- form column -->
                                        <div class="col-md-3 sm-6">
            							    <!-- .form-group -->
                            				<div class="form-group">
                              					<label for="locale">{{ __('Language') }}</label>
                             					<select class="custom-select" id="localeselector" name="locale" required="">
                									@foreach ($languages as $language)
                                        			    <option value="{{ $language->locale }}" @if ($user->locale === $language->locale ) selected @endif > {{ $language->language }} </option>
                                      				@endforeach
                              					</select>
                            				</div>
                   					    </div>
        							    <!-- /.form column -->
                        			</div>
                        			<!-- /form row -->
               	        			@foreach ($languages as $language)
        							    @php
            								$mytemplate = $mytemplates->firstWhere('locale', $language->locale);
            							@endphp
            							@if ($user->locale === $language->locale)
            							<div id="{{ $language->locale }}" class="showlocale">
            							@else
            							<div id="{{ $language->locale }}" class="hidelocale">
            							@endif
            							    <!-- .form-group -->
                               				<div class="form-group">
                                  				<label for="subject">{{ __('Facilitator name') }}</label>
                								<input type="text" class="form-control" id="name" name="{{ $language->locale }}-facilitatorname" value="{{ $mytemplate->facilitatorname }}">
                                			</div>
                               				<!-- /.form-group -->
                               				<!-- .form-group -->
                							<div class="form-group">
                                  				<label for="subject">{{ __('Introduction text') }}</label>
                								<textarea class="form-control" rows="5 id="introduction" name="{{ $language->locale }}-introductiontext">{{ $mytemplate->introductiontext }}</textarea>
                                			</div>
                                			<!-- /.form-group -->
                						</div>
                        			@endforeach
	                                <hr>
                                    <!-- .form-actions -->
                                    <div class="d-flex justify-content-center">                        
                                        <button type="submit" class="btn btn-primary" >{{ __('Save') }}</button>
                                    </div>
                                    <!-- /.form-actions -->
            				    </form>
            	                <!-- /form -->
                            </div>
	                        <!-- /.card-body -->
        	            </div>
        	            <!-- /.card -->
                    </div>
                    <!-- /.form column -->
                    <!-- form column -->
                    <div class="col-md-3 sm-6">
                        <section class="card card-figure" >
	                      <h6 class="figure-title">
						    <a href="mailto:{{ $user->email }}">{{ __('Your Facilitator') }}</a>
	                      </h6>
	                      <!-- .card-figure -->
	                      <figure class="figure">
							<!-- .figure-img -->
							<div class="user-avatar user-avatar-xl">
                              <img src="{{ $avatarlink }}" alt="User Avatar">
                                <div class="figure-action">
		                            <a href="mailto:{{ $user->email }}" class="btn btn-block btn-lg btn-primary">{{ __('email') }}</a>
		                         </div>
                            </div>
	                        <!-- /.figure-img -->
							@php
								$mytemplate = $mytemplates->firstWhere('locale', $user->locale);
							@endphp
							<!-- .figure-caption -->
	                        <figcaption class="figure-caption">
	                          <h6 class="figure-title">
								<a href="mailto:{{ $user->email }}">{{ $mytemplate->facilitatorname }}</a>
	                          </h6>
	                          <p class="text-muted mb-0">{{ $mytemplate->introductiontext }}</p>
	                        </figcaption>
	                        <!-- /.figure-caption -->
	                      </figure>
	                      <!-- /.card-figure -->
	                    </section>
                    </div>
                    <!-- /.form column -->
                </div>
                <!-- /.row -->
              </div>
              <!-- /.page-section -->
            </div>
            <!-- /.page-inner -->	
          </div>
          <!-- /.page -->
@endsection

@push('scripts')
	<script type="text/javascript" src="{{ asset('assets/javascript/jquery.uploadPreview.min.js') }}"></script>
	<script type="text/javascript">
		$(document).ready(function() {
		  
            $('#localeselector').change(function(){
            	$('.hidelocale').hide();
            	$('.showlocale').hide();
            	$('#' + $(this).val()).show();
            });
			
    		$.uploadPreview({
    		    input_field: "#fileupload-avatar",   // Default: .image-upload
    		    preview_box: "#image-preview",  // Default: .image-preview
    		    label_field: "#image-label",    // Default: .image-label
    		    label_default: "Choose File",   // Default: Choose File
    		    label_selected: "Change File",  // Default: Change File
    		    no_label: true                 // Default: false
    		  });
		});
	</script>
@endpush