@extends('layout')

@section('content')

	
	<link rel="stylesheet" href="/styles/test.css"/>
    <link rel="stylesheet" href="/styles/fonts.css"/>
    <link rel="stylesheet" href="/styles/jquery.arcticmodal-0.3.css"/>
    <link rel="stylesheet" href="/styles/tooltipster.css"/>

	


	<script src="/assets/js/roulette.js"></script>
    <bgsound volume="-10000"></bgsound>
    

<script>
    @if(!Auth::guest())
    function updateBalance() {
        $.post('{{route('get.balance')}}', function (data) {
            $('.userBalance').text(data);
			$('.update_balance').text(data);
        });
    }
    function addTicket(id, btn){
        $.post('{{route('add.ticket')}}',{id:id}, function(data){
            updateBalance();
            return $.notify(data.text, data.type);
        });
    }	
    @endif  
</script>

 <script>

    @if(!Auth::guest())
		
	
	function addRouletteBet(obj, color_id){
			var bet = $('.bonus-game-bet-input').val();
			updateBalance();
			if(bet != ''){
				try{
					bet = parseInt(bet);
					$.post('{{route('add.roullette')}}',{bet:bet, color_id:color_id})
					.always(function(){
						updateBalance();
					});
				}catch(e){
					
				}
			}
		}
			var avatar = '{{ $u->avatar }}';		
    @endif

    </script>



    <div class="content">
<div class="game bonus-room">
			  <div class="game-content">
				 <div class="bonus-game-roulette">
					<div class="game-roulette">
					   <div>
						  <div class="game-roulette-numbers" style="transition: transform 10s; display: block; transform: rotate3d(0, 0, 1, 0deg);"></div>
						  <div class="bonus-game-state-container" style="transition: 0ms ease; transform: rotateY(0deg);">
							 <div class="bonus-game-state bonus-game-timer front" data-left-seconds="35" style="display: block;">
								<svg class="bonus-game-timer-svg" width="200" height="200" viewport="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
								   <circle r="65" cx="100" cy="100" stroke-dasharray="565.48" stroke-dashoffset="0" style="stroke-dashoffset: 0px; transition: stroke-dashoffset 0.1s linear;"></circle>
								</svg>
							 </div>
							 <div class="bonus-game-state bonus-game-pre-end back" style="display: block;">Розыгрыш</div>
							 <div class="bonus-game-state bonus-game-end black back" style="display: none;">10</div>
						  </div>
						  <div class="sprite game-roulette-cursor"></div>
						  <div class="sprite game-roulette-cursor-shadow"></div>
					   </div>
					</div>
					<div class="game-roulette-history">
					   <ul class="game-roulette-history-list" style="transform: translate3d(0px, 0px, 0px); transition: transform 0.5s;">
					   </ul>
					</div>
				 </div>
				 <div class="bonus-game-bet-calc">
					<div style="position:relative;">
						@if(!Auth::guest())
							<script>
								window.isUserLogged = true;
								
 
	
							</script>

							
							<div class="bonus-value-container"><span>Баланс: </span><span class="update_balance" style="color: #af9b0d;">{{ $u->money }}</span></div>
						@endif
					   <div class="bonus-game-calc">
						  <ul class="bonus-game-calc-button-list">
							 <li class="bonus-game-calc-button repeat-bet"><span class="sprite repeat-bet"></span></li>
							 <li class="bonus-game-calc-button clear"><span class="sprite clear"></span> </li>
							 <li class="bonus-game-calc-button value" data-value="1" data-method="plus">+1 </li>
							 <li class="bonus-game-calc-button value" data-value="5" data-method="plus">+5 </li>
							 <li class="bonus-game-calc-button value" data-value="10" data-method="plus">+10 </li>
							 <li class="bonus-game-calc-button value" data-value="100" data-method="plus">+100 </li>
							 <li class="bonus-game-calc-button value" data-value="2" data-method="multiply">x2 </li>
							 <li class="bonus-game-calc-button value" data-value="2" data-method="divide">1/2 </li>
							 <li class="bonus-game-calc-button all">Всё</li>
						  </ul>
						  <div class="bonus-game-bet-input-container"> <input class="bonus-game-bet-input" placeholder="Введите сумму..."> </div>
						  <div class="bonus-game-calc-place-bet-buttons">
							 <p class="place-bet-buttons-text">Поставить:</p>
							 <ul class="place-bet-buttons noselect">
								<li data-bet-type="red" class="bonus-game-calc-place-bet sprite bonus-red-button noselect" onclick="addRouletteBet(this, 0);">0</li>
								<li data-bet-type="zero" class="bonus-game-calc-place-bet sprite bonus-zero-button noselect" onclick="addRouletteBet(this, 1);">0</li>
								<li data-bet-type="black" class="bonus-game-calc-place-bet sprite bonus-black-button noselect" onclick="addRouletteBet(this, 2);">0</li>
							 </ul>
						  </div>
					   </div>
					   @if(Auth::guest())
						   <div class="bonus-game-auth">
							  <div>Авторизируйся, чтобы испытать удачу</div>
							  <a class="btn-yellow auth-link" href="http://csgokook.com/login" target=""><span class="icon-steam"></span> Войти через STEAM чтобы играть! </a> 
						   </div>
					   @endif
					   <div class="bonus-game-bet-info">
						  <p>Общая ставка:</p>
						  <ul class="bonus-game-bet-values">
							 <li data-bet-type="red" class="bonus-game-bet-value-container red">
								<div class="bonus-game-bet-value-progress" style="width: 0%; transition: width 500ms;"></div>
								<div class="bonus-game-bet-value">0</div>
							 </li>
							 <li data-bet-type="zero" class="bonus-game-bet-value-container zero">
								<div class="bonus-game-bet-value-progress" style="width: 0%; transition: width 500ms;"></div>
								<div class="bonus-game-bet-value">0</div>
							 </li>
							 <li data-bet-type="black" class="bonus-game-bet-value-container black">
								<div class="bonus-game-bet-value-progress" style="width: 0%; transition: width 500ms;"></div>
								<div class="bonus-game-bet-value black">0</div>
							 </li>
						  </ul>
					   </div>
					</div>
				 </div>
			  </div>
		   </div>
		   <div class="bonus-game-info"> <div class="game-title">Игра #<span id="game_id"></span></div>
  <div class="game-hash-info" style="font-size: 18px;" ></div>
<!--<a data-modal="#roul" href="#roul" class="fairplay">О Double Game</a>--> </div>
		   <!--<div>
				<p>Игра номер: <span id="game_id"></span></p>
				<p>Хеш игры: <span id="game_hash"></span></p>
				<p>Число: <span id="game_number"></span></p>
		   </div>-->
		   <div class="bets_container">
			<ul class="bets_list"></ul>
	       </div>
	   
		   </div>


         


@endsection