@extends('Layouts.dash')
@section('seo')
<link rel="shortcut icon" href="{{asset('/images/general/'.$gt->favicon)}}" type="image/x-icon" />
{!! SEO::generate() !!}
@endsection


@section('content')
<link rel="stylesheet" type="text/css" href="{{asset('home/spin.css')}}">

<!-- App Capsule -->
<div id="appCapsule">
	<!-- Wallet Card -->
	<div class="section wallet-card-section pt-1">
		<div class="wallet-card">
			<!-- Balance -->
			<div class="balance">
				<div class="left">
					<h1 class="total text-center" style="font-size: 1.5em;">Daily Lottery Spin</h1>
				</div>
			</div>
			<!-- * Balance -->
			<!-- Wallet Footer -->
			<div class="wallet-footer">
				<div class="section mb-5 p-2">
					<div class="card">
						<div class="card-body">
							@include('alert')
							<form method="post" data-action="{{ route('roll') }}" action="{{route('roll')}}" id="spinForm" enctype="multipart/form-data">
								@csrf
								<input style="display:none;" value="{{ Auth::user()->id }}" name="id" id="userid">
								<div class="form-group boxed">
									<div id="spinner" style="position: relative;margin: 1em auto 0;overflow: hidden;">
										<img width="220px" id="spinBG" src="{{asset('home/112.png')}}">
										<img width="220px" id="spin" src="{{asset('home/pp2.png')}}" class="spinAround2" style="z-index: 2;position: absolute;top: 0px;left: 0px;">
									</div>
								</div>

								<br>

								<div class="form-buthton-group transparent">
									<button type="submit" class="btn btn-primary btn-block btn-lg" onclick="rolspin();">Roll Lottery</button>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
			<!-- * Wallet Footer -->
		</div>
	</div>
	<script>
		$(document).ready(function() {
			setTimeout(function() {
				$('#spinForm').submit();
			}, 5000); // 3 seconds in milliseconds
			
			$('#spinForm').on('submit', function(e) {
				e.preventDefault();
				
				//var url = $(this).attr('data-action');
				
				$.ajaxSetup({
					headers: {
						'X-CSRF-Token': $('meta[name=csrf-token]').attr('content')
					}
				});
				var formData = {
					id: $("#userid").val(),
				};
				$.ajax({
					type: "POST",
					//url: url,
					url: "{{ route('roll') }}",
					data: formData,
					contentType: false,
					processData: false,
					cache: false,
					dataType: "json",
					headers: {
						'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
					},
					success: function (response) {
						var content = response.success;
						notification('notification-1', 3000);
						$('#success-message').text(response.success);
						$('#success-message').html(response.success);
					},
					error: function(response) {
						notification('notification-2', 3000);
					},
					onClose: function(data) {
						//console.log('Error:', data.responseText);
					}
				});
			});
		});
	</script>
	<!-- Wallet Card -->

	<!-- space -->
	<br><br>
	<!-- end space -->

	<!-- copy alert -->
	<div id="notification-1" class="notification-box">
		<div class="notification-dialog ios-style bg-success">
			<div class="notification-header">
				<div class="in">
					@if(Auth::user()->avatar == "no-avatar.png")
					<img src="{{asset('no-avatar.png')}}" alt="image" class="imaged w24 rounded">
					@else
					<img src="{{asset('/images/users/'.Auth::user()->avatar)}}" alt="image" class="imaged w24 rounded">
					@endif
					<strong>{{ Auth::user()->fullname }}</strong>
				</div>
				<div class="right">
					<span>Just now</span>
					<a href="#" class="close-button">
						<ion-icon name="close-circle"></ion-icon>
					</a>
				</div>
			</div>
			<div class="notification-content">
				<div class="in">
					<div class="text" id="success-message">
						<script>
							var content = response.success;
							//var tes = JSON.parse();
							document.write(content);
						</script>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- * copy alert -->

</div>
<!-- * App Capsule -->
<script src="{{asset('home/jquery-1.js')}}"></script>
<script src="{{asset('home/spin.js')}}"></script>

@include('Partial.bottom')
@include('Partial.sidebar')

@endsection