@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-inner-fill">
			<!-- .page-navs -->
			<header class="page-navs has-shadow bg-white py-4">
				<h5 > {!! $title->title !!} </h5>
				<div class="progress progress-xs mb-3">
					<div class="progress-bar" role="progressbar" style="width: {{ $page/$maxpage*100 }}%;" ></div>
				</div>
			</header>
			<!-- /.page-navs -->
			<!-- .board -->
			<div id="board" class="board">
				<!-- .form -->
				<form method="POST" action="/profiles/run/{{ $userprofile }}">
				{{ csrf_field() }}
					<!-- last page confirm modal -->
					<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="ConfirmLabel" 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">{{ __('Confirmation') }}</h5>
								</div>
								<!-- /.modal-header -->
								<!-- .modal-body -->
								<div class="modal-body">
									<p>{{ __('This is the last page of the questionnaire.') }}</p>
									<p>{{ __('Please confirm that you are ready with the questionnaire.') }}</p>
								</div>
								<!-- /.modal-body -->
								<!-- .modal-footer -->
								<div class="modal-footer">
									<button name="page" value="{{ $page+1 }}" class="btn btn-primary">{{ __('Submit') }}</button>
									<button class="btn btn-light" data-dismiss="modal">{{ __('Back to questionnaire') }}</button>
								</div>
								<!-- /.modal-footer -->
							</div>
							<!-- /.modal-content -->
						</div>
						<!-- /.modal-dialog -->
					</div>
					<!-- /.modal -->			   
					<!-- .card -->			   
					<section class="card card-fluid">
						<!-- .card-body -->
						<div class="card-body">
							@if ($error!==null)
								<div class="alert alert-danger has-icon alert-dismissible fade show">
									<button type="button" class="close" data-dismiss="alert">×</button>
									<div class="alert-icon">
										<span class="oi oi-flag"></span>
									</div>
									<h4 class="alert-heading">{{ __('Warning!') }}</h4>
									<p class="mb-0">{{ $error }}</p>
								</div>
							@endif
							@php
								$i=0;
							@endphp
							@foreach ($questions as $question)
								@if ($question->questionText !== "")
									@if ($i==1)
										<hr>
									@else
										@php
											$i=1;
										@endphp
									@endif
									<div class="row">
										<div class="col-1">
										@if (($profileid == "4") && ($page==$maxpage))
											<h5>{!! $uservalues[$question->orderNR] !!}</h5>
										@endif
										</div>
										<div class="col-10">
											<h6>{!! $question->questionText !!}</h6>
										</div>
										<div class="col-1"></div>
									</div>						
								@endif
								@include('profile.questiontext.'.$question->questiontypeText)
							@endforeach
							<hr>
							<!-- .form-group -->
	                        <div class="d-flex justify-content-between">
								@if (($profileid == "4") && ($page==$maxpage))
									<button name="page" value=" {{ $page }}"class="btn btn-primary"><span class="oi oi-chevron-left"></span><span class="oi oi-chevron-left"></span></button>
								
								@else
									<button name="page" value=" {{ $page-1 }}"class="btn btn-primary"><span class="oi oi-chevron-left"></span><span class="oi oi-chevron-left"></span></button>
								@endif
								<div><p>{{ __('Page') }} {{ $page }} {{ __('of') }} {{ $maxpage }}</p></div>
								@if ($page<$maxpage)
									<button name="page" value="{{ $page+1 }}" class="btn btn-primary"><span class="oi oi-chevron-right"></span><span class="oi oi-chevron-right"></span></button>
								@else
									<div class="btn btn-primary" data-toggle="modal" data-target="#confirmModal"><span class="oi oi-chevron-right"></span><span class="oi oi-chevron-right"></span></div>
								@endif
							</div>
                        		<!-- .form-group -->
							<input type="hidden" name="sliderValueInput" id="sliderValueInput" value="">
							<input type="hidden" name="oldpage" id="oldpage" value="{{ $page }}">
						</div>
						<!-- /.card-body -->
					</section>
					<!-- /.card -->
				</form>
				<!-- /.form -->
			</div>
			<!-- /.board -->
		</div>
		<!-- /.page-inner -->
	</div>
	<!-- /.page -->
@endsection

@push('scripts')
<script src="{{ asset('assets/javascript/nouislider.min.js') }}"></script>
<script>
var sliders = document.getElementsByClassName('nouislider-wrapper');
var slidervalues = [{{ $slidervalues }}];

for ( var i = 0; i < sliders.length; i++ ) {

	@if (($profileid == "7") || ($profileid == "8"))
	    noUiSlider.create(sliders[i], {
	        start: [slidervalues[i]],
			snap: true,
	        range: { "min": 0, "35%": 25, "50%": 50, "65%": 75, "max": 100 },
	       	connect: [true, true],
	    });
	@else
	    noUiSlider.create(sliders[i], {
	        start: [slidervalues[i]],
	        range: { min: 0, max: 100 },
	       	connect: [true, true],
	    });
	@endif

    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