@extends('web.layouts.main')

@section('content')

@include('web.components.page-header', ['heading' => $section->title, 'subheading' => $section->text])

<div class="container pb-5">
	<div class="row">
		<div class="col-lg-6 mb-4">
			<div class="bg-quaternary custom-card h-100">
				<h4 class="text-uppercase"><b>{{ trans('text.6-most-frequent') }}</b></h4>
				<hr>
				<div class="adjust-element">
					<ul class="list-inline">
						@foreach($most_frequent_balls as $most_frequent_ball)
						<li class="list-inline-item">@include('web.components.loto-ball', ['number' => $most_frequent_ball, 'display_color' => Config::get('balls')[$most_frequent_ball]['color']])</li>
						@endforeach
					</ul>
				</div>
			</div>
		</div>
		<div class="col-lg-6 mb-4">
			<div class="bg-quaternary custom-card h-100">
				<h4 class="text-uppercase"><b>{{ trans('text.most-frequent') }}</b></h4>
				<hr>
				<div class="adjust-element">
					<ul class="list-inline">
						<li class="list-inline-item">@include('web.components.loto-ball', ['number' => $most_frequent_balls[0], 'display_color' => Config::get('balls')[$most_frequent_balls[0]]['color']])</li>
					</ul>
				</div>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-lg-6 mb-4">
			<div class="bg-quaternary custom-card h-100">
				<h4 class="text-uppercase"><b>{{ trans('text.6-least-frequent') }}</b></h4>
				<hr>
				<div class="adjust-element">
					<ul class="list-inline">
						@foreach($least_frequent_balls as $least_frequent_ball)
						<li class="list-inline-item">@include('web.components.loto-ball', ['number' => $least_frequent_ball, 'display_color' => Config::get('balls')[$least_frequent_ball]['color']])</li>
						@endforeach
					</ul>
				</div>
			</div>
		</div>
		<div class="col-lg-6 mb-4">
			<div class="bg-quaternary custom-card h-100">
				<h4 class="text-uppercase"><b>{{ trans('text.least-frequent') }}</b></h4>
				<hr>
				<div class="adjust-element">
					<ul class="list-inline">
						<li class="list-inline-item">@include('web.components.loto-ball', ['number' => $least_frequent_balls[5], 'display_color' => Config::get('balls')[$least_frequent_balls[5]]['color']])</li>
					</ul>
				</div>
			</div>
		</div>
	</div>

	<div class="bg-quaternary custom-card">
		<h4 class="text-uppercase mb-2"><b>{{ trans('text.graph') }}</b></h4>
		{{-- <p class="font-weight-light">{{ trans('text.graph-text') }}</p> --}}

		<div class="custom-chart mt-5">
			@foreach($counts as $key => $count)
			<div class="bar" style="grid-row-start: calc(100 - {{ $count }});"><span>#{{ $key }}</span><span>x{{ $count }}</span></div>
			@endforeach
		</div>
	</div>
</div>

@endsection