@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')

@include('web.components.page-header', ['heading' => trans('text.my-account')])

<div class="container mb-5">
	@include('web.layouts.header.my-account-nav')

	<div class="bg-quaternary custom-card">
		@if($user_favorites->count() > 0)

		<form method="POST" action="{{ route('web.favorites.add-to-cart', $locale) }}">
			@csrf

			<div class="table-responsive">
				<table width="100%" class="my-account-table mb-3">
					<colgroup>
						<col span="1" style="width: 60px;">
						<col span="1" style="width: 60%;">
						<col span="1" style="width: 20%;">
						<col span="1" style="width: 20%;">
					</colgroup>
					<thead>
						<th></th>
						<th>{{ trans('text.favorites-grids') }}</th>
						<th class="text-center">{{ trans('text.type') }}</th>
						<th class="text-center">{{ trans('text.price') }}</th>
						<th></th>
					</thead>
					<tbody>
						@foreach($user_favorites as $grid)
						<tr>
							<td>
								<div class="text-center">
									<input id="checkbox-favorite-{{ $grid->id }}" name="grids[]" type="checkbox" value="{{ $grid->id }}" class="check-custom">
									<label for="checkbox-favorite-{{ $grid->id }}">&nbsp;</label>
								</div>
							</td>
							<td>
								@foreach($grid->grid as $ball)
								<span>{{ $ball }}</span>
								@endforeach
							</td>
							<td class="text-center">{{ $grid->LotoGame->type }}</td>
							<td class="text-center text-primary">{{ $grid->price_formated }}</td>
							<td>
								<form method="POST" action="{{ route('web.favorites.delete', $locale) }}">
									@csrf

									<input type="hidden" name="grid_id" value="{{ $grid->id }}">

									<img onclick="confirm(trans('status.delete_grid')) ? this.parentElement.submit() : ''" class="width-20" src="{{ asset('assets_web/images/icons/trash.svg') }}">
								</form>
							</td>
						</tr>
						@endforeach
					</tbody>
				</table>
			</div>

			<div class="text-center text-md-end">
				<button type="submit" class="btn btn-custom px-4" onclick="confirm(trans('status.add_to_cart')) ? this.parentElement.submit() : event.preventDefault();">{{ trans('text.play-selected-grids') }}</button>
			</div>
		</form>

		@else

		<span>No favorites grids available!</span>

		@endif
	</div>
</div>

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

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

@endsection

@push('scripts')
<script type="text/javascript" src="{{ asset('assets_web/libraries/slick-1.8.1/slick.min.js') }}"></script>
@endpush