Question Answer

@extends('layouts.app',[
'title' => $question->title,
'breadcrumb' => [ 'Answers' ]
])

@section('content')
<div class="row">
	<div class="col-6">
		<div class="card">
			<div class="card-body">
				<h4 class="card-title">{{$question->title}}</h4>
				<h6 class="card-subtitle">Answers are listed bellow</h6>

				@include('layouts.message')

				<table class="table table-bordered table-striped no-footer mt-4" data-id="{{$question->id}}" id="answers-table">
					<thead>
						<tr>
							<th>#</th>
							<th>ID</th>
							<th>Customer</th>
							<th>Answer</th>
							<th>Date</th>
						</tr>
					</thead>
				</table>

			</div>
		</div>
	</div>
	<div class="col-lg-6 col-md-6">
		<div class="card">
			<div class="card-body row">
				<h4 class="card-title d-block w-100 p-l-10">{{ $question->title }}</h4>

				@if ($question->type === 'checkbox')

					@foreach($answers as $ans => $val)
						@php $width = round($val * 100/ $total); @endphp

						<div class="col-11">
							<div class="brand-bar" title="{{ $ans }}" style="--bar-width: {{ 15+$width }}%">
								{{ $val }}
							</div>
						</div>
						<div class="col-1 pt-3 text-muted"><small>{{ $val }}</small></div>
					@endforeach

				@else
					<div class="col-7">
						<div id="morris-donut-chart" class="ecomm-donute" style="height: 317px;"></div>
					</div>

					<div class="col-5 d-flex align-items-center">
							@php $colors = ["#fb9678","#01c0c8","#4F5467", "#69d2a1","#a67979", "#913D88", "#D64541", "#E67E22", "26C281", "#5C97BF"] @endphp

							<ul class="list-inline m-t-30 text-center" data-colors="{{ json_encode($colors) }}">

								@foreach($answers as $answer)

								<li class="d-block">
									@php
										$answer->value = round($answer->value * 100 / $total);
									@endphp
									<div class="text-left">
										<i class="fa fa-circle" style="color: {{ $colors[$loop->index] ?? $colors[rand(0, 9)] }};"></i>
										<span class="pl-2" style="font-size: 14x"><span>{{ $answer->label }}</span> <b>{{ $answer->value }}%</b></span>
									</div>


								</li>
								@endforeach
							</ul>
					</div>
				@endif

			</div>
		</div>
	</div>
</div>
@stop

@section('scripts')
	@if ($question->type !== 'checkbox')
		<script type="application/javascript">
			let color = document.getElementsByClassName('list-inline')[0].getAttribute('data-colors');
			color = JSON.parse(color);

			Morris.Donut({
				element: 'morris-donut-chart',
				data: {!!json_encode($answers) !!},
				resize: true,
				colors: color,
				formatter: function(value, data) {
					return value + "%";
				}
			});
		</script>
	@endif
@endsection