@extends('base')

@section('content')

	@csrf
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
	<script type="text/javascript" src="https://www.all2sale.com/randfood/shake.js"></script>
	<script type="text/javascript">
		var looper;
		var looper_stop = 0;
		var degrees = 0;

		var array=[];
		@foreach($foodys as $value)
			array.push("{{$value->fname}}");
		@endforeach
		function rand() {
			var elem = document.getElementById('img1');
			if(navigator.userAgent.match("Chrome")){
				elem.style.WebkitTransform = "rotate("+degrees+"deg)";
			} else if(navigator.userAgent.match("Firefox")){
				elem.style.MozTransform = "rotate("+degrees+"deg)";
			} else if(navigator.userAgent.match("MSIE")){
				elem.style.msTransform = "rotate("+degrees+"deg)";
			} else if(navigator.userAgent.match("Opera")){
				elem.style.OTransform = "rotate("+degrees+"deg)";
			} else {
				elem.style.transform = "rotate("+degrees+"deg)";
			}
			if(degrees == 0 && looper_stop == 0){
				looper = setTimeout('rand()',2);
			}
			if(looper_stop == 10){
				degrees = 0;
				var show=array[Math.floor(Math.random() * array.length)];
				document.getElementById('imagef').innerHTML = '<img onclick="this.remove()" style="width: 100%;" src="https://www.all2sale.com/randfood/f.gif">';
				document.getElementById('show').innerHTML = show;
				looper_stop = 0;
				degrees = 0;
			}
			if(degrees > 0){
				var show=array[Math.floor(Math.random() * array.length)];
				document.getElementById('show').innerHTML = show;
				looper = setTimeout('rand()',2);
			}
			degrees = degrees+2+looper_stop;
			if(degrees > 35){
				degrees = 1;
				looper_stop++;
			}
		}

		window.onload = function() {

			var myShakeEvent = new Shake({
				threshold: 15
			});

			myShakeEvent.start();

			window.addEventListener('shake', shakeEventDidOccur, false);

			function shakeEventDidOccur () {
				rand();
			}
		};
	</script>
<!-- </head>
<body style="background: ;margin-top: 70px"> -->
	<div class="container text-center">
		<div class="row">
			<div class="col-md-12">
				<span style="margin-top: -100px;position: fixed;bottom: 0px;width: 100%;left: 0px;" id="imagef"></span>
				<img src="" style="width: 150px;position: absolute;margin-top: 133px;margin-left: 70px;z-index: 150;">
				<img id="img1" src="https://www.all2sale.com/randfood/cog.png" alt="cog1" style="width: 300px;z-index: 100;">
				<h1 style="color: #00000;width: 100%;height: 45px;word-break: break-all;" id="show">เขย่าสิ !!</h1>
				<br>
				<button class="btn btn-success" onclick="rand();" >สุ่มเลย วันนี้กินไรดีนะ !!</button>
			</div>
		</div>
	</div>
<a class="btn btn-danger" href="/foods" type="button">เลือกวัตถุดิบก็ได้นะ !!</a>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>


@endsection
