<div class="wrapper">
	<div style="margin-top: 35px;" class="crash coinflip">
		<div class="d-flex align-stretch justify-space-between">
			<div class="boomcity__betblock">
				<div class="boomcity__bets boomcity__play">
					<div class="boomcity__bet">
						<div onclick="disable(this);betBoom('1')" class="boomcity__bet-heading is-ripples flare x1 d-flex align-center justify-space-between">
							<span>X1</span>
						</div>
						<div class="boomcity__bet-info d-flex align-center justify-space-between">
							<span class="d-flex align-center" style="color: #9EABCD;">
								<svg class="icon small" style="margin-right: 8px;"><use xlink:href="images/symbols.svg#users"></use></svg>
								<span data-playersBoom="1"></span>
							</span>
							<span class="d-flex align-center" style="font-weight: 600;">
								<span data-sumBetsBoom="1"></span>
								<svg class="icon money" style="margin-left: 8px;"><use xlink:href="images/symbols.svg#coins"></use></svg>
							</span>
						</div>
						<div class="x100__bet-users x1">

						</div>
					</div>
					<div class="boomcity__bet">
						<div onclick="disable(this);betBoom('2')" class="boomcity__bet-heading is-ripples flare x2 d-flex align-center justify-space-between">
							<span>X2</span>
						</div>
						<div class="boomcity__bet-info d-flex align-center justify-space-between">
							<span class="d-flex align-center" style="color: #9EABCD;">
								<svg class="icon small" style="margin-right: 8px;"><use xlink:href="images/symbols.svg#users"></use></svg>
								<span data-playersBoom="2"></span>
							</span>
							<span class="d-flex align-center" style="font-weight: 600;">
								<span data-sumBetsBoom="2"></span>
								<svg class="icon money" style="margin-left: 8px;"><use xlink:href="images/symbols.svg#coins"></use></svg>
							</span>
						</div>
						<div class="x100__bet-users x2">

						</div>
					</div>
					<div class="boomcity__bet">
						<div onclick="disable(this);betBoom('5')" class="boomcity__bet-heading is-ripples flare x5 d-flex align-center justify-space-between">
							<span>X5</span>
						</div>
						<div class="boomcity__bet-info d-flex align-center justify-space-between">
							<span class="d-flex align-center" style="color: #9EABCD;">
								<svg class="icon small" style="margin-right: 8px;"><use xlink:href="images/symbols.svg#users"></use></svg>
								<span data-playersBoom="5"></span>
							</span>
							<span class="d-flex align-center" style="font-weight: 600;">
								<span data-sumBetsBoom="5"></span>
								<svg class="icon money" style="margin-left: 8px;"><use xlink:href="images/symbols.svg#coins"></use></svg>
							</span>
						</div>
						<div class="x100__bet-users x5">

						</div>
					</div>
					<div class="boomcity__bet">
						<div onclick="disable(this);betBoom('dice')" class="boomcity__bet-heading is-ripples flare dice_battle d-flex align-center justify-space-between">
							<span>Dice Battle</span>
						</div>
						<div class="boomcity__bet-info d-flex align-center justify-space-between">
							<span class="d-flex align-center" style="color: #9EABCD;">
								<svg class="icon small" style="margin-right: 8px;"><use xlink:href="images/symbols.svg#users"></use></svg>
								<span data-playersBoom="dice"></span>
							</span>
							<span class="d-flex align-center" style="font-weight: 600;">
								<span data-sumBetsBoom="dice"></span>
								<svg class="icon money" style="margin-left: 8px;"><use xlink:href="images/symbols.svg#coins"></use></svg>
							</span>
						</div>
						<div class="x100__bet-users xdice">

						</div>
					</div>
					<div class="boomcity__bet">
						<div onclick="disable(this);betBoom('lucky')" class="boomcity__bet-heading is-ripples flare lucky_drop d-flex align-center justify-space-between">
							<span>Lucky Drop</span>
						</div>
						<div class="boomcity__bet-info d-flex align-center justify-space-between">
							<span class="d-flex align-center" style="color: #9EABCD;">
								<svg class="icon small" style="margin-right: 8px;"><use xlink:href="images/symbols.svg#users"></use></svg>
								<span data-playersBoom="lucky"></span>
							</span>
							<span class="d-flex align-center" style="font-weight: 600;">
								<span data-sumBetsBoom="lucky"></span>
								<svg class="icon money" style="margin-left: 8px;"><use xlink:href="images/symbols.svg#coins"></use></svg>
							</span>
						</div>
						<div class="x100__bet-users xlucky">

						</div>
					</div>
					<div class="boomcity__bet">
						<div onclick="disable(this);betBoom('boom')" class="boomcity__bet-heading is-ripples flare boom_or_bust d-flex align-center justify-space-between">
							<span>Boom Or Bust</span>
						</div>
						<div class="boomcity__bet-info d-flex align-center justify-space-between">
							<span class="d-flex align-center" style="color: #9EABCD;">
								<svg class="icon small" style="margin-right: 8px;"><use xlink:href="images/symbols.svg#users"></use></svg>
								<span data-playersBoom="boom"></span>
							</span>
							<span class="d-flex align-center" style="font-weight: 600;">
								<span data-sumBetsBoom="boom"></span>
								<svg class="icon money" style="margin-left: 8px;"><use xlink:href="images/symbols.svg#coins"></use></svg>
							</span>
						</div>
						<div class="x100__bet-users xboom">

						</div>
					</div>

					<div class="diceBlocks d-flex align-stretch justify-space-between">
						<div class="diceBlock">
							<div class="diceWrap">
								<div class="diceBoom rolling">
									<div class="diceFace front"></div>
									<div class="diceFace up"></div>
									<div class="diceFace left"></div>
									<div class="diceFace right"></div>
									<div class="diceFace bottom"></div>
									<div class="diceFace back"></div>
								</div> 
							</div>
						</div>
						<div class="diceBlock">
							<div class="diceWrap">
								<div class="diceBoom rolling">
									<div class="diceFace front"></div>
									<div class="diceFace up"></div>
									<div class="diceFace left"></div>
									<div class="diceFace right"></div>
									<div class="diceFace bottom"></div>
									<div class="diceFace back"></div>
								</div> 
							</div>
						</div>
					</div>
				</div>

				<div class="coinBetBlock">
					<div class="coinBet">
						<svg class="icon_coin"><use xlink:href="images/symbols.svg?v16#coin"></use></svg>
						<button type="button" class="CoinsBtnDream" style="background-color: rgb(0, 150, 136);box-shadow: rgb(0, 121, 107) 0px 0.2em 0px 0px;">
							<span>1</span>
						</button>
					</div>
					<div class="betBlock d-flex align-center justify-space-between">
						<button class="d-flex align-center justify-center"><svg class="icon_arrow arrow_left"><use xlink:href="images/symbols.svg?v23#arrow_right"></use></svg></button>
						<button class="d-flex align-center justify-center"><svg class="icon_arrow"><use xlink:href="images/symbols.svg?v23#arrow_right"></use></svg></button>
					</div>
				</div>

				<input type="hidden" value="1" id="sum_bet" name="">

				
			</div>

			

			<div class="boomcity__main">
				<div class="boomcity__grid">
					<div class="boomcity__path d-flex justify-space-between flex-wrap">
						@for ($i = 1; $i <= 8; $i++)
						<div class="boomcity__path-item dice"><svg class="icon"><use xlink:href="/images/symbols.svg?v=12#boomcity_dice_{{($i - 1)}}"></use></svg></div>
						@endfor

						@for ($i = 1; $i <= 6; $i++)
						<div class="boomcity__path-item dice"><svg class="icon"><use xlink:href="/images/symbols.svg?v=12#boomcity_dice_{{$i}}"></use></svg></div>
						@for ($j = 1; $j <= 6; $j++)
						<div class="boomcity__path-item"></div>
						@endfor
						<div class="boomcity__path-item dice"><svg class="icon"><use xlink:href="/images/symbols.svg?v=12#boomcity_dice_{{$i}}"></use></svg></div>
						@endfor

						@for ($i = 1; $i <= 8; $i++)
						<div class="boomcity__path-item dice"><svg class="icon"><use xlink:href="/images/symbols.svg?v=12#boomcity_dice_{{($i - 1)}}"></use></svg></div>
						@endfor

					</div>

					<div class="boomcity__timer">
						<div class="x30__timer TimerBlock d-flex flex-column justify-center align-center" >
							<b id="boom_city__text">Начало через</b>
							<span id="boom_city__timer">30</span>
						</div>
					</div>


				</div>
			</div>
		</div>
	</div>
