@extends($activeTemplate.'layouts.game')

@push('style')
	<link rel="stylesheet" href="{{ asset('users/assets/trade/css/uspin.css') }}{{$catch}}" >
@endpush

@section('content')
<div class="mainDiv">
    <div class="g4">
		<div class="pfrl3ez pgafrinl3ez" style="display:none;">
			<div class="srwwvyw"><img class="img-bg rotate" src="/users/assets/trade/img/gold_bg.4fea7639.png" alt="">
				<div class="bg-wrap"><img class="img_glod" src="/users/assets/trade/img/gold.7f96d3f0.png" alt="">
					<div class="cont">
						<div class="tit ttu">Congratulations!</div>
						<div class="desc">You’ve got big win at least more than playing cost</div>
						<div class="scoll-num amount s1et3xev">0.0000 SOL</div>
						<div class="tit ttu coinvalue">Value ~ $0.034</div><br/>
						<button class="cloxje ui-button button-normal s-conic"><div class="button-inner">Claim Rewards</div></button>
					</div>
				</div>
			</div>
		</div>

		<div class="pfrl3ez lotpfls3ez" style="display:none;">
			<div class="srwwvyw"><img class="img-bg rotate" src="/users/assets/trade/img/gold_bg.4fea7639.png" alt="">
				<div class="bg-wrap"><img class="img_glod" src="/users/assets/trade/img/gold.7f96d3f0.png" alt="">
					<div class="cont">
						<div class="tit ttu">Opps!!! Ooh no!</div>
						<div class="desc"><b>You slightly did not win high to cover up playing cost!</b></div>
						<div class="scoll-num amount s1et3xev">0.0000 SOL</div>
						<div class="tit ttu coinvalue">Value ~ $0.034</div><br/>
						<button class="cloxje ui-button button-normal s-conic"><div class="button-inner">Claim Rewards</div></button>
					</div>
				</div>
			</div>
		</div>
		
        <div class="lhh5ecb l1wyc82y">
            <div class="landing-main-page p-top">
                <div class="s1er8ggf">
                    <div class="bg top" style="z-index: -2;"></div>
                    <div class="bg bottom" style="z-index: -2;"></div>
					<img class="layout-img left" src="/users/assets/trade/img/layout.4f2f6fa1.png" alt="" />
					<img class="layout-img" src="/users/assets/trade/img/layout_right.9c6e4442.png" alt="" />
					<img class="pc-img diamond-a-img" src="/users/assets/trade/img/diamond.df9bb23c.png" />
                    <img class="pc-img diamond-b-img" src="/users/assets/trade/img/diamond.df9bb23c.png" />
					<img class="pc-img star-a-img" src="/users/assets/trade/img/star.b35b0781.png" alt="" />
					<img class="pc-img star-b-img" src="/users/assets/trade/img/star.b35b0781.png" alt="" />
					<img class="pc-img star-c-img" src="/users/assets/trade/img/star.b35b0781.png" alt="" />
					<img class="pc-img star-d-img" src="/users/assets/trade/img/star.b35b0781.png" alt="" />
					<img class="pc-img coin-a-img" src="/users/assets/trade/img/coin.5ce9629a.png" alt="" />
					<img class="pc-img coin-b-img" src="/users/assets/trade/img/coin.5ce9629a.png" alt="" />
					<img class="pc-img coin-c-img" src="/users/assets/trade/img/coin.5ce9629a.png" alt="" />
					<img class="pc-img chips-a-img" src="/users/assets/trade/img/chips.1dc11d35.png" alt="" />
					<img class="pc-img chips-b-img" src="/users/assets/trade/img/chips.1dc11d35.png" alt="" />
					
					<div class="header">
						<a href="{{ route('user.games') }}" style="position: relative; z-index: 3; display: inline-block;">
							<img class="logo" src="{{getImage(imagePath()['logoIcon']['path'] .'/logo.png')}}{{$catch}}" alt="">
							<p style="font-size:18px;margin: 0;color:#FFF;">FUND: <u>{{ config('settings')->cur_sym }}<span class="usersbal">{{ getAmount($user->balance,4 ) }}</span></u></p>
						</a>
						<div id="game" class="s1wut3m0" id="s1wut3m0">
							<div class="spin-wrap" id="spin-wrap" style=" transform: rotate(0deg); transition: initial;">
								<img src="/users/assets/trade/img/crypto_spin.5290c0a3.png" class="spin-main" alt="" />
								<img src="/users/assets/trade/img/light.8df519d7.png" class="spin-key active " alt="" />
								@foreach( config('als') as $list)
									<div class="spin-item" title="{{ $list[4]}}" style="transform: rotate({{$list[0]}});"><span class="amount">{{$list[3]}}</span><img class="coin-icon" src="/users/assets/trade/img/{{$list[2]}}"></div>
								@endforeach
							</div>
							<div class="point-img">
								<div class="light-wrap">
									<div class="point-light"></div>
								</div>
								<img src="/users/assets/trade/img/point_diamond.3f948ba0.png" class="spin-point" alt="">
							</div>
							
							<img src="/users/assets/trade/img/spin_center.0f4ed38a.png" class="spin-center" alt="" />
							<img src="/users/assets/trade/img/btn_luckspin.c9fdbf75.png" class="spin-btn active" alt="" />
							<img src="/users/assets/trade/img/coco.0d3340ea.png" class="pc-img img-coco" alt="" />
							<img src="/users/assets/trade/img/amount.4c3ac579.png" class="pc-img img-amount" alt="" />
						</div>

						<button type="button" onclick="spin()" class="ui-button button-normal spin-botbtn active cmn-btn" style="z-index: 108; position: relative;">
							<div class="button-inner">
								<img src="/users/assets/trade/img/spin_now.701c87bb.png" alt="" style="width:90%" />
							</div>
						</button>
					</div>

					<div class="playHistroy">
						@foreach( $games as $game)
						<div class="box data-box data-height winstate{{ $game->user_select }}" style="height: auto;">
							<div class="item">
								<div class="left" style="width:65%">
									<div class="info">
										<div class="name"><span><b>SPIN</b></span><span class="rate">{{ $game->coin }}::{{config('settings')->cur_sym}}{{ $game->rate }}</span></div>
										<div class="volume">{{ $game->win_amo+0 }} {{ $game->coin }} win ~ value <u style="color:#0b2cba;font-size:700;">{{config('settings')->cur_sym}}{{ $game->value+0 }}</u></div>
										<small style="margin-bottom: -6px;">{{ showDatetime($game->created_at,'jS F Y') }}</small>
									</div>
								</div>
								<div class="" style="width:35%;text-align: center;">
									<table class="read">
										<tr><td><span class="report state2">{{config('settings')->cur_sym}}{{ $game->invest+0 }}</span></td></tr>
										<tr><td><span class="report state{{ $game->user_select }}">{{ round(($game->value - $game->invest), 4) }}</span></td></tr>
									</table>
								</div>
							</div>
						</div>
						@endforeach
					</div>
                </div>
            </div>
        </div>
	</div>


	<audio id="lost">
		<source src="{{ asset('users/assets/trade/audio/lost.mp3') }}" type="audio/mpeg">
	</audio>
	<audio id="good">
		<source src="{{ asset('users/assets/trade/audio/good.mp3') }}" type="audio/mpeg">
	</audio>
	<audio id="spin">
		<source src="{{ asset('users/assets/trade/audio/spinwheel.mp3') }}" type="audio/mpeg">
	</audio>
	<audio id="applause">
		<source src="{{ asset('users/assets/trade/audio/applause.mp3') }}" type="audio/mpeg">
	</audio>
