@extends('web.layouts.main')

@section('content')

@push('stylesheets')
<link rel="stylesheet" type="text/css" href="{{ asset('assets_web/libraries/slick-1.8.1/slick.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets_web/libraries/slick-1.8.1/slick-theme.min.css') }}">
@endpush

<div class="mb-4">
	@include('web.components.counter')
</div>

<div class="container">
	<div class="bg-quaternary border-radius overflow-hidden mb-5">
		<div class="px-4 pt-4">
			<h1 class="h4 text-uppercase text-center mb-4"><b>{{ trans('text.loto-results') }}</b></h1>

			<select class="form-control draw-results-select draws-js">
				@foreach($draws_results as $draw_results)
				<option value="{{ $draw_results->draw_number }}" {{ ($draw_results->draw_number == $draw_number ? 'selected' : '') }}>Draw # {{ $draw_results->draw_number }} - {{ date('d F, Y', strtotime($draw_results->date)) }}</option>
				@endforeach
			</select>

			<div class="row justify-content-center py-3 my-3 my-sm-5">
				<div class="col-auto">
					<div class="adjust-element text-center">
						<ul class="list-unstyled list-inline loto-results-ball">
							@if(isset($draw_result->balls) && $draw_result->balls)
							@foreach($draw_result->balls as $ball)
							<li class="list-inline-item">@include('web.components.loto-ball', ['number' => $ball, 'display_color' => Config::get('balls')[$ball]['color']])</li>
							@endforeach
							@endif
						</ul>
					</div>
				</div>
				@if($draw_result && $draw_result->youtube)
				<div class="col-auto align-self-center">
					{{-- <a href="{{ $draw_result->youtube }}" target="_blank"> --}}
						<button class="btn btn-watch-result" data-bs-toggle="modal" data-bs-target="#watchDrawModal"><img class="width-40 me-2" src="{{ asset('assets_web/images/icons/play-btn.svg') }}"> {{ trans('text.watch-draw') }}</button>
					{{-- </a> --}}
				</div>
				@endif
			</div>
		</div>

		<div class="table-responsive">
			<table width="100%" class="table-results">
				<col span="1" style="width: 25%;">
				<col span="1" style="width: 25%;">
				<col span="1" style="width: 25%;">
				<col span="1" style="width: 25%;">
				<thead>
					<th>{{ trans('text.winning-numbers') }}</th>
					<th>{{ trans('text.total-prizes') }}</th>
					<th>{{ trans('text.no-of-winning-grids') }}</th>
					<th>{{ trans('text.prize-per-grid') }}</th>
				</thead>
				<tbody>
					@if($draw_result)
					@php
						$idx = 0;
					@endphp
					@foreach($draw_result->results as $key => $result)
					@if(count($draw_result->balls) > 6 || count($draw_result->balls) < 7 && $key !== 1)
					@php
						$idx++;
					@endphp
					<tr>
						<td>{{ $idx }}</td>
						<td>{{ number_format($result[1]) ? number_format($result[1]) : '' }}</td>
						<td>{{ $result[2] }}</td>
						<td>{{ number_format($result[3]) ? number_format($result[3]) : '' }}</td>
					</tr>
					@endif
					@endforeach
					@endif
				</tbody>
			</table>
		</div>
	</div>
</div>

<div class="mb-5">
	@include('web.components.shortcuts')
</div>

<div class="mb-5">
	@include('web.components.are-you-a-winner')
</div>

<div class="container mb-5 pb-5">
	<div class="row justify-content-center">
		{{-- <div class="col-lg-6 pe-lg-4 mb-5 mb-lg-0">
			@include('web.components.our-winners')
		</div> --}}
		<div class="col-lg-6 ps-lg-4">
			@include('web.components.check-results')
		</div>
	</div>
</div>

@if($draw_result && $draw_result->youtube)
<div class="custom-modal modal fade" id="watchDrawModal">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content border-0">
			<div class="modal-body p-5">
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

				<iframe width="100%" height="315" src="{{ $draw_result->youtube }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
			</div>
		</div>
	</div>
</div>
@endif

@endsection

@push('scripts')
<script type="text/javascript" src="{{ asset('assets_web/libraries/slick-1.8.1/slick.min.js') }}"></script>
<script>
	$(function(){
      // bind change event to select
      $(".draws-js").on('change', function () {
      	var draw_number = $(this).val();
      	if(draw_number){
      		window.location = "{{ route('web.results', [$locale]) }}"+'/'+draw_number;
      	}
      	return false;
      });
  });
</script>
@endpush