</div>  

<script type="text/javascript">
    socket.emit('BOOM_CONNECT')
    function getBoom(){
        $.post('/boom_city/get',{_token: csrf_token}).then(e=>{
            if(e.success){
                e.success.forEach((e)=>{
                    e = e
                    class_dop = ''
                    if(e.user_id == USER_ID){
                        class_dop = 'img_no_blur'
                    }

                    $('.x100__bet-users.x'+e.coeff).prepend('<div data-user-id='+e.user_id+' class="x100__bet-user d-flex align-center justify-space-between">\
                        <div class="history__user d-flex align-center justify-center">\
                        <div class="history__user-avatar '+class_dop+'" style="background: url('+e.img+') no-repeat center center / cover;"></div>\
                        <span>'+e.login+'</span>\
                        </div>\
                        <div class="x100__bet-sum d-flex align-center">\
                        <span>'+(Number(e.bet).toFixed(2))+'</span>\
                        <svg class="icon money" style="margin-left: 8px;"><use xlink:href="images/symbols.svg#coins"></use></svg>\
                        </div>\
                        </div>')

                }) 
                e.info.forEach((e)=>{
                    $('span[data-sumBetsBoom='+e.coeff+']').html((e.sum).toFixed(0))
                    $('span[data-playersBoom='+e.coeff+']').html(e.players)
                })

            }
           
        })
    }
    getBoom()
</script>
@auth
<script type="text/javascript">
	socket.emit('subscribe', 'roomGame_7_{{\Auth::user()->id}}');
</script>
@endauth