@extends('web.layouts.main')

@section('content')

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

<div class="container">
	@livewire('play-bouquet', ['locale' => $locale, 'loto_bouquets' => $loto_bouquets])
</div>

@if(Session::has('funds-modal'))
{{-- Funds Modal --}}
<div class="custom-modal modal fade" id="fundsModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content border-0">
			<div class="modal-body p-5">
				<div class="text-center px-lg-5">
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

					<p class="h4 text-uppercase mb-4"><b>{{ trans('text.insufficient-funds') }}</b></p>

					<p class="mb-4">{{ trans('text.add-funds-to-wallet') }}</p>

					<a href="{{ route('web.credit-card-deposit', $locale) }}">
						<button class="btn btn-custom font-weight-bold px-5">{{ trans('text.add-funds-btn') }}</button>
					</a>
				</div>
			</div>
		</div>
	</div>
</div>
@endif

@endsection

@push('scripts')
<script>
	@if(Session::has('funds-modal'))
	{{-- Show funds modal if insufficient funds --}}
	$(function(){
		$('#fundsModal').modal('show');
	});
	@endif
</script>
@endpush