@extends('web.layouts.main')

@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

@section('content')

<div class="row mb-5">
	<div class="col-lg-6 pe-lg-0">
		<div class="d-flex align-items-end bg-balls bg-quaternary text-uppercase text-white text-center p-5 h-100" style="background-image: url({{ asset($home_page->image) }});">
			{{-- <div class="picture-wrapper padding-top-66">
				<img src="{{ asset('assets_web/images/backgrounds/logo-ball.svg') }}" alt="Logo">
			</div> --}}

			<div>
				@if($setting->download_text)
				<p class="h3 mb-2">{{ trans('text.play-loto-anywhere') }}</p>
				<p class="h1 font-weight-bold">{{ trans('text.download-our-app') }}</p>
				@endif

				<div class="row justify-content-center mt-4">
					@if($setting->apple_app)
					<div class="col-6 col-sm-4 col-lg-3">
						<a href="{{ $setting->apple_app }}" target="_blank">
							<img src="{{ asset('assets_web/images/stores/apple_store.svg') }}" alt="Apple Store">
						</a>
					</div>
					@endif
					@if($setting->android_app)
					<div class="col-6 col-sm-4 col-lg-3">
						<a href="{{ $setting->android_app }}" target="_blank">
							<img src="{{ asset('assets_web/images/stores/google_store.svg') }}" alt="Google Play Store">
						</a>
					</div>
					@endif
				</div>
			</div>
		</div>
	</div>
	<div class="col-lg-6 ps-lg-0">
		<div class="bg-quaternary text-uppercase text-center px-3 px-lg-5 p-5 h-100">
			<div class="d-table w-100 h-100">
				<div class="d-table-cell align-middle">
					<div class="text-uppercase h2">
						{!! $home_page->text_top !!}
					</div>

					@if($home_page->video_link)
					<iframe class="my-4" width="100%" height="315" src="{{ $home_page->video_link }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
					@endif

					<div class="h2 text-uppercase">
						{!! $home_page->text_bottom !!}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="container mb-5">
	<div class="row">
		<div class="col-xl-8 pe-xl-4 mb-5 mb-xl-0">
			<div class="custom-card bg-quaternary d-flex flex-column h-100">
				<h3 class="text-uppercase"><b>{{ trans('text.loto-results') }}</b></h3>
				<hr>
				@if(isset($latest_result->balls) && $latest_result->balls)
				<div class="mb-3">
					{{ trans('text.draw') }} #{{ $latest_result->Draw->draw_number }}
					<span class="mx-5">|</span>
					<span dir="ltr">{{ date('d F, Y', strtotime($latest_result->Draw->date)) }}</span>
				</div>
				<div class="adjust-element py-4">
					<ul class="list-unstyled list-inline loto-results-ball home">
						<li class="list-inline-item d-none d-md-inline-block"><img class="doodle me-4" src="{{ asset('assets_web/images/icons/doodle-red.svg') }}"></li>
						@foreach(json_decode($latest_result->getAttributes()['balls']) as $ball)
						<li class="list-inline-item">@include('web.components.loto-ball', ['number' => $ball, 'display_color' => Config::get('balls')[$ball]['color']])</li>
						@endforeach
					</ul>
				</div>
				@if($latest_result->youtube)
				<div class="text-end mt-auto">
					{{-- <a href="{{ $latest_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
				@endif
			</div>
		</div>
		<div class="col-xl-4 ps-xl-4">
			<div class="custom-card bg-quaternary text-center h-100">
				<p class="mb-2">{{ trans('text.next-jackpot') }}</p>
				<p class="h2 text-primary"><b>{{ $next_draw->next_loto_jackpot_formated }}</b></p>

				<hr>

				<div class="row">
					<div class="col-6">
						<p>{{ trans('text.next-draw') }} #{{ $next_draw->draw_number }}</p>
					</div>
					<div class="col-6">
						<p class="h5 text-primary" dir="ltr">{{ date('d M, Y', strtotime($next_draw->date)) }}</p>
					</div>
				</div>

				<div class="mt-3">
					<p class="small mb-1">{{ trans('text.time-left') }}</p>
					<div class="countdows-js" data-date="{{ $next_draw->date }}" dir="ltr">
						<div class="jackpot-counter home">
							<span class="day">00</span>
							<span class="text-uppercase">{{ trans('text.days') }}</span>
						</div>
						<div class="jackpot-counter home">
							<span class="hr">00</span>
							<span>{{ trans('text.hrs') }}</span>
						</div>
						<div class="jackpot-counter home">
							<span class="min">00</span>
							<span>{{ trans('text.min') }}</span>
						</div>
						<div class="jackpot-counter home">
							<span class="sec">00</span>
							<span>{{ trans('text.sec') }}</span>
						</div>
					</div>
				</div>

				@if(Auth::guard('user')->check())
				<a href="{{ route('web.play', $locale) }}">
					<button class="btn btn-custom font-weight-bold w-100 mt-4">{{ trans('text.play-now') }}!</button>
				</a>
				@else
				@if(env('PLAY_MODE'))
				<button class="btn btn-custom font-weight-bold w-100 mt-4" data-bs-toggle="modal" @if(env('PLAY_MODE_SOON')) data-bs-target="#comingSoonModal" @else data-bs-target="#loginModal" @endif>{{ trans('text.play-now') }}!</button>
				@endif
				@endif
			</div>
		</div>
	</div>
</div>

<!-- <div class="container mb-5">
	<div class="custom-card bg-quaternary">
		<div class="row justify-content-center">
			<div class="col-lg-3 text-center align-self-center mb-5 mb-lg-0">
				<p class="h2 text-primary text-uppercase mb-3"><b>{{ $section->title }}</b></p>
				<div class="h5">
					{!! $section->text !!}
				</div>
			</div>
			<div class="col-lg-8">
				<div class="row">
					@foreach($loto_games as $loto_game)
					<div class="col-6 col-sm-4 col-md-3">
						<div class="text-center p-2">
							<div class="play-loto text-white">
								<div class="content">
									<p class="display-4">{{ $loto_game->numbers }}</p>
									<small>{{ trans('text.numbers') }}</small>
								</div>
							</div>
							<div class="action">
								@if(Auth::guard('user')->check())
								<a href="{{ route('web.play', [$locale, $loto_game->numbers]) }}">
									<button class="btn text-uppercase mb-1">{{ trans('text.play') }}</button>
								</a>
								@else
									@if(env('PLAY_MODE'))
										<button class="btn text-uppercase mb-1" data-bs-toggle="modal" @if(env('PLAY_MODE_SOON')) data-bs-target="#comingSoonModal" @else data-bs-target="#loginModal" @endif>{{ trans('text.play') }}</button>
									@endif
								@endif
									<p class="h5">{{ $loto_game->price_formated }}</p>
								</div>
							</div>
						</div>
						@endforeach
						<div class="col-6 col-sm-4 col-md-3">
							<div class="text-center p-2">
								<div class="play-loto text-white">
									<div class="content">
										<p class="h3">{{ trans('text.bouquet') }}</p>
									</div>
								</div>
								<div class="action">
								@if(Auth::guard('user')->check())
								<a href="{{ route('web.play.bouquet', $locale) }}">
									<button class="btn text-uppercase mb-1">{{ trans('text.play') }}</button>
								</a>
								@else
									@if(env('PLAY_MODE'))
										<button class="btn text-uppercase mb-1" data-bs-toggle="modal" @if(env('PLAY_MODE_SOON')) data-bs-target="#comingSoonModal" @else data-bs-target="#loginModal" @endif>{{ trans('text.play') }}</button>
									@endif
								@endif
								</div>
							</div>
						</div>
						<div class="col-6 col-sm-4 col-md-3">
							<div class="text-center p-2">
								<div class="play-loto text-white">
									<div class="content">
										<p class="h3">{{ trans('text.replay-favorite') }}</p>
									</div>
								</div>
								<div class="action">
								@if(Auth::guard('user')->check())
								<a href="{{ route('web.favorites', $locale) }}">
									<button class="btn text-uppercase mb-1">{{ trans('text.play') }}</button>
								</a>
								@else
									@if(env('PLAY_MODE'))
										<button class="btn text-uppercase mb-1" data-bs-toggle="modal" @if(env('PLAY_MODE_SOON')) data-bs-target="#comingSoonModal" @else data-bs-target="#loginModal" @endif>{{ trans('text.play') }}</button>
									@endif
								@endif
								</div>
							</div>
						</div>
					<div class="col-6 col-sm-4 col-md-3">
						<div class="text-center p-2">
							<div class="play-loto text-white">
								<div class="content">
									<p class="h3">{{ trans('text.last-order') }}</p>
								</div>
							</div>
							<div class="action">
								@if(Auth::guard('user')->check())
								<a href="{{ route('web.play-last-order', $locale) }}">
									<button class="btn text-uppercase mb-1">{{ trans('text.play') }}</button>
								</a>
								@else
									@if(env('PLAY_MODE'))
										<button class="btn text-uppercase mb-1" data-bs-toggle="modal" @if(env('PLAY_MODE_SOON')) data-bs-target="#comingSoonModal" @else data-bs-target="#loginModal" @endif>{{ trans('text.play') }}</button>
									@endif
								@endif
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div> -->

<div class="mb-5">
	@include('web.components.shortcuts')
</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($latest_result && $latest_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="{{ $latest_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>
	var jackpot_date = $('.countdows-js').attr('data-date');
	jackpot_date = new Date(jackpot_date.replace(/\s/, 'T')).getTime();

	var x = setInterval(function() {
		var now = new Date(new Date().toLocaleString('en', {timeZone: 'Asia/Baghdad'})).getTime();

		var distance = jackpot_date - now;

		var days = Math.floor(distance / (1000 * 60 * 60 * 24));
		var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
		var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
		var seconds = Math.floor((distance % (1000 * 60)) / 1000);

		$('.countdows-js .day').html(days);
		$('.countdows-js .hr').html(hours);
		$('.countdows-js .min').html(minutes);
		$('.countdows-js .sec').html(seconds);

		if(distance < 0) {
			clearInterval(x);
			$('.next-jackpot-js').html('???');
			$('.countdows-js').html('Please refresh your page!');
		}
	}, 1000);
</script>
@endpush