</div>
@endsection


@push('script')
    <script>
        "use strict";

		let siRatio = 22.5; var timerA;
		var uLaDa = <?php echo json_encode( config('als') ); ?>;
		let uBal = <?php echo getAmount($user->balance, 2); ?>;
		let plcost = <?php echo $plcost ; ?>;
		let wallet = 0;var overlay = $('.van-overlay');
		var pHistory = $(".playHistroy");
		var currency = "{{config('settings')->cur_sym}}";
		const box = document.getElementById("spin-wrap");
		const element = $('.s1wut3m0');
		
		var t = setInterval(function() {
				$(".spin-key").toggleClass('light')
			}, 1000
		);

		$(document).on("click", ".cloxje", function() {
			$('.pfrl3ez').hide();
		});

		$(document).on("click", ".btnTopup", function() {
			if ( wallet == 0 ) {
				error('Select a payment method for topup'); return false;
			}
			return true;
		})
		
		const el = document.querySelector(".spin-wrap");
		let number = Math.ceil(Math.random() * 1000) + 350;
		var index = 0;
		
		$("body").delegate('.cion', 'click', function (){
			var result = $(this).data('resource');
			$('.edit-currency').val(result.currency);
			$('.edit-method-code').val(result.method_code);

			wallet = result.id;
			$(".cion").removeClass('anbtnsi');
			$(this).addClass('anbtnsi');
		})
		
		function succOrError() {
			$('.cmn-btn').show();
		}
		
		function errors(data) {
			if (data.errors) {
				notify('error', data.errors);
				succOrError();
				return true;
			}
			if (data.error) {
				notify('error', data.error);
				succOrError();
				return true;
			}
		}

		function startGame(data){
			number = data.number;
			index  = data.index;

			// spin
			box.style.setProperty("transition", "all ease 10s");
			box.style.transform = "rotate(" + data.number + "deg)";
			
			timerA = setInterval(function() {
				succOrError();
				endGame(data);
			}, 10000);
			
		}

		function spin() {

			if( uBal >= plcost ){
				
				$.ajax({
					headers: {
						'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
					},
					url: "{{ route('user.play.playspinWheel') }}",
					method: 'POST',
					data: {number:number},
					success: function(data) {
						if (errors(data) == true) {
							return false;
						}
						uBal = (uBal-plcost).toFixed(4);
						$('.usersbal').html(uBal);

						$('audio#spin')[0].play();
						$('.cmn-btn').hide();
						addHistory(plcost);
						startGame(data);
					},
				});

			}else{
				info('Insufficient Balance');
				//showPopup('.topUpWallet');
			}
		}
		
		function addHistory(a){
			var html = '<div class="box data-box data-height" style="height: auto;">';
				html += '<div class="item">';
					html += '<div class="left" style="width:65%">';
						html += '<div class="info">';
							html += '<div class="name"><span><b>SPIN WHEEL</b></span></div>';
							html += '<div class="volume">Awaiting your lucky win result</div>';
						html += '</div>';
					html += '</div>';
					html += '<div class="right" style="width:35%">';
						html += '<div class="label label-decrease read">'+currency+a+'</div>';
					html += '</div>';
				html += '</div>';
			html += '</div>';
			
			pHistory.prepend(html);
		}
		
		function addResult(data){
			pHistory.find('div:first').remove();
			var html = '<div class="box data-box data-height winstate'+data.isWin+'" style="height: auto;">';
			html += '<div class="item"><div class="left" style="width:65%"><div class="info">';
				html += '<div class="name"><span><b>SPIN</b></span><span class="rate">'+data.coin+'::'+currency+data.rate+'</span></div>';
				html += '<div class="volume">'+data.reward+' '+data.coin+' win ~ value <u style="color:#0b2cba;font-size:700;">'+currency+data.value+'</u></div>';
				html += '<small style="margin-bottom: -6px;">'+data.created_at+'</small>';
			html += '</div></div><div class="" style="width:35%;text-align: center;"><table class="read">';
				html += '<tr><td><span class="report state2">'+currency+data.invest+'</span></td></tr>';
				html += '<tr><td><span class="report state'+data.isWin+'">'+currency+data.gainOrLost+'</span></td></tr>';
			html += '</table></div></div></div>';
			pHistory.prepend(html);
		}
		
		function endGame(data){
			clearInterval(timerA);
			$('.s1et3xev').html(data.reward + " " + data.coin);
			$('.coinvalue').text('value ~ ' + data.value);
			if( data.isWin == 1 ){
				$('audio#applause')[0].play();
				$('.pgafrinl3ez').show();
			}else if( data.isWin == 2 ){
				$('audio#good')[0].play();
				$('.pgafrinl3ez').show();
			}else{
				$('audio#lost')[0].play();
				$('.lotpfls3ez').show();
			}
			addResult(data);
			uBal = parseFloat(data.balance).toFixed(4);
			$('.usersbal').text(uBal);
		}
    </script>
@endpush
